/* Bonfire — custom CSS layered on top of Tailwind */ /* --------------------------------------------------------------------------- Theme presets. Every brand color is a CSS custom property holding an "R G B" channel triple (consumed by Tailwind as `rgb(var(--c-x) / )`). The default palette lives on :root; selecting a preset in Settings sets a `data-theme` attribute on (see app/views/layouts/application.html.slv), and the matching block below re-tints the structural tokens + primary accent. The category colors (flame/moss/sea/plum/rust/ice) stay constant so per-tool color coding remains recognizable across themes. Keep the preset id list here in sync with AccountController#_theme_presets and the picker in app/views/account/profile.html.slv. --------------------------------------------------------------------------- */ :root, [data-theme="ember"] { --c-paper: 251 250 246; --c-surface: 255 255 255; --c-ink: 25 24 19; --c-ink2: 58 56 47; --c-muted: 119 114 103; --c-line: 232 228 216; --c-line2: 240 237 227; --c-ember: 232 85 42; --c-flame: 246 160 58; --c-moss: 70 130 74; --c-sea: 47 111 176; --c-plum: 122 69 147; --c-rust: 176 67 43; --c-ice: 62 156 156; --scroll-thumb: #D9D4C5; --scroll-thumb-hover: #B8B1A0; } [data-theme="ocean"] { --c-paper: 244 248 252; --c-surface: 255 255 255; --c-ink: 18 24 33; --c-ink2: 42 54 71; --c-muted: 100 112 128; --c-line: 214 224 236; --c-line2: 233 240 248; --c-ember: 36 109 178; --scroll-thumb: #C5D3E2; --scroll-thumb-hover: #9DB2C8; } [data-theme="forest"] { --c-paper: 245 249 244; --c-surface: 255 255 255; --c-ink: 23 31 24; --c-ink2: 47 61 49; --c-muted: 106 117 105; --c-line: 219 230 217; --c-line2: 235 242 233; --c-ember: 60 124 64; --scroll-thumb: #CADBC6; --scroll-thumb-hover: #A4BC9E; } [data-theme="slate"] { --c-paper: 246 247 249; --c-surface: 255 255 255; --c-ink: 17 24 39; --c-ink2: 51 65 85; --c-muted: 100 116 139; --c-line: 222 226 232; --c-line2: 237 240 244; --c-ember: 71 85 105; --scroll-thumb: #CCD2DA; --scroll-thumb-hover: #A3ACB9; } /* --- Dark presets --------------------------------------------------------- In a dark theme `paper` is the page background, `surface` the (slightly lighter) panel, and `ink`/`ink2` flip to light text. `line`/`line2` become subtle light-on-dark borders. The category colors (flame/moss/sea/…) are left at their default tints — they read fine on dark and keep tool color coding consistent across light and dark. -------------------------------------------------------------------------- */ [data-theme="midnight"] { --c-paper: 17 19 24; --c-surface: 26 29 36; --c-ink: 233 236 242; --c-ink2: 183 189 200; --c-muted: 124 132 147; --c-line: 42 47 56; --c-line2: 34 38 46; --c-ember: 242 105 60; --scroll-thumb: #3A3F4A; --scroll-thumb-hover: #515764; } [data-theme="twilight"] { --c-paper: 26 27 38; --c-surface: 36 40 59; --c-ink: 192 202 245; --c-ink2: 154 165 207; --c-muted: 122 132 175; --c-line: 47 52 78; --c-line2: 41 46 66; --c-ember: 247 118 142; --scroll-thumb: #2F344E; --scroll-thumb-hover: #434A6E; } [data-theme="dracula"] { --c-paper: 40 42 54; --c-surface: 51 53 67; --c-ink: 248 248 242; --c-ink2: 200 202 214; --c-muted: 139 150 188; --c-line: 68 71 90; --c-line2: 58 60 77; --c-ember: 189 147 249; --scroll-thumb: #44475A; --scroll-thumb-hover: #5A5E78; } html, body { background: rgb(var(--c-paper)); } ::-moz-selection { background: rgb(var(--c-ember)); color: #fff; } ::selection { background: rgb(var(--c-ember)); color: #fff; } /* Scrollbar nicety */ .scroll-soft::-webkit-scrollbar { width: 10px; height: 10px; } .scroll-soft::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid rgb(var(--c-paper)); } .scroll-soft::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } .scroll-soft::-webkit-scrollbar-track { background: transparent; } /* Lucide icon defaults */ [data-lucide] { width: 1em; height: 1em; stroke-width: 1.75; } /* Highlight the comment a notification links to (URL ends with #comment-…). */ [data-comment-key]:target { animation: bonfire-flash 1.6s ease-out; scroll-margin-top: 80px; } @keyframes bonfire-flash { 0% { background-color: rgb(var(--c-ember) / 0.18); } 100% { background-color: transparent; } } /* Focus rings */ button, a, input, textarea, select { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: 0 0 0 2px rgb(var(--c-paper)), 0 0 0 4px rgb(var(--c-ember)); border-radius: 6px; } #nav-search:focus, #nav-search:focus-visible, #search-palette-input:focus, #search-palette-input:focus-visible, [data-composer-input]:focus, [data-composer-input]:focus-visible { box-shadow: none; border-radius: 0; } /* Hand-drawn dashed line for nostalgic accents */ .dashed-line { background-image: linear-gradient(to right, currentColor 50%, transparent 50%); background-size: 8px 1px; background-repeat: repeat-x; background-position: 0 50%; } /* Subtle paper texture (very faint) */ .paper-texture { background-image: radial-gradient(circle at 25% 30%, rgba(0,0,0,0.012) 0, transparent 40%), radial-gradient(circle at 75% 80%, rgba(0,0,0,0.012) 0, transparent 50%); } /* Animated bg gradient for hero accents */ @keyframes blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2%, -2%) scale(1.05); } } .blob { animation: blob 14s ease-in-out infinite; } /* Card drag */ .card-dragging { opacity: 0.4; } .card-drop-target { background: rgb(var(--c-ember) / 0.06); border-color: rgb(var(--c-ember)) !important; } /* Hill chart */ .hill-dot { cursor: grab; transition: filter 0.15s; } .hill-dot:hover { filter: brightness(1.1); } .hill-dot.dragging { cursor: grabbing; } /* Todo strike */ .todo-done .todo-text { text-decoration: line-through; color: rgb(var(--c-muted)); } /* Sidebar collapse animation */ .sidebar-collapsed .sidebar-label { opacity: 0; pointer-events: none; } /* Pulse for new chat */ @keyframes ping-soft { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } .ping-soft::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0.5; animation: ping-soft 1.2s ease-out infinite; } /* Markdown-ish prose */ .prose-bonfire h1 { font-family: 'Instrument Serif', serif; font-size: 2.25rem; line-height: 1.1; margin: 1.5rem 0 0.75rem; } .prose-bonfire h2 { font-family: 'Instrument Serif', serif; font-size: 1.6rem; line-height: 1.15; margin: 1.25rem 0 0.5rem; } .prose-bonfire h3 { font-weight: 600; font-size: 1.1rem; margin: 1rem 0 0.25rem; } .prose-bonfire p { margin: 0.5rem 0; line-height: 1.65; color: rgb(var(--c-ink2)); } .prose-bonfire ul { margin: 0.5rem 0 0.75rem 1.25rem; list-style: disc; } .prose-bonfire ol { margin: 0.5rem 0 0.75rem 1.5rem; list-style: decimal; } .prose-bonfire li { margin: 0.15rem 0; } .prose-bonfire blockquote { border-left: 3px solid rgb(var(--c-ember)); padding: 0.25rem 0 0.25rem 1rem; margin: 0.75rem 0; color: rgb(var(--c-muted)); font-style: italic; } .prose-bonfire code { background: rgb(var(--c-line2)); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; font-family: 'Geist Mono', monospace; } .prose-bonfire a { color: rgb(var(--c-ember)); text-decoration: underline; text-underline-offset: 2px; } /* Modal animation */ @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-in { animation: modal-in 0.18s ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fade-in 0.15s ease-out; } /* Tile hover lift */ .hub-tile { transition: transform 0.18s ease, box-shadow 0.18s ease; } .hub-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(25,24,19,0.16), 0 0 0 1px rgba(25,24,19,0.08); }