kawa/RetroBlog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine PS1/PS2/PS3/NDS themes and add decorative background field

Browse Source 
Rework console theme stylesheets and add opt-in .rb-bg cube field
(used by PS2 BIOS bobbing-cube background) wired through Shell.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Sébastien QUEROL
2026-06-07 03:53:20 +02:00
parent b465233f71
commit 307e0b48da
7 changed files with 739 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+5
View File
@@ -50,6 +50,11 @@ img {
padding: 0 0 40px; /* room for the fixed taskbar */ padding: 0 0 40px; /* room for the fixed taskbar */
} }
/* Opt-in decorative background field (themes enable it). */
.rb-bg {
display: none;
}
.rb-window { .rb-window {
flex: 1; flex: 1;
display: flex; display: flex;
src/components/Shell.tsx
+25 -1
View File
@@ -1,5 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import type { ReactNode } from "react"; import type { CSSProperties, ReactNode } from "react";
import { THEMES, type ThemeId } from "@/themes/registry"; import { THEMES, type ThemeId } from "@/themes/registry";
import { getSettings } from "@/lib/settings"; import { getSettings } from "@/lib/settings";
import { isAdmin } from "@/lib/auth"; import { isAdmin } from "@/lib/auth";
@@ -29,6 +29,30 @@ export default async function Shell({
return ( return (
<div className="rb-desktop"> <div className="rb-desktop">
{/* Decorative background field. Hidden by default; themes opt in
(PS2 uses it for the BIOS bobbing-cube field). */}
<div className="rb-bg" aria-hidden>
<div className="rb-bg-grid">
{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 (
<span
key={i}
className="rb-cube"
style={
{
"--cube-h": `${h}px`,
"--cube-delay": `${delay.toFixed(2)}s`,
} as CSSProperties
}
/>
);
})}
</div>
</div>
<div className="rb-window" role="application"> <div className="rb-window" role="application">
<div className="rb-titlebar"> <div className="rb-titlebar">
<span className="rb-titlebar-icon" aria-hidden /> <span className="rb-titlebar-icon" aria-hidden />
src/themes/nds.css
+182 -126
View File
@@ -1,36 +1,38 @@
/* ============================================================ /* ============================================================
Theme: Nintendo DS — scoped to [data-theme="nds"] Theme: Nintendo DS — scoped to [data-theme="nds"]
The original DS firmware menu: pale grid "graph paper" The real 2004 DS firmware menu: white graph-paper grid
backdrop, white tiles with thick rounded charcoal borders, backdrop, SQUARE tiles with thick dark double-borders,
glossy cyan selection, and calendar pastels (red Sunday, brushed-metal status/hinge bars, silver icon blocks, and a
blue Saturday). blue dashed selection cursor. Calendar pastels on tags.
============================================================ */ ============================================================ */
[data-theme="nds"] { [data-theme="nds"] {
--d-cyan: #1ba1c4; --d-ink: #2b3035; /* near-black menu text */
--d-cyan-lt: #8fdcef; --d-sub: #6f7b83; /* gray secondary text */
--d-cyan-dk: #1685a3; --d-edge: #2f3437; /* thick tile outline (near-black) */
--d-ink: #3a4750; --d-sel: #2f6fc4; /* dashed blue selection */
--d-line: #4a565e; /* thick tile border */ --d-sel-lt: #d3e6f9; /* selection fill */
--d-paper: #eef1f3; /* grid backdrop */ --d-red: #d4506a; /* calendar Sunday */
--d-grid: #dbe1e5; /* grid lines */ --d-sat: #3f7fd0; /* calendar Saturday */
--d-red: #d4506a; /* Sunday */ /* brushed metal stops */
--d-blue: #3f7fd0; /* Saturday */ --m-tile: linear-gradient(180deg, #ffffff 0%, #eef1f3 48%, #dde3e7 100%);
font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif; --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; font-size: 14px;
color: var(--d-ink); 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 { [data-theme="nds"] body {
background-color: var(--d-paper); background-color: #fbfcfc;
background-image: linear-gradient(var(--d-grid) 1px, transparent 1px), background-image: linear-gradient(#dde2e6 1px, transparent 1px),
linear-gradient(90deg, var(--d-grid) 1px, transparent 1px); linear-gradient(90deg, #dde2e6 1px, transparent 1px);
background-size: 22px 22px; background-size: 34px 34px;
background-attachment: fixed; background-attachment: fixed;
} }
/* the window is the menu canvas */ /* window is just the canvas; tiles float on the grid */
[data-theme="nds"] .rb-window { [data-theme="nds"] .rb-window {
background: transparent; background: transparent;
border: none; border: none;
@@ -39,189 +41,236 @@
box-shadow: none; box-shadow: none;
} }
/* top status strip: User name, clock, date, battery */ /* ---- top status bar: dark brushed blue-gray strip ---- */
[data-theme="nds"] .rb-titlebar { [data-theme="nds"] .rb-titlebar {
height: 34px; height: 30px;
padding: 0 14px; padding: 0 12px;
border-radius: 12px; border-radius: 0;
background: linear-gradient(180deg, #fbfdfe, #e6ecef); background: linear-gradient(180deg, #8493a0, #596b77 55%, #4e5f6a);
border: 2px solid var(--d-line); border: 1px solid #3c4a54;
color: var(--d-ink); color: #fff;
font-weight: bold; font-weight: bold;
letter-spacing: 0.3px; letter-spacing: 0.4px;
text-shadow: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
} }
[data-theme="nds"] .rb-titlebar-icon { [data-theme="nds"] .rb-titlebar-icon {
width: 16px; /* green battery / cart chip */
height: 12px; width: 18px;
border-radius: 2px; height: 11px;
background: linear-gradient(180deg, #b7f0a0, #7fc964); border-radius: 1px;
box-shadow: inset 0 0 0 1.5px var(--d-line); 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 { [data-theme="nds"] .rb-titlebar-buttons {
display: none; display: none;
} }
/* menubar = white rounded tile holding the chunky touch buttons */ /* ---- menubar = brushed-metal hinge band with striations ---- */
[data-theme="nds"] .rb-menubar { [data-theme="nds"] .rb-menubar {
margin-top: 8px; margin-top: 6px;
padding: 10px 12px; padding: 8px 10px;
border-radius: 14px; border-radius: 0;
background: #ffffff; background: var(--m-bar);
border: 2px solid var(--d-line); 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 { [data-theme="nds"] .rb-menu-link {
text-decoration: none; text-decoration: none;
padding: 6px 16px; padding: 5px 14px;
border-radius: 18px; border-radius: 2px;
color: var(--d-ink); color: var(--d-ink);
font-weight: bold; font-weight: bold;
background: linear-gradient(180deg, #ffffff, #e3ebef); background: var(--m-tile);
border: 2px solid var(--d-line); border: 2px solid var(--d-edge);
transition: all 0.12s; box-shadow: inset 0 1px 0 #fff;
transition: none;
} }
/* DS selection = blue dashed cursor + pale fill */
[data-theme="nds"] .rb-menu-link:hover { [data-theme="nds"] .rb-menu-link:hover {
background: linear-gradient(180deg, #6fd0e8, var(--d-cyan)); background: var(--d-sel-lt);
color: #fff; color: var(--d-sel);
border-color: var(--d-cyan-dk); outline: 2px dashed var(--d-sel);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); outline-offset: 1px;
} }
[data-theme="nds"] .rb-switcher-label { [data-theme="nds"] .rb-switcher-label {
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
color: var(--d-cyan-dk); color: var(--d-ink);
} }
[data-theme="nds"] .rb-switcher-select { [data-theme="nds"] .rb-switcher-select {
font: 13px "Trebuchet MS", sans-serif; font: 13px Tahoma, sans-serif;
border: 2px solid var(--d-line); border: 2px solid var(--d-edge);
border-radius: 16px; border-radius: 2px;
padding: 4px 12px; padding: 3px 8px;
background: #fff; background: var(--m-tile);
color: var(--d-ink); color: var(--d-ink);
} }
/* the main content = big white touch-screen tile */ /* ---- content = transparent so the grid shows through ---- */
[data-theme="nds"] .rb-content { [data-theme="nds"] .rb-content {
background: #ffffff; background: transparent;
margin: 8px 0; margin: 6px 0;
padding: 22px 24px; padding: 16px 2px;
border-radius: 16px; border-radius: 0;
border: 2px solid var(--d-line); border: none;
box-shadow: inset 0 0 0 4px #f3f7f9; box-shadow: none;
} }
[data-theme="nds"] .rb-statusbar { [data-theme="nds"] .rb-statusbar {
padding: 6px 12px; padding: 5px 10px;
font-size: 11px; 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 { [data-theme="nds"] .rb-taskbar {
height: 40px; height: 36px;
margin-top: 8px; margin-top: 6px;
border-radius: 14px; border-radius: 0;
background: linear-gradient(180deg, #fbfdfe, #e6ecef); background: var(--m-bar);
border: 2px solid var(--d-line); 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 { [data-theme="nds"] .rb-start {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 7px; gap: 7px;
height: 28px; height: 26px;
padding: 0 16px; padding: 0 14px;
border: 2px solid var(--d-cyan-dk); border: 2px solid var(--d-edge);
border-radius: 16px; border-radius: 2px;
background: linear-gradient(180deg, #6fd0e8, var(--d-cyan)); background: var(--d-sel-lt);
color: #fff; color: var(--d-sel);
font: bold 13px "Trebuchet MS", sans-serif; font: bold 13px Tahoma, sans-serif;
cursor: pointer; 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 { [data-theme="nds"] .rb-start-logo {
width: 13px; /* little DS console chip */
height: 13px; width: 16px;
border-radius: 4px; height: 12px;
background: linear-gradient(180deg, #fff, var(--d-cyan-lt)); border-radius: 1px;
background: var(--m-icon);
box-shadow: inset 0 0 0 1px #6a737a;
} }
[data-theme="nds"] .rb-task { [data-theme="nds"] .rb-task {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 7px; gap: 7px;
height: 28px; height: 26px;
padding: 0 14px; padding: 0 12px;
border: 2px solid var(--d-line); border: 2px solid var(--d-edge);
border-radius: 16px; border-radius: 2px;
background: linear-gradient(180deg, #ffffff, #e3ebef); background: var(--m-tile);
box-shadow: inset 0 1px 0 #fff;
color: var(--d-ink); color: var(--d-ink);
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
cursor: default; cursor: default;
} }
[data-theme="nds"] .rb-task-active { [data-theme="nds"] .rb-task-active {
background: linear-gradient(180deg, #6fd0e8, var(--d-cyan)); background: var(--d-sel-lt);
color: #fff; color: var(--d-sel);
border-color: var(--d-cyan-dk); outline: 2px dashed var(--d-sel);
outline-offset: 1px;
} }
[data-theme="nds"] .rb-task-icon { [data-theme="nds"] .rb-task-icon {
width: 11px; width: 12px;
height: 11px; height: 12px;
border-radius: 3px; border-radius: 1px;
background: var(--d-cyan-lt); background: var(--m-icon);
box-shadow: inset 0 0 0 1px #6a737a;
} }
[data-theme="nds"] .rb-clock { [data-theme="nds"] .rb-clock {
color: var(--d-ink); color: var(--d-ink);
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
padding: 0 14px; padding: 0 12px;
} }
/* ---- page heading ---- */
[data-theme="nds"] .rb-page-title { [data-theme="nds"] .rb-page-title {
margin: 0 0 4px; margin: 0 0 4px;
font-size: 26px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: var(--d-cyan-dk); color: var(--d-ink);
} }
[data-theme="nds"] .rb-page-sub { [data-theme="nds"] .rb-page-sub {
margin: 0 0 18px; margin: 0 0 16px;
color: #71808a; 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 { [data-theme="nds"] .rb-post-card {
border: 2px solid var(--d-line); position: relative;
border-radius: 14px; border: 2px solid var(--d-edge);
padding: 16px 18px; border-radius: 2px;
background: #ffffff; padding: 14px 16px 14px 84px; /* room for the icon block */
box-shadow: inset 0 0 0 3px #f3f7f9; min-height: 72px;
transition: box-shadow 0.18s, transform 0.18s; 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 { [data-theme="nds"] .rb-post-card:hover {
box-shadow: inset 0 0 0 3px #e0f3f9, 0 5px 16px rgba(27, 161, 196, 0.28); outline: 2px dashed var(--d-sel);
transform: translateY(-2px); outline-offset: 2px;
border-color: var(--d-cyan-dk);
} }
[data-theme="nds"] .rb-post-card-title a { [data-theme="nds"] .rb-post-card-title a {
color: var(--d-cyan-dk); color: var(--d-ink);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
[data-theme="nds"] .rb-post-card-title a:hover {
color: var(--d-sel);
}
[data-theme="nds"] .rb-post-date { [data-theme="nds"] .rb-post-date {
font-size: 12px; font-size: 12px;
color: #93a0a8; color: var(--d-sub);
} }
/* tags = tiny square calendar-pastel chips */
[data-theme="nds"] .rb-tag { [data-theme="nds"] .rb-tag {
font-size: 11px; font-size: 11px;
background: #e4f4f9; background: var(--d-sel-lt);
border: 1.5px solid var(--d-cyan-lt); border: 1.5px solid var(--d-sat);
border-radius: 12px; border-radius: 2px;
padding: 1px 9px; padding: 1px 7px;
color: var(--d-cyan-dk); color: #1f5aa6;
font-weight: bold; font-weight: bold;
} }
[data-theme="nds"] .rb-readmore, [data-theme="nds"] .rb-readmore,
[data-theme="nds"] .rb-back { [data-theme="nds"] .rb-back {
color: var(--d-cyan-dk); color: var(--d-sel);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
@@ -230,33 +279,40 @@
display: inline-block; display: inline-block;
margin-bottom: 12px; margin-bottom: 12px;
} }
/* ---- article view ---- */
[data-theme="nds"] .rb-article-title { [data-theme="nds"] .rb-article-title {
color: var(--d-cyan-dk); color: var(--d-ink);
font-weight: bold; font-weight: bold;
margin: 0 0 8px; margin: 0 0 8px;
} }
[data-theme="nds"] .rb-prose { [data-theme="nds"] .rb-prose {
line-height: 1.7; 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 { [data-theme="nds"] .rb-prose a {
color: var(--d-cyan-dk); color: var(--d-sel);
} }
[data-theme="nds"] .rb-prose code { [data-theme="nds"] .rb-prose code {
background: #e4f4f9; background: #eef2f4;
border: 1px solid var(--d-cyan-lt); border: 1px solid #9aa4ab;
border-radius: 6px; border-radius: 2px;
padding: 0 5px; padding: 0 5px;
font-family: "Courier New", monospace; font-family: "Courier New", monospace;
} }
[data-theme="nds"] .rb-prose blockquote { [data-theme="nds"] .rb-prose blockquote {
border-left: 4px solid var(--d-cyan); border-left: 4px solid var(--d-sel);
margin: 12px 0; margin: 12px 0;
padding: 6px 14px; padding: 6px 14px;
background: #eef7fa; background: #eef5fc;
border-radius: 0 10px 10px 0; border-radius: 0;
} }
[data-theme="nds"] .rb-prose h1, [data-theme="nds"] .rb-prose h1,
[data-theme="nds"] .rb-prose h2, [data-theme="nds"] .rb-prose h2,
[data-theme="nds"] .rb-prose h3 { [data-theme="nds"] .rb-prose h3 {
color: var(--d-cyan-dk); color: var(--d-ink);
} }
src/themes/ps1.css
+186 -61
View File
@@ -1,49 +1,110 @@
/* ============================================================ /* ============================================================
Theme: PlayStation 1 — scoped to [data-theme="ps1"] Theme: PlayStation 1 — scoped to [data-theme="ps1"]
The gray BIOS shell: cool charcoal gradient, soft gray Not the calm BIOS shell — the GAME. Late-90s real-time 3D:
panels, blocky understated type. Memory-card-manager calm. 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"] { [data-theme="ps1"] {
--p1-bg1: #3a4351; /* Murky low-bit polygon palette — fogged blue-black void,
--p1-bg2: #1c222c; CD-startup diamond magenta/cyan, dirty parchment UI. */
--p1-panel: #c7ccd4; --p1-void1: #1a2230;
--p1-panel-dk: #9aa1ad; --p1-void2: #07090f;
--p1-ink: #2a2f38; --p1-fog: #3b4a63;
--p1-accent: #6b7585; --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-family: "Verdana", Geneva, Tahoma, sans-serif;
font-size: 13px; font-size: 13px;
color: var(--p1-ink); 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 { [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 { [data-theme="ps1"] .rb-window {
background: var(--p1-panel); background:
border: 2px solid #fff; var(--p1-dither-dark),
border-radius: 3px; var(--p1-panel);
background-size: 4px 4px, cover;
border: 0;
border-radius: 0;
padding: 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 { [data-theme="ps1"] .rb-titlebar {
height: 30px; height: 30px;
padding: 0 12px; padding: 0 12px;
background: linear-gradient(180deg, #5b6473, #424b59); background:
color: #eef1f6; 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; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
text-shadow: 1px 1px 0 #000; /* hard 1px shadow, no blur */
} }
[data-theme="ps1"] .rb-titlebar-icon { [data-theme="ps1"] .rb-titlebar-icon {
width: 14px; width: 14px;
height: 14px; height: 14px;
background: #eef1f6; /* startup diamond, hard-edged */
/* tiny CD glint */ background: var(--p1-mag);
border-radius: 50%; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
box-shadow: inset 0 0 0 4px #5b6473, inset 0 0 0 5px #eef1f6; 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 { [data-theme="ps1"] .rb-titlebar-buttons {
display: none; display: none;
@@ -51,8 +112,11 @@
[data-theme="ps1"] .rb-menubar { [data-theme="ps1"] .rb-menubar {
padding: 6px 10px; padding: 6px 10px;
background: var(--p1-panel-dk); background:
border-bottom: 1px solid #fff; 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 { [data-theme="ps1"] .rb-menu-link {
text-decoration: none; text-decoration: none;
@@ -63,8 +127,9 @@
letter-spacing: 1px; letter-spacing: 1px;
} }
[data-theme="ps1"] .rb-menu-link:hover { [data-theme="ps1"] .rb-menu-link:hover {
background: var(--p1-ink); background: var(--p1-mag);
color: #fff; color: var(--p1-seam);
animation: ps1-jitter 0.4s steps(2, end) infinite;
} }
[data-theme="ps1"] .rb-switcher-label { [data-theme="ps1"] .rb-switcher-label {
font-size: 11px; font-size: 11px;
@@ -72,32 +137,39 @@
} }
[data-theme="ps1"] .rb-switcher-select { [data-theme="ps1"] .rb-switcher-select {
font: 12px Verdana, sans-serif; font: 12px Verdana, sans-serif;
background: #eef1f6; background: var(--p1-seam);
border: 1px solid #fff; color: var(--p1-ink);
border-radius: 2px; border: 2px solid var(--p1-void2);
border-radius: 0;
padding: 2px 4px; padding: 2px 4px;
} }
[data-theme="ps1"] .rb-content { [data-theme="ps1"] .rb-content {
background: #e6e9ee; background:
var(--p1-dither-dark),
#cfc8b2;
background-size: 4px 4px, cover;
margin: 8px; margin: 8px;
padding: 20px 22px; padding: 20px 22px;
border-radius: 2px; border-radius: 0;
box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px var(--p1-panel-dk); box-shadow: inset 0 0 0 2px var(--p1-seam), inset 0 0 0 4px var(--p1-panel-dk);
} }
[data-theme="ps1"] .rb-statusbar { [data-theme="ps1"] .rb-statusbar {
padding: 4px 12px; padding: 4px 12px;
font-size: 11px; font-size: 11px;
color: #4a525f; color: #2a2017;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }
[data-theme="ps1"] .rb-taskbar { [data-theme="ps1"] .rb-taskbar {
height: 34px; height: 34px;
background: linear-gradient(180deg, #424b59, var(--p1-bg2)); background:
border-top: 1px solid #5b6473; 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 { [data-theme="ps1"] .rb-start {
display: flex; display: flex;
@@ -105,21 +177,27 @@
gap: 7px; gap: 7px;
height: 24px; height: 24px;
padding: 0 14px; padding: 0 14px;
border: 1px solid #6b7585; border: 2px solid var(--p1-seam);
border-radius: 2px; border-radius: 0;
background: #4a525f; background: var(--p1-void1);
color: #eef1f6; color: var(--p1-seam);
font: 11px Verdana, sans-serif; font: 11px Verdana, sans-serif;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; 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 { [data-theme="ps1"] .rb-start-logo {
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50%; border-radius: 0;
background: #eef1f6; background: var(--p1-mag);
box-shadow: inset 0 0 0 3px #4a525f, inset 0 0 0 4px #eef1f6; 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 { [data-theme="ps1"] .rb-task {
display: flex; display: flex;
@@ -127,26 +205,28 @@
gap: 7px; gap: 7px;
height: 24px; height: 24px;
padding: 0 12px; padding: 0 12px;
border: 1px solid transparent; border: 2px solid transparent;
background: transparent; background: transparent;
color: #aab2c0; color: #8b93a3;
font-size: 11px; font-size: 11px;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
cursor: default; cursor: default;
} }
[data-theme="ps1"] .rb-task-active { [data-theme="ps1"] .rb-task-active {
border-color: #6b7585; border-color: var(--p1-seam);
background: #4a525f; background: var(--p1-void1);
color: #eef1f6; color: var(--p1-seam);
} }
[data-theme="ps1"] .rb-task-icon { [data-theme="ps1"] .rb-task-icon {
width: 10px; width: 10px;
height: 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 { [data-theme="ps1"] .rb-clock {
color: #cfd5de; color: var(--p1-seam);
font-size: 11px; font-size: 11px;
padding: 0 14px; padding: 0 14px;
letter-spacing: 2px; letter-spacing: 2px;
@@ -158,17 +238,36 @@
letter-spacing: 3px; letter-spacing: 3px;
text-transform: uppercase; text-transform: uppercase;
color: var(--p1-ink); color: var(--p1-ink);
text-shadow: 2px 2px 0 var(--p1-mag); /* hard offset, no AA */
} }
[data-theme="ps1"] .rb-page-sub { [data-theme="ps1"] .rb-page-sub {
margin: 0 0 18px; margin: 0 0 18px;
color: #5a626f; color: #3a2f22;
} }
[data-theme="ps1"] .rb-post-card { [data-theme="ps1"] .rb-post-card {
background: #f1f3f6; background:
border: 1px solid #fff; var(--p1-dither-dark),
border-radius: 2px; #ddd6c0;
background-size: 4px 4px, cover;
border: 0;
border-radius: 0;
padding: 14px 16px; 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 { [data-theme="ps1"] .rb-post-card-title a {
color: var(--p1-ink); color: var(--p1-ink);
@@ -176,30 +275,37 @@
letter-spacing: 1px; letter-spacing: 1px;
} }
[data-theme="ps1"] .rb-post-card-title a:hover { [data-theme="ps1"] .rb-post-card-title a:hover {
color: #000; color: var(--p1-mag);
text-decoration: underline; text-decoration: underline;
} }
[data-theme="ps1"] .rb-post-date { [data-theme="ps1"] .rb-post-date {
font-size: 11px; font-size: 11px;
color: #6b7585; color: #5b513c;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
} }
[data-theme="ps1"] .rb-tag { [data-theme="ps1"] .rb-tag {
font-size: 10px; font-size: 10px;
background: #c7ccd4; background: var(--p1-void1);
border: 1px solid #fff; color: var(--p1-seam);
border: 0;
padding: 1px 7px; padding: 1px 7px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; 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-readmore,
[data-theme="ps1"] .rb-back { [data-theme="ps1"] .rb-back {
color: #3a4351; color: var(--p1-cyan);
text-decoration: none; text-decoration: none;
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; 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 { [data-theme="ps1"] .rb-back {
display: inline-block; display: inline-block;
@@ -209,20 +315,39 @@
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
margin: 0 0 8px; margin: 0 0 8px;
text-shadow: 2px 2px 0 var(--p1-mag);
} }
[data-theme="ps1"] .rb-prose { [data-theme="ps1"] .rb-prose {
line-height: 1.7; line-height: 1.7;
} }
[data-theme="ps1"] .rb-prose code { [data-theme="ps1"] .rb-prose code {
background: #c7ccd4; background: var(--p1-void1);
border: 1px solid #fff; color: var(--p1-seam);
border-radius: 2px; border: 0;
border-radius: 0;
padding: 0 4px; padding: 0 4px;
font-family: "Courier New", monospace; 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 { [data-theme="ps1"] .rb-prose blockquote {
border-left: 3px solid var(--p1-accent); border-left: 4px solid var(--p1-mag);
margin: 12px 0; margin: 12px 0;
padding: 4px 14px; 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;
}
} }
src/themes/ps2.css
+124 -16
View File
@@ -18,34 +18,142 @@
[data-theme="ps2"] body { [data-theme="ps2"] body {
background: 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; position: relative;
overflow-x: hidden; overflow-x: hidden;
} }
/* the drifting translucent "towers" */ /* ---- PS2 BIOS: the bobbing cube field ----
[data-theme="ps2"] body::before { 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: ""; content: "";
position: fixed; position: fixed;
inset: -20% -10% 0; inset: 0;
pointer-events: none; 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; 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 { from {
transform: translateX(0) skewX(-2deg); transform: translate3d(0, 0, 0);
opacity: 0;
} }
10% { opacity: 0.8; }
90% { opacity: 0.8; }
to { 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;
} }
} }
src/themes/ps3.css
+216 -73
View File
@@ -1,62 +1,114 @@
/* ============================================================ /* ============================================================
Theme: PlayStation 3 — scoped to [data-theme="ps3"] Theme: PlayStation 3 — scoped to [data-theme="ps3"]
XMB era: deep gradient that drifts through the day, a flowing XMB era: a teal→blue sky that drifts through the day, a slow
light wave, glossy black-glass panels, hair-thin white type. flowing light ribbon, thin white type, and the signature soft
glowing selection bar with glassy translucent panels.
============================================================ */ ============================================================ */
[data-theme="ps3"] { [data-theme="ps3"] {
--p3-ink: #f4f8ff; --p3-ink: #f4f8ff;
--p3-dim: #9fb4cf; --p3-dim: #b7cbe2;
--p3-line: rgba(255, 255, 255, 0.16); --p3-line: rgba(255, 255, 255, 0.18);
--p3-glass: rgba(8, 14, 28, 0.55); --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-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-weight: 200; font-weight: 200;
font-size: 14px; font-size: 14px;
color: var(--p3-ink); color: var(--p3-ink);
} }
/* signature XMB teal→blue, light pooling from the top, slow hue drift */
[data-theme="ps3"] body { [data-theme="ps3"] body {
background: linear-gradient(120deg, #04122e, #0a2a5e, #04122e, #1a0a3e); background:
background-size: 400% 400%; radial-gradient(
animation: ps3-sky 40s ease infinite; 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 { @keyframes ps3-sky {
0% { 0% {
background-position: 0% 50%; filter: hue-rotate(0deg) saturate(1);
} }
50% { 50% {
background-position: 100% 50%; filter: hue-rotate(-22deg) saturate(1.12);
} }
100% { 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 { [data-theme="ps3"] body::before {
content: ""; content: "";
position: fixed; position: fixed;
left: -10%; left: -20%;
right: -10%; right: -20%;
top: 38%; top: 46%;
height: 220px; height: 320px;
pointer-events: none; pointer-events: none;
background: radial-gradient( background:
60% 100% at 50% 50%, radial-gradient(
rgba(150, 200, 255, 0.22), 55% 120% at 38% 50%,
transparent 70% rgba(190, 232, 255, 0.28),
); transparent 70%
filter: blur(8px); ),
transform: skewY(-4deg); radial-gradient(
animation: ps3-wave 14s ease-in-out infinite alternate; 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; z-index: 0;
} }
@keyframes ps3-wave { @keyframes ps3-wave {
from { from {
transform: skewY(-5deg) translateY(-30px); transform: skewY(-6deg) translateY(-46px);
} }
to { 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 { [data-theme="ps3"] .rb-desktop {
@@ -69,50 +121,59 @@
border: 1px solid var(--p3-line); border: 1px solid var(--p3-line);
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
backdrop-filter: blur(10px); backdrop-filter: blur(12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); /* 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 { [data-theme="ps3"] .rb-titlebar {
height: 40px; height: 44px;
padding: 0 18px; padding: 0 20px;
border-bottom: 1px solid var(--p3-line); border-bottom: 1px solid var(--p3-line);
color: var(--p3-ink); color: var(--p3-ink);
font-weight: 200; 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 { [data-theme="ps3"] .rb-titlebar-icon {
width: 12px; width: 13px;
height: 12px; height: 13px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, #6fa8ff); background: radial-gradient(circle at 34% 28%, #fff, #7fb6ff 55%, #2f74d8);
box-shadow: 0 0 12px rgba(120, 180, 255, 0.8); box-shadow: 0 0 14px rgba(140, 200, 255, 0.9);
} }
[data-theme="ps3"] .rb-titlebar-buttons { [data-theme="ps3"] .rb-titlebar-buttons {
display: none; display: none;
} }
[data-theme="ps3"] .rb-menubar { [data-theme="ps3"] .rb-menubar {
padding: 10px 16px; padding: 9px 16px;
border-bottom: 1px solid var(--p3-line); border-bottom: 1px solid var(--p3-line);
} }
[data-theme="ps3"] .rb-menu-link { [data-theme="ps3"] .rb-menu-link {
text-decoration: none; text-decoration: none;
padding: 5px 14px; padding: 6px 16px;
border-radius: 3px;
color: var(--p3-dim); color: var(--p3-dim);
font-size: 13px; 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 { [data-theme="ps3"] .rb-menu-link:hover {
color: #fff; 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 { [data-theme="ps3"] .rb-switcher-label {
color: var(--p3-dim); color: var(--p3-dim);
font-size: 12px; font-size: 12px;
} }
[data-theme="ps3"] .rb-switcher-select { [data-theme="ps3"] .rb-switcher-select {
background: rgba(4, 12, 28, 0.85); background: rgba(6, 20, 42, 0.8);
color: var(--p3-ink); color: var(--p3-ink);
border: 1px solid var(--p3-line); border: 1px solid var(--p3-line);
border-radius: 3px; border-radius: 3px;
@@ -121,28 +182,44 @@
} }
[data-theme="ps3"] .rb-content { [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 { [data-theme="ps3"] .rb-statusbar {
border-top: 1px solid var(--p3-line); border-top: 1px solid var(--p3-line);
padding: 7px 18px; padding: 9px 20px;
font-size: 11px; font-size: 11px;
color: var(--p3-dim); 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 { [data-theme="ps3"] .rb-taskbar {
height: 38px; height: 40px;
background: linear-gradient(180deg, rgba(8, 18, 40, 0.75), rgba(2, 6, 16, 0.9)); background: linear-gradient(
180deg,
rgba(10, 28, 56, 0.7),
rgba(2, 8, 20, 0.88)
);
border-top: 1px solid var(--p3-line); 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 { [data-theme="ps3"] .rb-start {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
height: 26px; height: 27px;
padding: 0 18px; padding: 0 18px;
border: 1px solid var(--p3-line); border: 1px solid var(--p3-line);
border-radius: 14px; border-radius: 14px;
@@ -151,23 +228,24 @@
font: 200 12px "Segoe UI", sans-serif; font: 200 12px "Segoe UI", sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
cursor: pointer; cursor: pointer;
transition: background 0.25s;
} }
[data-theme="ps3"] .rb-start:hover { [data-theme="ps3"] .rb-start:hover {
background: rgba(120, 180, 255, 0.18); background: var(--p3-sel);
} }
[data-theme="ps3"] .rb-start-logo { [data-theme="ps3"] .rb-start-logo {
width: 11px; width: 11px;
height: 11px; height: 11px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, #6fa8ff); background: radial-gradient(circle at 34% 28%, #fff, #7fb6ff 55%, #2f74d8);
box-shadow: 0 0 10px rgba(120, 180, 255, 0.8); box-shadow: 0 0 10px rgba(140, 200, 255, 0.85);
} }
[data-theme="ps3"] .rb-task { [data-theme="ps3"] .rb-task {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
height: 26px; height: 27px;
padding: 0 14px; padding: 0 16px;
border: 1px solid transparent; border: 1px solid transparent;
background: transparent; background: transparent;
color: var(--p3-dim); color: var(--p3-dim);
@@ -175,16 +253,17 @@
cursor: default; cursor: default;
} }
[data-theme="ps3"] .rb-task-active { [data-theme="ps3"] .rb-task-active {
border-color: var(--p3-line);
border-radius: 14px; border-radius: 14px;
color: #fff; 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 { [data-theme="ps3"] .rb-task-icon {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; 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 { [data-theme="ps3"] .rb-clock {
color: var(--p3-ink); color: var(--p3-ink);
@@ -196,27 +275,37 @@
[data-theme="ps3"] .rb-page-title { [data-theme="ps3"] .rb-page-title {
margin: 0 0 4px; margin: 0 0 4px;
font-size: 34px; font-size: 36px;
font-weight: 100; font-weight: 100;
letter-spacing: 1px; letter-spacing: 0.5px;
color: #fff; 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 { [data-theme="ps3"] .rb-page-sub {
margin: 0 0 24px; margin: 0 0 24px;
color: var(--p3-dim); 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 { [data-theme="ps3"] .rb-post-card {
border: 1px solid var(--p3-line); border: 1px solid var(--p3-line);
border-radius: 4px; border-radius: 4px;
padding: 18px 20px; padding: 18px 22px;
background: rgba(255, 255, 255, 0.04); background: linear-gradient(
transition: background 0.25s, box-shadow 0.25s, transform 0.25s; 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 { [data-theme="ps3"] .rb-post-card:hover {
background: rgba(120, 180, 255, 0.12); background: var(--p3-sel);
box-shadow: 0 0 30px rgba(80, 150, 255, 0.3); box-shadow:
transform: translateX(4px); 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 { [data-theme="ps3"] .rb-post-card-title a {
color: #fff; color: #fff;
@@ -224,25 +313,25 @@
font-weight: 200; font-weight: 200;
} }
[data-theme="ps3"] .rb-post-card-title a:hover { [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 { [data-theme="ps3"] .rb-post-date {
font-size: 11px; font-size: 11px;
color: var(--p3-dim); color: var(--p3-dim);
} }
[data-theme="ps3"] .rb-post-excerpt { [data-theme="ps3"] .rb-post-excerpt {
color: #d3e2f7; color: #d8e6f9;
} }
[data-theme="ps3"] .rb-tag { [data-theme="ps3"] .rb-tag {
font-size: 10px; font-size: 10px;
border: 1px solid var(--p3-line); border: 1px solid var(--p3-line);
border-radius: 12px; border-radius: 12px;
padding: 1px 10px; padding: 1px 10px;
color: #bcd4f5; color: #c4d9f7;
} }
[data-theme="ps3"] .rb-readmore, [data-theme="ps3"] .rb-readmore,
[data-theme="ps3"] .rb-back { [data-theme="ps3"] .rb-back {
color: #9fc6ff; color: #a9cdff;
text-decoration: none; text-decoration: none;
font-size: 12px; font-size: 12px;
} }
@@ -253,19 +342,19 @@
[data-theme="ps3"] .rb-article-title { [data-theme="ps3"] .rb-article-title {
font-weight: 100; font-weight: 100;
color: #fff; 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; margin: 0 0 8px;
} }
[data-theme="ps3"] .rb-prose { [data-theme="ps3"] .rb-prose {
line-height: 1.85; line-height: 1.85;
color: #dce8f9; color: #e0ecfa;
font-weight: 300; font-weight: 300;
} }
[data-theme="ps3"] .rb-prose a { [data-theme="ps3"] .rb-prose a {
color: #9fc6ff; color: #a9cdff;
} }
[data-theme="ps3"] .rb-prose code { [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: 1px solid var(--p3-line);
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 5px;
@@ -275,5 +364,59 @@
border-left: 2px solid #6fa8ff; border-left: 2px solid #6fa8ff;
margin: 14px 0; margin: 14px 0;
padding: 6px 16px; 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);
} }
src/themes/registry.ts
+1 -1
View File
@@ -44,7 +44,7 @@ export const THEMES: ThemeMeta[] = [
{ {
id: "ps1", id: "ps1",
name: "PlayStation 1", name: "PlayStation 1",
blurb: "Gray BIOS. Memory card and CD player.", blurb: "Affine texture swim, dithered polygons.",
era: "1994", era: "1994",
}, },
{ {