mirror of
https://gitlab.com/vyla-entertainment/documentation.git
synced 2026-11-12 21:47:22 -05:00
574 lines
16 KiB
CSS
574 lines
16 KiB
CSS
:root[data-theme="halloween"] {
|
|
--bg: #0a0604;
|
|
--text: #f5ebe6;
|
|
--text: #ff7518;
|
|
--muted: #a37559;
|
|
--border: #3d1c0c;
|
|
--bg-elevated: rgba(255, 117, 24, 0.12);
|
|
--bg-card: rgba(28, 14, 8, 0.6);
|
|
--bg-card-hover: rgba(46, 21, 10, 0.85);
|
|
--bg-code: #050201;
|
|
--code-inline-bg: rgba(255, 117, 24, 0.15);
|
|
--code-inline-text: #ff944d;
|
|
--code-text: #fed7aa;
|
|
--bg-menu: #0e0704;
|
|
--bg-modal: rgba(10, 6, 4, 0.92);
|
|
--hover-bg: rgba(255, 117, 24, 0.12);
|
|
--search-bg: rgba(255, 117, 24, 0.08);
|
|
--search-panel-bg: rgba(14, 7, 4, 0.95);
|
|
--code-group-bg: #1c0e07;
|
|
--code-group-panel-bg: #0a0604;
|
|
--code-tab-active: #ff7518;
|
|
--footer-border: #3d1c0c;
|
|
--border-subtle: rgba(255, 117, 24, 0.15);
|
|
--btn-primary-bg: #ff7518;
|
|
--btn-primary-text: #000000;
|
|
--btn-home-bg: #ff7518;
|
|
--btn-home-text: #000000;
|
|
--callout-note-bg: rgba(255, 117, 24, 0.14);
|
|
--callout-info-bg: rgba(168, 85, 247, 0.15);
|
|
--callout-warning-bg: rgba(255, 154, 77, 0.18);
|
|
--callout-warning-text: #ffaa5e;
|
|
--body-radial-tint: rgba(10, 6, 4, 0.85);
|
|
--skeleton-pulse-1: rgba(255, 117, 24, 0.06);
|
|
--skeleton-pulse-2: rgba(255, 117, 24, 0.18);
|
|
--spider-display: block;
|
|
--cobweb-display: block;
|
|
--spider-thread: rgba(255, 154, 77, 0.4);
|
|
|
|
--hl-comment: #7c4f34;
|
|
--hl-punct: #fed7aa;
|
|
--hl-func: #ff944d;
|
|
--hl-keyword: #a855f7;
|
|
--hl-string: #84cc16;
|
|
--hl-var: #ff7518;
|
|
--hl-op: #a855f7;
|
|
--hl-num: #f59e0b;
|
|
--hl-param: #ffedd5;
|
|
--hl-class: #c084fc;
|
|
--hl-tag: #ff7518;
|
|
--hl-deleted-color: #ef4444;
|
|
--hl-deleted-bg: rgba(239, 68, 68, 0.2);
|
|
--hl-inserted-color: #84cc16;
|
|
--hl-inserted-bg: rgba(132, 204, 22, 0.2);
|
|
}
|
|
|
|
:root[data-theme="christmas"] {
|
|
--bg: #07110c;
|
|
--text: #f4efe6;
|
|
--text: #ff5c5c;
|
|
--muted: #8fa89a;
|
|
--border: #1f3a2b;
|
|
--bg-elevated: rgba(255, 92, 92, 0.1);
|
|
--bg-card: rgba(10, 26, 18, 0.6);
|
|
--bg-card-hover: rgba(18, 44, 30, 0.85);
|
|
--bg-code: #040a07;
|
|
--code-inline-bg: rgba(245, 196, 81, 0.14);
|
|
--code-inline-text: #f5c451;
|
|
--code-text: #e8f5e9;
|
|
--bg-menu: #09150e;
|
|
--bg-modal: rgba(7, 17, 12, 0.9);
|
|
--hover-bg: rgba(255, 92, 92, 0.12);
|
|
--search-bg: rgba(245, 196, 81, 0.08);
|
|
--search-panel-bg: rgba(9, 21, 14, 0.95);
|
|
--code-group-bg: #11261a;
|
|
--code-group-panel-bg: #07110c;
|
|
--code-tab-active: #ff5c5c;
|
|
--footer-border: #1f3a2b;
|
|
--border-subtle: rgba(245, 196, 81, 0.14);
|
|
--btn-primary-bg: #d92d3a;
|
|
--btn-primary-text: #ffffff;
|
|
--btn-home-bg: #d92d3a;
|
|
--btn-home-text: #ffffff;
|
|
--callout-note-bg: rgba(47, 191, 113, 0.14);
|
|
--callout-info-bg: rgba(245, 196, 81, 0.14);
|
|
--callout-warning-bg: rgba(255, 92, 92, 0.18);
|
|
--callout-warning-text: #ff9a9a;
|
|
--body-radial-tint: rgba(7, 17, 12, 0.85);
|
|
--skeleton-pulse-1: rgba(245, 196, 81, 0.06);
|
|
--skeleton-pulse-2: rgba(245, 196, 81, 0.16);
|
|
--snow-display: block;
|
|
--lights-display: block;
|
|
|
|
--hl-comment: #5f8a72;
|
|
--hl-punct: #e8f5e9;
|
|
--hl-func: #f5c451;
|
|
--hl-keyword: #ff6b6b;
|
|
--hl-string: #5fd68f;
|
|
--hl-var: #ff9f68;
|
|
--hl-op: #ff6b6b;
|
|
--hl-num: #f5c451;
|
|
--hl-param: #fdf2d0;
|
|
--hl-class: #7fe3b0;
|
|
--hl-tag: #ff6b6b;
|
|
--hl-deleted-color: #ff6b6b;
|
|
--hl-deleted-bg: rgba(255, 107, 107, 0.18);
|
|
--hl-inserted-color: #5fd68f;
|
|
--hl-inserted-bg: rgba(95, 214, 143, 0.18);
|
|
}
|
|
|
|
:root[data-theme="autumn"] {
|
|
--bg: #1a0f08;
|
|
--text: #f7ead7;
|
|
--text: #f4b942;
|
|
--muted: #a68a6d;
|
|
--border: #3a2412;
|
|
--bg-elevated: rgba(244, 185, 66, 0.1);
|
|
--bg-card: rgba(40, 23, 11, 0.6);
|
|
--bg-card-hover: rgba(58, 36, 18, 0.85);
|
|
--bg-code: #0e0703;
|
|
--code-inline-bg: rgba(244, 185, 66, 0.14);
|
|
--code-inline-text: #f4b942;
|
|
--code-text: #fde7c0;
|
|
--bg-menu: #1a0f08;
|
|
--bg-modal: rgba(26, 15, 8, 0.9);
|
|
--hover-bg: rgba(244, 185, 66, 0.12);
|
|
--search-bg: rgba(244, 185, 66, 0.08);
|
|
--search-panel-bg: rgba(26, 15, 8, 0.95);
|
|
--code-group-bg: #28170b;
|
|
--code-group-panel-bg: #1a0f08;
|
|
--code-tab-active: #f4b942;
|
|
--footer-border: #3a2412;
|
|
--border-subtle: rgba(244, 185, 66, 0.14);
|
|
--btn-primary-bg: #f4b942;
|
|
--btn-primary-text: #1a0f08;
|
|
--btn-home-bg: #f4b942;
|
|
--btn-home-text: #1a0f08;
|
|
--callout-note-bg: rgba(200, 69, 44, 0.16);
|
|
--callout-info-bg: rgba(132, 160, 60, 0.16);
|
|
--callout-warning-bg: rgba(244, 185, 66, 0.18);
|
|
--callout-warning-text: #f8cf7a;
|
|
--body-radial-tint: rgba(26, 15, 8, 0.85);
|
|
--skeleton-pulse-1: rgba(244, 185, 66, 0.06);
|
|
--skeleton-pulse-2: rgba(244, 185, 66, 0.17);
|
|
--leaf-display: block;
|
|
|
|
--hl-comment: #8a6a4a;
|
|
--hl-punct: #fde7c0;
|
|
--hl-func: #f4b942;
|
|
--hl-keyword: #e0643f;
|
|
--hl-string: #a3b94a;
|
|
--hl-var: #e8913a;
|
|
--hl-op: #e0643f;
|
|
--hl-num: #f4b942;
|
|
--hl-param: #fdf0d8;
|
|
--hl-class: #d9a35b;
|
|
--hl-tag: #e0643f;
|
|
--hl-deleted-color: #e0643f;
|
|
--hl-deleted-bg: rgba(224, 100, 63, 0.18);
|
|
--hl-inserted-color: #a3b94a;
|
|
--hl-inserted-bg: rgba(163, 185, 74, 0.18);
|
|
}
|
|
|
|
:root[data-theme="winter"] {
|
|
--bg: #0d1b2a;
|
|
--text: #e6f0fa;
|
|
--text: #d6ecff;
|
|
--muted: #7f98b3;
|
|
--border: #1b2c44;
|
|
--bg-elevated: rgba(138, 209, 255, 0.1);
|
|
--bg-card: rgba(16, 32, 52, 0.6);
|
|
--bg-card-hover: rgba(26, 48, 76, 0.85);
|
|
--bg-code: #08121e;
|
|
--code-inline-bg: rgba(138, 209, 255, 0.14);
|
|
--code-inline-text: #8ad1ff;
|
|
--code-text: #cfe4f7;
|
|
--bg-menu: #0d1b2a;
|
|
--bg-modal: rgba(13, 27, 42, 0.88);
|
|
--hover-bg: rgba(138, 209, 255, 0.1);
|
|
--search-bg: rgba(138, 209, 255, 0.08);
|
|
--search-panel-bg: rgba(13, 27, 42, 0.95);
|
|
--code-group-bg: #132640;
|
|
--code-group-panel-bg: #0d1b2a;
|
|
--code-tab-active: #8ad1ff;
|
|
--footer-border: #1b2c44;
|
|
--border-subtle: rgba(138, 209, 255, 0.14);
|
|
--btn-primary-bg: #8ad1ff;
|
|
--btn-primary-text: #06101c;
|
|
--btn-home-bg: #8ad1ff;
|
|
--btn-home-text: #06101c;
|
|
--callout-note-bg: rgba(138, 209, 255, 0.14);
|
|
--callout-info-bg: rgba(185, 166, 255, 0.14);
|
|
--callout-warning-bg: rgba(255, 214, 138, 0.16);
|
|
--callout-warning-text: #ffd68a;
|
|
--body-radial-tint: rgba(13, 27, 42, 0.85);
|
|
--skeleton-pulse-1: rgba(138, 209, 255, 0.06);
|
|
--skeleton-pulse-2: rgba(138, 209, 255, 0.16);
|
|
--snow-display: block;
|
|
|
|
--hl-comment: #5b7491;
|
|
--hl-punct: #cfe4f7;
|
|
--hl-func: #8ad1ff;
|
|
--hl-keyword: #b9a6ff;
|
|
--hl-string: #9be7d4;
|
|
--hl-var: #ffb4c7;
|
|
--hl-op: #8ad1ff;
|
|
--hl-num: #ffd68a;
|
|
--hl-param: #e6f0fa;
|
|
--hl-class: #a9e4ff;
|
|
--hl-tag: #b9a6ff;
|
|
--hl-deleted-color: #ff8fa3;
|
|
--hl-deleted-bg: rgba(255, 143, 163, 0.18);
|
|
--hl-inserted-color: #9be7d4;
|
|
--hl-inserted-bg: rgba(155, 231, 212, 0.18);
|
|
}
|
|
|
|
.cobweb {
|
|
display: var(--cobweb-display);
|
|
position: fixed;
|
|
width: 160px;
|
|
height: 160px;
|
|
pointer-events: none;
|
|
z-index: 35;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.cobweb-top-left {
|
|
top: 0;
|
|
left: 0;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.cobweb-top-right {
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.cobweb-media {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
|
|
.spider-container {
|
|
display: var(--spider-display);
|
|
position: fixed;
|
|
top: 0;
|
|
right: 12%;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
animation: spiderDescend 10s ease-in-out infinite;
|
|
}
|
|
|
|
.spider-thread {
|
|
width: 1.5px;
|
|
height: 100vh;
|
|
position: absolute;
|
|
bottom: 24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--spider-thread);
|
|
}
|
|
|
|
.spider-body {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-top: 100px;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
animation: spiderSway 3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.spider-media {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
display: block;
|
|
scale: 2;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
@keyframes spiderDescend {
|
|
0% {
|
|
transform: translateY(-80px);
|
|
}
|
|
|
|
45% {
|
|
transform: translateY(240px);
|
|
}
|
|
|
|
55% {
|
|
transform: translateY(240px);
|
|
}
|
|
|
|
90% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-80px);
|
|
}
|
|
}
|
|
|
|
@keyframes spiderSway {
|
|
0% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(10deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spiderDrop {
|
|
from {
|
|
transform: translateY(240px);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(130vh);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--snow-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='22' cy='38' r='2.4' fill-opacity='.9'/%3E%3Ccircle cx='96' cy='126' r='1.8' fill-opacity='.7'/%3E%3Ccircle cx='168' cy='28' r='3' fill-opacity='.85'/%3E%3Ccircle cx='236' cy='204' r='2' fill-opacity='.75'/%3E%3Ccircle cx='272' cy='92' r='2.8' fill-opacity='.9'/%3E%3Ccircle cx='58' cy='252' r='2.2' fill-opacity='.8'/%3E%3Ccircle cx='196' cy='282' r='1.6' fill-opacity='.7'/%3E%3Ccircle cx='140' cy='190' r='2.4' fill-opacity='.85'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='.9' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath transform='translate(126 72)' d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4'/%3E%3Cpath transform='translate(246 150)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3Cpath transform='translate(40 160)' d='M0 -7V7M-6 -3.5L6 3.5M-6 3.5L6 -3.5'/%3E%3Cpath transform='translate(210 250)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3C/g%3E%3C/svg%3E");
|
|
--leaf-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg transform='translate(50 60) rotate(25) scale(1.2)' fill='%23e8710a'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(190 40) rotate(-40)' fill='%23c2410c'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(300 130) rotate(70) scale(1.3)' fill='%23eab308'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(120 200) rotate(-15) scale(1.1)' fill='%23b45309'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(250 280) rotate(140) scale(1.2)' fill='%23d97706'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(40 310) rotate(-80)' fill='%23ca8a04'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
|
|
--lights-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cpath d='M0 4Q40 32 80 4Q120 32 160 4' fill='none' stroke='%23245c3a' stroke-width='1.6'/%3E%3Cg fill='%23222'%3E%3Crect x='18' y='13' width='4' height='4'/%3E%3Crect x='38' y='17' width='4' height='4'/%3E%3Crect x='58' y='13' width='4' height='4'/%3E%3Crect x='98' y='13' width='4' height='4'/%3E%3Crect x='118' y='17' width='4' height='4'/%3E%3Crect x='138' y='13' width='4' height='4'/%3E%3C/g%3E%3Cellipse cx='20' cy='22' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='40' cy='26' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3Cellipse cx='60' cy='22' rx='4' ry='5.5' fill='%234dff88'/%3E%3Cellipse cx='100' cy='22' rx='4' ry='5.5' fill='%234da6ff'/%3E%3Cellipse cx='120' cy='26' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='140' cy='22' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.snowfall,
|
|
.leaf-fall {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 30;
|
|
}
|
|
|
|
.snowfall {
|
|
display: var(--snow-display);
|
|
}
|
|
|
|
.leaf-fall {
|
|
display: var(--leaf-display);
|
|
}
|
|
|
|
.snowfall::before,
|
|
.snowfall::after,
|
|
.leaf-fall::before,
|
|
.leaf-fall::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-repeat: repeat;
|
|
will-change: transform;
|
|
}
|
|
|
|
.snowfall::before {
|
|
top: -600px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: var(--snow-tile);
|
|
background-size: 300px 300px;
|
|
opacity: 0.9;
|
|
animation: snowFallNear 18s linear infinite;
|
|
}
|
|
|
|
.snowfall::after {
|
|
top: -500px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: var(--snow-tile);
|
|
background-size: 500px 500px;
|
|
opacity: 0.6;
|
|
animation: snowFallFar 30s linear infinite;
|
|
}
|
|
|
|
.leaf-fall::before {
|
|
top: -720px;
|
|
left: 0;
|
|
right: -360px;
|
|
bottom: 0;
|
|
background-image: var(--leaf-tile);
|
|
background-size: 360px 360px;
|
|
opacity: 0.9;
|
|
animation: leafFallNear 26s linear infinite;
|
|
}
|
|
|
|
.leaf-fall::after {
|
|
top: -540px;
|
|
left: -540px;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: var(--leaf-tile);
|
|
background-size: 540px 540px;
|
|
opacity: 0.7;
|
|
animation: leafFallFar 40s linear infinite;
|
|
}
|
|
|
|
.light-string {
|
|
display: var(--lights-display);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 56px;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
background-image: var(--lights-tile);
|
|
background-repeat: repeat-x;
|
|
background-size: 160px 56px;
|
|
animation: lightTwinkle 2.6s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes snowFallNear {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(0, 600px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes snowFallFar {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(0, 500px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes leafFallNear {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(-360px, 720px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes leafFallFar {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(540px, 540px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes lightTwinkle {
|
|
from {
|
|
opacity: 0.65;
|
|
filter: drop-shadow(0 0 3px rgba(255, 214, 120, 0.5));
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
filter: drop-shadow(0 0 8px rgba(255, 214, 120, 0.9));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
.snowfall::before,
|
|
.snowfall::after,
|
|
.leaf-fall::before,
|
|
.leaf-fall::after,
|
|
.light-string {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
#navbar .brand {
|
|
position: relative;
|
|
}
|
|
|
|
#navbar .brand::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -9px;
|
|
right: -9px;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:root[data-theme="halloween"] #navbar .brand::after {
|
|
content: "🎃";
|
|
}
|
|
|
|
:root[data-theme="autumn"] #navbar .brand::after {
|
|
content: "🍂";
|
|
}
|
|
|
|
:root[data-theme="winter"] #navbar .brand::after {
|
|
content: "❄️";
|
|
}
|
|
|
|
:root[data-theme="christmas"] #navbar .brand::after {
|
|
content: "🎄";
|
|
}
|
|
|
|
.st-themes {
|
|
padding: 14px 16px 16px;
|
|
}
|
|
|
|
.st-sub {
|
|
margin: 0 0 8px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.st-theme-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.st-theme-grid:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.st-theme {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
height: 40px;
|
|
padding: 0 14px;
|
|
border: 1px solid transparent;
|
|
border-radius: 100px;
|
|
background: var(--search-bg);
|
|
color: var(--muted);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.st-theme .ico {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.st-theme span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.st-theme:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.st-theme.on {
|
|
border-color: var(--text);
|
|
background: var(--hover-bg);
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
} |