493
src/index.css
493
src/index.css
@@ -8,6 +8,8 @@
|
||||
@font-face {
|
||||
font-family: "Fusion Pixel";
|
||||
src: url("/fusion-pixel.ttf") format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@@ -129,6 +131,9 @@ body {
|
||||
--platform-text-strong: #28151d;
|
||||
--platform-text-base: #5c4650;
|
||||
--platform-text-soft: #886f79;
|
||||
--platform-brand-logo-title: #3b1a24;
|
||||
--platform-brand-logo-subtitle: #d93570;
|
||||
--platform-brand-logo-shadow: #8f5870;
|
||||
--platform-line-soft: rgba(233, 183, 202, 0.42);
|
||||
--platform-subpanel-fill:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 244, 248, 0.72));
|
||||
@@ -163,6 +168,7 @@ body {
|
||||
--platform-nav-active-fill:
|
||||
linear-gradient(180deg, rgba(255, 91, 132, 0.18), rgba(255, 151, 116, 0.18));
|
||||
--platform-nav-active-border: rgba(255, 126, 154, 0.3);
|
||||
--platform-nav-active-shadow: 0 12px 28px rgba(255, 91, 132, 0.12);
|
||||
--platform-modal-fill:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 248, 0.95));
|
||||
--platform-modal-border: rgba(255, 255, 255, 0.52);
|
||||
@@ -180,6 +186,34 @@ body {
|
||||
linear-gradient(180deg, rgba(239, 78, 122, 0.22), rgba(255, 255, 255, 0.42));
|
||||
--platform-track-border: rgba(234, 193, 208, 0.52);
|
||||
--platform-track-fill: rgba(255, 255, 255, 0.7);
|
||||
--platform-page-fill:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 245, 248, 0.24));
|
||||
--platform-page-border: rgba(255, 255, 255, 0.24);
|
||||
--platform-input-fill: rgba(255, 255, 255, 0.82);
|
||||
--platform-input-fill-focus: rgba(255, 255, 255, 0.96);
|
||||
--platform-input-highlight: rgba(255, 255, 255, 0.72);
|
||||
--platform-input-focus-ring: rgba(255, 91, 132, 0.14);
|
||||
--platform-nav-item-text: #7b606c;
|
||||
--platform-nav-item-text-active: #2d1820;
|
||||
--platform-nav-item-hover-fill: rgba(255, 255, 255, 0.52);
|
||||
--platform-nav-item-icon-fill: rgba(255, 255, 255, 0.66);
|
||||
--platform-nav-item-icon-text: #7a5d67;
|
||||
--platform-nav-item-icon-active-fill: rgba(255, 255, 255, 0.92);
|
||||
--platform-nav-item-icon-active-text: #d93570;
|
||||
--platform-nav-icon-active-shadow: 0 12px 24px rgba(255, 91, 132, 0.16);
|
||||
--platform-profile-hero-fill:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 248, 0.9));
|
||||
--platform-profile-hero-border: rgba(255, 255, 255, 0.52);
|
||||
--platform-profile-hero-shadow: 0 20px 56px rgba(216, 74, 124, 0.18);
|
||||
--platform-profile-avatar-fill:
|
||||
linear-gradient(135deg, rgba(255, 79, 139, 0.96), rgba(255, 140, 110, 0.9));
|
||||
--platform-profile-avatar-shadow: 0 14px 30px rgba(255, 79, 139, 0.24);
|
||||
--platform-profile-chip-fill: rgba(255, 255, 255, 0.74);
|
||||
--platform-profile-chip-hover-fill: rgba(255, 255, 255, 0.92);
|
||||
--platform-profile-chip-text: #6a505b;
|
||||
--platform-profile-action-fill: linear-gradient(135deg, #ff4f8b, #ff8a73);
|
||||
--platform-profile-action-text: #fff7fb;
|
||||
--platform-profile-action-shadow: 0 14px 30px rgba(255, 79, 139, 0.24);
|
||||
}
|
||||
|
||||
.platform-theme--dark {
|
||||
@@ -210,6 +244,9 @@ body {
|
||||
--platform-text-strong: #ffffff;
|
||||
--platform-text-base: rgb(228 228 231);
|
||||
--platform-text-soft: rgb(161 161 170);
|
||||
--platform-brand-logo-title: #fff7dc;
|
||||
--platform-brand-logo-subtitle: #9fe7ff;
|
||||
--platform-brand-logo-shadow: #040814;
|
||||
--platform-line-soft: rgba(255, 255, 255, 0.1);
|
||||
--platform-subpanel-fill: rgba(255, 255, 255, 0.05);
|
||||
--platform-subpanel-border: rgba(255, 255, 255, 0.1);
|
||||
@@ -241,8 +278,9 @@ body {
|
||||
--platform-nav-fill:
|
||||
linear-gradient(180deg, rgba(109, 40, 217, 0.12), rgba(255, 255, 255, 0.03));
|
||||
--platform-nav-active-fill:
|
||||
linear-gradient(180deg, rgba(91, 108, 255, 0.28), rgba(61, 217, 255, 0.1));
|
||||
--platform-nav-active-border: rgba(160, 169, 255, 0.18);
|
||||
linear-gradient(180deg, rgba(91, 108, 255, 0.2), rgba(61, 217, 255, 0.08));
|
||||
--platform-nav-active-border: rgba(160, 169, 255, 0.24);
|
||||
--platform-nav-active-shadow: 0 12px 28px rgba(8, 14, 42, 0.4);
|
||||
--platform-modal-fill:
|
||||
linear-gradient(180deg, rgba(16, 18, 46, 0.98), rgba(7, 8, 19, 0.98));
|
||||
--platform-modal-border: rgba(160, 169, 255, 0.12);
|
||||
@@ -259,45 +297,70 @@ body {
|
||||
--platform-overlay-fill: rgba(5, 8, 28, 0.72);
|
||||
--platform-track-border: rgba(255, 255, 255, 0.12);
|
||||
--platform-track-fill: rgba(255, 255, 255, 0.08);
|
||||
--platform-page-fill:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
|
||||
--platform-page-border: rgba(255, 255, 255, 0.06);
|
||||
--platform-input-fill: rgba(255, 255, 255, 0.05);
|
||||
--platform-input-fill-focus: rgba(255, 255, 255, 0.08);
|
||||
--platform-input-highlight: rgba(255, 255, 255, 0.06);
|
||||
--platform-input-focus-ring: rgba(91, 108, 255, 0.22);
|
||||
--platform-nav-item-text: rgb(161 161 170);
|
||||
--platform-nav-item-text-active: rgb(238 248 255);
|
||||
--platform-nav-item-hover-fill: rgba(91, 108, 255, 0.08);
|
||||
--platform-nav-item-icon-fill: rgba(255, 255, 255, 0.06);
|
||||
--platform-nav-item-icon-text: rgb(161 161 170);
|
||||
--platform-nav-item-icon-active-fill:
|
||||
linear-gradient(180deg, rgba(91, 108, 255, 0.24), rgba(61, 217, 255, 0.12));
|
||||
--platform-nav-item-icon-active-text: rgb(238 248 255);
|
||||
--platform-nav-icon-active-shadow: 0 12px 24px rgba(8, 14, 42, 0.42);
|
||||
--platform-profile-hero-fill:
|
||||
linear-gradient(180deg, rgba(20, 24, 58, 0.96), rgba(8, 10, 24, 0.98));
|
||||
--platform-profile-hero-border: rgba(160, 169, 255, 0.14);
|
||||
--platform-profile-hero-shadow: 0 24px 70px rgba(5, 8, 28, 0.42);
|
||||
--platform-profile-avatar-fill:
|
||||
linear-gradient(135deg, rgba(91, 108, 255, 0.94), rgba(61, 217, 255, 0.78));
|
||||
--platform-profile-avatar-shadow: 0 14px 32px rgba(61, 217, 255, 0.16);
|
||||
--platform-profile-chip-fill: rgba(255, 255, 255, 0.08);
|
||||
--platform-profile-chip-hover-fill: rgba(255, 255, 255, 0.14);
|
||||
--platform-profile-chip-text: rgb(228 228 231);
|
||||
--platform-profile-action-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
|
||||
--platform-profile-action-text: rgb(238 248 255);
|
||||
--platform-profile-action-shadow: 0 14px 32px rgba(91, 108, 255, 0.22);
|
||||
}
|
||||
|
||||
.platform-brand-logo {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.35rem;
|
||||
gap: 0.18rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.platform-brand-logo__title,
|
||||
.platform-brand-logo__subtitle {
|
||||
font-family: "Noto Serif SC", "Inter", ui-sans-serif, system-ui, sans-serif !important;
|
||||
font-synthesis: none;
|
||||
font-kerning: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.platform-brand-logo__title {
|
||||
font-size: clamp(1.95rem, 5vw, 2.7rem);
|
||||
font-weight: 700;
|
||||
line-height: 0.96;
|
||||
letter-spacing: 0.18em;
|
||||
color: #fffdf7;
|
||||
text-shadow:
|
||||
0 2px 0 rgba(3, 7, 18, 0.88),
|
||||
0 10px 28px rgba(0, 0, 0, 0.4),
|
||||
0 0 18px rgba(129, 140, 248, 0.16);
|
||||
font-family: "Fusion Pixel", "Inter", ui-sans-serif, system-ui, sans-serif !important;
|
||||
font-size: clamp(1.9rem, 5.2vw, 2.65rem);
|
||||
font-weight: 400;
|
||||
line-height: 0.92;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--platform-brand-logo-title);
|
||||
}
|
||||
|
||||
.platform-brand-logo__subtitle {
|
||||
padding-left: 0.14rem;
|
||||
font-size: clamp(0.58rem, 1.8vw, 0.72rem);
|
||||
font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
|
||||
font-weight: 600;
|
||||
padding-left: 0.08rem;
|
||||
font-family: "Fusion Pixel", "Inter", ui-sans-serif, system-ui, sans-serif !important;
|
||||
font-size: clamp(0.56rem, 1.7vw, 0.7rem);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.34em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(228, 228, 231, 0.82);
|
||||
text-shadow:
|
||||
0 1px 0 rgba(3, 7, 18, 0.88),
|
||||
0 8px 20px rgba(0, 0, 0, 0.34),
|
||||
0 0 12px rgba(34, 211, 238, 0.14);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--platform-brand-logo-subtitle);
|
||||
}
|
||||
|
||||
.platform-main-shell {
|
||||
@@ -316,6 +379,16 @@ body {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.platform-page-stage {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
border: 1px solid var(--platform-page-border);
|
||||
border-radius: 2rem;
|
||||
background: var(--platform-page-fill);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.platform-surface {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -451,7 +524,7 @@ body {
|
||||
color: var(--platform-text-strong);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 12px 28px rgba(255, 91, 132, 0.12);
|
||||
var(--platform-nav-active-shadow);
|
||||
}
|
||||
|
||||
.platform-button {
|
||||
@@ -551,7 +624,7 @@ body {
|
||||
justify-content: center;
|
||||
border-radius: 1rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
color: rgb(161 161 170);
|
||||
color: var(--platform-nav-item-text);
|
||||
transition:
|
||||
background-color 180ms ease,
|
||||
color 180ms ease,
|
||||
@@ -560,8 +633,8 @@ body {
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--platform-text-strong);
|
||||
background: var(--platform-nav-item-hover-fill);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active {
|
||||
@@ -570,7 +643,72 @@ body {
|
||||
color: var(--platform-text-strong);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 12px 28px rgba(255, 91, 132, 0.12);
|
||||
var(--platform-nav-active-shadow);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__icon-shell,
|
||||
.platform-desktop-rail__icon-shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
background: var(--platform-nav-item-icon-fill);
|
||||
color: var(--platform-nav-item-icon-text);
|
||||
transition:
|
||||
background-color 180ms ease,
|
||||
color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__icon-shell {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.platform-desktop-rail__icon-shell {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__icon,
|
||||
.platform-desktop-rail__icon {
|
||||
color: var(--platform-nav-item-icon-text);
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__label,
|
||||
.platform-desktop-rail__label {
|
||||
color: var(--platform-nav-item-text);
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__icon-shell,
|
||||
.platform-desktop-rail__button:hover .platform-desktop-rail__icon-shell {
|
||||
background: var(--platform-nav-item-hover-fill);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__icon,
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__label,
|
||||
.platform-desktop-rail__button:hover .platform-desktop-rail__icon,
|
||||
.platform-desktop-rail__button:hover .platform-desktop-rail__label {
|
||||
color: var(--platform-text-strong);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__icon-shell,
|
||||
.platform-desktop-rail__button--active .platform-desktop-rail__icon-shell {
|
||||
background: var(--platform-nav-item-icon-active-fill);
|
||||
box-shadow: var(--platform-nav-icon-active-shadow);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__icon,
|
||||
.platform-desktop-rail__button--active .platform-desktop-rail__icon {
|
||||
color: var(--platform-nav-item-icon-active-text);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__label,
|
||||
.platform-desktop-rail__button--active .platform-desktop-rail__label {
|
||||
color: var(--platform-nav-item-text-active);
|
||||
}
|
||||
|
||||
.platform-modal-shell {
|
||||
@@ -664,7 +802,7 @@ body {
|
||||
gap: 0.6rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 1.5rem;
|
||||
color: rgb(161 161 170);
|
||||
color: var(--platform-nav-item-text);
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
border-color 180ms ease,
|
||||
@@ -686,7 +824,7 @@ body {
|
||||
color: var(--platform-text-strong);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 14px 28px rgba(255, 91, 132, 0.12);
|
||||
var(--platform-nav-active-shadow);
|
||||
}
|
||||
|
||||
.platform-desktop-panel {
|
||||
@@ -760,7 +898,7 @@ body {
|
||||
width: 100%;
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
border-radius: 1rem;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
background: var(--platform-input-fill);
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--platform-text-strong);
|
||||
outline: none;
|
||||
@@ -768,7 +906,7 @@ body {
|
||||
border-color 180ms ease,
|
||||
background-color 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
box-shadow: inset 0 1px 0 var(--platform-input-highlight);
|
||||
}
|
||||
|
||||
.platform-input::placeholder {
|
||||
@@ -777,8 +915,124 @@ body {
|
||||
|
||||
.platform-input:focus {
|
||||
border-color: var(--platform-nav-active-border);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 0 0 3px rgba(255, 91, 132, 0.12);
|
||||
background: var(--platform-input-fill-focus);
|
||||
box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
|
||||
}
|
||||
|
||||
.platform-profile-hero {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--platform-profile-hero-border);
|
||||
background: var(--platform-profile-hero-fill);
|
||||
color: var(--platform-text-strong);
|
||||
box-shadow: var(--platform-profile-hero-shadow);
|
||||
}
|
||||
|
||||
.platform-profile-avatar {
|
||||
background: var(--platform-profile-avatar-fill);
|
||||
color: white;
|
||||
box-shadow: var(--platform-profile-avatar-shadow);
|
||||
}
|
||||
|
||||
.platform-profile-camera,
|
||||
.platform-profile-chip,
|
||||
.platform-profile-icon-button {
|
||||
background: var(--platform-profile-chip-fill);
|
||||
color: var(--platform-profile-chip-text);
|
||||
transition:
|
||||
background-color 180ms ease,
|
||||
color 180ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.platform-profile-camera {
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
}
|
||||
|
||||
.platform-profile-chip:hover,
|
||||
.platform-profile-icon-button:hover {
|
||||
background: var(--platform-profile-chip-hover-fill);
|
||||
color: var(--platform-text-strong);
|
||||
}
|
||||
|
||||
.platform-profile-action {
|
||||
background: var(--platform-profile-action-fill);
|
||||
color: var(--platform-profile-action-text);
|
||||
box-shadow: var(--platform-profile-action-shadow);
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
filter 180ms ease;
|
||||
}
|
||||
|
||||
.platform-profile-action:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.02);
|
||||
}
|
||||
|
||||
.platform-role-studio__preview {
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
background:
|
||||
radial-gradient(circle at top, var(--platform-surface-glow-a), transparent 48%),
|
||||
var(--platform-subpanel-fill);
|
||||
}
|
||||
|
||||
.platform-role-studio__stage {
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
background: var(--platform-track-fill);
|
||||
}
|
||||
|
||||
.platform-role-studio__footer {
|
||||
border-top: 1px solid var(--platform-subpanel-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 16%),
|
||||
var(--platform-desktop-panel-fill);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.platform-theme :where(
|
||||
.platform-modal-shell,
|
||||
.platform-auth-card,
|
||||
.platform-subpanel,
|
||||
.platform-remap-surface,
|
||||
.platform-role-studio
|
||||
) :where(
|
||||
input:not([type='file']):not([type='range']):not([type='checkbox']):not([type='radio']),
|
||||
textarea,
|
||||
select
|
||||
) {
|
||||
border-color: var(--platform-subpanel-border) !important;
|
||||
background: var(--platform-input-fill) !important;
|
||||
color: var(--platform-text-strong) !important;
|
||||
box-shadow: inset 0 1px 0 var(--platform-input-highlight);
|
||||
}
|
||||
|
||||
.platform-theme :where(
|
||||
.platform-modal-shell,
|
||||
.platform-auth-card,
|
||||
.platform-subpanel,
|
||||
.platform-remap-surface,
|
||||
.platform-role-studio
|
||||
) :where(
|
||||
input:not([type='file']):not([type='range']):not([type='checkbox']):not([type='radio']),
|
||||
textarea,
|
||||
select
|
||||
)::placeholder {
|
||||
color: var(--platform-text-soft) !important;
|
||||
}
|
||||
|
||||
.platform-theme :where(
|
||||
.platform-modal-shell,
|
||||
.platform-auth-card,
|
||||
.platform-subpanel,
|
||||
.platform-remap-surface,
|
||||
.platform-role-studio
|
||||
) :where(
|
||||
input:not([type='file']):not([type='range']):not([type='checkbox']):not([type='radio']),
|
||||
textarea,
|
||||
select
|
||||
):focus {
|
||||
border-color: var(--platform-nav-active-border) !important;
|
||||
background: var(--platform-input-fill-focus) !important;
|
||||
box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
|
||||
}
|
||||
|
||||
.platform-banner {
|
||||
@@ -1045,6 +1299,165 @@ body {
|
||||
) :where(
|
||||
[class*='border-emerald-300/'],
|
||||
[class*='border-emerald-400/']
|
||||
) {
|
||||
border-color: var(--platform-success-border) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='text-white'],
|
||||
[class*='text-zinc-50'],
|
||||
[class*='text-zinc-100']
|
||||
) {
|
||||
color: var(--platform-text-strong) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='text-zinc-200'],
|
||||
[class*='text-zinc-300']
|
||||
) {
|
||||
color: var(--platform-text-base) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='text-zinc-400'],
|
||||
[class*='text-zinc-500']
|
||||
) {
|
||||
color: var(--platform-text-soft) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light :where(
|
||||
.platform-modal-shell,
|
||||
.platform-desktop-panel,
|
||||
.platform-desktop-trending-item,
|
||||
.platform-auth-card,
|
||||
.platform-subpanel,
|
||||
.platform-remap-surface,
|
||||
.platform-role-studio
|
||||
) :where(
|
||||
[class~='bg-black/24'],
|
||||
[class~='bg-black/26'],
|
||||
[class~='bg-black/30'],
|
||||
[class~='bg-[#111318]/92'],
|
||||
[class~='bg-[#111318]/95'],
|
||||
[class~='bg-[#11161f]']
|
||||
) {
|
||||
background: var(--platform-subpanel-fill) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light :where(
|
||||
.platform-modal-shell,
|
||||
.platform-desktop-panel,
|
||||
.platform-desktop-trending-item,
|
||||
.platform-auth-card,
|
||||
.platform-subpanel,
|
||||
.platform-role-studio
|
||||
) :where(
|
||||
[class~='bg-white/10'],
|
||||
[class~='bg-white/12']
|
||||
) {
|
||||
background-color: var(--platform-track-fill) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class~='bg-black/18'],
|
||||
[class~='bg-black/20'],
|
||||
[class~='bg-black/22'],
|
||||
[class~='bg-black/24'],
|
||||
[class~='bg-black/26'],
|
||||
[class~='bg-black/30'],
|
||||
[class~='bg-[#111318]/92'],
|
||||
[class~='bg-[#111318]/95'],
|
||||
[class~='bg-white/5'],
|
||||
[class~='bg-white/6'],
|
||||
[class~='bg-white/8']
|
||||
) {
|
||||
background: var(--platform-subpanel-fill) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='border-white/8'],
|
||||
[class*='border-white/10'],
|
||||
[class*='border-white/12'],
|
||||
[class*='border-white/14'],
|
||||
[class*='border-white/16'],
|
||||
[class*='border-white/18'],
|
||||
[class*='border-white/20'],
|
||||
[class*='border-white/22'],
|
||||
[class*='border-white/25']
|
||||
) {
|
||||
border-color: var(--platform-subpanel-border) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='text-sky-50'],
|
||||
[class*='text-sky-100'],
|
||||
[class*='text-sky-200'],
|
||||
[class*='text-sky-300']
|
||||
) {
|
||||
color: var(--platform-cool-text) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='bg-sky-500/8'],
|
||||
[class*='bg-sky-500/10'],
|
||||
[class*='bg-sky-500/12'],
|
||||
[class*='bg-sky-500/15']
|
||||
) {
|
||||
background-color: var(--platform-cool-bg) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='border-sky-200/'],
|
||||
[class*='border-sky-300/'],
|
||||
[class*='border-sky-400/']
|
||||
) {
|
||||
border-color: var(--platform-cool-border) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='text-amber-50'],
|
||||
[class*='text-amber-100'],
|
||||
[class*='text-amber-200']
|
||||
) {
|
||||
color: var(--platform-warm-text) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='bg-amber-500/8'],
|
||||
[class*='bg-amber-500/10'],
|
||||
[class*='bg-amber-500/12'],
|
||||
[class*='bg-amber-500/15']
|
||||
) {
|
||||
background-color: var(--platform-warm-bg) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='border-amber-300/'],
|
||||
[class*='border-amber-400/']
|
||||
) {
|
||||
border-color: var(--platform-warm-border) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='text-emerald-50'],
|
||||
[class*='text-emerald-100'],
|
||||
[class*='text-emerald-600']
|
||||
) {
|
||||
color: var(--platform-success-text) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='bg-emerald-500/8'],
|
||||
[class*='bg-emerald-500/10'],
|
||||
[class*='bg-emerald-500/12'],
|
||||
[class*='bg-emerald-500/15']
|
||||
) {
|
||||
background-color: var(--platform-success-bg) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .platform-remap-surface :where(
|
||||
[class*='border-emerald-300/'],
|
||||
[class*='border-emerald-400/']
|
||||
) {
|
||||
border-color: var(--platform-success-border) !important;
|
||||
}
|
||||
@@ -1522,17 +1935,17 @@ button {
|
||||
}
|
||||
|
||||
.platform-brand-logo {
|
||||
gap: 0.28rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.platform-brand-logo__title {
|
||||
font-size: 1.72rem;
|
||||
letter-spacing: 0.14em;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.platform-brand-logo__subtitle {
|
||||
font-size: 0.54rem;
|
||||
letter-spacing: 0.22em;
|
||||
font-size: 0.5rem;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.world-carousel {
|
||||
|
||||
Reference in New Issue
Block a user