Something went wrong. Try again.
Tour the Atmosphere. Switch clients, share universal links, browse any PDS. forked from atpota.to/aturi
Something went wrong. Try again.
7.8 kB · 352 lines
CSS
at testing
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root { /* Aturi design tokens — mirrors aturi-to/src/app/globals.css */ --bg-primary: #0a0a0a; --bg-secondary: #151515; --bg-tertiary: #1a1a1a; --bg-elevated: #202020;
--accent-moss: #4a5a3f; --accent-forest: #2d3a28; --accent-bark: #3d3329; --accent-stone: #4a4a46;
/* Text colors — secondary and tertiary brightened from #a8a8a6/#686866 so secondary copy and "subtle" labels remain legible against the very dark backgrounds. */ --text-primary: #f0f0ee; --text-secondary: #c4c4c0; --text-tertiary: #9a9a96; --text-accent: #a8b89c;
--glow-subtle: rgba(168, 184, 156, 0.06); --glow-medium: rgba(168, 184, 156, 0.12); --glow-strong: rgba(168, 184, 156, 0.22);
--border-subtle: rgba(240, 240, 238, 0.12); --border-medium: rgba(240, 240, 238, 0.18); --border-strong: rgba(240, 240, 238, 0.24);
--danger: #d97070; --danger-soft: rgba(217, 112, 112, 0.18);
/* Text on the dark accent backgrounds (primary buttons, active segmented controls). --accent-forest is dark green in both themes, so this token intentionally stays light in both themes too. */ --text-on-accent: #f0f0ee;
--font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Font-size scale. Overridden per-element below; the [data-fs] selectors bump everything up or down together so the popup and settings page respond to the user's font-size preset in one place. */ --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 15px; --fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 19px; --fs-display-sm: 22px; --fs-display: 30px;
--bg: var(--bg-primary); --bg-muted: var(--bg-secondary); --fg: var(--text-primary); --fg-muted: var(--text-secondary); --fg-subtle: var(--text-tertiary); --border: var(--border-subtle); --accent: var(--text-accent); --accent-fg: var(--bg-primary); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); color-scheme: dark;}
[data-fs='small'] { --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px; --fs-base: 13px; --fs-lg: 13px; --fs-xl: 14px; --fs-2xl: 17px; --fs-display-sm: 19px; --fs-display: 26px;}
[data-fs='large'] { --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 17px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-display-sm: 25px; --fs-display: 34px;}
[data-fs='xlarge'] { --fs-xs: 14px; --fs-sm: 15px; --fs-md: 16px; --fs-base: 19px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 25px; --fs-display-sm: 28px; --fs-display: 38px;}
[data-theme='light'] { --bg-primary: #faf8f3; --bg-secondary: #f1ede4; --bg-tertiary: #e8e2d4; --bg-elevated: #ffffff;
--accent-moss: #6c7c5f; --accent-forest: #4d5a48; --accent-bark: #6e5f4c; --accent-stone: #76766f;
--text-primary: #1a1c18; --text-secondary: #3e3f3a; --text-tertiary: #5c5d56; --text-accent: #4d5e3f;
--glow-subtle: rgba(77, 94, 63, 0.05); --glow-medium: rgba(77, 94, 63, 0.1); --glow-strong: rgba(77, 94, 63, 0.18);
--border-subtle: rgba(26, 28, 24, 0.14); --border-medium: rgba(26, 28, 24, 0.22); --border-strong: rgba(26, 28, 24, 0.32);
--danger: #b5453e; --danger-soft: rgba(181, 69, 62, 0.12);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.08); color-scheme: light;}
* { box-sizing: border-box;}
html,body { margin: 0; padding: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
svg { stroke-width: 1.5;}
button { font: inherit; font-family: var(--font-serif); color: inherit; background: none; border: none; padding: 0; cursor: pointer;}
input,select,textarea { font: inherit; font-family: var(--font-serif); color: inherit;}
a { color: var(--text-accent); text-decoration: none; transition: color 0.2s ease;}
a:hover { color: var(--text-primary);}
/* Atmospheric glow — softer than the main app since extension surfaces are small */body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 20% 20%, var(--glow-medium) 0%, transparent 60%), radial-gradient(circle at 80% 80%, var(--glow-subtle) 0%, transparent 60%); filter: blur(60px); opacity: 0.9;}
body > * { position: relative; z-index: 1;}
.aturi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-subtle); font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 400; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;}
.aturi-btn:hover { background: var(--bg-tertiary); border-color: var(--text-accent); color: var(--text-primary);}
.aturi-btn-primary { background: var(--accent-forest); color: var(--text-on-accent); border-color: var(--text-accent);}
.aturi-btn-primary:hover { background: var(--accent-moss); color: var(--text-on-accent); box-shadow: 0 4px 20px var(--glow-medium); transform: translateY(-1px);}
.aturi-btn-danger { color: var(--danger); border-color: rgba(196, 97, 97, 0.3);}
.aturi-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger);}
.aturi-btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary);}
.aturi-btn-ghost:hover { background: var(--bg-secondary); border-color: var(--border-subtle); color: var(--text-primary);}
.aturi-input,.aturi-select { display: block; width: 100%; padding: 8px 12px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-subtle); font-family: var(--font-serif); font-size: var(--fs-md); transition: border-color 0.2s ease, background 0.2s ease;}
.aturi-select { appearance: none; -webkit-appearance: none; /* Chevron is drawn with two diagonal linear-gradients so it picks up the current `--text-accent` in both themes instead of being baked into a data-URI SVG. */ background-image: linear-gradient(45deg, transparent 50%, var(--text-accent) 50%), linear-gradient(135deg, var(--text-accent) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px;}
.aturi-input:hover,.aturi-select:hover { border-color: var(--border-medium);}
.aturi-input:focus,.aturi-select:focus { outline: none; border-color: var(--text-accent); background: var(--bg-tertiary);}
.aturi-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-serif);}
.aturi-muted { color: var(--text-secondary);}
.aturi-subtle { color: var(--text-tertiary); font-size: var(--fs-sm);}
.aturi-hr { height: 1px; background: var(--border-subtle); border: none; margin: 16px 0;}
::placeholder { color: var(--text-tertiary); opacity: 1;}
::-webkit-scrollbar { width: 8px; height: 8px;}
::-webkit-scrollbar-track { background: var(--bg-secondary);}
::-webkit-scrollbar-thumb { background: var(--border-medium);}
::-webkit-scrollbar-thumb:hover { background: var(--text-accent);}