duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Init V3

Browse Source
This commit is contained in:
DuckieTM
2026-01-31 09:10:52 +01:00
commit 7feb10ab15
1733 changed files with 53405 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/backgrounds/BackgroundsView.css
+947
View File
@@ -0,0 +1,947 @@
.backgrounds-view-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
pointer-events: none;
}
@keyframes fadeIn {
to { opacity: 1; }
}
.non-selectable {
cursor: default;
}
.non-selectable .profile-background {
filter: opacity(0.5);
transition: linear 0.25s;
}
.non-selectable .profile-background:hover {
filter: opacity(1);
}
.background-edit-icon {
background-image: url('@/assets/images/infostand/icon_edit.gif');
width: 19px;
height: 19px;
pointer-events: auto;
cursor: pointer;
z-index: 10;
display: block;
transition: opacity 0.2s ease;
}
.background-edit-icon:hover {
opacity: 0.8;
}
.background-edit-position {
position: absolute;
left: 8px;
}
.profile-background {
background-repeat: no-repeat;
background-position: center;
height: 135px;
width: 68px;
}
.profile-background.background-default {
background-color: #f0f0f0;
}
.profile-stand {
background-repeat: no-repeat;
background-position: center;
height: 135px;
width: 68px;
}
.profile-stand.stand-default {
background: none;
}
.profile-overlay {
background-repeat: no-repeat;
background-position: center;
height: 135px;
width: 68px;
}
.profile-overlay.overlay-default {
background: none;
}
.profile-background {
background-repeat: no-repeat;
background-position: center;
height: 135px;
width: 68px;
&.background-0 {
background-image: url('@/assets/images/backgrounds/background/bg_0.png');
}
&.background-1 {
background-image: url('@/assets/images/backgrounds/background/bg_1.gif');
}
&.background-2 {
background-image: url('@/assets/images/backgrounds/background/bg_2.png');
}
&.background-3 {
background-image: url('@/assets/images/backgrounds/background/bg_3.png');
}
&.background-4 {
background-image: url('@/assets/images/backgrounds/background/bg_4.png');
}
&.background-5 {
background-image: url('@/assets/images/backgrounds/background/bg_5.png');
}
&.background-6 {
background-image: url('@/assets/images/backgrounds/background/bg_6.png');
}
&.background-7 {
background-image: url('@/assets/images/backgrounds/background/bg_7.png');
}
&.background-8 {
background-image: url('@/assets/images/backgrounds/background/bg_8.png');
}
&.background-9 {
background-image: url('@/assets/images/backgrounds/background/bg_9.png');
}
&.background-10 {
background-image: url('@/assets/images/backgrounds/background/bg_10.png');
}
&.background-11 {
background-image: url('@/assets/images/backgrounds/background/bg_11.png');
}
&.background-12 {
background-image: url('@/assets/images/backgrounds/background/bg_12.png');
}
&.background-13 {
background-image: url('@/assets/images/backgrounds/background/bg_13.png');
}
&.background-14 {
background-image: url('@/assets/images/backgrounds/background/bg_14.png');
}
&.background-15 {
background-image: url('@/assets/images/backgrounds/background/bg_15.png');
}
&.background-16 {
background-image: url('@/assets/images/backgrounds/background/bg_16.png');
}
&.background-17 {
background-image: url('@/assets/images/backgrounds/background/bg_17.png');
}
&.background-18 {
background-image: url('@/assets/images/backgrounds/background/bg_18.png');
}
&.background-19 {
background-image: url('@/assets/images/backgrounds/background/bg_19.png');
}
&.background-20 {
background-image: url('@/assets/images/backgrounds/background/bg_20.png');
}
&.background-21 {
background-image: url('@/assets/images/backgrounds/background/bg_21.png');
}
&.background-22 {
background-image: url('@/assets/images/backgrounds/background/bg_22.png');
}
&.background-23 {
background-image: url('@/assets/images/backgrounds/background/bg_23.png');
}
&.background-24 {
background-image: url('@/assets/images/backgrounds/background/bg_24.png');
}
&.background-25 {
background-image: url('@/assets/images/backgrounds/background/bg_25.png');
}
&.background-26 {
background-image: url('@/assets/images/backgrounds/background/bg_26.png');
}
&.background-27 {
background-image: url('@/assets/images/backgrounds/background/bg_27.png');
}
&.background-28 {
background-image: url('@/assets/images/backgrounds/background/bg_28.png');
}
&.background-29 {
background-image: url('@/assets/images/backgrounds/background/bg_29.png');
}
&.background-30 {
background-image: url('@/assets/images/backgrounds/background/bg_30.png');
}
&.background-31 {
background-image: url('@/assets/images/backgrounds/background/bg_31.png');
}
&.background-32 {
background-image: url('@/assets/images/backgrounds/background/bg_32.png');
}
&.background-33 {
background-image: url('@/assets/images/backgrounds/background/bg_33.png');
}
&.background-34 {
background-image: url('@/assets/images/backgrounds/background/bg_34.png');
}
&.background-35 {
background-image: url('@/assets/images/backgrounds/background/bg_35.png');
}
&.background-36 {
background-image: url('@/assets/images/backgrounds/background/bg_36.gif');
}
&.background-37 {
background-image: url('@/assets/images/backgrounds/background/bg_37.png');
}
&.background-38 {
background-image: url('@/assets/images/backgrounds/background/bg_38.png');
}
&.background-39 {
background-image: url('@/assets/images/backgrounds/background/bg_39.png');
}
&.background-40 {
background-image: url('@/assets/images/backgrounds/background/bg_40.png');
}
&.background-41 {
background-image: url('@/assets/images/backgrounds/background/bg_41.png');
}
&.background-42 {
background-image: url('@/assets/images/backgrounds/background/bg_42.png');
}
&.background-43 {
background-image: url('@/assets/images/backgrounds/background/bg_43.png');
}
&.background-44 {
background-image: url('@/assets/images/backgrounds/background/bg_44.png');
}
&.background-45 {
background-image: url('@/assets/images/backgrounds/background/bg_45.png');
}
&.background-46 {
background-image: url('@/assets/images/backgrounds/background/bg_46.png');
}
&.background-47 {
background-image: url('@/assets/images/backgrounds/background/bg_47.png');
}
&.background-48 {
background-image: url('@/assets/images/backgrounds/background/bg_48.png');
}
&.background-49 {
background-image: url('@/assets/images/backgrounds/background/bg_49.png');
}
&.background-50 {
background-image: url('@/assets/images/backgrounds/background/bg_50.png');
}
&.background-51 {
background-image: url('@/assets/images/backgrounds/background/bg_51.gif');
}
&.background-52 {
background-image: url('@/assets/images/backgrounds/background/bg_52.gif');
}
&.background-53 {
background-image: url('@/assets/images/backgrounds/background/bg_53.gif');
}
&.background-54 {
background-image: url('@/assets/images/backgrounds/background/bg_54.gif');
}
&.background-55 {
background-image: url('@/assets/images/backgrounds/background/bg_55.gif');
}
&.background-56 {
background-image: url('@/assets/images/backgrounds/background/bg_56.gif');
}
&.background-57 {
background-image: url('@/assets/images/backgrounds/background/bg_57.gif');
}
&.background-58 {
background-image: url('@/assets/images/backgrounds/background/bg_58.gif');
}
&.background-59 {
background-image: url('@/assets/images/backgrounds/background/bg_59.gif');
}
&.background-60 {
background-image: url('@/assets/images/backgrounds/background/bg_60.gif');
}
&.background-61 {
background-image: url('@/assets/images/backgrounds/background/bg_61.gif');
}
&.background-62 {
background-image: url('@/assets/images/backgrounds/background/bg_62.gif');
}
&.background-63 {
background-image: url('@/assets/images/backgrounds/background/bg_63.gif');
}
&.background-64 {
background-image: url('@/assets/images/backgrounds/background/bg_64.gif');
}
&.background-65 {
background-image: url('@/assets/images/backgrounds/background/bg_65.gif');
}
&.background-66 {
background-image: url('@/assets/images/backgrounds/background/bg_66.gif');
}
&.background-67 {
background-image: url('@/assets/images/backgrounds/background/bg_67.gif');
}
&.background-68 {
background-image: url('@/assets/images/backgrounds/background/bg_68.gif');
}
&.background-69 {
background-image: url('@/assets/images/backgrounds/background/bg_69.gif');
}
&.background-70 {
background-image: url('@/assets/images/backgrounds/background/bg_70.gif');
}
&.background-71 {
background-image: url('@/assets/images/backgrounds/background/bg_71.gif');
}
&.background-72 {
background-image: url('@/assets/images/backgrounds/background/bg_72.gif');
}
&.background-73 {
background-image: url('@/assets/images/backgrounds/background/bg_73.gif');
}
&.background-74 {
background-image: url('@/assets/images/backgrounds/background/bg_74.gif');
}
&.background-75 {
background-image: url('@/assets/images/backgrounds/background/bg_75.gif');
}
&.background-76 {
background-image: url('@/assets/images/backgrounds/background/bg_76.gif');
}
&.background-77 {
background-image: url('@/assets/images/backgrounds/background/bg_77.gif');
}
&.background-78 {
background-image: url('@/assets/images/backgrounds/background/bg_78.gif');
}
&.background-79 {
background-image: url('@/assets/images/backgrounds/background/bg_79.gif');
}
&.background-80 {
background-image: url('@/assets/images/backgrounds/background/bg_80.gif');
}
&.background-81 {
background-image: url('@/assets/images/backgrounds/background/bg_81.gif');
}
&.background-82 {
background-image: url('@/assets/images/backgrounds/background/bg_82.gif');
}
&.background-83 {
background-image: url('@/assets/images/backgrounds/background/bg_83.gif');
}
&.background-84 {
background-image: url('@/assets/images/backgrounds/background/bg_84.gif');
}
&.background-85 {
background-image: url('@/assets/images/backgrounds/background/bg_85.gif');
}
&.background-86 {
background-image: url('@/assets/images/backgrounds/background/bg_86.png');
}
&.background-87 {
background-image: url('@/assets/images/backgrounds/background/bg_87.gif');
}
&.background-88 {
background-image: url('@/assets/images/backgrounds/background/bg_88.gif');
}
&.background-89 {
background-image: url('@/assets/images/backgrounds/background/bg_89.gif');
}
&.background-90 {
background-image: url('@/assets/images/backgrounds/background/bg_90.gif');
}
&.background-91 {
background-image: url('@/assets/images/backgrounds/background/bg_91.gif');
}
&.background-92 {
background-image: url('@/assets/images/backgrounds/background/bg_92.gif');
}
&.background-93 {
background-image: url('@/assets/images/backgrounds/background/bg_93.gif');
}
&.background-94 {
background-image: url('@/assets/images/backgrounds/background/bg_94.gif');
}
&.background-95 {
background-image: url('@/assets/images/backgrounds/background/bg_95.gif');
}
&.background-96 {
background-image: url('@/assets/images/backgrounds/background/bg_96.gif');
}
&.background-97 {
background-image: url('@/assets/images/backgrounds/background/bg_97.gif');
}
&.background-98 {
background-image: url('@/assets/images/backgrounds/background/bg_98.gif');
}
&.background-99 {
background-image: url('@/assets/images/backgrounds/background/bg_99.gif');
}
&.background-100 {
background-image: url('@/assets/images/backgrounds/background/bg_100.gif');
}
&.background-101 {
background-image: url('@/assets/images/backgrounds/background/bg_101.png');
}
&.background-102 {
background-image: url('@/assets/images/backgrounds/background/bg_102.gif');
}
&.background-103 {
background-image: url('@/assets/images/backgrounds/background/bg_103.gif');
}
&.background-104 {
background-image: url('@/assets/images/backgrounds/background/bg_104.gif');
}
&.background-105 {
background-image: url('@/assets/images/backgrounds/background/bg_105.gif');
}
&.background-106 {
background-image: url('@/assets/images/backgrounds/background/bg_106.gif');
}
&.background-107 {
background-image: url('@/assets/images/backgrounds/background/bg_107.gif');
}
&.background-108 {
background-image: url('@/assets/images/backgrounds/background/bg_108.gif');
}
&.background-109 {
background-image: url('@/assets/images/backgrounds/background/bg_109.gif');
}
&.background-110 {
background-image: url('@/assets/images/backgrounds/background/bg_110.gif');
}
&.background-111 {
background-image: url('@/assets/images/backgrounds/background/bg_111.gif');
}
&.background-112 {
background-image: url('@/assets/images/backgrounds/background/bg_112.gif');
}
&.background-113 {
background-image: url('@/assets/images/backgrounds/background/bg_113.gif');
}
&.background-114 {
background-image: url('@/assets/images/backgrounds/background/bg_114.gif');
}
&.background-115 {
background-image: url('@/assets/images/backgrounds/background/bg_115.gif');
}
&.background-116 {
background-image: url('@/assets/images/backgrounds/background/bg_116.gif');
}
&.background-117 {
background-image: url('@/assets/images/backgrounds/background/bg_117.gif');
}
&.background-118 {
background-image: url('@/assets/images/backgrounds/background/bg_118.gif');
}
&.background-119 {
background-image: url('@/assets/images/backgrounds/background/bg_119.gif');
}
&.background-120 {
background-image: url('@/assets/images/backgrounds/background/bg_120.gif');
}
&.background-121 {
background-image: url('@/assets/images/backgrounds/background/bg_121.gif');
}
&.background-122 {
background-image: url('@/assets/images/backgrounds/background/bg_122.gif');
}
&.background-123 {
background-image: url('@/assets/images/backgrounds/background/bg_123.gif');
}
&.background-124 {
background-image: url('@/assets/images/backgrounds/background/bg_124.gif');
}
&.background-125 {
background-image: url('@/assets/images/backgrounds/background/bg_125.gif');
}
&.background-126 {
background-image: url('@/assets/images/backgrounds/background/bg_126.gif');
}
&.background-127 {
background-image: url('@/assets/images/backgrounds/background/bg_127.gif');
}
&.background-128 {
background-image: url('@/assets/images/backgrounds/background/bg_128.gif');
}
&.background-129 {
background-image: url('@/assets/images/backgrounds/background/bg_129.gif');
}
&.background-130 {
background-image: url('@/assets/images/backgrounds/background/bg_130.gif');
}
&.background-131 {
background-image: url('@/assets/images/backgrounds/background/bg_131.gif');
}
&.background-132 {
background-image: url('@/assets/images/backgrounds/background/bg_132.gif');
}
&.background-133 {
background-image: url('@/assets/images/backgrounds/background/bg_133.gif');
}
&.background-134 {
background-image: url('@/assets/images/backgrounds/background/bg_134.gif');
}
&.background-135 {
background-image: url('@/assets/images/backgrounds/background/bg_135.gif');
}
&.background-136 {
background-image: url('@/assets/images/backgrounds/background/bg_136.gif');
}
&.background-137 {
background-image: url('@/assets/images/backgrounds/background/bg_137.gif');
}
&.background-138 {
background-image: url('@/assets/images/backgrounds/background/bg_138.gif');
}
&.background-139 {
background-image: url('@/assets/images/backgrounds/background/bg_139.gif');
}
&.background-140 {
background-image: url('@/assets/images/backgrounds/background/bg_140.gif');
}
&.background-141 {
background-image: url('@/assets/images/backgrounds/background/bg_141.gif');
}
&.background-142 {
background-image: url('@/assets/images/backgrounds/background/bg_142.gif');
}
&.background-143 {
background-image: url('@/assets/images/backgrounds/background/bg_143.gif');
}
&.background-144 {
background-image: url('@/assets/images/backgrounds/background/bg_144.gif');
}
&.background-145 {
background-image: url('@/assets/images/backgrounds/background/bg_145.gif');
}
&.background-146 {
background-image: url('@/assets/images/backgrounds/background/bg_146.gif');
}
&.background-147 {
background-image: url('@/assets/images/backgrounds/background/bg_147.gif');
}
&.background-148 {
background-image: url('@/assets/images/backgrounds/background/bg_148.gif');
}
&.background-149 {
background-image: url('@/assets/images/backgrounds/background/bg_149.gif');
}
&.background-150 {
background-image: url('@/assets/images/backgrounds/background/bg_150.gif');
}
&.background-151 {
background-image: url('@/assets/images/backgrounds/background/bg_151.gif');
}
&.background-152 {
background-image: url('@/assets/images/backgrounds/background/bg_152.gif');
}
&.background-153 {
background-image: url('@/assets/images/backgrounds/background/bg_153.gif');
}
&.background-154 {
background-image: url('@/assets/images/backgrounds/background/bg_154.gif');
}
&.background-155 {
background-image: url('@/assets/images/backgrounds/background/bg_155.gif');
}
&.background-156 {
background-image: url('@/assets/images/backgrounds/background/bg_156.gif');
}
&.background-157 {
background-image: url('@/assets/images/backgrounds/background/bg_157.gif');
}
&.background-158 {
background-image: url('@/assets/images/backgrounds/background/bg_158.gif');
}
&.background-159 {
background-image: url('@/assets/images/backgrounds/background/bg_159.gif');
}
&.background-160 {
background-image: url('@/assets/images/backgrounds/background/bg_160.gif');
}
&.background-161 {
background-image: url('@/assets/images/backgrounds/background/bg_161.gif');
}
&.background-162 {
background-image: url('@/assets/images/backgrounds/background/bg_162.gif');
}
&.background-163 {
background-image: url('@/assets/images/backgrounds/background/bg_163.gif');
}
&.background-164 {
background-image: url('@/assets/images/backgrounds/background/bg_164.gif');
}
&.background-165 {
background-image: url('@/assets/images/backgrounds/background/bg_165.gif');
}
&.background-166 {
background-image: url('@/assets/images/backgrounds/background/bg_166.gif');
}
&.background-167 {
background-image: url('@/assets/images/backgrounds/background/bg_167.gif');
}
&.background-168 {
background-image: url('@/assets/images/backgrounds/background/bg_168.gif');
}
&.background-169 {
background-image: url('@/assets/images/backgrounds/background/bg_169.gif');
}
&.background-170 {
background-image: url('@/assets/images/backgrounds/background/bg_170.png');
}
&.background-171 {
background-image: url('@/assets/images/backgrounds/background/bg_171.png');
}
&.background-172 {
background-image: url('@/assets/images/backgrounds/background/bg_172.png');
}
&.background-173 {
background-image: url('@/assets/images/backgrounds/background/bg_173.png');
}
&.background-174 {
background-image: url('@/assets/images/backgrounds/background/bg_174.png');
}
&.background-175 {
background-image: url('@/assets/images/backgrounds/background/bg_175.png');
}
&.background-176 {
background-image: url('@/assets/images/backgrounds/background/bg_176.png');
}
&.background-177 {
background-image: url('@/assets/images/backgrounds/background/bg_177.gif');
}
&.background-178 {
background-image: url('@/assets/images/backgrounds/background/bg_178.png');
}
&.background-179 {
background-image: url('@/assets/images/backgrounds/background/bg_179.png');
}
&.background-180 {
background-image: url('@/assets/images/backgrounds/background/bg_180.png');
}
&.background-181 {
background-image: url('@/assets/images/backgrounds/background/bg_181.png');
}
&.background-182 {
background-image: url('@/assets/images/backgrounds/background/bg_182.png');
}
&.background-183 {
background-image: url('@/assets/images/backgrounds/background/bg_183.png');
}
&.background-184 {
background-image: url('@/assets/images/backgrounds/background/bg_184.png');
}
&.background-185 {
background-image: url('@/assets/images/backgrounds/background/bg_185.png');
}
&.background-186 {
background-image: url('@/assets/images/backgrounds/background/bg_186.png');
}
&.background-187 {
background-image: url('@/assets/images/backgrounds/background/bg_187.gif');
}
}
.profile-stand {
background-repeat: no-repeat;
background-position: center;
height: 135px;
width: 68px;
&.stand-0 {
background-image: url('@/assets/images/backgrounds/stand_0.png');
}
&.stand-1 {
background-image: url('@/assets/images/backgrounds/stand_1.png');
}
&.stand-2 {
background-image: url('@/assets/images/backgrounds/stand_2.png');
}
&.stand-3 {
background-image: url('@/assets/images/backgrounds/stand_3.png');
}
&.stand-4 {
background-image: url('@/assets/images/backgrounds/stand_4.png');
}
&.stand-5 {
background-image: url('@/assets/images/backgrounds/stand_5.png');
}
&.stand-6 {
background-image: url('@/assets/images/backgrounds/stand_6.png');
}
&.stand-7 {
background-image: url('@/assets/images/backgrounds/stand_7.png');
}
&.stand-8 {
background-image: url('@/assets/images/backgrounds/stand_8.png');
}
&.stand-9 {
background-image: url('@/assets/images/backgrounds/stand_9.png');
}
&.stand-10 {
background-image: url('@/assets/images/backgrounds/stand_10.png');
}
&.stand-11 {
background-image: url('@/assets/images/backgrounds/stand_11.png');
}
&.stand-12 {
background-image: url('@/assets/images/backgrounds/stand_12.png');
}
&.stand-13 {
background-image: url('@/assets/images/backgrounds/stand_13.png');
}
&.stand-14 {
background-image: url('@/assets/images/backgrounds/stand_14.png');
}
&.stand-15 {
background-image: url('@/assets/images/backgrounds/stand_15.png');
}
&.stand-16 {
background-image: url('@/assets/images/backgrounds/stand_16.png');
}
&.stand-17 {
background-image: url('@/assets/images/backgrounds/stand_17.png');
}
&.stand-18 {
background-image: url('@/assets/images/backgrounds/stand_18.png');
}
&.stand-19 {
background-image: url('@/assets/images/backgrounds/stand_19.png');
}
&.stand-20 {
background-image: url('@/assets/images/backgrounds/stand_20.png');
}
&.stand-21 {
background-image: url('@/assets/images/backgrounds/stand_21.gif');
}
}
.profile-overlay {
background-repeat: no-repeat;
background-position: center;
height: 135px;
width: 68px;
&.overlay-0 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_0.png');
}
&.overlay-1 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_1.png');
}
&.overlay-2 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_2.png');
}
&.overlay-3 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_3.png');
}
&.overlay-4 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_4.png');
}
&.overlay-5 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_5.gif');
}
&.overlay-6 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_6.png');
}
&.overlay-7 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_7.png');
}
&.overlay-8 {
background-image: url('@/assets/images/backgrounds/overlay/overlay_8.png');
}
}
src/css/chat/ChatHistoryView.css
+28
View File
@@ -0,0 +1,28 @@
.nitro-chat-history {
background-color: #f0f0f0;
width: 400px;
height: 400px;
}
.nitro-chat-history .nitro-card-content {
height: 100%;
background-image: url('@/assets/images/chat/chathistory_background.png');
background-repeat: repeat;
background-size: auto;
background-color: #f0f0f0;
}
.nitro-chat-history .p-1.slide-in {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
0% {
transform: translateY(-20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
src/css/chat/chats.css
+856
View File
@@ -0,0 +1,856 @@
.bubble-container {
transition: top 0.2s ease 0s;
.chat-bubble {
border-image-slice: 17 6 6 29 fill;
border-image-width: 17px 6px 6px 29px;
border-image-outset: 2px 0px 0px 0px;
border-image-repeat: repeat repeat;
&.type-0 {
// normal
.message {
font-weight: 400;
}
}
&.type-1 {
// whisper
.message {
font-weight: 400;
font-style: italic;
color: #595959;
}
}
&.type-2 {
// shout
.message {
font-weight: 700;
}
}
&.bubble-0 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_0_transparent.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
bottom: -5px;
}
}
&.bubble-1 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_1.png');
border-image-slice: 18 6 6 29 fill;
border-image-width: 18px 6px 6px 29px;
border-image-outset: 3px 0px 0px 0px;
.user-container {
display: none;
}
.username {
display: none;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
}
}
&.bubble-2,
&.bubble-31 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_2.png');
.user-container {
display: none;
}
.username {
color: rgba(#FFF, 1);
}
.message {
color: rgba(#FFF, 1) !important;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_2_31_pointer.png');
height: 7px;
}
}
&.bubble-3 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_3.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_3_pointer.png');
}
}
&.bubble-4 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_4.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_4_pointer.png');
}
}
&.bubble-5 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_5.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_5_pointer.png');
}
}
&.bubble-6 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_6.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_6_pointer.png');
}
}
&.bubble-7 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_7.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_7_pointer.png');
}
}
&.bubble-8 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_8.png');
border-image-slice: 20 6 6 27 fill;
border-image-width: 20px 6px 6px 27px;
border-image-outset: 5px 0px 0px 0px;
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_8_pointer.png');
}
}
&.bubble-9 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_9.png');
border-image-slice: 17 18 12 19 fill;
border-image-width: 17px 18px 12px 19px;
border-image-outset: 7px 7px 0px 9px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_9_pointer.png');
width: 7px;
height: 10px;
bottom: -6px;
}
}
&.bubble-10 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_10.png');
border-image-slice: 29 18 8 37 fill;
border-image-width: 29px 18px 8px 37px;
border-image-outset: 12px 7px 1px 5px;
.chat-content {
margin-left: 24px;
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_10_pointer.png');
width: 7px;
height: 8px;
bottom: -3px;
}
}
&.bubble-11 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_11.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_11_pointer.png');
}
}
&.bubble-12 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_12.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_12_pointer.png');
}
}
&.bubble-13 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_13.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_13_pointer.png');
}
}
&.bubble-14 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_14.png');
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_14_pointer.png');
}
}
&.bubble-15 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_15.png');
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_15_pointer.png');
}
}
&.bubble-16 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_16.png');
border-image-slice: 13 6 10 31 fill;
border-image-width: 13px 6px 10px 31px;
border-image-outset: 6px 0px 0px 0px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_16_pointer.png');
height: 8px;
}
}
&.bubble-17 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_17.png');
border-image-slice: 24 6 8 35 fill;
border-image-width: 24px 6px 8px 35px;
border-image-outset: 9px 0px 2px 5px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_17_pointer.png');
}
}
&.bubble-18 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_18.png');
border-image-slice: 7 16 8 16 fill;
border-image-width: 7px 16px 8px 16px;
border-image-outset: 3px 10px 2px 11px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_18_pointer.png');
height: 8px;
}
}
&.bubble-19 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_19.png');
border-image-slice: 17 6 9 19 fill;
border-image-width: 17px 6px 9px 19px;
border-image-outset: 5px 0px 0px 8px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
}
}
&.bubble-20 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_20.png');
border-image-slice: 18 6 8 19 fill;
border-image-width: 18px 6px 8px 19px;
border-image-outset: 5px 0px 0px 8px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
}
}
&.bubble-21 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_21.png');
border-image-slice: 20 6 12 24 fill;
border-image-width: 20px 6px 12px 24px;
border-image-outset: 13px 2px 1px 3px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_21_pointer.png');
bottom: -4px;
}
}
&.bubble-22 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_22.png');
border-image-slice: 18 19 11 33 fill;
border-image-width: 18px 19px 11px 33px;
border-image-outset: 7px 1px 1px 5px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_22_pointer.png');
}
}
&.bubble-23 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_23.png');
border-image-slice: 16 6 7 32 fill;
border-image-width: 16px 6px 7px 32px;
border-image-outset: 5px 0px 0px 3px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
}
}
&.bubble-24 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_24.png');
border-image-slice: 23 8 6 40 fill;
border-image-width: 23px 8px 6px 40px;
border-image-outset: 6px 0px 0px 6px;
.chat-content {
margin-left: 30px;
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_24_pointer.png');
bottom: -4px;
}
}
&.bubble-25 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_25.png');
border-image-slice: 10 13 8 28 fill;
border-image-width: 10px 13px 8px 28px;
border-image-outset: 6px 3px 2px 0px;
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_25_pointer.png');
height: 9px;
bottom: -7px;
}
}
&.bubble-26 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_26.png');
border-image-slice: 16 9 8 29 fill;
border-image-width: 16px 9px 8px 29px;
border-image-outset: 2px 2px 2px 0px;
.chat-content {
color: #c59432;
text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_26_pointer.png');
height: 10px;
bottom: -6px;
}
}
&.bubble-27 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_27.png');
border-image-slice: 25 6 5 36 fill;
border-image-width: 25px 6px 5px 36px;
border-image-outset: 8px 0px 0px 5px;
.chat-content {
margin-left: 30px;
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_27_pointer.png');
}
}
&.bubble-28 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_28.png');
border-image-slice: 16 7 7 27 fill;
border-image-width: 16px 7px 7px 27px;
border-image-outset: 3px 0px 0px 0px;
.chat-content {
margin-left: 25px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_28_pointer.png');
}
}
&.bubble-29 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_29.png');
border-image-slice: 10 7 15 31 fill;
border-image-width: 10px 7px 15px 31px;
border-image-outset: 2px 0px 0px 1px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_29_pointer.png');
bottom: -4px;
}
}
&.bubble-30 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_30.png');
.user-container {
display: none;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_30_pointer.png');
height: 7px;
}
}
&.bubble-32 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_32.png');
border-image-slice: 15 7 7 30 fill;
border-image-width: 15px 7px 7px 30px;
border-image-outset: 2px 0px 0px 0px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_32_pointer.png');
}
}
&.bubble-33 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
border-image-slice: 7 6 6 39 fill;
border-image-width: 7px 6px 6px 39px;
border-image-outset: 2px 0px 0px 0px;
.user-container {
display: none;
}
.chat-content {
margin-left: 35px;
}
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 9px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
}
}
&.bubble-34 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
border-image-slice: 7 6 6 39 fill;
border-image-width: 7px 6px 6px 39px;
border-image-outset: 2px 0px 0px 0px;
&.type-1 {
.message {
font-style: unset;
color: inherit;
}
}
.user-container {
display: none;
}
.username {
display: none;
}
.chat-content {
margin-left: 35px;
}
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 9px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
}
}
&.bubble-35 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_35.png');
border-image-slice: 19 6 5 29 fill;
border-image-width: 19px 6px 5px 29px;
border-image-outset: 4px 0px 0px 0px;
.user-container {
display: none;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_35_pointer.png');
}
}
&.bubble-36 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_36.png');
border-image-slice: 17 7 5 30 fill;
border-image-width: 17px 7px 5px 30px;
border-image-outset: 2px 0px 0px 0px;
.user-container {
display: none;
}
&::before {
content: ' ';
position: absolute;
width: 13px;
height: 18px;
left: 5px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_36_pointer.png');
}
}
&.bubble-37 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_37.png');
border-image-slice: 16 6 7 32 fill;
border-image-width: 16px 6px 7px 32px;
border-image-outset: 5px 0px 0px 3px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
}
}
&.bubble-38 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_38.png');
border-image-slice: 17 7 5 30 fill;
border-image-width: 17px 7px 5px 30px;
border-image-outset: 2px 0px 0px 0px;
.user-container {
display: none;
}
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 3px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_38_pointer.png');
}
}
.user-container {
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
max-height: 24px;
overflow: hidden;
.user-image {
position: absolute;
top: -15px;
left: -9.25px;
width: 45px;
height: 65px;
background-repeat: no-repeat;
background-position: center;
transform: scale(0.5);
overflow: hidden;
image-rendering: initial;
}
}
.chat-content {
padding: 5px 6px 5px 4px;
margin-left: 27px;
line-height: 1;
color: #000;
min-height: 25px;
}
}
}
.chat-bubble-icon {
background-repeat: no-repeat;
background-position: center;
&.bubble-0 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_0.png');
}
&.bubble-1 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_1.png');
height: 25px;
}
&.bubble-2,
&.bubble-31 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_2.png');
}
&.bubble-3 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_3.png');
}
&.bubble-4 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_4.png');
}
&.bubble-5 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_5.png');
}
&.bubble-6 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_6.png');
}
&.bubble-7 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_7.png');
}
&.bubble-8 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_8.png');
}
&.bubble-9 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_9.png');
}
&.bubble-10 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_10.png');
}
&.bubble-11 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_11.png');
}
&.bubble-12 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_12.png');
}
&.bubble-13 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_13.png');
}
&.bubble-14 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_14.png');
}
&.bubble-15 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_15.png');
}
&.bubble-16 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_16.png');
}
&.bubble-17 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_17.png');
}
&.bubble-18 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_18.png');
}
&.bubble-19 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_19.png');
}
&.bubble-20 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_20.png');
}
&.bubble-21 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_21.png');
}
&.bubble-22 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_22.png');
}
&.bubble-23 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_23.png');
}
&.bubble-24 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_24.png');
}
&.bubble-25 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_25.png');
}
&.bubble-26 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_26.png');
}
&.bubble-27 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_27.png');
}
&.bubble-28 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_28.png');
}
&.bubble-29 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_29.png');
}
&.bubble-30 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_30.png');
}
&.bubble-32 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_32.png');
}
&.bubble-33 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 11px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png');
}
}
&.bubble-34 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 11px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
}
}
&.bubble-35 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png');
}
&.bubble-36 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_36.png');
&::before {
content: ' ';
position: absolute;
width: 13px;
height: 18px;
left: 13px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png');
}
}
&.bubble-37 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png');
}
&.bubble-38 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_38.png');
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 11px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png');
}
}
}
src/css/common/Buttons.css
+109
View File
@@ -0,0 +1,109 @@
.btn-sm {
min-height: 28px;
}
textarea {
resize: none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.rounded {
border-radius: 0.5rem;
}
.btn-primary {
color: #fff;
background-color: #3c6d82;
border: 2px solid #1a617f;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-primary:hover {
border: 2px solid #1a617f;
box-shadow: none!important;
}
.btn-success{
color: #fff;
background-color: #3c8243;
border: 2px solid #006d09;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-success:hover{
box-shadow: none!important;
}
.btn-danger{
color: #fff;
background-color: #a81a12;
border: 2px solid #b9322a;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-danger:hover{
box-shadow: none!important;
}
.btn-warning{
color: #222;
background-color: #ffc107;
border: 2px solid #f3c12a;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-warning:hover{
box-shadow: none!important;
}
.btn-dark {
color: #fff;
background-color: #212131;
border: 2px solid #1c1c2a;
box-shadow: none!important;
border-radius: 8px;
padding: 4px 11px 4px 11px;
}
.btn-dark:hover{
background-color: #212131;
border: 2px solid #1c1c2a;
box-shadow: none!important;
border-radius: 8px;
padding: 4px 11px 4px 11px;
}
.btn-friendsgen{
background-color: #424354;
border: 2px solid #63647a;
border-radius: 10px;
}
.btn-friendsgensuccess{
background-color: #b69b83;
border: 2px solid #e2c1a3;
border-radius: 10px;
}
src/css/common/MiniCamera.css
+13
View File
@@ -0,0 +1,13 @@
.nitro-room-thumbnail-camera {
width: 132px;
height: 192px;
background-image: url('@/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
.camera-frame {
position: absolute;
width: 110px;
height: 110px;
margin-top: 30px;
margin-left: 3px;
}
}
src/css/floorplan/FloorplanEditorView.css
+9
View File
@@ -0,0 +1,9 @@
.nitro-floorplan-editor {
width: 760px;
height: 500px;
}
.floorplan-import-export {
width: 630px;
height: 475px;
}
src/css/forms/form_select.css
+24
View File
@@ -0,0 +1,24 @@
/* Styling for text inputs (e.g., password fields) */
.form-control-sm {
padding: 0.25rem 0.5rem; /* Reduced padding */
font-size: 0.75rem; /* Small font size, adjust to match <Text small> */
line-height: 1.5;
border-radius: 0.2rem;
min-height: calc(1.5em + 0.5rem + 2px); /* Matches your inline style */
}
/* Optional: Styling for radio/checkbox inputs */
.form-check-input {
/* No font-size here since it’s an input’s appearance, not text */
margin-top: 0.25rem; /* Align with small text */
}
/* If you have <select> elements elsewhere, keep this */
.form-select-sm {
padding: 0.25rem 2rem 0.25rem 0.5rem;
font-size: 0.75rem;
line-height: 1.5;
background-position: right 0.5rem center;
background-size: 12px 10px;
border-radius: 0.2rem;
}
src/css/hotelview/HotelView.css
+315
View File
@@ -0,0 +1,315 @@
.hotelview {
position: relative;
width: 100%;
height: 100%;
}
.hotelview-background {
position: relative;
margin-left: -400px;
margin-top: 240px;
top: 0px;
left: 0px;
height: 1185px;
width: 3000px;
pointer-events: none;
background-image: url(@/assets/images/hotelview/hotelview.png);
background-repeat: no-repeat;
}
.nitro-hotel-view {
display: block;
position: fixed;
width: 100%;
height: calc(100% - 55px);
background: #000;
color: #000;
box-shadow: 0px 55px 0px 0px #83cce8;
z-index: 0; /* Prevent stacking context interference */
}
.nitro-hotel-view-rooftop {
background-image: url(@/assets/images/hotelview/rooftop.gif);
background-repeat: no-repeat;
width: 120px;
height: 164px;
position: absolute;
top: calc(292px + 40px);
left: calc(1062px - 90px);
cursor: pointer;
.arrow {
width: 30px;
height: 42px;
position: absolute;
background-image: url(@/assets/images/hotelview/arrow_down.png);
background-repeat: no-repeat;
left: 39px;
top: 15px;
display: none;
animation: MoveUpDown 1s linear infinite;
z-index: 9999;
}
&:hover {
-webkit-filter: drop-shadow(1px 3px 20px #000000);
.arrow {
display: block;
}
}
}
.nitro-hotel-view-rooftop-pool {
background-image: url(@/assets/images/hotelview/rooftop_pool.gif);
background-repeat: no-repeat;
width: 183px;
height: 164px;
position: absolute;
top: calc(512px + 40px);
left: calc(1324px - 200px);
cursor: pointer;
.arrow {
width: 30px;
height: 42px;
position: absolute;
background-image: url(@/assets/images/hotelview/arrow_down.png);
background-repeat: no-repeat;
left: 75px;
top: 0px;
display: none;
animation: MoveUpDown 1s linear infinite;
z-index: 9999;
}
&:hover {
-webkit-filter: drop-shadow(1px 3px 20px #000000);
.arrow {
display: block;
}
}
}
.nitro-hotel-view-lobby {
background-image: url(@/assets/images/hotelview/lobby.png);
background-repeat: no-repeat;
width: 73px;
height: 65px;
position: absolute;
top: calc(837px + 40px);
left: calc(1264px - 200px);
cursor: pointer;
.arrow {
width: 30px;
height: 42px;
position: absolute;
background-image: url(@/assets/images/hotelview/arrow_down.png);
background-repeat: no-repeat;
left: 75px;
top: 0px;
display: none;
animation: MoveUpDown 1s linear infinite;
z-index: 9999;
}
&:hover {
-webkit-filter: drop-shadow(1px 3px 20px #000000);
.arrow {
display: block;
}
}
}
.nitro-hotel-view-picnic {
background-image: url(@/assets/images/hotelview/picnic.gif);
background-repeat: no-repeat;
width: 575px;
height: 436px;
position: absolute;
top: calc(480px + 248px);
left: calc(889px - 412px);
cursor: pointer;
.arrow {
width: 30px;
height: 42px;
position: absolute;
background-image: url(@/assets/images/hotelview/arrow_down.png);
background-repeat: no-repeat;
left: 315px;
top: 110px;
display: none;
animation: MoveUpDown 1s linear infinite;
z-index: 9999;
}
&:hover {
-webkit-filter: drop-shadow(1px 3px 20px #000000);
.arrow {
display: block;
}
}
}
.nitro-hotel-view-infobus {
background-image: url(@/assets/images/hotelview/infobus.gif);
background-repeat: no-repeat;
width: 181px;
height: 175px;
position: absolute;
top: calc(332px + 241px);
left: calc(1690px - 399px);
cursor: pointer;
z-index: 5;
pointer-events: auto;
.arrow-infobus {
width: 30px;
height: 42px;
position: absolute;
background-image: url(@/assets/images/hotelview/arrow_down.png);
background-repeat: no-repeat;
left: 60px;
top: 5px;
display: none;
animation: MoveUpDown 1s linear infinite;
z-index: 9999;
pointer-events: none;
}
&:hover {
-webkit-filter: drop-shadow(1px 3px 20px #000000);
.arrow-infobus {
display: block;
}
}
}
.nitro-hotel-view-peaceful {
background-image: url(@/assets/images/hotelview/peacefulpark.gif);
background-repeat: no-repeat;
width: 384px;
height: 269px;
position: absolute;
top: calc(359px + 240px);
left: calc(1728px - 400px);
cursor: pointer;
z-index: 6;
pointer-events: none;
&::before {
content: '';
position: absolute;
top: 10%;
left: 38%;
width: 60%;
height: 65%;
pointer-events: auto;
z-index: 8;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 50%;
height: 50%;
pointer-events: auto;
z-index: 8;
}
.arrow-peaceful {
width: 30px;
height: 42px;
position: absolute;
background-image: url(@/assets/images/hotelview/arrow_down.png);
background-repeat: no-repeat;
left: 250px;
top: 100px;
display: none;
animation: MoveUpDown 1s linear infinite;
z-index: 9999;
pointer-events: none;
}
&:hover {
-webkit-filter: drop-shadow(1px 3px 20px #000000);
.arrow-peaceful {
display: block;
}
}
}
.nitro-hotel-view-pool {
background-image: url(@/assets/images/hotelview/pool.gif);
background-repeat: no-repeat;
width: 433px;
height: 361px;
position: absolute;
top: calc(477px + 240px);
left: calc(1633px - 400px);
cursor: pointer;
z-index: 7;
pointer-events: none;
&::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
pointer-events: auto;
z-index: 8;
}
.arrow-pool {
width: 30px;
height: 42px;
position: absolute;
background-image: url(@/assets/images/hotelview/arrow_down.png);
background-repeat: no-repeat;
left: 195px;
top: 250px;
display: none;
animation: MoveUpDown 1s linear infinite;
z-index: 9999;
pointer-events: none;
}
&:hover {
-webkit-filter: drop-shadow(1px 3px 20px #000000);
.arrow-pool {
display: block;
}
}
}
@keyframes MoveUpDown {
0%, 100% {
top: 1px;
}
50% {
top: 10px;
}
}
@media only screen and (min-width: 1700px) {
.left {
left: 18vw !important;
}
}
@media only screen and (min-width: 2000px) {
.left {
left: 23vw !important;
}
}
@media only screen and (min-width: 2500px) {
.left {
left: 28% !important;
}
}
src/css/icons/icons.css
+671
View File
@@ -0,0 +1,671 @@
.nitro-icon {
display: inline-block;
background: transparent;
background-position: center;
background-repeat: no-repeat;
outline: 0;
}
.nitro-icon:hover {
transform: translate(-1px, -1px);
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.nitro-icon:active {
transform: none;
filter: none;
}
.nitro-icon.icon-nitro-light {
background-image: url("@/assets/images/nitro/nitro-n-light.svg");
}
.nitro-icon.icon-nitro-dark {
background-image: url("@/assets/images/nitro/nitro-n-dark.svg");
}
.nitro-icon.icon-nitro-light,
.nitro-icon.icon-nitro-dark {
width: 100%;
height: 40px;
}
.nitro-icon.icon-catalog {
background-image: url("@/assets/images/toolbar/icons/catalog.png");
width: 37px;
height: 36px;
}
.nitro-icon.icon-game {
background-image: url("@/assets/images/toolbar/icons/game.png");
width: 44px;
height: 25px;
}
.nitro-icon.icon-rooms {
background-image: url("@/assets/images/toolbar/icons/rooms.png");
width: 44px;
height: 30px;
}
.nitro-icon.icon-house {
background-image: url("@/assets/images/toolbar/icons/house.png");
width: 32px;
height: 30px;
}
.nitro-icon.gray {
opacity: 0.5;
}
.nitro-icon.icon-inventory {
background-image: url("@/assets/images/toolbar/icons/inventory.png");
width: 44px;
height: 41px;
}
.nitro-icon.icon-modtools {
background-image: url("@/assets/images/toolbar/icons/modtools.png");
width: 29px;
height: 34px;
}
.nitro-icon.icon-friendall {
background-image: url("@/assets/images/toolbar/icons/friend_all.png");
width: 32px;
height: 33px;
}
.nitro-icon.icon-friendsearch {
background-image: url("@/assets/images/toolbar/icons/friend_search.png");
width: 29px;
height: 33px;
}
.nitro-icon.icon-sendmessage {
background-image: url("@/assets/images/toolbar/icons/sendmessage.png");
width: 20px;
height: 21px;
}
.nitro-icon.icon-me-talents {
background-image: url("@/assets/images/toolbar/icons/me-menu/talents.png");
width: 32px;
height: 30px;
}
.nitro-icon.icon-me-helper-tool {
background-image: url("@/assets/images/toolbar/icons/me-menu/helper-tool.png");
width: 32px;
height: 30px;
}
.nitro-icon.icon-me-profile {
background-image: url("@/assets/images/toolbar/icons/me-menu/profile.png");
width: 32px;
height: 30px;
}
.nitro-icon.icon-me-forums {
background-image: url("@/assets/images/toolbar/icons/me-menu/forums.png");
width: 32px;
height: 30px;
}
.nitro-icon.icon-me-rooms {
background-image: url("@/assets/images/toolbar/icons/me-menu/my-rooms.png");
width: 30px;
height: 30px;
}
.nitro-icon.icon-me-achievements {
background-image: url("@/assets/images/toolbar/icons/me-menu/achievements.png");
width: 31px;
height: 30px;
}
.nitro-icon.icon-me-clothing {
background-image: url("@/assets/images/toolbar/icons/me-menu/clothing.png");
width: 27px;
height: 30px;
}
.nitro-icon.icon-me-settings {
background-image: url("@/assets/images/toolbar/icons/me-menu/cog.png");
width: 28px;
height: 34px;
}
.nitro-icon.icon-cog {
background: url("@/assets/images/icons/icon_cog.png");
width: 14px;
height: 15px;
}
.nitro-icon.icon-help {
background: url("@/assets/images/icons/help.png");
width: 13px;
height: 23px;
}
.nitro-icon.icon-joinroom {
background-image: url("@/assets/images/toolbar/icons/joinroom.png");
width: 21px;
height: 21px;
}
.nitro-icon.icon-habbo {
background-image: url("@/assets/images/toolbar/icons/habbo.png");
width: 28px;
height: 28px;
}
.nitro-icon.icon-camera {
background-image: url("@/assets/images/toolbar/icons/camera.png");
width: 38px;
height: 45px;
}
.nitro-icon.icon-message {
background-image: url("@/assets/images/toolbar/icons/message.png");
width: 36px;
height: 32px;
}
.nitro-icon.icon-message.is-unseen {
background-image: url("@/assets/images/toolbar/icons/message_unsee.gif");
}
.nitro-icon.icon-wired-trigger {
background-image: url("@/assets/images/wired/icon_trigger.png");
width: 13px;
height: 14px;
}
.nitro-icon.icon-wired-condition {
background-image: url("@/assets/images/wired/icon_condition.png");
width: 13px;
height: 14px;
}
.nitro-icon.icon-wired-action {
background-image: url("@/assets/images/wired/icon_action.png");
width: 13px;
height: 14px;
}
.nitro-icon.chatstyles-icon {
background-image: url("@/assets/images/chat/styles-icon.png");
width: 17px;
height: 19px;
filter: grayscale(100%);
}
.nitro-icon.chatstyles-icon:hover {
filter: grayscale(0%);
}
.nitro-icon.pencil-icon {
background-image: url("@/assets/images/infostand/pencil-icon.png");
width: 17px;
height: 18px;
}
.nitro-icon.disk-icon {
background-image: url("@/assets/images/infostand/disk-icon.png");
width: 14px;
height: 14px;
}
.nitro-icon.disk-creator {
background-image: url("@/assets/images/infostand/disk-creator.png");
width: 14px;
height: 14px;
}
.nitro-icon.trade-locked-icon {
background-image: url("@/assets/images/inventory/trading/locked-icon.png");
width: 29px;
height: 43px;
}
.nitro-icon.trade-unlocked-icon {
background-image: url("@/assets/images/inventory/trading/unlocked-icon.png");
width: 29px;
height: 43px;
}
.nitro-icon.modtool-room-icon {
background-image: url("@/assets/images/modtool/room.png");
width: 20px;
height: 15px;
}
.nitro-icon.modtool-chatlog-icon {
background-image: url("@/assets/images/modtool/chatlog.gif");
width: 20px;
height: 15px;
}
.nitro-icon.modtool-user-icon {
background-image: url("@/assets/images/modtool/user.gif");
width: 20px;
height: 15px;
}
.nitro-icon.modtool-reports-icon {
background-image: url("@/assets/images/modtool/reports.png");
width: 20px;
height: 15px;
}
.nitro-icon.modtool-wrench-icon {
background-image: url("@/assets/images/modtool/wrench.gif");
width: 20px;
height: 15px;
}
.nitro-icon.modtool-key-icon {
background-image: url("@/assets/images/modtool/key.gif");
width: 20px;
height: 15px;
}
.nitro-icon.icon-catalogue-hc_small {
background-image: url("@/assets/images/catalog/hc_small.png");
width: 31px;
height: 17px;
}
.nitro-icon.icon-catalogue-hc_big {
background: url("@/assets/images/catalog/hc_big.png");
width: 68px;
height: 40px;
}
.nitro-icon.icon-sign-exclamation {
background: url("@/assets/images/icons/sign-exclamation.png");
width: 7px;
height: 17px;
}
.nitro-icon.icon-sign-heart {
background: url("@/assets/images/icons/sign-heart.png");
width: 15px;
height: 13px;
}
.nitro-icon.icon-sign-red {
background: url("@/assets/images/icons/sign-red.png");
width: 11px;
height: 19px;
}
.nitro-icon.icon-sign-yellow {
background: url("@/assets/images/icons/sign-yellow.png");
width: 11px;
height: 19px;
}
.nitro-icon.icon-sign-skull {
background: url("@/assets/images/icons/sign-skull.png");
width: 12px;
height: 12px;
}
.nitro-icon.icon-sign-smile {
background: url("@/assets/images/icons/sign-smile.png");
width: 7px;
height: 14px;
}
.nitro-icon.icon-sign-soccer {
background: url("@/assets/images/icons/sign-soccer.png");
width: 20px;
height: 20px;
}
.nitro-icon.icon-house-small {
background: url("@/assets/images/icons/house-small.png");
width: 19px;
height: 14px;
}
.nitro-icon.icon-camera-small {
background: url("@/assets/images/icons/camera-small.png");
width: 17px;
height: 15px;
}
.nitro-icon.icon-small-room {
background: url("@/assets/images/icons/small-room.png");
width: 17px;
height: 16px;
}
.nitro-icon.icon-cog {
background: url("@/assets/images/icons/cog.png");
width: 21px;
height: 21px;
}
.nitro-icon.icon-chat-history {
background: url("@/assets/images/icons/chat-history.png");
width: 17px;
height: 21px;
}
.nitro-icon.icon-room-link {
background: url("@/assets/images/icons/room-link.png");
width: 17px;
height: 15px;
}
.nitro-icon.icon-zoom-more {
background: url("@/assets/images/icons/zoom-more.png");
width: 12px;
height: 22px;
}
.nitro-icon.icon-zoom-less {
background: url("@/assets/images/icons/zoom-less.png");
width: 12px;
height: 22px;
}
.nitro-icon.icon-like-room {
background: url("@/assets/images/icons/like-room.png");
width: 20px;
height: 22px;
}
.icon-chat-enablebubble {
background: url('@/assets/images/icons/enablebubble.png');
width: 17px;
height: 21px;
}
.icon-chat-disablebubble {
background: url('@/assets/images/icons/disablebubble.png');
width: 17px;
height: 21px;
}
.nitro-icon.icon-arrows {
background: url("@/assets/images/icons/arrows.png");
width: 17px;
height: 15px;
}
.nitro-icon.icon-camera-colormatrix {
background: url("@/assets/images/icons/camera-colormatrix.png");
width: 32px;
height: 21px;
}
.nitro-icon.icon-camera-composite {
background: url("@/assets/images/icons/camera-composite.png");
width: 32px;
height: 21px;
}
.nitro-icon.icon-pf-online {
background: url("@/assets/images/profile/icons/online.gif");
width: 40px;
height: 16px;
}
.nitro-icon.icon-pf-offline {
background: url("@/assets/images/profile/icons/offline.png");
width: 39px;
height: 16px;
}
.nitro-icon.icon-pf-tick {
background: url("@/assets/images/profile/icons/tick.png");
width: 11px;
height: 10px;
}
.nitro-icon.icon-group-type-0 {
background: url("@/assets/images/groups/icons/grouptype_icon_0.png");
width: 16px;
height: 16px;
}
.nitro-icon.icon-group-type-1 {
background: url("@/assets/images/groups/icons/grouptype_icon_1.png");
width: 16px;
height: 16px;
}
.nitro-icon.icon-group-type-2 {
background: url("@/assets/images/groups/icons/grouptype_icon_2.png");
width: 16px;
height: 16px;
}
.nitro-icon.icon-group-decorate {
background: url("@/assets/images/groups/icons/group_decorate_icon.png");
width: 15px;
height: 15px;
}
.nitro-icon.icon-group-member {
background: url("@/assets/images/groups/icons/group_icon_big_member.png");
width: 20px;
height: 20px;
}
.nitro-icon.icon-group-admin {
background: url("@/assets/images/groups/icons/group_icon_big_admin.png");
width: 20px;
height: 20px;
}
.nitro-icon.icon-group-owner {
background: url("@/assets/images/groups/icons/group_icon_big_owner.png");
width: 20px;
height: 20px;
}
.nitro-icon.icon-group-favorite {
background: url("@/assets/images/groups/icons/group_favorite.png");
width: 14px;
height: 14px;
}
.nitro-icon.icon-group-not-favorite {
background: url("@/assets/images/groups/icons/group_notfavorite.png");
width: 14px;
height: 14px;
}
.nitro-icon.icon-group-small-admin {
background: url("@/assets/images/groups/icons/group_icon_admin.png");
width: 11px;
height: 13px;
}
.nitro-icon.icon-group-small-not-admin {
background: url("@/assets/images/groups/icons/group_icon_not_admin.png");
width: 11px;
height: 13px;
}
.nitro-icon.icon-group-small-owner {
background: url("@/assets/images/groups/icons/group_icon_small_owner.png");
width: 13px;
height: 13px;
}
.nitro-icon.icon-navigator-info {
background: url("@/assets/images/navigator/icons/info.png");
width: 18px;
height: 18px;
}
.nitro-icon.icon-navigator-room-locked {
background: url("@/assets/images/navigator/icons/room_locked.png");
width: 13px;
height: 16px;
}
.nitro-icon.icon-navigator-room-password {
background: url("@/assets/images/navigator/icons/room_password.png");
width: 13px;
height: 16px;
}
.nitro-icon.icon-navigator-room-invisible {
background: url("@/assets/images/navigator/icons/room_invisible.png");
width: 13px;
height: 16px;
}
.nitro-icon.icon-navigator-room-group {
background: url("@/assets/images/navigator/icons/room_group.png");
width: 13px;
height: 11px;
}
.nitro-icon.icon-youtube-next {
background: url("@/assets/images/room-widgets/youtube-widget/next.png");
width: 21px;
height: 16px;
}
.nitro-icon.icon-youtube-prev {
background: url("@/assets/images/room-widgets/youtube-widget/prev.png");
width: 21px;
height: 16px;
}
.nitro-icon.icon-hc-banner {
background: url("@/assets/images/catalog/hc_big.png");
width: 68px;
height: 40px;
}
.nitro-icon.icon-set-tile {
background-image: url("@/assets/images/floorplaneditor/icon-tile-set.png");
width: 40px;
height: 40px;
}
.nitro-icon.icon-unset-tile {
background-image: url("@/assets/images/floorplaneditor/icon-tile-unset.png");
width: 40px;
height: 40px;
}
.nitro-icon.icon-increase-height {
background-image: url("@/assets/images/floorplaneditor/icon-tile-up.png");
width: 40px;
height: 40px;
}
.nitro-icon.icon-decrease-height {
background-image: url("@/assets/images/floorplaneditor/icon-tile-down.png");
width: 40px;
height: 40px;
}
.nitro-icon.icon-set-door {
background-image: url("@/assets/images/floorplaneditor/icon-door.png");
width: 40px;
height: 40px;
}
.nitro-icon.icon-door-direction-0 {
background-image: url("@/assets/images/floorplaneditor/door-direction-0.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-door-direction-1 {
background-image: url("@/assets/images/floorplaneditor/door-direction-1.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-door-direction-2 {
background-image: url("@/assets/images/floorplaneditor/door-direction-2.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-door-direction-3 {
background-image: url("@/assets/images/floorplaneditor/door-direction-3.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-door-direction-4 {
background-image: url("@/assets/images/floorplaneditor/door-direction-4.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-door-direction-5 {
background-image: url("@/assets/images/floorplaneditor/door-direction-5.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-door-direction-6 {
background-image: url("@/assets/images/floorplaneditor/door-direction-6.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-door-direction-7 {
background-image: url("@/assets/images/floorplaneditor/door-direction-7.png");
width: 80px;
height: 45px;
}
.nitro-icon.icon-set-select {
background-image: url('@/assets/images/floorplaneditor/icon-select.png');
width: 40px;
height: 40px;
}
.nitro-icon.icon-set-deselect {
background-image: url('@/assets/images/floorplaneditor/icon-deselect.png');
width: 40px;
height: 40px;
}
.nitro-icon.icon-set-squaresselect {
background-image: url('@/assets/images/floorplaneditor/icon-squaresselect.png');
width: 40px;
height: 40px;
}
.nitro-icon.icon-set-active-squaresselect {
background-image: url('@/assets/images/floorplaneditor/icon-squaresselect.png');
width: 40px;
height: 40px;
}
.nitro-icon.icon-tickets {
background-image: url("@/assets/images/icons/tickets.png");
width: 17px;
height: 17px;
}
.nitro-icon.icon-user {
background-image: url("@/assets/images/icons/user.png");
width: 18px;
height: 19px;
}
.nitro-icon.icon-loading {
background-image: url("@/assets/images/ui/loading_icon.png");
}
.nitro-icon.icon-loading.with-size {
width: 16px;
height: 16px;
}
src/css/index.css
+850
View File
@@ -0,0 +1,850 @@
@font-face {
font-family: Ubuntu;
src: url("@/assets/webfonts/Ubuntu-C.ttf");
}
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
scrollbar-width: thin;
}
*,
*:focus,
*:hover {
@apply outline-0;
}
::-webkit-scrollbar {
width: .5rem
}
::-webkit-scrollbar:horizontal {
height: .5rem
}
::-webkit-scrollbar:not(:horizontal) {
width: .5rem
}
::-webkit-scrollbar-track:horizontal {
border-bottom: .25rem solid rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:not(:horizontal) {
border-right: .25rem solid rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-thumb:horizontal {
border-bottom: .25rem solid rgba(30, 114, 149, .4)
}
::-webkit-scrollbar-thumb:horizontal:hover {
border-bottom: .25rem solid rgba(30, 114, 149, .8)
}
::-webkit-scrollbar-thumb:horizontal:active {
border-bottom: .25rem solid #185D79
}
::-webkit-scrollbar-thumb:not(:horizontal) {
border-right: .25rem solid rgba(30, 114, 149, .4)
}
::-webkit-scrollbar-thumb:not(:horizontal):hover {
border-right: .25rem solid rgba(30, 114, 149, .8)
}
::-webkit-scrollbar-thumb:not(:horizontal):active {
border-right: .25rem solid #185D79
}
::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, .1)
}
@layer components {
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes scale {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
.dot {
position: absolute;
width: 2px;
height: 2px;
background-color: white;
animation: blink 2s infinite;
}
.star {
position: absolute;
width: 10px;
height: 10px;
color: #ffffff;
&:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: currentColor;
width: 5px;
height: 5px;
-webkit-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
.star-part {
position: absolute;
background-color: currentColor;
&:nth-child(1) {
top: 0;
left: 50%;
width: 1px;
height: 100%;
transform: translateX(-50%);
}
&:nth-child(2) {
top: 50%;
left: 0;
width: 100%;
height: 1px;
transform: translateY(-50%);
}
}
}
.toolbar {
@apply relative;
background: rgb(33, 33, 33);
background: linear-gradient(0deg, rgba(33, 33, 33, 0.9) 0%, rgba(51, 51, 51, 0.9) 100%);
&::before {
content: "";
display: block;
position: absolute;
top: 1px;
left: 0;
right: 0;
height: 2px;
background-color: rgba(255, 255, 255, 0.05);
}
&::after {
content: "";
display: block;
position: absolute;
bottom: 2px;
left: 0;
right: 0;
height: 2px;
background-color: rgba(0, 0, 0, 0.1);
}
}
.avatar-image {
@apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
}
.ubuntu-close-button {
@apply inline-block h-[20px] w-[19px] bg-transparent bg-[0px_0px] bg-no-repeat outline-0;
background-image: url("@/assets/images/ui/ubuntu-close-buttons.png");
&:hover {
@apply bg-[-38px];
}
&:active {
@apply bg-[-19px];
}
}
}
.unique-item {
.unique-bg-override {
@apply z-[2] bg-center bg-no-repeat;
}
&:before {
@apply absolute z-[1] size-full bg-center bg-no-repeat [content:""];
background-image: url("@/assets/images/unique/grid-bg.png");
}
&:after {
@apply absolute bottom-0 z-[4] size-full bg-center bg-no-repeat [content:""];
background-image: url("@/assets/images/unique/grid-bg-glass.png");
}
&.sold-out:after {
@apply bg-center bg-no-repeat;
background-image: url("@/assets/images/unique/grid-bg-sold-out.png"),
url("@/assets/images/unique/grid-bg-glass.png");
}
.unique-item-counter {
background-image: url("@/assets/images/unique/grid-count-bg.png");
@apply bottom-[1px] z-[3] mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat;
}
}
.unique-sold-out-blocker {
width: 364px;
height: 30px;
background: url("@/assets/images/unique/catalog-info-sold-out.png");
div {
float: right;
width: 140px;
text-align: center;
font-weight: bold;
margin-top: 5px;
margin-right: 17px;
color: #000;
}
}
.unique-compact-plate {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
right: 16px;
width: 34px;
height: 37px;
background: url("@/assets/images/unique/inventory-info-amount-bg.png");
div {
display: flex;
justify-content: center;
align-items: center;
height: 9.5px;
}
}
.unique-complete-plate {
width: 170px;
height: 29px;
background: url("@/assets/images/unique/catalog-info-amount-bg.png") no-repeat center;
z-index: 1;
padding-top: 3px;
.plate-container {
margin-left: 45px;
width: 100px;
font-size: 10px;
color: black;
> :first-child {
margin-bottom: 2px;
}
}
}
.limited-edition-number {
display: inline-block;
outline: 0;
height: 5px;
margin-right: 1px;
background-image: url("@/assets/images/unique/numbers.png");
background-repeat: no-repeat;
&:last-child {
margin-right: 0px;
}
&.n-0 {
width: 4px;
baseackground-position: -1px 0px;
}
&.n-1 {
width: 2px;
background-position: -6px 0px;
}
&.n-2 {
width: 4px;
background-position: -9px 0px;
}
&.n-3 {
width: 4px;
background-position: -14px 0px;
}
&.n-4 {
width: 4px;
background-position: -19px 0px;
}
&.n-5 {
width: 4px;
background-position: -24px 0px;
}
&.n-6 {
width: 4px;
background-position: -29px 0px;
}
&.n-7 {
width: 4px;
background-position: -34px 0px;
}
&.n-8 {
width: 4px;
background-position: -39px 0px;
}
&.n-9 {
width: 4px;
background-position: -44px 0px;
}
}
.nitro-slider {
display: flex;
align-items: center;
width: 100%;
height: 25px;
.track {
height: 3px;
border-radius: .25rem;
overflow: hidden;
&.track-0 {
background-color: #1e7295;
}
&.track-1 {
background-color: #b6bec5;
}
}
.thumb {
border-radius: 50%;
width: 25px;
height: 25px;
background-color: gray;
font-size: 10px;
text-align: center;
line-height: 25px;
padding: 0 3px;
&:hover,
.active {
cursor: pointer;
}
&.active {
outline: none;
}
&.degree {
&:after {
content: '\00b0'
}
}
&.percent {
&:after {
content: '\0025'
}
}
}
}
.layout-grid-item {
height: var(--nitro-grid-column-min-height, unset);
background-position: center;
background-repeat: no-repeat;
background-color: #cdd3d9;
}
.nitro-friends-spritesheet {
background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;
&.icon-friendbar-visit {
width: 21px;
height: 21px;
background-position: -38px -5px;
}
&.icon-heart {
width: 16px;
height: 14px;
background-position: -5px -67px;
}
&.icon-new-message {
width: 14px;
height: 14px;
background-position: -96px -53px;
}
&.icon-none {
width: 16px;
height: 14px;
background-position: -31px -67px;
}
&.icon-profile {
width: 21px;
height: 21px;
background-position: -5px -36px;
}
&.icon-profile-sm {
width: 13px;
height: 11px;
background-position: -51px -91px;
&:hover {
width: 13px;
height: 11px;
background-position: -74px -91px;
}
}
&.icon-smile {
width: 16px;
height: 14px;
background-position: -57px -67px;
}
&.icon-warning {
width: 23px;
height: 21px;
background-position: -5px -5px;
}
&.icon-accept {
width: 13px;
height: 14px;
background-position: -5px -91px;
}
&.icon-add {
width: 16px;
height: 15px;
background-position: -69px -31px;
}
&.icon-bobba {
width: 16px;
height: 14px;
background-position: -96px -5px;
}
&.icon-chat {
width: 17px;
height: 16px;
background-position: -69px -5px;
}
&.icon-deny {
width: 13px;
height: 14px;
background-position: -28px -91px;
}
&.icon-follow {
width: 16px;
height: 14px;
background-position: -96px -29px;
}
&.icon-friendbar-chat {
width: 20px;
height: 21px;
background-position: -36px -36px;
}
}
.nitro-avatar-editor-spritesheet {
background: url('@/assets/images/avatareditor/avatar-editor-spritesheet.png') transparent no-repeat;
&.arrow-left-icon {
width: 28px;
height: 21px;
background-position: -226px -131px;
}
&.arrow-right-icon {
width: 28px;
height: 21px;
background-position: -226px -162px;
}
&.ca-icon {
width: 25px;
height: 25px;
background-position: -226px -61px;
&.selected {
width: 25px;
height: 25px;
background-position: -226px -96px;
}
}
&.cc-icon {
width: 31px;
height: 29px;
background-position: -145px -5px;
&.selected {
width: 31px;
height: 29px;
background-position: -145px -44px;
}
}
&.ch-icon {
width: 29px;
height: 24px;
background-position: -186px -39px;
&.selected {
width: 29px;
height: 24px;
background-position: -186px -73px;
}
}
&.clear-icon {
width: 27px;
height: 27px;
background-position: -145px -157px;
}
&.cp-icon {
width: 30px;
height: 24px;
background-position: -145px -264px;
&.selected {
width: 30px;
height: 24px;
background-position: -186px -5px;
}
}
&.ea-icon {
width: 35px;
height: 16px;
background-position: -226px -193px;
&.selected {
width: 35px;
height: 16px;
background-position: -226px -219px;
}
}
&.fa-icon {
width: 27px;
height: 20px;
background-position: -186px -137px;
&.selected {
width: 27px;
height: 20px;
background-position: -186px -107px;
}
}
&.female-icon {
width: 18px;
height: 27px;
background-position: -186px -202px;
&.selected {
width: 18px;
height: 27px;
background-position: -186px -239px;
}
}
&.ha-icon {
width: 25px;
height: 22px;
background-position: -226px -245px;
&.selected {
width: 25px;
height: 22px;
background-position: -226px -277px;
}
}
&.he-icon {
width: 31px;
height: 27px;
background-position: -145px -83px;
&.selected {
width: 31px;
height: 27px;
background-position: -145px -120px;
}
}
&.hr-icon {
width: 29px;
height: 25px;
background-position: -145px -194px;
&.selected {
width: 29px;
height: 25px;
background-position: -145px -229px;
}
}
&.lg-icon {
width: 19px;
height: 20px;
background-position: -303px -45px;
&.selected {
width: 19px;
height: 20px;
background-position: -303px -75px;
}
}
&.loading-icon {
width: 21px;
height: 25px;
background-position: -186px -167px;
}
&.male-icon {
width: 21px;
height: 21px;
background-position: -186px -276px;
&.selected {
width: 21px;
height: 21px;
background-position: -272px -5px;
}
}
&.sellable-icon {
width: 17px;
height: 15px;
background-position: -303px -105px;
}
&.sh-icon {
width: 37px;
height: 10px;
background-position: -303px -5px;
&.selected {
width: 37px;
height: 10px;
background-position: -303px -25px;
}
}
&.spotlight-icon {
width: 130px;
height: 305px;
background-position: -5px -5px;
}
&.wa-icon {
width: 36px;
height: 18px;
background-position: -226px -5px;
&.selected {
width: 36px;
height: 18px;
background-position: -226px -33px;
}
}
}
.nitro-avatar-editor-wardrobe-figure-preview {
background-color: #677181;
overflow: hidden;
z-index: 1;
.avatar-image {
position: absolute;
bottom: 15px;
margin: 0 auto;
z-index: 4;
}
.avatar-shadow {
position: absolute;
left: 0;
right: 0;
bottom: 25px;
width: 40px;
height: 20px;
margin: 0 auto;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.20);
z-index: 2;
}
&:after {
position: absolute;
content: '';
top: 75%;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
background-color: #677181;
box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6);
transform: scale(2);
}
.button-container {
position: absolute;
bottom: 0;
z-index: 5;
}
}
.nitro-avatar-editor {
.category-item {
height: 40px;
}
.figure-preview-container {
position: relative;
height: 100%;
background-color: #677181;
overflow: hidden;
z-index: 1;
.arrow-container {
position: absolute;
width: 100%;
margin: 0 auto;
padding: 0 10px;
display: flex;
justify-content: space-between;
bottom: 12px;
z-index: 5;
.icon {
cursor: pointer;
}
}
.avatar-image {
position: absolute;
left: 0;
right: 0;
bottom: 50px;
margin: 0 auto;
z-index: 4;
}
.avatar-spotlight {
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: 0 auto;
opacity: 0.3;
pointer-events: none;
z-index: 3;
}
.avatar-shadow {
position: absolute;
left: 0;
right: 0;
bottom: 15px;
width: 70px;
height: 30px;
margin: 0 auto;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.20);
z-index: 2;
}
&:after {
position: absolute;
content: '';
top: 75%;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
background-color: #677181;
box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6);
transform: scale(2);
}
}
}
/* Font Size */
.fs-custom {
font-size: var(--font-size, 16px); /* Fallback to 16px if not set */
}
/* Header and Tab Colors */
.bg-card-header {
background-color: #1e7295; /* e.g., #2c3e50 */
}
.bg-card-tabs {
background-color: #185d79; /* Match bg-card-header */
}
src/css/layout/LayoutTrophy.css
+40
View File
@@ -0,0 +1,40 @@
.nitro-layout-trophy {
position: relative;
width: 340px;
height: 173px;
color: black;
pointer-events: all;
background-position: 0px 0px;
background-image: url('@/assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
&.trophy-2 {
background-position: 0px 173px;
}
&.trophy-3 {
background-position: 0px 346px;
}
.trophy-header {
height: 22px;
.trophy-close {
width: 15px;
height: 15px;
right: 5.5px;
top: 5px;
}
}
.trophy-content {
width: 297px;
height: 116px;
white-space: pre-wrap;
overflow: auto;
}
.trophy-footer {
width: 297px;
}
}
src/css/loading/loading.css
+38
View File
@@ -0,0 +1,38 @@
.nitro-loading {
position: relative;
background-image: radial-gradient(#1d1a24, #003a6b);
z-index: 100;
}
.nitro-loading_animation {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
left: 0;
background: url('@/assets/images/loading/loading.gif') no-repeat top left;
width: 84px;
height: 84px;
zoom: 1.5;
image-rendering: pixelated;
}
.nitro-loading_logo {
position: absolute;
top: 20px;
left: 20px;
background: url('@/assets/images/notifications/coolui.png') no-repeat top left;
width: 150px;
height: 100px;
z-index: 2;
}
.nitro-loading_text {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
z-index: 3;
}
src/css/nitrocard/NitroCardView.css
+245
View File
@@ -0,0 +1,245 @@
.nitro-card {
resize: both;
@include media-breakpoint-down(lg) {
max-width: 100vw !important;
max-height: 100vh !important;
}
&.theme-primary {
border: 1px solid #283F5D;
.nitro-card-header {
min-height: 33px;
max-height: 33px;
background: #1E7295;
.nitro-card-header-text {
color: #FFF;
text-shadow: 0px 4px 4px rgba(#000, 0.25);
@include font-size(1.35);
}
.nitro-card-header-close {
cursor: pointer;
padding: 2px 2px;
line-height: 1;
border-radius: .25rem;
box-shadow: 0 0 0 1.6px #FFF;
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: .25rem;
box-shadow: 0 0 0 1.6px #FFF;
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: #185D79;
.nav-item {
padding: .2rem .8rm;
background-color: #B6BEC5;
color: #000;
z-index: 1;
margin-bottom: -1px;
&.active {
background-color: #DFDFDF;
border-color: #283F5D #283F5D #DFDFDF !important;
border-bottom: 1px solid black;
&:before {
background: #FFF;
}
}
&: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: #DFDFDF;
}
}
&.theme-primary-slim {
border: 1px solid #283F5D;
.nitro-card-header {
position: relative;
min-height: 28px;
max-height: 28px;
background: repeating-linear-gradient(#2DABC2, #2DABC2 50%, #2B91A7 50%, #2B91A7 100%);
border-bottom: 2px solid darken(#2B91A7, 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(#FFF, 0.3);
}
.nitro-card-header-text {
color: #FFF;
text-shadow: 0px 4px 4px rgba(#000, 0.25);
@include font-size (1.125);
min-height: 21px;
}
.nitro-card-header-close {
cursor: pointer;
padding: 0px 2px;
line-height: 1;
@include font-size(.675);
border-radius: .25rem;
box-shadow: 0 0 0 1.6px #FFF;
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(.675);
border-radius: .25rem;
box-shadow: 0 0 0 1.6px #FFF;
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: #185D79;
}
.content-area {
background-color: #DFDFDF;
}
}
}
.content-area {
height: 100%;
padding-top: 8px;
padding-bottom: 8px;
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: 133px;
max-height: 133px;
border-bottom: 1px solid #283F5D;
}
.nitro-card-accordion-set {
&.active {
height: 100%;
overflow: hidden;
background: rgba(#FFF, 0.5);
border-bottom: 1px solid rgba(#000, 0.2);
}
.nitro-card-accordion-set-header {
border-bottom: 1px solid rgba(#000, 0.2);
}
}
src/css/notification/NotificationCenterView.css
+66
View File
@@ -0,0 +1,66 @@
.nitro-alert {
min-height: 150px;
max-height: 350px;
.notification-frank {
background-image: url('@/assets/images/notifications/frank.gif');
width:47px;
height: 85px;
}
.notification-text {
min-width: 250px;
}
&.nitro-alert-default,
&.nitro-alert-motd {
width: 350px;
.notification-text {
min-width: auto;
}
}
&.nitro-alert-credits {
width: 370px;
.notification-text {
min-width: auto;
}
}
&.nitro-alert-moderation,
&.nitro-alert-alert {
width: 250px;
.notification-text {
min-width: 225px;
}
}
}
.nitro-notification-bubble {
pointer-events: all;
padding: 6px 5px;
pointer-events: all;
padding: 10px;
background-color: #262626;
box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6);
font-size: .7875rem;
border-radius: 0.5rem;
font-size: 0.7875rem;
color: white;
.bubble-image-container {
width: 50px;
height: 50px;
}
}
.topnotifications{
margin-top: -6px;
}
.alertView_nitro-coolui-logo {
width: 150px;
height: 78px;
position: relative;
background-image: url("@/assets/images/notifications/coolui.png");
background-repeat: no-repeat;
}
src/css/purse/PurseView.css
+111
View File
@@ -0,0 +1,111 @@
.nitro-purse-container {
font-size: 1em;
pointer-events: all;
.nitro-purse {
margin-top: 4px;
.nitro-purse-subscription {
background-color: rgba($light, 0.1);
}
.nitro-purse-button {
padding: 3px 2px;
}
.coffecurrencybutton{
border-radius: 0.5rem !important;
background-color: #b69b83;
border: 2px solid hsla(0deg, 0%, 100%, 0.5);
margin-bottom: 3px;
padding: 0px !important;
width: 30px;
pointer-events: all;
}
.borderhccontent{
background-color: #212131;
border-radius: 0.5rem!important;
border: 2px solid #383853;
height: calc(100% - 3px);
}
.nitro-purse-button.currency--1 {
background: #e8b125;
border: 2px solid #f4d892;
}
.nitro-purse-button.currency-0 {
background: #c364c1;
border: 2px solid #ecb3ea;
}
.nitro-purse-button.currency-5 {
background: #6bafaa;
border: 2px solid #ace6e2;
}
.allcurrencypurse{
border-radius: 5px!important;
margin-bottom: 2px;
}
}
.nitro-purse-seasonal-currency {
background-color: #212131;
background: linear-gradient(to right, #5f5f8d, transparent);
height: 30px;
margin-bottom: 4px;
border-radius: 0.5rem !important;
}
.seasonal-image-padding {
padding: 6px;
}
.seasonal-text-padding,
.seasonal-amount {
margin-left: 4px;
display: flex;
align-items: center;
}
.nitro-purse-seasonal-currency.purple {
&.purple {
background: linear-gradient(to right, #b17fbe, transparent);
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
}
.nitro-purse-seasonal-currency.bronze {
.bronze {
background: linear-gradient(to right, #d4943c, transparent);
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
}
.nitro-purse-seasonal-currency.pink {
.pink {
background: linear-gradient(to right, #d89ba8, transparent);
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
}
.nitro-purse-seasonal-currency.blue {
.blue{
background: linear-gradient(to right, #95c3e5, transparent);
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
}
.nitro-purse-seasonal-currency.red {
&.red{
background: linear-gradient(to right, #ff0004, transparent);
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
}
}
.topcurrencygen {
margin-top: 2px;
}
src/css/room/ChatHistoryView.css
+4
View File
@@ -0,0 +1,4 @@
.nitro-chat-history {
width: 300px;
height: 200px;
}
src/css/room/InfoStand.css
+145
View File
@@ -0,0 +1,145 @@
.nitro-use-product-confirmation {
width: 350px;
.product-preview {
display: flex;
justify-content: center;
align-items: center;
width: 75px; /* Aligned with .body-image.pet */
height: 80px;
background: url('@/assets/images/room-widgets/avatar-info/preview-background.png') no-repeat center;
.pet-image {
width: 75px;
height: 80px;
}
.monsterplant-image {
width: 75px;
height: 80px;
background: url('@/assets/images/room-widgets/furni-context-menu/monsterplant-preview.png') no-repeat center;
}
}
}
.nitro-infostand {
position: relative;
width: clamp(160px, 20vw, 190px); /* Responsive width */
z-index: 30;
pointer-events: auto;
background: #212131;
box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
border-radius: 0.5rem;
padding: 10px;
@media (max-width: 576px) {
top: -67px;
padding: 8px;
.text {
font-size: 0.85rem;
}
}
.form-control-sm {
height: 25px;
min-height: 25px;
padding: 0.1rem 0.25rem;
}
.body-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 68px;
border-radius: 0.5rem;
&.pet {
max-width: 75px;
}
&.bot {
background-image: url('@/assets/images/infostand/bot_background.png');
background-repeat: no-repeat;
background-position: center;
}
&.furni {
background-color: transparent;
margin-right: 0;
}
}
.body-image-plant {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 68px;
height: 85px;
max-height: 90px;
border-radius: 0.5rem;
}
.badge-image {
width: 45px;
height: 45px;
}
.motto-content {
min-height: 18px;
}
.motto-input {
width: 100%;
height: 100%;
font-size: 12px;
padding: 0;
outline: 0;
border: 0;
color: rgba(255, 255, 255, 1);
position: relative;
background: transparent;
resize: none;
&:focus {
font-style: italic;
}
}
.flex-tags {
flex-wrap: wrap;
margin-bottom: -10px;
.text-tags {
padding: 2px;
border-radius: 3px;
background: #333;
margin-right: 5px;
margin-bottom: 10px;
cursor: pointer;
}
}
.button-container {
pointer-events: auto;
}
.pet-stats {
height: 18px;
transition: width 0.3s ease-in-out; /* Smooth progress bar animation */
}
}
.nitro-rarity-level {
width: 36px;
height: 28px;
background: url('@/assets/images/infostand/rarity-level.png');
div {
line-height: 28px;
text-align: center;
color: $black;
font-weight: bold;
}
}
src/css/room/NavigatorRoomSettings.css
+11
View File
@@ -0,0 +1,11 @@
.nitro-room-settings {
width: 400px;
.list-container {
height: 100px;
.list-item {
background-color: #ececec;
}
}
}
src/css/room/RoomWidgets.css
+162
View File
@@ -0,0 +1,162 @@
.nitro-room-tools-container {
position: absolute;
bottom:60px;
left: 15px;
.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: #12597f;
font-size: 10px;
&:hover {
color: #419AD2;
}
}
src/css/slider.css
+54
View File
@@ -0,0 +1,54 @@
.nitro-slider {
display: flex;
align-items: center;
width: 100%;
height: 25px;
.track {
height: 3px;
border-radius: $border-radius;
overflow: hidden;
&.track-0 {
background-color: $primary;
}
&.track-1 {
background-color: $muted;
}
}
.thumb {
border-radius: 50%;
width: 25px;
height: 25px;
background-color: gray;
font-size: 10px;
text-align: center;
line-height: 25px;
padding: 0 3px;
&:hover,
.active {
cursor: pointer;
}
&.active {
outline: none;
}
&.degree {
&:after {
content: '\00b0'
}
}
&.percent {
&:after {
content: '\0025'
}
}
}
}
src/css/widgets/ChooserWidgets.css
+1
View File
@@ -0,0 +1 @@
1
src/css/widgets/FurnitureWidgets.css
+561
View File
@@ -0,0 +1,561 @@
.nitro-room-widgets {
pointer-events: none;
}
.no-resize {
resize: none !important;
min-width: 340px !important;
max-width: 340px !important;
min-height: 430px !important;
max-height: 430px !important;
}
.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;
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;
}
}
}