+ {/* Decorative background field. Hidden by default; themes opt in
+ (PS2 uses it for the BIOS bobbing-cube field). */}
+
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",
},
{