349 lines
16 KiB
CSS
349 lines
16 KiB
CSS
/* Catppuccin official palette: https://catppuccin.com/palette/
|
|
Color roles live here; App.css remains responsible for component layout.
|
|
Mocha is also the CSS fallback before the preference bootstrap runs. */
|
|
:root,
|
|
:root[data-theme='mocha'] {
|
|
color-scheme: dark;
|
|
--ctp-rosewater: #f5e0dc;
|
|
--ctp-flamingo: #f2cdcd;
|
|
--ctp-pink: #f5c2e7;
|
|
--ctp-mauve: #cba6f7;
|
|
--ctp-red: #f38ba8;
|
|
--ctp-maroon: #eba0ac;
|
|
--ctp-peach: #fab387;
|
|
--ctp-yellow: #f9e2af;
|
|
--ctp-green: #a6e3a1;
|
|
--ctp-teal: #94e2d5;
|
|
--ctp-sky: #89dceb;
|
|
--ctp-sapphire: #74c7ec;
|
|
--ctp-blue: #89b4fa;
|
|
--ctp-lavender: #b4befe;
|
|
--ctp-text: #cdd6f4;
|
|
--ctp-subtext1: #bac2de;
|
|
--ctp-subtext0: #a6adc8;
|
|
--ctp-overlay2: #9399b2;
|
|
--ctp-overlay1: #7f849c;
|
|
--ctp-overlay0: #6c7086;
|
|
--ctp-surface2: #585b70;
|
|
--ctp-surface1: #45475a;
|
|
--ctp-surface0: #313244;
|
|
--ctp-base: #1e1e2e;
|
|
--ctp-mantle: #181825;
|
|
--ctp-crust: #11111b;
|
|
}
|
|
|
|
:root[data-theme='macchiato'] {
|
|
color-scheme: dark;
|
|
--ctp-rosewater: #f4dbd6;
|
|
--ctp-flamingo: #f0c6c6;
|
|
--ctp-pink: #f5bde6;
|
|
--ctp-mauve: #c6a0f6;
|
|
--ctp-red: #ed8796;
|
|
--ctp-maroon: #ee99a0;
|
|
--ctp-peach: #f5a97f;
|
|
--ctp-yellow: #eed49f;
|
|
--ctp-green: #a6da95;
|
|
--ctp-teal: #8bd5ca;
|
|
--ctp-sky: #91d7e3;
|
|
--ctp-sapphire: #7dc4e4;
|
|
--ctp-blue: #8aadf4;
|
|
--ctp-lavender: #b7bdf8;
|
|
--ctp-text: #cad3f5;
|
|
--ctp-subtext1: #b8c0e0;
|
|
--ctp-subtext0: #a5adcb;
|
|
--ctp-overlay2: #939ab7;
|
|
--ctp-overlay1: #8087a2;
|
|
--ctp-overlay0: #6e738d;
|
|
--ctp-surface2: #5b6078;
|
|
--ctp-surface1: #494d64;
|
|
--ctp-surface0: #363a4f;
|
|
--ctp-base: #24273a;
|
|
--ctp-mantle: #1e2030;
|
|
--ctp-crust: #181926;
|
|
}
|
|
|
|
:root[data-theme='frappe'] {
|
|
color-scheme: dark;
|
|
--ctp-rosewater: #f2d5cf;
|
|
--ctp-flamingo: #eebebe;
|
|
--ctp-pink: #f4b8e4;
|
|
--ctp-mauve: #ca9ee6;
|
|
--ctp-red: #e78284;
|
|
--ctp-maroon: #ea999c;
|
|
--ctp-peach: #ef9f76;
|
|
--ctp-yellow: #e5c890;
|
|
--ctp-green: #a6d189;
|
|
--ctp-teal: #81c8be;
|
|
--ctp-sky: #99d1db;
|
|
--ctp-sapphire: #85c1dc;
|
|
--ctp-blue: #8caaee;
|
|
--ctp-lavender: #babbf1;
|
|
--ctp-text: #c6d0f5;
|
|
--ctp-subtext1: #b5bfe2;
|
|
--ctp-subtext0: #a5adce;
|
|
--ctp-overlay2: #949cbb;
|
|
--ctp-overlay1: #838ba7;
|
|
--ctp-overlay0: #737994;
|
|
--ctp-surface2: #626880;
|
|
--ctp-surface1: #51576d;
|
|
--ctp-surface0: #414559;
|
|
--ctp-base: #303446;
|
|
--ctp-mantle: #292c3c;
|
|
--ctp-crust: #232634;
|
|
}
|
|
|
|
:root[data-theme='latte'] {
|
|
color-scheme: light;
|
|
--ctp-rosewater: #dc8a78;
|
|
--ctp-flamingo: #dd7878;
|
|
--ctp-pink: #ea76cb;
|
|
--ctp-mauve: #8839ef;
|
|
--ctp-red: #d20f39;
|
|
--ctp-maroon: #e64553;
|
|
--ctp-peach: #fe640b;
|
|
--ctp-yellow: #df8e1d;
|
|
--ctp-green: #40a02b;
|
|
--ctp-teal: #179299;
|
|
--ctp-sky: #04a5e5;
|
|
--ctp-sapphire: #209fb5;
|
|
--ctp-blue: #1e66f5;
|
|
--ctp-lavender: #7287fd;
|
|
--ctp-text: #4c4f69;
|
|
--ctp-subtext1: #5c5f77;
|
|
--ctp-subtext0: #6c6f85;
|
|
--ctp-overlay2: #7c7f93;
|
|
--ctp-overlay1: #8c8fa1;
|
|
--ctp-overlay0: #9ca0b0;
|
|
--ctp-surface2: #acb0be;
|
|
--ctp-surface1: #bcc0cc;
|
|
--ctp-surface0: #ccd0da;
|
|
--ctp-base: #eff1f5;
|
|
--ctp-mantle: #e6e9ef;
|
|
--ctp-crust: #dce0e8;
|
|
}
|
|
|
|
:root {
|
|
--theme-accent: var(--ctp-mauve);
|
|
--theme-accent-ink: var(--ctp-crust);
|
|
--theme-accent-soft: color-mix(in srgb, var(--theme-accent) 13%, var(--ctp-base));
|
|
--theme-success-soft: color-mix(in srgb, var(--ctp-green) 12%, var(--ctp-base));
|
|
--theme-error-soft: color-mix(in srgb, var(--ctp-red) 10%, var(--ctp-base));
|
|
--theme-border: var(--ctp-surface0);
|
|
--theme-shadow: color-mix(in srgb, var(--ctp-crust) 45%, transparent);
|
|
--theme-scrim: color-mix(in srgb, var(--ctp-crust) 76%, transparent);
|
|
/* Labels on photos must remain readable independently of the chosen flavor. */
|
|
--theme-photo-ink: #cdd6f4;
|
|
--theme-photo-scrim: #11111bbf;
|
|
--theme-photo-border: #cdd6f44d;
|
|
background: var(--ctp-base);
|
|
color: var(--ctp-text);
|
|
accent-color: var(--theme-accent);
|
|
scrollbar-color: var(--ctp-surface2) var(--ctp-base);
|
|
}
|
|
|
|
:root[data-theme='latte'] {
|
|
--theme-accent-ink: var(--ctp-base);
|
|
--theme-shadow: color-mix(in srgb, var(--ctp-text) 16%, transparent);
|
|
--theme-scrim: color-mix(in srgb, var(--ctp-text) 58%, transparent);
|
|
}
|
|
|
|
body { background: var(--ctp-base); color: var(--ctp-text); }
|
|
::selection { background: var(--theme-accent); color: var(--theme-accent-ink); }
|
|
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
|
|
outline-color: var(--theme-accent);
|
|
}
|
|
|
|
/* Navigation and flavor selector */
|
|
.sidebar { background: var(--ctp-crust); color: var(--ctp-text); border-color: var(--theme-border); }
|
|
.brand-dot, .tiny-spark { color: var(--theme-accent); }
|
|
.brand-mark { background: var(--theme-accent); color: var(--theme-accent-ink); }
|
|
.sidebar-label, .help-link { color: var(--ctp-subtext0); }
|
|
.nav-item { color: var(--ctp-subtext1); }
|
|
.nav-item:hover { background: var(--ctp-surface0); }
|
|
.nav-item.active { color: var(--theme-accent); background: var(--theme-accent-soft); }
|
|
.nav-count { border-color: var(--ctp-surface1); }
|
|
.sidebar-note { border-color: var(--theme-border); background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle)); }
|
|
.sidebar-note p { color: var(--ctp-subtext0); }
|
|
.sidebar-note button { color: var(--theme-accent); }
|
|
.sidebar-bottom { color: var(--ctp-subtext1); border-color: var(--theme-border); }
|
|
.network-dot { background: var(--ctp-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctp-green) 10%, transparent); }
|
|
.disconnected { background: var(--ctp-peach); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctp-peach) 10%, transparent); }
|
|
.prototype { color: var(--ctp-green); background: var(--theme-success-soft); border-color: var(--ctp-surface1); }
|
|
.topbar { background: var(--ctp-mantle); border-color: var(--theme-border); }
|
|
.breadcrumbs, .network-pill { color: var(--ctp-subtext0); }
|
|
.breadcrumbs span { color: var(--ctp-text); }
|
|
.wallet-button { background: var(--ctp-base); color: var(--ctp-text); border-color: var(--ctp-surface1); }
|
|
.wallet-avatar { background: var(--theme-accent-soft); color: var(--theme-accent); }
|
|
.wallet-button > svg { color: var(--ctp-subtext0); }
|
|
.theme-picker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
background: var(--ctp-base);
|
|
border: 1px solid var(--ctp-surface1);
|
|
border-radius: 6px;
|
|
color: var(--theme-accent);
|
|
}
|
|
.theme-picker select {
|
|
border: 0;
|
|
border-radius: 2px;
|
|
background: var(--ctp-base);
|
|
color: var(--ctp-text);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
min-height: 22px;
|
|
max-width: 110px;
|
|
}
|
|
.theme-picker:focus-within { border-color: var(--theme-accent); }
|
|
.theme-picker option { background: var(--ctp-base); color: var(--ctp-text); }
|
|
|
|
/* Hero and actions */
|
|
.hero { background: linear-gradient(125deg, var(--ctp-mantle), var(--theme-accent-soft)); border-color: var(--theme-border); }
|
|
.eyebrow { color: var(--ctp-subtext1); }
|
|
.eyebrow > span { background: var(--theme-accent); }
|
|
.hero h1 { color: var(--ctp-text); }
|
|
.hero h1 > span { color: var(--theme-accent); }
|
|
.hero-copy > p, .hero-foot { color: var(--ctp-subtext0); }
|
|
.button.dark { background: var(--theme-accent); color: var(--theme-accent-ink); }
|
|
.button.dark:hover { background: color-mix(in srgb, var(--theme-accent) 80%, var(--ctp-text)); }
|
|
.text-button { color: var(--ctp-subtext1); }
|
|
.text-button:hover { color: var(--theme-accent); }
|
|
.orbit { border-color: color-mix(in srgb, var(--theme-accent) 20%, transparent); }
|
|
.orbit-spark { color: var(--ctp-lavender); }
|
|
.hero-card .wiki-card { box-shadow: 0 12px 25px var(--theme-shadow); }
|
|
.floating-label { background: var(--ctp-surface0); color: var(--ctp-subtext1); border-color: var(--ctp-surface1); box-shadow: 0 3px 12px var(--theme-shadow); }
|
|
.label-bottom svg:first-child { color: var(--ctp-yellow); }
|
|
|
|
/* Network metrics and opt-in miner */
|
|
.metrics > div { border-color: var(--theme-border); }
|
|
.metric-icon { background: var(--ctp-surface0); color: var(--ctp-lavender); }
|
|
.metrics > div > div > span, .metrics small { color: var(--ctp-subtext0); }
|
|
.metric-icon.leaf { color: var(--ctp-green); background: var(--theme-success-soft); }
|
|
.mining-panel { background: var(--ctp-mantle); border-color: var(--theme-border); }
|
|
.section-eyebrow, .mining-description p, .mining-meta, .miner-display span { color: var(--ctp-subtext0); }
|
|
.idle-dot { background: var(--ctp-overlay1); }
|
|
.miner-controls { border-color: var(--theme-border); }
|
|
.signal-bars i { background: var(--ctp-surface2); }
|
|
.signal-bars i:nth-child(3n) { background: var(--ctp-mauve); }
|
|
.signal-bars.running i { background: var(--ctp-green); }
|
|
.intensity, .consent { color: var(--ctp-subtext1); }
|
|
.intensity select { background: var(--ctp-base); color: var(--ctp-text); border-color: var(--ctp-surface1); }
|
|
.consent input { accent-color: var(--ctp-green); }
|
|
.lime { background: var(--ctp-green); color: var(--theme-accent-ink); }
|
|
.lime:hover { background: color-mix(in srgb, var(--ctp-green) 80%, var(--ctp-text)); }
|
|
.miner-footnote { color: var(--ctp-subtext0); }
|
|
.mining-stop { background: var(--theme-error-soft); color: var(--ctp-red); border-color: var(--ctp-surface1); }
|
|
.hash-line { color: var(--ctp-green); background: var(--ctp-base); }
|
|
|
|
/* Collection filters and encyclopedia cards */
|
|
.section-heading p { color: var(--ctp-subtext0); }
|
|
.section-heading > .text-button { color: var(--theme-accent); }
|
|
.count-badge { color: var(--ctp-subtext1); border-color: var(--ctp-surface1); }
|
|
.filter-bar { border-color: var(--theme-border); }
|
|
.category-tabs button { color: var(--ctp-subtext0); }
|
|
.category-tabs button:hover { background: var(--ctp-surface0); }
|
|
.category-tabs button.selected { color: var(--theme-accent); background: var(--theme-accent-soft); }
|
|
.search-input { background: var(--ctp-mantle); color: var(--ctp-subtext0); border-color: var(--ctp-surface1); }
|
|
.search-input input { color: var(--ctp-text); }
|
|
.search-input input::placeholder { color: var(--ctp-subtext0); }
|
|
.wiki-card { --rarity-color: var(--ctp-green); background: var(--ctp-mantle); color: var(--ctp-text); border-color: var(--ctp-surface1); box-shadow: 0 3px 4px var(--theme-shadow); }
|
|
.wiki-card.legendary { --rarity-color: var(--ctp-yellow); border-color: color-mix(in srgb, var(--ctp-yellow) 55%, var(--ctp-surface0)); }
|
|
.wiki-card.epic { --rarity-color: var(--ctp-mauve); }
|
|
.wiki-card.rare { --rarity-color: var(--ctp-blue); }
|
|
.wiki-card:hover { border-color: var(--rarity-color); box-shadow: 0 9px 20px var(--theme-shadow); }
|
|
.wiki-card .card-top { color: var(--rarity-color); background: color-mix(in srgb, var(--rarity-color) 12%, var(--ctp-mantle)); }
|
|
.card-top > span:last-child { color: var(--ctp-subtext0); }
|
|
.card-art { color: var(--ctp-teal); background: radial-gradient(ellipse at top right, var(--ctp-surface1), var(--ctp-crust)); }
|
|
.art-space { background: var(--ctp-crust); }
|
|
.art-people { background: var(--ctp-surface0); }
|
|
.art-science { background: var(--ctp-base); }
|
|
.art-nature { background: color-mix(in srgb, var(--ctp-teal) 15%, var(--ctp-crust)); }
|
|
.card-art::after { background: linear-gradient(transparent 70%, var(--theme-photo-scrim)); }
|
|
.card-category { color: var(--theme-photo-ink); background: var(--theme-photo-scrim); border-color: var(--theme-photo-border); }
|
|
.card-title > svg { color: var(--ctp-subtext0); }
|
|
.card-content > p { color: var(--ctp-subtext0); }
|
|
.card-stats { color: var(--ctp-subtext1); border-color: var(--theme-border); }
|
|
.card-stats svg { color: var(--ctp-lavender); }
|
|
.card-bottom { background: var(--ctp-crust); color: var(--ctp-subtext0); border-color: var(--theme-border); }
|
|
.card-list-caption, .card-list-caption > span:first-child { color: var(--ctp-subtext0); }
|
|
.caption-dot { background: var(--ctp-green); }
|
|
.empty-state { background: var(--ctp-mantle); color: var(--ctp-subtext0); border-color: var(--ctp-surface1); }
|
|
.empty-state > svg { color: var(--ctp-lavender); }
|
|
.empty-state h3 { color: var(--ctp-text); }
|
|
|
|
/* Explorer, notices, and footer */
|
|
.outline { background: var(--ctp-mantle); color: var(--theme-accent); border-color: var(--ctp-surface1); }
|
|
.explorer-note { background: var(--theme-accent-soft); color: var(--ctp-subtext1); border-color: var(--ctp-surface1); }
|
|
.table-scroll { border-color: var(--theme-border); }
|
|
table { background: var(--ctp-mantle); }
|
|
th { color: var(--ctp-subtext1); background: var(--ctp-surface0); }
|
|
td { color: var(--ctp-subtext1); border-color: var(--theme-border); }
|
|
td strong { color: var(--ctp-text); }
|
|
td small { color: var(--ctp-subtext0); }
|
|
tbody tr:hover { background: var(--ctp-surface0); }
|
|
.rarity-tag { color: var(--ctp-green); background: var(--theme-success-soft); }
|
|
.rarity-tag.legendary { color: var(--ctp-yellow); background: color-mix(in srgb, var(--ctp-yellow) 12%, var(--ctp-base)); }
|
|
.rarity-tag.epic { color: var(--ctp-mauve); background: var(--theme-accent-soft); }
|
|
.rarity-tag.rare { color: var(--ctp-blue); background: color-mix(in srgb, var(--ctp-blue) 12%, var(--ctp-base)); }
|
|
.journal > div { color: var(--ctp-subtext1); background: var(--ctp-mantle); border-color: var(--theme-border); }
|
|
.muted { color: var(--ctp-subtext0); }
|
|
.error-banner { background: var(--theme-error-soft); color: var(--ctp-red); border-color: color-mix(in srgb, var(--ctp-red) 35%, var(--ctp-surface0)); }
|
|
.error-banner button { color: var(--ctp-red); }
|
|
.transfer-error { color: var(--ctp-red); background: var(--theme-error-soft); }
|
|
footer { color: var(--ctp-subtext0); border-color: var(--theme-border); }
|
|
footer > a > svg, .footer-star { color: var(--ctp-lavender); }
|
|
footer > p { color: var(--ctp-subtext0); }
|
|
.toast { background: var(--ctp-surface0); color: var(--ctp-text); border-color: var(--ctp-surface2); box-shadow: 0 6px 35px var(--theme-shadow); }
|
|
.toast > span { color: var(--ctp-green); background: var(--theme-success-soft); }
|
|
.toast > button { color: var(--ctp-subtext1); }
|
|
|
|
/* Wallet, guide, transfers, and card details */
|
|
.modal-backdrop { background: var(--theme-scrim); }
|
|
.modal { background: var(--ctp-base); color: var(--ctp-text); border-color: var(--ctp-surface1); box-shadow: 0 20px 70px var(--theme-shadow); }
|
|
.modal-close { background: var(--ctp-surface0); color: var(--ctp-subtext1); }
|
|
.modal-icon { background: var(--theme-accent-soft); color: var(--theme-accent); }
|
|
.guide-steps > div > span { color: var(--ctp-lavender); }
|
|
.guide-steps p { color: var(--ctp-subtext0); }
|
|
.info-box { background: var(--ctp-mantle); border-color: var(--theme-border); }
|
|
.info-box strong { color: var(--ctp-lavender); }
|
|
.info-box p { color: var(--ctp-subtext0); }
|
|
.field-label { color: var(--ctp-subtext0); }
|
|
.address-box { color: var(--ctp-subtext1); background: var(--ctp-mantle); border-color: var(--ctp-surface1); }
|
|
.wallet-count { color: var(--ctp-lavender); }
|
|
.recipient-input { color: var(--ctp-text); background: var(--ctp-mantle); border-color: var(--ctp-surface1); }
|
|
.recipient-input::placeholder { color: var(--ctp-subtext0); }
|
|
.detail-copy > p { color: var(--ctp-subtext1); }
|
|
.detail-facts { color: var(--ctp-subtext0); border-color: var(--theme-border); }
|
|
.detail-facts strong { color: var(--ctp-text); }
|
|
.detail-links a { color: var(--ctp-blue); }
|
|
.detail-copy p.attribution { color: var(--ctp-subtext0); }
|
|
|
|
/* Latte's green/yellow accents need darker ink for small labels and buttons. */
|
|
:root[data-theme='latte'] .lime {
|
|
color: var(--ctp-text);
|
|
background: color-mix(in srgb, var(--ctp-green) 18%, var(--ctp-base));
|
|
}
|
|
:root[data-theme='latte'] .lime:hover {
|
|
background: color-mix(in srgb, var(--ctp-green) 26%, var(--ctp-base));
|
|
}
|
|
:root[data-theme='latte'] .wiki-card .card-top {
|
|
color: color-mix(in srgb, var(--rarity-color) 45%, var(--ctp-text));
|
|
}
|
|
:root[data-theme='latte'] .rarity-tag {
|
|
color: var(--ctp-text);
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.top-actions { gap: 10px; }
|
|
.theme-picker { padding: 6px 8px; gap: 6px; }
|
|
.theme-picker select { font-size: 10px; }
|
|
.top-actions .network-pill { display: none; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.topbar .breadcrumbs { display: none; }
|
|
.topbar .top-actions { width: 100%; justify-content: space-between; }
|
|
.theme-picker { min-height: 36px; }
|
|
.theme-picker select { font-size: 12px; }
|
|
}
|