/* ═══════════════════════════════════════════════════════════════ Collection Vault - themeable design system. Four palettes (picked per-user on the Account page, applied via data-theme on ), each with light + dark via prefers-color-scheme. Fraunces serif display, Inter UI. midnight - ink navy + aged brass (default) forest - the original warm paper + deep green plum - aubergine + copper mono - gallery monochrome + vermilion ═══════════════════════════════════════════════════════════════ */ :root { /* Structure (theme-independent) */ --radius: 16px; --radius-sm: 10px; --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Inter', system-ui, "Segoe UI", sans-serif; /* Midnight Archive - light (default theme) */ --bg: #f4f1e9; --bg-glow: #eae3d1; --surface: #fdfbf5; --surface-2: #ede8da; --text: #1d2433; --muted: #74716a; --border: #ddd6c4; --border-strong: #c6bda4; --accent: #8a6a28; --accent-deep: #6f5420; --accent-soft: rgba(168, 133, 63, .12); --accent-text: #ffffff; --gold: #a8853f; --gold-soft: rgba(168, 133, 63, .14); --danger: #b23c2e; --shadow-sm: 0 1px 2px rgba(29, 36, 51, .06), 0 2px 6px rgba(29, 36, 51, .05); --shadow-md: 0 2px 4px rgba(29, 36, 51, .07), 0 10px 24px rgba(29, 36, 51, .08); --shadow-lg: 0 4px 10px rgba(29, 36, 51, .10), 0 22px 44px rgba(29, 36, 51, .12); } @media (prefers-color-scheme: dark) { :root { /* Midnight Archive - dark: leather, lamplight, first editions */ --bg: #10141f; --bg-glow: #161d2e; --surface: #1a2030; --surface-2: #232b40; --text: #e8e4d8; --muted: #9b978a; --border: #2c3448; --border-strong: #3d4763; --accent: #c9a45c; --accent-deep: #d9b877; --accent-soft: rgba(201, 164, 92, .14); --accent-text: #1a1408; --gold: #d7b25c; --gold-soft: rgba(215, 178, 92, .15); --danger: #e0806f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 12px rgba(0, 0, 0, .50); --shadow-lg: 0 10px 34px rgba(0, 0, 0, .60); } } /* ── Forest (the original look) ── */ :root[data-theme="forest"] { --bg: #f6f1e7; --bg-glow: #efe4cf; --surface: #fffdf7; --surface-2: #f0e9d8; --text: #241f13; --muted: #8a8069; --border: #e4dac2; --border-strong: #d3c6a8; --accent: #2e6b47; --accent-deep: #245538; --accent-soft: rgba(46, 107, 71, .10); --accent-text: #ffffff; --gold: #a97e2c; --gold-soft: rgba(169, 126, 44, .12); --danger: #b23c2e; --shadow-sm: 0 1px 2px rgba(60, 48, 22, .06), 0 2px 6px rgba(60, 48, 22, .05); --shadow-md: 0 2px 4px rgba(60, 48, 22, .07), 0 10px 24px rgba(60, 48, 22, .08); --shadow-lg: 0 4px 10px rgba(60, 48, 22, .10), 0 22px 44px rgba(60, 48, 22, .12); } @media (prefers-color-scheme: dark) { :root[data-theme="forest"] { --bg: #15130e; --bg-glow: #1c1913; --surface: #1e1b14; --surface-2: #282419; --text: #ece4d1; --muted: #9b917a; --border: #363021; --border-strong: #4a4230; --accent: #74c795; --accent-deep: #8ed4a9; --accent-soft: rgba(116, 199, 149, .12); --accent-text: #0c1810; --gold: #d7b25c; --gold-soft: rgba(215, 178, 92, .14); --danger: #e0806f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 10px 34px rgba(0, 0, 0, .55); } } /* ── Plum & Copper ── */ :root[data-theme="plum"] { --bg: #f6efee; --bg-glow: #efe1de; --surface: #fdf8f7; --surface-2: #f0e5e3; --text: #2b1e2c; --muted: #857078; --border: #e6d8d5; --border-strong: #d2bcb8; --accent: #a5623a; --accent-deep: #86492a; --accent-soft: rgba(200, 127, 79, .12); --accent-text: #ffffff; --gold: #ad7b3d; --gold-soft: rgba(173, 123, 61, .14); --danger: #b23c2e; --shadow-sm: 0 1px 2px rgba(43, 30, 44, .06), 0 2px 6px rgba(43, 30, 44, .05); --shadow-md: 0 2px 4px rgba(43, 30, 44, .07), 0 10px 24px rgba(43, 30, 44, .08); --shadow-lg: 0 4px 10px rgba(43, 30, 44, .10), 0 22px 44px rgba(43, 30, 44, .12); } @media (prefers-color-scheme: dark) { :root[data-theme="plum"] { --bg: #171018; --bg-glow: #201525; --surface: #241a26; --surface-2: #302334; --text: #ece2e6; --muted: #a08e97; --border: #3a2c3e; --border-strong: #4f3d54; --accent: #c87f4f; --accent-deep: #dc9a6b; --accent-soft: rgba(200, 127, 79, .15); --accent-text: #241207; --gold: #d7a35c; --gold-soft: rgba(215, 163, 92, .15); --danger: #e0806f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 12px rgba(0, 0, 0, .50); --shadow-lg: 0 10px 34px rgba(0, 0, 0, .60); } } /* ── Gallery Mono ── */ :root[data-theme="mono"] { --bg: #fafafa; --bg-glow: #efefef; --surface: #ffffff; --surface-2: #f1f1f1; --text: #161616; --muted: #6f6f6f; --border: #e4e4e4; --border-strong: #cfcfcf; --accent: #c73a1e; --accent-deep: #a02e17; --accent-soft: rgba(227, 79, 47, .10); --accent-text: #ffffff; --gold: #9a6a1e; --gold-soft: rgba(154, 106, 30, .12); --danger: #b23c2e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0, .04); --shadow-md: 0 2px 4px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .07); --shadow-lg: 0 4px 10px rgba(0, 0, 0, .09), 0 22px 44px rgba(0, 0, 0, .11); } @media (prefers-color-scheme: dark) { :root[data-theme="mono"] { --bg: #101010; --bg-glow: #181818; --surface: #1a1a1a; --surface-2: #242424; --text: #ececec; --muted: #9a9a9a; --border: #2e2e2e; --border-strong: #424242; --accent: #e34f2f; --accent-deep: #ef6d50; --accent-soft: rgba(227, 79, 47, .14); --accent-text: #180703; --gold: #c98f45; --gold-soft: rgba(201, 143, 69, .15); --danger: #e0806f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 4px 12px rgba(0, 0, 0, .55); --shadow-lg: 0 10px 34px rgba(0, 0, 0, .65); } } /* ── Base ───────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: radial-gradient(1100px 500px at 85% -80px, var(--bg-glow), transparent 70%), var(--bg); color: var(--text); font: 400 15.5px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--accent-text); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, .brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; } h1 { font-size: clamp(1.7rem, 3.4vw, 2.15rem); line-height: 1.2; margin: .2em 0; } h2 { font-size: 1.35rem; margin: 1.5em 0 .55em; } h3 { font-size: 1rem; margin: .9em 0 .45em; font-weight: 600; } code { background: var(--surface-2); padding: .12em .4em; border-radius: 6px; font-size: .88em; } .muted { color: var(--muted); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ── Top bar ────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 1.2rem; } .topbar nav { display: flex; gap: .25rem; flex-wrap: wrap; } .topbar-plain .topbar-inner { justify-content: center; } .topbar-brand { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text); } .nav-link { display: flex; align-items: center; padding: .45rem .85rem; border-radius: 99px; color: var(--muted); font-weight: 500; font-size: .93rem; transition: background .15s ease, color .15s ease; } .nav-link:hover { text-decoration: none; color: var(--text); background: var(--surface-2); } .nav-link.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; } .nav-search { margin: 0; } .nav-search input[type="search"] { width: 170px; margin: 0; padding: .42rem .9rem; border-radius: 99px; font-size: .88rem; background: var(--surface-2); border-color: transparent; } .nav-search input[type="search"]:focus { background: var(--surface); border-color: var(--accent); width: 220px; } .nav-search-link { display: none; } .nav-user { padding: .3rem !important; } .nav-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); color: var(--accent-text); font-weight: 700; font-size: .85rem; overflow: hidden; } .nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Avatars elsewhere (account, family): photo or initial, always round */ .avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); color: var(--accent-text); font-weight: 700; overflow: hidden; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; } .avatar-xl { width: 88px; height: 88px; font-size: 2rem; } .avatar-inline { vertical-align: middle; } /* Theme picker on the Account page */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; } .theme-pick { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .theme-pick:hover { border-color: var(--accent); } .theme-pick.active { border-color: var(--accent); background: var(--accent-soft); } .theme-pick input { accent-color: var(--accent); } .theme-dots { display: inline-flex; gap: .25rem; flex-shrink: 0; } .theme-dots i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); } .theme-name { display: flex; flex-direction: column; line-height: 1.3; } .theme-name .muted { font-size: .76rem; } /* Avatar crop editor: square viewport, circular mask preview */ #avatar-viewport { position: relative; width: 260px; height: 260px; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: #111; cursor: grab; touch-action: none; user-select: none; } #avatar-viewport:active { cursor: grabbing; } #avatar-editor-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; pointer-events: none; } #avatar-viewport::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 400px rgba(0, 0, 0, .5); pointer-events: none; } #avatar-editor { max-width: 260px; } @media (max-width: 820px) { .nav-search { display: none; } .nav-search-link { display: flex; } } @media (max-width: 640px) { .nav-link { padding: .4rem .5rem; font-size: .85rem; } .topbar-inner { padding: .55rem 1rem; } .nav-search-link { margin-right: .2rem; } } /* ── Layout ─────────────────────────────────────────────── */ .container { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; } .site-footer { text-align: center; padding: 1.5rem 1rem 2.2rem; font-size: .85rem; } .page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .head-icon { font-size: 1.35em; } .count-inline { font-size: .55em; font-weight: 400; font-family: var(--font-ui); } /* Note: Bootstrap also defines .breadcrumb - everything it sets that matters (flex, margins, separators) is overridden here. */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; color: color-mix(in srgb, var(--muted) 65%, transparent); font-size: .85rem; margin: 0 0 1rem; padding: 0; } .breadcrumb a { color: var(--muted); font-weight: 500; padding: .15rem .55rem; margin: 0 -.25rem; border-radius: 99px; transition: background .15s ease, color .15s ease; } .breadcrumb a:hover { color: var(--accent); background: var(--accent-soft); text-decoration: none; } .breadcrumb .current { color: var(--text); font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Hero (home) ────────────────────────────────────────── */ .hero { padding: 2.2rem 0 2.4rem; } .hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin: 0 0 .35em; } .hero .muted { font-size: 1.05rem; margin: 0 0 1.4em; } .hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; } /* ── Flash & notices ────────────────────────────────────── */ .flash { padding: .75rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.1rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); animation: rise .25s ease both; } .flash-error { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); } @keyframes rise { from { opacity: 0; transform: translateY(-6px); } } .notice { padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin: 1.3rem 0; background: var(--gold-soft); border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--border)); } /* ── Buttons ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .52rem .95rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 500 .92rem/1.4 var(--font-ui); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease, background .15s ease; } .btn:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-primary { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: var(--accent-text); border-color: transparent; font-weight: 600; } .btn-primary:hover { filter: brightness(1.06); border-color: transparent; } .btn-lg { padding: .72rem 1.3rem; font-size: 1rem; border-radius: 12px; } .btn-small { padding: .26rem .6rem; font-size: .82rem; box-shadow: none; } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .btn-danger:hover { border-color: var(--danger); } .btn-quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); } .btn-quiet:hover { color: var(--text); background: var(--surface-2); border-color: transparent; transform: none; box-shadow: none; } .btn:disabled { opacity: .5; cursor: default; transform: none; } /* ── Badges & stars ─────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: .13rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .badge-wish { color: var(--gold); background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); } .badge-high { color: var(--accent); background: var(--accent-soft); } .badge-medium { color: var(--gold); } .badge-low, .badge-dup { color: var(--danger); } .stars { color: var(--gold); letter-spacing: .12em; font-size: .92em; } /* ── Collection cards (home) ────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; } .collection-card { display: flex; flex-direction: column; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .collection-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .cover-fan { display: flex; align-items: center; justify-content: center; height: 150px; background: radial-gradient(420px 160px at 50% 115%, var(--accent-soft), transparent 70%), var(--surface-2); border-bottom: 1px solid var(--border); } .cover-fan img { width: 74px; height: 111px; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 14px rgba(30, 24, 10, .30); border: 2px solid var(--surface); } .cover-fan img:nth-child(1) { transform: rotate(-8deg) translateX(14px) translateY(4px); } .cover-fan img:nth-child(2) { transform: rotate(2deg); z-index: 1; } .cover-fan img:nth-child(3) { transform: rotate(9deg) translateX(-14px) translateY(5px); } .cover-fan img:only-child { transform: rotate(-3deg); } .fan-icon { font-size: 3rem; opacity: .75; } .add-icon { color: var(--muted); font-size: 2.5rem; } .collection-body { padding: .95rem 1.1rem 1.05rem; } .collection-body h2 { margin: 0 0 .25rem; font-size: 1.18rem; } .collection-body p { margin: .25rem 0; font-size: .88rem; } .counts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; } .add-card { border-style: dashed; box-shadow: none; background: transparent; } .add-card .cover-fan { background: transparent; border-bottom-style: dashed; } /* Arrange collections */ .collections-head { display: flex; justify-content: space-between; align-items: center; margin: .3rem 0 .6rem; } .collections-head h2 { margin: 0; font-size: 1.25rem; } .collection-card { position: relative; } .col-grip { position: absolute; top: .4rem; left: .4rem; z-index: 3; width: 26px; height: 26px; display: none; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); cursor: grab; touch-action: none; box-shadow: var(--shadow-sm); } .card-grid.arranging .collection-card:not(.add-card) { cursor: grab; touch-action: none; user-select: none; } .card-grid.arranging .col-grip { display: grid; } .card-grid.arranging .add-card { display: none; } .collection-card.is-dragging { opacity: .9; box-shadow: var(--shadow-lg); border-color: var(--accent); cursor: grabbing; } /* ── Filter bar & tabs ──────────────────────────────────── */ .filter-bar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.3rem; } .filter-bar input[type="search"] { flex: 1; min-width: 190px; } .tabs { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 3px; } .tab { padding: .32rem .85rem; border: none; border-radius: 99px; background: transparent; color: var(--muted); font: 500 .88rem/1.5 var(--font-ui); cursor: pointer; } .tab:hover { text-decoration: none; color: var(--text); } .tab.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); } /* ── Item grid ──────────────────────────────────────────── */ .item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1.05rem; } .item-card { display: flex; flex-direction: column; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .item-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .item-cover { position: relative; aspect-ratio: 2 / 3; background: var(--surface-2); overflow: hidden; } .item-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .item-card:hover .item-cover img { transform: scale(1.04); } .cover-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.7rem; opacity: .4; background: radial-gradient(300px 200px at 50% 120%, var(--accent-soft), transparent 70%), var(--surface-2); } .cover-placeholder.big { aspect-ratio: 2 / 3; border-radius: var(--radius); font-size: 4rem; border: 1px solid var(--border); } .wish-tag { position: absolute; top: .5rem; left: .5rem; background: linear-gradient(150deg, var(--gold), color-mix(in srgb, var(--gold) 75%, #7a5a1c)); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .16rem .6rem; border-radius: 99px; /* white ring + dark shadow so it reads on any cover art, light or dark */ border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 6px rgba(0, 0, 0, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .wish-tag::before { content: '★ '; } .item-meta { display: flex; flex-direction: column; gap: .14rem; padding: .65rem .75rem .75rem; font-size: .88rem; } .item-meta strong { font-weight: 600; line-height: 1.35; } .item-meta .muted { font-size: .78rem; } .empty-state { text-align: center; padding: 3.2rem 1rem; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 50%, transparent); } /* ── Item detail ────────────────────────────────────────── */ .item-detail { display: grid; grid-template-columns: 250px 1fr; gap: 1.8rem; align-items: start; } .item-detail-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); } @media (max-width: 660px) { .item-detail { grid-template-columns: 1fr; } .item-detail-cover { max-width: 230px; } } #item-cover-img { margin-bottom: .6rem; } .item-detail-cover .btn { display: flex; justify-content: center; width: 100%; } /* Cover picker */ .cover-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } .cover-actions .btn { flex: 1 1 auto; } #cover-picker { margin-top: .7rem; } .cover-pick-hint { font-size: .82rem; margin: 0 0 .4rem; } .cover-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; } .cover-opt { display: flex; flex-direction: column; gap: .2rem; padding: 0; background: none; border: 2px solid transparent; border-radius: 8px; cursor: pointer; } .cover-opt img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; } .cover-opt:hover { border-color: var(--accent); } .cover-opt-label { font-size: .64rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bulk cover-refresh job panel */ .cover-job { margin: .3rem 0 .8rem; } .cover-job-choose { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .cover-job-inner { max-width: 460px; } .cover-job-track { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; } .cover-job-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; } .cover-job-note { font-size: .82rem; margin: .35rem 0 0; } /* Bulk select on the collection page */ .grid-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 .6rem; } .grid-toolbar-actions { display: flex; gap: .5rem; align-items: center; } /* View switcher: cards / small cards / list / names-only */ .view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); } .view-switch button { border: 0; background: none; color: var(--muted); padding: .3rem .55rem; font-size: .85rem; line-height: 1; cursor: pointer; } .view-switch button + button { border-left: 1px solid var(--border); } .view-switch button:hover { color: var(--accent); background: var(--accent-soft); } .view-switch button.active { color: var(--accent); background: var(--accent-soft); font-weight: 700; } /* Compact: smaller tiles - title plus miniature badges (platform colours matter: a games shelf without consoles is just spines) */ .item-grid.view-compact { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; } .item-grid.view-compact .item-meta { padding: .4rem .5rem .5rem; font-size: .78rem; } .item-grid.view-compact .item-meta .muted, .item-grid.view-compact .stars { display: none; } .item-grid.view-compact .opt-badges { gap: .2rem; } .item-grid.view-compact .opt-badges .badge { font-size: .6rem; padding: .08rem .32rem; } .item-grid.view-compact .opt-badge i { width: 7px; height: 7px; } /* List: one row per item - thumbnail, title + subtitle, badges */ .item-grid.view-list { display: flex; flex-direction: column; gap: .45rem; } .item-grid.view-list .item-card { flex-direction: row; align-items: center; } .item-grid.view-list .item-cover { width: 46px; height: 64px; aspect-ratio: auto; flex-shrink: 0; border-radius: 6px; } .item-grid.view-list .item-cover .wish-tag, .item-grid.view-list .item-cover .loan-tag { display: none; } .item-grid.view-list .item-meta { flex: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; padding: .5rem .8rem; } .item-grid.view-list .item-card:hover .item-cover img { transform: none; } /* Names: dense text columns, ruled rows so entries don't blur together */ .item-grid.view-names { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 1.4rem; } .item-grid.view-names .item-card { flex-direction: row; box-shadow: none; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; } .item-grid.view-names .item-card:hover { background: var(--accent-soft); } .item-grid.view-names .item-cover, .item-grid.view-names .opt-badges, .item-grid.view-names .stars { display: none; } .item-grid.view-names .item-meta { padding: .42rem .3rem; flex-direction: row; flex-wrap: wrap; gap: .15rem .5rem; align-items: baseline; width: 100%; } .item-grid.view-names .item-meta .muted { font-size: .74rem; } .item-grid.view-names .item-card:hover strong { color: var(--accent); } /* keep select mode usable without covers: the check rides the text row */ .item-grid.view-names.selecting .item-check { top: .35rem; left: -26px; } /* Wishlist "Got it" button sits inline in the dense views */ .item-grid.view-list .got-form, .item-grid.view-names .got-form { margin: 0; } .item-grid.view-compact .got-form .btn { padding: .2rem .45rem; font-size: .72rem; } /* Extra inline details: hidden on card views, shown in the dense views */ .item-extra { display: none; } .item-grid.view-list .item-extra, .item-grid.view-names .item-extra { display: inline; font-size: .74rem; } .bulk-bar { position: sticky; top: .4rem; z-index: 20; display: flex; flex-direction: column; gap: .5rem; padding: .6rem .8rem; margin: 0 0 1rem; background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-md); } .bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .bulk-row + .bulk-row { border-top: 1px dashed var(--border); padding-top: .5rem; } .bulk-head #bulk-done { margin-left: auto; } .bulk-label { min-width: 96px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .bulk-hint { font-size: .78rem; } .bulk-count { font-weight: 600; margin-right: .2rem; } .item-card { position: relative; } .item-check { display: none; } .item-grid.selecting .item-card { cursor: pointer; } .item-grid.selecting .item-check { display: block; position: absolute; top: .5rem; left: .5rem; z-index: 3; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.3); } .item-grid.selecting .item-card.is-selected .item-check { background: var(--accent); border-color: var(--accent); } .item-grid.selecting .item-card.is-selected .item-check::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 700; } .item-grid.selecting .item-card.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; } /* In select mode, cards that track ISBNs show whether they have one - so "fetch details" runs can skip the already-complete items. */ .item-grid.selecting .item-card[data-has-isbn]::after { content: 'no ISBN'; position: absolute; top: .5rem; right: .5rem; z-index: 3; padding: .1rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: rgba(0, 0, 0, .55); color: #fff; } .item-grid.selecting .item-card[data-has-isbn="1"]::after { content: 'ISBN ✓'; background: var(--accent); color: var(--accent-text); } /* Public sharing pages */ .public-head { margin-bottom: 1.2rem; } .item-card-static { cursor: default; } .item-card-static:hover { transform: none; box-shadow: var(--shadow-sm); } /* Barcode rapid-add */ .barcode-rapid { display: flex; align-items: center; gap: .5rem; font-size: .88rem; margin: .2rem 0 .6rem; cursor: pointer; } .barcode-rapid input { width: 1.05rem; height: 1.05rem; } #barcode-batch { margin-top: .8rem; max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; } #barcode-batch:empty { display: none; } #barcode-batch .imp-log-row { border-bottom: 1px solid var(--border); } #barcode-batch .imp-log-row:last-child { border-bottom: 0; } /* Bulk add */ .import-actions { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; } #imp-progress { margin-top: .8rem; } .import-log { margin-top: .8rem; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; } .imp-log-row { display: flex; justify-content: space-between; gap: .8rem; align-items: center; padding: .35rem .6rem; border-bottom: 1px solid var(--border); font-size: .85rem; } .imp-log-row:last-child { border-bottom: 0; } .imp-log-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Add ISBNs list */ .isbn-tools { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 1rem; flex-wrap: wrap; } .isbn-list { display: flex; flex-direction: column; gap: .5rem; } .isbn-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "cover meta entry" "cover status status"; align-items: center; gap: .3rem .7rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .isbn-row.isbn-done { opacity: .6; } .isbn-cover { grid-area: cover; width: 44px; height: 60px; border-radius: 5px; overflow: hidden; display: block; background: var(--border); } .isbn-cover img { width: 100%; height: 100%; object-fit: cover; } .isbn-cover .cover-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.2rem; } .isbn-meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .isbn-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .isbn-meta .muted { font-size: .8rem; } .isbn-entry { grid-area: entry; display: flex; gap: .35rem; align-items: center; } .isbn-input { width: 9.5rem; max-width: 40vw; } .isbn-status { grid-area: status; font-size: .78rem; min-height: 1em; } @media (max-width: 560px) { .isbn-row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "cover meta" "entry entry" "status status"; } .isbn-input { width: auto; max-width: none; flex: 1; } } .detail-table { border-collapse: collapse; margin: .9rem 0; width: 100%; max-width: 500px; } .detail-table th, .detail-table td { text-align: left; padding: .42rem .9rem .42rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; } .detail-table th { color: var(--muted); font-weight: 500; white-space: nowrap; width: 1%; padding-right: 1.6rem; } .notes { white-space: pre-wrap; } /* ── Forms ──────────────────────────────────────────────── */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.35rem 1.5rem; margin-bottom: 1.3rem; max-width: 780px; } .form-card h3 { margin-top: .2em; font-size: 1.08rem; font-family: var(--font-display); } label:not(.form-label):not(.form-check-label) { display: block; margin: .75rem 0; font-weight: 500; font-size: .9rem; } input[type="text"]:not(.form-control), input[type="number"]:not(.form-control), input[type="search"]:not(.form-control), input[type="password"]:not(.form-control), select:not(.form-select), textarea:not(.form-control) { width: 100%; margin-top: .3rem; padding: .55rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Bootstrap form components, skinned to the site's tokens */ .form-label { margin: 0 0 .35rem; font-weight: 500; font-size: .9rem; } .form-control, .form-select { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: .5rem .75rem; } .form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-control::placeholder { color: var(--muted); opacity: .75; } .form-check { margin: .35rem 0; } .form-check-label { font-size: .92rem; } .form-check-input { border-color: var(--border-strong); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input-group > .form-control, .input-group > .form-select { margin-top: 0; } .form-text { color: var(--muted); } input[type="file"] { margin-top: .4rem; font-size: .88rem; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 0 1.1rem; } .form-card .actions { display: flex; gap: .6rem; margin-top: 1.1rem; align-items: center; flex-wrap: wrap; } .check { display: flex; align-items: center; gap: .5rem; font-weight: 400; } .check input { width: auto; margin: 0; accent-color: var(--accent); } .danger-zone { margin-top: 2.2rem; } /* Collection field editor */ .field-head, .field-row { display: grid; grid-template-columns: 24px minmax(150px, 1.2fr) 150px 1.6fr auto; gap: .7rem; align-items: start; } .field-head { padding: 0 .85rem .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .d-none.d-md-grid { display: none; } @media (min-width: 768px) { .d-none.d-md-grid { display: grid; } } .field-row { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .85rem; margin-bottom: .55rem; } .f-cell input, .f-cell select { margin-top: 0; } .f-keynote { min-height: 0; margin-top: .2rem; font-size: .72rem; } .f-optdash { line-height: 2.4; padding-left: .2rem; } .f-controls { display: flex; gap: .1rem; align-items: center; padding-top: .2rem; } .f-controls .btn { padding: .15rem .45rem; font-size: .85rem; } .f-controls .f-remove { color: var(--danger); } .f-mobile-label { display: none; font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; } @media (max-width: 767px) { .field-row { grid-template-columns: 28px 1fr; gap: .5rem; } .field-row .f-dragcell { grid-row: 1 / span 4; padding-top: 1.3rem; } .f-mobile-label { display: block; } .f-controls { justify-content: flex-end; grid-column: 2; } } .icon-input { text-align: center; font-size: 1.2rem; } /* Drag handle + sticky save bar */ .f-drag { cursor: grab; touch-action: none; /* finger drag reorders instead of scrolling */ color: var(--muted); font-size: 1.05rem; padding: .45rem .25rem; user-select: none; display: inline-block; } .f-drag:hover { color: var(--accent); } .field-row.is-dragging { border-color: var(--accent); box-shadow: var(--shadow-lg); opacity: .92; position: relative; z-index: 5; } .field-row.is-dragging .f-drag { cursor: grabbing; } .save-bar { position: sticky; bottom: 0; z-index: 40; display: flex; gap: .6rem; align-items: center; padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); } /* Choice chips */ .chip-editor { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .35rem .45rem; cursor: text; min-height: 42px; } .chip-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .chip-list { display: contents; } .chip { display: inline-flex; align-items: center; gap: .15rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 99px; padding: .1rem .15rem .1rem .3rem; font-size: .82rem; font-weight: 500; white-space: nowrap; } .chip-grip { cursor: grab; touch-action: none; /* finger drag reorders instead of scrolling */ user-select: none; color: color-mix(in srgb, var(--muted) 70%, transparent); font-size: .74em; padding: 0 .25rem 0 .15rem; } .chip-grip:hover { color: var(--accent); } .chip.chip-dragging { border-color: var(--accent); box-shadow: var(--shadow-md); opacity: .92; position: relative; z-index: 5; } .chip.chip-dragging .chip-grip { cursor: grabbing; } .chip-text { cursor: text; } .chip-text:hover { color: var(--accent); } .chip-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 .3rem; border-radius: 50%; } .chip-x:hover { color: var(--danger); } .chip-entry { flex: 1; min-width: 110px; border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: .15rem .3rem !important; margin: 0 !important; font-size: .85rem; color: var(--text); } .chips-view { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; } .chip-view { padding: .1rem .65rem; } .chip-dot { width: .62em; height: .62em; border-radius: 50%; display: inline-block; } .chip .chip-dot { margin-right: .35rem; } /* Choices modal */ .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); } .modal-header, .modal-footer { border-color: var(--border); } .cm-hint { font-size: .84rem; margin-top: 0; } .cm-palette { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .55rem .6rem; margin-bottom: .9rem; background: var(--surface-2); border-radius: var(--radius-sm); } .cm-swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .cm-swatch:hover { transform: scale(1.12); } .cm-swatch.armed { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.15); } .cm-swatch-none { background: var(--surface); color: var(--muted); font-size: .95rem; line-height: 1; } .cm-paint-tip { font-size: .76rem; flex-basis: 100%; } .cm-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; } .cm-row { display: flex; gap: .35rem; align-items: center; } .cm-row .cm-text { flex: 1; margin: 0; min-width: 0; } .cm-colorwrap { flex: 0 0 38px; display: inline-flex; cursor: pointer; } .cm-color { width: 38px; height: 38px; padding: 3px; pointer-events: none; /* the wrapper decides: paint or open the picker */ border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); } .cm-color.cm-nocolor { opacity: .25; } .cm-clearcolor { padding: .15rem .3rem; } .cm-row .btn-quiet { padding: .2rem .45rem; } .cm-del { color: var(--danger); } /* Coloured value badges on list cards */ .opt-badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; } .opt-badge { display: inline-flex; align-items: center; gap: .35rem; } .opt-badge i { width: .62em; height: .62em; border-radius: 50%; display: inline-block; } .filter-select { max-width: 190px; width: auto; margin-top: 0; } /* Collection page: primary actions beside the title, tools in their own row */ .tool-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.2rem; } @media (max-width: 640px) { .collection-head { flex-wrap: nowrap; align-items: center; gap: .6rem; } .collection-head h1 { font-size: 1.35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .primary-actions { flex-wrap: nowrap; flex-shrink: 0; } .primary-actions .btn { padding: .4rem .65rem; font-size: .86rem; white-space: nowrap; } .tool-row { gap: .45rem; } .tool-row .btn { white-space: nowrap; padding: .3rem .55rem; font-size: .8rem; } } /* Filter panel: inline on desktop, collapsible behind Filters on mobile */ .filter-panel { gap: .7rem; flex-wrap: wrap; align-items: center; } .filter-panel select { width: auto; max-width: 220px; margin-top: 0; } .filter-toggle { display: inline-flex; gap: .45rem; } @media (max-width: 767.98px) { .filter-bar { gap: .5rem; } .filter-bar input[type="search"] { order: 1; } .filter-toggle { order: 2; } .filter-bar .tabs { order: 3; width: 100%; } .filter-bar .tab { flex: 1; text-align: center; } .filter-panel { order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: .65rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; } /* Bootstrap's collapse shows as display:block - force flex so the gap between the stacked inputs actually applies. */ .filter-panel.show, .filter-panel.collapsing { display: flex; } .filter-panel .filter-select, .filter-panel select { max-width: none; width: 100%; } .filter-panel .btn { align-self: flex-start; } } .template-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; } .template-chip.active { border-color: var(--accent); background: var(--accent-soft); } /* ── Scanner ────────────────────────────────────────────── */ .scan-tabs { margin: 1.1rem 0 .9rem; } .drop-zone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 2.6rem 1rem; text-align: center; cursor: pointer; margin-top: .6rem; transition: border-color .15s ease, background .15s ease; } .drop-zone:hover, .drop-zone.drag { border-color: var(--accent); background: var(--accent-soft); } .drop-zone p { margin: .2rem 0; } .drop-icon { font-size: 2.6rem; display: block; margin-bottom: .5rem; } .drop-buttons { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: .3rem 0 .7rem; } #scan-preview { margin-top: 1.1rem; } #scan-preview .actions { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; } .scan-queue { display: flex; flex-wrap: wrap; gap: .7rem; } .scan-thumb { position: relative; width: 106px; } .scan-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .scan-thumb-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: .4rem; padding: .06rem .55rem; border-radius: 99px; font-size: .68rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border); color: var(--muted); } .scan-thumb-note.scanning { color: var(--gold); animation: pulse 1.2s ease-in-out infinite; } .scan-thumb-note.done { color: var(--accent); } .scan-thumb-note.error { color: var(--danger); } .scan-found-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; } .scan-found-row h3 { margin: .6rem 0 .4rem; } .scan-result { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem; margin: .45rem 0; background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); } .scan-result-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .scan-result-head .check.big { flex: 1; min-width: 200px; margin: 0; flex-wrap: nowrap; } .scan-result-head input.r-title { font-weight: 600; padding-top: .35rem; padding-bottom: .35rem; width: auto; flex: 1; margin-top: 0; min-width: 0; } .scan-badges { display: flex; gap: .35rem; align-items: center; } .scan-toggle { padding: .1rem .45rem; font-size: 1rem; transition: transform .15s ease; } .scan-result.open .scan-toggle { transform: rotate(180deg); } .scan-result-body { display: none; padding: .4rem .1rem .3rem; } .scan-result.open .scan-result-body { display: block; } .scan-summary { margin: .1rem 0 .3rem; font-size: .84rem; } .scan-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; } .barcode-actions { display: flex; gap: .6rem; margin: 1rem 0; flex-wrap: wrap; } .barcode-manual { display: flex; gap: .6rem; max-width: 440px; } .barcode-manual input { margin-top: 0; } #barcode-live { position: relative; max-width: 480px; } #barcode-video { width: 100%; max-width: 480px; border-radius: var(--radius); background: #000; box-shadow: var(--shadow-md); display: block; } /* Big, unmissable per-scan result banner, overlaid on the camera view */ .barcode-last { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 10px; margin: 0 .4rem; color: #fff; font-size: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.35); } .barcode-last-cover { width: 34px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .barcode-last-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .barcode-last-text strong { font-size: 1.05rem; } .barcode-last-text span { opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barcode-last.last-added { background: #15803d; } .barcode-last.last-existed { background: #b45309; } .barcode-last.last-error { background: #b91c1c; } .barcode-last.last-adding { background: #334155; } .ai-loading .spin { display: inline-block; animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .3; } } /* ── Processing overlay ─────────────────────────────────── */ .proc-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: rise .18s ease both; } .proc-overlay[hidden] { display: none; } .proc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.7rem 2.1rem; text-align: center; min-width: 280px; max-width: min(90vw, 400px); } .proc-spinner { width: 46px; height: 46px; margin: 0 auto 1rem; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent); animation: procspin .9s linear infinite; } @keyframes procspin { to { transform: rotate(360deg); } } .proc-title { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; } .proc-sub { color: var(--muted); font-size: .9rem; margin-top: .25rem; min-height: 1.3em; } .proc-bar { margin-top: 1rem; } .proc-bar .bar-track { height: 8px; } /* ── Insights ───────────────────────────────────────────── */ .insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; } .insight-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; margin-bottom: .7rem; } .insight-card h3 { margin-top: 0; font-family: var(--font-display); font-size: 1.05rem; } .insight-card ul { margin: .45rem 0; padding-left: 1.2rem; } .insight-card li { margin: .4rem 0; } .observations li { margin: .45rem 0; } .ai-block { margin-top: 1.7rem; } #ai-info-result { margin-top: .9rem; } /* ── Chat ───────────────────────────────────────────────── */ .chat-app { display: flex; flex-direction: column; max-width: 780px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); height: min(72vh, 660px); overflow: hidden; } .chat-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); } .chat-scope { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .88rem; } .chat-scope select { width: auto; margin: 0; padding: .35rem .6rem; } .chat-log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; scrollbar-width: thin; } .chat-msg { max-width: 85%; padding: .6rem .95rem; border-radius: 16px; font-size: .95rem; animation: rise .18s ease both; } .chat-msg p { margin: .35em 0; } .chat-msg p:first-child { margin-top: 0; } .chat-msg p:last-child { margin-bottom: 0; } .chat-msg ul { margin: .35em 0; padding-left: 1.2em; } .chat-user { align-self: flex-end; background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: var(--accent-text); border-bottom-right-radius: 5px; } .chat-ai { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 5px; } .chat-input { display: flex; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid var(--border); } .chat-input input { margin: 0; flex: 1; border-radius: 99px; padding-left: 1rem; } .chat-input .btn { border-radius: 99px; } /* ── Stats: tiles + bars ────────────────────────────────── */ .stat-tiles { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.3rem 0; } .stat-tile { display: flex; flex-direction: column; min-width: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.2rem; } .stat-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.15; } .stat-label { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-top: .15rem; } .stat-sub { font-size: .76rem; margin-top: .1rem; } .chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; } .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.2rem 1.1rem; margin-bottom: 1rem; } .chart-card h3 { margin-top: 0; font-family: var(--font-display); font-size: 1.02rem; } .bar-row { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: .65rem; align-items: center; margin: .4rem 0; font-size: .87rem; } .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { background: var(--surface-2); border-radius: 99px; height: 13px; } .bar-fill { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--gold))); border-radius: 99px; height: 100%; min-width: 3px; } .bar-val { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .82rem; white-space: nowrap; } .chart-note { font-size: .74rem; margin: .5rem 0 0; } /* ── Login ──────────────────────────────────────────────── */ .login-wrap { display: flex; justify-content: center; padding: 3.5rem 0 2rem; } .login-card { width: min(400px, 100%); text-align: center; padding: 2rem 1.8rem; } .login-card h1 { font-size: 1.7rem; margin: .3em 0 .2em; } .login-card label { text-align: left; } .login-mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto .4rem; font-size: 1.9rem; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); border-radius: 18px; box-shadow: var(--shadow-md); } .login-btn { width: 100%; justify-content: center; margin-top: .8rem; } /* ── Tables ─────────────────────────────────────────────── */ .value-table { border-collapse: separate; border-spacing: 0; width: 100%; margin-top: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); } .value-table th, .value-table td { text-align: left; padding: .5rem .85rem; border-bottom: 1px solid var(--border); font-size: .89rem; } .value-table tbody tr:last-child td { border-bottom: none; } .value-table thead th { background: var(--surface-2); font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .value-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .value-table tr.notable td { background: var(--gold-soft); } .backup-table { max-width: 100%; } /* Item page: tap-to-rate stars + progress tabs */ .item-badges-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .rate-form { display: inline-flex; align-items: center; margin: 0; } .rate-star { background: none; border: none; cursor: pointer; appearance: none; font-size: 1.5rem; line-height: 1; padding: 0 .05em; color: var(--muted); /* fallback for engines without text-stroke */ transition: color .1s ease, transform .1s ease; } .rate-star.on { color: var(--gold); } .rate-star:hover { transform: scale(1.18); } .rate-star:focus-visible { outline: none; transform: scale(1.18); } /* Outline when empty, solid gold when set - and hovering star N previews stars 1..N filled. */ @supports (-webkit-text-stroke: 1px black) { .rate-star { color: transparent; -webkit-text-stroke: 1.3px var(--muted); } .rate-star.on { color: var(--gold); -webkit-text-stroke: 1.3px var(--gold); } .rate-form:has(.rate-star:hover) .rate-star { color: var(--gold); -webkit-text-stroke: 1.3px var(--gold); } .rate-form .rate-star:hover ~ .rate-star { color: transparent; -webkit-text-stroke: 1.3px var(--muted); } } .rate-clear { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; padding: 0 .25rem; } .rate-clear:hover { color: var(--danger); } .progress-tabs { margin: .2rem 0 .8rem; } .progress-tabs .tab { cursor: pointer; } /* Wishlist page cards (div-based: title links, ✓ Got it button inside) */ .item-card a.item-cover { display: block; } .item-title-link { color: var(--text); } .item-title-link:hover { color: var(--accent); text-decoration: none; } .got-form { margin: .4rem 0 0; } /* Scan jobs */ .scan-jobs { display: flex; flex-direction: column; gap: .5rem; } .scan-job-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .scan-job-row:hover { text-decoration: none; border-color: var(--accent); } .sj-main { display: flex; flex-direction: column; min-width: 0; } .sj-main .muted { font-size: .8rem; } .sj-side { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } #sj-progress .proc-bar { max-width: 520px; margin: 1.2rem 0 .5rem; } .cron-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .8rem; overflow-x: auto; } .cron-box code { background: none; font-size: .82rem; white-space: nowrap; } .backup-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; } .backup-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .backup-info { display: flex; flex-direction: column; min-width: 0; } .backup-name { font-family: ui-monospace, monospace; font-size: .8rem; overflow-wrap: anywhere; } .backup-info .muted { font-size: .76rem; } .backup-row form { margin: 0; flex-shrink: 0; } /* ── Sets ───────────────────────────────────────────────── */ .sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; align-items: start; } .set-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; } .set-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; } .set-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.08rem; } .set-head .muted { font-size: .8rem; white-space: nowrap; } .set-progress { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; margin: .6rem 0 .3rem; } .set-entries { list-style: none; margin: .5rem 0 0; padding: 0; } .set-entry { display: flex; align-items: center; gap: .55rem; padding: .28rem 0; font-size: .92rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .set-entry:last-child { border-bottom: none; } .set-entry-title { flex: 1; } .set-mark { font-weight: 700; width: 1.1em; text-align: center; } .set-entry.owned .set-mark { color: var(--accent); } .set-entry.wishlist .set-mark { color: var(--gold); } .set-entry.missing .set-mark { color: var(--danger); } .set-entry.missing .set-entry-title { color: var(--muted); } .set-note { font-size: .82rem; margin: .5rem 0 0; } .set-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .75rem; } .set-checked-at { font-size: .78rem; } /* ── Loans & locations ──────────────────────────────────── */ .loan-tag { position: absolute; top: .5rem; right: .5rem; background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .16rem .6rem; border-radius: 99px; border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 6px rgba(0, 0, 0, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .loan-box { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .85rem; margin: .8rem 0; font-size: .92rem; } .loan-box form { display: flex; gap: .5rem; align-items: center; margin: 0; } .loan-form { flex: 1; min-width: 240px; } .loan-form input[type="text"] { margin: 0; flex: 1; padding: .4rem .7rem; font-size: .9rem; } /* ── Item photo gallery ─────────────────────────────────── */ .photo-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 .7rem; } .photo-thumb { position: relative; } .photo-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: block; transition: transform .14s ease; } .photo-thumb a:hover img { transform: scale(1.05); } .photo-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--danger); font-size: .72rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); } .photo-add { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; max-width: 560px; } .photo-add input[type="file"] { max-width: 260px; } .photo-add .muted { font-size: .82rem; } /* ── Recently added strip (home) ────────────────────────── */ .recent-strip { margin: 0 0 1.6rem; } .recent-strip-bottom { margin: 2rem 0 0; } .recent-strip h2 { margin: 0 0 .6rem; font-size: 1.15rem; } .recent-row { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; } .recent-card { flex: 0 0 96px; display: flex; flex-direction: column; gap: .3rem; color: var(--text); font-size: .76rem; line-height: 1.3; } .recent-card:hover { text-decoration: none; color: var(--accent); } .recent-card img, .recent-noimg { width: 96px; height: 140px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: block; transition: transform .14s ease; } .recent-card:hover img { transform: translateY(-3px); } .recent-noimg { display: grid; place-items: center; font-size: 2rem; background: var(--surface-2); opacity: .8; } .recent-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Discover ───────────────────────────────────────────── */ .disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.2rem; } .disc-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow-sm); } .disc-cover { aspect-ratio: 2 / 3; background: var(--surface-2); } .disc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .disc-noimg { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2rem; opacity: .5; } .disc-meta { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem .7rem; font-size: .85rem; } .disc-meta strong { line-height: 1.3; } .disc-meta .muted { font-size: .76rem; } .disc-src { text-transform: uppercase; letter-spacing: .05em; font-size: .66rem !important; } .disc-meta .btn, .disc-meta .badge, .disc-meta .disc-add { margin-top: .45rem; align-self: flex-start; } .disc-add { display: inline-flex; gap: .35rem; flex-wrap: wrap; } .dm-action .disc-add { display: flex; gap: .5rem; } .disc-info-line { font-size: .74rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .disc-card.has-details { cursor: pointer; } .disc-cover { position: relative; } .disc-info-cue { position: absolute; top: .35rem; right: .35rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--bg) 70%, transparent); color: #fff; font-size: .85rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .disc-card.has-details:hover .disc-info-cue { background: var(--accent); color: var(--accent-text); } /* Discover details modal */ .dm-body { font-size: .92rem; } .dm-top { display: flex; gap: 1rem; margin-bottom: .6rem; } .dm-cover { width: 120px; flex: 0 0 120px; border-radius: 9px; box-shadow: var(--shadow-sm); } .dm-side { min-width: 0; } .dm-meta { margin: 0 0 .4rem; } .dm-info { color: var(--gold); font-weight: 600; font-size: .86rem; margin: 0 0 .6rem; } .dm-overview { line-height: 1.55; margin: 0; } .dm-action { margin-top: .4rem; } @media (max-width: 480px) { .dm-top { flex-direction: column; } .dm-cover { width: 96px; flex-basis: 96px; } } /* ── Settings quick links ───────────────────────────────── */ .settings-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: 1.1rem 0 1.5rem; max-width: 780px; } .settings-link { display: flex; align-items: center; gap: .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .85rem 1.05rem; color: var(--text); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .settings-link:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); } .sl-icon { font-size: 1.55rem; } .sl-text { display: flex; flex-direction: column; line-height: 1.35; } .sl-text .muted { font-size: .82rem; } /* Settings tabs */ .settings-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 1.35rem; } .settings-tab-btn { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 500; padding: .55rem .95rem; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; } .settings-tab-btn:hover { color: var(--accent); background: var(--accent-soft); } .settings-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .settings-tab { display: none; } .settings-tab.active { display: block; } /* Cross-collection "also in 🎧" chips on item cards */ .xcol-badge { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); } /* Overlap: same title in two collections */ .overlap-list { display: flex; flex-direction: column; gap: .45rem; max-width: 720px; } .overlap-row { display: flex; align-items: center; gap: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .5rem .8rem; } .overlap-cover { width: 34px; height: 48px; flex-shrink: 0; border-radius: 4px; overflow: hidden; } .overlap-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .overlap-names { flex: 1; min-width: 0; display: flex; flex-direction: column; } .overlap-names .muted { font-size: .8rem; } .overlap-badges { display: flex; gap: .4rem; flex-shrink: 0; } /* Collection header: Add dropdown (Add one / Scan / Bulk add / ISBNs) */ .add-menu { position: relative; } .add-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .35rem; display: flex; flex-direction: column; } .add-menu-list a { display: block; padding: .55rem .8rem; border-radius: 8px; color: var(--text); white-space: nowrap; } .add-menu-list a:hover { background: var(--accent-soft); color: var(--accent); } /* Bulk add: manual title rows */ .imp-row { display: flex; gap: .5rem; margin-bottom: .5rem; align-items: center; } .imp-row input:first-child { flex: 3; } .imp-row input:nth-child(2) { flex: 2; } .imp-row .btn { flex-shrink: 0; } /* Sets: complete sets tucked away; merge suggestion on split series */ .sets-complete { margin-top: 1.6rem; } .sets-complete summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: .5rem 0; margin-bottom: .6rem; } .sets-complete summary:hover { color: var(--accent); } .set-merge { margin: .35rem 0 0; } /* ── Duplicate review ───────────────────────────────────── */ .dupe-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.15rem; margin-bottom: 1rem; } .dupe-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; } .dupe-head h3 { margin: 0; font-family: var(--font-display); } .dupe-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem; margin-top: .8rem; } .dupe-item { display: flex; gap: .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem; } .dupe-item img { width: 58px; height: 84px; object-fit: cover; border-radius: 6px; } .dupe-noimg { display: grid; place-items: center; width: 58px; height: 84px; background: var(--surface-2); border-radius: 6px; font-size: 1.5rem; opacity: .6; } .dupe-meta { display: flex; flex-direction: column; gap: .1rem; font-size: .86rem; } .dupe-actions { display: flex; gap: .4rem; margin-top: .35rem; align-items: center; } .dupe-actions form { margin: 0; } .wipe-card { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); } .wipe-row { max-width: 420px; }