/* ============================================================ 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). ============================================================ */ [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; font-size: 14px; color: var(--d-ink); } /* pale graph-paper background like 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-attachment: fixed; } /* the window is the menu canvas */ [data-theme="nds"] .rb-window { background: transparent; border: none; border-radius: 0; padding: 8px; box-shadow: none; } /* top status strip: User name, clock, date, battery */ [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); font-weight: bold; letter-spacing: 0.3px; text-shadow: none; } [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); } [data-theme="nds"] .rb-titlebar-buttons { display: none; } /* menubar = white rounded tile holding the chunky touch buttons */ [data-theme="nds"] .rb-menubar { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: #ffffff; border: 2px solid var(--d-line); } [data-theme="nds"] .rb-menu-link { text-decoration: none; padding: 6px 16px; border-radius: 18px; color: var(--d-ink); font-weight: bold; background: linear-gradient(180deg, #ffffff, #e3ebef); border: 2px solid var(--d-line); transition: all 0.12s; } [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); } [data-theme="nds"] .rb-switcher-label { font-weight: bold; font-size: 12px; color: var(--d-cyan-dk); } [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; color: var(--d-ink); } /* the main content = big white touch-screen tile */ [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; } [data-theme="nds"] .rb-statusbar { padding: 6px 12px; font-size: 11px; color: #71808a; } /* bottom strip = rounded tile dock holding the launch buttons */ [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); } [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; cursor: pointer; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } [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: 2px solid var(--d-line); border-radius: 16px; background: linear-gradient(180deg, #ffffff, #e3ebef); 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); } [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-dk); } [data-theme="nds"] .rb-page-sub { margin: 0 0 18px; color: #71808a; } /* post cards = white menu tiles with the signature thick border */ [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; } [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); } [data-theme="nds"] .rb-post-card-title a { color: var(--d-cyan-dk); text-decoration: none; font-weight: bold; } [data-theme="nds"] .rb-post-date { font-size: 12px; color: #93a0a8; } [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); font-weight: bold; } [data-theme="nds"] .rb-readmore, [data-theme="nds"] .rb-back { color: var(--d-cyan-dk); 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-dk); 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-dk); } [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 10px 10px 0; } [data-theme="nds"] .rb-prose h1, [data-theme="nds"] .rb-prose h2, [data-theme="nds"] .rb-prose h3 { color: var(--d-cyan-dk); }