mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
:up Fix text colors and cleanup
This commit is contained in:
duckietm
parent
9d6744ae23
commit
5252d73e56
102
src/App.scss
102
src/App.scss
@ -1,102 +0,0 @@
|
|||||||
$toolbar-me-zindex: 90;
|
|
||||||
$chatinput-zindex: 80;
|
|
||||||
$toolbar-zindex: 70;
|
|
||||||
$rightside-zindex: 69;
|
|
||||||
$notification-center-zindex: 68;
|
|
||||||
$toolbar-memenu-zindex: 60;
|
|
||||||
$roomtools-zindex: 50;
|
|
||||||
$context-menu-zindex: 40;
|
|
||||||
$infostand-zindex: 30;
|
|
||||||
$quiz-zindex: 21;
|
|
||||||
$chat-zindex: 20;
|
|
||||||
$highscore-zindex: 19;
|
|
||||||
|
|
||||||
$grid-bg-color: #cdd3d9;
|
|
||||||
$grid-border-color: $muted;
|
|
||||||
$grid-active-bg-color: #ececec;
|
|
||||||
$grid-active-border-color: $white;
|
|
||||||
|
|
||||||
$toolbar-height: 55px;
|
|
||||||
|
|
||||||
$achievement-width: 375px;
|
|
||||||
$achievement-height: 405px;
|
|
||||||
|
|
||||||
$avatar-editor-width: 620px;
|
|
||||||
$avatar-editor-height: 374px;
|
|
||||||
|
|
||||||
$catalog-width: 630px;
|
|
||||||
$catalog-height: 400px;
|
|
||||||
|
|
||||||
$inventory-width: 528px;
|
|
||||||
$inventory-height: 320px;
|
|
||||||
|
|
||||||
$navigator-width: 420px;
|
|
||||||
$navigator-height: 440px;
|
|
||||||
|
|
||||||
$chat-input-style-selector-widget-width: 210px;
|
|
||||||
$chat-input-style-selector-widget-height: 200px;
|
|
||||||
|
|
||||||
$user-profile-width: 470px;
|
|
||||||
$user-profile-height: 460px;
|
|
||||||
|
|
||||||
$nitro-widget-custom-stack-height-width: 275px;
|
|
||||||
$nitro-widget-custom-stack-height-height: 220px;
|
|
||||||
|
|
||||||
$nitro-widget-exchange-credit-width: 375px;
|
|
||||||
$nitro-widget-exchange-credit-height: 150px;
|
|
||||||
|
|
||||||
$nitro-widget-crafting-width: 500px;
|
|
||||||
$nitro-widget-crafting-height: 300px;
|
|
||||||
|
|
||||||
$chat-history-width: 300px;
|
|
||||||
$chat-history-height: 300px;
|
|
||||||
|
|
||||||
$friends-list-width: 250px;
|
|
||||||
$friends-list-height: 300px;
|
|
||||||
|
|
||||||
$help-width: 450px;
|
|
||||||
$help-height: 290px;
|
|
||||||
|
|
||||||
$nitropedia-width: 400px;
|
|
||||||
$nitropedia-height: 400px;
|
|
||||||
|
|
||||||
$messenger-width: 500px;
|
|
||||||
$messenger-height: 370px;
|
|
||||||
|
|
||||||
$marketplace-post-offer-width: 430px;
|
|
||||||
$marketplace-post-offer-height: 250px;
|
|
||||||
|
|
||||||
$camera-editor-width: 600px;
|
|
||||||
$camera-editor-height: 500px;
|
|
||||||
|
|
||||||
$camera-checkout-width: 350px;
|
|
||||||
|
|
||||||
$room-info-width: 325px;
|
|
||||||
|
|
||||||
$nitro-group-creator-width: 383px;
|
|
||||||
$nitro-mod-tools-width: 175px;
|
|
||||||
|
|
||||||
$nitro-group-manager-width: 390px;
|
|
||||||
$nitro-group-manager-height: 355px;
|
|
||||||
|
|
||||||
$nitro-chooser-width: 200px;
|
|
||||||
$nitro-chooser-height: 200px;
|
|
||||||
|
|
||||||
$nitro-doorbell-width: 300px;
|
|
||||||
$nitro-doorbell-height: 200px;
|
|
||||||
|
|
||||||
$nitro-guide-tool-width: 250px;
|
|
||||||
|
|
||||||
$nitro-floor-editor-width: 760px;
|
|
||||||
$nitro-floor-editor-height: 500px;
|
|
||||||
|
|
||||||
$nitro-calendar-width: 850px;
|
|
||||||
$nitro-calendar-height: 400px;
|
|
||||||
|
|
||||||
.nitro-app {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import './common';
|
|
||||||
@import './components';
|
|
||||||
@ -45,6 +45,9 @@ export const Button: FC<ButtonProps> = props =>
|
|||||||
if(variant == 'dark')
|
if(variant == 'dark')
|
||||||
newClassNames.push('text-white bg-dark [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#18181bfb] hover:border-[#161619fb]');
|
newClassNames.push('text-white bg-dark [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#18181bfb] hover:border-[#161619fb]');
|
||||||
|
|
||||||
|
if(variant == 'gray')
|
||||||
|
newClassNames.push('text-white bg-[#1e7295] border-[#1e7295] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#1a617f] hover:border-[#185b77]');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(size)
|
if(size)
|
||||||
|
|||||||
@ -43,7 +43,18 @@ export const Text: FC<TextProps> = props => {
|
|||||||
const getClassNames = useMemo(() => {
|
const getClassNames = useMemo(() => {
|
||||||
const newClassNames: string[] = ['inline'];
|
const newClassNames: string[] = ['inline'];
|
||||||
|
|
||||||
if (variant) newClassNames.push('text-' + variant);
|
if (variant) {
|
||||||
|
if (variant === 'primary') newClassNames.push('text-[#1e7295]');
|
||||||
|
if (variant == 'secondary') newClassNames.push('text-[#185d79]');
|
||||||
|
if (variant === 'black') newClassNames.push('text-[#000000]');
|
||||||
|
if (variant == 'dark') newClassNames.push('text-[#18181b]');
|
||||||
|
if (variant === 'gray') newClassNames.push('text-[#6b7280]');
|
||||||
|
if (variant === 'white') newClassNames.push('text-[#ffffff]');
|
||||||
|
if (variant == 'success') newClassNames.push('text-[#00800b]');
|
||||||
|
if (variant == 'danger') newClassNames.push('text-[#a81a12]');
|
||||||
|
if (variant == 'warning') newClassNames.push('text-[#ffc107]');
|
||||||
|
}
|
||||||
|
|
||||||
if (bold) newClassNames.push('font-bold');
|
if (bold) newClassNames.push('font-bold');
|
||||||
if (fontWeight) newClassNames.push('font-' + fontWeight);
|
if (fontWeight) newClassNames.push('font-' + fontWeight);
|
||||||
if (fontSize) newClassNames.push('fs-' + fontSize);
|
if (fontSize) newClassNames.push('fs-' + fontSize);
|
||||||
|
|||||||
@ -1,248 +0,0 @@
|
|||||||
$nitro-card-header-height: 133px;
|
|
||||||
$nitro-card-tabs-height: 133px;
|
|
||||||
|
|
||||||
.nitro-card {
|
|
||||||
resize: both;
|
|
||||||
|
|
||||||
@include media-breakpoint-down(lg) {
|
|
||||||
max-width: 100vw !important;
|
|
||||||
max-height: 100vh !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.theme-primary {
|
|
||||||
border: $border-width solid $border-color;
|
|
||||||
|
|
||||||
.nitro-card-header {
|
|
||||||
min-height: 33px;
|
|
||||||
max-height: 33px;
|
|
||||||
background: $primary;
|
|
||||||
|
|
||||||
.nitro-card-header-text {
|
|
||||||
color: $white;
|
|
||||||
text-shadow: 0px 4px 4px rgba($black, 0.25);
|
|
||||||
@include font-size($h4-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-header-close {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 2px 2px;
|
|
||||||
line-height: 1;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
box-shadow: 0 0 0 1.6px $white;
|
|
||||||
border: 2px solid #921911;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
rgba(245, 80, 65, 1),
|
|
||||||
rgba(245, 80, 65, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
filter: brightness(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-header-report-camera {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 1px 3px;
|
|
||||||
line-height: 1;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
box-shadow: 0 0 0 1.6px $white;
|
|
||||||
border: 2px solid #921911;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
rgba(245, 80, 65, 1),
|
|
||||||
rgba(245, 80, 65, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
filter: brightness(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-tabs {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
|
||||||
background-color: $muted;
|
|
||||||
color: $black;
|
|
||||||
z-index: 1;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $light;
|
|
||||||
border-color: $border-color $border-color $light !important;
|
|
||||||
border-bottom: 1px solid black;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 93%;
|
|
||||||
height: 3px;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
top: 1.5px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
background: #c2c9d1;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-area {
|
|
||||||
background-color: $light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.theme-primary-slim {
|
|
||||||
border: $border-width solid $border-color;
|
|
||||||
|
|
||||||
.nitro-card-header {
|
|
||||||
position: relative;
|
|
||||||
min-height: 28px;
|
|
||||||
max-height: 28px;
|
|
||||||
background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
|
|
||||||
border-bottom: 2px solid darken($quaternary, 5);
|
|
||||||
box-shadow: 0 2px white;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding-top:2px;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
position: absolute;
|
|
||||||
content: ' ';
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: rgba($white, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-header-text {
|
|
||||||
color: $white;
|
|
||||||
text-shadow: 0px 4px 4px rgba($black, 0.25);
|
|
||||||
@include font-size($h5-font-size);
|
|
||||||
min-height: 21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-header-close {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0px 2px;
|
|
||||||
line-height: 1;
|
|
||||||
@include font-size($h7-font-size);
|
|
||||||
border-radius: $border-radius;
|
|
||||||
box-shadow: 0 0 0 1.6px $white;
|
|
||||||
border: 2px solid #921911;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
rgba(245, 80, 65, 1),
|
|
||||||
rgba(245, 80, 65, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
filter: brightness(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-header-report-camera {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0px 2px;
|
|
||||||
margin-right: 4px;
|
|
||||||
line-height: 1;
|
|
||||||
@include font-size($h7-font-size);
|
|
||||||
border-radius: $border-radius;
|
|
||||||
box-shadow: 0 0 0 1.6px $white;
|
|
||||||
border: 2px solid #921911;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
rgba(245, 80, 65, 1),
|
|
||||||
rgba(245, 80, 65, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 50%,
|
|
||||||
rgba(194, 48, 39, 1) 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
filter: brightness(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-tabs {
|
|
||||||
background-color: $secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-area {
|
|
||||||
background-color: $light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-area {
|
|
||||||
height: 100%;
|
|
||||||
padding-top: $container-padding-x;
|
|
||||||
padding-bottom: $container-padding-x;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
&.theme-dark {
|
|
||||||
background-color: #1C323F !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-down(lg) {
|
|
||||||
.content-area {
|
|
||||||
height: 100% !important;
|
|
||||||
min-height: auto !important;
|
|
||||||
max-height: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-header {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-tabs {
|
|
||||||
height: 100%;
|
|
||||||
min-height: $nitro-card-tabs-height;
|
|
||||||
max-height: $nitro-card-tabs-height;
|
|
||||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-accordion-set {
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba($white, 0.5);
|
|
||||||
border-bottom: 1px solid rgba($black, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-card-accordion-set-header {
|
|
||||||
border-bottom: 1px solid rgba($black, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -20,8 +20,6 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
|
|||||||
// Card Theme Changer
|
// Card Theme Changer
|
||||||
newClassNames.push('border-[1px] border-[#283F5D]');
|
newClassNames.push('border-[1px] border-[#283F5D]');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if(classNames.length) newClassNames.push(...classNames);
|
if(classNames.length) newClassNames.push(...classNames);
|
||||||
|
|
||||||
return newClassNames;
|
return newClassNames;
|
||||||
|
|||||||
@ -1,562 +0,0 @@
|
|||||||
.layout-grid-item {
|
|
||||||
height: var(--nitro-grid-column-min-height, unset);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-color: $grid-bg-color;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: $grid-active-border-color !important;
|
|
||||||
|
|
||||||
&:not(.clear-bg) {
|
|
||||||
background-color: $grid-active-bg-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
|
|
||||||
img {
|
|
||||||
opacity: 0.5;
|
|
||||||
filter: grayscale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.unseen {
|
|
||||||
background-color: rgba($success, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-image {
|
|
||||||
background-position-y: -35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-highlight {
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
z-index: 2;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 50%;
|
|
||||||
background-color: $white;
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-gift-card {
|
|
||||||
width: 306px;
|
|
||||||
height: 159px;
|
|
||||||
background: url('@/assets/images/gift/gift_tag.png') center no-repeat;
|
|
||||||
|
|
||||||
.gift-face {
|
|
||||||
width: 65px;
|
|
||||||
|
|
||||||
.gift-incognito {
|
|
||||||
width: 37px;
|
|
||||||
height: 48px;
|
|
||||||
background: url('@/assets/images/gift/incognito.png') center no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift-avatar {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 40px;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
.avatar-image {
|
|
||||||
position: absolute;
|
|
||||||
left: -25px;
|
|
||||||
top: -20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift-message {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
border: none;
|
|
||||||
resize: none;
|
|
||||||
outline: none;
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
margin: 2px;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border: $border-width solid $white;
|
|
||||||
background-color: rgba($white, 0.8);
|
|
||||||
border-radius: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
||||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
||||||
|
|
||||||
&:nth-child(1) {
|
|
||||||
-webkit-animation-delay: -0.32s;
|
|
||||||
animation-delay: -0.32s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) {
|
|
||||||
-webkit-animation-delay: -0.16s;
|
|
||||||
animation-delay: -0.16s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes sk-bouncedelay {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
80%,
|
|
||||||
100% {
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes sk-bouncedelay {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
80%,
|
|
||||||
100% {
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.room-thumbnail {
|
|
||||||
position: relative;
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
background: url('@/assets/images/navigator/thumbnail_placeholder.png') no-repeat center;
|
|
||||||
background-color: rgba($black, 0.125);
|
|
||||||
}
|
|
||||||
|
|
||||||
#draggable-windows-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include media-breakpoint-down(lg) {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-window {
|
|
||||||
display: inline-block;
|
|
||||||
visibility: hidden;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-currency-icon {
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-item-count {
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
font-size: 9.5px;
|
|
||||||
padding: 2px 3px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
|
|
||||||
.badge-information {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.badge-information {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-information {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
width: 210px;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
background: $white;
|
|
||||||
left: -220px;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
position: absolute;
|
|
||||||
content: ' ';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 10px solid $white;
|
|
||||||
border-bottom: 10px solid transparent;
|
|
||||||
border-top: 10px solid transparent;
|
|
||||||
top: 10px;
|
|
||||||
right: -10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.furni-image,
|
|
||||||
.room-object-image {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-counter-time {
|
|
||||||
width: 36px;
|
|
||||||
height: 28px;
|
|
||||||
background: url('@/assets/images/infostand/countown-timer.png');
|
|
||||||
|
|
||||||
div {
|
|
||||||
line-height: 28px;
|
|
||||||
text-align: center;
|
|
||||||
color: $white;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-image {
|
|
||||||
position: relative;
|
|
||||||
width: 90px;
|
|
||||||
height: 130px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center -8px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pet-image {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.room-preview-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.room-preview-image {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
background-color: $light;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&.border-0 {
|
|
||||||
&::after {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
border-bottom: 2px solid white;
|
|
||||||
border-right: 2px solid white;
|
|
||||||
box-shadow: -2px -2px rgba(0, 0, 0, 0.4),
|
|
||||||
inset 3px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.unique-item {
|
|
||||||
.unique-bg-override {
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('@/assets/images/unique/grid-bg.png') center no-repeat;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('@/assets/images/unique/grid-bg-glass.png') center no-repeat;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sold-out:after {
|
|
||||||
background: url('@/assets/images/unique/grid-bg-sold-out.png') center no-repeat,
|
|
||||||
url('@/assets/images/unique/grid-bg-glass.png') center no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unique-item-counter {
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
bottom: 1px;
|
|
||||||
width: 100%;
|
|
||||||
height: 9px;
|
|
||||||
background: url('@/assets/images/unique/grid-count-bg.png') center no-repeat;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
background-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-progress-bar {
|
|
||||||
border: 1px solid $white;
|
|
||||||
padding: 2px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
overflow: hidden;
|
|
||||||
background: $primary;
|
|
||||||
|
|
||||||
&.large {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-progress-bar-inner {
|
|
||||||
height: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
transition: all 1s;
|
|
||||||
border-radius: calc(#{$border-radius} / 2);
|
|
||||||
background: repeating-linear-gradient($tertiary,
|
|
||||||
$tertiary 50%,
|
|
||||||
$quaternary 50%,
|
|
||||||
$quaternary 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-progress-bar-text {
|
|
||||||
text-shadow: 0px 4px 4px rgba($black, 0.25);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@import './card/NitroCardView';
|
|
||||||
@ -1 +1 @@
|
|||||||
export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light';
|
export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light' | 'gray';
|
||||||
|
|||||||
@ -74,14 +74,14 @@ export const ChatHistoryView: FC<{}> = props => {
|
|||||||
if (!isVisible) return null;
|
if (!isVisible) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NitroCardView className="nitro-chat-history" theme="primary-slim" uniqueKey="chat-history" style={{ height: '100%' }}>
|
<NitroCardView className="w-[400px] h-[400px] nitro-chat-history" theme="primary-slim" uniqueKey="chat-history">
|
||||||
<NitroCardHeaderView headerText={LocalizeText('room.chathistory.button.text')} onCloseClick={event => setIsVisible(false)} />
|
<NitroCardHeaderView headerText={LocalizeText('room.chathistory.button.text')} onCloseClick={event => setIsVisible(false)} />
|
||||||
<NitroCardContentView className="nitro-card-content" gap={2} overflow="hidden" style={{ height: 'calc(100% - 40px)', display: 'flex', flexDirection: 'column' }}>
|
<NitroCardContentView className="nitro-card-content" gap={2} overflow="hidden" style={{ height: 'calc(100% - 40px)', display: 'flex', flexDirection: 'column' }}>
|
||||||
<NitroInput placeholder={LocalizeText('generic.search')} type="text" value={searchText} onChange={event => setSearchText(event.target.value)} />
|
<NitroInput placeholder={LocalizeText('generic.search')} type="text" value={searchText} onChange={event => setSearchText(event.target.value)} />
|
||||||
<div ref={elementRef} style={{ flex: 1, overflowY: 'auto', background: 'inherit' }}>
|
<div ref={elementRef} style={{ flex: 1, overflowY: 'auto', background: 'inherit' }}>
|
||||||
{filteredChatHistory.map((row, index) => (
|
{filteredChatHistory.map((row, index) => (
|
||||||
<Flex key={index} alignItems="center" className="p-1" gap={2}>
|
<Flex key={index} alignItems="center" className="p-1" gap={2}>
|
||||||
<Text variant="muted">{row.timestamp}</Text>
|
<Text variant="gray">{row.timestamp}</Text>
|
||||||
{row.type === ChatEntryType.TYPE_CHAT && (
|
{row.type === ChatEntryType.TYPE_CHAT && (
|
||||||
<div className="bubble-container" style={{position: 'relative', display: 'inline-flex', alignItems: 'center'}}>
|
<div className="bubble-container" style={{position: 'relative', display: 'inline-flex', alignItems: 'center'}}>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -1,11 +1,7 @@
|
|||||||
/* ChatHistoryView.css */
|
|
||||||
.nitro-chat-history {
|
.nitro-chat-history {
|
||||||
width: 400px;
|
|
||||||
height: 200px;
|
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Increase specificity by repeating the .nitro-chat-history class */
|
|
||||||
.nitro-chat-history .nitro-card-content {
|
.nitro-chat-history .nitro-card-content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url('@/assets/images/chat/chathistory_background.png');
|
background-image: url('@/assets/images/chat/chathistory_background.png');
|
||||||
@ -14,7 +10,6 @@
|
|||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Increase specificity for the slide-in animation */
|
|
||||||
.nitro-chat-history .p-1.slide-in {
|
.nitro-chat-history .p-1.slide-in {
|
||||||
animation: slideIn 0.3s ease-out;
|
animation: slideIn 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -71,11 +71,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
color: rgba($white, 1);
|
color: rgba(#FFF, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
color: rgba($white, 1) !important;
|
color: rgba(#FFF, 1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pointer {
|
.pointer {
|
||||||
@ -650,7 +650,7 @@
|
|||||||
padding: 5px 6px 5px 4px;
|
padding: 5px 6px 5px 4px;
|
||||||
margin-left: 27px;
|
margin-left: 27px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: $black;
|
color: #000;
|
||||||
min-height: 25px;
|
min-height: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
@import './assets/styles';
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
user-select: none;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
|
|
||||||
.image-rendering-pixelated {
|
|
||||||
image-rendering: pixelated;
|
|
||||||
image-rendering: -moz-crisp-edges;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
object-fit: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import './App';
|
|
||||||
Loading…
x
Reference in New Issue
Block a user