/* --- FONTS loaded via Google Fonts CDN in index.html --- */ /* --- VARIABLES & RESET --- */ :root { --primary-color: #5c6bc0; --primary-hover: #3f51b5; --primary-light: #e8eaf6; --secondary-color: #37474f; --secondary-light: #546e7a; --success-color: #43a047; --success-hover: #388e3c; --danger-color: #e53935; --warning-color: #fb8c00; --bg-color: #f5f7fa; --sidebar-bg: #ffffff; --border-color: #e1e5eb; --border-light: #f0f2f5; --text-color: #2d3748; --text-light: #718096; --text-muted: #a0aec0; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1); --radius: 8px; --radius-sm: 4px; --radius-lg: 12px; --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; } *, *::before, *::after { box-sizing: border-box; } html { height: 100vh; /* No overflow: hidden here — the tool page's body sets its own overflow: hidden to stay fixed-viewport, but content pages need html to allow viewport scrolling. Clamping overflow on html breaks mousewheel/touch scrolling on about.html and for-libraries.html. */ } /* Branded-instance auth gate. An inline script in index.html adds .awaiting-library-config to synchronously at page load for any non-public host (or localhost with ?library= override). While that class is set, the entire body is visibility: hidden so the tool never renders before the user is authenticated / the config has loaded. #auth-modal is exempted so the login modal can appear on the dark backdrop while the tool behind it stays invisible. app.js's applyLibraryConfig removes the class as its final step, at which point the body becomes visible with the branded state already applied — no flash of the unbranded tool. */ html.awaiting-library-config { background: var(--secondary-color); } html.awaiting-library-config body { visibility: hidden; } html.awaiting-library-config #auth-modal { visibility: visible; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- LOADING STATE --- */ .is-loading { opacity: 0.6; pointer-events: none; cursor: not-allowed; position: relative; } .is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; } /* Hide spinner on buttons with text (they show "Loading..." etc) */ button.is-loading::after { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* Loading state for images/covers */ .cover-carousel.is-loading img, .cover-uploader.is-loading img { opacity: 0.5; } /* --- HEADER --- */ .app-header { background: var(--secondary-color); color: white; padding: 0 16px; height: 52px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 20; gap: 16px; } .header-left { display: flex; align-items: center; gap: 12px; } .app-header .logo { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; padding-right: 12px; border-right: 1px solid rgba(255,255,255,0.2); } .app-header .logo i { font-size: 1.2rem; opacity: 0.9; } .header-credit { font-family: 'EB Garamond', serif; font-size: 0.8rem; font-weight: 400; opacity: 0.6; white-space: nowrap; } /* Branded instances: scale the "for " credit to match the Booklister logo size so the library name reads as co-equal branding rather than a dim subtitle. Opacity is bumped alongside size because 0.6 looks washed out at 1.1rem. */ body.has-library-config .header-credit { font-size: 1.1rem; opacity: 0.9; } /* ========================================================================= CONTENT PAGES (about, for-libraries, contact, privacy) Reuses .app-header, .logo, .header-credit from the tool. Inherits the same fixed-viewport flex column body layout as the tool page, but the middle .content-main area is its own scroll container — so the scrollbar is confined to the area between the header and footer instead of running the full viewport edge. Header and footer are natural flex items (no position: sticky / fixed needed). ========================================================================= */ .app-header a.logo { color: white; text-decoration: none; transition: opacity var(--transition-fast); } .app-header a.logo:hover { opacity: 0.85; } .content-main { flex: 1; /* min-height: 0 is the flexbox incantation that lets this child shrink below the natural height of its content. Without it, a flex item's default `min-height: auto` keeps it at the content's height, which prevents overflow-y: auto from producing a scrollbar. */ min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 56px 24px; display: flex; justify-content: center; } .content-article { max-width: 680px; width: 100%; color: var(--text-color); font-size: 16px; line-height: 1.65; } /* Explicit spacer block at the end of every article, to guarantee a visible buffer between the last paragraph and the footer when the page is scrolled to the bottom. Using a ::after pseudo-element instead of padding/margin sidesteps the WebKit/Chromium quirk where bottom padding on an overflow:auto scroll container gets clipped. */ .content-article::after { content: ''; display: block; height: 40px; } .content-article h1 { font-family: 'EB Garamond', serif; font-size: 2.4rem; font-weight: 700; margin: 0 0 24px; line-height: 1.2; color: var(--text-color); } /* Subtitle-style "Effective ... / Last updated ..." line directly under the h1 on pages that need an effective date (privacy.html today). */ .content-article .content-effective-date { margin: -14px 0 28px; font-size: 0.9rem; color: var(--text-light); font-style: italic; } .content-article h2 { font-size: 1.2rem; font-weight: 600; margin: 36px 0 10px; color: var(--text-color); } .content-article p { margin: 0 0 16px; } .content-article a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; } .content-article a:hover { color: var(--primary-hover); } /* Site Footer (About / For Libraries / Contact) */ .site-footer { height: 32px; background: var(--secondary-color); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'EB Garamond', serif; font-size: 0.95rem; border-top: 1px solid rgba(255,255,255,0.08); box-shadow: 0 -2px 8px rgba(0,0,0,0.15); } .site-footer-nav { display: flex; align-items: center; gap: 10px; } .site-footer-nav a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--transition-fast); white-space: nowrap; } .site-footer-nav a:hover { color: white; } .site-footer-nav a[aria-current="page"] { color: white; font-weight: 600; pointer-events: none; } .site-footer-nav span { color: rgba(255,255,255,0.35); user-select: none; } /* Hide in print mode */ .print-mode .site-footer { display: none !important; } /* Panel Toggle Buttons in Header */ .header-panel-toggles { display: flex; gap: 4px; } .panel-toggle-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: all var(--transition-fast); } .panel-toggle-btn:hover { background: rgba(255,255,255,0.2); color: white; } .panel-toggle-btn.active { background: var(--primary-color); border-color: var(--primary-color); color: white; } /* Header Action Buttons */ .header-actions { display: flex; align-items: center; gap: 6px; } /* Mirror #tour-button's margin-right: 8px so the sign-out button's distance from Generate PDF on its left equals the tour button's distance from Load on its right (both end up 8px margin + 6px gap = 14px of visible spacing). */ .header-actions #auth-signout-button { margin-left: 8px; } /* Role-aware Admin link, injected by applyLibraryConfig on branded instances when the signed-in user's memberships doc has role: 'admin'. Styled to match .btn-header so it feels like a sibling of the other header buttons, but rendered as an anchor since it opens the external admin console in a new tab. */ .header-actions #library-admin-link { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: white; padding: 8px 14px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all var(--transition-fast); text-decoration: none; margin-left: 8px; } .header-actions #library-admin-link:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } .btn-header { background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: white; padding: 8px 14px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all var(--transition-fast); min-width: 75px; justify-content: center; white-space: nowrap; } .btn-header:hover { background-color: rgba(255,255,255,0.2); transform: translateY(-1px); } /* Unsaved-file indicator dot on Save button */ #save-list-button { position: relative; } #save-list-button.has-unsaved::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; background-color: white; border-radius: 50%; pointer-events: none; animation: unsaved-pulse 2s ease-in-out infinite; } @keyframes unsaved-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .btn-header-primary { background-color: var(--success-color); border: none; color: white; padding: 8px 16px; border-radius: var(--radius); font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all var(--transition-fast); min-width: 120px; justify-content: center; font-weight: 600; box-shadow: 0 2px 4px rgba(67, 160, 71, 0.3); white-space: nowrap; } .btn-header-primary:hover { background-color: var(--success-hover); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(67, 160, 71, 0.4); } /* --- MAIN LAYOUT --- */ .app-container { display: flex; flex: 1; height: calc(100vh - 52px - 32px); /* viewport - header - footer */ min-height: 0; /* allow flex child to shrink properly */ overflow: hidden; background: var(--bg-color); } /* --- SIDEBAR (Collapsible Panel) --- */ .sidebar { width: 340px; background-color: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; box-shadow: 2px 0 12px rgba(0,0,0,0.06); position: relative; transition: width var(--transition-normal), margin var(--transition-normal); z-index: 5; } .sidebar.collapsed { width: 0; margin-left: -1px; overflow: hidden; } /* Panel Toggle Button */ .panel-toggle { position: absolute; right: -36px; top: 12px; width: 32px; height: 32px; background: white; border: 1px solid var(--border-color); border-left: none; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 0.9rem; transition: all var(--transition-fast); box-shadow: 2px 0 4px rgba(0,0,0,0.05); z-index: 10; } .panel-toggle:hover { background: var(--primary-light); color: var(--primary-color); } .sidebar.collapsed .panel-toggle { right: -36px; } .sidebar.collapsed .panel-toggle i::before { content: "\f054"; /* chevron-right */ } /* Tabs - Now as vertical icons when in minimal mode */ .sidebar-tabs { display: flex; background: linear-gradient(to bottom, #fafbfc, #f5f6f8); border-bottom: 1px solid var(--border-color); flex-shrink: 0; padding: 0; gap: 0; } .tab-btn { background-color: transparent; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: all var(--transition-fast); font-size: 0.9rem; font-weight: 600; flex: 1; color: var(--text-light); border-bottom: 3px solid transparent; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; } .tab-btn i { font-size: 1.05rem; } .tab-btn:hover { color: var(--text-color); background-color: rgba(0,0,0,0.03); } .tab-btn.active { color: var(--primary-color); border-bottom: 3px solid var(--primary-color); background-color: white; } /* Tab Content - Fixed scrolling */ .tab-content { display: none; padding: 0; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; /* Critical for flex scroll */ scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } .tab-content::-webkit-scrollbar { width: 6px; } .tab-content::-webkit-scrollbar-track { background: transparent; } .tab-content::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; } .tab-content::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); } .tab-content.active { display: flex; flex-direction: column; } /* Search Tab Specific */ #tab-search { padding: 16px; } #tab-search .sidebar-card { flex-shrink: 0; } .results-scroll-area { padding-bottom: 16px; flex: 1; overflow-y: auto; } /* Settings Tab - Scrollable container */ #tab-settings { padding: 12px; } /* Sidebar Card */ .sidebar-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .card-body { padding: 14px; } /* --- UI COMPONENTS --- */ .btn { border: none; border-radius: var(--radius); padding: 10px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; } .btn-primary { background-color: var(--primary-color); color: white; box-shadow: 0 2px 4px rgba(92, 107, 192, 0.25); } .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(92, 107, 192, 0.35); } .btn-success { background-color: var(--success-color); color: white; box-shadow: 0 2px 4px rgba(67, 160, 71, 0.25); } .btn-success:hover { background-color: var(--success-hover); transform: translateY(-1px); } .btn-sm { padding: 6px 10px; font-size: 0.8rem; } .btn-block { width: 100%; } .btn-secondary { background-color: white; color: var(--text-color); border: 1px solid var(--border-color); } .btn-secondary:hover { background-color: #f7f8fa; border-color: var(--text-light); transform: translateY(-1px); } /* Divider between the primary Search button and the secondary Quick Add button in the Search tab. Mirrors the "or" divider on the admin sign-in screen so the two related actions feel grouped. */ .quick-add-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--text-light); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } .quick-add-divider::before, .quick-add-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } /* Quick Add modal-specific tweaks. Re-uses .modal-overlay / .modal-content. */ .modal-content-narrow { max-width: 460px; } .quick-add-help { margin: 0 0 14px; font-size: 0.85rem; color: var(--text-light); line-height: 1.5; } .quick-add-help code { background: var(--bg-color); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; } .quick-add-field { margin-bottom: 14px; } .quick-add-field:last-of-type { margin-bottom: 0; } .quick-add-field > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-color); margin-bottom: 5px; } .quick-add-required { color: #e53935; font-weight: 700; margin-left: 2px; } .quick-add-optional { color: var(--text-light); font-weight: 400; font-size: 0.8em; margin-left: 4px; } .quick-add-field input[type="text"] { width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 0.9rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: white; color: var(--text-color); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .quick-add-field input[type="text"]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.15); } .quick-add-checkbox-label { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.78rem; font-weight: 400; color: var(--text-light); cursor: pointer; } .quick-add-checkbox-label input[type="checkbox"] { margin: 0; cursor: pointer; } .quick-add-error { margin: 10px 0 0; padding: 10px 12px; background: rgba(229, 57, 53, 0.08); border-left: 3px solid #e53935; color: #c62828; font-size: 0.85rem; border-radius: 4px; } .quick-add-error[hidden] { display: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .btn:active { transform: translateY(0); } input[type="text"], input[type="number"], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 0.85rem; box-sizing: border-box; transition: all var(--transition-fast); background-color: #fff; color: var(--text-color); } input:focus, select:focus, textarea:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px var(--primary-light); } input[type="color"] { width: 32px; height: 32px; padding: 2px; border: 2px solid var(--border-color); border-radius: var(--radius-sm); background: none; cursor: pointer; transition: border-color var(--transition-fast); } input[type="color"]:hover { border-color: var(--primary-color); } /* Search Form */ .search-form { display: flex; flex-direction: column; gap: 12px; } /* The auto-draft toggle sits between the keyword input and the advanced fields and inherits both the .search-form flex gap (12px) AND the .checkbox-row 6px margin-top + .control-row 8px margin-bottom, which stacks into too much visual buffer. Cancel the local margins so only the flex gap remains — and knock a few pixels off that too via negative margin-top so it sits a little closer to the keyword input. */ #auto-description-toggle-row { margin-top: -6px; margin-bottom: 0; } .advanced-search-toggle summary { cursor: pointer; font-size: 0.9rem; color: var(--primary-color); font-weight: 500; padding: 0; } .advanced-search-toggle summary:hover { color: var(--primary-hover); } .advanced-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 12px; background: var(--border-light); border-radius: var(--radius); } /* Results Grid */ #results-container { margin-top: 15px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } /* Main search result cards (scoped to avoid affecting modal) */ #results-container .book-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px; font-size: 0.8rem; text-align: center; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; height: 372px; } #results-container .book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } #results-container .book-card .cover-carousel { position: relative; width: 100%; max-width: 130px; height: 165px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; background: #fff; } #results-container .book-card .cover-carousel img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; } #results-container .book-card .book-title { font-weight: bold; font-size: 0.85rem; margin: 8px 0 3px 0; line-height: 1.4; min-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #results-container .book-card .book-author { font-size: 0.8rem; color: var(--text-light); margin: 0 0 8px 0; line-height: 1.4; min-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #results-container .book-card .card-actions-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; } #results-container .book-card .carousel-controls { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; } #results-container .book-card .carousel-button { padding: 2px 6px; font-size: 0.65rem; background: #f8f9fa; border: 1px solid var(--border-color); border-radius: 3px; cursor: pointer; } #results-container .book-card .carousel-button:disabled { opacity: 0.4; cursor: not-allowed; } .add-to-list-button { width: 100%; padding: 6px 8px; font-size: 0.75rem; background: var(--primary-color); color: white; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.2s; min-height: 28px; } .add-to-list-button:hover { background: var(--primary-hover); } .add-to-list-button.added { background: var(--success-color); } /* Search Pagination */ .search-pagination { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 0 4px; } .pagination-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 0.85rem; background: var(--primary-color); color: white; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.2s; } .pagination-button:hover:not(:disabled) { background: var(--primary-hover); } .pagination-button:disabled { opacity: 0.4; cursor: not-allowed; } .pagination-info { font-size: 0.8rem; color: var(--text-light); white-space: nowrap; margin: 0 6px; } /* --- SETTINGS GROUPS --- */ .form-group { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); } .form-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .form-group > label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; } .control-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } /* [hidden] rescue: the base .control-row display: flex rule above is author-origin and beats the user-agent [hidden] { display: none } rule. Without this explicit override any .control-row with the hidden attribute stays visible. See CLAUDE.md "Known CSS Pitfalls". */ .control-row[hidden] { display: none; } .control-row:last-child { margin-bottom: 0; } .checkbox-row { margin-top: 6px; } .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); cursor: pointer; } .checkbox-row label { margin: 0; text-transform: none; font-weight: 500; color: var(--text-color); cursor: pointer; font-size: 0.9rem; } /* Segmented radio group used for the collage cover count selector. */ .collage-cover-count-group { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; } .collage-cover-count-option { margin: 0; cursor: pointer; /* Containing block for the absolutely-positioned input below. Without this, the input falls back to the initial containing block (viewport), which can cause subtle layout side effects. */ position: relative; display: inline-flex; } .collage-cover-count-option input[type="radio"] { /* Visually-hidden but accessible. Confined to the label via inset:0 so its absolute positioning never escapes the segment. */ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none; } .collage-cover-count-option span { display: inline-block; padding: 4px 12px; font-size: 0.85rem; font-weight: 500; color: var(--text-color); background: #fff; border-right: 1px solid var(--border-color); transition: background var(--transition-fast), color var(--transition-fast); } .collage-cover-count-option:last-child span { border-right: none; } .collage-cover-count-option input[type="radio"]:checked + span { background: var(--primary-color); color: #fff; } .collage-cover-count-option input[type="radio"]:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 1px; } .btn-icon { width: 32px; height: 32px; background: #fff; border: 1px solid var(--border-color); font-weight: 700; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition-fast); font-size: 0.85rem; } .btn-icon:hover { border-color: var(--primary-color); } .btn-icon.active { background: var(--primary-color); color: white; border-color: var(--primary-color); } .separator { border: 0; border-top: 1px solid var(--border-color); margin: 16px 0; } .font-select { flex-grow: 2; } .font-size-input { width: 58px; text-align: center; } .mini-label { font-size: 0.75rem; color: var(--text-light); font-weight: 500; } /* --- COLOR PALETTE POPOVER --- */ .color-palette-trigger { width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-light); padding: 0; flex-shrink: 0; transition: all var(--transition-fast); } .color-palette-trigger:hover { border-color: var(--primary-color); color: var(--primary-color); } .color-palette-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; /* match the .control-row gap so trigger spacing is consistent */ } .color-palette-popover { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 10px; z-index: 100; width: max-content; display: none; } .color-palette-popover.open { display: block; } .color-palette-popover::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #fff; border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .color-palette-popover.flip-up { top: auto; bottom: calc(100% + 6px); } .color-palette-popover.flip-up::before { top: auto; bottom: -6px; border-left: none; border-top: none; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .color-palette-section-label { font-size: 0.65rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; } .color-palette-section-label:not(:first-child) { margin-top: 10px; } .color-palette-row { display: grid; grid-template-columns: repeat(5, 22px); gap: 6px; margin-bottom: 2px; } .color-palette-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-color); cursor: pointer; padding: 0; background: none; transition: transform var(--transition-fast), border-color var(--transition-fast); } .color-palette-swatch:hover { transform: scale(1.2); border-color: var(--primary-color); } .color-palette-swatch.active { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color); } .color-palette-custom-btn { width: 100%; margin-top: 8px; padding: 4px 0; font-size: 0.7rem; font-weight: 500; color: var(--primary-color); background: none; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast); } .color-palette-custom-btn:hover { background: var(--border-light); } .advanced-settings summary { font-size: 0.9rem; cursor: pointer; color: var(--primary-color); font-weight: 500; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; } .advanced-settings summary::-webkit-details-marker { display: none; } .advanced-settings summary::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--primary-color); transition: transform var(--transition-fast); } .advanced-settings[open] summary::before { transform: rotate(180deg); } .advanced-settings summary:hover { color: var(--primary-hover); } .advanced-settings summary:hover::before { border-top-color: var(--primary-hover); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; background: var(--border-light); padding: 10px; border-radius: var(--radius); margin-top: 8px; } .grid-2 label { margin: 0; font-size: 0.8rem; font-weight: 500; } /* Settings Section Headers (collapsible) */ .settings-section { margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: var(--radius); background: white; flex-shrink: 0; } .settings-section > summary { padding: 12px 14px; background: var(--secondary-color); font-size: 0.9rem; font-weight: 600; color: white; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid transparent; transition: all var(--transition-fast); list-style: none; border-radius: var(--radius) var(--radius) 0 0; } .settings-section:not([open]) > summary { border-radius: var(--radius); } .settings-section > summary::-webkit-details-marker { display: none; } .settings-section > summary::before { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.65rem; color: rgba(255, 255, 255, 0.8); transition: transform var(--transition-fast); width: 16px; text-align: center; } .settings-section[open] > summary::before { transform: rotate(180deg); } .settings-section > summary:hover { background: var(--secondary-light); } .settings-section[open] > summary { border-bottom: 1px solid var(--border-color); } .settings-section-content { padding: 12px; background: #fff; } /* --- MAIN CONTENT --- */ .main-content { flex: 1; min-width: 0; /* allow flex child to shrink in row */ min-height: 0; /* allow clip at container height, prevent growth */ background-color: var(--bg-color); overflow: auto; padding: 20px; display: flex; flex-direction: column; align-items: center; position: relative; } /* Toolbar above preview */ .toolbar { width: 100%; max-width: 11in; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; margin-left: auto; margin-right: auto; flex-shrink: 0; gap: 20px; } .toolbar-list-name { display: flex; align-items: center; gap: 8px; } .toolbar-list-name label { font-size: 0.9rem; color: var(--text-light); font-weight: 500; white-space: nowrap; } .list-name-input { width: 200px; padding: 6px 10px; font-size: 0.95rem; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius); background: white; color: var(--text-color); transition: all var(--transition-fast); } .list-name-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); } .list-name-input::placeholder { color: var(--text-muted); } .toolbar-hint { font-size: 0.9rem; color: var(--text-light); display: flex; align-items: center; gap: 8px; } .toolbar-hint i { color: var(--primary-color); } /* --- PREVIEW AREA --- */ #preview-area { position: relative; margin-left: auto; margin-right: auto; padding: 10px 0; } /* Page Preview Styling */ .page { width: 11in; height: 8.5in; background-color: white; border: none; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 24px; position: relative; display: flex; transition: box-shadow var(--transition-normal); } .page:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1); } .panel { width: 50%; height: 100%; box-sizing: border-box; padding: 24px; position: relative; overflow: visible; } .page-divider { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; border-left: 1px dashed #ccc; transform: translateX(-0.5px); } /* padding-bottom: 27px is 3px more than .panel's default 24px. The extra 3px is a buffer so the last line of the bottom book's description isn't clipped at the page edge by subpixel rendering differences. Applied to both preview and PDF so they match. */ .book-panel { display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding-bottom: 27px; } #back-cover-panel.all-books { box-sizing: border-box; padding-bottom: 27px; } #inside-left-panel { align-items: flex-start; } #inside-right-panel { align-items: flex-end; } #back-cover-panel { display: flex; flex-direction: column; justify-content: space-between; } #back-cover-panel > .list-item { align-self: flex-start; } /* Book List Item */ .list-item { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 132px; width: 100%; max-width: 480px; transition: background-color 0.2s; } .list-item:hover .list-item-controls { opacity: 1; } .list-item.sortable-ghost { opacity: 0.4; background: #c8ebfb; } /* --- DRAG CONTROLS --- */ .list-item-controls { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #888; right: 100%; margin-right: 4px; background-color: rgba(230, 230, 230, 0.85); padding: 8px 6px; border-radius: 4px; height: 145px; box-sizing: border-box; } .list-item-controls::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 10px; background: transparent; } .controls-right { right: auto; left: 100%; margin-left: 4px; margin-right: 0; } .controls-right::after { left: auto; right: 100%; } .drag-handle { cursor: grab; font-size: 1.4rem; line-height: 1; color: #555; padding: 2px; border-radius: 3px; } .drag-handle:hover { background-color: rgba(0, 0, 0, 0.1); } .drag-handle:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } .item-number, .list-item-controls .item-number { font-size: 1.1rem; font-weight: bold; color: #555; width: 1.5em; text-align: center; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 0; margin: 0; cursor: pointer; -moz-appearance: textfield; line-height: inherit; box-shadow: none; } .item-number::-webkit-outer-spin-button, .item-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .list-item-controls .item-number:hover { border-color: #aaa; background: rgba(255,255,255,0.7); } .list-item-controls .item-number:focus { outline: none; border-color: var(--primary-color); background: #fff; color: #333; box-shadow: none; } .delete-button { background: none; border: none; color: #cc0000; font-weight: bold; font-size: 1.4rem; line-height: 1; padding: 0; cursor: pointer; } .delete-button:hover { color: #990000; } .delete-button:focus { outline: 2px solid var(--danger-color); outline-offset: 2px; } .magic-button { background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.05rem; padding: 1px 0; transition: transform 0.2s; } .magic-button:hover { transform: scale(1.15); } .magic-button:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Star button for collage inclusion */ .star-button { background: none; border: none; cursor: pointer; color: #ccc; font-size: 1.05rem; padding: 1px 0; transition: color 0.2s, transform 0.2s; } .star-button:hover:not(.disabled) { transform: scale(1.15); } .star-button.active { color: #f1c40f; } .star-button.disabled { color: #ddd; cursor: not-allowed; opacity: 0.5; } .star-button:focus { outline: 2px solid #f1c40f; outline-offset: 2px; } /* Item Details */ /* RESTORED: Original cover uploader (no background) */ .cover-uploader { width: 110px; height: 132px; flex-shrink: 0; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; transition: border-color 0.2s, background-color 0.2s, border-width 0.15s; } .cover-uploader.drag-over { border: 2px solid var(--primary-color); background-color: var(--primary-light); } .cover-uploader img { max-width: 100%; max-height: 100%; object-fit: contain; } .cover-uploader.stretch img { object-fit: fill; width: 100%; height: 100%; } .cover-uploader input { display: none; } .list-item-details { flex-grow: 1; display: flex; flex-direction: column; /* RESTORED: Fixed width to match original wrapping behavior */ width: 360px; } /* RESTORED: Visible borders on editable fields */ .editable-field { width: 100%; border: none; outline: 1px solid #eee; background: transparent; padding: 0; margin: 0; line-height: 1.1; box-sizing: border-box; transition: outline-color 0.2s; overflow: visible; } .editable-field:hover { outline-color: #999; } .editable-field:focus { outline-color: #999; } .title-field { font-family: var(--title-font); color: var(--title-color); font-size: var(--title-font-size); font-weight: var(--title-font-weight); font-style: var(--title-font-style); margin-bottom: 0; } .author-field { font-family: var(--author-font); color: var(--author-color); font-size: var(--author-font-size); font-weight: var(--author-font-weight); font-style: var(--author-font-style); margin-top: 2px; margin-bottom: 0; } .description-field { font-family: var(--desc-font); color: var(--desc-color); font-size: var(--desc-font-size); font-weight: var(--desc-font-weight); font-style: var(--desc-font-style); margin-top: 2px; flex: 1; /* RESTORED: Original wrapping rules */ overflow-wrap: break-word; word-break: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; resize: none; } /* Front Cover */ #front-cover-uploader { width: 480px; height: 768px; border: 1px dashed #ccc; background-color: #eaeaea; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; margin: 0 auto; transition: border-color 0.2s, background-color 0.2s; } #front-cover-uploader.drag-over { border-color: var(--primary-color); background-color: var(--primary-light); border-style: solid; } #front-cover-uploader.has-image { border: none; background: none; } #front-cover-uploader.has-image.drag-over { border: 2px solid var(--primary-color); } #front-cover-uploader.has-image .placeholder-text { display: none; } .placeholder-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #333; text-align: center; font-size: 1.1rem; line-height: 1.4; pointer-events: none; width: 80%; z-index: 1; } #front-cover-uploader img { max-width: 100%; max-height: 100%; object-fit: contain; } #front-cover-uploader:not(.has-image) img { display: none; } /* Cover Header Text section in settings panel */ #cover-header-text-group #cover-simple-mode { display: block; margin-top: 8px; } #cover-header-text-group #cover-simple-mode.hidden { display: none; } #cover-header-text-group #cover-simple-mode textarea { width: 100%; padding: 10px; box-sizing: border-box; resize: vertical; text-align: center; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 0.95rem; } /* Advanced mode line inputs in settings panel */ #cover-header-text-group #cover-advanced-mode { display: none; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; } #cover-header-text-group #cover-advanced-mode.visible { display: flex; } .cover-line-input { width: 100%; padding: 10px; font-size: 0.95rem; border: 1px solid var(--border-color); border-radius: var(--radius); text-align: center; background: rgba(255, 255, 255, 0.95); box-sizing: border-box; } .cover-line-input::placeholder { color: #888; } .cover-line-input:focus { border-color: var(--primary-color); outline: none; } /* Style control visibility */ #cover-simple-style { display: block; } #cover-simple-style.hidden { display: none; } #cover-advanced-style { display: none; } #cover-advanced-style.visible { display: block; } /* Line style groups in settings - matches data-style-group boxes exactly */ .line-style-group { background: var(--border-light); padding: 10px 12px; border-radius: var(--radius); margin-bottom: 10px; border: 1px solid var(--border-color); } .line-style-label { display: block; font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; } .line-style-group .control-row { margin-bottom: 6px; } .line-style-group .control-row:last-child { margin-bottom: 0; } .line-style-group .font-select { flex: 1; } .line-style-group .font-size-input { width: 60px; } /* Tighten the gap between the "Line Spacing:" label and the spacing input so there's room for the palette trigger button on the same row. The label + input pair are visually one unit; the rest of the row uses the normal 8px gap. */ .line-style-group .mini-label + .line-spacing { margin-left: -4px; } /* --- LAYOUT SELECTOR (in Settings tab) --- */ #collage-layout-details { margin-top: 8px; } #collage-layout-selector { display: flex; gap: 10px; flex-wrap: nowrap; padding: 12px; justify-content: center; background: var(--border-light); border-radius: var(--radius); } .layout-option { width: 52px; height: 68px; border: 2px solid var(--border-color); border-radius: var(--radius); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; transition: all var(--transition-fast); padding: 4px; overflow: hidden; } .layout-option:hover { border-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .layout-option.selected { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); background: linear-gradient(to bottom, #fff, var(--primary-light)); } .layout-option svg { width: 30px; height: 38px; fill: var(--text-muted); transition: fill var(--transition-fast); } .layout-option:hover svg { fill: var(--secondary-light); } .layout-option.selected svg { fill: var(--primary-color); } .layout-option-label { font-size: 0.55rem; color: var(--text-light); margin-top: 3px; text-align: center; line-height: 1.1; font-weight: 500; } .layout-option.selected .layout-option-label { color: var(--primary-color); font-weight: 700; } /* Masonry layout: disabled stretch toggle */ .checkbox-row.disabled { opacity: 0.5; pointer-events: none; } .checkbox-row.disabled label { cursor: not-allowed; } .masonry-hint { transition: opacity var(--transition-fast); } /* Branding & QR */ .custom-uploader { width: 480px; height: 144px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: border-color 0.2s, background-color 0.2s; } .custom-uploader.drag-over { border-color: var(--primary-color); background-color: var(--primary-light); border-style: solid; } .custom-uploader input[type="file"] { display: none; } .custom-uploader img { max-height: 100%; max-width: 100%; } .branding-delete-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger-color); color: white; border: none; cursor: pointer; font-size: 0.75rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0.8; transition: opacity 0.2s; } .branding-delete-btn:hover { opacity: 1; } .print-mode .branding-delete-btn { display: none !important; } /* Front cover delete button */ .cover-delete-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger-color); color: white; border: none; cursor: pointer; font-size: 0.75rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0.8; transition: opacity 0.2s; z-index: 2; } .cover-delete-btn:hover { opacity: 1; } .print-mode .cover-delete-btn { display: none !important; } #front-cover-uploader:not(.has-image) .cover-delete-btn { display: none; } /* Use Default branding button */ .branding-default-btn { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: var(--primary-color); color: white; border: none; border-radius: var(--radius); padding: 6px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; /* Hidden by default: the public tool has no library default to fall back to, so this button has nothing meaningful to do. Branded instances override this via body.has-library-branding below. */ display: none; align-items: center; gap: 4px; opacity: 0.9; transition: opacity 0.2s, background-color 0.2s; } .branding-default-btn:hover { opacity: 1; background: var(--primary-hover); } .print-mode .branding-default-btn { display: none !important; } /* Branded instances: applyLibraryConfig adds body.has-library-branding when LIBRARY_CONFIG.brandingImagePath is present, which reveals this button whenever the user has cleared their branding image. Clicking it re-loads the library's default brand. */ body.has-library-branding #branding-uploader:not(.has-image) .branding-default-btn { display: flex; } #branding-uploader.has-image { border: none; background: none; } #branding-uploader.has-image.drag-over { border: 2px solid var(--primary-color); border-style: solid; } #branding-uploader .placeholder-text { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: var(--text-light); text-align: center; font-size: 0.9rem; line-height: 1.4; pointer-events: none; } #branding-uploader.has-image .placeholder-text { display: none; } #branding-uploader:not(.has-image) img { display: none; } #branding-uploader:not(.has-image) .branding-delete-btn { display: none; } .qr-code-container { width: 480px; height: 144px; display: flex; gap: 14px; align-items: center; border: 1px solid transparent; padding: 0; box-sizing: border-box; } #qr-code-text { flex-grow: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: var(--qr-text-align, center); border: 1px solid #eee; padding: 4px; box-sizing: border-box; font-family: var(--qr-font, 'Calibri'); font-size: var(--qr-font-size, 13pt); color: var(--qr-color, #000); font-weight: var(--qr-font-weight, normal); font-style: var(--qr-font-style, normal); line-height: var(--qr-line-height, 1.3); } #qr-code-text:hover { border-color: #ccc; } #qr-code-canvas { width: 144px; height: 144px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } #qr-code-canvas img, #qr-code-canvas canvas { width: 100%; height: 100%; } /* --- PRINT MODE --- */ .print-mode .page { box-shadow: none; border: none !important; outline: none; } .print-mode .panel { padding: 24px; border: none !important; } .print-mode .list-item-controls, .print-mode .page-divider, .print-mode .placeholder-text { display: none !important; } .print-mode .cover-uploader, .print-mode .custom-uploader, .print-mode .editable-field:not(#qr-code-text), .print-mode #front-cover-uploader { border: none !important; outline: none !important; background: transparent !important; } /* QR text and its container use border-color: transparent instead of border: none so their 1px border width stays reserved in the box model. Without this, left/right-aligned text shifts 1px between preview and PDF (the content box grows when the border disappears on a box-sizing: border-box element). Applies to both the inner #qr-code-text and its .qr-code-container parent — either one shifting independently causes the text to land 1px off. */ .print-mode #qr-code-text, .print-mode .qr-code-container { border-color: transparent !important; outline: none !important; background: transparent !important; } /* --- NOTIFICATION --- */ #notification-area { position: fixed; top: 0; left: 0; width: 100%; padding: 0 16px; text-align: center; color: white; background: var(--danger-color); transform: translateY(-100%); transition: transform 0.3s, visibility 0.3s; z-index: 1000; visibility: hidden; height: 52px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-weight: bold; } #notification-area.show { transform: translateY(0); visibility: visible; } #notification-area.success { background: var(--success-color); } #notification-area.info { background: var(--primary-color); } /* Preloader & Carousel */ .font-preloader { position: absolute; top: -9999px; visibility: hidden; } .cover-carousel { position: relative; width: 100%; max-width: 150px; height: 180px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; background: #fff; } .cover-carousel img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .card-actions-group { margin-top: auto; padding-top: 10px; } .carousel-controls { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 90px; margin: 0 auto 10px auto; } .carousel-buttons-container { display: flex; justify-content: space-between; width: 100%; gap: 4px; } .carousel-button { background: #f0f0f0; border: 1px solid #ccc; padding: 4px; cursor: pointer; border-radius: 3px; font-size: 1.2em; font-weight: bold; display: flex; align-items: center; justify-content: center; height: auto; min-width: 0; width: calc(50% - 2px); } .carousel-button:disabled { opacity: 0.4; cursor: not-allowed; } .carousel-button:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* --- ACCESSIBILITY: Focus Indicators --- */ .tab-btn:focus-visible, .btn:focus, .btn-header:focus, .btn-header-primary:focus, .add-to-list-button:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Skip link (hidden until focused) */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary-color); color: white; padding: 8px 16px; z-index: 1001; text-decoration: none; font-weight: 600; } .skip-link:focus { top: 0; } /* Screen reader only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Live region for screen reader announcements */ [aria-live] { position: relative; } /* --- CUSTOM FONT DROPDOWN --- */ .custom-font-dropdown { position: relative; flex: 1; min-width: 0; } .custom-font-dropdown-trigger { width: 100%; padding: 6px 28px 6px 8px; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 0.85rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; transition: border-color 0.2s; } .custom-font-dropdown-trigger:hover { border-color: #999; } .custom-font-dropdown-trigger:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } .custom-font-dropdown.open .custom-font-dropdown-trigger { border-color: var(--primary-color); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .custom-font-dropdown-list { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--primary-color); border-top: none; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 1000; margin: 0; padding: 0; list-style: none; } .custom-font-dropdown.open .custom-font-dropdown-list { display: block; } .custom-font-dropdown-option { padding: 8px 10px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .custom-font-dropdown-option:hover, .custom-font-dropdown-option.highlighted { background-color: #e8f4fc; } .custom-font-dropdown-option.selected { background-color: var(--primary-color); color: white; } .custom-font-dropdown-option.selected:hover, .custom-font-dropdown-option.selected.highlighted { background-color: var(--primary-hover); } /* Hide original select when custom dropdown is active */ .font-select.has-custom-dropdown { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- BOOK BLOCK STYLE GROUPS (match Line Style dimensions) --- */ /* --- BOOK BLOCK STYLE GROUPS (consistent styling for all) --- */ [data-style-group="title"], [data-style-group="author"], [data-style-group="desc"], [data-style-group="qr"] { background: var(--border-light); padding: 10px 12px !important; border-radius: var(--radius); margin-bottom: 10px; border: 1px solid var(--border-color); } [data-style-group="title"] > label, [data-style-group="author"] > label, [data-style-group="desc"] > label, [data-style-group="qr"] > label { font-size: 0.8rem; font-weight: 700; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; } [data-style-group="title"] .control-row, [data-style-group="author"] .control-row, [data-style-group="desc"] .control-row, [data-style-group="qr"] .control-row { margin-bottom: 6px; } [data-style-group="title"] .control-row:last-child, [data-style-group="author"] .control-row:last-child, [data-style-group="desc"] .control-row:last-child, [data-style-group="qr"] .control-row:last-child { margin-bottom: 0; } [data-style-group="title"] .font-select, [data-style-group="author"] .font-select, [data-style-group="desc"] .font-select, [data-style-group="qr"] .font-select, [data-style-group="title"] .custom-font-dropdown, [data-style-group="author"] .custom-font-dropdown, [data-style-group="desc"] .custom-font-dropdown, [data-style-group="qr"] .custom-font-dropdown { flex: 1; } [data-style-group="title"] .font-size-input, [data-style-group="author"] .font-size-input, [data-style-group="desc"] .font-size-input, [data-style-group="qr"] .font-size-input { width: 60px; } /* --- COVER SIMPLE STYLE (match Line Style Group appearance) --- */ /* Cover Simple Style - matches data-style-group boxes */ #cover-simple-style { background: var(--border-light); padding: 10px 12px; border-radius: var(--radius); margin-bottom: 10px; border: 1px solid var(--border-color); } #cover-simple-style .control-row { margin-bottom: 6px; } #cover-simple-style .control-row:last-child { margin-bottom: 0; } #cover-simple-style .font-select, #cover-simple-style .custom-font-dropdown { flex: 1; } #cover-simple-style .font-size-input { width: 60px; } /* --- EXTRA COLLAGE COVERS SECTION --- */ .extra-covers-section { margin-top: 14px; padding: 12px; background: var(--border-light); border-radius: var(--radius); border: 1px solid var(--border-color); } .extra-covers-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .extra-covers-hint { font-size: 0.75rem; color: var(--text-light); margin: 0 0 10px 0; } .extra-covers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .extra-cover-slot { aspect-ratio: 2/3; border: 2px dashed var(--border-color); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; position: relative; overflow: hidden; transition: border-color 0.2s, background-color 0.2s; } .extra-cover-slot:hover { border-color: var(--primary-color); background-color: #f0f7ff; } .extra-cover-slot.drag-over { border-color: var(--primary-color); background-color: var(--primary-light); border-style: solid; } .extra-cover-slot.has-cover { border-style: solid; border-color: var(--border-color); } .extra-cover-slot.has-cover:hover { border-color: var(--primary-color); } .extra-cover-slot .slot-placeholder { font-size: 1.5rem; color: #ccc; } .extra-cover-slot img { width: 100%; height: 100%; object-fit: cover; } .extra-cover-slot .remove-btn { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger-color); color: white; border: none; cursor: pointer; font-size: 0.7rem; line-height: 1; display: none; align-items: center; justify-content: center; padding: 0; } .extra-cover-slot.has-cover:hover .remove-btn { display: flex; } .extra-cover-slot.from-list { border-color: var(--primary-color); cursor: default; } .extra-cover-slot.from-list:hover { transform: none; box-shadow: none; } .from-list-label { position: absolute; bottom: 2px; left: 2px; background: var(--primary-color); color: white; font-size: 0.6rem; font-weight: 600; padding: 1px 4px; border-radius: 2px; } .extra-drag-handle { position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,0.5); color: white; font-size: 0.6rem; padding: 1px 3px; border-radius: 2px; cursor: grab; opacity: 0; transition: opacity 0.2s; line-height: 1; } .extra-cover-slot.draggable-extra:hover .extra-drag-handle { opacity: 1; } .extra-cover-slot.draggable-extra .extra-drag-handle:active { cursor: grabbing; } .extra-cover-slot.sortable-ghost { opacity: 0.4; } .extra-cover-slot input[type="file"] { display: none; } /* --- MODAL STYLES --- */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(45, 55, 72, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; } .modal-content { background: white; border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); width: 90%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); background: linear-gradient(to bottom, #fafbfc, #f5f6f8); } .modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--secondary-color); } .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); padding: 4px; line-height: 1; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .modal-close:hover { color: var(--danger-color); background: rgba(229, 57, 53, 0.1); } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-search-form { display: block; margin-bottom: 15px; } .modal-search-results { min-height: 200px; max-height: 400px; overflow-y: auto; } .modal-search-placeholder { color: #888; text-align: center; padding: 40px 20px; } .modal-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 5px; } /* Modal cover result cards - matching main search dimensions */ .modal-cover-result.book-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 8px; font-size: 0.8rem; text-align: center; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; height: 332px; } .modal-cover-result.book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .modal-cover-result.book-card .cover-carousel { position: relative; width: 100%; max-width: 110px; height: 140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; background: #fff; } .modal-cover-result.book-card .cover-carousel img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .modal-cover-result.book-card .book-title { font-weight: bold; font-size: 0.85rem; margin: 6px 0 3px 0; line-height: 1.4; min-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .modal-cover-result.book-card .book-author { font-size: 0.8rem; color: var(--text-light); margin: 0 0 6px 0; line-height: 1.4; min-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .modal-cover-result.book-card .card-actions-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; } .modal-cover-result.book-card .carousel-controls { display: flex; align-items: center; gap: 4px; font-size: 0.65rem; } .modal-cover-result.book-card .carousel-button { padding: 1px 5px; font-size: 0.6rem; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 3px; cursor: pointer; } .modal-cover-result.book-card .carousel-button:disabled { opacity: 0.4; cursor: not-allowed; } .modal-cover-result.book-card .add-to-collage-button { width: 100%; padding: 5px 8px; font-size: 0.7rem; background: var(--primary-color); color: white; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.2s; min-height: 26px; } .modal-cover-result.book-card .add-to-collage-button:hover { background: var(--primary-hover); } .modal-cover-result.book-card .add-to-collage-button.added { background: var(--success-color); } .modal-cover-result.book-card .add-to-collage-button:disabled { opacity: 0.7; cursor: wait; } /* Modal search form styling */ .modal-search-form { margin-bottom: 12px; } .modal-search-form .search-row { display: flex; gap: 8px; } .modal-search-form .search-row input[type="text"] { flex: 1; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 0.9rem; } .modal-search-form .search-row .btn { padding: 8px 16px; white-space: nowrap; flex-shrink: 0; } .modal-search-form .advanced-search-toggle { margin-top: 8px; } .modal-search-form .advanced-search-toggle summary { cursor: pointer; font-size: 0.9rem; color: var(--primary-color); padding: 4px 0; } .modal-search-form .advanced-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .modal-search-form .advanced-fields-grid input { padding: 6px 8px; font-size: 0.8rem; border: 1px solid var(--border-color); border-radius: var(--radius); } .modal-footer { padding: 15px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-footer .cover-count { font-size: 0.85rem; color: var(--text-light); } .modal-footer .btn { min-width: 80px; } /* ========================================================================= Zoom & Undo/Redo Controls (floating bottom-right toolbar) ========================================================================= */ .zoom-controls { position: fixed; bottom: 48px; /* 32px footer + 16px gap */ right: 16px; display: flex; align-items: center; gap: 2px; background: white; border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 10; padding: 4px; } .zoom-btn { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-color); font-size: 0.85rem; transition: background var(--transition-fast); } .zoom-btn:hover:not(:disabled) { background: var(--border-light); } .zoom-btn:disabled { opacity: 0.4; cursor: default; } .zoom-label { min-width: 54px; height: 36px; border: none; background: transparent; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--text-light); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background var(--transition-fast); font-family: inherit; } .zoom-label:hover { background: var(--border-light); color: var(--text-color); }