/* Large File Service - looks. Base markup uses 98.css (= the "win98" look, no overrides). Every other look overrides it. Looks: modern (default) win31 win98 beos platinum system7 next bliss aqua aero terminal lcd broadsheet geocities (+ cyber in theme-cyber.css) */ /* ---------- fonts (self-hosted, OFL) ---------- */ @font-face { font-family: "LFS Nunito"; src: url(fonts/nunito-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "LFS Nunito"; src: url(fonts/nunito-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "LFS Nunito"; src: url(fonts/nunito-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; } @font-face { font-family: "LFS Fredoka"; src: url(fonts/fredoka-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "LFS Fredoka"; src: url(fonts/fredoka-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; } /* ---------- shared ---------- */ .modern-only { display: none; } html[data-theme="modern"] .modern-only { display: revert; } html[data-theme="modern"] .not-modern, html[data-theme="modern"] .retro-only { display: none !important; } .geo-extra { display: none; } html[data-theme="geocities"] .geo-extra { display: block; } /* long file names: keep title bars on one line in every look */ .title-bar { gap: 8px; } .title-bar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title-bar-controls { flex: none; } /* everything except win98/modern: drop 98.css bitmaps, inherit theme font, text glyphs on title buttons */ html[data-theme]:not([data-theme="win98"]):not([data-theme="modern"]):not([data-theme="geocities"]):not([data-theme="cyber"]) body * { font-family: inherit; font-size: inherit; -webkit-font-smoothing: auto; } html[data-theme="geocities"] .window legend, html[data-theme="geocities"] .window label { font: bold 14px Tahoma, Arial, sans-serif; } html[data-theme="geocities"] .status-bar-field { font: 12px Tahoma, Arial, sans-serif; } html[data-theme]:not([data-theme="win98"]) fieldset { border-image: none; } html[data-theme]:not([data-theme="win98"]) legend { background: transparent; } html[data-theme]:not([data-theme="win98"]) .est { grid-template-columns: auto 1fr; } html[data-theme]:not([data-theme="win98"]) .title-bar-controls button { background-image: none; min-width: 0; width: 18px; height: 16px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; } html[data-theme]:not([data-theme="win98"]) .title-bar-controls button::before { content: "\00d7"; font-weight: bold; } html[data-theme]:not([data-theme="win98"]) .title-bar-controls button[aria-label="Minimize"]::before { content: "_"; } html[data-theme]:not([data-theme="win98"]) .title-bar-controls button[aria-label="Maximize"]::before { content: "\25a1"; } html[data-theme]:not([data-theme="win98"]) .title-bar-controls button[aria-label="Help"]::before { content: "?"; } /* ============================================================ MODERN (default): playful, bright, chunky outlines ============================================================ */ html[data-theme="modern"] { --ink: #1f1b2e; --cream: #fff7ec; --violet: #6d4aff; --violet-soft: #ebe5ff; --coral: #ff6b5b; --sun: #ffc23d; --mint: #2ec4a0; --sky: #4da8ff; --muted: #6b6480; } html[data-theme="modern"], html[data-theme="modern"] body { background-color: var(--cream); background-image: radial-gradient(circle at 12% 18%, rgba(109,74,255,.18) 0 160px, transparent 161px), radial-gradient(circle at 88% 82%, rgba(255,107,91,.20) 0 200px, transparent 201px), radial-gradient(circle at 85% 12%, rgba(255,194,61,.30) 0 90px, transparent 91px), radial-gradient(circle at 8% 88%, rgba(46,196,160,.18) 0 110px, transparent 111px), radial-gradient(rgba(31,27,46,.07) 1.2px, transparent 1.3px); background-size: auto, auto, auto, auto, 22px 22px; background-attachment: fixed; } html[data-theme="modern"] body { font: 16px/1.55 "LFS Nunito", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); padding: 56px 16px 96px; zoom: 1; } html[data-theme="modern"] body * { font-family: inherit; font-size: inherit; -webkit-font-smoothing: antialiased; } html[data-theme="modern"] .window { background: #fff; border: 2.5px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); padding: 0; max-width: 500px; overflow: hidden; } html[data-theme="modern"] .title-bar { background: var(--sun); border-bottom: 2.5px solid var(--ink); padding: 10px 16px; } html[data-theme="modern"] .title-bar-text { color: var(--ink); font: 600 15px "LFS Fredoka", "Fredoka", "LFS Nunito", sans-serif; letter-spacing: .01em; } html[data-theme="modern"] .title-bar-controls { gap: 6px; } html[data-theme="modern"] .title-bar-controls button::before { content: none; } html[data-theme="modern"] .title-bar-controls button { width: 14px; height: 14px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--ink); box-shadow: none; background: #fff; background-image: none; } html[data-theme="modern"] .title-bar-controls button:last-child { background: var(--coral); } html[data-theme="modern"] .title-bar-controls button:nth-last-child(2) { background: var(--mint); } html[data-theme="modern"] .menubar { display: none; } html[data-theme="modern"] .window-body { margin: 0; padding: 22px 24px 22px; } html[data-theme="modern"] .head { margin: 0 0 18px; gap: 14px; } html[data-theme="modern"] .head > div:last-child { color: var(--muted); font-size: 14px; } html[data-theme="modern"] .head b { display: block; font: 600 21px/1.15 "LFS Fredoka", "Fredoka", sans-serif; color: var(--ink); margin-bottom: 2px; } html[data-theme="modern"] .logo { width: 54px; height: 54px; border-radius: 16px; background: var(--violet); color: #fff; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-6deg); font: 600 22px/1 "LFS Fredoka", "Fredoka", sans-serif; letter-spacing: -.02em; } html[data-theme="modern"] .hello { font: 600 26px/1.15 "LFS Fredoka", "Fredoka", sans-serif !important; color: var(--violet); margin: 0 0 6px !important; display: block; } html[data-theme="modern"] .msg { margin: 0 0 18px; } html[data-theme="modern"] .msg svg { display: none; } html[data-theme="modern"] .msg p { margin: 0 0 4px; } html[data-theme="modern"] fieldset { border: 2.5px solid var(--ink); border-radius: 18px; background: var(--cream); padding: 16px 18px 14px; margin: 14px 0 18px; } html[data-theme="modern"] legend { background: var(--mint); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 99px; padding: 1px 12px; font: 600 13px "LFS Fredoka", "Fredoka", sans-serif; } html[data-theme="modern"] .cols fieldset:nth-child(2) legend { background: var(--sky); } html[data-theme="modern"] .est, html[data-theme="modern"] .kv { grid-template-columns: auto 1fr; gap: 8px 14px; } html[data-theme="modern"] .est > span:nth-child(odd), html[data-theme="modern"] .kv > span:nth-child(odd) { color: var(--muted); } html[data-theme="modern"] .details b { font-weight: 800; } html[data-theme="modern"] ul { padding-left: 0; list-style: none; margin: 0; } html[data-theme="modern"] li { margin: 4px 0; padding-left: 26px; position: relative; } html[data-theme="modern"] li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 5px; background: var(--sun); border: 2px solid var(--ink); } html[data-theme="modern"] li:nth-child(2)::before { background: var(--mint); } html[data-theme="modern"] li:nth-child(3)::before { background: var(--coral); } html[data-theme="modern"] li:nth-child(4)::before { background: var(--sky); } html[data-theme="modern"] .ok { color: #0f8f6d; font-weight: 800; } html[data-theme="modern"] .ok::before { content: "\25CF "; } html[data-theme="modern"] .cols { gap: 14px; } html[data-theme="modern"] .cols fieldset { margin: 0 0 18px; } html[data-theme="modern"] .banner { background: var(--violet); color: #fff; border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); padding: 20px; margin: 0 0 20px; gap: 16px; } html[data-theme="modern"] .banner b { font: 600 25px/1.15 "LFS Fredoka", "Fredoka", sans-serif; display: block; margin-bottom: 4px; } html[data-theme="modern"] .banner i { font-style: normal; color: var(--violet-soft); font-size: 15px; } html[data-theme="modern"] .banner .logo { background: var(--sun); color: var(--ink); } html[data-theme="modern"] .note { background: var(--violet-soft); border: 2.5px dashed var(--violet); color: var(--ink); border-radius: 14px; box-shadow: none; padding: 10px 14px; margin-top: 10px; } html[data-theme="modern"] .sunken-panel { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: none; padding: 8px; margin-top: 12px; } html[data-theme="modern"] .sunken-panel img { border-radius: 8px; } html[data-theme="modern"] button { background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); min-height: 48px; min-width: 110px; padding: 10px 20px; font-weight: 800; font-size: 16px; transition: transform .08s, box-shadow .08s; } html[data-theme="modern"] button:not(:disabled):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); } html[data-theme="modern"] button:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); padding: 10px 20px; } html[data-theme="modern"] button.default { background: var(--violet); color: #fff; outline: none; } html[data-theme="modern"] button:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; } html[data-theme="modern"] .buttons { gap: 10px; margin-top: 4px; } html[data-theme="modern"] .status-bar { margin: 0; padding: 12px 24px; background: var(--cream); border-top: 2.5px solid var(--ink); gap: 12px; } html[data-theme="modern"] .status-bar-field { box-shadow: none; padding: 0; color: var(--muted); font-size: 13px; } html[data-theme="modern"] .foot { color: var(--muted); font-size: 13px; margin-top: 22px; } html[data-theme="modern"] .progress-indicator { border-radius: 99px; box-shadow: none; background: var(--violet-soft); height: 14px; padding: 2px; border: 2.5px solid var(--ink); } html[data-theme="modern"] .progress-indicator-bar { background: var(--violet) !important; border-radius: 99px; height: 100%; } html[data-theme="modern"] .overlay .window { max-width: 380px; } html[data-theme="modern"] .taskbar { left: auto; right: 16px; bottom: 16px; height: auto; background: transparent; box-shadow: none; padding: 0; } html[data-theme="modern"] .taskbar > button:first-child, html[data-theme="modern"] .task, html[data-theme="modern"] .tray, html[data-theme="modern"] .startmenu { display: none !important; } @media (max-width: 520px) { html[data-theme="modern"] body { padding: 18px 12px 96px; } html[data-theme="modern"] .window { box-shadow: 5px 5px 0 var(--ink); } html[data-theme="modern"] .window-body { padding: 18px; } html[data-theme="modern"] .buttons button { flex: 1; } html[data-theme="modern"] .cols { grid-template-columns: 1fr; } } /* ============================================================ PLATINUM (late-90s Mac) ============================================================ */ html[data-theme="platinum"], html[data-theme="platinum"] body { background: #6a7a9e repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px); } html[data-theme="platinum"] body { font: 12px/1.45 Charcoal, Chicago, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; } html[data-theme="platinum"] .window { background: #dddddd; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.45), inset 1px 1px #fff, inset -1px -1px #999; padding: 0; max-width: 430px; } html[data-theme="platinum"] .title-bar { background: repeating-linear-gradient(#ececec 0 1px, #a8a8a8 1px 2px); padding: 3px 6px; justify-content: center; position: relative; border-bottom: 1px solid #777; } html[data-theme="platinum"] .title-bar-text { background: #dddddd; color: #000; padding: 0 8px; font-weight: bold; } html[data-theme="platinum"] legend { background: #dddddd; padding: 0 4px; } html[data-theme="platinum"] .title-bar-controls { position: absolute; left: 6px; } html[data-theme="platinum"] .title-bar-controls button { width: 13px; height: 13px; background: linear-gradient(135deg, #fff, #aaa); border: 1px solid #333; box-shadow: none; font-size: 0; } html[data-theme="platinum"] .title-bar-controls button::before { content: none; } html[data-theme="platinum"] .menubar { background: #eee; border-bottom: 1px solid #999; } html[data-theme="platinum"] .window-body { margin: 10px 12px; } html[data-theme="platinum"] .banner { background: linear-gradient(#5a6fa8, #344a86); border-radius: 4px; } html[data-theme="platinum"] .logo { background: #fff; color: #344a86; box-shadow: none; border-radius: 6px; border: 1px solid #000; } html[data-theme="platinum"] .head .logo { background: #344a86; color: #fff; } html[data-theme="platinum"] fieldset { border: 1px solid #8a8a8a; border-radius: 4px; box-shadow: 1px 1px 0 #fff, inset 1px 1px 0 #fff; padding: 8px 10px 10px; } html[data-theme="platinum"] .note, html[data-theme="platinum"] .sunken-panel { background: #fff; box-shadow: none; border: 1px solid #777; } html[data-theme="platinum"] button { background: linear-gradient(#fff, #d0d0d0); border: 1px solid #000; border-radius: 6px; box-shadow: none; padding: 2px 14px; min-height: 22px; } html[data-theme="platinum"] button.default { outline: 3px solid #000; outline-offset: 1px; } html[data-theme="platinum"] button:not(:disabled):active { background: #555; color: #fff; } html[data-theme="platinum"] .status-bar-field { box-shadow: none; border: 1px solid #aaa; background: #e8e8e8; } html[data-theme="platinum"] .foot { color: #fff; } html[data-theme="platinum"] .taskbar { background: #dddddd; box-shadow: none; border-top: 1px solid #000; } html[data-theme="platinum"] .taskbar > button { border-radius: 4px; } html[data-theme="platinum"] .task, html[data-theme="platinum"] .tray { background: #eee; box-shadow: none; border: 1px solid #888; border-radius: 3px; } html[data-theme="platinum"] .startmenu { background: #eee; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.4); } html[data-theme="platinum"] .side { background: #344a86; } html[data-theme="platinum"] .startmenu li button { border: 0; border-radius: 0; background: none; } html[data-theme="platinum"] .startmenu li button:hover { background: #344a86; color: #fff; } /* ============================================================ BLISS (early 2000s blue and green) ============================================================ */ html[data-theme="bliss"], html[data-theme="bliss"] body { background: radial-gradient(ellipse 140% 55% at 30% 105%, #5fa83a 0 55%, transparent 56%), radial-gradient(ellipse 120% 50% at 90% 110%, #4c962c 0 60%, transparent 61%), linear-gradient(#2f6fd6, #8cc4f7 70%, #cfe8ff); background-attachment: fixed; } html[data-theme="bliss"] body { font: 12px/1.5 Tahoma, Verdana, sans-serif; color: #000; } html[data-theme="bliss"] .window { background: #ece9d8; border: 3px solid #0831d9; border-top: 0; border-radius: 8px 8px 0 0; box-shadow: 2px 3px 10px rgba(0,0,0,.4); padding: 0; max-width: 440px; } html[data-theme="bliss"] .title-bar { background: linear-gradient(#0997ff, #0053ee 12%, #0050ee 88%, #06f); padding: 5px 5px 5px 8px; border-radius: 7px 7px 0 0; } html[data-theme="bliss"] .title-bar-text { color: #fff; font: bold 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px #0f1089; } html[data-theme="bliss"] .title-bar-controls button { width: 21px; height: 21px; border-radius: 3px; border: 1px solid #fff; background: linear-gradient(#3c8cf5, #1e5fe0); color: #fff; box-shadow: none; font-size: 13px; } html[data-theme="bliss"] .title-bar-controls button[aria-label="Close"] { background: linear-gradient(#e86b4c, #c63a1c); } html[data-theme="bliss"] .window-body { margin: 10px 12px; } html[data-theme="bliss"] .banner { background: linear-gradient(90deg, #0a246a, #3a6ea5); border-radius: 4px; } html[data-theme="bliss"] .logo { box-shadow: none; border-radius: 4px; border: 1px solid #fff; } html[data-theme="bliss"] .head .logo { background: #0a246a; color: #fff; } html[data-theme="bliss"] .head b { color: #0a246a; } html[data-theme="bliss"] fieldset { border: 1px solid #d0d0bf; border-radius: 4px; padding: 8px 10px 10px; } html[data-theme="bliss"] legend { color: #0046d5; } html[data-theme="bliss"] .note, html[data-theme="bliss"] .sunken-panel { background: #fff; box-shadow: none; border: 1px solid #7f9db9; } html[data-theme="bliss"] button { background: linear-gradient(#fff, #ecebe6 86%, #d6d0c5); border: 1px solid #003c74; border-radius: 3px; box-shadow: none; min-height: 23px; } html[data-theme="bliss"] button:hover { box-shadow: inset 0 -2px #f8b636, inset 0 2px #fdd889; } html[data-theme="bliss"] button.default { box-shadow: inset 0 -2px #91a7f4, inset 0 2px #cee7ff; } html[data-theme="bliss"] .status-bar { background: #ece9d8; } html[data-theme="bliss"] .status-bar-field { box-shadow: none; border: 1px solid #c2bfa5; } html[data-theme="bliss"] .foot { color: #fff; text-shadow: 1px 1px 2px #000; } html[data-theme="bliss"] .taskbar { height: 30px; background: linear-gradient(#245edb, #3f8cf3 9%, #245edb 18%, #1941a5); box-shadow: none; padding: 0; } html[data-theme="bliss"] .taskbar > button:first-child { height: 30px; padding: 0 16px 0 10px; border: 0; border-radius: 0 12px 12px 0; background: linear-gradient(#3c9a3c, #4fb84f 15%, #2d8a2d 85%); color: #fff; font: italic bold 15px "Trebuchet MS", sans-serif; text-shadow: 1px 1px #1a4d1a; } html[data-theme="bliss"] .task { background: #3c81f3; color: #fff; box-shadow: none; border: 1px solid #1e52b7; border-radius: 3px; } html[data-theme="bliss"] .tray { height: 30px; background: linear-gradient(#0c59b9, #139ee9 10%, #18b9ff 15%, #1291e7 80%, #0d8dd8); color: #fff; box-shadow: none; border-left: 1px solid #092e8b; } html[data-theme="bliss"] .startmenu { background: #fff; border: 2px solid #0831d9; border-radius: 6px 6px 0 0; box-shadow: 2px 2px 8px rgba(0,0,0,.4); } html[data-theme="bliss"] .side { background: linear-gradient(0deg, #1c56e0, #3d8cf5); color: #fff; } html[data-theme="bliss"] .startmenu li button { border: 0; background: none; box-shadow: none; } html[data-theme="bliss"] .startmenu li button:hover { background: #316ac5; color: #fff; } /* ============================================================ AQUA (2001 glossy silver, pinstripes) ============================================================ */ html[data-theme="aqua"], html[data-theme="aqua"] body { background: repeating-linear-gradient(#ffffff 0 2px, #eaeef3 2px 4px); } html[data-theme="aqua"] body { font: 13px/1.45 "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; color: #111; } html[data-theme="aqua"] .window { background: #f5f5f5; border: 1px solid #9a9a9a; border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.32); padding: 0; overflow: hidden; max-width: 440px; } html[data-theme="aqua"] .title-bar { background: linear-gradient(#f4f4f4, #d2d2d2 50%, #c4c4c4 51%, #dcdcdc); padding: 5px 8px; justify-content: center; position: relative; border-bottom: 1px solid #999; } html[data-theme="aqua"] .title-bar-text { color: #222; font-weight: normal; text-shadow: 0 1px #fff; } html[data-theme="aqua"] .title-bar-controls { position: absolute; left: 8px; gap: 6px; flex-direction: row-reverse; } html[data-theme="aqua"] .title-bar-controls button { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); box-shadow: inset 0 3px 3px rgba(255,255,255,.7); font-size: 0; background: #ff5f57; } html[data-theme="aqua"] .title-bar-controls button[aria-label="Minimize"], html[data-theme="aqua"] .title-bar-controls button[aria-label="Help"] { background: #febc2e; } html[data-theme="aqua"] .title-bar-controls button[aria-label="Maximize"] { background: #28c840; } html[data-theme="aqua"] .title-bar-controls button::before { content: none; } html[data-theme="aqua"] .menubar { background: linear-gradient(#fafafa, #e8e8e8); border-bottom: 1px solid #bbb; } html[data-theme="aqua"] .window-body { margin: 12px 14px; } html[data-theme="aqua"] .banner { background: linear-gradient(#78b8ff, #2a77d8 50%, #1a64c4 51%, #4d97ef); border-radius: 8px; box-shadow: inset 0 1px rgba(255,255,255,.6); } html[data-theme="aqua"] .logo { color: #1a64c4; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 4px 6px rgba(255,255,255,.8); background: linear-gradient(#fff, #cfdcec); } html[data-theme="aqua"] fieldset { border: 1px solid #c8c8c8; border-radius: 6px; background: rgba(255,255,255,.6); padding: 8px 12px 10px; } html[data-theme="aqua"] legend { color: #3a4b63; font-weight: bold; } html[data-theme="aqua"] .note, html[data-theme="aqua"] .sunken-panel { background: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,.25); border-radius: 4px; } html[data-theme="aqua"] button { background: linear-gradient(#ffffff, #e2e2e2 50%, #d4d4d4 51%, #ececec); border: 1px solid #8f8f8f; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.2); padding: 2px 16px; } html[data-theme="aqua"] button.default { background: linear-gradient(#cfe6ff, #6fb1fb 50%, #3a8ef0 51%, #8cc5ff); border-color: #2a62a8; color: #001a3a; } html[data-theme="aqua"] .status-bar-field { box-shadow: none; border: 0; border-top: 1px solid #ccc; background: #ececec; } html[data-theme="aqua"] .foot { color: #555; } html[data-theme="aqua"] .taskbar { left: 50%; right: auto; transform: translateX(-50%); bottom: 6px; width: min(560px, 96vw); height: 40px; border-radius: 14px; background: rgba(255,255,255,.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 0 8px; } html[data-theme="aqua"] .task, html[data-theme="aqua"] .tray { background: transparent; box-shadow: none; border: 0; } html[data-theme="aqua"] .startmenu { bottom: 52px; left: 50%; transform: translateX(-50%); border-radius: 10px; background: rgba(250,250,250,.96); border: 1px solid #aaa; box-shadow: 0 8px 24px rgba(0,0,0,.3); overflow: hidden; } html[data-theme="aqua"] .side { background: linear-gradient(0deg, #1a64c4, #78b8ff); color: #fff; } html[data-theme="aqua"] .startmenu li button { border: 0; background: none; box-shadow: none; border-radius: 0; } html[data-theme="aqua"] .startmenu li button:hover { background: #3a8ef0; color: #fff; } /* ============================================================ FRUTIGER AERO (2008 glass, sky, bubbles) ============================================================ */ html[data-theme="aero"], html[data-theme="aero"] body { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 18px, transparent 19px), radial-gradient(circle at 75% 20%, rgba(255,255,255,.4) 0 28px, transparent 29px), radial-gradient(circle at 85% 65%, rgba(255,255,255,.35) 0 14px, transparent 15px), radial-gradient(ellipse 120% 45% at 50% 108%, #74c947 0 60%, transparent 61%), linear-gradient(#1b8fe0, #6cc4ff 55%, #d8f3ff); background-attachment: fixed; } html[data-theme="aero"] body { font: 13px/1.5 "Segoe UI", Tahoma, sans-serif; color: #10243e; } html[data-theme="aero"] .window { background: rgba(255,255,255,.72); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,40,90,.35), 0 18px 40px rgba(0,40,90,.35); padding: 0; overflow: hidden; max-width: 450px; } html[data-theme="aero"] .title-bar { background: linear-gradient(rgba(255,255,255,.7), rgba(180,220,255,.35)); padding: 7px 8px 7px 12px; border-bottom: 1px solid rgba(0,60,120,.2); } html[data-theme="aero"] .title-bar-text { color: #10243e; font-weight: normal; text-shadow: 0 0 8px #fff, 0 0 8px #fff; } html[data-theme="aero"] .title-bar-controls button { width: 28px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,40,90,.45); background: linear-gradient(rgba(255,255,255,.8), rgba(190,220,250,.6)); color: #10243e; box-shadow: none; } html[data-theme="aero"] .title-bar-controls button[aria-label="Close"] { width: 42px; background: linear-gradient(#f2a28f, #d0402a 50%, #b8301c 51%, #e46b4f); color: #fff; } html[data-theme="aero"] .window-body { margin: 14px 16px; } html[data-theme="aero"] .menubar { background: rgba(255,255,255,.4); } html[data-theme="aero"] .banner { background: linear-gradient(135deg, #0a6fc2, #2fb3ff); border-radius: 8px; box-shadow: inset 0 1px rgba(255,255,255,.6), 0 2px 6px rgba(0,60,120,.3); } html[data-theme="aero"] .logo { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 15%, #7fe06a 40%, #2e9a28); color: #fff; box-shadow: 0 2px 6px rgba(0,60,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.4); } html[data-theme="aero"] fieldset { border: 1px solid rgba(0,60,120,.2); border-radius: 6px; background: rgba(255,255,255,.55); padding: 8px 12px 10px; } html[data-theme="aero"] legend { color: #0a5ea8; } html[data-theme="aero"] .note, html[data-theme="aero"] .sunken-panel { background: rgba(255,255,255,.85); box-shadow: inset 0 1px 3px rgba(0,40,90,.2); border-radius: 4px; } html[data-theme="aero"] button { background: linear-gradient(#f6fbff, #e2eefa 50%, #cfe2f6 51%, #e6f1fc); border: 1px solid #6b8fb5; border-radius: 4px; box-shadow: inset 0 1px #fff; padding: 3px 16px; min-height: 26px; } html[data-theme="aero"] button:hover { background: linear-gradient(#eaf7ff, #c8e8ff 50%, #a9d8fc 51%, #d2edff); border-color: #3c7fb1; } html[data-theme="aero"] button.default { border-color: #2c6fb1; box-shadow: inset 0 0 0 1px #9fd2ff; } html[data-theme="aero"] .status-bar-field { box-shadow: none; border: 0; background: rgba(255,255,255,.45); color: #2b4a6d; } html[data-theme="aero"] .foot { color: #fff; text-shadow: 0 1px 3px rgba(0,40,90,.6); } html[data-theme="aero"] .taskbar { height: 34px; background: linear-gradient(rgba(20,40,70,.55), rgba(10,20,40,.75)); backdrop-filter: blur(10px); box-shadow: inset 0 1px rgba(255,255,255,.35); padding: 0 6px; } html[data-theme="aero"] .taskbar > button:first-child { width: 30px; height: 30px; min-width: 0; border-radius: 50%; padding: 0; justify-content: center; border: 1px solid rgba(255,255,255,.5); background: radial-gradient(circle at 35% 30%, #fff 0 12%, #7fe06a 40%, #2e9a28); font-size: 0; box-shadow: 0 0 8px rgba(120,230,100,.6); } html[data-theme="aero"] .taskbar > button:first-child .lf { background: transparent; font-size: 9px; } html[data-theme="aero"] .task, html[data-theme="aero"] .tray { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; } html[data-theme="aero"] .startmenu { background: rgba(240,248,255,.92); backdrop-filter: blur(12px); border: 1px solid rgba(0,40,90,.4); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,30,70,.4); bottom: 36px; } html[data-theme="aero"] .side { background: linear-gradient(0deg, #0a6fc2, #2fb3ff); color: #fff; } html[data-theme="aero"] .startmenu li button { border: 0; background: none; box-shadow: none; } html[data-theme="aero"] .startmenu li button:hover { background: linear-gradient(#e6f4ff, #c3e3ff); color: #10243e; } /* ============================================================ SYSTEM 7 (1-bit black and white Mac) ============================================================ */ html[data-theme="system7"], html[data-theme="system7"] body { background: #fff repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 2px 2px; } html[data-theme="system7"] body { font: 12px/1.5 "Pixelated MS Sans Serif", Geneva, Arial, sans-serif; color: #000; -webkit-font-smoothing: none; } html[data-theme="system7"] .window { background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000; padding: 0; max-width: 420px; } html[data-theme="system7"] .title-bar { background: #fff repeating-linear-gradient(#000 0 1px, #fff 1px 2px); background-clip: content-box; padding: 3px 4px; justify-content: center; position: relative; border-bottom: 1px solid #000; } html[data-theme="system7"] .title-bar-text { background: #fff; color: #000; padding: 0 8px; font-weight: bold; } html[data-theme="system7"] legend { background: #fff; padding: 0 4px; } html[data-theme="system7"] .title-bar-controls { position: absolute; left: 8px; background: #fff; padding: 0 2px; } html[data-theme="system7"] .title-bar-controls button { width: 11px; height: 11px; background: #fff; border: 1px solid #000; box-shadow: none; font-size: 0; } html[data-theme="system7"] .title-bar-controls button::before { content: none; } html[data-theme="system7"] .title-bar-controls button + button { display: none; } html[data-theme="system7"] .menubar { border-bottom: 1px solid #000; } html[data-theme="system7"] .window-body { margin: 12px; } html[data-theme="system7"] .banner { background: #000; color: #fff; } html[data-theme="system7"] .banner i { color: #fff; } html[data-theme="system7"] .logo { background: #fff; color: #000; box-shadow: none; border: 2px solid #000; border-radius: 4px; } html[data-theme="system7"] .head .logo { background: #000; color: #fff; } html[data-theme="system7"] fieldset { border: 1px solid #000; padding: 8px 10px 10px; } html[data-theme="system7"] .note, html[data-theme="system7"] .sunken-panel { background: #fff; box-shadow: none; border: 1px dotted #000; } html[data-theme="system7"] button { background: #fff; color: #000; border: 1px solid #000; border-radius: 8px; box-shadow: none; padding: 2px 16px; min-height: 22px; } html[data-theme="system7"] button.default { outline: 3px solid #000; outline-offset: 1px; } html[data-theme="system7"] button:not(:disabled):active { background: #000; color: #fff; } html[data-theme="system7"] .status-bar-field { box-shadow: none; border-top: 1px solid #000; } html[data-theme="system7"] .ok { color: #000; font-weight: bold; } html[data-theme="system7"] svg { filter: grayscale(1) contrast(4); } html[data-theme="system7"] .foot { color: #000; background: #fff; display: table; margin: 10px auto 0; padding: 0 6px; border: 1px solid #000; } html[data-theme="system7"] .taskbar { top: 0; bottom: auto; height: 22px; background: #fff; box-shadow: none; border-bottom: 1px solid #000; } html[data-theme="system7"] .taskbar > button:first-child { border: 0; border-radius: 0; background: #fff; } html[data-theme="system7"] .task { display: none; } html[data-theme="system7"] .tray { box-shadow: none; } html[data-theme="system7"] body { padding-top: 46px; } html[data-theme="system7"] .startmenu { top: 22px; bottom: auto; background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000; } html[data-theme="system7"] .side { display: none; } html[data-theme="system7"] .startmenu li button { border: 0; background: none; } html[data-theme="system7"] .startmenu li button:hover { background: #000; color: #fff; } /* ============================================================ NeXT (1990 workstation: greys and black) ============================================================ */ html[data-theme="next"], html[data-theme="next"] body { background: #4f4f4f; } html[data-theme="next"] body { font: 13px/1.45 Helvetica, "Helvetica Neue", Arial, sans-serif; color: #000; } html[data-theme="next"] .window { background: #aaaaaa; border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #555, 3px 3px 0 rgba(0,0,0,.5); padding: 0; max-width: 430px; } html[data-theme="next"] .title-bar { background: #000; padding: 3px 4px; justify-content: center; position: relative; } html[data-theme="next"] .title-bar-text { color: #fff; font-weight: bold; } html[data-theme="next"] .title-bar-controls { position: absolute; right: 4px; } html[data-theme="next"] .title-bar-controls button { width: 15px; height: 15px; background: #aaa; border: 0; box-shadow: inset 1px 1px #fff, inset -1px -1px #555; color: #000; } html[data-theme="next"] .menubar { background: #aaa; border-bottom: 1px solid #555; } html[data-theme="next"] .window-body { margin: 12px 14px; } html[data-theme="next"] .banner { background: #222; color: #fff; box-shadow: inset 1px 1px #000, inset -1px -1px #777; } html[data-theme="next"] .banner i { color: #bbb; } html[data-theme="next"] .logo { background: #000; color: #fff; transform: rotate(-12deg); box-shadow: 1px 1px 0 #fff; border: 0; } html[data-theme="next"] fieldset { border: 0; box-shadow: inset 1px 1px #555, inset -1px -1px #fff; padding: 10px 12px; } html[data-theme="next"] legend { color: #000; font-weight: bold; background: #aaa; padding: 0 4px; } html[data-theme="next"] .title-bar-text { max-width: calc(100% - 60px); } html[data-theme="next"] .note, html[data-theme="next"] .sunken-panel { background: #fff; box-shadow: inset 1px 1px #555, inset -1px -1px #ddd; } html[data-theme="next"] button { background: #aaa; border: 0; border-radius: 0; box-shadow: inset 1px 1px #fff, inset -1px -1px #000, inset -2px -2px #555; padding: 3px 16px; min-height: 24px; } html[data-theme="next"] button.default::after { content: " \21B5"; } html[data-theme="next"] button:not(:disabled):active { box-shadow: inset 1px 1px #000, inset -1px -1px #fff; background: #fff; } html[data-theme="next"] .status-bar-field { box-shadow: inset 1px 1px #555, inset -1px -1px #fff; } html[data-theme="next"] .ok { color: #000; font-weight: bold; } html[data-theme="next"] .foot { color: #ccc; } html[data-theme="next"] .taskbar { left: auto; right: 8px; top: 8px; bottom: auto; width: auto; height: auto; flex-direction: column; align-items: flex-end; background: transparent; box-shadow: none; gap: 6px; } html[data-theme="next"] #lfs-style-btn { margin: 0; position: fixed; right: 12px; bottom: 12px; } html[data-theme="next"] .taskbar > button:first-child { width: 56px; height: 56px; justify-content: center; background: #aaa; box-shadow: inset 1px 1px #fff, inset -1px -1px #000; border: 0; font-size: 0; } html[data-theme="next"] .taskbar > button:first-child .lf { width: 32px; height: 32px; font-size: 14px; line-height: 32px; background: #000; transform: rotate(-12deg); } html[data-theme="next"] .task, html[data-theme="next"] .tray { display: none; } html[data-theme="next"] .startmenu { left: auto; right: 72px; top: 8px; bottom: auto; background: #aaa; border: 1px solid #000; box-shadow: inset 1px 1px #fff; } html[data-theme="next"] .side { display: none; } html[data-theme="next"] .startmenu li button { border: 0; background: none; box-shadow: none; } html[data-theme="next"] .startmenu li button:hover { background: #fff; } /* ============================================================ TERMINAL (green phosphor) ============================================================ */ html[data-theme="terminal"], html[data-theme="terminal"] body { background: radial-gradient(ellipse at center, #062006 0%, #000 75%); background-attachment: fixed; } html[data-theme="terminal"] body { font: 15px/1.5 "Cascadia Mono", Consolas, "Courier New", monospace; color: #39ff6a; text-shadow: 0 0 5px rgba(57,255,106,.55); } html[data-theme="terminal"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px); } html[data-theme="terminal"] .window { background: rgba(0,10,0,.85); border: 1px solid #39ff6a; box-shadow: 0 0 18px rgba(57,255,106,.3); padding: 0; max-width: 520px; } html[data-theme="terminal"] .title-bar { background: #39ff6a; padding: 2px 8px; } html[data-theme="terminal"] .title-bar-text { color: #000; text-shadow: none; } html[data-theme="terminal"] .title-bar-text::before { content: "root@largefather:~$ "; } html[data-theme="terminal"] .title-bar-controls { display: none; } html[data-theme="terminal"] .menubar { display: none; } html[data-theme="terminal"] .window-body { margin: 14px 16px; } html[data-theme="terminal"] .banner, html[data-theme="terminal"] .note, html[data-theme="terminal"] .sunken-panel { background: transparent; box-shadow: none; border: 1px dashed #39ff6a; color: #39ff6a; } html[data-theme="terminal"] .banner i { color: #22b24a; } html[data-theme="terminal"] .logo { background: #39ff6a; color: #000; box-shadow: none; text-shadow: none; } html[data-theme="terminal"] fieldset { border: 1px dashed #39ff6a; padding: 8px 12px 10px; } html[data-theme="terminal"] legend { color: #39ff6a; } html[data-theme="terminal"] legend::before { content: "[ "; } html[data-theme="terminal"] legend::after { content: " ]"; } html[data-theme="terminal"] button { background: transparent; color: #39ff6a; border: 1px solid #39ff6a; box-shadow: none; border-radius: 0; text-shadow: inherit; padding: 2px 12px; } html[data-theme="terminal"] .buttons button::before { content: "[ "; } html[data-theme="terminal"] .buttons button::after { content: " ]"; } html[data-theme="terminal"] button.default, html[data-theme="terminal"] button:hover { background: #39ff6a; color: #000; text-shadow: none; } html[data-theme="terminal"] .status-bar-field { box-shadow: none; border-top: 1px solid #39ff6a; color: #39ff6a; } html[data-theme="terminal"] .ok { color: #b9ffc9; } html[data-theme="terminal"] svg { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(6); } html[data-theme="terminal"] .foot { color: #22b24a; } html[data-theme="terminal"] .foot::after { content: " \2588"; animation: lfs-blink 1s steps(1) infinite; } html[data-theme="terminal"] .taskbar { background: #000; box-shadow: none; border-top: 1px solid #39ff6a; } html[data-theme="terminal"] .task, html[data-theme="terminal"] .tray { background: transparent; box-shadow: none; border: 1px solid #39ff6a; color: #39ff6a; } html[data-theme="terminal"] .lf { background: #39ff6a; color: #000; } html[data-theme="terminal"] .startmenu { background: #000; border: 1px solid #39ff6a; box-shadow: none; } html[data-theme="terminal"] .side { background: #39ff6a; color: #000; } html[data-theme="terminal"] .startmenu li button:hover { background: #39ff6a; color: #000; } @keyframes lfs-blink { 50% { visibility: hidden; } } /* ============================================================ BROADSHEET (newspaper) ============================================================ */ html[data-theme="broadsheet"], html[data-theme="broadsheet"] body { background: #f3efe6; } html[data-theme="broadsheet"] body { font: 16px/1.55 Georgia, "Times New Roman", serif; color: #1b1b1b; } html[data-theme="broadsheet"] .window { background: #fbf9f3; border: 0; border-top: 4px double #1b1b1b; border-bottom: 1px solid #1b1b1b; box-shadow: none; padding: 0; max-width: 560px; } html[data-theme="broadsheet"] .title-bar { background: transparent; justify-content: center; padding: 10px 0 6px; border-bottom: 1px solid #1b1b1b; } html[data-theme="broadsheet"] .title-bar-text { color: #1b1b1b; font: italic 13px Georgia, serif; letter-spacing: .12em; text-transform: uppercase; } html[data-theme="broadsheet"] .title-bar-controls, html[data-theme="broadsheet"] .menubar { display: none; } html[data-theme="broadsheet"] .window-body { margin: 18px 22px; } html[data-theme="broadsheet"] .head { flex-direction: column; text-align: center; gap: 4px; } html[data-theme="broadsheet"] .head b { font: 700 30px/1.1 "Old English Text MT", "UnifrakturMaguntia", Georgia, serif; } html[data-theme="broadsheet"] .head > div:last-child { font-style: italic; color: #555; } html[data-theme="broadsheet"] .logo { display: none; } html[data-theme="broadsheet"] .banner { background: transparent; color: #1b1b1b; flex-direction: column; text-align: center; border-bottom: 3px double #1b1b1b; padding: 4px 0 12px; } html[data-theme="broadsheet"] .banner b { font: 700 34px/1.1 "Old English Text MT", "UnifrakturMaguntia", Georgia, serif; } html[data-theme="broadsheet"] .banner i { color: #555; } html[data-theme="broadsheet"] fieldset { border: 0; border-top: 1px solid #1b1b1b; padding: 10px 0 4px; } html[data-theme="broadsheet"] legend { font: 700 12px Georgia, serif; letter-spacing: .14em; text-transform: uppercase; padding: 0 8px 0 0; } html[data-theme="broadsheet"] .note { background: transparent; box-shadow: none; border-left: 3px solid #1b1b1b; padding: 2px 0 2px 12px; font-style: italic; } html[data-theme="broadsheet"] .sunken-panel { background: #fff; box-shadow: none; border: 1px solid #1b1b1b; } html[data-theme="broadsheet"] .sunken-panel img { filter: grayscale(1) contrast(1.1); } html[data-theme="broadsheet"] button { background: transparent; color: #1b1b1b; border: 1px solid #1b1b1b; border-radius: 0; box-shadow: none; padding: 6px 18px; font-variant: small-caps; letter-spacing: .06em; } html[data-theme="broadsheet"] button.default { background: #1b1b1b; color: #fbf9f3; } html[data-theme="broadsheet"] .status-bar { border-top: 1px solid #1b1b1b; } html[data-theme="broadsheet"] .status-bar-field { box-shadow: none; font: italic 12px Georgia, serif; color: #555; } html[data-theme="broadsheet"] .ok { color: #1b1b1b; font-weight: bold; } html[data-theme="broadsheet"] .foot { color: #555; font-style: italic; font-size: 13px; } html[data-theme="broadsheet"] svg { filter: grayscale(1); } html[data-theme="broadsheet"] .taskbar { left: auto; right: 16px; bottom: 16px; height: auto; background: transparent; box-shadow: none; padding: 0; } html[data-theme="broadsheet"] .taskbar > button:first-child, html[data-theme="broadsheet"] .task, html[data-theme="broadsheet"] .tray, html[data-theme="broadsheet"] .startmenu { display: none !important; } /* ============================================================ WINDOWS 3.1 (1992) ============================================================ */ html[data-theme="win31"], html[data-theme="win31"] body { background: #c0c0c0 repeating-conic-gradient(#a8a8a8 0 25%, #c0c0c0 0 50%) 0 0 / 4px 4px; } html[data-theme="win31"] body { font: bold 13px/1.5 "System", "Arial", sans-serif; color: #000; } html[data-theme="win31"] .window { background: #fff; border: 4px solid #c0c0c0; outline: 1px solid #000; box-shadow: inset 0 0 0 1px #000; padding: 1px; max-width: 440px; } html[data-theme="win31"] .title-bar { background: #000080; padding: 0; height: 22px; border-bottom: 1px solid #000; } html[data-theme="win31"] .title-bar::before { content: "\2014"; flex: none; width: 22px; height: 21px; display: flex; align-items: center; justify-content: center; background: #c0c0c0; color: #000; border-right: 1px solid #000; font-weight: bold; } html[data-theme="win31"] .title-bar-text { flex: 1; text-align: center; color: #fff; font-weight: bold; } html[data-theme="win31"] .title-bar-controls { height: 21px; } html[data-theme="win31"] .title-bar-controls button { width: 22px; height: 21px; background: #c0c0c0; border: 0; border-left: 1px solid #000; box-shadow: inset -1px -1px #808080, inset 1px 1px #fff; color: #000; font-size: 9px; } html[data-theme="win31"] .title-bar-controls button::before { content: "\25BC"; } html[data-theme="win31"] .title-bar-controls button:last-child::before { content: "\25B2"; } html[data-theme="win31"] .menubar { border-bottom: 1px solid #000; } html[data-theme="win31"] .window-body { margin: 12px 14px; } html[data-theme="win31"] .banner { background: #000080; color: #fff; } html[data-theme="win31"] .banner i { color: #c0c0c0; } html[data-theme="win31"] .logo { background: #fff; color: #000080; box-shadow: none; border: 1px solid #000; } html[data-theme="win31"] .head .logo { background: #000080; color: #fff; } html[data-theme="win31"] fieldset { border: 1px solid #000; padding: 8px 10px 10px; } html[data-theme="win31"] legend { background: #fff; padding: 0 4px; } html[data-theme="win31"] .note, html[data-theme="win31"] .sunken-panel { background: #fff; box-shadow: none; border: 1px solid #000; } html[data-theme="win31"] button { background: #c0c0c0; color: #000; border: 1px solid #000; border-radius: 3px; box-shadow: inset -2px -2px #808080, inset 2px 2px #fff; padding: 3px 16px; min-height: 26px; font-weight: bold; } html[data-theme="win31"] button.default { border-width: 2px; } html[data-theme="win31"] button:not(:disabled):active { box-shadow: inset 2px 2px #808080; } html[data-theme="win31"] .status-bar-field { box-shadow: none; border-top: 1px solid #000; font-weight: normal; } html[data-theme="win31"] .ok { color: #008000; } html[data-theme="win31"] .foot { color: #000; font-weight: normal; } html[data-theme="win31"] .taskbar { background: #c0c0c0; box-shadow: none; border-top: 1px solid #000; } html[data-theme="win31"] .taskbar > button:first-child, html[data-theme="win31"] .task { display: none; } html[data-theme="win31"] .tray { box-shadow: none; border: 1px solid #000; background: #fff; } html[data-theme="win31"] .startmenu { background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000; } html[data-theme="win31"] .side { display: none; } html[data-theme="win31"] .startmenu li button { border: 0; border-radius: 0; box-shadow: none; background: none; } html[data-theme="win31"] .startmenu li button:hover { background: #000080; color: #fff; } /* ============================================================ BeOS (yellow tabs, 1998) ============================================================ */ html[data-theme="beos"], html[data-theme="beos"] body { background: #336698; } html[data-theme="beos"] body { font: 12px/1.5 "Swis721 BT", Verdana, Geneva, sans-serif; color: #000; padding-top: 56px; } html[data-theme="beos"] .window { background: #d8d8d8; border: 1px solid #555; box-shadow: inset 1px 1px #fff, inset -1px -1px #999, 2px 2px 0 rgba(0,0,0,.25); padding: 0; max-width: 430px; overflow: visible; position: relative; } html[data-theme="beos"] .title-bar { position: absolute; left: -1px; bottom: 100%; max-width: 75%; background: linear-gradient(#ffe36b, #ffcb00); border: 1px solid #555; border-bottom: 0; padding: 4px 10px 4px 6px; box-shadow: inset 1px 1px #fff7c2; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; } html[data-theme="beos"] .title-bar-text { color: #000; font-weight: bold; } html[data-theme="beos"] .title-bar-controls button { width: 13px; height: 13px; background: linear-gradient(135deg, #fff7c2, #e0b000); border: 1px solid #806000; box-shadow: none; font-size: 0; } html[data-theme="beos"] .title-bar-controls button::before { content: none; } html[data-theme="beos"] .title-bar-controls button + button { display: none; } html[data-theme="beos"] .menubar { background: #e8e8e8; border-bottom: 1px solid #999; } html[data-theme="beos"] .window-body { margin: 12px 14px; } html[data-theme="beos"] .banner { background: linear-gradient(#4f86c6, #2c5d95); } html[data-theme="beos"] .logo { background: #fff; color: #2c5d95; box-shadow: 1px 1px 0 #555; border: 0; border-radius: 4px; } html[data-theme="beos"] .head .logo { background: #ffcb00; color: #000; border: 1px solid #806000; } html[data-theme="beos"] fieldset { border: 1px solid #999; box-shadow: 1px 1px 0 #fff, inset 1px 1px 0 #fff; padding: 8px 10px 10px; } html[data-theme="beos"] legend { background: #d8d8d8; padding: 0 4px; font-weight: bold; } html[data-theme="beos"] .note, html[data-theme="beos"] .sunken-panel { background: #fff; box-shadow: inset 1px 1px #999; border: 1px solid #bbb; } html[data-theme="beos"] button { background: linear-gradient(#fafafa, #d0d0d0); border: 1px solid #666; border-radius: 3px; box-shadow: inset 1px 1px #fff; padding: 3px 16px; min-height: 24px; } html[data-theme="beos"] button.default { outline: 2px solid #336698; outline-offset: 1px; } html[data-theme="beos"] .status-bar-field { box-shadow: none; border-top: 1px solid #999; } html[data-theme="beos"] .foot { color: #dce8f5; } html[data-theme="beos"] .taskbar { left: auto; right: 8px; top: 8px; bottom: auto; width: auto; height: auto; background: #d8d8d8; border: 1px solid #555; box-shadow: inset 1px 1px #fff; padding: 4px; } html[data-theme="beos"] .taskbar > button:first-child { border: 0; background: none; box-shadow: none; } html[data-theme="beos"] .task { display: none; } html[data-theme="beos"] .tray { box-shadow: inset 1px 1px #999; background: #eee; } html[data-theme="beos"] .startmenu { left: auto; right: 8px; top: 44px; bottom: auto; background: #d8d8d8; border: 1px solid #555; box-shadow: 2px 2px 0 rgba(0,0,0,.3); } html[data-theme="beos"] .side { display: none; } html[data-theme="beos"] .startmenu li button { border: 0; box-shadow: none; background: none; border-radius: 0; } html[data-theme="beos"] .startmenu li button:hover { background: #336698; color: #fff; } /* ============================================================ POCKET LCD (four-shade green handheld screen) ============================================================ */ html[data-theme="lcd"] { --l0: #0f380f; --l1: #306230; --l2: #8bac0f; --l3: #9bbc0f; } html[data-theme="lcd"], html[data-theme="lcd"] body { background: #c4c0b8; background-image: radial-gradient(circle at 50% 0%, #d6d2ca, #aaa59c); background-attachment: fixed; } html[data-theme="lcd"] body { font: 13px/1.6 "Pixelated MS Sans Serif", "Courier New", monospace; color: var(--l0); -webkit-font-smoothing: none; } html[data-theme="lcd"] .window { background: var(--l3); border: 14px solid #5c5c6e; border-radius: 10px 10px 40px 10px; box-shadow: inset 0 0 0 3px var(--l1), 0 10px 24px rgba(0,0,0,.35); padding: 6px; max-width: 440px; background-image: repeating-linear-gradient(rgba(15,56,15,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(15,56,15,.05) 0 1px, transparent 1px 3px); } html[data-theme="lcd"] .title-bar { background: var(--l0); padding: 3px 6px; } html[data-theme="lcd"] .title-bar-text { color: var(--l3); text-transform: uppercase; letter-spacing: .05em; } html[data-theme="lcd"] .title-bar-controls button { background: var(--l2); color: var(--l0); border: 0; box-shadow: none; } html[data-theme="lcd"] .menubar { color: var(--l1); } html[data-theme="lcd"] .window-body { margin: 10px 8px; } html[data-theme="lcd"] .banner { background: var(--l1); color: var(--l3); } html[data-theme="lcd"] .banner i { color: var(--l2); } html[data-theme="lcd"] .logo { background: var(--l0); color: var(--l3); box-shadow: none; border: 0; } html[data-theme="lcd"] fieldset { border: 2px solid var(--l1); padding: 8px 10px 10px; } html[data-theme="lcd"] legend { background: var(--l3); color: var(--l0); padding: 0 4px; text-transform: uppercase; } html[data-theme="lcd"] .note, html[data-theme="lcd"] .sunken-panel { background: var(--l2); color: var(--l0); box-shadow: none; border: 2px solid var(--l1); } html[data-theme="lcd"] .sunken-panel img { filter: grayscale(1) sepia(1) hue-rotate(40deg) saturate(2.5) brightness(.75) contrast(1.4); } html[data-theme="lcd"] svg { filter: grayscale(1) sepia(1) hue-rotate(40deg) saturate(3) brightness(.6); } html[data-theme="lcd"] button { background: var(--l2); color: var(--l0); border: 2px solid var(--l0); border-radius: 0; box-shadow: 2px 2px 0 var(--l1); padding: 3px 14px; text-transform: uppercase; } html[data-theme="lcd"] button.default { background: var(--l0); color: var(--l3); } html[data-theme="lcd"] button.default::before { content: "\25B6 "; } html[data-theme="lcd"] .status-bar-field { box-shadow: none; border-top: 2px solid var(--l1); color: var(--l1); } html[data-theme="lcd"] .ok { color: var(--l0); font-weight: bold; } html[data-theme="lcd"] .foot { color: #4a4a56; } html[data-theme="lcd"] .foot a.privacy-link { color: #2d2d38; } html[data-theme="lcd"] .taskbar { background: #5c5c6e; box-shadow: none; } html[data-theme="lcd"] .taskbar > button:first-child { background: #8b1e4f; color: #fff; border: 0; border-radius: 99px; box-shadow: 0 2px 0 #4a0f2a; } html[data-theme="lcd"] .taskbar > button:first-child .lf { background: transparent; } html[data-theme="lcd"] .task, html[data-theme="lcd"] .tray { background: var(--l3); color: var(--l0); box-shadow: none; border: 2px solid var(--l1); } html[data-theme="lcd"] .startmenu { background: var(--l3); border: 2px solid var(--l0); box-shadow: 3px 3px 0 var(--l1); } html[data-theme="lcd"] .side { background: var(--l0); color: var(--l3); } html[data-theme="lcd"] .startmenu li button { border: 0; box-shadow: none; background: none; text-transform: none; color: var(--l0); } html[data-theme="lcd"] .startmenu li button:hover { background: var(--l0); color: var(--l3); } /* ============================================================ GEOCITIES (the original 1990s homepage version) ============================================================ */ html[data-theme="geocities"], html[data-theme="geocities"] body { background-color: #000010; background-image: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 120px 80px, #ffd 50%, transparent 51%), radial-gradient(2px 2px at 60px 150px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 170px 20px, #aaf 50%, transparent 51%), radial-gradient(1px 1px at 90px 110px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 190px 170px, #ffa 50%, transparent 51%), radial-gradient(1px 1px at 40px 190px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 150px 140px, #faf 50%, transparent 51%); background-size: 200px 200px; } html[data-theme="geocities"] body { font: 17px/1.4 "Times New Roman", Times, serif; color: #fff; padding: 12px 8px 60px; cursor: crosshair; } html[data-theme="geocities"] .window { background: #c0c0c0; color: #000; border: 3px outset #fff; box-shadow: 6px 6px 0 rgba(0,0,0,.6); padding: 0; max-width: 760px; } html[data-theme="geocities"] .title-bar { background: linear-gradient(90deg, #000080, #1084d0); padding: 4px 6px; } html[data-theme="geocities"] .title-bar-text { color: #fff; font: bold 15px Tahoma, Arial, sans-serif; } html[data-theme="geocities"] .title-bar-controls button { background: #c0c0c0; border: 2px outset #fff; box-shadow: none; color: #000; } html[data-theme="geocities"] .window-body { margin: 0; padding: 12px 14px; font: 15px Tahoma, Arial, sans-serif; } html[data-theme="geocities"] .head, html[data-theme="geocities"] .banner, html[data-theme="geocities"] .msg svg, html[data-theme="geocities"] .menubar { display: none; } html[data-theme="geocities"] .msg p:first-child { font: bold 19px "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; } html[data-theme="geocities"] .msg p:first-child::before { content: "NEW!"; display: inline-block; background: #f00; color: #ff0; font: bold 11px Arial; padding: 1px 4px; transform: rotate(-8deg); margin-right: 8px; } html[data-theme="geocities"] fieldset { border: 2px groove #fff; padding: 8px 10px 10px; } html[data-theme="geocities"] legend { font-weight: bold; } html[data-theme="geocities"] .details { background: #808080; border: 2px inset #fff; padding: 2px; gap: 2px !important; grid-template-columns: 34% 1fr !important; } html[data-theme="geocities"] .details > * { background: #fff; padding: 5px 8px; } html[data-theme="geocities"] .details > span:nth-child(odd) { background: #dfdfdf; font-weight: bold; } html[data-theme="geocities"] #estimate { background: #000; border: 2px inset #fff; color: #0f0; font: 13px "Courier New", monospace; } html[data-theme="geocities"] #estimate legend { color: #0f0; background: #000; padding: 0 6px; } html[data-theme="geocities"] .note { background: #ffffcc; border: 2px dashed #f0f; box-shadow: none; } html[data-theme="geocities"] .sunken-panel { border: 4px ridge #c0c0c0; box-shadow: none; } html[data-theme="geocities"] .buttons { justify-content: center; flex-direction: column; align-items: center; } html[data-theme="geocities"] .buttons button { background: #c0c0c0; border: 2px outset #fff; box-shadow: none; } html[data-theme="geocities"] .buttons button.default { font: bold 24px "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; text-transform: uppercase; color: #000; background: #0f0; border: 5px outset #9f9; padding: 12px 26px; animation: lfs-pulse 1.2s ease-in-out infinite; } html[data-theme="geocities"] #dl::before { content: "\2B07 "; } html[data-theme="geocities"] #dl::after { content: " now!!! \2B07"; } html[data-theme="geocities"] #open { background: none; border: 0; color: #00f; text-decoration: underline; font-size: 13px; } html[data-theme="geocities"] .status-bar-field { box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; } html[data-theme="geocities"] .foot { color: #aaa; font-size: 13px; } html[data-theme="geocities"] .taskbar { background: #c0c0c0; } @keyframes lfs-pulse { 50% { background: #ff0; transform: scale(1.04); } } /* GeoCities extras injected by themes.js */ .geo-top { text-align: center; max-width: 760px; margin: 0 auto; } .geo-welcome { color: #0f0; font: 14px "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; } .geo-h1 { font: bold clamp(28px, 6.5vw, 46px)/1.25 "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; margin: 6px 0 2px; padding: 0 .1em .18em; background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #0ff, #00f, #f0f, #f00); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lfs-rainbow 4s linear infinite; filter: drop-shadow(3px 3px 0 #000080); } @keyframes lfs-rainbow { to { background-position: 200% 0; } } .geo-sub { color: #ff0; font: italic 17px "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; margin: 0 0 8px; } .geo-marquee { background: #000080; color: #ff0; border: 3px ridge #c0c0c0; font: bold 16px "Courier New", monospace; padding: 4px 0; margin: 8px 0 14px; overflow: hidden; white-space: nowrap; } .geo-marquee span { display: inline-block; padding-left: 100%; animation: lfs-marquee 18s linear infinite; } @keyframes lfs-marquee { to { transform: translateX(-100%); } } .geo-bottom { text-align: center; max-width: 760px; margin: 14px auto 0; color: #fff; } .geo-uc { color: #ff0; font: bold 17px "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; } .geo-uc svg { vertical-align: middle; } .geo-hr { border: 0; height: 6px; margin: 14px 0; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } .geo-ring { border: 3px double #ff0; padding: 8px; margin: 14px auto; max-width: 520px; background: rgba(0,0,128,.6); font: 15px "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; } html[data-theme="geocities"] .geo-ring button { font: bold 13px Tahoma, Arial, sans-serif; background: #c0c0c0; color: #000; border: 2px outset #fff; padding: 3px 8px; margin: 2px; min-width: 0; min-height: 0; box-shadow: none; } .geo-msg { min-height: 1.4em; color: #ff0; font-style: italic; } .geo-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; } .geo-badges div { width: 88px; height: 31px; box-sizing: border-box; border: 2px outset #ddd; font: bold 9px/1.1 Verdana, Arial, sans-serif; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px; } .geo-counter { display: inline-flex; gap: 2px; background: #000; padding: 3px; border: 2px inset #888; vertical-align: middle; } .geo-counter span { background: linear-gradient(#222, #000 50%, #222 50%, #111); color: #0f0; font: bold 18px "Courier New", monospace; padding: 2px 4px; } .geo-sparkle { position: fixed; pointer-events: none; font-size: 14px; z-index: 60; animation: lfs-fall .9s ease-out forwards; } @keyframes lfs-fall { to { transform: translateY(26px) scale(.3); opacity: 0; } } /* ============================================================ Style picker (same clean look in every theme) ============================================================ */ #lfs-style-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-left: auto; font: 600 13px/1 "Segoe UI", system-ui, sans-serif; color: #1f1b2e; background: #fff; border: 1.5px solid rgba(31,27,46,.35); border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.18); white-space: nowrap; text-shadow: none; letter-spacing: 0; text-transform: none; } #lfs-style-btn:hover { border-color: #1f1b2e; } #lfs-style-btn:focus-visible { outline: 3px solid #6d4aff; outline-offset: 2px; } html[data-theme="modern"] #lfs-style-btn { height: 40px; padding: 0 16px; font: 800 14px "LFS Nunito", system-ui, sans-serif; border: 2.5px solid #1f1b2e; box-shadow: 3px 3px 0 #1f1b2e; } #lfs-style-btn + .tray { margin-left: 4px !important; } #lfs-picker { position: fixed; right: 12px; bottom: 56px; z-index: 100; width: 290px; max-height: min(560px, calc(100vh - 80px)); overflow: auto; background: #fff; color: #1f1b2e; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08); padding: 10px; font: 14px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; text-shadow: none; letter-spacing: 0; text-transform: none; text-align: left; cursor: auto; } #lfs-picker[hidden] { display: none; } #lfs-picker * { font-family: inherit; font-size: inherit; text-shadow: none; letter-spacing: 0; text-transform: none; box-sizing: border-box; } #lfs-picker .h { font-weight: 700; font-size: 15px; padding: 4px 8px 8px; } #lfs-picker ul { list-style: none; margin: 0; padding: 0; } #lfs-picker li::before { content: none; } #lfs-picker li { margin: 0; padding: 0; } #lfs-picker li button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 10px; color: #1f1b2e; font-size: 14px; } #lfs-picker li button:hover, #lfs-picker li button:focus-visible { background: #f1eeff; } #lfs-picker li button[aria-checked="true"] { background: #ebe5ff; font-weight: 700; } #lfs-picker .sw { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(0,0,0,.25); } #lfs-picker .nm { flex: 1; } #lfs-picker .ds { display: block; font-size: 12px; color: #6b6480; font-weight: 400; } #lfs-picker .tick { visibility: hidden; color: #6d4aff; font-weight: 800; } #lfs-picker li button[aria-checked="true"] .tick { visibility: visible; } #lfs-picker .copy { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; text-align: center; background: #6d4aff; color: #fff; font-weight: 700; } #lfs-picker .copy:hover { background: #5a37f0; } #lfs-picker .copy:focus-visible { outline: 3px solid #ffc23d; outline-offset: 2px; } #lfs-picker .url { display: block; margin-top: 6px; padding: 0 4px; font-size: 11px; color: #6b6480; word-break: break-all; } #lfs-picker .actions { position: sticky; bottom: -10px; background: #fff; margin: 4px -10px -10px; padding: 4px 10px 10px; border-top: 1px solid #eee; } #lfs-picker li button { padding: 5px 8px; } html[data-theme] .window.wide { max-width: 620px; } /* ============================================================ Footer privacy link + one-time cookie notice (same in every look) ============================================================ */ .foot a.privacy-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } #lfs-notice { position: fixed; left: 12px; bottom: 44px; z-index: 90; max-width: 460px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; color: #1f1b2e; border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.08); font: 14px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; text-shadow: none; letter-spacing: 0; text-transform: none; text-align: left; } #lfs-notice * { font-family: inherit; font-size: inherit; text-shadow: none; letter-spacing: 0; text-transform: none; } #lfs-notice .txt { flex: 1 1 240px; } #lfs-notice .act { display: flex; align-items: center; gap: 12px; margin-left: auto; } #lfs-notice a { color: #5a37f0; text-decoration: underline; } #lfs-notice button { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 18px; border-radius: 10px; background: #6d4aff; color: #fff; font-weight: 700; } #lfs-notice button:hover { background: #5a37f0; } #lfs-notice button:focus-visible { outline: 3px solid #ffc23d; outline-offset: 2px; } html[data-theme="modern"] #lfs-notice { border: 2.5px solid #1f1b2e; box-shadow: 5px 5px 0 #1f1b2e; bottom: 16px; max-width: min(460px, calc(100vw - 230px)); } html[data-theme="system7"] #lfs-notice, html[data-theme="next"] #lfs-notice { bottom: 16px; } @media (max-width: 520px) { #lfs-notice, html[data-theme="modern"] #lfs-notice { left: 8px; right: 8px; max-width: none; bottom: 64px; } } /* ============================================================ POLISH PASS (5 Nov 2026): password boxes, themed notice + Style button, readability ============================================================ */ /* ---- password box ---- */ html[data-theme]:not([data-theme="win98"]) .pwform input { font: inherit; padding: 6px 8px; min-height: 30px; } html[data-theme="modern"] .pwform label { font-weight: 800; } html[data-theme="modern"] .pwform input { border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-size: 17px; background: #fff; box-shadow: inset 0 2px 0 rgba(31,27,46,.08); } html[data-theme="modern"] .pwform input:focus { outline: 3px solid var(--sun); outline-offset: 1px; } html[data-theme="modern"] .pwerr { color: #d43d2c; } html[data-theme="win31"] .pwform input, html[data-theme="system7"] .pwform input { border: 1px solid #000; border-radius: 0; background: #fff; box-shadow: none; } html[data-theme="platinum"] .pwform input, html[data-theme="beos"] .pwform input { border: 1px solid #555; box-shadow: inset 1px 1px #999; background: #fff; } html[data-theme="next"] .pwform input { border: 0; background: #fff; box-shadow: inset 1px 1px #555, inset -1px -1px #ddd; } html[data-theme="bliss"] .pwform input { border: 1px solid #7f9db9; background: #fff; } html[data-theme="aqua"] .pwform input { border: 1px solid #8f8f8f; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); } html[data-theme="aero"] .pwform input { border: 1px solid #6b8fb5; border-radius: 3px; background: rgba(255,255,255,.9); } html[data-theme="terminal"] .pwform input { background: #000; color: #39ff6a; border: 1px solid #39ff6a; caret-color: #39ff6a; text-shadow: inherit; } html[data-theme="terminal"] .pwerr { color: #ff5555; text-shadow: 0 0 5px rgba(255,85,85,.6); } html[data-theme="lcd"] .pwform input { background: var(--l2); color: var(--l0); border: 2px solid var(--l0); } html[data-theme="lcd"] .pwerr { color: var(--l0); } html[data-theme="broadsheet"] .pwform input { background: #fff; border: 0; border-bottom: 2px solid #1b1b1b; border-radius: 0; font-size: 18px; } html[data-theme="broadsheet"] .pwerr { color: #8b0000; font-style: italic; font-weight: normal; } html[data-theme="geocities"] .pwform input { border: 3px inset #f0f; background: #ffffcc; font: 18px "Comic Sans MS", "Comic Neue", cursive; } html[data-theme="geocities"] .pwform label { font: bold 16px "Comic Sans MS", "Comic Neue", cursive; } /* ---- default look: keep the status labels on one line ---- */ html[data-theme="modern"] .kv > span:nth-child(odd) { white-space: nowrap; } /* ---- Frutiger Aero: readable footer ---- */ html[data-theme="aero"] .foot { display: table; margin: 12px auto 0; padding: 4px 12px; color: #0d3a66; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95); border-radius: 12px; text-shadow: none; box-shadow: 0 2px 8px rgba(0,40,90,.25); backdrop-filter: blur(8px); } html[data-theme="aero"] .foot a.privacy-link { color: #0a5ea8; } /* ---- GeoCities: make every button chunky and readable ---- */ html[data-theme="geocities"] .buttons button:not(.default), html[data-theme="geocities"] .overlay .buttons button { font: bold 16px "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; color: #000; background: #ff0; border: 3px outset #ffff99; padding: 4px 16px; min-width: 0; text-transform: none; } html[data-theme="geocities"] #open { background: none; border: 0; color: #00f; text-decoration: underline; font: 14px Tahoma, Arial, sans-serif; padding: 0; } html[data-theme="geocities"] .overlay .window { max-width: 360px; } /* ---- Broadsheet: a proper masthead ---- */ html[data-theme="broadsheet"] .head b, html[data-theme="broadsheet"] .banner b { font-family: "Old English Text MT", "UnifrakturMaguntia", "Times New Roman", Georgia, serif !important; font-size: 34px !important; font-weight: 900; line-height: 1.05; letter-spacing: -.01em; } html[data-theme="broadsheet"] .msg p:first-child { font-size: 20px !important; } html[data-theme="broadsheet"] .title-bar-text { font-size: 12px !important; } html[data-theme="broadsheet"] legend { font-size: 12px !important; } html[data-theme="broadsheet"] .head > div:last-child::after, html[data-theme="broadsheet"] .banner > div:last-child::after { content: "London Edition \00B7 Price: Free \00B7 Est. 2026"; display: block; margin-top: 8px; padding: 4px 0; border-top: 1px solid #1b1b1b; border-bottom: 1px solid #1b1b1b; font: italic 12px Georgia, serif; letter-spacing: .08em; color: #333; text-transform: uppercase; } html[data-theme="broadsheet"] .msg p:first-child { font: 700 20px Georgia, serif; } html[data-theme="broadsheet"] .msg p:first-child::first-letter { font-size: 1.6em; float: left; line-height: .9; margin: 2px 4px 0 0; } /* ---- Pocket LCD: handheld bezel details ---- */ html[data-theme="lcd"] .window { position: relative; margin-bottom: 48px; } html[data-theme="lcd"] .window::after { content: "LF POCKET \00B7 DOT MATRIX"; position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; font: italic bold 13px Arial, sans-serif; letter-spacing: .12em; color: #2b2f7a; } html[data-theme="lcd"] .window::before { content: ""; position: absolute; left: -9px; top: 46px; width: 8px; height: 8px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 6px #ff2a2a, 0 0 12px rgba(255,42,42,.6); } /* ============================================================ Cookie notice: dressed to match each look ============================================================ */ /* Windows looks: classic yellow balloon tip */ html[data-theme="win98"] #lfs-notice, html[data-theme="win31"] #lfs-notice, html[data-theme="bliss"] #lfs-notice, html[data-theme="aero"] #lfs-notice { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 6px; box-shadow: 2px 2px 4px rgba(0,0,0,.35); font: 12px Tahoma, "Segoe UI", sans-serif; padding: 10px 12px; } html[data-theme="win98"] #lfs-notice button, html[data-theme="win31"] #lfs-notice button, html[data-theme="bliss"] #lfs-notice button, html[data-theme="aero"] #lfs-notice button { background: #c0c0c0; color: #000; border-radius: 0; padding: 3px 16px; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; font-weight: normal; } html[data-theme="win98"] #lfs-notice a, html[data-theme="win31"] #lfs-notice a, html[data-theme="bliss"] #lfs-notice a, html[data-theme="aero"] #lfs-notice a { color: #0000cc; } html[data-theme="bliss"] #lfs-notice button, html[data-theme="aero"] #lfs-notice button { border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ecebe6 86%, #d6d0c5); box-shadow: none; } /* Mac / workstation looks */ html[data-theme="platinum"] #lfs-notice, html[data-theme="system7"] #lfs-notice, html[data-theme="next"] #lfs-notice, html[data-theme="beos"] #lfs-notice, html[data-theme="aqua"] #lfs-notice { background: #fff; color: #000; border: 1px solid #000; border-radius: 0; box-shadow: 2px 2px 0 #000; font: 12px Geneva, Verdana, sans-serif; } html[data-theme="aqua"] #lfs-notice { border-radius: 10px; border-color: #999; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-family: "Lucida Grande", Verdana, sans-serif; } html[data-theme="platinum"] #lfs-notice button, html[data-theme="system7"] #lfs-notice button, html[data-theme="beos"] #lfs-notice button { background: #fff; color: #000; border: 1px solid #000; border-radius: 8px; outline: 2px solid #000; outline-offset: 1px; font-weight: normal; padding: 2px 14px; } html[data-theme="next"] #lfs-notice { background: #aaa; } html[data-theme="next"] #lfs-notice button { background: #aaa; color: #000; border-radius: 0; box-shadow: inset 1px 1px #fff, inset -1px -1px #000; font-weight: normal; } html[data-theme="aqua"] #lfs-notice button { border-radius: 12px; background: linear-gradient(#cfe6ff, #6fb1fb 50%, #3a8ef0 51%, #8cc5ff); color: #001a3a; border: 1px solid #2a62a8; } html[data-theme="platinum"] #lfs-notice a, html[data-theme="system7"] #lfs-notice a, html[data-theme="next"] #lfs-notice a, html[data-theme="beos"] #lfs-notice a { color: #000; } /* Terminal, LCD, Broadsheet, GeoCities */ html[data-theme="terminal"] #lfs-notice { background: #000; color: #39ff6a; border: 1px solid #39ff6a; border-radius: 0; box-shadow: 0 0 14px rgba(57,255,106,.35); font: 14px Consolas, "Courier New", monospace; } html[data-theme="terminal"] #lfs-notice a { color: #b9ffc9; } html[data-theme="terminal"] #lfs-notice button { background: #39ff6a; color: #000; border-radius: 0; } html[data-theme="lcd"] #lfs-notice { background: #9bbc0f; color: #0f380f; border: 3px solid #306230; border-radius: 0; box-shadow: 3px 3px 0 #0f380f; font: 13px "Pixelated MS Sans Serif", monospace; } html[data-theme="lcd"] #lfs-notice a { color: #0f380f; } html[data-theme="lcd"] #lfs-notice button { background: #0f380f; color: #9bbc0f; border-radius: 0; } html[data-theme="broadsheet"] #lfs-notice { background: #fbf9f3; color: #1b1b1b; border: 0; border-top: 3px double #1b1b1b; border-bottom: 1px solid #1b1b1b; border-radius: 0; box-shadow: 0 6px 18px rgba(0,0,0,.15); font: italic 14px Georgia, serif; } html[data-theme="broadsheet"] #lfs-notice a { color: #1b1b1b; } html[data-theme="broadsheet"] #lfs-notice button { background: #1b1b1b; color: #fbf9f3; border-radius: 0; font-style: normal; font-variant: small-caps; } html[data-theme="geocities"] #lfs-notice { background: #000033; color: #ff0; border: 3px ridge #f0f; border-radius: 0; box-shadow: none; font: 14px "Comic Sans MS", "Comic Neue", cursive; } html[data-theme="geocities"] #lfs-notice a { color: #0ff; } html[data-theme="geocities"] #lfs-notice button { background: #0f0; color: #000; border: 3px outset #9f9; border-radius: 0; } html[data-theme="geocities"] #lfs-notice .txt b::before { content: "\1F36A "; } /* ============================================================ Style button: blend into each look's taskbar ============================================================ */ html[data-theme="win98"] #lfs-style-btn, html[data-theme="win31"] #lfs-style-btn, html[data-theme="platinum"] #lfs-style-btn, html[data-theme="beos"] #lfs-style-btn, html[data-theme="next"] #lfs-style-btn { height: 22px; padding: 0 8px; border: 0; border-radius: 0; background: #c0c0c0; color: #000; font: 11px Tahoma, "MS Sans Serif", sans-serif; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; } html[data-theme="platinum"] #lfs-style-btn, html[data-theme="beos"] #lfs-style-btn { border: 1px solid #555; border-radius: 4px; background: linear-gradient(#fff, #d0d0d0); box-shadow: none; } html[data-theme="next"] #lfs-style-btn { background: #aaa; box-shadow: inset 1px 1px #fff, inset -1px -1px #000; } html[data-theme="system7"] #lfs-style-btn { height: 20px; padding: 0 8px; border: 0; border-radius: 0; box-shadow: none; background: #fff; color: #000; font: bold 12px "Pixelated MS Sans Serif", Geneva, sans-serif; } html[data-theme="system7"] #lfs-style-btn:hover { background: #000; color: #fff; } html[data-theme="bliss"] #lfs-style-btn { height: 24px; border: 1px solid #1e52b7; border-radius: 3px; background: #3c81f3; color: #fff; font: 12px Tahoma, sans-serif; box-shadow: none; } html[data-theme="terminal"] #lfs-style-btn { height: 24px; border: 1px solid #39ff6a; border-radius: 0; background: #000; color: #39ff6a; font: 13px Consolas, "Courier New", monospace; box-shadow: none; } html[data-theme="lcd"] #lfs-style-btn { height: 24px; border: 2px solid #306230; border-radius: 0; background: #9bbc0f; color: #0f380f; font: 12px "Pixelated MS Sans Serif", monospace; box-shadow: none; } html[data-theme="geocities"] #lfs-style-btn { height: 24px; border: 3px outset #ff0; border-radius: 0; background: #ff0; color: #000; font: bold 13px "Comic Sans MS", "Comic Neue", cursive; box-shadow: none; } html[data-theme="broadsheet"] #lfs-style-btn { border: 1px solid #1b1b1b; border-radius: 0; background: #fbf9f3; color: #1b1b1b; font: italic 13px Georgia, serif; box-shadow: 3px 3px 0 #1b1b1b; } html[data-theme="aqua"] #lfs-style-btn { height: 26px; border: 1px solid #8f8f8f; background: linear-gradient(#fff, #e2e2e2 50%, #d4d4d4 51%, #ececec); font: 12px "Lucida Grande", Verdana, sans-serif; box-shadow: none; } html[data-theme="aero"] #lfs-style-btn { height: 26px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.15); color: #fff; font: 12px "Segoe UI", sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.4); } /* ============================================================ PHONES: only the pixel-font looks need the page enlarged; others use real sizes ============================================================ */ @media (max-width: 520px) { html[data-theme]:not([data-theme="win98"]):not([data-theme="system7"]):not([data-theme="lcd"]):not([data-theme="modern"]) body { zoom: 1 !important; padding-left: 10px; padding-right: 10px; } /* BeOS + NeXT: their top-right panels move to a slim bottom bar so they never cover the window */ html[data-theme="beos"] body { padding-top: 40px; } html[data-theme="beos"] .taskbar, html[data-theme="next"] .taskbar { top: auto; bottom: 0; left: 0; right: 0; width: auto; flex-direction: row; justify-content: flex-end; padding: 4px 8px; border: 0; border-top: 1px solid #555; } html[data-theme="next"] .taskbar > button:first-child { display: none; } html[data-theme="next"] #lfs-style-btn { position: static; } html[data-theme="beos"] .startmenu, html[data-theme="next"] .startmenu { top: auto; bottom: 40px; } /* Broadsheet: a masthead that fits a phone */ html[data-theme="broadsheet"] .head b, html[data-theme="broadsheet"] .banner b { font-size: 26px !important; } /* Aqua: dock fits the screen */ html[data-theme="aqua"] .taskbar { width: calc(100vw - 16px); } html[data-theme="aqua"] .task { display: none; } } /* default look: confetti pieces */ .lfs-confetti { position: fixed; z-index: 150; width: 9px; height: 13px; margin: -6px 0 0 -4px; pointer-events: none; border: 1.5px solid #1f1b2e; animation: lfs-confetti 1.05s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes lfs-confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--rot)); opacity: 0; } } /* default look: friendlier hover on the logo */ html[data-theme="modern"] .logo { transition: transform .25s cubic-bezier(.3,1.6,.5,1); } html[data-theme="modern"] .head:hover .logo, html[data-theme="modern"] .banner:hover .logo { transform: rotate(6deg) scale(1.06); } @media (prefers-reduced-motion: reduce) { html[data-theme] *, .geo-h1, .geo-marquee span { animation: none !important; } } /* centred title bars with buttons on the left: reserve room on both sides so long names never overlap */ html[data-theme="platinum"] .title-bar { padding-left: 52px; padding-right: 52px; } html[data-theme="aqua"] .title-bar { padding-left: 72px; padding-right: 72px; } html[data-theme="system7"] .title-bar { padding-left: 36px; padding-right: 36px; } html[data-theme="platinum"] .title-bar-text, html[data-theme="aqua"] .title-bar-text, html[data-theme="system7"] .title-bar-text { margin: 0; max-width: 100%; }/* small square title buttons in System 7 / Platinum / BeOS (beat the shared 18px rule) */ html[data-theme="system7"] .title-bar-controls button, html[data-theme="beos"] .title-bar-controls button { width: 11px !important; height: 11px !important; } html[data-theme="platinum"] .title-bar-controls button { width: 13px !important; height: 13px !important; } html[data-theme="system7"] .title-bar-controls button + button, html[data-theme="beos"] .title-bar-controls button + button { display: none !important; }