/* ============================================================ BootBlock — motywy i czcionki Motyw = zestaw zmiennych CSS; przełączane przez data-theme na . Czcionka przez data-font. Domyślnie: grafit. ============================================================ */ /* --- GRAFIT (domyślny — wartości zgodne z bazowym CSS stron) --- */ :root, :root[data-theme="grafit"] { --bg:#131316; --bg2:#1a1a1f; --bg3:#202027; --ink:#e9e8e6; --dim:#8b8a92; --line:#29292f; --acc:#d78a3c; --foot:#0e0e11; } /* --- JASNY (papier + tusz) --- */ :root[data-theme="jasny"] { --bg:#f5f2ea; --bg2:#ffffff; --bg3:#e8e4d8; --ink:#17171f; --dim:#5c5c66; --line:#d8d2c4; --acc:#c96f14; --foot:#131a2e; } /* --- WORKBENCH 1.3 (blue/orange, pełny odjazd) --- */ :root[data-theme="workbench"] { --bg:#4a6db5; --bg2:#3c5da5; --bg3:#2b4a8f; --ink:#ffffff; --dim:#cfd9f2; --line:#2b4a8f; --acc:#f28a1e; --foot:#22376b; } /* --- C64 (niebieskawy jak basic v2) --- */ :root[data-theme="c64"] { --bg:#40318d; --bg2:#4a3a9d; --bg3:#352a75; --ink:#d8d0ff; --dim:#9c8fd8; --line:#5a4aad; --acc:#a3e88f; --foot:#2a2060; } /* --- GURU MEDITATION (czerń + czerwień, migać nie będzie, spokojnie) --- */ :root[data-theme="guru"] { --bg:#000000; --bg2:#0d0d0d; --bg3:#151515; --ink:#ff6a5f; --dim:#a04a42; --line:#3a0f0c; --acc:#ff3b30; --foot:#0a0505; } /* --- FOSFOR (bursztynowy monitor) --- */ :root[data-theme="fosfor"] { --bg:#0b0e0a; --bg2:#12160f; --bg3:#1a2015; --ink:#ffb000; --dim:#8a6212; --line:#2c2411; --acc:#58e05e; --foot:#070905; } /* --- CZCIONKI --- */ :root[data-font="mono"] body { font-family: var(--mono); } :root[data-font="szeryf"] body { font-family: Georgia, "Times New Roman", serif; } /* pixelowa (VT323 — klimat Topaza; fallback: mono) */ :root[data-font="pixel"] body { font-family: "VT323", var(--mono); font-size: 1.14em; letter-spacing: .3px; } /* domyślna (sans) — bez nadpisania */ /* --- rzeczy wspólne, które motywy muszą przejąć --- */ footer { background: var(--foot) !important; } body { transition: background .25s, color .25s; } /* --- przełącznik w nagłówku: gadżety jak z Workbencha (bevel) --- */ .prefs { margin-left: 12px; display: flex; gap: 7px; align-items: center; } .prefs select { background: var(--bg3); color: var(--ink); border: 0; padding: 6px 8px; appearance: none; box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.22), inset -1.5px -1.5px 0 rgba(0,0,0,.5); font-family: var(--mono); font-size: 11.5px; letter-spacing: .5px; cursor: pointer; max-width: 108px; } .prefs select:hover { color: var(--acc); } .prefs select:active { box-shadow: inset -1.5px -1.5px 0 rgba(255,255,255,.22), inset 1.5px 1.5px 0 rgba(0,0,0,.5); } .prefs label { display: none; } /* etykieta zbędna — selecty mówią same za siebie */ @media (max-width: 860px) { header .prefs { display: none; } } /* ============================================================ MENU MOBILNE — wysuwana szuflada w klimacie okna Workbencha ============================================================ */ .menu-btn { display: none; margin-left: auto; width: 42px; height: 38px; border: 0; cursor: pointer; background: var(--bg3); color: var(--ink); box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.22), inset -1.5px -1.5px 0 rgba(0,0,0,.5); font-family: var(--mono); font-size: 15px; letter-spacing: 1px; } .menu-btn:active { box-shadow: inset -1.5px -1.5px 0 rgba(255,255,255,.22), inset 1.5px 1.5px 0 rgba(0,0,0,.5); } @media (max-width: 860px) { .menu-btn { display: block; } header nav { display: none !important; } } .drawer-backdrop { position: fixed; inset: 0; z-index: 800; display: none; background: conic-gradient(rgba(0,0,0,.55) 25%, transparent 0 50%, rgba(0,0,0,.55) 0 75%, transparent 0) 0 0/6px 6px, rgba(0,0,0,.45); } .drawer-backdrop.open { display: block; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 900; width: min(300px, 86vw); background: var(--bg2); border-left: 2px solid var(--acc); transform: translateX(105%); transition: transform .28s steps(7, end); /* skokowo, jak na 7 MHz */ display: flex; flex-direction: column; } .drawer.open { transform: translateX(0); } .drawer-title { display: flex; align-items: stretch; height: 34px; flex: none; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.12) 5px 10px), var(--bg3); border-bottom: 2px solid var(--acc); font-family: var(--mono); font-size: 12px; letter-spacing: 2px; } .drawer-title .t { flex: 1; display: flex; align-items: center; padding: 0 12px; color: var(--ink); } .drawer-title .x { width: 40px; border: 0; border-left: 2px solid var(--acc); background: var(--bg2); color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 14px; } .drawer-title .x:hover { background: var(--acc); color: #141414; } .drawer-nav { display: block !important; margin-left: 0 !important; padding: 14px 0; overflow-y: auto; } .drawer-nav a { display: block; padding: 11px 18px; font-family: var(--mono); font-size: 14.5px; letter-spacing: 1px; color: var(--ink); text-decoration: none; cursor: pointer; } .drawer-nav a::before { content: "» "; color: var(--acc); } .drawer-nav a:hover, .drawer-nav a.on { background: var(--acc); color: #141414; } .drawer-nav a.on::before { content: "▪ "; color: #141414; } /* WSPOMINKI w szufladzie — retro ramka */ .drawer-nav a[data-cat="wspominki"] { margin: 6px 14px; padding: 9px 12px; border: 1px solid var(--acc); box-shadow: 2px 2px 0 var(--bg3); color: var(--acc); } .drawer-nav a[data-cat="wspominki"]:hover { color: #141414; } .drawer-sep { margin: 8px 18px; height: 2px; flex: none; background: linear-gradient(90deg,#c9584a,#d78a3c,#c9b458,#6aa98a,#5f8fb8,#8a6fb8); opacity: .6; } .drawer-prefs { padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 10px; } .drawer-prefs .row { display: flex; align-items: center; gap: 10px; } .drawer-prefs label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; width: 62px; flex: none; } .drawer-prefs select { flex: 1; background: var(--bg3); color: var(--ink); border: 0; padding: 8px; box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.22), inset -1.5px -1.5px 0 rgba(0,0,0,.5); font-family: var(--mono); font-size: 12px; cursor: pointer; } .drawer-foot { margin-top: auto; flex: none; padding: 12px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--dim); } .drawer-foot .p { color: var(--acc); font-weight: 700; } .drawer-foot .c { display: inline-block; width: 7px; height: 13px; background: var(--acc); vertical-align: text-bottom; animation: drblink .9s steps(1) infinite; } @keyframes drblink { 50% { opacity: 0; } }