mirror of
https://gitlab.com/vyla-entertainment/documentation.git
synced 2026-11-13 14:07:20 -05:00
664 lines
19 KiB
CSS
664 lines
19 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
|
|
|
|
:root,
|
|
:root[data-theme="dark"] {
|
|
--bg: #000000;
|
|
--text: #f3f3f3;
|
|
--text-heading: #ffffff;
|
|
--muted: #a3a3a3;
|
|
--border: #2b2b2b98;
|
|
--bg-elevated: rgba(255, 255, 255, 0.08);
|
|
--bg-card: rgba(25, 25, 25, 0.2);
|
|
--bg-card-hover: rgba(28, 28, 28, 0.8);
|
|
--bg-code: #050505;
|
|
--code-inline-bg: #050505;
|
|
--code-inline-text: #f3f3f3;
|
|
--code-text: #abb2bf;
|
|
--bg-menu: #000000;
|
|
--bg-modal: rgba(10, 10, 10, 0.35);
|
|
--hover-bg: rgba(255, 255, 255, 0.08);
|
|
--search-bg: rgba(50, 50, 50, 0.1);
|
|
--search-panel-bg: rgba(10, 10, 10, 0.6);
|
|
--code-group-bg: #0d0d0d;
|
|
--code-group-panel-bg: #000000;
|
|
--code-tab-active: #ffffff;
|
|
--footer-border: rgba(255, 255, 255, 0.08);
|
|
--border-subtle: rgba(255, 255, 255, 0.05);
|
|
--btn-primary-bg: #ffffff;
|
|
--btn-primary-text: #000000;
|
|
--btn-home-bg: #ffffff;
|
|
--btn-home-text: #000000;
|
|
--callout-note-bg: rgba(50, 50, 50, 0.1);
|
|
--callout-info-bg: rgba(39, 39, 39, 0.08);
|
|
--callout-warning-bg: rgba(180, 120, 0, 0.18);
|
|
--callout-warning-text: #fde047;
|
|
--body-radial-tint: rgba(0, 0, 0, 0.7);
|
|
--skeleton-pulse-1: rgba(255, 255, 255, 0.05);
|
|
--skeleton-pulse-2: rgba(255, 255, 255, 0.12);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(255, 255, 255, 0.3);
|
|
|
|
--hl-comment: #5c6370;
|
|
--hl-punct: #abb2bf;
|
|
--hl-func: #61afef;
|
|
--hl-keyword: #c678dd;
|
|
--hl-string: #98c379;
|
|
--hl-var: #e06c75;
|
|
--hl-op: #56b6c2;
|
|
--hl-num: #d19a66;
|
|
--hl-param: #d19a66;
|
|
--hl-class: #e5c07b;
|
|
--hl-tag: #e06c75;
|
|
--hl-deleted-color: #e06c75;
|
|
--hl-deleted-bg: rgba(224, 108, 117, 0.15);
|
|
--hl-inserted-color: #98c379;
|
|
--hl-inserted-bg: rgba(152, 195, 121, 0.15);
|
|
|
|
--sidebar-width: 150px;
|
|
--toc-width: 240px;
|
|
--header-height: 148px;
|
|
--font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
|
|
--ico-toc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E");
|
|
--ico-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
|
|
--ico-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
--ico-search-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
|
|
--ico-close-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--bg: #ffffff;
|
|
--text: #0b0b0c;
|
|
--text-heading: #111827;
|
|
--muted: #6b7280;
|
|
--border: #e5e7eb;
|
|
--bg-elevated: rgba(0, 0, 0, 0.05);
|
|
--bg-card: rgba(240, 240, 240, 0.85);
|
|
--bg-card-hover: rgba(225, 225, 225, 0.95);
|
|
--bg-code: #fafafa;
|
|
--code-inline-bg: rgba(240, 240, 240, 0.8);
|
|
--code-inline-text: #0b0b0c;
|
|
--code-text: #24292e;
|
|
--bg-menu: #ffffff;
|
|
--bg-modal: rgba(240, 240, 240, 0.7);
|
|
--hover-bg: rgba(0, 0, 0, 0.05);
|
|
--search-bg: rgba(0, 0, 0, 0.05);
|
|
--search-panel-bg: rgba(255, 255, 255, 0.85);
|
|
--code-group-bg: #f4f4f5;
|
|
--code-group-panel-bg: #ffffff;
|
|
--code-tab-active: #0b0b0c;
|
|
--footer-border: rgba(0, 0, 0, 0.08);
|
|
--border-subtle: rgba(0, 0, 0, 0.05);
|
|
--btn-primary-bg: #000000;
|
|
--btn-primary-text: #ffffff;
|
|
--btn-home-bg: #000000;
|
|
--btn-home-text: #ffffff;
|
|
--callout-note-bg: rgba(5, 5, 5, 0.06);
|
|
--callout-info-bg: rgba(39, 39, 39, 0.06);
|
|
--callout-warning-bg: #fefce8;
|
|
--callout-warning-text: #854d0e;
|
|
--body-radial-tint: rgba(255, 255, 255, 0.7);
|
|
--skeleton-pulse-1: rgba(0, 0, 0, 0.05);
|
|
--skeleton-pulse-2: rgba(0, 0, 0, 0.12);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(0, 0, 0, 0.3);
|
|
|
|
--hl-comment: #6a737d;
|
|
--hl-punct: #24292e;
|
|
--hl-func: #6f42c1;
|
|
--hl-keyword: #d73a49;
|
|
--hl-string: #22863a;
|
|
--hl-var: #e36209;
|
|
--hl-op: #d73a49;
|
|
--hl-num: #005cc5;
|
|
--hl-param: #b08800;
|
|
--hl-class: #6f42c1;
|
|
--hl-tag: #22863a;
|
|
--hl-deleted-color: #b31d28;
|
|
--hl-deleted-bg: #ffeef0;
|
|
--hl-inserted-color: #22863a;
|
|
--hl-inserted-bg: #f0fff4;
|
|
}
|
|
|
|
:root[data-theme="midnight"] {
|
|
--bg: #070913;
|
|
--text: #e2e8f0;
|
|
--text-heading: #f8fafc;
|
|
--muted: #7f8ea3;
|
|
--border: #1a2234;
|
|
--bg-elevated: rgba(30, 41, 59, 0.5);
|
|
--bg-card: rgba(15, 23, 42, 0.55);
|
|
--bg-card-hover: rgba(30, 41, 59, 0.7);
|
|
--bg-code: #0b1120;
|
|
--code-inline-bg: #0f172a;
|
|
--code-inline-text: #38bdf8;
|
|
--code-text: #cbd5e1;
|
|
--bg-menu: #0b1120;
|
|
--bg-modal: rgba(11, 17, 32, 0.75);
|
|
--hover-bg: rgba(56, 189, 248, 0.08);
|
|
--search-bg: rgba(30, 41, 59, 0.4);
|
|
--search-panel-bg: rgba(11, 17, 32, 0.85);
|
|
--code-group-bg: #0b1329;
|
|
--code-group-panel-bg: #070913;
|
|
--code-tab-active: #38bdf8;
|
|
--footer-border: #1e293b;
|
|
--border-subtle: rgba(255, 255, 255, 0.06);
|
|
--btn-primary-bg: #38bdf8;
|
|
--btn-primary-text: #020617;
|
|
--btn-home-bg: #38bdf8;
|
|
--btn-home-text: #020617;
|
|
--callout-note-bg: rgba(56, 189, 248, 0.1);
|
|
--callout-info-bg: rgba(99, 102, 241, 0.12);
|
|
--callout-warning-bg: rgba(245, 158, 11, 0.15);
|
|
--callout-warning-text: #fbbf24;
|
|
--body-radial-tint: rgba(7, 9, 19, 0.85);
|
|
--skeleton-pulse-1: rgba(56, 189, 248, 0.05);
|
|
--skeleton-pulse-2: rgba(56, 189, 248, 0.15);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(56, 189, 248, 0.3);
|
|
|
|
--hl-comment: #64748b;
|
|
--hl-punct: #94a3b8;
|
|
--hl-func: #38bdf8;
|
|
--hl-keyword: #818cf8;
|
|
--hl-string: #34d399;
|
|
--hl-var: #f472b6;
|
|
--hl-op: #38bdf8;
|
|
--hl-num: #fbbf24;
|
|
--hl-param: #cbd5e1;
|
|
--hl-class: #67e8f9;
|
|
--hl-tag: #818cf8;
|
|
--hl-deleted-color: #f87171;
|
|
--hl-deleted-bg: rgba(248, 113, 113, 0.15);
|
|
--hl-inserted-color: #34d399;
|
|
--hl-inserted-bg: rgba(52, 211, 153, 0.15);
|
|
}
|
|
|
|
:root[data-theme="nord"] {
|
|
--bg: #2e3440;
|
|
--text: #eceff4;
|
|
--text-heading: #88c0d0;
|
|
--muted: #d8dee9;
|
|
--border: #3b4252;
|
|
--bg-elevated: rgba(67, 76, 94, 0.5);
|
|
--bg-card: rgba(59, 66, 82, 0.5);
|
|
--bg-card-hover: rgba(67, 76, 94, 0.7);
|
|
--bg-code: #242933;
|
|
--code-inline-bg: #3b4252;
|
|
--code-inline-text: #eceff4;
|
|
--code-text: #d8dee9;
|
|
--bg-menu: #2e3440;
|
|
--bg-modal: rgba(46, 52, 64, 0.8);
|
|
--hover-bg: rgba(136, 192, 208, 0.1);
|
|
--search-bg: rgba(59, 66, 82, 0.5);
|
|
--search-panel-bg: rgba(46, 52, 64, 0.9);
|
|
--code-group-bg: #3b4252;
|
|
--code-group-panel-bg: #2e3440;
|
|
--code-tab-active: #88c0d0;
|
|
--footer-border: #3b4252;
|
|
--border-subtle: rgba(255, 255, 255, 0.05);
|
|
--btn-primary-bg: #88c0d0;
|
|
--btn-primary-text: #2e3440;
|
|
--btn-home-bg: #88c0d0;
|
|
--btn-home-text: #2e3440;
|
|
--callout-note-bg: rgba(129, 161, 193, 0.15);
|
|
--callout-info-bg: rgba(136, 192, 208, 0.15);
|
|
--callout-warning-bg: rgba(235, 203, 139, 0.15);
|
|
--callout-warning-text: #ebcb8b;
|
|
--body-radial-tint: rgba(46, 52, 64, 0.8);
|
|
--skeleton-pulse-1: rgba(216, 222, 233, 0.05);
|
|
--skeleton-pulse-2: rgba(216, 222, 233, 0.12);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(236, 239, 244, 0.3);
|
|
|
|
--hl-comment: #616e88;
|
|
--hl-punct: #d8dee9;
|
|
--hl-func: #88c0d0;
|
|
--hl-keyword: #81a1c1;
|
|
--hl-string: #a3be8c;
|
|
--hl-var: #d08770;
|
|
--hl-op: #81a1c1;
|
|
--hl-num: #b48ead;
|
|
--hl-param: #d8dee9;
|
|
--hl-class: #8fbcbb;
|
|
--hl-tag: #81a1c1;
|
|
--hl-deleted-color: #bf616a;
|
|
--hl-deleted-bg: rgba(191, 97, 106, 0.15);
|
|
--hl-inserted-color: #a3be8c;
|
|
--hl-inserted-bg: rgba(163, 190, 140, 0.15);
|
|
}
|
|
|
|
:root[data-theme="dracula"] {
|
|
--bg: #282a36;
|
|
--text: #f8f8f2;
|
|
--text-heading: #bd93f9;
|
|
--muted: #6272a4;
|
|
--border: #44475a;
|
|
--bg-elevated: rgba(68, 71, 90, 0.5);
|
|
--bg-card: rgba(68, 71, 90, 0.4);
|
|
--bg-card-hover: rgba(68, 71, 90, 0.7);
|
|
--bg-code: #1e1f29;
|
|
--code-inline-bg: #44475a;
|
|
--code-inline-text: #ff79c6;
|
|
--code-text: #f8f8f2;
|
|
--bg-menu: #282a36;
|
|
--bg-modal: rgba(40, 42, 54, 0.85);
|
|
--hover-bg: rgba(189, 147, 249, 0.12);
|
|
--search-bg: rgba(68, 71, 90, 0.5);
|
|
--search-panel-bg: rgba(40, 42, 54, 0.9);
|
|
--code-group-bg: #44475a;
|
|
--code-group-panel-bg: #282a36;
|
|
--code-tab-active: #ff79c6;
|
|
--footer-border: #44475a;
|
|
--border-subtle: rgba(255, 255, 255, 0.07);
|
|
--btn-primary-bg: #bd93f9;
|
|
--btn-primary-text: #282a36;
|
|
--btn-home-bg: #bd93f9;
|
|
--btn-home-text: #282a36;
|
|
--callout-note-bg: rgba(189, 147, 249, 0.15);
|
|
--callout-info-bg: rgba(139, 233, 253, 0.15);
|
|
--callout-warning-bg: rgba(241, 250, 140, 0.15);
|
|
--callout-warning-text: #f1fa8c;
|
|
--body-radial-tint: rgba(40, 42, 54, 0.85);
|
|
--skeleton-pulse-1: rgba(98, 114, 164, 0.08);
|
|
--skeleton-pulse-2: rgba(98, 114, 164, 0.2);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(189, 147, 249, 0.3);
|
|
|
|
--hl-comment: #6272a4;
|
|
--hl-punct: #f8f8f2;
|
|
--hl-func: #50fa7b;
|
|
--hl-keyword: #ff79c6;
|
|
--hl-string: #f1fa8c;
|
|
--hl-var: #ffb86c;
|
|
--hl-op: #ff79c6;
|
|
--hl-num: #bd93f9;
|
|
--hl-param: #ffb86c;
|
|
--hl-class: #8be9fd;
|
|
--hl-tag: #ff79c6;
|
|
--hl-deleted-color: #ff5555;
|
|
--hl-deleted-bg: rgba(255, 85, 85, 0.15);
|
|
--hl-inserted-color: #50fa7b;
|
|
--hl-inserted-bg: rgba(80, 250, 123, 0.15);
|
|
}
|
|
|
|
:root[data-theme="forest"] {
|
|
--bg: #0d1612;
|
|
--text: #e2ede5;
|
|
--text-heading: #86efac;
|
|
--muted: #739481;
|
|
--border: #1a2f24;
|
|
--bg-elevated: rgba(34, 76, 56, 0.35);
|
|
--bg-card: rgba(20, 42, 31, 0.45);
|
|
--bg-card-hover: rgba(28, 59, 44, 0.65);
|
|
--bg-code: #080f0c;
|
|
--code-inline-bg: #142a1f;
|
|
--code-inline-text: #86efac;
|
|
--code-text: #d1fae5;
|
|
--bg-menu: #0d1612;
|
|
--bg-modal: rgba(13, 22, 18, 0.85);
|
|
--hover-bg: rgba(134, 239, 172, 0.08);
|
|
--search-bg: rgba(26, 47, 36, 0.6);
|
|
--search-panel-bg: rgba(13, 22, 18, 0.9);
|
|
--code-group-bg: #15271e;
|
|
--code-group-panel-bg: #0d1612;
|
|
--code-tab-active: #86efac;
|
|
--footer-border: #1a2f24;
|
|
--border-subtle: rgba(255, 255, 255, 0.05);
|
|
--btn-primary-bg: #4ade80;
|
|
--btn-primary-text: #052e16;
|
|
--btn-home-bg: #4ade80;
|
|
--btn-home-text: #052e16;
|
|
--callout-note-bg: rgba(74, 222, 128, 0.12);
|
|
--callout-info-bg: rgba(45, 212, 191, 0.12);
|
|
--callout-warning-bg: rgba(250, 204, 21, 0.15);
|
|
--callout-warning-text: #fde047;
|
|
--body-radial-tint: rgba(13, 22, 18, 0.85);
|
|
--skeleton-pulse-1: rgba(134, 239, 172, 0.05);
|
|
--skeleton-pulse-2: rgba(134, 239, 172, 0.12);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(134, 239, 172, 0.3);
|
|
|
|
--hl-comment: #527561;
|
|
--hl-punct: #d1fae5;
|
|
--hl-func: #4ade80;
|
|
--hl-keyword: #2dd4bf;
|
|
--hl-string: #a7f3d0;
|
|
--hl-var: #fcd34d;
|
|
--hl-op: #34d399;
|
|
--hl-num: #fbbf24;
|
|
--hl-param: #e2ede5;
|
|
--hl-class: #6ee7b7;
|
|
--hl-tag: #2dd4bf;
|
|
--hl-deleted-color: #f87171;
|
|
--hl-deleted-bg: rgba(248, 113, 113, 0.15);
|
|
--hl-inserted-color: #4ade80;
|
|
--hl-inserted-bg: rgba(74, 222, 128, 0.15);
|
|
}
|
|
|
|
:root[data-theme="sunset"] {
|
|
--bg: #180d18;
|
|
--text: #fce7f3;
|
|
--text-heading: #fb7185;
|
|
--muted: #a77c98;
|
|
--border: #3b1d36;
|
|
--bg-elevated: rgba(80, 30, 70, 0.35);
|
|
--bg-card: rgba(50, 20, 45, 0.5);
|
|
--bg-card-hover: rgba(75, 30, 68, 0.65);
|
|
--bg-code: #120712;
|
|
--code-inline-bg: #3b1d36;
|
|
--code-inline-text: #fda4af;
|
|
--code-text: #fbcfe8;
|
|
--bg-menu: #180d18;
|
|
--bg-modal: rgba(24, 13, 24, 0.85);
|
|
--hover-bg: rgba(251, 113, 133, 0.1);
|
|
--search-bg: rgba(59, 29, 54, 0.5);
|
|
--search-panel-bg: rgba(24, 13, 24, 0.9);
|
|
--code-group-bg: #2d1329;
|
|
--code-group-panel-bg: #180d18;
|
|
--code-tab-active: #fb7185;
|
|
--footer-border: #3b1d36;
|
|
--border-subtle: rgba(255, 255, 255, 0.05);
|
|
--btn-primary-bg: #f43f5e;
|
|
--btn-primary-text: #ffffff;
|
|
--btn-home-bg: #f43f5e;
|
|
--btn-home-text: #ffffff;
|
|
--callout-note-bg: rgba(251, 113, 133, 0.15);
|
|
--callout-info-bg: rgba(192, 132, 252, 0.15);
|
|
--callout-warning-bg: rgba(251, 146, 60, 0.15);
|
|
--callout-warning-text: #fdba74;
|
|
--body-radial-tint: rgba(24, 13, 24, 0.85);
|
|
--skeleton-pulse-1: rgba(251, 113, 133, 0.05);
|
|
--skeleton-pulse-2: rgba(251, 113, 133, 0.15);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(251, 113, 133, 0.3);
|
|
|
|
--hl-comment: #835b77;
|
|
--hl-punct: #fbcfe8;
|
|
--hl-func: #fb7185;
|
|
--hl-keyword: #c084fc;
|
|
--hl-string: #f472b6;
|
|
--hl-var: #fb923c;
|
|
--hl-op: #f43f5e;
|
|
--hl-num: #facc15;
|
|
--hl-param: #fce7f3;
|
|
--hl-class: #e879f9;
|
|
--hl-tag: #c084fc;
|
|
--hl-deleted-color: #f87171;
|
|
--hl-deleted-bg: rgba(248, 113, 113, 0.15);
|
|
--hl-inserted-color: #4ade80;
|
|
--hl-inserted-bg: rgba(74, 222, 128, 0.15);
|
|
}
|
|
|
|
:root[data-theme="cyberpunk"] {
|
|
--bg: #050508;
|
|
--text: #00ffcc;
|
|
--text-heading: #ffe600;
|
|
--muted: #5e7a75;
|
|
--border: #1a2a26;
|
|
--bg-elevated: rgba(0, 255, 204, 0.08);
|
|
--bg-card: rgba(10, 20, 20, 0.7);
|
|
--bg-card-hover: rgba(20, 40, 35, 0.85);
|
|
--bg-code: #020204;
|
|
--code-inline-bg: rgba(0, 255, 204, 0.12);
|
|
--code-inline-text: #ffe600;
|
|
--code-text: #00ffcc;
|
|
--bg-menu: #08080f;
|
|
--bg-modal: rgba(5, 5, 8, 0.9);
|
|
--hover-bg: rgba(0, 255, 204, 0.1);
|
|
--search-bg: rgba(0, 255, 204, 0.08);
|
|
--search-panel-bg: rgba(8, 8, 15, 0.95);
|
|
--code-group-bg: #0e121a;
|
|
--code-group-panel-bg: #050508;
|
|
--code-tab-active: #ffe600;
|
|
--footer-border: #1a2a26;
|
|
--border-subtle: rgba(0, 255, 204, 0.15);
|
|
--btn-primary-bg: #ffe600;
|
|
--btn-primary-text: #000000;
|
|
--btn-home-bg: #00ffcc;
|
|
--btn-home-text: #000000;
|
|
--callout-note-bg: rgba(0, 255, 204, 0.12);
|
|
--callout-info-bg: rgba(255, 0, 128, 0.15);
|
|
--callout-warning-bg: rgba(255, 230, 0, 0.15);
|
|
--callout-warning-text: #ffe600;
|
|
--body-radial-tint: rgba(5, 5, 8, 0.9);
|
|
--skeleton-pulse-1: rgba(0, 255, 204, 0.05);
|
|
--skeleton-pulse-2: rgba(255, 230, 0, 0.12);
|
|
--spider-display: none;
|
|
--cobweb-display: none;
|
|
--spider-thread: rgba(0, 255, 204, 0.3);
|
|
|
|
--hl-comment: #3f5e58;
|
|
--hl-punct: #00ffcc;
|
|
--hl-func: #ffe600;
|
|
--hl-keyword: #ff007f;
|
|
--hl-string: #00f0ff;
|
|
--hl-var: #ff5500;
|
|
--hl-op: #ff007f;
|
|
--hl-num: #00ffcc;
|
|
--hl-param: #ffffff;
|
|
--hl-class: #ffe600;
|
|
--hl-tag: #ff007f;
|
|
--hl-deleted-color: #ff0055;
|
|
--hl-deleted-bg: rgba(255, 0, 85, 0.2);
|
|
--hl-inserted-color: #00ffcc;
|
|
--hl-inserted-bg: rgba(0, 255, 204, 0.2);
|
|
}
|
|
|
|
:root[data-theme="halloween"] {
|
|
--bg: #0a0604;
|
|
--text: #f5ebe6;
|
|
--text-heading: #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);
|
|
}
|
|
|
|
body.banner-dismissed {
|
|
--header-height: 109px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
margin: 0;
|
|
font-family: var(--font);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.65;
|
|
overflow-x: hidden;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
html::-webkit-scrollbar,
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
background: radial-gradient(ellipse at center, transparent 35%, var(--body-radial-tint) 100%);
|
|
}
|
|
|
|
.video-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: -2;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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: 36;
|
|
animation: spiderDescend 10s ease-in-out infinite;
|
|
}
|
|
|
|
.spider-thread {
|
|
width: 1.5px;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--spider-thread);
|
|
}
|
|
|
|
.spider-body {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-top: 100px;
|
|
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);
|
|
}
|
|
} |