mirror of
https://gitlab.com/vyla-entertainment/documentation.git
synced 2026-11-09 20:17:20 -05:00
aded themes
This commit is contained in:
113
assets/app.js
113
assets/app.js
@@ -3,6 +3,13 @@ var ICONS = {
|
||||
system: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>',
|
||||
light: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4"/>',
|
||||
dark: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
||||
midnight: '<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 1 12 2Z"/>',
|
||||
nord: '<path d="m2 12 5-5 5 5 5-5 5 5"/><path d="M12 7v14"/>',
|
||||
dracula: '<path d="M7 3v7l5 3 5-3V3"/><path d="M7 14l5 7 5-7"/>',
|
||||
forest: '<path d="m12 2 7 12h-4l3 6H6l3-6H5z"/>',
|
||||
sunset: '<path d="M17 18a5 5 0 0 0-10 0"/><path d="M12 2v4M4.22 10.22l2.83 2.83M1 18h4M19 18h4M16.95 13.05l2.83-2.83M12 13a5 5 0 0 0-5 5h10a5 5 0 0 0-5-5z"/>',
|
||||
cyberpunk: '<path d="M4 4h16v16H4z"/><path d="M4 9h16M9 4v16"/>',
|
||||
halloween: '<circle cx="12" cy="12" r="9"/><path d="M9 10h.01M15 10h.01M8 15s1.5 2 4 2 4-2 4-2"/><path d="M12 3v3"/>',
|
||||
search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
|
||||
menu: '<path d="M4 6h16M4 12h10M4 18h16"/>',
|
||||
doc: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/>',
|
||||
@@ -14,6 +21,33 @@ var ICONS = {
|
||||
chevronRight: '<path d="m9 18 6-6-6-6"/>'
|
||||
};
|
||||
|
||||
var THEMES_GENERAL = [
|
||||
{ id: "dark", label: "Dark" },
|
||||
{ id: "light", label: "Light" },
|
||||
{ id: "midnight", label: "Midnight" },
|
||||
{ id: "nord", label: "Nord" },
|
||||
{ id: "dracula", label: "Dracula" },
|
||||
{ id: "forest", label: "Forest" },
|
||||
{ id: "sunset", label: "Sunset" },
|
||||
{ id: "cyberpunk", label: "Cyberpunk" }
|
||||
];
|
||||
|
||||
var THEMES_SEASONAL = [
|
||||
{ id: "halloween", label: "Halloween" }
|
||||
];
|
||||
|
||||
var THEME_VIDEOS = {
|
||||
halloween: "https://www.pexels.com/download/video/5605039/",
|
||||
dark: "https://www.pexels.com/download/video/31270356/",
|
||||
light: "https://www.pexels.com/download/video/13956986/",
|
||||
midnight: "https://www.pexels.com/download/video/15860507/",
|
||||
nord: "https://www.pexels.com/download/video/31468607/",
|
||||
dracula: "https://www.pexels.com/download/video/8116002/",
|
||||
forest: "https://www.pexels.com/download/video/11265968/",
|
||||
sunset: "https://www.pexels.com/download/video/855437/",
|
||||
cyberpunk: "https://www.pexels.com/download/video/32336464/"
|
||||
};
|
||||
|
||||
var SITE_TREE = [
|
||||
{
|
||||
id: "vyla",
|
||||
@@ -116,25 +150,32 @@ function esc(s) {
|
||||
}
|
||||
|
||||
function getThemeMode() {
|
||||
var v = localStorage.getItem(THEME_KEY);
|
||||
return v === "light" || v === "dark" ? v : "system";
|
||||
return localStorage.getItem(THEME_KEY) || "halloween";
|
||||
}
|
||||
|
||||
function applyTheme() {
|
||||
var mode = getThemeMode();
|
||||
var dark = mode === "dark" || (mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
|
||||
document.documentElement.classList.toggle("dark", dark);
|
||||
document.documentElement.setAttribute("data-theme", mode);
|
||||
var logo = document.getElementById("brand-logo");
|
||||
if (logo) logo.src = dark ? "/assets/images/logo.png" : "/assets/images/dark_logo.png";
|
||||
if (logo) logo.src = mode === "light" ? "/assets/images/dark_logo.png" : "/assets/images/logo.png";
|
||||
var targetSrc = THEME_VIDEOS[mode] || THEME_VIDEOS.halloween;
|
||||
document.querySelectorAll(".body-blurred-video, .header-video").forEach(function (v) {
|
||||
if (v.getAttribute("src") !== targetSrc) {
|
||||
v.src = targetSrc;
|
||||
v.load();
|
||||
v.play().catch(function () { });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setTheme(mode) {
|
||||
if (mode === "system") localStorage.removeItem(THEME_KEY);
|
||||
else localStorage.setItem(THEME_KEY, mode);
|
||||
localStorage.setItem(THEME_KEY, mode);
|
||||
applyTheme();
|
||||
refreshThemeUI();
|
||||
var menu = document.getElementById("theme-menu");
|
||||
if (menu) menu.classList.remove("open");
|
||||
var segMenu = document.getElementById("theme-seg-menu");
|
||||
if (segMenu) segMenu.classList.remove("open");
|
||||
}
|
||||
|
||||
function toggleThemeMenu(e) {
|
||||
@@ -146,10 +187,16 @@ function toggleThemeMenu(e) {
|
||||
function refreshThemeUI() {
|
||||
var mode = getThemeMode();
|
||||
var btn = document.getElementById("theme-toggle");
|
||||
if (btn) btn.innerHTML = icon(mode);
|
||||
document.querySelectorAll("#theme-menu button, #theme-seg button").forEach(function (b) {
|
||||
if (btn) btn.innerHTML = icon(ICONS[mode] ? mode : "dark");
|
||||
document.querySelectorAll("#theme-menu button, #theme-seg button[data-mode], #theme-seg-menu button").forEach(function (b) {
|
||||
b.classList.toggle("on", b.getAttribute("data-mode") === mode);
|
||||
});
|
||||
var moreBtn = document.getElementById("theme-seg-more");
|
||||
if (moreBtn) {
|
||||
var isOther = mode !== "dark" && mode !== "light";
|
||||
moreBtn.classList.toggle("on", isOther);
|
||||
moreBtn.innerHTML = icon(ICONS[mode] ? mode : "halloween");
|
||||
}
|
||||
}
|
||||
|
||||
function buildThemeControls() {
|
||||
@@ -160,12 +207,18 @@ function buildThemeControls() {
|
||||
wrap.className = "theme-wrap";
|
||||
btn.parentNode.insertBefore(wrap, btn);
|
||||
wrap.appendChild(btn);
|
||||
var modes = ["system", "light", "dark"];
|
||||
var menu = document.createElement("div");
|
||||
menu.id = "theme-menu";
|
||||
menu.innerHTML = modes.map(function (m) {
|
||||
return '<button type="button" data-mode="' + m + '">' + icon(m) + '<span>' + m.charAt(0).toUpperCase() + m.slice(1) + '</span><i class="check">✓</i></button>';
|
||||
}).join("");
|
||||
var html = '<div class="theme-menu-label">General</div>';
|
||||
THEMES_GENERAL.forEach(function (t) {
|
||||
html += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
|
||||
});
|
||||
html += '<div class="theme-menu-divider"></div>';
|
||||
html += '<div class="theme-menu-label">Seasonal</div>';
|
||||
THEMES_SEASONAL.forEach(function (t) {
|
||||
html += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
|
||||
});
|
||||
menu.innerHTML = html;
|
||||
wrap.appendChild(menu);
|
||||
menu.addEventListener("click", function (e) {
|
||||
var b = e.target.closest("button");
|
||||
@@ -586,16 +639,35 @@ function buildMobileBar(currentTab, currentItem) {
|
||||
var sideLinks = document.createElement("div");
|
||||
sideLinks.className = "side-links";
|
||||
|
||||
var modes = ["system", "light", "dark"];
|
||||
var seg = document.createElement("div");
|
||||
seg.id = "theme-seg";
|
||||
seg.innerHTML = modes.map(function (m) {
|
||||
return '<button type="button" data-mode="' + m + '" aria-label="' + m + '">' + icon(m) + '</button>';
|
||||
}).join("");
|
||||
var segHtml = '<button type="button" data-mode="dark" aria-label="Dark">' + icon("dark") + '</button>' +
|
||||
'<button type="button" data-mode="light" aria-label="Light">' + icon("light") + '</button>' +
|
||||
'<button type="button" id="theme-seg-more" aria-label="All themes">' + icon("halloween") + '</button>' +
|
||||
'<div id="theme-seg-menu">' +
|
||||
'<div class="theme-menu-label">General</div>';
|
||||
THEMES_GENERAL.forEach(function (t) {
|
||||
segHtml += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
|
||||
});
|
||||
segHtml += '<div class="theme-menu-divider"></div><div class="theme-menu-label">Seasonal</div>';
|
||||
THEMES_SEASONAL.forEach(function (t) {
|
||||
segHtml += '<button type="button" data-mode="' + t.id + '">' + icon(t.id) + '<span>' + esc(t.label) + '</span><i class="check">✓</i></button>';
|
||||
});
|
||||
segHtml += '</div>';
|
||||
seg.innerHTML = segHtml;
|
||||
|
||||
seg.addEventListener("click", function (e) {
|
||||
var btn = e.target.closest("button");
|
||||
if (btn) setTheme(btn.getAttribute("data-mode"));
|
||||
var moreBtn = e.target.closest("#theme-seg-more");
|
||||
var segMenu = document.getElementById("theme-seg-menu");
|
||||
if (moreBtn && segMenu) {
|
||||
segMenu.classList.toggle("open");
|
||||
return;
|
||||
}
|
||||
var btn = e.target.closest("button[data-mode]");
|
||||
if (btn) {
|
||||
setTheme(btn.getAttribute("data-mode"));
|
||||
if (segMenu) segMenu.classList.remove("open");
|
||||
}
|
||||
});
|
||||
|
||||
sideLinks.appendChild(seg);
|
||||
@@ -812,6 +884,7 @@ function loadPage() {
|
||||
})
|
||||
.then(function (html) {
|
||||
contentEl.innerHTML = html;
|
||||
applyTheme();
|
||||
window.scrollTo(0, 0);
|
||||
})
|
||||
.catch(function () {
|
||||
@@ -1152,7 +1225,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
var sidebar = document.getElementById("sidebar");
|
||||
var menu = document.getElementById("theme-menu");
|
||||
var segMenu = document.getElementById("theme-seg-menu");
|
||||
if (menu && !e.target.closest(".theme-wrap")) menu.classList.remove("open");
|
||||
if (segMenu && !e.target.closest("#theme-seg")) segMenu.classList.remove("open");
|
||||
if (
|
||||
sidebar &&
|
||||
sidebar.classList.contains("open") &&
|
||||
|
||||
BIN
assets/images/themes/halloween/cobweb.png
Normal file
BIN
assets/images/themes/halloween/cobweb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 KiB |
@@ -33,7 +33,7 @@ body.is-404 .error-container {
|
||||
|
||||
body.is-404 .error-code {
|
||||
margin: 0 0 16px;
|
||||
color: var(--color-text-primary);
|
||||
color: var(--text-heading);
|
||||
font-size: clamp(74px, 14vw, 112px);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
@@ -42,7 +42,7 @@ body.is-404 .error-code {
|
||||
|
||||
body.is-404 .error-title {
|
||||
margin: 0 0 24px;
|
||||
color: var(--color-text-primary);
|
||||
color: var(--text-heading);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
@@ -52,30 +52,21 @@ body.is-404 .error-title {
|
||||
body.is-404 .error-desc {
|
||||
max-width: 440px;
|
||||
margin: 0 0 32px;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
font-size: 15.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
html.dark body.is-404 .error-desc {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
body.is-404 .btn-home {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 28px;
|
||||
border-radius: 9999px;
|
||||
background: var(--bg-dark);
|
||||
color: var(--bg-light) !important;
|
||||
background: var(--btn-home-bg);
|
||||
color: var(--btn-home-text) !important;
|
||||
font-size: 14.5px;
|
||||
font-weight: 500;
|
||||
text-decoration: none !important;
|
||||
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
html.dark body.is-404 .btn-home {
|
||||
background: var(--bg-light);
|
||||
color: var(--bg-dark) !important;
|
||||
}
|
||||
@@ -11,22 +11,18 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: var(--search-bg);
|
||||
width: min(440px, 40vw);
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html.dark #search-trigger {
|
||||
background: rgba(50, 50, 50, 0.1);
|
||||
}
|
||||
|
||||
#search-trigger kbd {
|
||||
margin-left: auto;
|
||||
font: 600 11px var(--font);
|
||||
@@ -50,16 +46,13 @@ html.dark #search-trigger {
|
||||
margin: 52px auto 0;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: rgb(210, 210, 210, 0.1) !important;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
background: var(--search-panel-bg) !important;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
html.dark .search-panel {
|
||||
background: rgb(10, 10, 10, 0.2) !important;
|
||||
}
|
||||
|
||||
.search-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -70,7 +63,7 @@ html.dark .search-panel {
|
||||
.search-input-row .ico {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#search-input {
|
||||
@@ -78,7 +71,7 @@ html.dark .search-panel {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
color: var(--text-heading);
|
||||
font: inherit;
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -92,11 +85,7 @@ html.dark .search-panel {
|
||||
.search-label {
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
color: var(--muted-light);
|
||||
}
|
||||
|
||||
html.dark .search-label {
|
||||
color: var(--muted-dark);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sr {
|
||||
@@ -109,10 +98,11 @@ html.dark .search-label {
|
||||
|
||||
.sr>.ico {
|
||||
margin-top: 3px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sr.on {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.sr-body {
|
||||
@@ -123,6 +113,7 @@ html.dark .search-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
.sr .s {
|
||||
@@ -130,7 +121,7 @@ html.dark .search-label {
|
||||
margin-top: 2px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.4;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
@@ -141,17 +132,12 @@ html.dark .search-label {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
html.dark .sr .s,
|
||||
html.dark .sr .p {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
.sr .sep {
|
||||
margin: 0 6px;
|
||||
opacity: 0.7;
|
||||
@@ -159,11 +145,7 @@ html.dark .sr .p {
|
||||
|
||||
.sr .hit {
|
||||
font-weight: 700;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark .sr .hit {
|
||||
color: var(--text-dark);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
.search-footer {
|
||||
@@ -171,11 +153,8 @@ html.dark .sr .hit {
|
||||
gap: 18px;
|
||||
padding: 12px 20px;
|
||||
font-size: 12px;
|
||||
color: var(--muted-light);
|
||||
}
|
||||
|
||||
html.dark .search-footer {
|
||||
color: var(--muted-dark);
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.search-footer .close-hint {
|
||||
@@ -202,34 +181,22 @@ html.dark .search-footer {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: none;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-wrap .copy-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
html.dark .code-wrap .copy-btn {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
html.dark .code-wrap .copy-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.code-group {
|
||||
position: relative;
|
||||
margin: 16px 0;
|
||||
border-radius: 20px;
|
||||
background: #f4f4f5;
|
||||
background: var(--code-group-bg);
|
||||
padding: 6px 4px 4px;
|
||||
}
|
||||
|
||||
html.dark .code-group {
|
||||
background: #0d0d0d;
|
||||
}
|
||||
|
||||
.code-group-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -247,15 +214,11 @@ html.dark .code-group {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
color: #71717a;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.code-group-tab.active {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark .code-group-tab.active {
|
||||
color: #ffffff;
|
||||
color: var(--code-tab-active);
|
||||
}
|
||||
|
||||
.code-group-tab.active::after {
|
||||
@@ -265,25 +228,16 @@ html.dark .code-group-tab.active {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background: var(--text-light);
|
||||
background: var(--code-tab-active);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
html.dark .code-group-tab.active::after {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.code-group-panels {
|
||||
background: #ffffff;
|
||||
background: var(--code-group-panel-bg);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html.dark .code-group-panels {
|
||||
background: #000000;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.cg-copy-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@@ -295,16 +249,12 @@ html.dark .code-group-panels {
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
color: #71717a;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cg-copy-btn:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark .cg-copy-btn:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
.code-group-panel {
|
||||
@@ -321,7 +271,7 @@ main.prose .code-group pre {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #e6edf3;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
main.prose .code-group pre code {
|
||||
@@ -331,13 +281,8 @@ main.prose .code-group pre code {
|
||||
main.prose blockquote {
|
||||
margin: 16px 0;
|
||||
padding: 4px 0 4px 16px;
|
||||
border-left: 3px solid var(--border-light);
|
||||
color: var(--muted-light);
|
||||
}
|
||||
|
||||
html.dark main.prose blockquote {
|
||||
border-left-color: var(--border-dark);
|
||||
color: var(--muted-dark);
|
||||
border-left: 3px solid var(--border);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
main.prose blockquote p {
|
||||
@@ -351,18 +296,12 @@ main.prose blockquote p {
|
||||
|
||||
.skeleton-line,
|
||||
.skeleton-media {
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.05) 63%);
|
||||
background: linear-gradient(90deg, var(--skeleton-pulse-1) 25%, var(--skeleton-pulse-2) 37%, var(--skeleton-pulse-1) 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: skeletonPulse 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
html.dark .skeleton-line,
|
||||
html.dark .skeleton-media {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.05) 63%);
|
||||
background-size: 400% 100%;
|
||||
}
|
||||
|
||||
@keyframes skeletonPulse {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
@@ -513,10 +452,6 @@ html.dark .skeleton-media {
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
html.dark #search-trigger {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#search-trigger span,
|
||||
#search-trigger kbd {
|
||||
display: none;
|
||||
|
||||
@@ -1,140 +1,72 @@
|
||||
html.dark pre[class*="language-"],
|
||||
html.dark code[class*="language-"] {
|
||||
color: #abb2bf;
|
||||
pre[class*="language-"],
|
||||
code[class*="language-"] {
|
||||
color: var(--code-text);
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6a737d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
html.dark .token.comment,
|
||||
html.dark .token.prolog,
|
||||
html.dark .token.doctype,
|
||||
html.dark .token.cdata {
|
||||
color: #5c6370;
|
||||
color: var(--hl-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
html.dark .token.punctuation {
|
||||
color: #abb2bf;
|
||||
color: var(--hl-punct);
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.function-name {
|
||||
color: #6f42c1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
html.dark .token.function,
|
||||
html.dark .token.function-name {
|
||||
color: #61afef;
|
||||
color: var(--hl-func);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.token.keyword,
|
||||
.token.selector {
|
||||
color: #d73a49;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html.dark .token.keyword,
|
||||
html.dark .token.selector {
|
||||
color: #c678dd;
|
||||
color: var(--hl-keyword);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.url {
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
html.dark .token.string,
|
||||
html.dark .token.url {
|
||||
color: #98c379;
|
||||
color: var(--hl-string);
|
||||
}
|
||||
|
||||
.token.variable,
|
||||
.token.attr-name,
|
||||
.token.property {
|
||||
color: #e36209;
|
||||
}
|
||||
|
||||
html.dark .token.variable,
|
||||
html.dark .token.attr-name,
|
||||
html.dark .token.property {
|
||||
color: #e06c75;
|
||||
color: var(--hl-var);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity {
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
html.dark .token.operator,
|
||||
html.dark .token.entity {
|
||||
color: #56b6c2;
|
||||
color: var(--hl-op);
|
||||
}
|
||||
|
||||
.token.number,
|
||||
.token.boolean,
|
||||
.token.constant {
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
html.dark .token.number,
|
||||
html.dark .token.boolean,
|
||||
html.dark .token.constant {
|
||||
color: #d19a66;
|
||||
color: var(--hl-num);
|
||||
}
|
||||
|
||||
.token.parameter {
|
||||
color: #b08800;
|
||||
}
|
||||
|
||||
html.dark .token.parameter {
|
||||
color: #d19a66;
|
||||
color: var(--hl-param);
|
||||
}
|
||||
|
||||
.token.class-name {
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
html.dark .token.class-name {
|
||||
color: #e5c07b;
|
||||
color: var(--hl-class);
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
html.dark .token.tag {
|
||||
color: #e06c75;
|
||||
color: var(--hl-tag);
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
color: #b31d28;
|
||||
background-color: #ffeef0;
|
||||
}
|
||||
|
||||
html.dark .token.deleted {
|
||||
color: #e06c75;
|
||||
background-color: rgba(224, 108, 117, 0.15);
|
||||
color: var(--hl-deleted-color);
|
||||
background-color: var(--hl-deleted-bg);
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: #22863a;
|
||||
background-color: #f0fff4;
|
||||
}
|
||||
|
||||
html.dark .token.inserted {
|
||||
color: #98c379;
|
||||
background-color: rgba(152, 195, 121, 0.15);
|
||||
color: var(--hl-inserted-color);
|
||||
background-color: var(--hl-inserted-bg);
|
||||
}
|
||||
@@ -43,11 +43,7 @@
|
||||
|
||||
#banner-close:hover {
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
html.dark #banner-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
#navbar {
|
||||
@@ -98,31 +94,19 @@ html.dark #banner-close:hover {
|
||||
padding: 6px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
html.dark #navbar .tabs a {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
#navbar .tabs a:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark #navbar .tabs a:hover {
|
||||
color: var(--text-dark);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#navbar .tabs a.active {
|
||||
color: var(--text-light);
|
||||
color: var(--text-heading);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html.dark #navbar .tabs a.active {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
#layout {
|
||||
display: flex;
|
||||
max-width: 1400px;
|
||||
@@ -151,14 +135,10 @@ html.dark #navbar .tabs a.active {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 23px;
|
||||
color: var(--text-light);
|
||||
color: var(--text);
|
||||
margin: 0 0 10px 16px;
|
||||
}
|
||||
|
||||
html.dark #sidebar .group-title {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
#sidebar ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -171,29 +151,16 @@ html.dark #sidebar .group-title {
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: var(--muted-light);
|
||||
}
|
||||
|
||||
html.dark #sidebar li a {
|
||||
color: var(--muted-dark);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#sidebar li a.active {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark #sidebar li a.active {
|
||||
color: var(--text-dark);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#sidebar li a:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark #sidebar li a:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-dark);
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#content-col {
|
||||
@@ -246,14 +213,10 @@ footer#site-footer {
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-light);
|
||||
color: var(--text-heading);
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
html.dark .footer-link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -268,14 +231,10 @@ html.dark .footer-link {
|
||||
|
||||
.footer-bottom {
|
||||
width: 100%;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-top: 1px solid var(--footer-border);
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
html.dark .footer-bottom {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
@@ -284,20 +243,12 @@ html.dark .footer-bottom {
|
||||
.footer-socials a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
html.dark .footer-socials a {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
.footer-socials a:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark .footer-socials a:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
@@ -318,7 +269,7 @@ html.dark .footer-socials a:hover {
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: none;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -328,37 +279,49 @@ html.dark .footer-socials a:hover {
|
||||
}
|
||||
|
||||
#theme-toggle:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
html.dark #theme-toggle {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
html.dark #theme-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
#theme-menu {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 46px;
|
||||
width: 180px;
|
||||
width: 215px;
|
||||
max-height: 75vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
background: var(--bg-light);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
||||
background: var(--bg-menu);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
|
||||
z-index: 50;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-8px) scale(0.96);
|
||||
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html.dark #theme-menu {
|
||||
background: var(--bg-dark);
|
||||
#theme-menu::-webkit-scrollbar,
|
||||
#theme-seg-menu::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
#theme-menu::-webkit-scrollbar-thumb,
|
||||
#theme-seg-menu::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#theme-menu::-webkit-scrollbar-track,
|
||||
#theme-seg-menu::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#theme-menu.open {
|
||||
@@ -368,37 +331,77 @@ html.dark #theme-menu {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.theme-menu-divider {
|
||||
height: 1px;
|
||||
margin: 6px 6px;
|
||||
background: var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-menu-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
padding: 6px 10px 4px;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#theme-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: none;
|
||||
color: inherit;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#theme-menu button:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
html.dark #theme-menu button:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
#theme-menu button .ico {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#theme-menu button span {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#theme-menu .check {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#theme-menu button.on {
|
||||
font-weight: 600;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#theme-menu button.on .ico {
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#theme-menu button.on .check {
|
||||
@@ -406,11 +409,146 @@ html.dark #theme-menu button:hover {
|
||||
}
|
||||
|
||||
#theme-seg {
|
||||
position: relative;
|
||||
display: none;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#theme-seg button {
|
||||
#theme-seg-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
width: 180px;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
padding: 6px;
|
||||
border-radius: 14px;
|
||||
background: var(--bg-menu);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
z-index: 250;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-6px) scale(0.96);
|
||||
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#theme-seg-menu.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#theme-seg-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
width: 215px;
|
||||
max-height: 340px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
padding: 6px;
|
||||
border-radius: 14px;
|
||||
background: var(--bg-menu);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
z-index: 250;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-6px) scale(0.96);
|
||||
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#theme-seg-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 36px;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: none;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#theme-seg-menu button:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
#theme-seg-menu button .ico {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#theme-seg-menu button span {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#theme-seg-menu button.on span {
|
||||
color: var(--text-heading);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#theme-seg-menu button.on .ico {
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#theme-seg-menu button .check {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#theme-seg-menu button.on .check {
|
||||
visibility: visible;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#theme-seg-menu button:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
#theme-seg-menu button.on {
|
||||
font-weight: 600;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#theme-seg-menu .check {
|
||||
margin-left: auto;
|
||||
font-style: normal;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#theme-seg-menu button.on .check {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#theme-seg>button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -419,22 +557,14 @@ html.dark #theme-menu button:hover {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
html.dark #theme-seg button {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
#theme-seg button.on {
|
||||
background: rgba(0, 0, 0, 0.07);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark #theme-seg button.on {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-dark);
|
||||
#theme-seg>button.on {
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
#mobile-bar {
|
||||
@@ -444,14 +574,9 @@ html.dark #theme-seg button.on {
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
html.dark #mobile-bar {
|
||||
color: var(--muted-dark);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
#mobile-bar button {
|
||||
@@ -479,11 +604,7 @@ html.dark #mobile-bar {
|
||||
}
|
||||
|
||||
.mobile-crumbs .crumb-group {
|
||||
color: var(--muted-light);
|
||||
}
|
||||
|
||||
html.dark .mobile-crumbs .crumb-group {
|
||||
color: var(--muted-dark);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.mobile-crumbs .crumb-sep {
|
||||
@@ -492,28 +613,19 @@ html.dark .mobile-crumbs .crumb-group {
|
||||
}
|
||||
|
||||
.mobile-crumbs .crumb-page {
|
||||
color: var(--text-light);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html.dark .mobile-crumbs .crumb-page {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.mobile-crumbs .crumb-page:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.mobile-crumbs .crumb-page.muted {
|
||||
color: var(--muted-light);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
html.dark .mobile-crumbs .crumb-page.muted {
|
||||
color: var(--muted-dark);
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -533,17 +645,13 @@ html.dark .mobile-crumbs .crumb-page.muted {
|
||||
}
|
||||
|
||||
.mobile-crumbs .crumb-heading {
|
||||
color: var(--text-light);
|
||||
color: var(--text-heading);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
html.dark .mobile-crumbs .crumb-heading {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.mobile-tabs {
|
||||
display: none;
|
||||
position: relative;
|
||||
@@ -557,27 +665,19 @@ html.dark .mobile-crumbs .crumb-heading {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
background: rgba(25, 25, 25, 0.1);
|
||||
background: var(--hover-bg);
|
||||
border-radius: 100px;
|
||||
color: var(--text-light);
|
||||
color: var(--text-heading);
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html.dark .mt-btn {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.mt-btn .ico {
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
html.dark .mt-btn .ico {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
.mobile-tabs.open .mt-btn .ico {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -591,9 +691,9 @@ html.dark .mt-btn .ico {
|
||||
z-index: 5;
|
||||
padding: 6px;
|
||||
border-radius: 16px;
|
||||
background: var(--bg-light);
|
||||
border: 1px solid var(--border-light);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
background: var(--bg-menu);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-8px) scale(0.97);
|
||||
@@ -601,12 +701,6 @@ html.dark .mt-btn .ico {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html.dark .mt-menu {
|
||||
background: #000000;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.mobile-tabs.open .mt-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@@ -626,35 +720,22 @@ html.dark .mt-menu {
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
html.dark .mt-menu .mt-item {
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
.mt-menu .mt-item:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark .mt-menu .mt-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #ffffff;
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
.mt-menu .mt-item.on {
|
||||
color: var(--text-light);
|
||||
color: var(--text-heading);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html.dark .mt-menu .mt-item.on {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.mt-menu .mt-item svg {
|
||||
display: none;
|
||||
width: 16px;
|
||||
@@ -762,17 +843,13 @@ body.is-home main.prose {
|
||||
#sidebar #theme-seg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: var(--hover-bg);
|
||||
border-radius: 50px;
|
||||
padding: 2px 4px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
html.dark #sidebar #theme-seg {
|
||||
background: rgba(50, 50, 50, 0.08);
|
||||
}
|
||||
|
||||
#sidebar #theme-seg button {
|
||||
#sidebar #theme-seg>button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -781,22 +858,14 @@ body.is-home main.prose {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
html.dark #sidebar #theme-seg button {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
#sidebar #theme-seg button.on {
|
||||
color: var(--text-light);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
html.dark #sidebar #theme-seg button.on {
|
||||
color: var(--text-dark);
|
||||
#sidebar #theme-seg>button.on {
|
||||
color: var(--text-heading);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -820,18 +889,14 @@ body.is-home main.prose {
|
||||
height: 100dvh !important;
|
||||
max-height: 100vh !important;
|
||||
padding: 0 16px 20px;
|
||||
background: var(--bg-light);
|
||||
background: var(--bg);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
|
||||
border-radius: 0 35px 35px 0;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
html.dark #sidebar {
|
||||
background: var(--bg-dark);
|
||||
}
|
||||
|
||||
#sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
@@ -10,11 +10,7 @@ main.prose .eyebrow {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark main.prose .eyebrow {
|
||||
color: var(--text-dark);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
main.prose h1 {
|
||||
@@ -22,19 +18,15 @@ main.prose h1 {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
margin: 0 0 6px;
|
||||
color: #111827;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
main.prose .page-description {
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
html.dark main.prose .page-description {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
main.prose h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
@@ -56,44 +48,25 @@ main.prose h3 {
|
||||
main.prose h2,
|
||||
main.prose h3 {
|
||||
scroll-margin-top: 130px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
html.dark main.prose h1,
|
||||
html.dark main.prose h2,
|
||||
html.dark main.prose h3 {
|
||||
color: var(--text-dark);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
main.prose p,
|
||||
main.prose li {
|
||||
color: #4b5563;
|
||||
color: var(--text);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
html.dark main.prose p,
|
||||
html.dark main.prose li {
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
main.prose strong {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark main.prose strong {
|
||||
color: var(--text-dark);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
main.prose a {
|
||||
color: var(--text-light);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
html.dark main.prose a {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
main.prose ul,
|
||||
main.prose ol {
|
||||
padding-left: 22px;
|
||||
@@ -119,23 +92,21 @@ main.prose hr {
|
||||
}
|
||||
|
||||
main.prose code {
|
||||
background: rgba(250, 250, 250, 0.5);
|
||||
background: var(--code-inline-bg);
|
||||
color: var(--code-inline-text);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
html.dark main.prose code {
|
||||
background: rgba(5, 5, 5);
|
||||
}
|
||||
|
||||
main.prose pre {
|
||||
margin: 16px 0;
|
||||
padding: 16px 20px;
|
||||
border-radius: 25px;
|
||||
overflow-x: auto;
|
||||
background: rgba(250, 250, 250);
|
||||
background: var(--bg-code);
|
||||
color: var(--code-text);
|
||||
--fade-l: 0px;
|
||||
--fade-r: 0px;
|
||||
scrollbar-width: none;
|
||||
@@ -143,14 +114,11 @@ main.prose pre {
|
||||
mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
|
||||
}
|
||||
|
||||
html.dark main.prose pre {
|
||||
background: rgba(5, 5, 5);
|
||||
}
|
||||
|
||||
main.prose pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
@@ -185,22 +153,15 @@ th {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--muted-light);
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
html.dark th {
|
||||
color: var(--muted-dark);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 14px 5px;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
html.dark td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
@@ -212,7 +173,7 @@ tbody tr {
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
td code {
|
||||
@@ -241,20 +202,16 @@ td code {
|
||||
}
|
||||
|
||||
.callout-note {
|
||||
background: rgba(5, 5, 5, 0.08);
|
||||
}
|
||||
|
||||
html.dark .callout-note {
|
||||
background: rgba(50, 50, 50, 0.1);
|
||||
background: var(--callout-note-bg);
|
||||
}
|
||||
|
||||
.callout-info {
|
||||
background: rgba(39, 39, 39, 0.08);
|
||||
background: var(--callout-info-bg);
|
||||
}
|
||||
|
||||
.callout-warning {
|
||||
background: #fefce8 !important;
|
||||
color: #854d0e !important;
|
||||
background: var(--callout-warning-bg) !important;
|
||||
color: var(--callout-warning-text) !important;
|
||||
}
|
||||
|
||||
.callout-warning p,
|
||||
@@ -262,16 +219,6 @@ html.dark .callout-note {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
html.dark .callout-warning {
|
||||
background: oklab(68.064% 0.0348215 0.137956 / 0.2) !important;
|
||||
color: #fde047 !important;
|
||||
}
|
||||
|
||||
html.dark .callout-warning p,
|
||||
html.dark .callout-warning strong {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
aside#toc {
|
||||
width: var(--toc-width);
|
||||
flex-shrink: 0;
|
||||
@@ -299,7 +246,7 @@ aside#toc .toc-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
color: var(--text-light);
|
||||
color: var(--text-heading);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@@ -308,12 +255,8 @@ aside#toc .toc-title::before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: currentColor;
|
||||
-webkit-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") center / contain no-repeat;
|
||||
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") center / contain no-repeat;
|
||||
}
|
||||
|
||||
html.dark aside#toc .toc-title {
|
||||
color: var(--text-dark);
|
||||
-webkit-mask: var(--ico-toc-mask) center / contain no-repeat;
|
||||
mask: var(--ico-toc-mask) center / contain no-repeat;
|
||||
}
|
||||
|
||||
aside#toc ul {
|
||||
@@ -327,30 +270,18 @@ aside#toc li a {
|
||||
padding: 6px 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--muted-light);
|
||||
}
|
||||
|
||||
html.dark aside#toc li a {
|
||||
color: var(--muted-dark);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
aside#toc li a:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
html.dark aside#toc li a:hover {
|
||||
color: var(--text-dark);
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
aside#toc li a.active {
|
||||
color: var(--text-light);
|
||||
color: var(--text-heading);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html.dark aside#toc li a.active {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
aside#toc {
|
||||
display: none;
|
||||
|
||||
@@ -1,20 +1,511 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
|
||||
|
||||
:root {
|
||||
--bg-light: #ffffff;
|
||||
--bg-dark: #000000;
|
||||
--text-light: #0b0b0c;
|
||||
--text-dark: #f3f3f3;
|
||||
--muted-light: #6b7280;
|
||||
--muted-dark: #a3a3a3;
|
||||
: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;
|
||||
--border-light: #e5e7eb;
|
||||
--border-dark: #2b2b2b98;
|
||||
--bg-elevated: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--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 {
|
||||
@@ -31,15 +522,14 @@ html {
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
background: var(--bg-light);
|
||||
color: var(--text-light);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.65;
|
||||
overflow-x: hidden;
|
||||
-ms-overflow-style: none;
|
||||
@@ -59,20 +549,7 @@ body::before {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
background: radial-gradient(ellipse at center,
|
||||
transparent 35%,
|
||||
rgba(255, 255, 255, 0.7) 100%);
|
||||
}
|
||||
|
||||
html.dark body::before {
|
||||
background: radial-gradient(ellipse at center,
|
||||
transparent 35%,
|
||||
rgba(0, 0, 0, 0.7) 100%);
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-dark);
|
||||
background: radial-gradient(ellipse at center, transparent 35%, var(--body-radial-tint) 100%);
|
||||
}
|
||||
|
||||
.video-bg {
|
||||
@@ -87,4 +564,101 @@ html.dark body {
|
||||
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);
|
||||
}
|
||||
}
|
||||
37
index.html
37
index.html
@@ -87,35 +87,26 @@
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var saved = localStorage.getItem('vyla-theme');
|
||||
var isDark = saved ? saved === 'dark' : true;
|
||||
document.documentElement.classList.toggle('dark', isDark);
|
||||
var saved = localStorage.getItem('vyla-theme') || 'halloween';
|
||||
document.documentElement.setAttribute('data-theme', saved);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cobweb cobweb-top-left" aria-hidden="true">
|
||||
<img class="cobweb-media" src="/assets/images/themes/halloween/cobweb.png" alt="" />
|
||||
</div>
|
||||
<div class="cobweb cobweb-top-right" aria-hidden="true">
|
||||
<img class="cobweb-media" src="/assets/images/themes/halloween/cobweb.png" alt="" />
|
||||
</div>
|
||||
<div class="spider-container" aria-hidden="true">
|
||||
<div class="spider-thread"></div>
|
||||
<div class="spider-body">
|
||||
<img class="spider-media" src="https://www.pngmart.com/files/1/Spider-PNG-File.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<video class="video-bg" autoplay muted loop playsinline></video>
|
||||
|
||||
<script>
|
||||
const video = document.querySelector('.video-bg');
|
||||
|
||||
function setVideoBackground() {
|
||||
video.src = document.documentElement.classList.contains('dark')
|
||||
? ''
|
||||
: '/';
|
||||
|
||||
video.load();
|
||||
video.play().catch(() => { });
|
||||
}
|
||||
|
||||
setVideoBackground();
|
||||
|
||||
new MutationObserver(setVideoBackground).observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
</script>
|
||||
<div id="banner">
|
||||
<span>
|
||||
Rights holders can request source removal — <a href="/misc/project/dmca">DMCA policy</a>.
|
||||
|
||||
Reference in New Issue
Block a user