/* css/base.css /* Note to Contributors: Please maintain a professional tone in comments. This file contains structural rules, layout, basic typography, positioning, font size classes, responsive layout, and base scrollbar styles. It should be generally theme-agnostic, relying on CSS variables for theming. */ /** * @file base.css * @description Core structural and foundational styles for the application. * Includes CSS resets, basic typography, layout containers, positioning for * fixed/floating elements, font size classes, responsive adjustments, * and base scrollbar appearance. Styles here should aim to be theme-agnostic, * using CSS variables from theme-vars.css where color is involved. */ /* --- CSS RESET & BASIC DEFAULTS --- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 100%; /* Base for rem units; JS can add classes to modify this */ -webkit-font-smoothing: antialiased; /* Improve font rendering on WebKit */ -moz-osx-font-smoothing: grayscale; /* Improve font rendering on Firefox */ overflow-x: hidden; /* Prevent horizontal scroll on the html element */ height: 100%; /* Ensure html takes full height for consistent scroll calculations */ overflow-y: auto; /* Allow vertical scroll on html, more standard for document scrolling */ } body { font-family: var(--font-body); /* Defined in theme-vars.css */ line-height: 1.75; /* Default line height for body text */ font-size: 1.08rem; /* Base font size, scales with html font-size classes */ overflow-x: hidden; /* Prevent horizontal scroll on the body */ display: flex; /* Used for app-container full height layout */ flex-direction: column; /* Align app-container children vertically */ min-height: 100%; /* Ensure body takes at least full html height, allowing it to grow */ position: relative; /* For positioning of some child elements like overlays */ background-color: var(--bg-main); /* Themed: main page background */ color: var(--text-primary); /* Themed: default text color */ transition: background-color var(--transition-speed-normal) var(--transition-timing-default), color var(--transition-speed-normal) var(--transition-timing-default); } body.no-scroll { /* Utility class to prevent body scrolling (e.g., when modal is open) */ overflow: hidden; } /* --- GLOBAL UTILITIES --- */ .visually-hidden { /* Hides content visually but keeps it accessible to screen readers */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* Off-screen */ overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* Prevent line breaks */ border: 0; } /* --- FONT SIZE CLASSES (Applied to by JS) --- */ html.font-size-small { font-size: 87.5%; /* Approx 14px base if 1rem = 16px at 100% */ } html.font-size-medium { font-size: 100%; /* Default */ } html.font-size-large { font-size: 112.5%;/* Approx 18px base if 1rem = 16px at 100% */ } /* --- ICON STYLING (Material Symbols) --- */ .material-symbols-outlined { font-family: var(--font-icons); /* Defined in theme-vars.css */ font-weight: normal; font-style: normal; font-size: 24px; /* Default icon size, can be overridden */ line-height: 1; /* Ensure icon aligns well vertically */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; /* Enable ligatures for icons */ -webkit-font-smoothing: antialiased; /* Consistent with body */ vertical-align: middle; /* Align icons nicely with text */ } /* --- PAGE OVERLAYS --- */ /* General overlay, e.g., during content loading or cookie consent backdrop */ #page-block-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* background-color is set dynamically by JS based on current theme's --rgb-bg-main */ z-index: 2900; /* High, but below modals/consent banner */ opacity: 1; /* JS controls display: none vs flex/block */ pointer-events: auto; transition: opacity 0.3s ease-in-out; display: flex; /* Defaulted to flex by HTML, JS hides/shows */ align-items: center; justify-content: center; } /* Body overlay for when sidebar is open and visible */ body.sidebar-open.sidebar-visible::before, body.changelog-modal-open::before { /* NEW: Add changelog modal overlay */ content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* background-color is set by theme-styles.css using theme vars */ opacity: 0; /* Set to 1 in theme-styles.css when active */ pointer-events: none; /* Overlay itself is not interactive */ transition: opacity var(--transition-speed-normal) var(--transition-timing-default); /* NEW: z-index for sidebar overlay */ z-index: 1008; /* Below sidebar (1010), above main content and header actions */ } /* NEW: Specific z-index for changelog modal overlay */ body.changelog-modal-open::before { z-index: 2499; /* Below changelog modal content (2501) */ } /* --- APP STRUCTURE & LAYOUT --- */ #app-container { /* Main wrapper for the entire application */ display: flex; flex-direction: column; min-height: 100%; /* Ensure it fills viewport height (relative to html height) */ width: 100%; position: relative; /* For copyright notice positioning */ } /* HEADER LAYOUT */ #app-header { position: fixed; /* Sticky header */ top: 0; left: 0; right: 0; height: var(--header-height); /* From theme-vars.css (70px) */ z-index: 1001; /* Above main content, below sidebar overlay */ transition: box-shadow var(--transition-speed-normal) ease-out, padding-right var(--transition-speed-normal) var(--transition-timing-default), padding-left var(--transition-speed-normal) var(--transition-timing-default); } #app-header .header-content { /* Inner container for header elements */ display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; max-width: calc(var(--content-max-width) + 200px + var(--sidebar-width) / 2 + var(--spacing-xl) * 2); margin: 0 auto; padding: 0 var(--spacing-lg); height: 100%; gap: var(--spacing-md); } .header-left-space, .header-right-space { display: flex; align-items: center; min-width: 50px; } .header-left-space { justify-content: flex-start; } .header-right-space { justify-content: flex-end; } .header-title-area { grid-column: 2 / 3; display: flex; justify-content: center; align-items: center; text-align: center; overflow: visible; position: relative; min-width: 0; height: 100%; } .site-title-wrapper { display: inline-flex; align-items: baseline; position: relative; vertical-align: middle; } #site-title-main { font-family: var(--font-heading); font-size: clamp(1.6em, 3.5vw, 2.3em); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; padding: 4px var(--spacing-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 0; flex-shrink: 1; min-width: 0; text-transform: uppercase; /* Title always all caps */ } .site-title-wrapper.clickable-title::after { content: '▼'; font-size: 0.6em; position: absolute; right: -15px; top: 50%; transform: translateY(-50%) scaleY(0.8); } /* COPYRIGHT NOTICE - Positioned absolutely relative to #app-container */ #copyright-notice-container.copyright-notice { position: absolute; /* As per user request */ top: calc(var(--header-height) + 10px); right: var(--spacing-lg); z-index: 999; font-size: 0.7em; white-space: nowrap; font-weight: 400; opacity: 0.8; /* Themed color from theme-styles.css */ } /* HEADER ACTIONS CONTAINER (Font Size, Theme Toggle, Changelog) - Fixed Position */ .header-actions-container { position: fixed; top: calc(var(--header-height) / 2 - 21px); /* Vertically center based on 70px header */ right: var(--spacing-md); z-index: 1006; display: flex; gap: var(--spacing-sm); align-items: center; } .font-size-changer-container, .theme-toggle-container, .changelog-toggle-container { /* NEW */ position: relative; } /* SIDEBAR LAYOUT */ #sidebar { width: var(--sidebar-width); height: 100dvh; position: fixed; top: 0; left: 0; z-index: 1010; transform: translateX(-100%); transition: transform var(--transition-speed-long) var(--transition-timing-sidebar), /* SLIGHTLY SLOWER sidebar slide */ background-color var(--transition-speed-normal) var(--transition-timing-default); display: flex; flex-direction: column; } body.sidebar-open #sidebar.visible { transform: translateX(0%); } .sidebar-content-wrapper { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; padding-top: var(--header-height); } .sidebar-header { padding: 0 var(--spacing-lg); height: var(--header-height); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: fixed; top: 0; left: 0; width: var(--sidebar-width); z-index: 1; } .sidebar-header h3 { font-family: var(--font-heading); font-size: 1.4em; font-weight: 600; letter-spacing: -0.01em; margin-right: auto; } #toc-list { list-style: none; padding: var(--spacing-lg); flex-grow: 1; } #toc-list li { position: relative; margin-bottom: var(--spacing-xs); /* Adds spacing between main TOC items */ } #toc-list li a { display: flex; align-items: center; gap: 0; padding: var(--spacing-xs) var(--spacing-sm); font-size: 1rem; font-weight: 500; text-decoration: none; border-radius: var(--border-radius-md); line-height: 1.45; } #toc-list li a .toc-text { white-space: normal; flex-grow: 1; padding-left: var(--spacing-xs); } .toc-item-toggle { flex-shrink: 0; padding: 2px !important; width: 28px !important; height: 28px !important; border-radius: var(--border-radius-sm) !important; margin-right: var(--spacing-xs); background: transparent !important; border: none !important; } .toc-item-toggle .material-symbols-outlined { font-size: 20px; transition: transform var(--transition-speed-normal) ease-in-out; /* Keep toggle icon snappy */ } .toc-icon-default { font-size: 18px; width: 28px; height: 28px; margin-right: var(--spacing-xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; } .toc-submenu { list-style: none; padding-left: calc(var(--spacing-sm) + 28px); margin-top: 0; margin-bottom: var(--spacing-xs); /* Submenu animation: max-height and opacity for a slide-fade effect */ max-height: 0; opacity: 0; transition: max-height var(--transition-speed-normal) var(--transition-timing-dropdown), /* Use normal speed for quicker submenu */ opacity var(--transition-speed-normal) var(--transition-timing-dropdown); } li.toc-item-expandable.open > .toc-submenu { max-height: 2000px; /* A large enough value to accommodate content */ opacity: 1; } /* Specific spacing for nested submenu items */ #toc-list .toc-submenu li { /* PROBLEM: These nested list items also suffer from lack of margin-bottom and very small vertical padding on their 'a' elements. */ /* SOLUTION: Add a smaller margin-bottom specifically for nested items. */ margin-bottom: var(--spacing-xxs, 4px); /* Smaller spacing for deeper levels. Use a fallback if --spacing-xxs is not defined. */ } #toc-list .toc-submenu li a { font-size: 0.92rem; font-weight: 400; padding-top: calc(var(--spacing-xs) / 1.5); padding-bottom: calc(var(--spacing-xs) / 1.5); } #toc-list .toc-submenu .toc-submenu { padding-left: var(--spacing-md); } /* MAIN CONTENT WRAPPER LAYOUT */ #main-content-wrapper { padding-top: var(--header-height); flex-grow: 1; transition: padding-left var(--transition-speed-normal) var(--transition-timing-default), padding-right var(--transition-speed-normal) var(--transition-timing-default); } .content-column { max-width: var(--content-max-width); margin: 0 auto; padding: var(--spacing-xxl) var(--spacing-xl); } /* --- FIXED/FLOATING UI ELEMENT POSITIONING --- */ .floating-sidebar-toggle { position: fixed; top: calc(var(--header-height) / 2 - 21px); left: var(--spacing-md); z-index: 1005; transition: opacity var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease; } .floating-sidebar-toggle.is-open { opacity: 0; pointer-events: none; transform: translateX(-100%) scale(0.8); } .floating-sidebar-toggle .icon-menu, .floating-sidebar-toggle .icon-close { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; } .floating-sidebar-toggle .icon-close { display: none; } .theme-toggle-button { position: relative; overflow: hidden; } .theme-toggle-button .theme-icon { font-size: 24px; line-height: 1; width: 1em; height: 1em; display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } /* General structure for Custom Dropdown Menus */ .custom-dropdown-menu { position: absolute; top: calc(100% + 8px); z-index: 1007; min-width: 160px; padding: var(--spacing-xs) 0; border-radius: var(--border-radius-md); opacity: 0; visibility: hidden; transform: translateY(-10px) scaleY(0.9); /* Start slightly up and scaled down */ transform-origin: top center; transition-property: opacity, transform; transition-duration: var(--transition-speed-normal); /* CHANGED back to normal speed */ transition-timing-function: var(--transition-timing-dropdown); /* Still ease-out */ } .custom-dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scaleY(1); /* No specific transition-delay here, handled by default flow */ } /* Visibility handled by JS adding/removing .open, transition applies to opacity/transform */ /* Alignment for header actions dropdowns (Theme, Font Size, Changelog) */ .header-actions-container .custom-dropdown-menu { right: 0; left: auto; transform-origin: top right; } /* Specific dropdown for document switcher (centered under title) */ #custom-doc-dropdown { left: 50%; transform: translateX(-50%) translateY(-10px) scaleY(0.9); transform-origin: top center; min-width: 380px; max-width: 450px; } #custom-doc-dropdown.open { transform: translateX(-50%) translateY(0) scaleY(1); } #custom-doc-dropdown ul li button { font-family: var(--font-heading); font-size: 1.05em; font-weight: 500; padding: var(--spacing-sm) var(--spacing-lg); } /* Specific width for font-size menu (can be narrower) */ #font-size-menu { min-width: 120px; } /* Specific width for theme switcher menu */ #theme-switcher-dropdown { min-width: 180px; } .custom-dropdown-menu ul { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; } .custom-dropdown-menu li button { display: block; width: 100%; padding: var(--spacing-sm) var(--spacing-md); background: none; border: none; text-align: left; font-size: 0.9rem; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0; } #custom-doc-list li button { white-space: normal; text-overflow: clip; } .scroll-to-top-button { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); z-index: 1000; opacity: 0; transform: translateY(20px) scale(0.8); display: none; transition: opacity var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease; } .scroll-to-top-button .material-symbols-outlined { font-size: 24px; } /* NEW: Quiz Button fixed position */ .take-quiz-btn-container { position: fixed; bottom: calc(var(--spacing-lg) + 60px); /* Above scroll-to-top */ right: var(--spacing-lg); z-index: 1000; /* Same as scroll-to-top, will layer based on DOM order */ } .take-quiz-btn-container #take-quiz-action-btn { box-shadow: var(--shadow-md); /* More prominent shadow */ } .take-quiz-btn-container #take-quiz-action-btn .material-symbols-outlined { margin-right: var(--spacing-xs); /* Space between icon and text */ } /* --- BUTTONS (General structural styling) --- */ .button-modern { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: calc(var(--spacing-sm) + 2px) calc(var(--spacing-md) + 2px); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; border-radius: var(--border-radius-md); cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap; user-select: none; transition: background-color var(--transition-speed-fast) var(--transition-timing-default), color var(--transition-speed-fast) var(--transition-timing-default), border-color var(--transition-speed-fast) var(--transition-timing-default), transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease; } .button-modern .material-symbols-outlined { font-size: 1.2em; } .button-modern:active:not(:disabled) { transform: translateY(0px) scale(1); } .button-modern.icon-only { padding: var(--spacing-sm); width: 42px; height: 42px; border-radius: 50%; } .button-modern.icon-only .material-symbols-outlined { font-size: 24px; } .button-text-only { background: none; border: none; padding: var(--spacing-xs); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: underline; } .chapter-nav-buttons { clear: both; display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border); } .chapter-nav-buttons .button-modern { min-width: 120px; } .chapter-nav-buttons .button-modern .material-symbols-outlined { font-size: 1.1em; } .chapter-nav-buttons .button-modern:first-child .material-symbols-outlined { margin-right: var(--spacing-xs); } .chapter-nav-buttons .button-modern:last-child .material-symbols-outlined { margin-left: var(--spacing-xs); } /* --- VERTICAL PROGRESS INDICATOR POSITIONING --- */ #vertical-progress-container { position: fixed; top: calc(var(--header-height) + var(--spacing-lg)); left: var(--spacing-sm); width: auto; max-width: 320px; height: calc(100vh - var(--header-height) - var(--spacing-lg) * 2); display: none; flex-direction: row; gap: var(--spacing-sm); align-items: flex-start; z-index: 999; pointer-events: none; opacity: 0; transition: opacity var(--transition-speed-normal) ease; } #current-chapter-info { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-md); text-align: left; max-width: 280px; transition: background-color var(--transition-speed-normal) var(--transition-timing-default), color var(--transition-speed-normal) var(--transition-timing-default), opacity var(--transition-speed-fast) ease, backdrop-filter var(--transition-speed-normal) ease; opacity: 0; order: 2; flex-shrink: 1; flex-grow: 1; pointer-events: auto; } #current-chapter-info.visible { opacity: 1; } #current-chapter-number { display: block; font-size: 0.7em; font-weight: 600; margin-bottom: calc(var(--spacing-xs) / 2); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; } #current-chapter-title { display: block; font-size: 0.8em; line-height: 1.3; font-weight: 500; white-space: normal; word-break: break-word; } #vertical-progress-track { position: relative; width: var(--vertical-progress-width); height: 100%; border-radius: calc(var(--vertical-progress-width) / 2); transition: background-color var(--transition-speed-normal) var(--transition-timing-default); order: 1; flex-shrink: 0; } #vertical-progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 0%; border-radius: calc(var(--vertical-progress-width) / 2); transition: height 0.05s linear, background-color var(--transition-speed-normal) var(--transition-timing-default); } .vertical-progress-indicator { position: absolute; left: 50%; transform: translateX(-50%); width: var(--vertical-progress-indicator-width); transition: background-color var(--transition-speed-fast) ease, height var(--transition-speed-fast) ease; z-index: 1; border-radius: 1px; } .vertical-progress-indicator-part { height: var(--vertical-progress-indicator-height-part); } .vertical-progress-indicator-chapter { height: var(--vertical-progress-indicator-height-chapter); } .vertical-progress-indicator-sub { height: calc(var(--vertical-progress-indicator-height-chapter) * 0.8); } /* --- BASE CONTENT STYLES (Typography, Lists, Tables etc.) --- */ .content-section { margin-bottom: var(--spacing-xxl); padding: var(--spacing-lg); border-radius: var(--border-radius-lg); transition: background-color var(--transition-speed-normal) var(--transition-timing-default); } .content-section:last-child { margin-bottom: 0; padding-bottom: var(--spacing-lg); } .section-title { font-family: var(--font-heading); font-size: clamp(2.2em, 5vw, 3em); font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; margin-top: 0; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); padding-top: var(--spacing-xs); position: relative; text-wrap: pretty; } .section-title::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 4px; border-radius: 2px; } .subsection-block { padding: var(--spacing-lg); margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); border-radius: var(--border-radius-md); transition: background-color var(--transition-speed-normal) var(--transition-timing-default); } .subsection-title { font-family: var(--font-heading); font-size: clamp(1.7em, 4vw, 2.3em); font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; margin-top: 0; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); text-wrap: pretty; } .content-column h3, .content-column .subsection-block h3, .content-column h4, .content-column .subsection-block h4, .content-column h5, .content-column .subsection-block h5, .content-column h6, .content-column .subsection-block h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.4; margin-bottom: var(--spacing-md); } .content-column h3:not(.subsection-title), .content-column .subsection-block h3:not(.subsection-title) { font-size: 1.6em; margin-top: var(--spacing-xl); padding-bottom: var(--spacing-xs); letter-spacing: -0.01em; } .content-column h4, .content-column .subsection-block h4 { font-size: 1.35em; margin-top: var(--spacing-lg); padding-bottom: var(--spacing-xs); } .content-column h5, .content-column .subsection-block h5 { font-size: 1.15em; margin-top: var(--spacing-md); } .content-column h6, .content-column .subsection-block h6 { font-size: 1.0em; margin-top: var(--spacing-md); font-weight: 700; } .content-column p, .content-column .subsection-block p { font-size: 1.1rem; line-height: 1.75; margin-bottom: var(--spacing-lg); } .content-column p code, .content-column li code, .content-column th code, .content-column td code, .content-column blockquote code, .content-column .subsection-block p code, .content-column .subsection-block li code, .content-column .subsection-block th code, .content-column .subsection-block td code, .content-column .subsection-block blockquote code, .inline-code { font-family: var(--font-monospace); font-size: 0.9em; padding: 0.15em 0.4em; border-radius: var(--border-radius-sm); } .content-column pre { font-family: var(--font-monospace); font-size: 0.95em; line-height: 1.6; padding: var(--spacing-md); margin: var(--spacing-lg) 0 var(--spacing-xl); border-radius: var(--border-radius-md); overflow-x: auto; } .content-column ul, .content-column ol, .content-column .subsection-block ul, .content-column .subsection-block ol { list-style: none; padding-left: 0; margin-bottom: var(--spacing-lg); line-height: 1.75; font-size: 1.1rem; } .content-column li, .content-column .subsection-block li { margin-bottom: var(--spacing-md); padding-left: var(--list-indent); position: relative; } .content-column ul > li::before, .content-column .subsection-column ul > li::before, /* Corrected typo: content-column instead of content-column */ .content-column .subsection-block ul > li::before { content: "•"; font-weight: bold; position: absolute; top: 0.05em; font-size: 1.1em; left: 0; width: var(--list-indent); text-align: left; padding-left: 0.3em; } .content-column li ul > li::before, .content-column .subsection-block li ul > li::before { content: "◦"; font-size: 1em; font-weight: normal; padding-left: 0.4em; } .content-column li ul ul > li::before, .content-column .subsection-block li ul ul > li::before { content: "▪"; font-size: 0.9em; } .content-column ol, .content-column .subsection-block ol { counter-reset: ordered-list-counter; } .content-column ol > li::before, .content-column .subsection-block ol > li::before { counter-increment: ordered-list-counter; content: counter(ordered-list-counter) "."; font-weight: 500; position: absolute; left: 0; top: 0; font-size: 1em; width: calc(var(--list-indent) - 0.6em); text-align: right; padding-right: 0.6em; } .content-column li ol, .content-column .subsection-block li ol { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .content-column hr, .content-column .subsection-block hr { border: none; margin: var(--spacing-xxl) auto; width: 30%; opacity: 0.5; } .content-column hr.subsection_divider_for_genre { width: 60%; margin: var(--spacing-xl) auto; opacity: 0.3; } .content-column blockquote, .content-column .subsection-block blockquote { padding: var(--spacing-lg) var(--spacing-xl); margin: var(--spacing-xl) 0 var(--spacing-xxl) 0; font-size: 1.05rem; line-height: 1.7; } .content-column blockquote p, .content-column .subsection-block blockquote p { margin-bottom: var(--spacing-sm); } .content-column blockquote p:last-child, .content-column .subsection-block blockquote p:last-child { margin-bottom: 0; } .content-column table, .content-column .subsection-block table { width: 100%; margin: var(--spacing-lg) 0 var(--spacing-xl); border-collapse: collapse; font-size: 0.95rem; line-height: 1.6; } .content-column th, .content-column td, .content-column .subsection-block th, .content-column .subsection-block td { padding: var(--spacing-sm) var(--spacing-md); text-align: left; vertical-align: top; } .content-column th, .content-column .subsection-block th { font-weight: 600; font-family: var(--font-heading); font-size: 1em; } .content-column div[style*="overflow-x: auto"], .content-column .subsection-block div[style*="overflow-x: auto"] { margin-bottom: var(--spacing-lg); border-radius: var(--border-radius-md); } .content-column div[style*="overflow-x: auto"] table, .content-column .subsection-block div[style*="overflow-x: auto"] table { margin: 0; border: none; box-shadow: none; border-radius: 0; overflow: visible; } .toc-loading, .toc-error, .toc-empty, .toc-disabled, .content-loading, .content-error-message { padding: var(--spacing-md); text-align: center; } p.content-loading, p.content-error-message { padding: 50px; font-size: 1.2em; } .clear-float { clear: both; height: 0; visibility: hidden; } /* --- MODAL STRUCTURE (General for all modals like scroll prompt, changelog) --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2500; /* NEW: Higher than sidebar, lower than cookie consent */ opacity: 0; pointer-events: none; transition: opacity var(--transition-speed-normal) ease; } /* Re-add for styling purposes, JS controls display: none / flex */ .modal-overlay[style*="display: flex"], .modal-overlay:not(.hidden) { /* Use :not(.hidden) for JS controlled display with initial hidden state */ opacity: 1; pointer-events: auto; } .modal-content { padding: var(--spacing-xl); border-radius: var(--border-radius-lg); text-align: center; max-width: 400px; width: 90%; transform: scale(0.95) translateY(10px); transition: transform var(--transition-speed-normal) cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; z-index: 2501; /* NEW: Above its own overlay */ } /* Re-add for styling purposes, JS controls display */ .modal-overlay[style*="display: flex"] .modal-content, .modal-overlay:not(.hidden) .modal-content { transform: scale(1) translateY(0); } .modal-content p { font-size: 1.1em; margin-bottom: var(--spacing-lg); } .modal-buttons { display: flex; gap: var(--spacing-md); justify-content: center; } /* NEW: Changelog Modal Specific Structure */ .changelog-modal-content { width: clamp(320px, 90%, var(--content-max-width)); /* More responsive width */ max-width: 800px; /* Max width for readability */ height: 70vh; /* Use viewport height */ max-height: 700px; /* Cap height */ display: flex; flex-direction: column; padding: 0; /* Override general .modal-content padding */ text-align: left; /* Changelog content is typically left-aligned */ } .changelog-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border); flex-shrink: 0; /* Prevent header from shrinking */ } .changelog-header h2 { font-family: var(--font-heading); font-size: 1.4em; font-weight: 600; margin: 0; } .changelog-entries-area { flex-grow: 1; overflow-y: auto; padding: var(--spacing-lg); } .changelog-entries-area .changelog-loading, .changelog-entries-area .changelog-error { text-align: center; padding: var(--spacing-lg); font-size: 1.1em; } .changelog-introduction { font-size: 1.05em; line-height: 1.6; margin-bottom: var(--spacing-lg); padding: var(--spacing-md); border-left: 4px solid var(--accent-primary); border-radius: var(--border-radius-sm); } .changelog-introduction strong, .changelog-introduction b { font-weight: 600; } .changelog-entry { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 1px dashed var(--border); } .changelog-entry:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .changelog-entry-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--spacing-md); } .changelog-version { font-family: var(--font-heading); font-size: 1.2em; font-weight: 600; } .changelog-date { font-size: 0.9em; font-style: italic; } .changelog-changes-list { list-style: none; padding-left: 0; margin-top: 0; } .changelog-changes-list li { margin-bottom: var(--spacing-sm); font-size: 1rem; line-height: 1.6; padding-left: var(--list-indent); position: relative; } .changelog-changes-list li::before { content: "✓"; font-weight: bold; position: absolute; left: calc(var(--list-indent) - 1.4em); top: 0.05em; font-size: 1em; } /* --- COOKIE CONSENT BANNER STRUCTURE --- */ #cookie-consent-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; max-width: 500px; z-index: 3000; border-radius: var(--border-radius-lg); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; padding: var(--spacing-lg); } #cookie-consent-banner.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.95); } .cookie-consent-content { text-align: center; } .cookie-consent-content .cookie-details { font-size: 0.9rem; margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg); padding: var(--spacing-md); border-radius: var(--border-radius-md); text-align: left; } .cookie-consent-content .cookie-details ul { list-style: none; padding-left: 0; margin-top: var(--spacing-xs); } .cookie-consent-content .cookie-details li { margin-bottom: var(--spacing-xs); padding-left: var(--list-indent); position: relative; } .cookie-buttons { display: flex; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-lg); } /* --- TOAST NOTIFICATION STRUCTURE --- */ .toast-notification { position: fixed; bottom: var(--spacing-lg); left: 50%; transform: translateX(-50%) translateY(100%); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); z-index: 1500; display: flex; align-items: center; gap: var(--spacing-md); opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; min-width: 280px; max-width: 90vw; } .toast-notification[style*="opacity: 1"] { transform: translateX(-50%) translateY(0); } .toast-message { flex-grow: 1; font-size: 0.95rem; margin: 0; } .toast-dismiss.button-modern.icon-only { flex-shrink: 0; width: 32px; height: 32px; } .toast-dismiss .material-symbols-outlined { font-size: 20px; } /* --- RESPONSIVE LAYOUT ADJUSTMENTS --- */ @media (min-width: 1540px) { #vertical-progress-container { display: flex; } } @media (max-width: 1199px) { #site-title-main { font-size: clamp(1.6em, 3.5vw, 2.2em); } } @media (max-width: 768px) { #app-header .header-content { padding: 0 var(--spacing-sm); grid-template-columns: auto 1fr auto; gap: var(--spacing-sm); } .site-title-wrapper { max-width: 100%; } #site-title-main { font-size: clamp(1.3em, 4vw, 1.7em); padding: 2px var(--spacing-xs); } .site-title-wrapper.clickable-title::after { font-size: 0.5em; right: -10px; } #copyright-notice-container.copyright-notice { font-size: 0.65em; right: var(--spacing-md); top: calc(var(--header-height) + 6px); } .header-left-space, .header-right-space { min-width: auto; flex-basis: 45px; flex-grow: 0; } .floating-sidebar-toggle { top: calc(var(--header-height) / 2 - 21px); left: var(--spacing-sm); } .header-actions-container { top: calc(var(--header-height) / 2 - 21px); right: var(--spacing-sm); } .sidebar-header h3 { font-size: 1.25em; } #toc-list li a { font-size: 0.95rem; } .content-column { padding: var(--spacing-xl) var(--spacing-md); } .content-section { padding: var(--spacing-md); } .subsection-block { padding: var(--spacing-md); } .section-title { font-size: clamp(1.9em, 6vw, 2.4em); } .subsection-title { font-size: clamp(1.5em, 5vw, 1.9em); } .content-column h3:not(.subsection-title), .content-column .subsection-block h3:not(.subsection-title) { font-size: 1.4em; } .content-column h4, .content-column .subsection-block h4 { font-size: 1.2em; } .content-column p, .content-column ul, .content-column ol, .content-column .subsection-block p, .content-column .subsection-block ul, .content-column .subsection-block ol { font-size: 1.05rem; } .chapter-nav-buttons { flex-direction: column; gap: var(--spacing-md); } .chapter-nav-buttons .button-modern { width: 100%; } .content-column table, .content-column .subsection-block table { font-size: 0.9rem; } .content-column th, .content-column td, .content-column .subsection-block th, .content-column .subsection-block td { padding: var(--spacing-xs) var(--spacing-sm); } .toast-notification { bottom: var(--spacing-sm); left: var(--spacing-sm); right: var(--spacing-sm); transform: translateX(0) translateY(100%); max-width: none; width: auto; } .toast-notification[style*="opacity: 1"] { transform: translateX(0) translateY(0); } .full-width-image-container { margin-left: calc(-1 * var(--spacing-md)); margin-right: calc(-1 * var(--spacing-md)); width: calc(100% + var(--spacing-md) * 2); } } /* --- SCROLLBAR STYLES --- */ ::-webkit-scrollbar { width: 12px; height: 12px; background-color: var(--bg-main); } ::-webkit-scrollbar-thumb { border-radius: 6px; border: 3px solid var(--bg-main); } #sidebar .sidebar-content-wrapper::-webkit-scrollbar, #custom-doc-list::-webkit-scrollbar, .custom-dropdown-menu ul::-webkit-scrollbar, #toc-settings-panel::-webkit-scrollbar, .changelog-entries-area::-webkit-scrollbar /* NEW */ { background-color: var(--bg-elements); } #sidebar .sidebar-content-wrapper::-webkit-scrollbar-thumb, #custom-doc-list::-webkit-scrollbar-thumb, .custom-dropdown-menu ul::-webkit-scrollbar-thumb, #toc-settings-panel::-webkit-scrollbar-thumb, .changelog-entries-area::-webkit-scrollbar-thumb /* NEW */ { border-color: var(--bg-elements); } /* Styling for checkboxes in ToC settings panel */ .checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 0.95em; color: var(--text-primary); } .styled-checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: var(--border-radius-sm); margin-right: var(--spacing-sm); position: relative; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; background-color: var(--bg-elements); } .styled-checkbox:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); } .styled-checkbox:checked::after { content: '✔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--accent-contrast-text); line-height: 1; } .styled-checkbox:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .styled-checkbox:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--bg-subsection); } .styled-checkbox:disabled:checked { background-color: color-mix(in srgb, var(--accent-primary) 50%, var(--bg-subsection)); border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border)); } .styled-checkbox:disabled + span { color: var(--text-secondary); } /* General SELECT styling */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; display: block; width: 100%; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-md); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; line-height: 1.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8em center; background-size: 0.8em; padding-right: 2.5em; } select:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .custom-select-wrapper { position: relative; } hr.settings-divider { border: none; border-top: 1px solid var(--border); margin: var(--spacing-md) 0; } #toc-settings-panel { padding: 0; opacity: 0; visibility: hidden; max-height: 0px; overflow: hidden; transition-property: opacity, max-height, padding-top, padding-bottom; transition-duration: var(--transition-speed-normal); /* Use normal speed */ transition-timing-function: var(--transition-timing-dropdown); /* Use ease-out */ } #toc-settings-panel.open { opacity: 1; position: sticky; flex-shrink: 0; visibility: visible; max-height: 85vh; /* INCREASED for more content */ padding: var(--spacing-lg); overflow-y: auto; /* Ensure scroll if content overflows new max-height */ } /* Closing transition delay handled by the :not(.open) rule below if needed */ #toc-settings-panel:not(.open) { /* Explicitly ensure visibility is handled correctly for closing animation */ transition-property: opacity, max-height, padding-top, padding-bottom, visibility; transition-delay: 0s, 0s, 0s, 0s, var(--transition-speed-normal); /* Delay visibility change on close */ transition-duration: var(--transition-speed-normal), var(--transition-speed-normal), var(--transition-speed-normal), var(--transition-speed-normal), 0s; } .setting-group { margin-bottom: var(--spacing-md); } .setting-group:last-of-type { margin-bottom: 0; } .toc-settings-actions { display: flex; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-lg); }