Refine PS1/PS2/PS3/NDS themes and add decorative background field
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:
@@ -50,6 +50,11 @@ img {
|
||||
padding: 0 0 40px; /* room for the fixed taskbar */
|
||||
}
|
||||
|
||||
/* Opt-in decorative background field (themes enable it). */
|
||||
.rb-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rb-window {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
import { THEMES, type ThemeId } from "@/themes/registry";
|
||||
import { getSettings } from "@/lib/settings";
|
||||
import { isAdmin } from "@/lib/auth";
|
||||
@@ -29,6 +29,30 @@ export default async function Shell({
|
||||
|
||||
return (
|
||||
<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-titlebar">
|
||||
<span className="rb-titlebar-icon" aria-hidden />
|
||||
|
||||
+182
-126
@@ -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);
|
||||
}
|
||||
|
||||
+186
-61
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+124
-16
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+216
-73
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user