diff --git a/src/app/globals.css b/src/app/globals.css index f363717..9617f2e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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, diff --git a/src/themes/dreamcast.css b/src/themes/dreamcast.css new file mode 100644 index 0000000..aaa5c14 --- /dev/null +++ b/src/themes/dreamcast.css @@ -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; +} diff --git a/src/themes/jv2002.css b/src/themes/jv2002.css new file mode 100644 index 0000000..fa227a1 --- /dev/null +++ b/src/themes/jv2002.css @@ -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; +} diff --git a/src/themes/nds.css b/src/themes/nds.css new file mode 100644 index 0000000..a2351e8 --- /dev/null +++ b/src/themes/nds.css @@ -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; +} diff --git a/src/themes/ps1.css b/src/themes/ps1.css new file mode 100644 index 0000000..12ef986 --- /dev/null +++ b/src/themes/ps1.css @@ -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; +} diff --git a/src/themes/ps3.css b/src/themes/ps3.css new file mode 100644 index 0000000..7cd695e --- /dev/null +++ b/src/themes/ps3.css @@ -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); +} diff --git a/src/themes/registry.ts b/src/themes/registry.ts index b140025..302cebc 100644 --- a/src/themes/registry.ts +++ b/src/themes/registry.ts @@ -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"; diff --git a/src/themes/wii.css b/src/themes/wii.css new file mode 100644 index 0000000..c88cc78 --- /dev/null +++ b/src/themes/wii.css @@ -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; +}