/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #0f0905 #3a2e26 #f7f1e4 #6b4226 #8c5a3c #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f7f1e4; --surface: #fbf9f3; --surface-2: #ebe5d9; --border: #d7d1c5; --border-strong: #b1aba1; --ink: #3a2e26; --muted: #686159; --accent: #6b4226; --accent-hover: #5b3820; --accent-ink: #ffffff; --accent-text: #8c5a3c; --accent-strong: #6b4226; --accent-soft: #e3d9c9; --accent-border: #b8a28f; --success: #15803d; --success-ink: #ffffff; --success-soft: #dce3d0; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #efdeca; --warning-strong: #994607; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f0d7cc; --danger-strong: #b91c1c; --chart-1: #6b4226; --chart-2: #666d0d; --chart-3: #035b4a; --chart-4: #1b62a7; --chart-5: #64337f; --chart-6: #993e69;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #0f0905; --surface: #27221e; --surface-2: #1b1512; --border: #312b28; --border-strong: #575350; --ink: #f7f1e4; --muted: #9a948b; --accent: #6b4226; --accent-hover: #815e47; --accent-ink: #ffffff; --accent-text: #a58d7b; --accent-strong: #9d8370; --accent-soft: #23160c; --accent-border: #382314; --success: #15803d; --success-ink: #ffffff; --success-soft: #102311; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #331906; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #340d0a; --danger-strong: #d16969; --chart-1: #8f6447; --chart-2: #889223; --chart-3: #12957c; --chart-4: #4486cf; --chart-5: #9b67b7; --chart-6: #c86270; } /* ==================================================================== * app.css — Folio's own stylesheet. * * Character: a cozy personal library on warm paper. Soft, generous * corners; a slightly heavier depth than the default so cards read like * things resting on a table rather than panes of glass; a spine of * accent colour down the edge of every book card, the one recurring * motif that ties the whole shelf together. * ==================================================================== */ :root { /* Softer, more generous corners than the system default — a library, not a spreadsheet. */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; /* A warmer, slightly deeper depth ramp, tinted with the app's own ink instead of the system's default rgba(15,18,26,…) so it belongs to this palette. */ --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent); --shadow-raised: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 14px 32px color-mix(in srgb, var(--ink) 10%, transparent); /* A touch more room between sections — this app is meant to be unhurried. */ --s-7: 34px; } /* ---- page rhythm --------------------------------------------------- */ .page > .page-head + * { margin-top: var(--s-2); } /* ---- stat cards ------------------------------------------------------ */ .stat-card { box-shadow: var(--shadow); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); } .stat-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); font-weight: var(--fw-medium); } .stat-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); } .stat-value { margin-top: var(--s-2); font-size: var(--t-3xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); } /* ---- search ----------------------------------------------------------- */ .search-row .search-input { max-width: 420px; } /* ---- the three shelves ------------------------------------------------ */ .shelves { display: grid; grid-template-columns: 1fr; gap: var(--s-6); } @media (min-width: 860px) { .shelves { grid-template-columns: repeat(3, 1fr); } } .shelf-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: var(--shadow); } .shelf-col-head { padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--border); } .shelf-col-title { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-semi); font-size: var(--t-md); } .shelf-col-title .icon { color: var(--muted); } .shelf-col-reading .shelf-col-title .icon { color: var(--accent); } .shelf-col-finished .shelf-col-title .icon { color: var(--success); } .shelf-col-title .badge { margin-left: auto; } .shelf-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--s-5) var(--s-4); text-align: center; } /* ---- book cards -------------------------------------------------------- * The spine is the one shape in this app that is not a system component: * a thin coloured bar down the left edge, the way a shelved book shows * its spine before you see anything else about it. */ .book-card { display: flex; padding: 0; overflow: hidden; box-shadow: var(--shadow); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } /* .card's own "> * + *" rule adds margin-top for a vertical stack of sections; this card lays its two children out as a row instead. */ .book-card > * + * { margin-top: 0; } .book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); } .book-spine { flex: 0 0 5px; background: var(--accent-border); } .shelf-col-reading .book-spine { background: var(--accent); } .shelf-col-finished .book-spine { background: var(--success); } .book-card-body { flex: 1 1 auto; min-width: 0; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-3); } .book-card h4 { font-size: var(--t-md); } .progress-input { width: 88px; height: 34px; flex: 0 0 auto; } /* ---- reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .stat-card, .book-card { transition: none; } }