/*
Tailwind is loaded via CDN in `index.html` so this app works on GitHub Pages
without a build step.
Theme system ✨
- We use CSS variables so we can re-theme without rebuilding Tailwind.
- JS sets based on the URL (?theme=...).
*/
:root {
/* App background */
/* Slightly darker wash so cards pop a bit more */
--bg-layer-1: linear-gradient(135deg, rgba(255, 240, 246, 0.75), rgba(255, 247, 237, 0.75));
--bg-image: url("../../assets/background.jpg");
/* Surfaces */
--surface: rgba(255, 255, 255, 0.88);
/* Off-white panel reduces the "bright white" look but stays light */
--panel: #fbfbfd;
--panel-border: rgba(244, 63, 94, 0.22);
--panel-ring: rgba(255, 228, 230, 0.95);
/* Text */
--text: #0b1220;
--text-muted: #334155;
/* Brand */
--accent: #be123c; /* rose-700-ish */
--accent-strong: #ec4899; /* pink-500-ish */
--accent-contrast: #ffffff;
--accent-soft: rgba(255, 228, 230, 1);
--accent-soft-2: rgba(253, 242, 248, 1);
}
/* 1) Basic: plain white background + blue details */
html[data-theme="basic"] {
--bg-layer-1: linear-gradient(180deg, #ffffff, #ffffff);
--bg-image: none;
--panel: #ffffff;
--surface: rgba(255, 255, 255, 1);
--panel-border: rgba(37, 99, 235, 0.18); /* blue */
--panel-ring: rgba(219, 234, 254, 1);
--text: #0f172a;
--text-muted: #334155;
--accent: #1e40af; /* blue-800 */
--accent-strong: #1d4ed8; /* blue-700 */
--accent-contrast: #ffffff;
--accent-soft: rgba(219, 234, 254, 1);
--accent-soft-2: rgba(239, 246, 255, 1);
}
/* 2) Sakura: current site styling (default) */
html[data-theme="sakura"] {
--bg-layer-1: linear-gradient(135deg, rgba(255, 240, 246, 0.85), rgba(255, 247, 237, 0.85));
--bg-image: url("../../assets/background.jpg");
--panel-border: rgba(244, 63, 94, 0.18);
--panel-ring: rgba(255, 228, 230, 1);
--accent: #be123c;
--accent-strong: #ec4899;
--accent-soft: rgba(255, 228, 230, 1);
--accent-soft-2: rgba(253, 242, 248, 1);
}
/* 3) Space: dark + stars */
html[data-theme="space"] {
--bg-layer-1: radial-gradient(1200px circle at 20% 10%, rgba(99, 102, 241, 0.28), transparent 55%),
radial-gradient(1000px circle at 80% 20%, rgba(236, 72, 153, 0.18), transparent 55%),
linear-gradient(180deg, #050714, #0b1026);
--bg-image: none;
--panel: rgb(15, 23, 42);
--surface: rgb(17, 24, 39);
--panel-border: rgba(99, 102, 241, 0.25);
--panel-ring: rgba(99, 102, 241, 0.25);
--text: #e2e8f0;
--text-muted: #94a3b8;
--accent: #a5b4fc; /* indigo-200 */
--accent-strong: #6366f1; /* indigo-500 */
--accent-contrast: #0b1026;
--accent-soft: rgba(99, 102, 241, 0.18);
--accent-soft-2: rgba(14, 165, 233, 0.12);
}
/* 4) Grass: fresh greens */
html[data-theme="grass"] {
--bg-layer-1: radial-gradient(900px circle at 20% 10%, rgba(34, 197, 94, 0.20), transparent 55%),
radial-gradient(900px circle at 80% 10%, rgba(132, 204, 22, 0.16), transparent 55%),
linear-gradient(180deg, rgb(240, 253, 244), rgb(220, 252, 231));
--bg-image: none;
--panel: rgba(255, 255, 255, 0.9);
--surface: rgba(255, 255, 255, 0.92);
--panel-border: rgba(22, 163, 74, 0.22);
--panel-ring: rgba(187, 247, 208, 1);
--text: #052e16;
--text-muted: #14532d;
--accent: #15803d; /* green-700 */
--accent-strong: #22c55e; /* green-500 */
--accent-contrast: #052e16;
--accent-soft: rgba(187, 247, 208, 1);
--accent-soft-2: rgba(220, 252, 231, 1);
}
body {
background: var(--bg-layer-1), var(--bg-image);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* Small utility classes so components can be themed without Tailwind rebuild */
.app-panel {
background: var(--panel);
color: var(--text);
box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
border: 1px solid var(--panel-border);
}
.app-accent {
color: var(--accent);
}
.app-muted {
color: var(--text-muted);
}
.keycap {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.35rem;
border-radius: 0.5rem;
font-size: 0.75rem;
line-height: 1;
font-weight: 700;
user-select: none;
color: var(--text);
background: color-mix(in srgb, var(--panel) 70%, transparent);
border: 1px solid color-mix(in srgb, var(--panel-border) 65%, transparent);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
}
@supports not (color-mix(in srgb, #000 50%, #fff)) {
.keycap {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.12);
}
html[data-theme="space"] .keycap {
background: rgba(2, 6, 23, 0.45);
border-color: rgba(255, 255, 255, 0.14);
color: var(--text);
}
}
.app-btn-primary {
background: var(--accent-strong);
color: var(--accent-contrast);
}
.app-btn-primary:hover {
filter: brightness(0.96);
}
.app-btn-secondary {
background: rgba(255, 255, 255, 0.85);
color: var(--accent);
border: 1px solid var(--panel-border);
}
/* Furigana (ruby text) support: 漢字(かな) -> 漢字 */
ruby {
ruby-position: over;
}
html[data-hide-ruby="1"] rt,
html[data-hide-ruby="1"] rp {
display: none;
}
rt {
font-size: 0.6em;
line-height: 1;
color: var(--text-muted);
}
html[data-theme="space"] .app-btn-secondary {
/* Darken the tag filter buttons so they don't glow too much on the space theme */
background: rgba(2, 6, 23, 0.6);
color: var(--text);
border-color: rgba(148, 163, 184, 0.22);
}
/* Theme-aware text input (used for deck search) */
.app-input {
color: var(--text);
background: color-mix(in srgb, var(--panel) 85%, transparent);
}
html[data-theme="space"] .app-input {
background: rgba(2, 6, 23, 0.65);
color: var(--text);
}
html[data-theme="space"] .app-input::placeholder {
color: color-mix(in srgb, var(--text-muted) 85%, transparent);
}
html[data-theme="space"] .app-input:focus-visible {
/* Override the default Tailwind ring-black focus with a theme-friendly glow */
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Tag pills shown inside each deck card (the small chip labels) */
html[data-theme="space"] .app-tag-chip {
/* Chips were too bright on the dark space theme */
background: rgba(2, 6, 23, 0.55) !important;
color: #c7d2fe; /* softer indigo */
--tw-ring-color: rgba(148, 163, 184, 0.25) !important;
}
/* Theme selector (top-right) - keep it consistent across themes */
.app-theme-selector {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 1rem;
color: var(--text);
background: color-mix(in srgb, var(--panel) 85%, transparent);
border: 1px solid color-mix(in srgb, var(--panel-border) 50%, transparent);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
backdrop-filter: blur(10px);
}
.app-theme-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: 0.75rem;
padding: 0.375rem 2.0rem 0.375rem 0.75rem;
color: var(--text);
background: color-mix(in srgb, var(--panel) 80%, transparent);
border: 1px solid color-mix(in srgb, var(--panel-border) 60%, transparent);
}
.app-theme-select:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Small caret */
.app-theme-select {
background-image:
linear-gradient(45deg, transparent 50%, var(--text) 50%),
linear-gradient(135deg, var(--text) 50%, transparent 50%);
background-position:
calc(100% - 1.0rem) 55%,
calc(100% - 0.75rem) 55%;
background-size: 6px 6px;
background-repeat: no-repeat;
}
/* Theme-aware checkbox (used in the mode modal for "Revert") */
.app-checkbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 1.05rem;
height: 1.05rem;
border-radius: 0.35rem;
background: color-mix(in srgb, var(--panel) 80%, transparent);
border: 1px solid color-mix(in srgb, var(--panel-border) 75%, transparent);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
display: inline-grid;
place-content: center;
cursor: pointer;
}
.app-checkbox:focus {
outline: none;
}
.app-checkbox:focus-visible {
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent),
0 1px 0 rgba(0, 0, 0, 0.08);
}
.app-checkbox::after {
content: "";
width: 0.55rem;
height: 0.55rem;
transform: scale(0);
transition: transform 120ms ease-in-out;
border-radius: 0.15rem;
background: var(--accent-strong);
}
.app-checkbox:checked::after {
transform: scale(1);
}
@supports not (color-mix(in srgb, #000 50%, #fff)) {
/* Fallback for older browsers */
.app-theme-selector {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme="space"] .app-theme-selector {
background: rgba(2, 6, 23, 0.55);
border-color: rgba(255, 255, 255, 0.10);
}
.app-theme-select {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.10);
}
html[data-theme="space"] .app-theme-select {
background: rgba(15, 23, 42, 0.65);
border-color: rgba(255, 255, 255, 0.10);
}
}
/* 3D flip card (no Tailwind build step needed) */
.flashcard3d {
perspective: 1000px;
width: 100%;
/* Business-card-ish proportions */
height: 170px;
}
@media (min-width: 640px) {
.flashcard3d {
height: 190px;
}
}
.flashcard3d-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flashcard3d-inner.is-flipped {
transform: rotateY(180deg);
}
.flashcard3d-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 1.25rem;
box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
border: 1px solid var(--panel-border);
background: var(--surface);
padding: 1.1rem;
}
.flashcard3d-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
}
@media (prefers-reduced-motion: reduce) {
.flashcard3d-inner {
transition: none;
}
}