/* --- 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) Reuses .app-header, .logo, .header-credit from the tool. Adds scrollable body layout and article typography for reading pages. ========================================================================= */ body.content-page { height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden; } /* Sticky header and footer on content pages only (tool page is fixed-height) */ body.content-page .app-header { position: sticky; top: 0; z-index: 20; } body.content-page .site-footer { /* Fixed rather than sticky: sticky only pins an element once scrolling brings it into view, which means long content pages (about.html, for-libraries.html) hide the footer off-screen on first load. content-main already has 72px of bottom padding so nothing is obscured by the fixed footer. */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; } .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; padding: 56px 24px 72px; display: flex; justify-content: center; } .content-article { max-width: 680px; width: 100%; color: var(--text-color); font-size: 16px; line-height: 1.65; } .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); } .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; } .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; } .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); } .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: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; } .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; } .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; } .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; } .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); } .book-panel { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } #back-cover-panel.all-books { box-sizing: border-box; } #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; } /* --- 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.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: 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 .book-panel { padding-bottom: 27px; } .print-mode #back-cover-panel.all-books { padding-bottom: 27px; } .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, .print-mode #front-cover-uploader, .print-mode #qr-code-text, .print-mode .qr-code-container { border: none !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); }