/* ============================================================ NOVELTY — Forest Green / Gold Theme Font: Playfair Display (headings) + Source Serif 4 (body) Supports dark (default) and light mode via [data-theme="light"] ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300&display=swap'); /* ------------------------------------------------------------ CSS Custom Properties ------------------------------------------------------------ */ :root { /* Core palette — warm cream content, forest green nav (light-first) */ --bg-deep: #e8e2d5; --bg-main: #f5f1e8; /* Warm cream page background */ --bg-surface: #1f3a36; /* Forest green — sidebar */ --bg-elevated: #edeadf; /* Table row hover */ --bg-table-header:#d8e8d4; /* Pale green table header */ --bg-input: #e8e4d8; /* Gold accent spectrum */ --amber-muted: #c4963c; /* Muted gold */ --amber: #bb8a44; /* Primary gold accent */ --amber-bright: #a87830; /* Darker gold for contrast on light bg */ --amber-glow: #8a5e18; --gold: #bb8a44; /* Text */ --text-primary: #111111; /* Near-black body text */ --text-secondary: #1f3a36; /* Dark green secondary */ --text-muted: #7a9a8a; /* Muted sage */ --text-link: #bb8a44; /* Gold links */ /* Sidebar-specific (always dark green) */ --sidebar-bg: #1f3a36; --sidebar-text: #d8ece4; /* Light mint — readable on dark green */ --sidebar-muted: #8abcaa; --sidebar-active-bg: #16302c; --sidebar-active-text:#bb8a44; /* Gold for active/highlighted */ --sidebar-hover-bg: #16302c; --sidebar-border: #2a4e44; /* Semantic */ --success: #2a6a3a; --success-light: #1a5a28; --danger: #8a2a1a; --danger-light: #7a1a0a; --info: #2a5a7a; --info-light: #1a4a6a; --warning: #8a6420; --warning-light: #7a5010; /* Borders */ --border: #ccc8bc; --border-subtle: #dedad0; --border-accent: #bb8a44; /* Sidebar */ --sidebar-width: 250px; /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; /* Spacing */ --radius: 4px; --radius-lg: 8px; --shadow: 0 2px 12px rgba(0,0,0,0.5); --shadow-deep: 0 4px 24px rgba(0,0,0,0.7); } /* ------------------------------------------------------------ Dark Mode — applied when ------------------------------------------------------------ */ [data-theme="dark"] { --bg-deep: #111f1c; --bg-main: #1a2e28; --bg-surface: #1f3a36; --bg-elevated: #264840; --bg-table-header:#1a3530; --bg-input: #2a5048; --amber-muted: #8a6430; --amber: #bb8a44; --amber-bright: #d4a862; --amber-glow: #e8c98a; --gold: #bb8a44; --text-primary: #f4f1e8; --text-secondary: #a8b8a0; --text-muted: #5a7a6a; --text-link: #d4a862; --sidebar-bg: #111f1c; --sidebar-text: #a8b8a0; --sidebar-muted: #4a6a58; --sidebar-active-bg: #1f3a36; --sidebar-active-text: #bb8a44; --sidebar-hover-bg: #1f3a36; --sidebar-border: #1e3830; --success: #3a7a5a; --success-light: #5a9a78; --danger: #8a3a2a; --danger-light: #b85848; --info: #3a6a8a; --info-light: #5a8aaa; --warning: #8a7030; --warning-light: #b89848; --border: #2e5048; --border-subtle: #1e3830; --border-accent: #5a7a50; --shadow: 0 2px 12px rgba(0,0,0,0.5); --shadow-deep: 0 4px 24px rgba(0,0,0,0.7); } [data-theme="dark"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(187,138,68,0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, rgba(31,58,54,0.03) 0%, transparent 60%); } /* ------------------------------------------------------------ Reset & Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--text-primary); background: var(--bg-main); /* Subtle noise texture */ background-image: radial-gradient(ellipse at 20% 0%, rgba(187,138,68,0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, rgba(31,58,54,0.03) 0%, transparent 60%); } a { color: var(--text-link); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--amber-glow); text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--amber-bright); letter-spacing: 0.01em; } /* ------------------------------------------------------------ Layout ------------------------------------------------------------ */ .wrapper { display: flex; min-height: 100vh; } /* Sidebar */ #sidebar { width: var(--sidebar-width); min-height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 100; transition: width 0.2s ease; } .sidebar-header { padding: 24px 20px 16px; border-bottom: 1px solid var(--sidebar-border); background: linear-gradient(135deg, var(--sidebar-active-bg) 0%, var(--sidebar-bg) 100%); } .sidebar-header h1 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #bb8a44; margin: 0 0 2px; letter-spacing: 0.03em; } .sidebar-header .tagline { font-size: 0.7rem; color: #6a9a84; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); font-style: italic; } /* Nav groups */ .nav-group { padding: 10px 0 4px; } .nav-group-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-muted); padding: 6px 20px 4px; font-family: var(--font-body); } .nav-divider { height: 1px; background: var(--border-subtle); margin: 8px 16px; } #sidebar ul { list-style: none; margin: 0; padding: 0; } #sidebar ul li a { display: flex; align-items: center; gap: 10px; padding: 8px 20px; color: #c8e0d0; font-size: 0.875rem; font-family: var(--font-body); text-decoration: none; transition: all 0.15s ease; border-left: 3px solid transparent; line-height: 1.3; } #sidebar ul li a:hover { color: #ffffff; background: rgba(255,255,255,0.08); border-left-color: #8abcaa; text-decoration: none; } #sidebar ul li a.active { color: #bb8a44; background: rgba(0,0,0,0.2); border-left-color: #bb8a44; font-weight: 600; } #sidebar ul li a i { width: 16px; text-align: center; color: #8abcaa; font-size: 0.8rem; flex-shrink: 0; } #sidebar ul li a.active i, #sidebar ul li a:hover i { color: #bb8a44; } /* Main content */ .main-content { margin-left: var(--sidebar-width); flex: 1; padding: 32px 36px; max-width: calc(100vw - var(--sidebar-width)); } /* Table wraps to content width, never wider than available space */ .table-wrap { max-width: 100%; display: inline-block; width: auto; min-width: 500px; } /* Page header */ .page-header { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .page-header h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: #1f3a36; margin: 0 0 4px; } .page-header .page-subtitle { font-size: 0.85rem; color: var(--text-muted); font-style: italic; } /* Count badge */ .count-badge { display: inline-block; background: var(--bg-elevated); color: var(--amber); border: 1px solid var(--border-accent); border-radius: 20px; padding: 2px 10px; font-size: 0.78rem; font-family: var(--font-body); vertical-align: middle; margin-left: 10px; } /* ------------------------------------------------------------ Tables ------------------------------------------------------------ */ .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); margin: 0 2px; } /* Force padding on every th and td regardless of DataTables interference */ .table-wrap table th, .table-wrap table td, .novelty-table th, .novelty-table td, table.dataTable thead th, table.dataTable thead td, table.dataTable tbody th, table.dataTable tbody td { padding: 12px 20px !important; box-sizing: border-box; } table.novelty-table { width: auto; min-width: 100%; border-collapse: collapse; font-size: 0.875rem; table-layout: auto; } table.novelty-table thead th { background: var(--bg-table-header, #d8e8d4) !important; color: #1f3a36 !important; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 20px !important; text-align: left; border-bottom: 2px solid #b0c8b0; white-space: nowrap; } table.novelty-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background 0.1s ease; } table.novelty-table tbody td:first-child, table.novelty-table thead th:first-child { padding-left: 20px !important; } table.novelty-table tbody td:last-child, table.novelty-table thead th:last-child { padding-right: 20px !important; } table.novelty-table tbody tr:hover { background: var(--bg-elevated); } table.novelty-table tbody td { padding: 12px 20px !important; vertical-align: middle; color: var(--text-primary); } /* DataTables overrides */ /* DataTables container padding */ .dataTables_wrapper { padding: 0; } .dataTables_scrollHead, .dataTables_scrollBody { padding-left: 0 !important; } .dataTables_wrapper table.dataTable { margin: 0 !important; } .dt-top { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; } .dt-top-page { padding: 6px 20px 10px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--border); } .dt-bottom { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); } /* Nuclear option — every single cell in any table inside table-wrap */ .table-wrap th { padding-left: 20px !important; padding-right: 20px !important; } .table-wrap td { padding-left: 20px !important; padding-right: 20px !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius); padding: 4px 8px; font-family: var(--font-body); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label { color: #1f3a36; font-family: var(--font-body); font-size: 0.8rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: #1f3a36 !important; border: 1px solid transparent !important; background: none !important; padding: 4px 10px !important; border-radius: var(--radius) !important; font-weight: 500 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg-elevated) !important; color: #1f3a36 !important; border: 1px solid var(--border) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--amber) !important; color: #ffffff !important; border: 1px solid var(--amber) !important; font-weight: 600 !important; } /* Book titles in tables — light mode */ .book-title-cell { font-weight: 700; color: #1f3a36; } table.novelty-table a { color: #1f3a36; font-weight: 700; text-decoration: none; } table.novelty-table a:hover { color: var(--amber); text-decoration: underline; } table.novelty-table td a.author-link { color: #3a5a50; font-weight: 400; } table.novelty-table td a.author-link:hover { color: var(--amber); } a.book-title-link { color: #1f3a36; font-weight: 700; } a.book-title-link:hover { color: #bb8a44; } /* Dark mode overrides for table text */ [data-theme="dark"] table.novelty-table a, [data-theme="dark"] a.book-title-link { color: #e0ece0 !important; font-weight: 700; } [data-theme="dark"] table.novelty-table a:hover, [data-theme="dark"] a.book-title-link:hover { color: #cc9a4e !important; } [data-theme="dark"] table.novelty-table td { color: #e0ece0; } [data-theme="dark"] table.novelty-table td a.author-link { color: #6a9a84 !important; font-weight: 400; } [data-theme="dark"] table.novelty-table td a.author-link:hover { color: #cc9a4e !important; } /* ------------------------------------------------------------ Series books — read/unread styling ------------------------------------------------------------ */ .title-read { text-decoration: line-through !important; font-style: italic; opacity: 0.55; } tr.row-read { opacity: 0.75; } .status-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; } .status-read-badge { background: rgba(42,106,72,0.15); color: var(--success-light); border: 1px solid var(--success); } .status-unread-badge { background: rgba(187,138,68,0.12); color: var(--amber); border: 1px solid var(--amber-muted); } /* ------------------------------------------------------------ Book cards (grid views) ------------------------------------------------------------ */ .books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; } .book-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; } .book-card:hover { transform: translateY(-3px); border-color: var(--border-accent); box-shadow: var(--shadow-deep); } .book-card .cover-wrap { aspect-ratio: 2/3; overflow: hidden; background: var(--bg-elevated); position: relative; } .book-card .cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .book-card .cover-wrap .no-cover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 2.5rem; } .book-card .card-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 3px; background: var(--bg-surface); } .book-card .card-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .book-card .card-title a { color: #d8ece0 !important; text-decoration: none; } .book-card .card-title a:hover { color: var(--amber) !important; } .book-card .card-author { font-size: 0.75rem; color: #8abcaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .book-card .card-date { font-size: 0.7rem; color: #bb8a44; margin-top: auto; padding-top: 4px; } .book-card .card-actions { padding: 6px 12px 10px; display: flex; gap: 4px; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--bg-surface); } /* Favorite series glow */ .book-card.favorite { border-color: var(--amber-muted); } .book-card.favorite .cover-wrap::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(201,144,58,0.4); pointer-events: none; } /* ------------------------------------------------------------ Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 12px; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.8rem; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; line-height: 1.4; } .btn-sm { padding: 3px 8px; font-size: 0.73rem; } .btn-icon { padding: 4px 7px; font-size: 0.75rem; } .btn-amber { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); font-weight: 600; } .btn-amber:hover { background: var(--amber-bright); border-color: var(--amber-bright); } .btn-ghost { background: var(--bg-elevated); color: var(--text-secondary); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-input); color: var(--amber); border-color: var(--border-accent); } .btn-success { background: var(--success); color: #fff; border-color: var(--success); } .btn-success:hover { background: var(--success-light); } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { background: var(--danger-light); } .btn-active { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); } /* Heart button */ .btn-heart { background: transparent; border: none; padding: 2px 6px; cursor: pointer; } .btn-heart .fa-heart { color: var(--text-muted); transition: color 0.15s; } .btn-heart:hover .fa-heart, .btn-heart.active .fa-heart { color: var(--danger-light); } .btn-heart.active .fa-heart { color: #c05040; } /* ------------------------------------------------------------ Inline forms (for POST action buttons) ------------------------------------------------------------ */ form.inline-action { display: inline; margin: 0; } /* ------------------------------------------------------------ Book position badge ------------------------------------------------------------ */ .pos-badge { display: inline-block; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--amber-muted); border-radius: 3px; padding: 0px 5px; font-size: 0.7rem; font-family: var(--font-body); } /* ------------------------------------------------------------ Status indicators ------------------------------------------------------------ */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .status-read { background: var(--success-light); } .status-unread { background: var(--amber-muted); } .status-error { background: var(--danger-light); } /* ------------------------------------------------------------ "Back to top" button ------------------------------------------------------------ */ #back-to-top { position: fixed; bottom: 24px; right: 24px; width: 38px; height: 38px; background: var(--bg-elevated); border: 1px solid var(--border-accent); color: var(--amber); border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; transition: all 0.2s ease; z-index: 200; box-shadow: var(--shadow); } #back-to-top:hover { background: var(--amber); color: var(--bg-deep); } /* ------------------------------------------------------------ Theme toggle button ------------------------------------------------------------ */ #theme-toggle { position: fixed; bottom: 24px; left: 231px; width: 38px; height: 38px; background: var(--bg-elevated); border: 1px solid var(--border-accent); color: var(--amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; transition: all 0.2s ease; z-index: 200; box-shadow: var(--shadow); } #theme-toggle:hover { background: var(--amber); color: var(--bg-deep); } /* Smooth theme transitions */ body, #sidebar, .book-card, .table-wrap, table.novelty-table thead th, table.novelty-table tbody tr { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* ------------------------------------------------------------ Alerts / notices ------------------------------------------------------------ */ .notice { padding: 12px 16px; border-radius: var(--radius); border: 1px solid; font-size: 0.85rem; margin-bottom: 16px; } .notice-info { background: rgba(58,106,138,0.15); border-color: var(--info); color: var(--info-light); } .notice-warning { background: rgba(138,112,32,0.15); border-color: var(--warning); color: var(--warning-light); } /* ------------------------------------------------------------ Scrollbar styling (webkit) ------------------------------------------------------------ */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-accent); } /* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */ @media (max-width: 900px) { :root { --sidebar-width: 200px; } .main-content { padding: 20px; } .books-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } @media (max-width: 640px) { #sidebar { width: 0; overflow: hidden; } .main-content { margin-left: 0; } } /* Dark mode overrides */ [data-theme="dark"] .page-header h2 { color: #e0ece0; } [data-theme="dark"] table.novelty-table thead th { background: #162824 !important; color: #b8d8c8 !important; border-bottom: 2px solid #2a4a3a !important; } [data-theme="dark"] table.novelty-table tbody tr:hover { background: #1a2e2a; } [data-theme="dark"] table.novelty-table a { color: #e0ece0; } [data-theme="dark"] table.novelty-table td a.author-link { color: #6a9a84; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #6a9a84 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: #e0ece0 !important; background: #1a2e2a !important; border-color: #2a4a3a !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_filter label, [data-theme="dark"] .dataTables_wrapper .dataTables_length label { color: #4a7a64; } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: #1e332e; border-color: #2a4a3a; color: #e0ece0; } [data-theme="dark"] .page-header { border-bottom-color: #1a2e2a; } [data-theme="dark"] .count-badge { background: #1a2e2a; border-color: #2a4a3a; color: #cc9a4e; } [data-theme="dark"] .pos-badge { background: #1a2e2a; border-color: #2a4a3a; color: #4a7a64; } /* Actions column — never wrap */ table.novelty-table td:last-child, table.novelty-table th:last-child { white-space: nowrap; width: 1%; }