feat: add 6 more skins (PS1, PS3, Wii, NDS, Dreamcast, JV2002)
Brings the catalog to nine. Each is a single scoped [data-theme="..."] CSS file plus a registry entry — no markup changes. - ps1: charcoal BIOS, gray panels, uppercase letterspacing - ps3: animated XMB sky gradient + drifting wave, black glass - wii: white channels, rounded pills, soft blue glow - nds: silver shell with content framed as the touch screen - dreamcast: cream BIOS, conic-gradient orange swirl, lowercase blue - jv2002: dense boxy portal, Verdana 11px, red masthead, blue nav tabs Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,12 @@
|
||||
@import "../themes/xp.css";
|
||||
@import "../themes/ninex.css";
|
||||
@import "../themes/ps2.css";
|
||||
@import "../themes/ps1.css";
|
||||
@import "../themes/ps3.css";
|
||||
@import "../themes/wii.css";
|
||||
@import "../themes/nds.css";
|
||||
@import "../themes/dreamcast.css";
|
||||
@import "../themes/jv2002.css";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -0,0 +1,249 @@
|
||||
/* ============================================================
|
||||
Theme: Sega Dreamcast — scoped to [data-theme="dreamcast"]
|
||||
Cream BIOS calm, the orange swirl, friendly blue type, bubbly
|
||||
rounded VMU-flavored chrome.
|
||||
============================================================ */
|
||||
|
||||
[data-theme="dreamcast"] {
|
||||
--dc-orange: #f47b20;
|
||||
--dc-orange-dk: #d85f0a;
|
||||
--dc-blue: #143d8c;
|
||||
--dc-blue-lt: #2f6ad0;
|
||||
--dc-cream: #f3efe6;
|
||||
--dc-ink: #2a2f3a;
|
||||
font-family: "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--dc-ink);
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] body {
|
||||
background: linear-gradient(180deg, #fbf9f3 0%, #e9e3d6 100%) fixed;
|
||||
}
|
||||
|
||||
/* reusable swirl */
|
||||
[data-theme="dreamcast"] .rb-titlebar-icon,
|
||||
[data-theme="dreamcast"] .rb-start-logo,
|
||||
[data-theme="dreamcast"] .rb-task-icon {
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
var(--dc-orange),
|
||||
#ffd0a0,
|
||||
var(--dc-orange),
|
||||
var(--dc-orange-dk),
|
||||
var(--dc-orange)
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] .rb-window {
|
||||
background: #fff;
|
||||
border: 1px solid #ded7c8;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
box-shadow: 0 10px 30px rgba(212, 95, 10, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] .rb-titlebar {
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
background: linear-gradient(180deg, #ffffff, var(--dc-cream));
|
||||
border-bottom: 2px solid var(--dc-orange);
|
||||
color: var(--dc-blue);
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-titlebar-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-titlebar-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] .rb-menubar {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #ece6d8;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-menu-link {
|
||||
text-decoration: none;
|
||||
padding: 6px 16px;
|
||||
border-radius: 18px;
|
||||
color: var(--dc-blue);
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-menu-link:hover {
|
||||
background: var(--dc-orange);
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-switcher-label {
|
||||
color: var(--dc-orange-dk);
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-switcher-select {
|
||||
font: 13px "Trebuchet MS", sans-serif;
|
||||
border: 2px solid var(--dc-orange);
|
||||
border-radius: 18px;
|
||||
padding: 4px 12px;
|
||||
background: #fff;
|
||||
color: var(--dc-blue);
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] .rb-content {
|
||||
padding: 26px 28px;
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] .rb-statusbar {
|
||||
border-top: 1px solid #ece6d8;
|
||||
padding: 8px 20px;
|
||||
font-size: 12px;
|
||||
color: #8a8270;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] .rb-taskbar {
|
||||
height: 40px;
|
||||
background: linear-gradient(180deg, #fffdf8, var(--dc-cream));
|
||||
border-top: 2px solid var(--dc-orange);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 28px;
|
||||
padding: 0 18px;
|
||||
border: 2px solid var(--dc-orange);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
color: var(--dc-blue);
|
||||
font: bold 13px "Trebuchet MS", sans-serif;
|
||||
text-transform: lowercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-start:hover {
|
||||
background: var(--dc-orange);
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-start-logo {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 28px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #e3dccb;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
color: var(--dc-blue);
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-transform: lowercase;
|
||||
cursor: default;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-task-active {
|
||||
border-color: var(--dc-orange);
|
||||
box-shadow: 0 0 0 2px rgba(244, 123, 32, 0.25);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-task-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-clock {
|
||||
color: var(--dc-blue);
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
[data-theme="dreamcast"] .rb-page-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
color: var(--dc-orange);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-page-sub {
|
||||
margin: 0 0 20px;
|
||||
color: var(--dc-blue-lt);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-post-card {
|
||||
border: 1px solid #ece6d8;
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
background: linear-gradient(180deg, #ffffff, #fbf8f1);
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-post-card:hover {
|
||||
box-shadow: 0 6px 20px rgba(244, 123, 32, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-post-card-title a {
|
||||
color: var(--dc-blue);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-post-card-title a:hover {
|
||||
color: var(--dc-orange-dk);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-post-date {
|
||||
font-size: 12px;
|
||||
color: #a89c84;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-tag {
|
||||
font-size: 11px;
|
||||
background: #fff0e3;
|
||||
border: 1px solid #ffc99c;
|
||||
border-radius: 12px;
|
||||
padding: 1px 10px;
|
||||
color: var(--dc-orange-dk);
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-readmore,
|
||||
[data-theme="dreamcast"] .rb-back {
|
||||
color: var(--dc-orange-dk);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-article-title {
|
||||
color: var(--dc-orange);
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-prose {
|
||||
line-height: 1.75;
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-prose a {
|
||||
color: var(--dc-blue-lt);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-prose code {
|
||||
background: #fff0e3;
|
||||
border: 1px solid #ffc99c;
|
||||
border-radius: 6px;
|
||||
padding: 0 5px;
|
||||
font-family: "Courier New", monospace;
|
||||
color: var(--dc-orange-dk);
|
||||
}
|
||||
[data-theme="dreamcast"] .rb-prose blockquote {
|
||||
border-left: 4px solid var(--dc-orange);
|
||||
margin: 14px 0;
|
||||
padding: 6px 16px;
|
||||
background: #fdf6ef;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
/* ============================================================
|
||||
Theme: Jeuxvideo.com circa 2002 — scoped to [data-theme="jv2002"]
|
||||
Early-2000s French gaming portal: dense boxy tables, Verdana
|
||||
11px, hard gray borders, gradient section bars, blue links,
|
||||
a loud red/orange masthead. Webpage, not an OS window.
|
||||
============================================================ */
|
||||
|
||||
[data-theme="jv2002"] {
|
||||
--jv-red: #c4161c;
|
||||
--jv-orange: #f08000;
|
||||
--jv-blue: #003399;
|
||||
--jv-link: #0033cc;
|
||||
--jv-bar1: #e9e9e9;
|
||||
--jv-bar2: #c4c4c4;
|
||||
--jv-border: #9a9a9a;
|
||||
font-family: Verdana, Geneva, Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
[data-theme="jv2002"] body {
|
||||
background: #6b6b6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23707070'/%3E%3Crect width='2' height='2' fill='%23686868'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23686868'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* the page = a centered bordered table */
|
||||
[data-theme="jv2002"] .rb-window {
|
||||
width: min(800px, calc(100% - 16px));
|
||||
margin: 10px auto;
|
||||
background: #fff;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
box-shadow: 0 0 0 1px #fff, 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* masthead */
|
||||
[data-theme="jv2002"] .rb-titlebar {
|
||||
height: 46px;
|
||||
padding: 0 12px;
|
||||
background: linear-gradient(180deg, #e2231a 0%, var(--jv-red) 50%, #8e0f12 100%);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-style: italic;
|
||||
letter-spacing: -0.5px;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 2px solid var(--jv-orange);
|
||||
}
|
||||
[data-theme="jv2002"] .rb-titlebar-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--jv-orange);
|
||||
transform: rotate(45deg);
|
||||
box-shadow: inset 0 0 0 2px #fff;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-titlebar-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* nav tabs */
|
||||
[data-theme="jv2002"] .rb-menubar {
|
||||
padding: 3px 6px;
|
||||
background: linear-gradient(180deg, var(--jv-blue), #001f66);
|
||||
gap: 2px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-menu-link {
|
||||
text-decoration: none;
|
||||
padding: 3px 10px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #3a5fb8, #14307e);
|
||||
border: 1px solid #6f8fd0;
|
||||
border-bottom: none;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-menu-link:hover {
|
||||
background: var(--jv-orange);
|
||||
color: #000;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-switcher-label {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-switcher-select {
|
||||
font: 11px Verdana, sans-serif;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
padding: 0 2px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
[data-theme="jv2002"] .rb-content {
|
||||
background: #fff;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
[data-theme="jv2002"] .rb-statusbar {
|
||||
padding: 3px 8px;
|
||||
font-size: 10px;
|
||||
color: #444;
|
||||
background: var(--jv-bar1);
|
||||
border-top: 1px solid var(--jv-border);
|
||||
}
|
||||
|
||||
/* footer rail */
|
||||
[data-theme="jv2002"] .rb-taskbar {
|
||||
height: 28px;
|
||||
background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
|
||||
border-top: 2px solid var(--jv-orange);
|
||||
gap: 4px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
height: 20px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #888;
|
||||
border-radius: 0;
|
||||
background: linear-gradient(180deg, #f08000, #c46400);
|
||||
color: #fff;
|
||||
font: bold 11px Verdana, sans-serif;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-start-logo {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: #fff;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
[data-theme="jv2002"] .rb-task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #666;
|
||||
background: linear-gradient(180deg, #5a5a5a, #3a3a3a);
|
||||
color: #ddd;
|
||||
font-size: 11px;
|
||||
cursor: default;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-task-active {
|
||||
background: linear-gradient(180deg, #707070, #4a4a4a);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-task-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--jv-orange);
|
||||
}
|
||||
[data-theme="jv2002"] .rb-clock {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* ---- content: dense boxy article list ---- */
|
||||
[data-theme="jv2002"] .rb-page-head {
|
||||
background: linear-gradient(180deg, var(--jv-bar1), var(--jv-bar2));
|
||||
border: 1px solid var(--jv-border);
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-page-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--jv-red);
|
||||
}
|
||||
[data-theme="jv2002"] .rb-page-sub {
|
||||
margin: 2px 0 0;
|
||||
font-size: 11px;
|
||||
color: #555;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-list {
|
||||
gap: 8px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-card {
|
||||
border: 1px solid var(--jv-border);
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-card-head {
|
||||
background: linear-gradient(180deg, var(--jv-bar1), var(--jv-bar2));
|
||||
border-bottom: 1px solid var(--jv-border);
|
||||
padding: 4px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-card-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-card-title a {
|
||||
color: var(--jv-blue);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-card-title a:hover {
|
||||
color: var(--jv-red);
|
||||
text-decoration: underline;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-date {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-excerpt {
|
||||
padding: 6px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-post-meta {
|
||||
padding: 4px 8px 6px;
|
||||
font-size: 10px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-tag {
|
||||
font-size: 9px;
|
||||
background: #ffe9cc;
|
||||
border: 1px solid var(--jv-orange);
|
||||
padding: 0 5px;
|
||||
color: #a55400;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-readmore,
|
||||
[data-theme="jv2002"] .rb-back,
|
||||
[data-theme="jv2002"] .rb-prose a {
|
||||
color: var(--jv-link);
|
||||
text-decoration: underline;
|
||||
font-size: 11px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-article {
|
||||
border: 1px solid var(--jv-border);
|
||||
padding: 0;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-article-title {
|
||||
background: linear-gradient(180deg, var(--jv-bar1), var(--jv-bar2));
|
||||
border-bottom: 1px solid var(--jv-border);
|
||||
margin: 0;
|
||||
padding: 6px 10px;
|
||||
font-size: 15px;
|
||||
color: var(--jv-red);
|
||||
}
|
||||
[data-theme="jv2002"] .rb-article-meta {
|
||||
padding: 5px 10px;
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
background: #f6f6f6;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-prose {
|
||||
padding: 10px;
|
||||
line-height: 1.5;
|
||||
font-size: 11px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-prose h2 {
|
||||
font-size: 13px;
|
||||
color: var(--jv-blue);
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-prose code {
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 3px;
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
[data-theme="jv2002"] .rb-prose blockquote {
|
||||
border-left: 3px solid var(--jv-orange);
|
||||
margin: 8px 0;
|
||||
padding: 4px 10px;
|
||||
background: #fff7ec;
|
||||
}
|
||||
|
||||
/* JV2002 didn't do back-link inside article box nicely; keep it outside */
|
||||
[data-theme="jv2002"] .rb-article > .rb-back {
|
||||
display: block;
|
||||
padding: 6px 10px 0;
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
/* ============================================================
|
||||
Theme: Nintendo DS — scoped to [data-theme="nds"]
|
||||
The DS firmware menu: brushed silver shell, glossy cyan
|
||||
gradients, dual-screen bezel framing, chunky rounded touch
|
||||
targets.
|
||||
============================================================ */
|
||||
|
||||
[data-theme="nds"] {
|
||||
--d-cyan: #1ba1c4;
|
||||
--d-cyan-lt: #7fd6ec;
|
||||
--d-silver: #c9d2d8;
|
||||
--d-silver-dk: #9aa6ae;
|
||||
--d-ink: #2b3a42;
|
||||
font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--d-ink);
|
||||
}
|
||||
|
||||
[data-theme="nds"] body {
|
||||
background: linear-gradient(160deg, #aeb9c0 0%, #7e8b93 100%) fixed;
|
||||
}
|
||||
|
||||
/* the window is the silver shell; content is the touch screen */
|
||||
[data-theme="nds"] .rb-window {
|
||||
background: linear-gradient(180deg, #e7edf0, var(--d-silver));
|
||||
border: 1px solid #fff;
|
||||
border-radius: 14px;
|
||||
padding: 6px;
|
||||
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4),
|
||||
inset 0 0 0 1px var(--d-silver-dk);
|
||||
}
|
||||
|
||||
[data-theme="nds"] .rb-titlebar {
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background: linear-gradient(180deg, #2fb6d8, var(--d-cyan));
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
[data-theme="nds"] .rb-titlebar-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #fff, var(--d-cyan-lt));
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
[data-theme="nds"] .rb-titlebar-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="nds"] .rb-menubar {
|
||||
padding: 8px 10px;
|
||||
background: linear-gradient(180deg, #eef3f5, var(--d-silver));
|
||||
}
|
||||
[data-theme="nds"] .rb-menu-link {
|
||||
text-decoration: none;
|
||||
padding: 5px 14px;
|
||||
border-radius: 16px;
|
||||
color: var(--d-ink);
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #ffffff, #dde5e9);
|
||||
border: 1px solid var(--d-silver-dk);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
[data-theme="nds"] .rb-menu-link:hover {
|
||||
background: linear-gradient(180deg, #2fb6d8, var(--d-cyan));
|
||||
color: #fff;
|
||||
border-color: var(--d-cyan);
|
||||
}
|
||||
[data-theme="nds"] .rb-switcher-label {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: var(--d-cyan);
|
||||
}
|
||||
[data-theme="nds"] .rb-switcher-select {
|
||||
font: 13px "Trebuchet MS", sans-serif;
|
||||
border: 1px solid var(--d-silver-dk);
|
||||
border-radius: 14px;
|
||||
padding: 4px 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* the lower touch screen */
|
||||
[data-theme="nds"] .rb-content {
|
||||
background: #f7fbfc;
|
||||
margin: 6px 2px;
|
||||
padding: 22px 24px;
|
||||
border-radius: 10px;
|
||||
border: 3px solid #2b3a42;
|
||||
box-shadow: inset 0 0 18px rgba(27, 161, 196, 0.12);
|
||||
}
|
||||
|
||||
[data-theme="nds"] .rb-statusbar {
|
||||
padding: 5px 12px;
|
||||
font-size: 11px;
|
||||
color: #5a6a72;
|
||||
}
|
||||
|
||||
[data-theme="nds"] .rb-taskbar {
|
||||
height: 38px;
|
||||
background: linear-gradient(180deg, #b9c4cb, #8e9aa2);
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
[data-theme="nds"] .rb-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 28px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--d-silver-dk);
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, #2fb6d8, var(--d-cyan));
|
||||
color: #fff;
|
||||
font: bold 13px "Trebuchet MS", sans-serif;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
[data-theme="nds"] .rb-start-logo {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #fff, var(--d-cyan-lt));
|
||||
}
|
||||
[data-theme="nds"] .rb-task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--d-silver-dk);
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, #ffffff, #dde5e9);
|
||||
color: var(--d-ink);
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
}
|
||||
[data-theme="nds"] .rb-task-active {
|
||||
background: linear-gradient(180deg, #2fb6d8, var(--d-cyan));
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="nds"] .rb-task-icon {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 3px;
|
||||
background: var(--d-cyan-lt);
|
||||
}
|
||||
[data-theme="nds"] .rb-clock {
|
||||
color: var(--d-ink);
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
[data-theme="nds"] .rb-page-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: var(--d-cyan);
|
||||
}
|
||||
[data-theme="nds"] .rb-page-sub {
|
||||
margin: 0 0 18px;
|
||||
color: #5a6a72;
|
||||
}
|
||||
[data-theme="nds"] .rb-post-card {
|
||||
border: 1px solid var(--d-silver-dk);
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
background: linear-gradient(180deg, #ffffff, #eef4f6);
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
[data-theme="nds"] .rb-post-card:hover {
|
||||
box-shadow: 0 5px 16px rgba(27, 161, 196, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
[data-theme="nds"] .rb-post-card-title a {
|
||||
color: var(--d-cyan);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
[data-theme="nds"] .rb-post-date {
|
||||
font-size: 12px;
|
||||
color: #8a98a0;
|
||||
}
|
||||
[data-theme="nds"] .rb-tag {
|
||||
font-size: 11px;
|
||||
background: #e4f4f9;
|
||||
border: 1px solid var(--d-cyan-lt);
|
||||
border-radius: 12px;
|
||||
padding: 1px 9px;
|
||||
color: var(--d-cyan);
|
||||
font-weight: bold;
|
||||
}
|
||||
[data-theme="nds"] .rb-readmore,
|
||||
[data-theme="nds"] .rb-back {
|
||||
color: var(--d-cyan);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
[data-theme="nds"] .rb-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[data-theme="nds"] .rb-article-title {
|
||||
color: var(--d-cyan);
|
||||
font-weight: bold;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
[data-theme="nds"] .rb-prose {
|
||||
line-height: 1.7;
|
||||
}
|
||||
[data-theme="nds"] .rb-prose a {
|
||||
color: var(--d-cyan);
|
||||
}
|
||||
[data-theme="nds"] .rb-prose code {
|
||||
background: #e4f4f9;
|
||||
border: 1px solid var(--d-cyan-lt);
|
||||
border-radius: 6px;
|
||||
padding: 0 5px;
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
[data-theme="nds"] .rb-prose blockquote {
|
||||
border-left: 4px solid var(--d-cyan);
|
||||
margin: 12px 0;
|
||||
padding: 6px 14px;
|
||||
background: #eef7fa;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
/* ============================================================
|
||||
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.
|
||||
============================================================ */
|
||||
|
||||
[data-theme="ps1"] {
|
||||
--p1-bg1: #3a4351;
|
||||
--p1-bg2: #1c222c;
|
||||
--p1-panel: #c7ccd4;
|
||||
--p1-panel-dk: #9aa1ad;
|
||||
--p1-ink: #2a2f38;
|
||||
--p1-accent: #6b7585;
|
||||
font-family: "Verdana", Geneva, Tahoma, sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--p1-ink);
|
||||
}
|
||||
|
||||
[data-theme="ps1"] body {
|
||||
background: linear-gradient(160deg, var(--p1-bg1) 0%, var(--p1-bg2) 100%) fixed;
|
||||
}
|
||||
|
||||
[data-theme="ps1"] .rb-window {
|
||||
background: var(--p1-panel);
|
||||
border: 2px solid #fff;
|
||||
border-radius: 3px;
|
||||
padding: 0;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
[data-theme="ps1"] .rb-titlebar {
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
background: linear-gradient(180deg, #5b6473, #424b59);
|
||||
color: #eef1f6;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
[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;
|
||||
}
|
||||
[data-theme="ps1"] .rb-titlebar-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="ps1"] .rb-menubar {
|
||||
padding: 6px 10px;
|
||||
background: var(--p1-panel-dk);
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
[data-theme="ps1"] .rb-menu-link {
|
||||
text-decoration: none;
|
||||
padding: 3px 10px;
|
||||
color: var(--p1-ink);
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
[data-theme="ps1"] .rb-menu-link:hover {
|
||||
background: var(--p1-ink);
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="ps1"] .rb-switcher-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
[data-theme="ps1"] .rb-switcher-select {
|
||||
font: 12px Verdana, sans-serif;
|
||||
background: #eef1f6;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
[data-theme="ps1"] .rb-content {
|
||||
background: #e6e9ee;
|
||||
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);
|
||||
}
|
||||
|
||||
[data-theme="ps1"] .rb-statusbar {
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
color: #4a525f;
|
||||
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;
|
||||
}
|
||||
[data-theme="ps1"] .rb-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 24px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #6b7585;
|
||||
border-radius: 2px;
|
||||
background: #4a525f;
|
||||
color: #eef1f6;
|
||||
font: 11px Verdana, sans-serif;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
[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;
|
||||
}
|
||||
[data-theme="ps1"] .rb-task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 24px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: #aab2c0;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
cursor: default;
|
||||
}
|
||||
[data-theme="ps1"] .rb-task-active {
|
||||
border-color: #6b7585;
|
||||
background: #4a525f;
|
||||
color: #eef1f6;
|
||||
}
|
||||
[data-theme="ps1"] .rb-task-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #aab2c0;
|
||||
}
|
||||
[data-theme="ps1"] .rb-clock {
|
||||
color: #cfd5de;
|
||||
font-size: 11px;
|
||||
padding: 0 14px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
[data-theme="ps1"] .rb-page-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 24px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--p1-ink);
|
||||
}
|
||||
[data-theme="ps1"] .rb-page-sub {
|
||||
margin: 0 0 18px;
|
||||
color: #5a626f;
|
||||
}
|
||||
[data-theme="ps1"] .rb-post-card {
|
||||
background: #f1f3f6;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 2px;
|
||||
padding: 14px 16px;
|
||||
box-shadow: 0 1px 0 var(--p1-panel-dk), inset 0 0 0 1px #d2d7df;
|
||||
}
|
||||
[data-theme="ps1"] .rb-post-card-title a {
|
||||
color: var(--p1-ink);
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
[data-theme="ps1"] .rb-post-card-title a:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
[data-theme="ps1"] .rb-post-date {
|
||||
font-size: 11px;
|
||||
color: #6b7585;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
[data-theme="ps1"] .rb-tag {
|
||||
font-size: 10px;
|
||||
background: #c7ccd4;
|
||||
border: 1px solid #fff;
|
||||
padding: 1px 7px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
[data-theme="ps1"] .rb-readmore,
|
||||
[data-theme="ps1"] .rb-back {
|
||||
color: #3a4351;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
[data-theme="ps1"] .rb-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[data-theme="ps1"] .rb-article-title {
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
[data-theme="ps1"] .rb-prose {
|
||||
line-height: 1.7;
|
||||
}
|
||||
[data-theme="ps1"] .rb-prose code {
|
||||
background: #c7ccd4;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
[data-theme="ps1"] .rb-prose blockquote {
|
||||
border-left: 3px solid var(--p1-accent);
|
||||
margin: 12px 0;
|
||||
padding: 4px 14px;
|
||||
background: #dde1e8;
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
/* ============================================================
|
||||
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.
|
||||
============================================================ */
|
||||
|
||||
[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);
|
||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 200;
|
||||
font-size: 14px;
|
||||
color: var(--p3-ink);
|
||||
}
|
||||
|
||||
[data-theme="ps3"] body {
|
||||
background: linear-gradient(120deg, #04122e, #0a2a5e, #04122e, #1a0a3e);
|
||||
background-size: 400% 400%;
|
||||
animation: ps3-sky 40s ease infinite;
|
||||
}
|
||||
@keyframes ps3-sky {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* the flowing XMB wave */
|
||||
[data-theme="ps3"] body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: -10%;
|
||||
right: -10%;
|
||||
top: 38%;
|
||||
height: 220px;
|
||||
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;
|
||||
z-index: 0;
|
||||
}
|
||||
@keyframes ps3-wave {
|
||||
from {
|
||||
transform: skewY(-5deg) translateY(-30px);
|
||||
}
|
||||
to {
|
||||
transform: skewY(3deg) translateY(40px);
|
||||
}
|
||||
}
|
||||
[data-theme="ps3"] .rb-desktop {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
[data-theme="ps3"] .rb-window {
|
||||
background: var(--p3-glass);
|
||||
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);
|
||||
}
|
||||
|
||||
[data-theme="ps3"] .rb-titlebar {
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid var(--p3-line);
|
||||
color: var(--p3-ink);
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
[data-theme="ps3"] .rb-titlebar-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #fff, #6fa8ff);
|
||||
box-shadow: 0 0 12px rgba(120, 180, 255, 0.8);
|
||||
}
|
||||
[data-theme="ps3"] .rb-titlebar-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="ps3"] .rb-menubar {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--p3-line);
|
||||
}
|
||||
[data-theme="ps3"] .rb-menu-link {
|
||||
text-decoration: none;
|
||||
padding: 5px 14px;
|
||||
color: var(--p3-dim);
|
||||
font-size: 13px;
|
||||
transition: color 0.25s, text-shadow 0.25s;
|
||||
}
|
||||
[data-theme="ps3"] .rb-menu-link:hover {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 12px rgba(150, 200, 255, 0.9);
|
||||
}
|
||||
[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);
|
||||
color: var(--p3-ink);
|
||||
border: 1px solid var(--p3-line);
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
font: 12px "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
[data-theme="ps3"] .rb-content {
|
||||
padding: 26px 30px;
|
||||
}
|
||||
|
||||
[data-theme="ps3"] .rb-statusbar {
|
||||
border-top: 1px solid var(--p3-line);
|
||||
padding: 7px 18px;
|
||||
font-size: 11px;
|
||||
color: var(--p3-dim);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
[data-theme="ps3"] .rb-taskbar {
|
||||
height: 38px;
|
||||
background: linear-gradient(180deg, rgba(8, 18, 40, 0.75), rgba(2, 6, 16, 0.9));
|
||||
border-top: 1px solid var(--p3-line);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
[data-theme="ps3"] .rb-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
height: 26px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid var(--p3-line);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--p3-ink);
|
||||
font: 200 12px "Segoe UI", sans-serif;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-theme="ps3"] .rb-start:hover {
|
||||
background: rgba(120, 180, 255, 0.18);
|
||||
}
|
||||
[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);
|
||||
}
|
||||
[data-theme="ps3"] .rb-task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 26px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--p3-dim);
|
||||
font-size: 12px;
|
||||
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);
|
||||
}
|
||||
[data-theme="ps3"] .rb-task-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #6fa8ff;
|
||||
}
|
||||
[data-theme="ps3"] .rb-clock {
|
||||
color: var(--p3-ink);
|
||||
font-size: 12px;
|
||||
padding: 0 16px;
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
[data-theme="ps3"] .rb-page-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 34px;
|
||||
font-weight: 100;
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 20px rgba(120, 180, 255, 0.5);
|
||||
}
|
||||
[data-theme="ps3"] .rb-page-sub {
|
||||
margin: 0 0 24px;
|
||||
color: var(--p3-dim);
|
||||
}
|
||||
[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;
|
||||
}
|
||||
[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);
|
||||
}
|
||||
[data-theme="ps3"] .rb-post-card-title a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 200;
|
||||
}
|
||||
[data-theme="ps3"] .rb-post-card-title a:hover {
|
||||
text-shadow: 0 0 12px rgba(150, 200, 255, 0.9);
|
||||
}
|
||||
[data-theme="ps3"] .rb-post-date {
|
||||
font-size: 11px;
|
||||
color: var(--p3-dim);
|
||||
}
|
||||
[data-theme="ps3"] .rb-post-excerpt {
|
||||
color: #d3e2f7;
|
||||
}
|
||||
[data-theme="ps3"] .rb-tag {
|
||||
font-size: 10px;
|
||||
border: 1px solid var(--p3-line);
|
||||
border-radius: 12px;
|
||||
padding: 1px 10px;
|
||||
color: #bcd4f5;
|
||||
}
|
||||
[data-theme="ps3"] .rb-readmore,
|
||||
[data-theme="ps3"] .rb-back {
|
||||
color: #9fc6ff;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
[data-theme="ps3"] .rb-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
[data-theme="ps3"] .rb-article-title {
|
||||
font-weight: 100;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 18px rgba(120, 180, 255, 0.45);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
[data-theme="ps3"] .rb-prose {
|
||||
line-height: 1.85;
|
||||
color: #dce8f9;
|
||||
font-weight: 300;
|
||||
}
|
||||
[data-theme="ps3"] .rb-prose a {
|
||||
color: #9fc6ff;
|
||||
}
|
||||
[data-theme="ps3"] .rb-prose code {
|
||||
background: rgba(4, 12, 28, 0.7);
|
||||
border: 1px solid var(--p3-line);
|
||||
border-radius: 3px;
|
||||
padding: 0 5px;
|
||||
font-family: "Consolas", monospace;
|
||||
}
|
||||
[data-theme="ps3"] .rb-prose blockquote {
|
||||
border-left: 2px solid #6fa8ff;
|
||||
margin: 14px 0;
|
||||
padding: 6px 16px;
|
||||
background: rgba(120, 180, 255, 0.1);
|
||||
}
|
||||
+46
-1
@@ -2,7 +2,16 @@
|
||||
// create a scoped CSS file under src/themes/, and import it in globals.css.
|
||||
// Everything else (switcher, persistence, SSR attribute) is data-driven.
|
||||
|
||||
export type ThemeId = "xp" | "ninex" | "ps2";
|
||||
export type ThemeId =
|
||||
| "xp"
|
||||
| "ninex"
|
||||
| "ps2"
|
||||
| "ps1"
|
||||
| "ps3"
|
||||
| "wii"
|
||||
| "nds"
|
||||
| "dreamcast"
|
||||
| "jv2002";
|
||||
|
||||
export type ThemeMeta = {
|
||||
id: ThemeId;
|
||||
@@ -32,6 +41,42 @@ export const THEMES: ThemeMeta[] = [
|
||||
blurb: "Swaying blue towers boot menu.",
|
||||
era: "2000",
|
||||
},
|
||||
{
|
||||
id: "ps1",
|
||||
name: "PlayStation 1",
|
||||
blurb: "Gray BIOS. Memory card and CD player.",
|
||||
era: "1994",
|
||||
},
|
||||
{
|
||||
id: "ps3",
|
||||
name: "PlayStation 3",
|
||||
blurb: "XMB wave. Glossy black glass.",
|
||||
era: "2006",
|
||||
},
|
||||
{
|
||||
id: "wii",
|
||||
name: "Nintendo Wii",
|
||||
blurb: "White channels and soft blue glow.",
|
||||
era: "2006",
|
||||
},
|
||||
{
|
||||
id: "nds",
|
||||
name: "Nintendo DS",
|
||||
blurb: "Dual-screen firmware, silver and cyan.",
|
||||
era: "2004",
|
||||
},
|
||||
{
|
||||
id: "dreamcast",
|
||||
name: "Dreamcast",
|
||||
blurb: "Orange swirl. Bubbly VMU vibes.",
|
||||
era: "1998",
|
||||
},
|
||||
{
|
||||
id: "jv2002",
|
||||
name: "Jeuxvideo.com 2002",
|
||||
blurb: "Dense tables, Verdana 11px, blue links.",
|
||||
era: "2002",
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_THEME: ThemeId = "xp";
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
/* ============================================================
|
||||
Theme: Nintendo Wii — scoped to [data-theme="wii"]
|
||||
The Wii Menu: clean white, soft gray gradients, rounded
|
||||
channel tiles, a gentle blue glow on everything.
|
||||
============================================================ */
|
||||
|
||||
[data-theme="wii"] {
|
||||
--w-blue: #009ac7;
|
||||
--w-blue-lt: #4fc6e8;
|
||||
--w-ink: #4a4a4a;
|
||||
--w-line: #d6dde2;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--w-ink);
|
||||
}
|
||||
|
||||
[data-theme="wii"] body {
|
||||
background: linear-gradient(180deg, #fafdff 0%, #e8eef3 100%) fixed;
|
||||
}
|
||||
|
||||
[data-theme="wii"] .rb-window {
|
||||
background: #fff;
|
||||
border: 1px solid var(--w-line);
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
box-shadow: 0 8px 30px rgba(0, 120, 170, 0.12);
|
||||
}
|
||||
|
||||
[data-theme="wii"] .rb-titlebar {
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid var(--w-line);
|
||||
border-radius: 16px 16px 0 0;
|
||||
background: linear-gradient(180deg, #ffffff, #f1f6f9);
|
||||
color: var(--w-blue);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
[data-theme="wii"] .rb-titlebar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #fff, var(--w-blue-lt) 60%, var(--w-blue));
|
||||
box-shadow: 0 0 10px rgba(0, 154, 199, 0.5);
|
||||
}
|
||||
[data-theme="wii"] .rb-titlebar-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="wii"] .rb-menubar {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--w-line);
|
||||
}
|
||||
[data-theme="wii"] .rb-menu-link {
|
||||
text-decoration: none;
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
color: var(--w-ink);
|
||||
font-weight: 600;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
[data-theme="wii"] .rb-menu-link:hover {
|
||||
background: var(--w-blue);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 12px rgba(0, 154, 199, 0.5);
|
||||
}
|
||||
[data-theme="wii"] .rb-switcher-label {
|
||||
color: var(--w-blue);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
[data-theme="wii"] .rb-switcher-select {
|
||||
font: 13px "Helvetica Neue", sans-serif;
|
||||
border: 1px solid var(--w-line);
|
||||
border-radius: 20px;
|
||||
padding: 5px 12px;
|
||||
background: #fff;
|
||||
color: var(--w-ink);
|
||||
}
|
||||
|
||||
[data-theme="wii"] .rb-content {
|
||||
padding: 26px 28px;
|
||||
}
|
||||
|
||||
[data-theme="wii"] .rb-statusbar {
|
||||
border-top: 1px solid var(--w-line);
|
||||
padding: 8px 20px;
|
||||
font-size: 12px;
|
||||
color: #8a99a3;
|
||||
}
|
||||
|
||||
[data-theme="wii"] .rb-taskbar {
|
||||
height: 40px;
|
||||
background: linear-gradient(180deg, #ffffff, #e6edf2);
|
||||
border-top: 1px solid var(--w-line);
|
||||
}
|
||||
[data-theme="wii"] .rb-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 28px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid var(--w-line);
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
color: var(--w-blue);
|
||||
font: 700 13px "Helvetica Neue", sans-serif;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 4px rgba(0, 120, 170, 0.15);
|
||||
}
|
||||
[data-theme="wii"] .rb-start:hover {
|
||||
background: var(--w-blue);
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="wii"] .rb-start-logo {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #fff, var(--w-blue-lt) 60%, var(--w-blue));
|
||||
}
|
||||
[data-theme="wii"] .rb-task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 28px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--w-line);
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
color: var(--w-ink);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
}
|
||||
[data-theme="wii"] .rb-task-active {
|
||||
background: var(--w-blue);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 12px rgba(0, 154, 199, 0.5);
|
||||
}
|
||||
[data-theme="wii"] .rb-task-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--w-blue-lt);
|
||||
}
|
||||
[data-theme="wii"] .rb-clock {
|
||||
color: var(--w-blue);
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
[data-theme="wii"] .rb-page-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--w-blue);
|
||||
}
|
||||
[data-theme="wii"] .rb-page-sub {
|
||||
margin: 0 0 20px;
|
||||
color: #7a8a93;
|
||||
}
|
||||
[data-theme="wii"] .rb-post-list {
|
||||
gap: 18px;
|
||||
}
|
||||
[data-theme="wii"] .rb-post-card {
|
||||
border: 1px solid var(--w-line);
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
background: linear-gradient(180deg, #ffffff, #f6fafc);
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
[data-theme="wii"] .rb-post-card:hover {
|
||||
box-shadow: 0 6px 22px rgba(0, 154, 199, 0.22);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
[data-theme="wii"] .rb-post-card-title a {
|
||||
color: var(--w-blue);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
[data-theme="wii"] .rb-post-date {
|
||||
font-size: 12px;
|
||||
color: #9aa8b0;
|
||||
}
|
||||
[data-theme="wii"] .rb-tag {
|
||||
font-size: 11px;
|
||||
background: #eef6fa;
|
||||
border: 1px solid #c5e6f1;
|
||||
border-radius: 12px;
|
||||
padding: 1px 10px;
|
||||
color: var(--w-blue);
|
||||
font-weight: 600;
|
||||
}
|
||||
[data-theme="wii"] .rb-readmore,
|
||||
[data-theme="wii"] .rb-back {
|
||||
color: var(--w-blue);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
[data-theme="wii"] .rb-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
[data-theme="wii"] .rb-article-title {
|
||||
color: var(--w-blue);
|
||||
font-weight: 800;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
[data-theme="wii"] .rb-prose {
|
||||
line-height: 1.75;
|
||||
}
|
||||
[data-theme="wii"] .rb-prose a {
|
||||
color: var(--w-blue);
|
||||
}
|
||||
[data-theme="wii"] .rb-prose code {
|
||||
background: #eef6fa;
|
||||
border: 1px solid #c5e6f1;
|
||||
border-radius: 6px;
|
||||
padding: 0 6px;
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
[data-theme="wii"] .rb-prose blockquote {
|
||||
border-left: 4px solid var(--w-blue-lt);
|
||||
margin: 14px 0;
|
||||
padding: 6px 16px;
|
||||
background: #f3fafd;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
Reference in New Issue
Block a user