duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Room-Tool

Browse Source
This commit is contained in:
DuckieTM 2025-03-11 22:30:51 +01:00
parent 888738bbba
commit d403816265
9 changed files with 997 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/common/card/NitroCardView.scss
View File

@ -1,5 +1,5 @@
$nitro-card-header-height: 33px;
$nitro-card-tabs-height: 33px;
$nitro-card-header-height: 133px;
$nitro-card-tabs-height: 133px;
.nitro-card {
resize: both;
@ -71,7 +71,7 @@ $nitro-card-tabs-height: 33px;
}
.nitro-card-tabs {
background-color: $secondary;
background-color: #FFFFFF;
.nav-item {
padding: $nav-link-padding-y $nav-link-padding-x;

1
src/common/draggable-window/DraggableWindow.tsx
View File

@ -5,6 +5,7 @@ import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api';
import { DraggableWindowPosition } from './DraggableWindowPosition';
const CURRENT_WINDOWS: HTMLElement[] = [];
const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
const BOUNDS_THRESHOLD_TOP: number = 0;
const BOUNDS_THRESHOLD_LEFT: number = 0;

9
src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx
View File

@ -7,15 +7,16 @@ export const GetAlertLayout = (item: NotificationAlertItem, onClose: () => void)
{
if(!item) return null;
const props = { key: item.id, item, onClose };
const key = item.id;
const props = { item, onClose };
switch(item.alertType)
{
case NotificationAlertType.NITRO:
return <NitroSystemAlertView { ...props } />;
return <NitroSystemAlertView key={key} {...props} />;
case NotificationAlertType.SEARCH:
return <NotificationSeachAlertView { ...props } />;
return <NotificationSeachAlertView key={key} {...props} />;
default:
return <NotificationDefaultAlertView { ...props } />;
return <NotificationDefaultAlertView key={key} {...props} />;
}
};

4
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -72,10 +72,10 @@ export const RoomToolsWidgetView: FC<{}> = props =>
}, [ roomName, roomOwner, roomTags ]);
return (
<div className="flex gap-2 nitro-room-tools-container">
<div className="flex space-x-2 nitro-room-tools-container">
<div className="flex flex-col items-center justify-center p-2 nitro-room-tools">
<div className="cursor-pointer nitro-icon icon-cog" title={ LocalizeText('room.settings.button.text') } onClick={ () => handleToolClick('settings') } />
<div className={ classNames('cursor-pointer', 'icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } />
<div className={ classNames('cursor-pointer', 'nitro-icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } />
<div className="cursor-pointer nitro-icon icon-chat-history" title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } />
{ navigatorData.canRate &&
<div className="cursor-pointer nitro-icon icon-like-room" title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } /> }

248
src/css/NitroCardView.css Normal file
View File

@ -0,0 +1,248 @@
$nitro-card-header-height: 133px;
$nitro-card-tabs-height: 133px;
.nitro-card {
resize: both;
@include media-breakpoint-down(lg) {
max-width: 100vw !important;
max-height: 100vh !important;
}
&.theme-primary {
border: $border-width solid $border-color;
.nitro-card-header {
min-height: 33px;
max-height: 33px;
background: $primary;
.nitro-card-header-text {
color: $white;
text-shadow: 0px 4px 4px rgba($black, 0.25);
@include font-size($h4-font-size);
}
.nitro-card-header-close {
cursor: pointer;
padding: 2px 2px;
line-height: 1;
border-radius: $border-radius;
box-shadow: 0 0 0 1.6px $white;
border: 2px solid #921911;
background: repeating-linear-gradient(
rgba(245, 80, 65, 1),
rgba(245, 80, 65, 1) 50%,
rgba(194, 48, 39, 1) 50%,
rgba(194, 48, 39, 1) 100%
);
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
.nitro-card-header-report-camera {
cursor: pointer;
padding: 1px 3px;
line-height: 1;
border-radius: $border-radius;
box-shadow: 0 0 0 1.6px $white;
border: 2px solid #921911;
background: repeating-linear-gradient(
rgba(245, 80, 65, 1),
rgba(245, 80, 65, 1) 50%,
rgba(194, 48, 39, 1) 50%,
rgba(194, 48, 39, 1) 100%
);
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
}
.nitro-card-tabs {
background-color: $secondary;
.nav-item {
padding: $nav-link-padding-y $nav-link-padding-x;
background-color: $muted;
color: $black;
z-index: 1;
margin-bottom: -1px;
&.active {
background-color: $light;
border-color: $border-color $border-color $light !important;
border-bottom: 1px solid black;
&:before {
background: $white;
}
}
&:before {
content: '';
position: absolute;
width: 93%;
height: 3px;
border-radius: 0.25rem;
top: 1.5px;
left: 0;
right: 0;
margin: auto;
background: #c2c9d1;
z-index: 1;
}
}
}
.content-area {
background-color: $light;
}
}
&.theme-primary-slim {
border: $border-width solid $border-color;
.nitro-card-header {
position: relative;
min-height: 28px;
max-height: 28px;
background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
border-bottom: 2px solid darken($quaternary, 5);
box-shadow: 0 2px white;
width: 100%;
margin: 0;
padding-top:2px;
&:before {
position: absolute;
content: ' ';
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba($white, 0.3);
}
.nitro-card-header-text {
color: $white;
text-shadow: 0px 4px 4px rgba($black, 0.25);
@include font-size($h5-font-size);
min-height: 21px;
}
.nitro-card-header-close {
cursor: pointer;
padding: 0px 2px;
line-height: 1;
@include font-size($h7-font-size);
border-radius: $border-radius;
box-shadow: 0 0 0 1.6px $white;
border: 2px solid #921911;
background: repeating-linear-gradient(
rgba(245, 80, 65, 1),
rgba(245, 80, 65, 1) 50%,
rgba(194, 48, 39, 1) 50%,
rgba(194, 48, 39, 1) 100%
);
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
.nitro-card-header-report-camera {
cursor: pointer;
padding: 0px 2px;
margin-right: 4px;
line-height: 1;
@include font-size($h7-font-size);
border-radius: $border-radius;
box-shadow: 0 0 0 1.6px $white;
border: 2px solid #921911;
background: repeating-linear-gradient(
rgba(245, 80, 65, 1),
rgba(245, 80, 65, 1) 50%,
rgba(194, 48, 39, 1) 50%,
rgba(194, 48, 39, 1) 100%
);
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
}
.nitro-card-tabs {
background-color: $secondary;
}
.content-area {
background-color: $light;
}
}
}
.content-area {
height: 100%;
padding-top: $container-padding-x;
padding-bottom: $container-padding-x;
overflow: auto;
&.theme-dark {
background-color: #1C323F !important;
}
}
@include media-breakpoint-down(lg) {
.content-area {
height: 100% !important;
min-height: auto !important;
max-height: 100% !important;
}
}
.nitro-card-header {
position: relative;
height: 100%;
}
.nitro-card-tabs {
height: 100%;
min-height: $nitro-card-tabs-height;
max-height: $nitro-card-tabs-height;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}
.nitro-card-accordion-set {
&.active {
height: 100%;
overflow: hidden;
background: rgba($white, 0.5);
border-bottom: 1px solid rgba($black, 0.2);
}
.nitro-card-accordion-set-header {
border-bottom: 1px solid rgba($black, 0.2);
}
}

4
src/css/room/ChatHistoryView.css Normal file
View File

@ -0,0 +1,4 @@
.nitro-chat-history {
width: 300px;
height: 200px;
}

174
src/css/room/RoomWidgets.css Normal file
View File

@ -0,0 +1,174 @@
.nitro-room-tools-container {
position: absolute;
bottom: 75px;
left: 10px;
.nitro-room-tools {
background: #212131;
box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
transition: all .2s ease;
z-index: 71;
margin-left: -20px;
.list-group-item {
background: transparent;
padding: 3px 0px;
color: #FFF;
border-color: rgba(#000, 0.3);
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:first-child {
padding-top: 8px;
}
&:last-child {
border-bottom: none;
padding-bottom: 8px;
}
.tools-item {
.icon {
width: 22px;
background-repeat: no-repeat;
background-position: center;
}
&:hover {
text-decoration: underline;
}
}
}
}
.nitro-room-history {
background: #212131;
box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
transition: all .2s ease;
width: 150px;
overflow: hidden;
z-index: 3;
}
.nitro-room-tools-info {
background: #212131;
box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
transition: all .2s ease;
max-width: 250px;
}
}
.nitro-room-tools-history {
position: absolute;
left: calc(100% - 2px);
margin-left: 2px;
height: 5%;
}
.wordquiz-question {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: large;
background: rgba(#000, 0.95);
box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
border-radius: $border-radius;
transition: all 0.2s ease;
z-index: 21;
.question {
max-width: 300px;
}
}
.word-quiz-dislike {
background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-down.png');
width: 31px;
height: 34px;
}
.word-quiz-like {
background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-up.png');
width: 31px;
height: 34px;
}
.word-quiz-dislike-sm {
background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png');
width: 22px;
height: 22px;
}
.word-quiz-like-sm {
background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png');
height: 22px;
width: 22px;
}
.nitro-widget-doorbell {
width: 300px;
height: 200px;
}
.toggle-roomtool {
min-height: 95px;
width: 20px;
margin-left: -5px;
padding-left: 10px;
z-index: 72;
}
.room-tool-item {
height: 20px;
cursor: pointer;
}
.margin-icons {
margin-top: -14px;
}
.margin-button-history {
margin-left: 4px;
margin-right: 4px;
}
.text-no-promote {
font-size: 15px;
}
.icon-style {
margin-top: 1px;
margin-left: 4px;
}
.arrow-right-style {
margin-right: 4px;
}
.tags {
background-color: #1B2834;
color: #1A75A6;
font-size: 10px;
&:hover {
color: #419AD2;
}
}
/*
@import './avatar-info/AvatarInfoWidgetView';
@import './chat/ChatWidgetView';
@import './chat-input/ChatInputView';
@import './choosers/ChooserWidgetView';
@import './context-menu/ContextMenu';
@import './friend-request/FriendRequestDialogView';
@import './furniture/FurnitureWidgets';
@import './mysterybox/MysteryBoxExtensionView';
@import './pet-package/PetPackageWidgetView';
*/

554
src/css/widgets/FurnitureWidgets.css Normal file
View File

@ -0,0 +1,554 @@
.nitro-room-widgets {
pointer-events: none;
}
.nitro-widget-custom-stack-height {
width: 275px;
height: 220px;
}
.nitro-room-widget-toner {
width: 190px;
}
.nitro-room-widget-dimmer {
width: 275px;
.dimmer-banner {
width: 56px;
height: 79px;
background: url('@/assets/images/room-widgets/dimmer-widget/dimmer_banner.png')
center no-repeat;
}
.color-swatch {
height: 30px;
border: 2px solid #FFF;
box-shadow: inset 3px 3px rgba(0, 0, 0, 0.2);
&.active {
box-shadow: none;
}
}
}
.nitro-widget-crafting {
width: 500px;
height: 300px;
}
.nitro-widget-exchange-credit {
width: 375px;
height: 150px;
.exchange-image {
background-image: url('@/assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
width: 103px;
height: 103px;
}
}
.nitro-external-image-widget {
.picture-preview {
width: 320px;
height: 320px;
}
.picture-preview-buttons {
display: flex;
align-items: center;
justify-content: space-between;
color: gray;
}
.picture-preview-buttons-previous,
.picture-preview-buttons-next {
color: #222;
background-color: white;
padding: 10px;
border-radius: 50%;
}
}
.nitro-gift-opening {
width: 340px;
resize: none;
}
.nitro-mannequin {
width: 300px;
.mannequin-preview {
display: flex;
justify-content: center;
align-items: center;
width: 83px;
height: 130px;
background-image: url('@/assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
overflow: hidden;
.avatar-image {
background-position: unset;
top: -8px;
}
}
}
.nitro-stickie {
position: relative;
width: 185px;
height: 178px;
top: 25px;
left: 25px;
padding: 1px;
pointer-events: all;
.stickie-header {
width: 183px;
height: 18px;
padding: 0 7px;
.header-trash,
.header-close {
cursor: pointer;
}
.stickie-color {
width: 10px;
height: 10px;
cursor: pointer;
}
}
.stickie-context {
width: 183px;
height: 145px;
padding: 2px 7px;
font-size: 12px;
color: #000;
.context-text {
width: 100%;
height: 100%;
padding: 0;
overflow-wrap: break-word;
white-space: break-spaces;
overflow-y: auto;
}
textarea {
background: transparent;
border: 0;
outline: none;
box-shadow: none;
resize: none;
font-style: italic;
&:active {
border: 0;
outline: none;
box-shadow: none;
}
}
}
}
.nitro-stickie-image {
background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-spritesheet.png');
&.stickie-blue,
&.stickie-yellow,
&.stickie-green,
&.stickie-pink {
width: 185px;
height: 178px;
}
&.stickie-blue {
background-position: -2px -2px;
}
&.stickie-yellow {
background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-yellow.png');
//background-position: -191px -184px;
}
&.stickie-green {
background-position: -191px -2px;
}
&.stickie-pink {
background-position: -2px -184px;
}
&.stickie-christmas {
background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-christmas.png');
}
&.stickie-shakesp {
background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-shakesp.png');
}
&.stickie-dreams {
background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-dreams.png');
}
&.stickie-heart {
background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-heart.png');
}
&.stickie-juninas {
background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-juninas.png');
}
&.stickie-close {
width: 10px;
height: 10px;
background-position: -2px -366px;
}
&.stickie-trash {
width: 9px;
height: 10px;
background-position: -16px -366px;
}
}
.nitro-engraving-lock {
width: 300px;
.engraving-lock-stage-1 {
width: 31px;
height: 39px;
background-position: -380px -43px;
background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
}
.engraving-lock-stage-2 {
width: 36px;
height: 43px;
background-position: -375px 0px;
background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
}
}
.nitro-engraving-lock-view {
width: 375px;
height: 210px;
background-position: 0px 0px;
background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
color: #622e54;
font-weight: bold;
font-size: 16px;
text-shadow: 0px 1px white;
&.engraving-lock-3 {
background-position: 0px -210px;
color: #614110;
}
&.engraving-lock-4 {
background-position: 0px -420px;
color: #f1dcc8;
text-shadow: 0px 2px rgba(0, 0, 0, 0.4);
.engraving-lock-avatar {
margin-bottom: 10px;
}
}
.engraving-lock-close {
position: absolute;
cursor: pointer;
width: 15px;
height: 15px;
top: 34px;
right: 27px;
}
.engraving-lock-avatar {
width: 70px;
height: 120px;
div {
position: absolute;
margin-top: -5px;
}
&:nth-child(1) {
div {
margin-left: -10px;
}
}
&:nth-child(2) {
div {
margin-left: -15px;
}
}
}
}
.nitro-widget-high-score {
width: 280px;
max-width: 280px;
height: 320px;
border-radius: 0.3rem;
border: solid 1px #000;
.header {
border-image-source: none !important;
background-color: #40403e;
border-radius: 0.3rem 0.3rem 0 0;
}
.align-right {
text-align: right;
}
.section-border {
border: solid 1px #8c8a88;
}
.high-score-content {
height: 100%;
background-color: #000;
border-radius: 0.3rem;
}
.score-footer {
color: #9a9896;
font-weight: bold;
}
}
.youtube-tv-widget {
width: 600px;
height: 380px;
.youtube-video-container {
.empty-video {
background-color: black;
color: white;
width: 100%;
height: 100%;
text-align: center;
}
.youtubeContainer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin-bottom: 50px;
}
.youtubeContainer iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
.playlist-container {
overflow-y: auto;
margin-right: -10px;
color: black;
height: 100%;
.playlist-controls {
width: 100%;
.icon {
margin-right: 10px;
margin-bottom: 10px;
}
}
.playlist-grid {
height: 100%;
width: 100%;
}
}
}
.nitro-playlist-editor-widget {
width: 625px;
height: 440px;
img.my-music {
position: absolute;
top: -4px;
left: -4px;
z-index: 0;
}
img.playlist-img {
position: absolute;
top: -4px;
left: 0;
z-index: 0;
}
img.get-more,
img.add-songs {
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
}
.playlist-bottom {
z-index: 3;
}
.move-disk {
width: 22px;
height: 18px;
background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
}
.disk-2,
.disk-image {
background-blend-mode: multiply;
}
.disk-2 {
width: 38px;
height: 38px;
background-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
background-position: center;
background-repeat: no-repeat;
&.playing-song {
background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
}
&.selected-song {
background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
transform: scaleX(-1);
}
&:not(.playing-song):not(.selected-song) {
-webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
}
}
.pause-song {
width: 18px;
height: 20px;
background-image: url('@/assets/images/room-widgets/playlist-editor/pause.png');
}
.pause-btn {
width: 16px;
height: 16px;
background-image: url('@/assets/images/room-widgets/playlist-editor/pause-btn.png');
}
.music-note {
width: 38px;
height: 38px;
background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
}
.preview-song {
width: 16px;
height: 16px;
background-image: url('@/assets/images/room-widgets/playlist-editor/preview.png');
}
.layout-grid-item {
min-height: 95px;
min-width: 95px;
position: relative;
.disk-image {
background: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
-webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
height: 76px;
width: 76px;
}
}
}
.nitro-mysterybox-dialog {
width: 375px;
height: 210px;
.prize-container {
height: 80px;
width: 81px;
background-image: url('@/assets/images/prize/prize_background.png');
background-repeat: no-repeat;
background-position: center;
}
}
.nitro-mysterytrophy-dialog
{
.mysterytrophy-dialog-top
{
width: 400px;
height: 120px;
border-radius: 2px;
background-color: #0E3F52;
.mysterytrophy-image
{
width: 80px;
height: 84px;
position: relative;
background-image: url('@/assets/images/mysterytrophy/frank_mystery_trophy.png');
background-repeat: no-repeat;
}
.mysterytrophy-text-big
{
font-size: 16px;
}
}
.mysterytrophy-dialog-bottom
{
display: flex;
justify-content: center;
width: 400px;
height: 120px;
border-radius: 2px;
background-color: #E9E9E1;
.input-mysterytrophy-dialog
{
width: 380px;
border: 1px solid black;
.input-mysterytrophy
{
width: 350px;
border: 0;
outline: 0;
}
.mysterytrophy-pencil-image
{
width: 16px;
height: 16px;
position: relative;
background-image: url('@/assets/images/infostand/pencil-icon.png');
background-repeat: no-repeat;
}
}
.text-decoration
{
text-decoration: underline;
}
}
}

6
src/index.tsx
View File

@ -3,7 +3,13 @@ import { App } from './App';
import './css/chats.css';
import './css/index.css';
import './css/loading.css';
import './css/NitroCardView.css';
import './css/NotificationCenterView.css';
import './css/PurseView.css';
import './css/room/ChatHistoryView.css';
import './css/room/RoomWidgets.css';
import './css/widgets/FurnitureWidgets.css';
createRoot(document.getElementById('root')).render(<App />);