diff --git a/src/app/globals.css b/src/app/globals.css index 9617f2e..94deaea 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -50,6 +50,11 @@ img { padding: 0 0 40px; /* room for the fixed taskbar */ } +/* Opt-in decorative background field (themes enable it). */ +.rb-bg { + display: none; +} + .rb-window { flex: 1; display: flex; diff --git a/src/components/Shell.tsx b/src/components/Shell.tsx index 25c98a0..9a053bd 100644 --- a/src/components/Shell.tsx +++ b/src/components/Shell.tsx @@ -1,5 +1,5 @@ import Link from "next/link"; -import type { ReactNode } from "react"; +import type { CSSProperties, ReactNode } from "react"; import { THEMES, type ThemeId } from "@/themes/registry"; import { getSettings } from "@/lib/settings"; import { isAdmin } from "@/lib/auth"; @@ -29,6 +29,30 @@ export default async function Shell({ return (
+ {/* Decorative background field. Hidden by default; themes opt in + (PS2 uses it for the BIOS bobbing-cube field). */} +
+
+ {Array.from({ length: 15 * 13 }).map((_, i) => { + // deterministic pseudo-random thickness + bob phase per cube + const h = 34 + ((i * 53) % 78); + const delay = (((i * 37) % 100) / 100) * 4; + return ( + + ); + })} +
+
+
diff --git a/src/themes/nds.css b/src/themes/nds.css index cfaf588..91b9665 100644 --- a/src/themes/nds.css +++ b/src/themes/nds.css @@ -1,36 +1,38 @@ /* ============================================================ Theme: Nintendo DS — scoped to [data-theme="nds"] - The original DS firmware menu: pale grid "graph paper" - backdrop, white tiles with thick rounded charcoal borders, - glossy cyan selection, and calendar pastels (red Sunday, - blue Saturday). + The real 2004 DS firmware menu: white graph-paper grid + backdrop, SQUARE tiles with thick dark double-borders, + brushed-metal status/hinge bars, silver icon blocks, and a + blue dashed selection cursor. Calendar pastels on tags. ============================================================ */ [data-theme="nds"] { - --d-cyan: #1ba1c4; - --d-cyan-lt: #8fdcef; - --d-cyan-dk: #1685a3; - --d-ink: #3a4750; - --d-line: #4a565e; /* thick tile border */ - --d-paper: #eef1f3; /* grid backdrop */ - --d-grid: #dbe1e5; /* grid lines */ - --d-red: #d4506a; /* Sunday */ - --d-blue: #3f7fd0; /* Saturday */ - font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif; + --d-ink: #2b3035; /* near-black menu text */ + --d-sub: #6f7b83; /* gray secondary text */ + --d-edge: #2f3437; /* thick tile outline (near-black) */ + --d-sel: #2f6fc4; /* dashed blue selection */ + --d-sel-lt: #d3e6f9; /* selection fill */ + --d-red: #d4506a; /* calendar Sunday */ + --d-sat: #3f7fd0; /* calendar Saturday */ + /* brushed metal stops */ + --m-tile: linear-gradient(180deg, #ffffff 0%, #eef1f3 48%, #dde3e7 100%); + --m-bar: linear-gradient(180deg, #dfe5e9 0%, #bdc7cd 50%, #a6b1b8 100%); + --m-icon: linear-gradient(180deg, #f6f8f9 0%, #ccd3d8 55%, #b0b9bf 100%); + font-family: Tahoma, Geneva, "Segoe UI", sans-serif; font-size: 14px; color: var(--d-ink); } -/* pale graph-paper background like the DS menu canvas */ +/* white graph-paper grid — the DS menu canvas */ [data-theme="nds"] body { - background-color: var(--d-paper); - background-image: linear-gradient(var(--d-grid) 1px, transparent 1px), - linear-gradient(90deg, var(--d-grid) 1px, transparent 1px); - background-size: 22px 22px; + background-color: #fbfcfc; + background-image: linear-gradient(#dde2e6 1px, transparent 1px), + linear-gradient(90deg, #dde2e6 1px, transparent 1px); + background-size: 34px 34px; background-attachment: fixed; } -/* the window is the menu canvas */ +/* window is just the canvas; tiles float on the grid */ [data-theme="nds"] .rb-window { background: transparent; border: none; @@ -39,189 +41,236 @@ box-shadow: none; } -/* top status strip: User name, clock, date, battery */ +/* ---- top status bar: dark brushed blue-gray strip ---- */ [data-theme="nds"] .rb-titlebar { - height: 34px; - padding: 0 14px; - border-radius: 12px; - background: linear-gradient(180deg, #fbfdfe, #e6ecef); - border: 2px solid var(--d-line); - color: var(--d-ink); + height: 30px; + padding: 0 12px; + border-radius: 0; + background: linear-gradient(180deg, #8493a0, #596b77 55%, #4e5f6a); + border: 1px solid #3c4a54; + color: #fff; font-weight: bold; - letter-spacing: 0.3px; - text-shadow: none; + letter-spacing: 0.4px; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); } [data-theme="nds"] .rb-titlebar-icon { - width: 16px; - height: 12px; - border-radius: 2px; - background: linear-gradient(180deg, #b7f0a0, #7fc964); - box-shadow: inset 0 0 0 1.5px var(--d-line); + /* green battery / cart chip */ + width: 18px; + height: 11px; + border-radius: 1px; + background: linear-gradient(180deg, #b7f0a0, #5fb049); + box-shadow: inset 0 0 0 1.5px #2f6a23, 0 0 0 1px rgba(0, 0, 0, 0.3); } [data-theme="nds"] .rb-titlebar-buttons { display: none; } -/* menubar = white rounded tile holding the chunky touch buttons */ +/* ---- menubar = brushed-metal hinge band with striations ---- */ [data-theme="nds"] .rb-menubar { - margin-top: 8px; - padding: 10px 12px; - border-radius: 14px; - background: #ffffff; - border: 2px solid var(--d-line); + margin-top: 6px; + padding: 8px 10px; + border-radius: 0; + background: var(--m-bar); + background-image: repeating-linear-gradient( + 180deg, + rgba(255, 255, 255, 0.35) 0 1px, + transparent 1px 3px + ), + var(--m-bar); + border: 1px solid #7a858c; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), + inset 0 -1px 0 rgba(0, 0, 0, 0.18); } + +/* square metallic touch buttons */ [data-theme="nds"] .rb-menu-link { text-decoration: none; - padding: 6px 16px; - border-radius: 18px; + padding: 5px 14px; + border-radius: 2px; color: var(--d-ink); font-weight: bold; - background: linear-gradient(180deg, #ffffff, #e3ebef); - border: 2px solid var(--d-line); - transition: all 0.12s; + background: var(--m-tile); + border: 2px solid var(--d-edge); + box-shadow: inset 0 1px 0 #fff; + transition: none; } +/* DS selection = blue dashed cursor + pale fill */ [data-theme="nds"] .rb-menu-link:hover { - background: linear-gradient(180deg, #6fd0e8, var(--d-cyan)); - color: #fff; - border-color: var(--d-cyan-dk); - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background: var(--d-sel-lt); + color: var(--d-sel); + outline: 2px dashed var(--d-sel); + outline-offset: 1px; } [data-theme="nds"] .rb-switcher-label { font-weight: bold; font-size: 12px; - color: var(--d-cyan-dk); + color: var(--d-ink); } [data-theme="nds"] .rb-switcher-select { - font: 13px "Trebuchet MS", sans-serif; - border: 2px solid var(--d-line); - border-radius: 16px; - padding: 4px 12px; - background: #fff; + font: 13px Tahoma, sans-serif; + border: 2px solid var(--d-edge); + border-radius: 2px; + padding: 3px 8px; + background: var(--m-tile); color: var(--d-ink); } -/* the main content = big white touch-screen tile */ +/* ---- content = transparent so the grid shows through ---- */ [data-theme="nds"] .rb-content { - background: #ffffff; - margin: 8px 0; - padding: 22px 24px; - border-radius: 16px; - border: 2px solid var(--d-line); - box-shadow: inset 0 0 0 4px #f3f7f9; + background: transparent; + margin: 6px 0; + padding: 16px 2px; + border-radius: 0; + border: none; + box-shadow: none; } [data-theme="nds"] .rb-statusbar { - padding: 6px 12px; + padding: 5px 10px; font-size: 11px; - color: #71808a; + color: var(--d-sub); } -/* bottom strip = rounded tile dock holding the launch buttons */ +/* ---- bottom dock = brushed-metal band ---- */ [data-theme="nds"] .rb-taskbar { - height: 40px; - margin-top: 8px; - border-radius: 14px; - background: linear-gradient(180deg, #fbfdfe, #e6ecef); - border: 2px solid var(--d-line); + height: 36px; + margin-top: 6px; + border-radius: 0; + background: var(--m-bar); + background-image: repeating-linear-gradient( + 180deg, + rgba(255, 255, 255, 0.35) 0 1px, + transparent 1px 3px + ), + var(--m-bar); + border: 1px solid #7a858c; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), + inset 0 -1px 0 rgba(0, 0, 0, 0.18); } [data-theme="nds"] .rb-start { display: flex; align-items: center; gap: 7px; - height: 28px; - padding: 0 16px; - border: 2px solid var(--d-cyan-dk); - border-radius: 16px; - background: linear-gradient(180deg, #6fd0e8, var(--d-cyan)); - color: #fff; - font: bold 13px "Trebuchet MS", sans-serif; + height: 26px; + padding: 0 14px; + border: 2px solid var(--d-edge); + border-radius: 2px; + background: var(--d-sel-lt); + color: var(--d-sel); + font: bold 13px Tahoma, sans-serif; cursor: pointer; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + outline: 2px dashed var(--d-sel); + outline-offset: 1px; + text-shadow: none; } [data-theme="nds"] .rb-start-logo { - width: 13px; - height: 13px; - border-radius: 4px; - background: linear-gradient(180deg, #fff, var(--d-cyan-lt)); + /* little DS console chip */ + width: 16px; + height: 12px; + border-radius: 1px; + background: var(--m-icon); + box-shadow: inset 0 0 0 1px #6a737a; } [data-theme="nds"] .rb-task { display: flex; align-items: center; gap: 7px; - height: 28px; - padding: 0 14px; - border: 2px solid var(--d-line); - border-radius: 16px; - background: linear-gradient(180deg, #ffffff, #e3ebef); + height: 26px; + padding: 0 12px; + border: 2px solid var(--d-edge); + border-radius: 2px; + background: var(--m-tile); + box-shadow: inset 0 1px 0 #fff; color: var(--d-ink); font-weight: bold; font-size: 13px; cursor: default; } [data-theme="nds"] .rb-task-active { - background: linear-gradient(180deg, #6fd0e8, var(--d-cyan)); - color: #fff; - border-color: var(--d-cyan-dk); + background: var(--d-sel-lt); + color: var(--d-sel); + outline: 2px dashed var(--d-sel); + outline-offset: 1px; } [data-theme="nds"] .rb-task-icon { - width: 11px; - height: 11px; - border-radius: 3px; - background: var(--d-cyan-lt); + width: 12px; + height: 12px; + border-radius: 1px; + background: var(--m-icon); + box-shadow: inset 0 0 0 1px #6a737a; } [data-theme="nds"] .rb-clock { color: var(--d-ink); font-weight: bold; font-size: 13px; - padding: 0 14px; + padding: 0 12px; } +/* ---- page heading ---- */ [data-theme="nds"] .rb-page-title { margin: 0 0 4px; - font-size: 26px; + font-size: 24px; font-weight: bold; - color: var(--d-cyan-dk); + color: var(--d-ink); } [data-theme="nds"] .rb-page-sub { - margin: 0 0 18px; - color: #71808a; + margin: 0 0 16px; + color: var(--d-sub); } -/* post cards = white menu tiles with the signature thick border */ +/* ---- post cards = square DS launch tiles with silver icon ---- */ [data-theme="nds"] .rb-post-card { - border: 2px solid var(--d-line); - border-radius: 14px; - padding: 16px 18px; - background: #ffffff; - box-shadow: inset 0 0 0 3px #f3f7f9; - transition: box-shadow 0.18s, transform 0.18s; + position: relative; + border: 2px solid var(--d-edge); + border-radius: 2px; + padding: 14px 16px 14px 84px; /* room for the icon block */ + min-height: 72px; + background: var(--m-tile); + box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.5); + transition: none; +} +/* the brushed-silver icon square on the left of every tile */ +[data-theme="nds"] .rb-post-card::before { + content: ""; + position: absolute; + left: 8px; + top: 8px; + bottom: 8px; + width: 60px; + background: var(--m-icon); + border: 1px solid #6a737a; + border-radius: 1px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); } [data-theme="nds"] .rb-post-card:hover { - box-shadow: inset 0 0 0 3px #e0f3f9, 0 5px 16px rgba(27, 161, 196, 0.28); - transform: translateY(-2px); - border-color: var(--d-cyan-dk); + outline: 2px dashed var(--d-sel); + outline-offset: 2px; } [data-theme="nds"] .rb-post-card-title a { - color: var(--d-cyan-dk); + color: var(--d-ink); text-decoration: none; font-weight: bold; } +[data-theme="nds"] .rb-post-card-title a:hover { + color: var(--d-sel); +} [data-theme="nds"] .rb-post-date { font-size: 12px; - color: #93a0a8; + color: var(--d-sub); } +/* tags = tiny square calendar-pastel chips */ [data-theme="nds"] .rb-tag { font-size: 11px; - background: #e4f4f9; - border: 1.5px solid var(--d-cyan-lt); - border-radius: 12px; - padding: 1px 9px; - color: var(--d-cyan-dk); + background: var(--d-sel-lt); + border: 1.5px solid var(--d-sat); + border-radius: 2px; + padding: 1px 7px; + color: #1f5aa6; font-weight: bold; } [data-theme="nds"] .rb-readmore, [data-theme="nds"] .rb-back { - color: var(--d-cyan-dk); + color: var(--d-sel); text-decoration: none; font-weight: bold; font-size: 13px; @@ -230,33 +279,40 @@ display: inline-block; margin-bottom: 12px; } + +/* ---- article view ---- */ [data-theme="nds"] .rb-article-title { - color: var(--d-cyan-dk); + color: var(--d-ink); font-weight: bold; margin: 0 0 8px; } [data-theme="nds"] .rb-prose { line-height: 1.7; + background: var(--m-tile); + border: 2px solid var(--d-edge); + border-radius: 2px; + padding: 16px 18px; + box-shadow: inset 0 1px 0 #fff; } [data-theme="nds"] .rb-prose a { - color: var(--d-cyan-dk); + color: var(--d-sel); } [data-theme="nds"] .rb-prose code { - background: #e4f4f9; - border: 1px solid var(--d-cyan-lt); - border-radius: 6px; + background: #eef2f4; + border: 1px solid #9aa4ab; + border-radius: 2px; padding: 0 5px; font-family: "Courier New", monospace; } [data-theme="nds"] .rb-prose blockquote { - border-left: 4px solid var(--d-cyan); + border-left: 4px solid var(--d-sel); margin: 12px 0; padding: 6px 14px; - background: #eef7fa; - border-radius: 0 10px 10px 0; + background: #eef5fc; + border-radius: 0; } [data-theme="nds"] .rb-prose h1, [data-theme="nds"] .rb-prose h2, [data-theme="nds"] .rb-prose h3 { - color: var(--d-cyan-dk); + color: var(--d-ink); } diff --git a/src/themes/ps1.css b/src/themes/ps1.css index 12ef986..56bc6d4 100644 --- a/src/themes/ps1.css +++ b/src/themes/ps1.css @@ -1,49 +1,110 @@ /* ============================================================ Theme: PlayStation 1 — scoped to [data-theme="ps1"] - The gray BIOS shell: cool charcoal gradient, soft gray - panels, blocky understated type. Memory-card-manager calm. + Not the calm BIOS shell — the GAME. Late-90s real-time 3D: + no perspective correction (affine texture swim), unfiltered + polygons with jagged seams, low color depth faked with + ordered dithering on every surface. Murky fog palette, + chunky pixelated edges, vertices that won't sit still. ============================================================ */ [data-theme="ps1"] { - --p1-bg1: #3a4351; - --p1-bg2: #1c222c; - --p1-panel: #c7ccd4; - --p1-panel-dk: #9aa1ad; - --p1-ink: #2a2f38; - --p1-accent: #6b7585; + /* Murky low-bit polygon palette — fogged blue-black void, + CD-startup diamond magenta/cyan, dirty parchment UI. */ + --p1-void1: #1a2230; + --p1-void2: #07090f; + --p1-fog: #3b4a63; + --p1-panel: #b9b29c; /* dirty unfiltered "texture" beige */ + --p1-panel-dk: #837c66; + --p1-ink: #20242c; + --p1-mag: #c0307a; /* startup diamond */ + --p1-cyan: #2f9fb3; + --p1-seam: #efe9d6; /* bright untextured polygon edge */ font-family: "Verdana", Geneva, Tahoma, sans-serif; font-size: 13px; color: var(--p1-ink); + /* keep every pixel hard — no smoothing, like the real hardware */ + image-rendering: pixelated; +} + +/* Ordered 4x4 dither tiles, reused everywhere for the low-color look. + Two-tone Bayer-ish stipple — tiny so it reads as texture grain. */ +[data-theme="ps1"] { + --p1-dither-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000' fill-opacity='0.28'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000' fill-opacity='0.28'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%23fff' fill-opacity='0.10'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23fff' fill-opacity='0.10'/%3E%3C/svg%3E"); + --p1-dither-fog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='1' y='0' width='1' height='1' fill='%2307090f' fill-opacity='0.45'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%2307090f' fill-opacity='0.45'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%233b4a63' fill-opacity='0.5'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%233b4a63' fill-opacity='0.5'/%3E%3C/svg%3E"); +} + +/* Affine "texture swim": PS1 had no perspective-correct mapping, so + surfaces warped as the camera moved. Fake it with a slow skew wobble. */ +@keyframes ps1-swim { + 0% { transform: skewX(0deg) skewY(0deg) scale(1); } + 25% { transform: skewX(0.6deg) skewY(-0.4deg) scale(1.004); } + 50% { transform: skewX(0deg) skewY(0.5deg) scale(1); } + 75% { transform: skewX(-0.6deg) skewY(-0.3deg) scale(0.997); } + 100% { transform: skewX(0deg) skewY(0deg) scale(1); } +} + +/* Vertex jitter: low-precision vertex coords snapped to a grid made + geometry shudder. Tiny stepped translate on interactive bits. */ +@keyframes ps1-jitter { + 0%, 100% { transform: translate(0, 0); } + 20% { transform: translate(0.5px, -0.5px); } + 40% { transform: translate(-0.5px, 0.5px); } + 60% { transform: translate(0.5px, 0.5px); } + 80% { transform: translate(-0.5px, -0.5px); } } [data-theme="ps1"] body { - background: linear-gradient(160deg, var(--p1-bg1) 0%, var(--p1-bg2) 100%) fixed; + /* fogged void: dark dither over a vertical gradient = banding kill */ + background: + var(--p1-dither-fog), + linear-gradient(178deg, var(--p1-void1) 0%, var(--p1-void2) 100%) fixed; + background-size: 4px 4px, cover; } [data-theme="ps1"] .rb-window { - background: var(--p1-panel); - border: 2px solid #fff; - border-radius: 3px; + background: + var(--p1-dither-dark), + var(--p1-panel); + background-size: 4px 4px, cover; + border: 0; + border-radius: 0; padding: 0; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + /* jagged, untextured polygon silhouette — notched corners */ + clip-path: polygon( + 0 6px, 6px 6px, 6px 0, + calc(100% - 8px) 0, calc(100% - 8px) 5px, 100% 5px, + 100% calc(100% - 7px), calc(100% - 6px) calc(100% - 7px), calc(100% - 6px) 100%, + 7px 100%, 7px calc(100% - 6px), 0 calc(100% - 6px) + ); + box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65); + /* bright seam ring like flat-shaded geometry catching light */ + outline: 2px solid var(--p1-seam); + outline-offset: -2px; } [data-theme="ps1"] .rb-titlebar { height: 30px; padding: 0 12px; - background: linear-gradient(180deg, #5b6473, #424b59); - color: #eef1f6; + background: + var(--p1-dither-dark), + linear-gradient(180deg, var(--p1-fog), var(--p1-void1)); + background-size: 4px 4px, cover; + color: var(--p1-seam); letter-spacing: 3px; text-transform: uppercase; font-size: 12px; + text-shadow: 1px 1px 0 #000; /* hard 1px shadow, no blur */ } [data-theme="ps1"] .rb-titlebar-icon { width: 14px; height: 14px; - background: #eef1f6; - /* tiny CD glint */ - border-radius: 50%; - box-shadow: inset 0 0 0 4px #5b6473, inset 0 0 0 5px #eef1f6; + /* startup diamond, hard-edged */ + background: var(--p1-mag); + clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); + box-shadow: inset 0 0 0 2px var(--p1-cyan); + border-radius: 0; + image-rendering: pixelated; + animation: ps1-jitter 0.45s steps(2, end) infinite; } [data-theme="ps1"] .rb-titlebar-buttons { display: none; @@ -51,8 +112,11 @@ [data-theme="ps1"] .rb-menubar { padding: 6px 10px; - background: var(--p1-panel-dk); - border-bottom: 1px solid #fff; + background: + var(--p1-dither-dark), + var(--p1-panel-dk); + background-size: 4px 4px, cover; + border-bottom: 2px solid var(--p1-void2); } [data-theme="ps1"] .rb-menu-link { text-decoration: none; @@ -63,8 +127,9 @@ letter-spacing: 1px; } [data-theme="ps1"] .rb-menu-link:hover { - background: var(--p1-ink); - color: #fff; + background: var(--p1-mag); + color: var(--p1-seam); + animation: ps1-jitter 0.4s steps(2, end) infinite; } [data-theme="ps1"] .rb-switcher-label { font-size: 11px; @@ -72,32 +137,39 @@ } [data-theme="ps1"] .rb-switcher-select { font: 12px Verdana, sans-serif; - background: #eef1f6; - border: 1px solid #fff; - border-radius: 2px; + background: var(--p1-seam); + color: var(--p1-ink); + border: 2px solid var(--p1-void2); + border-radius: 0; padding: 2px 4px; } [data-theme="ps1"] .rb-content { - background: #e6e9ee; + background: + var(--p1-dither-dark), + #cfc8b2; + background-size: 4px 4px, cover; margin: 8px; padding: 20px 22px; - border-radius: 2px; - box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px var(--p1-panel-dk); + border-radius: 0; + box-shadow: inset 0 0 0 2px var(--p1-seam), inset 0 0 0 4px var(--p1-panel-dk); } [data-theme="ps1"] .rb-statusbar { padding: 4px 12px; font-size: 11px; - color: #4a525f; + color: #2a2017; letter-spacing: 1px; text-transform: uppercase; } [data-theme="ps1"] .rb-taskbar { height: 34px; - background: linear-gradient(180deg, #424b59, var(--p1-bg2)); - border-top: 1px solid #5b6473; + background: + var(--p1-dither-dark), + linear-gradient(180deg, var(--p1-void1), var(--p1-void2)); + background-size: 4px 4px, cover; + border-top: 2px solid var(--p1-fog); } [data-theme="ps1"] .rb-start { display: flex; @@ -105,21 +177,27 @@ gap: 7px; height: 24px; padding: 0 14px; - border: 1px solid #6b7585; - border-radius: 2px; - background: #4a525f; - color: #eef1f6; + border: 2px solid var(--p1-seam); + border-radius: 0; + background: var(--p1-void1); + color: var(--p1-seam); font: 11px Verdana, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; + clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); +} +[data-theme="ps1"] .rb-start:hover { + animation: ps1-jitter 0.4s steps(2, end) infinite; } [data-theme="ps1"] .rb-start-logo { width: 12px; height: 12px; - border-radius: 50%; - background: #eef1f6; - box-shadow: inset 0 0 0 3px #4a525f, inset 0 0 0 4px #eef1f6; + border-radius: 0; + background: var(--p1-mag); + clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); + box-shadow: inset 0 0 0 2px var(--p1-cyan); + image-rendering: pixelated; } [data-theme="ps1"] .rb-task { display: flex; @@ -127,26 +205,28 @@ gap: 7px; height: 24px; padding: 0 12px; - border: 1px solid transparent; + border: 2px solid transparent; background: transparent; - color: #aab2c0; + color: #8b93a3; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; cursor: default; } [data-theme="ps1"] .rb-task-active { - border-color: #6b7585; - background: #4a525f; - color: #eef1f6; + border-color: var(--p1-seam); + background: var(--p1-void1); + color: var(--p1-seam); } [data-theme="ps1"] .rb-task-icon { width: 10px; height: 10px; - background: #aab2c0; + background: var(--p1-cyan); + clip-path: polygon(50% 0, 100% 100%, 0 100%); + image-rendering: pixelated; } [data-theme="ps1"] .rb-clock { - color: #cfd5de; + color: var(--p1-seam); font-size: 11px; padding: 0 14px; letter-spacing: 2px; @@ -158,17 +238,36 @@ letter-spacing: 3px; text-transform: uppercase; color: var(--p1-ink); + text-shadow: 2px 2px 0 var(--p1-mag); /* hard offset, no AA */ } [data-theme="ps1"] .rb-page-sub { margin: 0 0 18px; - color: #5a626f; + color: #3a2f22; } + [data-theme="ps1"] .rb-post-card { - background: #f1f3f6; - border: 1px solid #fff; - border-radius: 2px; + background: + var(--p1-dither-dark), + #ddd6c0; + background-size: 4px 4px, cover; + border: 0; + border-radius: 0; padding: 14px 16px; - box-shadow: 0 1px 0 var(--p1-panel-dk), inset 0 0 0 1px #d2d7df; + /* rough notched polygon card */ + clip-path: polygon( + 0 0, calc(100% - 7px) 0, 100% 7px, + 100% 100%, 7px 100%, 0 calc(100% - 7px) + ); + box-shadow: inset 0 0 0 2px var(--p1-seam), 3px 3px 0 var(--p1-void2); + /* the affine swim — slow, unsettling, always on */ + animation: ps1-swim 6s ease-in-out infinite; + transform-origin: center; +} +[data-theme="ps1"] .rb-post-card:hover { + /* lean into the warp on focus */ + animation-duration: 2.4s; + outline: 2px solid var(--p1-mag); + outline-offset: -2px; } [data-theme="ps1"] .rb-post-card-title a { color: var(--p1-ink); @@ -176,30 +275,37 @@ letter-spacing: 1px; } [data-theme="ps1"] .rb-post-card-title a:hover { - color: #000; + color: var(--p1-mag); text-decoration: underline; } [data-theme="ps1"] .rb-post-date { font-size: 11px; - color: #6b7585; + color: #5b513c; text-transform: uppercase; letter-spacing: 1px; } [data-theme="ps1"] .rb-tag { font-size: 10px; - background: #c7ccd4; - border: 1px solid #fff; + background: var(--p1-void1); + color: var(--p1-seam); + border: 0; padding: 1px 7px; text-transform: uppercase; letter-spacing: 1px; + clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); } [data-theme="ps1"] .rb-readmore, [data-theme="ps1"] .rb-back { - color: #3a4351; + color: var(--p1-cyan); text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; + text-shadow: 1px 1px 0 var(--p1-void2); +} +[data-theme="ps1"] .rb-readmore:hover, +[data-theme="ps1"] .rb-back:hover { + color: var(--p1-mag); } [data-theme="ps1"] .rb-back { display: inline-block; @@ -209,20 +315,39 @@ letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px; + text-shadow: 2px 2px 0 var(--p1-mag); } [data-theme="ps1"] .rb-prose { line-height: 1.7; } [data-theme="ps1"] .rb-prose code { - background: #c7ccd4; - border: 1px solid #fff; - border-radius: 2px; + background: var(--p1-void1); + color: var(--p1-seam); + border: 0; + border-radius: 0; padding: 0 4px; font-family: "Courier New", monospace; } +[data-theme="ps1"] .rb-prose img { + /* unfiltered textures: nearest-neighbor scaling */ + image-rendering: pixelated; +} [data-theme="ps1"] .rb-prose blockquote { - border-left: 3px solid var(--p1-accent); + border-left: 4px solid var(--p1-mag); margin: 12px 0; padding: 4px 14px; - background: #dde1e8; + background: + var(--p1-dither-dark), + #c8c1ab; + background-size: 4px 4px, cover; +} + +/* Respect reduced-motion: kill the swim/jitter, keep the look. */ +@media (prefers-reduced-motion: reduce) { + [data-theme="ps1"] .rb-post-card, + [data-theme="ps1"] .rb-titlebar-icon, + [data-theme="ps1"] .rb-start:hover, + [data-theme="ps1"] .rb-menu-link:hover { + animation: none; + } } diff --git a/src/themes/ps2.css b/src/themes/ps2.css index e0864a5..9b6c6e7 100644 --- a/src/themes/ps2.css +++ b/src/themes/ps2.css @@ -18,34 +18,142 @@ [data-theme="ps2"] body { background: - radial-gradient(120% 80% at 50% -10%, #0b2f63 0%, #051a38 45%, #01060f 100%) fixed; + radial-gradient(120% 90% at 50% 120%, #0a3a7a 0%, #062250 35%, #02112e 65%, #00060f 100%) fixed; position: relative; overflow-x: hidden; } -/* the drifting translucent "towers" */ -[data-theme="ps2"] body::before { +/* ---- PS2 BIOS: the bobbing cube field ---- + The boot screen's grid of textured cubes, seen from above and a + touch off-axis, each cube slowly bobbing up and down. */ +[data-theme="ps2"] .rb-bg { + display: block; + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + overflow: hidden; + perspective: 1100px; + perspective-origin: 50% 34%; +} +[data-theme="ps2"] .rb-bg-grid { + position: absolute; + left: 50%; + top: 44%; + transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-7deg) scale(1.4); + transform-style: preserve-3d; + display: grid; + grid-template-columns: repeat(15, 52px); + grid-auto-rows: 52px; + gap: 12px; +} +[data-theme="ps2"] .rb-cube { + position: relative; + width: 52px; + height: 52px; + transform-style: preserve-3d; + /* the bob — overridden wholly by the keyframes */ + animation: ps2-bob 4.5s ease-in-out infinite; + animation-delay: var(--cube-delay, 0s); + /* lit top face */ + background: + radial-gradient(120% 120% at 30% 25%, rgba(245, 250, 255, 0.97), rgba(150, 180, 220, 0.82) 70%), + repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 4px); + box-shadow: 0 0 2px rgba(190, 220, 255, 0.5); +} +/* front (south) face — faces the camera, darker */ +[data-theme="ps2"] .rb-cube::before { + content: ""; + position: absolute; + left: 0; + top: 100%; + width: 52px; + height: var(--cube-h, 60px); + transform-origin: top center; + transform: rotateX(-90deg); + background: linear-gradient(180deg, rgba(120, 150, 195, 0.9), rgba(34, 52, 88, 0.9)); +} +/* right (east) face — caught by the slight rotation, darkest */ +[data-theme="ps2"] .rb-cube::after { + content: ""; + position: absolute; + left: 100%; + top: 0; + width: var(--cube-h, 60px); + height: 52px; + transform-origin: left center; + transform: rotateY(90deg); + background: linear-gradient(90deg, rgba(96, 126, 170, 0.85), rgba(24, 38, 66, 0.92)); +} +/* slow vertical bob, toward and away from the camera */ +@keyframes ps2-bob { + 0%, + 100% { + transform: translateZ(-10px); + } + 50% { + transform: translateZ(26px); + } +} + +/* ---- PS2 BIOS: floating glowing orbs ---- + The drifting save-data spheres. Two parallax layers for depth. */ +[data-theme="ps2"] body::after, +[data-theme="ps2"] .rb-desktop::before { content: ""; position: fixed; - inset: -20% -10% 0; + inset: 0; pointer-events: none; - background: repeating-linear-gradient( - 90deg, - transparent 0 60px, - rgba(120, 180, 255, 0.05) 60px 64px, - rgba(150, 200, 255, 0.1) 64px 90px, - transparent 90px 150px - ); - filter: blur(1px); - animation: ps2-drift 26s linear infinite; z-index: 0; } -@keyframes ps2-drift { +[data-theme="ps2"] body::after { + /* far, small, faint orbs */ + background-image: + radial-gradient(circle, rgba(190, 225, 255, 0.9) 0%, rgba(120, 180, 255, 0.25) 40%, transparent 70%), + radial-gradient(circle, rgba(200, 230, 255, 0.85) 0%, rgba(120, 180, 255, 0.2) 40%, transparent 70%), + radial-gradient(circle, rgba(170, 215, 255, 0.8) 0%, rgba(110, 170, 255, 0.2) 40%, transparent 70%), + radial-gradient(circle, rgba(210, 235, 255, 0.85) 0%, rgba(130, 185, 255, 0.2) 40%, transparent 70%); + background-repeat: no-repeat; + background-size: 5px 5px, 4px 4px, 6px 6px, 4px 4px; + background-position: 18% 90%, 42% 80%, 67% 95%, 85% 85%; + filter: drop-shadow(0 0 5px rgba(150, 200, 255, 0.7)); + animation: ps2-orbs-far 24s linear infinite; +} +[data-theme="ps2"] .rb-desktop::before { + /* near, larger, brighter orbs (faster, more drift) */ + background-image: + radial-gradient(circle, #fff 0%, rgba(160, 210, 255, 0.6) 35%, transparent 70%), + radial-gradient(circle, #eaf6ff 0%, rgba(150, 200, 255, 0.55) 35%, transparent 70%), + radial-gradient(circle, #fff 0%, rgba(170, 215, 255, 0.6) 35%, transparent 70%); + background-repeat: no-repeat; + background-size: 11px 11px, 9px 9px, 13px 13px; + background-position: 28% 100%, 58% 100%, 80% 100%; + filter: drop-shadow(0 0 10px rgba(170, 215, 255, 0.9)); + animation: ps2-orbs-near 18s linear infinite; +} +/* orbs drift upward and gently sideways, then loop */ +@keyframes ps2-orbs-far { from { - transform: translateX(0) skewX(-2deg); + transform: translate3d(0, 0, 0); + opacity: 0; } + 10% { opacity: 0.8; } + 90% { opacity: 0.8; } to { - transform: translateX(-150px) skewX(-2deg); + transform: translate3d(20px, -85vh, 0); + opacity: 0; + } +} +@keyframes ps2-orbs-near { + from { + transform: translate3d(0, 0, 0); + opacity: 0; + } + 12% { opacity: 1; } + 88% { opacity: 1; } + to { + transform: translate3d(-36px, -105vh, 0); + opacity: 0; } } diff --git a/src/themes/ps3.css b/src/themes/ps3.css index 7cd695e..013b9fd 100644 --- a/src/themes/ps3.css +++ b/src/themes/ps3.css @@ -1,62 +1,114 @@ /* ============================================================ Theme: PlayStation 3 — scoped to [data-theme="ps3"] - XMB era: deep gradient that drifts through the day, a flowing - light wave, glossy black-glass panels, hair-thin white type. + XMB era: a teal→blue sky that drifts through the day, a slow + flowing light ribbon, thin white type, and the signature soft + glowing selection bar with glassy translucent panels. ============================================================ */ [data-theme="ps3"] { --p3-ink: #f4f8ff; - --p3-dim: #9fb4cf; - --p3-line: rgba(255, 255, 255, 0.16); - --p3-glass: rgba(8, 14, 28, 0.55); + --p3-dim: #b7cbe2; + --p3-line: rgba(255, 255, 255, 0.18); + --p3-glass: rgba(8, 22, 44, 0.42); + /* the soft white selection sheen, brighter in the middle */ + --p3-sel: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.18) 22%, + rgba(255, 255, 255, 0.34) 50%, + rgba(255, 255, 255, 0.18) 78%, + rgba(255, 255, 255, 0) 100% + ); font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 200; font-size: 14px; color: var(--p3-ink); } +/* signature XMB teal→blue, light pooling from the top, slow hue drift */ [data-theme="ps3"] body { - background: linear-gradient(120deg, #04122e, #0a2a5e, #04122e, #1a0a3e); - background-size: 400% 400%; - animation: ps3-sky 40s ease infinite; + background: + radial-gradient( + 130% 90% at 50% -12%, + #34bcd6 0%, + #1d8bbd 30%, + #135a98 58%, + #0a3a72 82%, + #062a5a 100% + ); + background-attachment: fixed; + animation: ps3-sky 60s ease-in-out infinite; } @keyframes ps3-sky { 0% { - background-position: 0% 50%; + filter: hue-rotate(0deg) saturate(1); } 50% { - background-position: 100% 50%; + filter: hue-rotate(-22deg) saturate(1.12); } 100% { - background-position: 0% 50%; + filter: hue-rotate(0deg) saturate(1); } } -/* the flowing XMB wave */ +/* the flowing XMB light ribbon — a slow, soft diagonal streak */ [data-theme="ps3"] body::before { content: ""; position: fixed; - left: -10%; - right: -10%; - top: 38%; - height: 220px; + left: -20%; + right: -20%; + top: 46%; + height: 320px; pointer-events: none; - background: radial-gradient( - 60% 100% at 50% 50%, - rgba(150, 200, 255, 0.22), - transparent 70% - ); - filter: blur(8px); - transform: skewY(-4deg); - animation: ps3-wave 14s ease-in-out infinite alternate; + background: + radial-gradient( + 55% 120% at 38% 50%, + rgba(190, 232, 255, 0.28), + transparent 70% + ), + radial-gradient( + 45% 90% at 72% 45%, + rgba(150, 210, 255, 0.2), + transparent 72% + ); + filter: blur(14px); + transform: skewY(-5deg); + animation: ps3-wave 22s ease-in-out infinite alternate; z-index: 0; } @keyframes ps3-wave { from { - transform: skewY(-5deg) translateY(-30px); + transform: skewY(-6deg) translateY(-46px); } to { - transform: skewY(3deg) translateY(40px); + transform: skewY(2deg) translateY(54px); + } +} +/* a second, fainter ribbon for depth */ +[data-theme="ps3"] body::after { + content: ""; + position: fixed; + left: -20%; + right: -20%; + top: 22%; + height: 240px; + pointer-events: none; + background: radial-gradient( + 60% 120% at 55% 50%, + rgba(220, 245, 255, 0.12), + transparent 70% + ); + filter: blur(20px); + transform: skewY(4deg); + animation: ps3-wave2 30s ease-in-out infinite alternate; + z-index: 0; +} +@keyframes ps3-wave2 { + from { + transform: skewY(5deg) translateY(30px); + } + to { + transform: skewY(-3deg) translateY(-40px); } } [data-theme="ps3"] .rb-desktop { @@ -69,50 +121,59 @@ border: 1px solid var(--p3-line); border-radius: 4px; padding: 0; - backdrop-filter: blur(10px); - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(12px); + /* top gloss highlight like the XMB glass panels */ + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.22), + 0 24px 70px rgba(0, 12, 30, 0.55); } +/* header row: small glowing orb + hair-thin title, hairline beneath */ [data-theme="ps3"] .rb-titlebar { - height: 40px; - padding: 0 18px; + height: 44px; + padding: 0 20px; border-bottom: 1px solid var(--p3-line); color: var(--p3-ink); font-weight: 200; - letter-spacing: 1px; + font-size: 15px; + letter-spacing: 0.5px; + text-shadow: 0 1px 8px rgba(0, 20, 50, 0.5); } [data-theme="ps3"] .rb-titlebar-icon { - width: 12px; - height: 12px; + width: 13px; + height: 13px; border-radius: 50%; - background: radial-gradient(circle at 35% 30%, #fff, #6fa8ff); - box-shadow: 0 0 12px rgba(120, 180, 255, 0.8); + background: radial-gradient(circle at 34% 28%, #fff, #7fb6ff 55%, #2f74d8); + box-shadow: 0 0 14px rgba(140, 200, 255, 0.9); } [data-theme="ps3"] .rb-titlebar-buttons { display: none; } [data-theme="ps3"] .rb-menubar { - padding: 10px 16px; + padding: 9px 16px; border-bottom: 1px solid var(--p3-line); } [data-theme="ps3"] .rb-menu-link { text-decoration: none; - padding: 5px 14px; + padding: 6px 16px; + border-radius: 3px; color: var(--p3-dim); font-size: 13px; - transition: color 0.25s, text-shadow 0.25s; + letter-spacing: 0.3px; + transition: color 0.25s, text-shadow 0.25s, background 0.25s; } [data-theme="ps3"] .rb-menu-link:hover { color: #fff; - text-shadow: 0 0 12px rgba(150, 200, 255, 0.9); + background: var(--p3-sel); + text-shadow: 0 0 12px rgba(170, 215, 255, 0.95); } [data-theme="ps3"] .rb-switcher-label { color: var(--p3-dim); font-size: 12px; } [data-theme="ps3"] .rb-switcher-select { - background: rgba(4, 12, 28, 0.85); + background: rgba(6, 20, 42, 0.8); color: var(--p3-ink); border: 1px solid var(--p3-line); border-radius: 3px; @@ -121,28 +182,44 @@ } [data-theme="ps3"] .rb-content { - padding: 26px 30px; + padding: 28px 32px; } +/* bottom command hints, X / O style like the XMB footer */ [data-theme="ps3"] .rb-statusbar { border-top: 1px solid var(--p3-line); - padding: 7px 18px; + padding: 9px 20px; font-size: 11px; color: var(--p3-dim); - letter-spacing: 1px; + letter-spacing: 0.8px; +} +[data-theme="ps3"] .rb-status-cell::before { + content: "✕ "; + color: #cfe2ff; + font-size: 10px; +} +[data-theme="ps3"] .rb-status-grow::before { + content: "○ "; + color: #cfe2ff; + font-size: 10px; } [data-theme="ps3"] .rb-taskbar { - height: 38px; - background: linear-gradient(180deg, rgba(8, 18, 40, 0.75), rgba(2, 6, 16, 0.9)); + height: 40px; + background: linear-gradient( + 180deg, + rgba(10, 28, 56, 0.7), + rgba(2, 8, 20, 0.88) + ); border-top: 1px solid var(--p3-line); - backdrop-filter: blur(8px); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); + backdrop-filter: blur(10px); } [data-theme="ps3"] .rb-start { display: flex; align-items: center; gap: 9px; - height: 26px; + height: 27px; padding: 0 18px; border: 1px solid var(--p3-line); border-radius: 14px; @@ -151,23 +228,24 @@ font: 200 12px "Segoe UI", sans-serif; letter-spacing: 1px; cursor: pointer; + transition: background 0.25s; } [data-theme="ps3"] .rb-start:hover { - background: rgba(120, 180, 255, 0.18); + background: var(--p3-sel); } [data-theme="ps3"] .rb-start-logo { width: 11px; height: 11px; border-radius: 50%; - background: radial-gradient(circle at 35% 30%, #fff, #6fa8ff); - box-shadow: 0 0 10px rgba(120, 180, 255, 0.8); + background: radial-gradient(circle at 34% 28%, #fff, #7fb6ff 55%, #2f74d8); + box-shadow: 0 0 10px rgba(140, 200, 255, 0.85); } [data-theme="ps3"] .rb-task { display: flex; align-items: center; gap: 8px; - height: 26px; - padding: 0 14px; + height: 27px; + padding: 0 16px; border: 1px solid transparent; background: transparent; color: var(--p3-dim); @@ -175,16 +253,17 @@ cursor: default; } [data-theme="ps3"] .rb-task-active { - border-color: var(--p3-line); border-radius: 14px; color: #fff; - background: rgba(255, 255, 255, 0.06); + background: var(--p3-sel); + box-shadow: 0 0 16px rgba(150, 210, 255, 0.25); } [data-theme="ps3"] .rb-task-icon { width: 8px; height: 8px; border-radius: 50%; - background: #6fa8ff; + background: radial-gradient(circle at 35% 30%, #fff, #6fa8ff); + box-shadow: 0 0 8px rgba(140, 200, 255, 0.8); } [data-theme="ps3"] .rb-clock { color: var(--p3-ink); @@ -196,27 +275,37 @@ [data-theme="ps3"] .rb-page-title { margin: 0 0 4px; - font-size: 34px; + font-size: 36px; font-weight: 100; - letter-spacing: 1px; + letter-spacing: 0.5px; color: #fff; - text-shadow: 0 2px 20px rgba(120, 180, 255, 0.5); + text-shadow: 0 2px 24px rgba(140, 200, 255, 0.55); } [data-theme="ps3"] .rb-page-sub { margin: 0 0 24px; color: var(--p3-dim); } + +/* post rows behave like XMB list items: a glassy bar that lights up + with the soft white selection sheen when picked */ [data-theme="ps3"] .rb-post-card { border: 1px solid var(--p3-line); border-radius: 4px; - padding: 18px 20px; - background: rgba(255, 255, 255, 0.04); - transition: background 0.25s, box-shadow 0.25s, transform 0.25s; + padding: 18px 22px; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.07), + rgba(255, 255, 255, 0.02) + ); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); + transition: background 0.25s, box-shadow 0.25s, transform 0.2s; } [data-theme="ps3"] .rb-post-card:hover { - background: rgba(120, 180, 255, 0.12); - box-shadow: 0 0 30px rgba(80, 150, 255, 0.3); - transform: translateX(4px); + background: var(--p3-sel); + box-shadow: + inset 0 0 24px rgba(255, 255, 255, 0.12), + 0 0 30px rgba(120, 195, 255, 0.32); + transform: translateX(5px); } [data-theme="ps3"] .rb-post-card-title a { color: #fff; @@ -224,25 +313,25 @@ font-weight: 200; } [data-theme="ps3"] .rb-post-card-title a:hover { - text-shadow: 0 0 12px rgba(150, 200, 255, 0.9); + text-shadow: 0 0 12px rgba(170, 215, 255, 0.95); } [data-theme="ps3"] .rb-post-date { font-size: 11px; color: var(--p3-dim); } [data-theme="ps3"] .rb-post-excerpt { - color: #d3e2f7; + color: #d8e6f9; } [data-theme="ps3"] .rb-tag { font-size: 10px; border: 1px solid var(--p3-line); border-radius: 12px; padding: 1px 10px; - color: #bcd4f5; + color: #c4d9f7; } [data-theme="ps3"] .rb-readmore, [data-theme="ps3"] .rb-back { - color: #9fc6ff; + color: #a9cdff; text-decoration: none; font-size: 12px; } @@ -253,19 +342,19 @@ [data-theme="ps3"] .rb-article-title { font-weight: 100; color: #fff; - text-shadow: 0 2px 18px rgba(120, 180, 255, 0.45); + text-shadow: 0 2px 20px rgba(140, 200, 255, 0.5); margin: 0 0 8px; } [data-theme="ps3"] .rb-prose { line-height: 1.85; - color: #dce8f9; + color: #e0ecfa; font-weight: 300; } [data-theme="ps3"] .rb-prose a { - color: #9fc6ff; + color: #a9cdff; } [data-theme="ps3"] .rb-prose code { - background: rgba(4, 12, 28, 0.7); + background: rgba(6, 18, 40, 0.7); border: 1px solid var(--p3-line); border-radius: 3px; padding: 0 5px; @@ -275,5 +364,59 @@ border-left: 2px solid #6fa8ff; margin: 14px 0; padding: 6px 16px; - background: rgba(120, 180, 255, 0.1); + background: rgba(120, 195, 255, 0.1); +} + +/* glassy input bars like the SSID field, with a top gloss line */ +[data-theme="ps3"] .rb-input, +[data-theme="ps3"] input[type="text"], +[data-theme="ps3"] input[type="email"], +[data-theme="ps3"] input[type="password"], +[data-theme="ps3"] input[type="search"], +[data-theme="ps3"] textarea, +[data-theme="ps3"] select { + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.16), + rgba(255, 255, 255, 0.04) + ); + border: 1px solid var(--p3-line); + border-radius: 4px; + color: var(--p3-ink); + padding: 9px 14px; + font: 200 14px "Segoe UI", sans-serif; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); +} +[data-theme="ps3"] input::placeholder, +[data-theme="ps3"] textarea::placeholder { + color: rgba(200, 218, 240, 0.55); +} +[data-theme="ps3"] .rb-input:focus, +[data-theme="ps3"] input:focus, +[data-theme="ps3"] textarea:focus, +[data-theme="ps3"] select:focus { + outline: none; + border-color: rgba(150, 210, 255, 0.6); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 18px rgba(120, 195, 255, 0.4); +} + +/* buttons read like the X/O command bar — pill, soft sheen on hover */ +[data-theme="ps3"] .rb-btn, +[data-theme="ps3"] button[type="submit"] { + background: rgba(255, 255, 255, 0.06); + border: 1px solid var(--p3-line); + border-radius: 16px; + color: var(--p3-ink); + padding: 8px 22px; + font: 200 13px "Segoe UI", sans-serif; + letter-spacing: 0.5px; + cursor: pointer; + transition: background 0.25s, box-shadow 0.25s; +} +[data-theme="ps3"] .rb-btn:hover, +[data-theme="ps3"] button[type="submit"]:hover { + background: var(--p3-sel); + box-shadow: 0 0 18px rgba(120, 195, 255, 0.35); } diff --git a/src/themes/registry.ts b/src/themes/registry.ts index 302cebc..1322150 100644 --- a/src/themes/registry.ts +++ b/src/themes/registry.ts @@ -44,7 +44,7 @@ export const THEMES: ThemeMeta[] = [ { id: "ps1", name: "PlayStation 1", - blurb: "Gray BIOS. Memory card and CD player.", + blurb: "Affine texture swim, dithered polygons.", era: "1994", }, {