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')
|
||||
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)
|
||||
|
||||
@ -43,7 +43,18 @@ export const Text: FC<TextProps> = props => {
|
||||
const getClassNames = useMemo(() => {
|
||||
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 (fontWeight) newClassNames.push('font-' + fontWeight);
|
||||
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
|
||||
newClassNames.push('border-[1px] border-[#283F5D]');
|
||||
|
||||
|
||||
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
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';
|
||||
|
||||
@ -8,7 +8,7 @@ import { NitroInput } from '../../layout';
|
||||
export const ChatHistoryView: FC<{}> = props => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [searchText, setSearchText] = useState<string>('');
|
||||
const { chatHistory = [] } = useChatHistory();
|
||||
const {chatHistory = []} = useChatHistory();
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
const isFirstRender = useRef(true);
|
||||
const prevChatLength = useRef<number>(0);
|
||||
@ -74,14 +74,14 @@ export const ChatHistoryView: FC<{}> = props => {
|
||||
if (!isVisible) return null;
|
||||
|
||||
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)} />
|
||||
<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)} />
|
||||
<div ref={elementRef} style={{ flex: 1, overflowY: 'auto', background: 'inherit' }}>
|
||||
{filteredChatHistory.map((row, index) => (
|
||||
<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 && (
|
||||
<div className="bubble-container" style={{position: 'relative', display: 'inline-flex', alignItems: 'center'}}>
|
||||
<div
|
||||
|
||||
@ -1,20 +1,15 @@
|
||||
/* ChatHistoryView.css */
|
||||
.nitro-chat-history {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Increase specificity by repeating the .nitro-chat-history class */
|
||||
.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;
|
||||
background-image: url('@/assets/images/chat/chathistory_background.png');
|
||||
background-repeat: repeat;
|
||||
background-size: auto;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Increase specificity for the slide-in animation */
|
||||
.nitro-chat-history .p-1.slide-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@ -71,11 +71,11 @@
|
||||
}
|
||||
|
||||
.username {
|
||||
color: rgba($white, 1);
|
||||
color: rgba(#FFF, 1);
|
||||
}
|
||||
|
||||
.message {
|
||||
color: rgba($white, 1) !important;
|
||||
color: rgba(#FFF, 1) !important;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
@ -650,7 +650,7 @@
|
||||
padding: 5px 6px 5px 4px;
|
||||
margin-left: 27px;
|
||||
line-height: 1;
|
||||
color: $black;
|
||||
color: #000;
|
||||
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