diff --git a/static/css/v3/boostlook-v3.css b/static/css/v3/boostlook-v3.css new file mode 100644 index 000000000..3ae132ae5 --- /dev/null +++ b/static/css/v3/boostlook-v3.css @@ -0,0 +1,5570 @@ +/** + * Boost Look v3 — Development Build + * New design and development for the Boost C++ Libraries website (boost.io), + * in collaboration with MetaLab. + * Built from modular sources in src/css/ via build-css.sh + * Note: boostlook.css remains the current production stylesheet. + * License: BSL-1.0 + */ + +/** + * File Structure Overview (src/css/): + * 00-header.css - License, file overview + * 01-variables.css - Root CSS custom properties, spacing, typography, icons + * 02-themes.css - Light/dark theme variable mappings + * 03-fonts.css - @font-face declarations (Noto Sans, Monaspace) + * 04-reset.css - CSS reset (box-sizing, margins, defaults) + * 05-global-typography.css - Base container, headings h1-h6, heading anchors + * 06-global-links.css - Paragraph styling, links, footnotes + * 07-global-code.css - Code blocks, inline code, syntax highlighting (hljs) + * 08-global-components.css - Quotes, pagination, admonitions, lists, edit-page link + * 09-global-tables-images.css - Tables, image styles + * 10-scrollbars.css - Scrollbar styling (Firefox + WebKit) + * 11-template-layout.css - Template-specific scrolling, iframe, TOC common styles + * 12-asciidoctor.css - AsciiDoctor-specific styles, Rouge syntax highlighting + * 13-antora.css - Antora navigation, toolbar, breadcrumbs, tabs, search + * 14-quickbook.css - Quickbook legacy wrapper, titles, TOC, tables, footer + * 15-readme.css - Library README styles + * 16-responsive-toc.css - AsciiDoctor responsive TOC layout (768px → 1920px) + */ + +/** + * Template Structure: + * The framework supports these main documentation templates: + * + * 1. AsciiDoctor Template: + * example: https://www.boost.io/doc/libs/1_87_0/libs/charconv/doc/html/charconv.html + *
+ *
+ *

Title

+ *
+ * + *
    TOC Links
+ *
+ *
+ *
+ *
Content Sections
+ *
+ * + *
+ * + * 2. Antora Template: + * example: https://www.boost.io/doc/libs/1_87_0/doc/antora/url/index.html + *
+ * + *
+ *
+ *
Breadcrumbs and Spirit Nav
+ *

Title

+ *
Content Sections
+ *
+ *
+ * + *
+ * + * 3. Quickbook Template: + * example: https://www.boost.io/doc/libs/1_87_0/doc/html/accumulators.html + *
+ *
Navigation
+ *
+ *
Title and information
+ *
Table of Contents
+ *
Footer
+ *
+ *
+ * + * 4. README Template: + * example: https://www.boost.io/library/1.87.0/beast/ + *
ReadMe Content
+ */ + +/** + * Design Philosophy: + * - Consistent styling across different documentation templates + * - Responsive design with mobile-first approach + * - Dark/Light theme support + * - Accessible typography and color schemes + * - Modern scrolling and navigation experience + */ + +/** + * Framework Selector Conventions + * + * The framework uses the following selector prefixes: + * + * 1. .boostlook + * - Primary selector for cross-template styles + * - Applies to all documentation formats + * - Used for common components and layouts + * + * 2. .boostlook:not(:has(.doc)), + * .boostlook#boost-legacy-docs-wrapper - (DEPRECATED), + * .boostlook#antora-template-wrapper, + * div.source-docs-antora.boostlook:not(:has(>.boostlook)) - (Fallback) + * - Specific to legacy Quickbook templates + * - Maintains backward compatibility + * - Handles specialized Quickbook formatting + * + * 3. .boostlook#libraryReadMe + * - Dedicated to README template styling + * - Optimized for library documentation + * - Ensures consistent README presentation + */ + +/*----------------- Root Variables - Start -----------------*/ + +/* Root CSS Variables + * Defines core design tokens used throughout the framework. + * Organized into: + * 1. General Variables - Global settings used across themes + * 2. Color System - Comprehensive color palette including brand, state, and UI colors + * 3. Typography - Font sizes, line heights, and text styling variables + * 4. Spacing System - Padding, margins, and layout spacing tokens + * 5. Icons - SVG icon definitions for light and dark themes + * 6. Responsive Design - Mobile-first breakpoint variables + */ + + :root { + /* General Variables - Core design tokens for all themes */ + --bl-primary-color: rgb(255, 159, 0); /* Boost's signature orange color */ + + /*----------------- New Look Variables Start -----------------*/ + /* New Look Primitives */ + /* Colors Primary (Grey) */ + --colors-primary-0: #ffffff; + --colors-primary-50: #F7F7F8; + --colors-primary-100: #EFEFF1; + --colors-primary-200: #CACBCE; + --colors-primary-300: #A6A8AE; + --colors-primary-400: #82848A; + --colors-primary-500: #71737B; + --colors-primary-600: #585A64; + --colors-primary-700: #444651; + --colors-primary-800: #2F313D; + --colors-primary-900: #050816; + --colors-primary-950: #050816; + + /* Colors Brand Shades */ + --colors-brand-orange-100: #ffeaca; + --colors-brand-orange-200: #ffd897; + --colors-brand-orange-400: #ffb030; + --colors-brand-orange-500: #FFA000; + --colors-brand-orange-600: #cd7e00; + --colors-brand-orange-900: #352000; + + /* Colors Negative Shades */ + --colors-negative-50: #fdf1f3ff; + --colors-negative-100: #ffe6ea; + --colors-negative-200: #ffcad2; + --colors-negative-300: #fe9aab; + --colors-negative-400: #f9677f; + --colors-negative-500: #eb3856; + --colors-negative-600: #bc233c; + --colors-negative-700: #8d1529; + --colors-negative-800: #600d1b; + --colors-negative-950: #1d0408; + + /* Colors Positive Shades */ + --colors-positive-50: #f0fef7ff; + --colors-positive-100: #def7eb; + --colors-positive-200: #bdeed6; + --colors-positive-300: #9ce6c2; + --colors-positive-400: #7bddad; + --colors-positive-500: #5ad599; + --colors-positive-600: #48ac7b; + --colors-positive-700: #36825d; + --colors-positive-800: #255940; + --colors-positive-950: #0a1b13; + + /* Colors Warning Shades */ + --colors-warning-0: rgba(255, 248, 243, 0.5); + --colors-warning-100: #ffefe2; + --colors-warning-200: #ffd4b3; + --colors-warning-300: #feb780; + --colors-warning-400: #ff9442; + --colors-warning-500: #fd760f; + --colors-warning-600: #c25909; + --colors-warning-700: #914104; + --colors-warning-800: #5d2a02; + --colors-warning-950: #1f0e01; + + /* Colors Secondary (Blue) */ + --colors-secondary-0: #f6fafd; + --colors-secondary-50: #daeef9; + --colors-secondary-100: #c2e2f4; + --colors-secondary-200: #92cbe9; + --colors-secondary-300: #62b3dd; + --colors-secondary-400: #6DCDF7; + --colors-secondary-500: #0077B8; + --colors-secondary-600: #0077B8; + --colors-secondary-700: #014f77; + --colors-secondary-800: #013550; + --colors-secondary-850: #01283c; + --colors-secondary-900: #001a28; + --colors-secondary-950: #000d14; + + /* Atom One Dark Theme Colors */ + --atom-one-dark-bg: #282c34; + --atom-one-dark-text: #FFFFFF; + --atom-one-dark-keyword: #c678dd; + --atom-one-dark-operator: #e06c75; + --atom-one-dark-constant: #56b6c2; + --atom-one-dark-class: #e6c07b; + + /* Atom One Light Theme Colors */ + --atom-one-light-bg: #fafafa; + --atom-one-light-text: #050816; + --atom-one-light-keyword: #a626a4; + --atom-one-light-operator: #e45649; + --atom-one-light-constant: #0184bb; + --atom-one-light-class: #c18401; + + /* Colour Primitives — Accent */ + --colors-accent-weak-teal: #C9F2EE; + --colors-accent-weak-yellow: #FBEBA9; + --colors-accent-weak-green: #E4E4C0; + --colors-accent-strong-teal: #64DACE; + --colors-accent-strong-yellow: #F5D039; + --colors-accent-strong-green: #CACA62; + + /* Colour Primitives — Syntax */ + --colors-syntax-weak-blue: #38DDFF; + --colors-syntax-weak-green: #72FE92; + --colors-syntax-weak-yellow: #FFF173; + --colors-syntax-weak-pink: #F358C0; + --colors-syntax-weak-grey: #A3A3A3; + --colors-syntax-strong-blue: #1345E8; + --colors-syntax-strong-green: #289D30; + --colors-syntax-strong-yellow: #A3A38C; + --colors-syntax-strong-pink: #D31FA7; + --colors-syntax-strong-grey: #9E9E9E; + + /* Colour Primitives — Error */ + --colors-error-weak: #FDF2F2; + --colors-error-strong: #D32F2F; + --colors-error-mid: #FF3B30; + + /* Colors Other */ + --colors-primary-150: #D5D6D8; + --colors-primary-850: #1A1C29; + --colors-overlay-overlay-white-40: rgba(255 255 255 / 0.4); + --colors-overlay-overlay-black-40: rgba(13 14 15 / 0.4); + --colors-overlay-overlay-white-64: rgba(255 255 255 / 0.64); + --colors-overlay-overlay-black-64: rgba(13 14 15 / 0.64); + --colors-overlay-overlay-white-88: rgba(255 255 255 / 0.88); + --colors-overlay-overlay-black-88: rgba(13 14 15 / 0.88); + + /* Spacings And Sizes */ + --spacing-size-size-0: 0rem; + --spacing-size-4xs: 0.125rem; + --spacing-size-3xs: 0.25rem; + --spacing-size-2xs: 0.5rem; + --spacing-size-xs: 0.75rem; + --spacing-size-sm: 1rem; + --spacing-size-md: 1.125rem; + --spacing-size-2md: 1.3rem; + --spacing-size-lg: 1.5rem; + --spacing-size-xl: 2rem; + --spacing-size-2xl: 2.5rem; + --spacing-size-3xl: 3rem; + --main-container: 90rem; + + /* Corner Radius — Metalab 2.0 Primitives */ + --corner-radius-xs: 0.125rem; + --corner-radius-s: 0.25rem; + --corner-radius-m: 0.375rem; + --corner-radius-l: 0.5rem; + --corner-radius-xl: 0.75rem; + --corner-radius-xxl: 1rem; + + /* New Look Typography */ + --font-family-body: "Mona Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; + --font-family-code: "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* Metalab 2.0 Size Primitives (Desktop / Mobile) */ + /* XS: 12px / 10px */ + /* Small: 14px / 12px */ + /* Base: 16px / 14px */ + /* Medium:18px / 16px */ + /* Large: 24px / 20px */ + /* XL: 32px / 24px */ + /* 2XL: 40px / 28px */ + /* 3XL: 64px / 32px */ + /* 4XL: 72px / 40px */ + --font-size-3xs: 0.625rem; + --font-size-2xs: 0.75rem; + --font-size-xs: 0.875rem; + --font-size-sm: 1rem; + --font-size-2sm: 1.2rem; + --font-size-md: 1.125rem; + --font-size-lg: 1.25rem; + --font-size-2md: 1.3rem; + --font-size-xl: 1.5rem; + --font-size-2xl: 1.75rem; + --font-size-3xl: 2rem; + --font-size-4xl: 2.5rem; + --font-size-5xl: 4rem; + --font-size-6xl: 4.5rem; + --font-line-height-xs: 0.75rem; + --font-line-height-sm: 1rem; + --font-line-height-md: 1.25rem; + --font-line-height-lg: 1.5rem; + --font-line-height-xl: 1.75rem; + --font-line-height-2xl: 2rem; + --font-line-height-3xl: 2.5rem; + --font-line-height-4xl: 3rem; + + /* New Look Icons */ + /* Themed Headings Anchor Icon */ + --icon-anchor-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_10452)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_10452%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); + --icon-anchor-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_7189)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_7189%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); + + /* Themed Left Arrow Icon (pixelarticons arrow-bar-left) */ + --icon-arrow-left-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M20%2011V13H4V11H20ZM8%2013V15H6V13H8ZM10%2015V17H8V15H10ZM12%2017V19H10V17H12ZM8%209V11H6V9H8ZM10%207V9H8V7H10ZM12%205V7H10V5H12Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E"); + --icon-arrow-left-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M20%2011V13H4V11H20ZM8%2013V15H6V13H8ZM10%2015V17H8V15H10ZM12%2017V19H10V17H12ZM8%209V11H6V9H8ZM10%207V9H8V7H10ZM12%205V7H10V5H12Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed Right Arrow Icon (pixelarticons arrow-bar-right) */ + --icon-arrow-right-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%2011V13H20V11H4ZM16%2013V15H18V13H16ZM14%2015V17H16V15H14ZM12%2017V19H14V17H12ZM16%209V11H18V9H16ZM14%207V9H16V7H14ZM12%205V7H14V5H12Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E"); + --icon-arrow-right-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%2011V13H20V11H4ZM16%2013V15H18V13H16ZM14%2015V17H16V15H14ZM12%2017V19H14V17H12ZM16%209V11H18V9H16ZM14%207V9H16V7H14ZM12%205V7H14V5H12Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed Up Arrow Icon (pixelarticons arrow-bar-up) */ + --icon-arrow-up-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11%2020H13V4H11V20ZM13%208H15V6H13V8ZM15%2010H17V8H15V10ZM17%2012H19V10H17V12ZM9%208H11V6H9V8ZM7%2010H9V8H7V10ZM5%2012H7V10H5V12Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E"); + --icon-arrow-up-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11%2020H13V4H11V20ZM13%208H15V6H13V8ZM15%2010H17V8H15V10ZM17%2012H19V10H17V12ZM9%208H11V6H9V8ZM7%2010H9V8H7V10ZM5%2012H7V10H5V12Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed Clipboard Icon */ + --icon-clipboard-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E"); + --icon-clipboard-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed Home Icon */ + --icon-home-light: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200H5.33333V1.33333H4V2.66667H2.66667V4H1.33333V5.33333H0V6.66667H1.33333V13.3333H6V9.33333H7.33333V13.3333H12V6.66667H13.3333V5.33333H12V4H10.6667V2.66667H9.33333V1.33333H8V0ZM8%201.33333V2.66667H9.33333V4H10.6667V5.33333H12V6.66667H10.6667V12H8.66667V8H4.66667V12H2.66667V6.66667H1.33333V5.33333H2.66667V4H4V2.66667H5.33333V1.33333H8Z%22%20fill%3D%22%23050816%22%2F%3E%3C%2Fsvg%3E"); + --icon-home-dark: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200H5.33333V1.33333H4V2.66667H2.66667V4H1.33333V5.33333H0V6.66667H1.33333V13.3333H6V9.33333H7.33333V13.3333H12V6.66667H13.3333V5.33333H12V4H10.6667V2.66667H9.33333V1.33333H8V0ZM8%201.33333V2.66667H9.33333V4H10.6667V5.33333H12V6.66667H10.6667V12H8.66667V8H4.66667V12H2.66667V6.66667H1.33333V5.33333H2.66667V4H4V2.66667H5.33333V1.33333H8Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed File Icon */ + --icon-file-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%2362676B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%2362676B%22%2F%3E%3C%2Fsvg%3E"); + --icon-file-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%23949A9E%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%23949A9E%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed Menu Icon */ + --icon-menu-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E"); + --icon-menu-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); + + /* New Look Responsive Mobile First */ + /* Spacing — Metalab 2.0 (mobile) */ + /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20, avatar: 48/40 */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; + --spacing-default: 0.375rem; + --spacing-medium: 0.5rem; + --spacing-large: 0.75rem; + --spacing-xl: 1rem; + --spacing-xxl: 1.25rem; + --spacing-avatar: 2.5rem; + + /* Corner Radius — Metalab 2.0 (mobile) */ + --radius-xs: 0.0625rem; + --radius-s: 0.1875rem; + --radius-m: var(--corner-radius-s); + --radius-l: var(--corner-radius-m); + --radius-xl: 0.625rem; + --radius-xxl: var(--corner-radius-xl); + + --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm); + --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md); + --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0); + --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg); + --padding-padding-lg: var(--spacing-size-md); + --padding-padding-sm: var(--spacing-size-xs); + --padding-padding-2sm: var(--spacing-size-2md); + --padding-padding-xs: var(--spacing-size-xs); + --padding-padding-2xs: var(--spacing-size-2xs); + --padding-padding-3xs: var(--spacing-size-3xs); + --padding-padding-xl: var(--spacing-size-xl); + --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs); + --leftbar-paddings-leftbar-padding-xs: var(--spacing-size-xs); + --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs); + --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs); + --padding-padding-md: var(--spacing-size-sm); + --main-margin: var(--spacing-size-sm); + --main-max-width-leftbar: 0rem; + --main-content-width: 54rem; + --icons-24: 1.5rem; + --icons-20: 1.25rem; + --icons-16: 1rem; + --icons-12: 0.75rem; + + /* Typography */ + --typography-font-size-3xs: var(--font-size-3xs); + --typography-font-size-2xs: var(--font-size-3xs); + --typography-font-size-xs: var(--font-size-2xs); + --typography-font-size-sm: var(--font-size-xs); + --typography-font-size-md: var(--font-size-sm); + --typography-font-size-2md: var(--font-size-2sm); + --typography-font-size-lg: var(--font-size-lg); + --typography-font-size-xl: var(--font-size-xl); + --typography-font-size-2xl: var(--font-size-2xl); + --typography-font-size-3xl: var(--font-size-3xl); + --typography-font-size-4xl: var(--font-size-4xl); + --typography-font-size-5xl: var(--font-size-4xl); + + /* Heading — Metalab 2.0 (mobile) */ + --typography-font-size-h1: var(--font-size-2xl); + --typography-font-size-h2: var(--font-size-lg); + --typography-font-size-h3: var(--font-size-sm); + --typography-font-size-h4: var(--font-size-xs); + + --typography-line-height-xs: var(--font-line-height-xs); + --typography-line-height-sm: var(--font-line-height-sm); + --typography-line-height-md: var(--font-line-height-md); + --typography-line-height-lg: var(--font-line-height-md); + --typography-line-height-xl: var(--font-line-height-lg); + --typography-line-height-2xl: var(--font-line-height-lg); + --typography-line-height-3xl: var(--font-line-height-2xl); + --typography-line-height-4xl: var(--font-line-height-3xl); + /*----------------- New Look Variables End -----------------*/ +} + +/*----------------- New Look Responsive Desktop Start -----------------*/ +@media (min-width: 768px) { + :root { + /* Spacing — Metalab 2.0 (desktop) */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; + --spacing-default: var(--spacing-size-2xs); + --spacing-medium: var(--spacing-size-xs); + --spacing-large: 1rem; + --spacing-xl: 1.5rem; + --spacing-xxl: 2rem; + --spacing-avatar: var(--spacing-size-3xl); + + /* Corner Radius — Metalab 2.0 (desktop) */ + --radius-xs: var(--corner-radius-xs); + --radius-s: var(--corner-radius-s); + --radius-m: var(--corner-radius-m); + --radius-l: var(--corner-radius-l); + --radius-xl: var(--corner-radius-xl); + --radius-xxl: var(--corner-radius-xxl); + + --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm); + --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md); + --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0); + --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg); + --padding-padding-lg: var(--spacing-size-lg); + --padding-padding-sm: var(--spacing-size-sm); + --padding-padding-xs: var(--spacing-size-xs); + --padding-padding-2xs: var(--spacing-size-2xs); + --padding-padding-3xs: var(--spacing-size-3xs); + --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs); + --leftbar-paddings-leftbar-padding-xs: var(--spacing-size-xs); + --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs); + --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs); + --padding-padding-md: var(--spacing-size-md); + --main-margin: 0rem; + --main-max-width-leftbar: 18.25rem; + --icons-24: 1.5rem; + --icons-20: 1.25rem; + --icons-16: 1rem; + --icons-12: 0.75rem; + + /* Typography */ + --typography-font-size-3xs: var(--font-size-3xs); + --typography-font-size-2xs: var(--font-size-2xs); + --typography-font-size-xs: var(--font-size-xs); + --typography-font-size-sm: var(--font-size-sm); + --typography-font-size-md: var(--font-size-md); + --typography-font-size-2md: var(--font-size-2md); + --typography-font-size-lg: var(--font-size-xl); + --typography-font-size-xl: var(--font-size-3xl); + --typography-font-size-2xl: var(--font-size-4xl); + --typography-font-size-3xl: var(--font-size-5xl); + --typography-font-size-4xl: var(--font-size-6xl); + --typography-font-size-5xl: var(--font-size-6xl); + --typography-line-height-xs: var(--font-line-height-xs); + --typography-line-height-sm: var(--font-line-height-sm); + --typography-line-height-md: var(--font-line-height-md); + --typography-line-height-lg: var(--font-line-height-lg); + --typography-line-height-xl: var(--font-line-height-xl); + --typography-line-height-2xl: var(--font-line-height-2xl); + --typography-line-height-3xl: var(--font-line-height-3xl); + --typography-line-height-4xl: var(--font-line-height-4xl); + + /* Heading — Metalab 2.0 (desktop) */ + --typography-font-size-h1: var(--font-size-4xl); + --typography-font-size-h2: var(--font-size-lg); + --typography-font-size-h3: var(--font-size-md); + --typography-font-size-h4: var(--font-size-sm); + } +} + +@media (min-width: 990px) { + :root { + --main-max-width-leftbar: 21.25rem; + --main-margin: 8.625rem; + } +} + +/*----------------- New Look Responsive Desktop End -----------------*/ + +/*----------------- Root Variables - End -----------------*/ + +/*----------------- HTML Variables - Start -----------------*/ + +/** + * HTML Theme Variables + * These variables are applied to the HTML element and control the active theme. + * The framework supports two themes: + * 1. Light Theme (default) + * 2. Dark Theme (activated by html.dark class) + */ + +/* Light Theme (Default) Configuration */ +html { + color-scheme: light; + /*----------------- New Look Variables Start -----------------*/ + --icon-anchor: var(--icon-anchor-light); + --icon-arrow-left: var(--icon-arrow-left-light); + --icon-arrow-right: var(--icon-arrow-right-light); + --icon-arrow-up: var(--icon-arrow-up-light); + --icon-clipboard: var(--icon-clipboard-light); + --icon-home: var(--icon-home-light); + --icon-file: var(--icon-file-light); + --icon-menu: var(--icon-menu-light); + + --text-buttons-button-label-primary-default: var(--colors-primary-0); + --text-buttons-button-label-secondary-default: var(--colors-primary-900); + --text-buttons-button-label-inactive: var(--colors-primary-500); + + --text-main-text-primary: var(--colors-primary-900); + --text-main-text-link-blue-secondary: var(--colors-secondary-500); + --text-main-text-link-blue-tetriary: var(--colors-secondary-400); + --text-main-text-body-secondary: var(--colors-primary-600); + --text-main-text-body-quaternary: var(--colors-primary-400); + --text-main-text-body-tetriary: var(--colors-primary-500); + --text-main-text-body-primary: var(--colors-primary-600); + --text-main-text-link-blue: var(--colors-secondary-600); + + --text-states-text-warning-tetriary: var(--colors-warning-600); + --text-states-text-warning-secondary: var(--colors-warning-500); + --text-states-text-positive-secondary: var(--colors-positive-500); + --text-states-text-positive-tetriary: var(--colors-positive-600); + --text-states-text-negative-secondary: var(--colors-negative-500); + --text-states-text-negative-tetriary: var(--colors-negative-600); + --text-states-text-warning: var(--colors-warning-400); + --text-states-text-positive: var(--colors-positive-400); + --text-states-text-negative: var(--colors-negative-400); + --text-states-text-additional: var(--colors-secondary-400); + --text-states-text-additional-secondary: var(--colors-secondary-500); + --text-states-text-additional-tetriary: var(--colors-secondary-600); + + --text-code-keyword: var(--colors-syntax-strong-blue); + --text-code-text: #050816; + --text-code-literal: var(--colors-syntax-strong-green); + --text-code-comment: var(--colors-syntax-strong-yellow); + --text-code-preprocessor: var(--colors-syntax-strong-pink); + --text-code-attribute: var(--colors-syntax-strong-grey); + + --surface-background-states-surface-error-weak: var(--colors-error-weak); + --text-states-text-error-strong: var(--colors-error-strong); + --text-states-text-error-mid: var(--colors-error-mid); + + --surface-accent-teal-weak: var(--colors-accent-weak-teal); + --surface-accent-yellow-weak: var(--colors-accent-weak-yellow); + --surface-accent-green-weak: var(--colors-accent-weak-green); + --surface-accent-teal-strong: var(--colors-accent-strong-teal); + --surface-accent-yellow-strong: var(--colors-accent-strong-yellow); + --surface-accent-green-strong: var(--colors-accent-strong-green); + + --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500); + --surface-button-button-bg-primary-default: var(--colors-primary-100); + --surface-button-button-bg-primary-pressed: var(--colors-primary-100); + --surface-button-button-bg-primary-inactive: var(--colors-primary-200); + --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-500); + --surface-button-button-bg-primary-hover: var(--colors-primary-150); + --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-400); + --surface-button-button-bg-secondary-cta-inactive: var(--colors-primary-200); + + --surface-page: #F7FDFE; + --surface-background-main-base-primary: var(--surface-page); + --pagination-bg: #fff; + --table-bg: #fff; + --table-header-bg: #F7F7F8; + --table-stroke: #0508161A; + background-color: var(--surface-page); + --surface-background-main-surface-primary: var(--colors-primary-50); + --surface-background-main-surface-secondary: var(--colors-primary-100); + --surface-background-main-surface-tetriary: var(--colors-primary-150); + --surface-background-main-surface-blue-primary: var(--colors-secondary-0); + --surface-background-main-surface-blue-secondary: var(--colors-secondary-50); + --surface-background-main-surface-blue-tetriary: var(--colors-secondary-100); + --surface-background-main-surface-blue-quaternary: var(--colors-secondary-200); + --surface-background-main-surface-transparent: var(--colors-overlay-overlay-white-64); + --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-black-40); + --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-white-88); + + --surface-background-states-surface-warning-primary: var(--colors-warning-0); + --surface-background-states-surface-warning-secondary: var(--colors-warning-100); + --surface-background-states-surface-warning-tetriary: var(--colors-warning-200); + --surface-background-states-surface-warning-quaternary: var(--colors-warning-300); + --surface-background-states-surface-positive-primary: var(--colors-positive-50); + --surface-background-states-surface-positive-secondary: var(--colors-positive-100); + --surface-background-states-surface-positive-tetriary: var(--colors-positive-200); + --surface-background-states-surface-positive-quaternary: var(--colors-positive-300); + --surface-background-states-surface-negative-primary: var(--colors-negative-50); + --surface-background-states-surface-negative-secondary: var(--colors-negative-100); + --surface-background-states-surface-negative-tetriary: var(--colors-negative-200); + --surface-background-states-surface-negative-quaternary: var(--colors-negative-300); + --surface-background-states-surface-additional-secondary: var(--colors-secondary-100); + --surface-background-states-surface-additional-tetriary: var(--colors-secondary-200); + --surface-background-states-surface-additional-quaternary: var(--colors-secondary-300); + + --surface-icons-icon-primary: var(--colors-primary-900); + --surface-icons-icon-button-primary: var(--colors-primary-0); + --surface-icons-icon-button-secondary: var(--colors-primary-900); + --surface-icons-icon-button-inactive: var(--colors-primary-500); + --surface-icons-icon-secondary: var(--colors-primary-500); + --surface-icons-icon-quaternary: var(--colors-primary-200); + --surface-icons-icon-cta: var(--colors-brand-orange-500); + --surface-icons-icon-hover: var(--colors-brand-orange-400); + --surface-icons-icon-tetriary: var(--colors-primary-400); + --surface-icons-icon-warning: var(--colors-warning-600); + --surface-icons-icon-positive: var(--colors-positive-600); + --surface-icons-icon-negative: var(--colors-negative-600); + --surface-icons-icon-brand-orange: var(--colors-brand-orange-600); + --surface-icons-icon-blue: var(--colors-secondary-600); + --surface-icons-icon-blue-light: var(--colors-secondary-200); + + --border-border-primary: var(--colors-primary-100); + --border-border-secondary: var(--colors-primary-150); + --border-border-tetriary: var(--colors-primary-300); + --border-border-quaternary: var(--colors-primary-600); + --border-border-active: var(--colors-primary-900); + --border-border-brand-orange: var(--colors-brand-orange-200); + --border-border-warning: var(--colors-warning-200); + --border-border-positive: var(--colors-positive-200); + --border-border-negative: var(--colors-negative-200); + --border-border-blue: var(--colors-secondary-200); + --border-border-blue-primary: var(--colors-secondary-100); + --border-border-blue-hover: var(--colors-secondary-400); + + --surface-weak: var(--colors-primary-0); + --stroke-strong: rgba(5 8 22 / 0.25); + --stroke-mid: rgba(5 8 22 / 0.17); + --stroke-weak: rgba(13 14 15 / 0.1); + + /*----------------- New Look Variables End -----------------*/ +} + +/* Dark Theme Configuration */ +html.dark { + color-scheme: dark; + /*----------------- New Look Variables Dark Mode Start -----------------*/ + --icon-anchor: var(--icon-anchor-dark); + --icon-arrow-left: var(--icon-arrow-left-dark); + --icon-arrow-right: var(--icon-arrow-right-dark); + --icon-arrow-up: var(--icon-arrow-up-dark); + --icon-clipboard: var(--icon-clipboard-dark); + --icon-home: var(--icon-home-dark); + --icon-file: var(--icon-file-dark); + --icon-menu: var(--icon-menu-dark); + + --text-buttons-button-label-primary-default: var(--colors-primary-0); + --text-buttons-button-label-secondary-default: var(--colors-primary-950); + --text-buttons-button-label-inactive: var(--colors-primary-500); + + --text-main-text-primary: var(--colors-primary-0); + --text-main-text-link-blue-secondary: #6DCDF7; + --text-main-text-link-blue-tetriary: var(--colors-secondary-600); + --text-main-text-link-blue: var(--colors-secondary-400); + --text-main-text-body-secondary: var(--colors-primary-200); + --text-main-text-body-tetriary: var(--colors-primary-400); + --text-main-text-body-quaternary: var(--colors-primary-600); + --text-main-text-body-primary: var(--colors-primary-50); + + --text-states-text-warning-tetriary: var(--colors-warning-400); + --text-states-text-warning-secondary: var(--colors-warning-500); + --text-states-text-warning: var(--colors-warning-600); + --text-states-text-positive-secondary: var(--colors-positive-500); + --text-states-text-positive-tetriary: var(--colors-positive-400); + --text-states-text-positive: var(--colors-positive-600); + --text-states-text-negative-secondary: var(--colors-negative-500); + --text-states-text-negative-tetriary: var(--colors-negative-400); + --text-states-text-negative: var(--colors-negative-600); + --text-states-text-additional: var(--colors-secondary-600); + --text-states-text-additional-secondary: var(--colors-secondary-500); + --text-states-text-additional-tetriary: var(--colors-secondary-400); + + --text-code-keyword: var(--colors-syntax-weak-blue); + --text-code-text: #FFFFFF; + --text-code-literal: var(--colors-syntax-weak-green); + --text-code-comment: var(--colors-syntax-weak-yellow); + --text-code-preprocessor: var(--colors-syntax-weak-pink); + --text-code-attribute: var(--colors-syntax-weak-grey); + + --surface-background-states-surface-error-weak: var(--colors-error-strong); + --text-states-text-error-strong: var(--colors-error-mid); + --text-states-text-error-mid: var(--colors-error-mid); + + --surface-accent-teal-weak: var(--colors-primary-700); + --surface-accent-yellow-weak: var(--colors-primary-700); + --surface-accent-green-weak: var(--colors-primary-700); + --surface-accent-teal-strong: var(--colors-primary-600); + --surface-accent-yellow-strong: var(--colors-primary-600); + --surface-accent-green-strong: var(--colors-primary-600); + + --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500); + --surface-button-button-bg-primary-default: var(--colors-primary-600); + --surface-button-button-bg-primary-pressed: var(--colors-primary-600); + --surface-button-button-bg-primary-inactive: var(--colors-primary-800); + --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-400); + --surface-button-button-bg-primary-hover: var(--colors-primary-800); + --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-500); + --surface-button-button-bg-secondary-cta-inactive: var(--colors-primary-800); + + --surface-page: var(--colors-primary-950); + --surface-background-main-base-primary: var(--surface-page); + --pagination-bg: var(--colors-primary-850); + --table-bg: var(--colors-primary-850); + --table-header-bg: #2F313D; + --table-stroke: #F7F7F81A; + background-color: var(--surface-page); + --surface-background-main-surface-primary: var(--colors-primary-850); + --surface-background-main-surface-secondary: var(--colors-primary-800); + --surface-background-main-surface-tetriary: var(--colors-primary-700); + --surface-background-main-surface-blue-primary: var(--colors-secondary-900); + --surface-background-main-surface-blue-secondary: var(--colors-secondary-900); + --surface-background-main-surface-blue-tetriary: var(--colors-secondary-850); + --surface-background-main-surface-blue-quaternary: var(--colors-secondary-800); + --surface-background-main-surface-transparent: var(--colors-overlay-overlay-black-64); + --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-white-40); + --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-black-88); + + --surface-background-states-surface-warning-primary: var(--colors-warning-950); + --surface-background-states-surface-warning-secondary: var(--colors-warning-950); + --surface-background-states-surface-warning-tetriary: var(--colors-warning-800); + --surface-background-states-surface-warning-quaternary: var(--colors-warning-700); + --surface-background-states-surface-positive-primary: var(--colors-positive-950); + --surface-background-states-surface-positive-secondary: var(--colors-positive-950); + --surface-background-states-surface-positive-tetriary: var(--colors-positive-800); + --surface-background-states-surface-positive-quaternary: var(--colors-positive-700); + --surface-background-states-surface-negative-primary: var(--colors-negative-950); + --surface-background-states-surface-negative-secondary: var(--colors-negative-950); + --surface-background-states-surface-negative-tetriary: var(--colors-negative-800); + --surface-background-states-surface-negative-quaternary: var(--colors-negative-700); + --surface-background-states-surface-additional-secondary: var(--colors-secondary-950); + --surface-background-states-surface-additional-tetriary: var(--colors-secondary-800); + --surface-background-states-surface-additional-quaternary: var(--colors-secondary-700); + + --surface-icons-icon-primary: var(--colors-primary-0); + --surface-icons-icon-button-primary: var(--colors-primary-0); + --surface-icons-icon-button-secondary: var(--colors-primary-950); + --surface-icons-icon-button-inactive: var(--colors-primary-600); + --surface-icons-icon-secondary: var(--colors-primary-200); + --surface-icons-icon-quaternary: var(--colors-primary-600); + --surface-icons-icon-cta: var(--colors-brand-orange-500); + --surface-icons-icon-hover: var(--colors-brand-orange-600); + --surface-icons-icon-warning: var(--colors-warning-400); + --surface-icons-icon-positive: var(--colors-positive-400); + --surface-icons-icon-negative: var(--colors-negative-400); + --surface-icons-icon-brand-orange: var(--colors-brand-orange-400); + --surface-icons-icon-blue: var(--colors-secondary-400); + --surface-icons-icon-blue-light: var(--colors-secondary-700); + + --border-border-primary: var(--colors-primary-850); + --border-border-secondary: var(--colors-primary-800); + --border-border-tetriary: var(--colors-primary-700); + --border-border-quaternary: var(--colors-primary-500); + --border-border-active: var(--colors-primary-0); + --border-border-brand-orange: var(--colors-brand-orange-900); + --border-border-warning: var(--colors-warning-800); + --border-border-positive: var(--colors-positive-800); + --border-border-negative: var(--colors-negative-800); + --border-border-blue: var(--colors-secondary-700); + --border-border-blue-primary: var(--colors-secondary-850); + --border-border-blue-hover: var(--colors-secondary-500); + + --surface-weak: var(--colors-primary-850); + --stroke-strong: rgba(247 247 248 / 0.21); + --stroke-mid: rgba(247 247 248 / 0.17); + --stroke-weak: rgba(255 255 255 / 0.1); + + /*----------------- New Look Variables Dark Mode Start -----------------*/ +} + +/*----------------- HTML Variables - End -----------------*/ + +/* Override for Antora default styles */ +html:has(.boostlook) { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 1rem; + height: 100%; + scroll-behavior: smooth; +} + +/*----------------- Font-Face Declarations start -----------------*/ + +/** + * Typography Configuration + * The framework uses Noto Sans family as its primary font system: + * 1. Noto Sans Display: Main text font with variable weight support + * 2. Monaspace Neon: Monospace font for code blocks + * + * Font Loading Strategy: + * - Multiple source paths for resilient loading + * - Variable fonts for optimal performance + * - Font-display: block to prevent FOIT (Flash of Invisible Text) + */ + +/* Noto Sans Display - Regular */ +@font-face { + font-family: "Noto Sans"; + font-style: normal; + font-weight: 100 900; + font-stretch: 62.5% 100%; + font-variation-settings: "wght" 400, "wdth" 62.5; + font-display: block; + src: url("../font/NotoSansDisplay.ttf") format("truetype"), + url("/static/font/notosans.woff2") format("woff2"), + url("../../../../tools/boostlook/notosans.woff2") format("woff2"), + url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype"); + size-adjust: 100%; + ascent-override: 92%; + descent-override: 22%; + line-gap-override: 0%; +} + +/* Noto Sans Display - Italic */ +@font-face { + font-family: "Noto Sans"; + font-style: italic; + font-weight: 100 900; + font-stretch: 62.5% 100%; + font-variation-settings: "wght" 400, "wdth" 62.5; + font-display: block; + src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"), + url("/static/font/notosans_ext.woff2") format("woff2"), + url("../../../../tools/boostlook/notosans_ext.woff2") format("woff2"), + url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype"); + size-adjust: 100%; + ascent-override: 92%; + descent-override: 22%; + line-gap-override: 0%; +} + +/* Mona Sans - Variable Font */ +@font-face { + font-family: "Mona Sans"; + font-style: normal; + font-weight: 100 900; + font-stretch: 75% 125%; + font-display: block; + src: url("../font/MonaSansVF.ttf") format("truetype"); +} + +/* Monaspace Neon - Regular */ +@font-face { + font-family: "Monaspace Neon"; + font-style: normal; + font-weight: 400; + font-display: block; + src: url("../font/MonaspaceNeonFrozen-Regular.ttf") format("truetype"), + url("/static/font/MonaspaceNeon-Var.woff2") format("woff2"), + url("../../../../tools/boostlook/MonaspaceNeon-Var.woff2") format("woff2"), + url("https://cppalliance.org/fonts/MonaspaceNeon-Var.woff2") format("woff2"); + size-adjust: 100%; + ascent-override: 92%; + descent-override: 22%; + line-gap-override: 0%; +} + +/* Monaspace Xenon - Italic */ +@font-face { + font-family: "Monaspace Xenon"; + font-style: italic; + font-weight: 400; + font-display: block; + src: url("../font/MonaspaceXenonFrozen-Italic.ttf") format("truetype"), + url("/static/font/MonaspaceXenon-Var.woff2") format("woff2"), + url("../../../../tools/boostlook/MonaspaceXenon-Var.woff2") format("woff2"), + url("https://cppalliance.org/fonts/MonaspaceXenon-Var.woff2") format("woff2"); + size-adjust: 100%; + ascent-override: 92%; + descent-override: 22%; + line-gap-override: 0%; +} + +/*----------------- Font-Face Declarations end -----------------*/ + +/*----------------- CSS Reset start -----------------*/ + +/** + * Modern CSS Reset + * A minimal CSS reset that: + * 1. Uses the modern box-sizing model + * 2. Removes default margins + * 3. Improves text rendering + * 4. Ensures responsive media elements + * 5. Normalizes form elements + * 6. Prevents text overflow issues + * 7. Provides a proper stacking context + * 8. Resets legacy table and adjacent element styles + */ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; +} + +html body { + margin: 0; +} + +/* Body defaults */ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; + margin: 0; + /* Improves text rendering on WebKit */ +} + +/* Media elements */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; + /* Responsive media elements */ +} + +/* Form elements */ +input, +button, +textarea, +select { + font: inherit; + /* Inherit typography */ +} + +/* Text elements */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; + /* Prevent text overflow */ +} + +body :not(pre):not([class^="L"]) > code { + /* overrides builtin colors */ + color: var(--text-code-text, #050816); + border: 0; + background-color: unset; +} + +/* Stacking context */ +#root, +#__next { + isolation: isolate; + /* Create new stacking context */ +} + +/* Reset Legacy Table and Next to Table Element Styles */ +.boostlook .tablecontainer, +.boostlook .tablecontainer + *, +.boostlook :not(.tablecontainer) > table.tableblock, +.boostlook :not(.tablecontainer) > table.tableblock + *, +.boostlook .doc .tablecontainer, +.boostlook .doc .tablecontainer + *, +.boostlook .doc :not(.tablecontainer) > table.tableblock, +.boostlook .doc :not(.tablecontainer) > table.tableblock + *, +.boostlook.boostlook:not(:has(.doc)) table.table, +.boostlook.boostlook:not(:has(.doc)) table.table + * { + margin: revert; +} + +.boostlook .underline:has(> code:only-child) { + text-decoration-line: none; +} + +/*----------------- CSS Reset end -----------------*/ + +/*----------------- Global Styles for .boostlook start -----------------*/ + +/** + * Global Styles for .boostlook + * Core styles that apply to all .boostlook containers regardless of template. + * These styles establish: + * 1. Base container styling + * 2. Typography hierarchy and spacing + * 3. Link appearances and interactions + * 4. Code block formatting and syntax highlighting + * 5. List and table styles + * 6. Special block elements (quotes, admonitions, etc.) + * 7. Pagination and navigation elements + * 8. Layout structure and spacing + */ + +/* Base Container */ +.boostlook { + font-family: var(--font-family-body, "Mona Sans") !important; + font-variation-settings: "wght" 400, "wdth" 95; + line-height: 120%; + letter-spacing: -0.01em; + color: var(--text-main-text-body-secondary, #585A64); + background: var(--surface-background-main-base-primary, #fff); +} + +/* Typography Hierarchy + * Establishes consistent heading sizes and spacing + * while maintaining proper visual hierarchy + */ +.boostlook h1, +.boostlook .doc h1, +.boostlook h2, +.boostlook .doc h2, +.boostlook h3, +.boostlook .doc h3, +.boostlook h4, +.boostlook .doc h4, +.boostlook h5, +.boostlook .doc h5, +.boostlook h6, +.boostlook .doc h6 { + color: var(--text-main-text-primary, #050816); + display: block; + font-family: var(--font-family-body, "Mona Sans"); + line-height: 100%; + margin-top: var(--padding-padding-lg, 1.5rem); + margin-bottom: 0.5rem; + font-weight: 500; + font-variation-settings: "wght" 500, "wdth" 87.5; + position: relative; +} + +/* Heading Sizes — Metalab 2.0 */ +/* h1: Display/Desktop/Medium/3XL */ +.boostlook h1, +.boostlook .doc h1 { + font-size: var(--typography-font-size-h1, 2rem); + letter-spacing: -0.01em; +} + +/* h2: Display/Desktop/Medium/Large */ +.boostlook h2, +.boostlook .doc h2 { + font-size: var(--typography-font-size-h2, 1.25rem); + letter-spacing: -0.01em; +} + +/* h3: Display/Desktop/Medium/M */ +.boostlook h3, +.boostlook .doc h3 { + font-size: var(--typography-font-size-h3, 1.125rem); + letter-spacing: -0.01em; +} + +/* h4: Display/Desktop/Medium/Base */ +.boostlook h4, +.boostlook .doc h4 { + font-size: var(--typography-font-size-h4, 1rem); + letter-spacing: -0.16px; +} + +/* h5 */ +.boostlook h5, +.boostlook .doc h5 { + font-size: var(--font-size-xs, 0.875rem); + letter-spacing: -0.14px; +} + +/* h6 */ +.boostlook h6, +.boostlook .doc h6 { + font-size: var(--font-size-2xs, 0.75rem); + letter-spacing: -0.12px; +} + +/* Document-specific headings adjustments */ +.boostlook .doc h2:not(.discrete) { + /* website-v2-doc styles overrides */ + margin-left: 0; + padding-left: 0; + border-bottom: revert; + margin-right: revert; + padding: revert; +} + +.boostlook h2:has(+ .sectionbody > .sect2:first-child > h3), +.boostlook .doc h2:has(+ .sectionbody > .sect2:first-child > h3) { + margin-bottom: 0; +} + +.boostlook h3:has(+ .sect3 > h4:first-child), +.boostlook .doc h2:has(+ .sect3 > h4:first-child) { + margin-bottom: 0; +} + +/* Override default docs site css */ +.boostlook .doc .dlist, +.boostlook .doc .exampleblock, +.boostlook .doc .hdlist, +.boostlook .doc .imageblock, +.boostlook .doc .listingblock, +.boostlook .doc .literalblock, +.boostlook .doc .olist, +.boostlook .doc .paragraph, +.boostlook .doc .partintro, +.boostlook .doc .quoteblock, +.boostlook .doc .sidebarblock, +.boostlook .doc .tabs, +.boostlook .doc .ulist, +.boostlook .doc .verseblock, +.boostlook .doc .videoblock, +.boostlook .doc details, +.boostlook .doc hr { + margin: revert; +} + +/* Intro copy — first paragraph after page title (24px per Figma) */ +/* Antora: h1.page → #preamble → first paragraph */ +.boostlook .doc #preamble > .sectionbody > .paragraph:first-child > p, +/* Antora: h1.page → first sect1 (no preamble) → first paragraph */ +.boostlook .doc h1.page + .sect1 > .sectionbody > .paragraph:first-child > p, +/* Asciidoctor (non-Antora): first sect1 → first sect2 → first paragraph */ +.boostlook:not(:has(.doc)) #content > .sect1:first-of-type > .sectionbody > .sect2:first-child > .paragraph:first-of-type > p { + font-size: 1.5rem; + line-height: 133%; +} + +/* Scroll offset for anchor links */ +.boostlook .doc h1[id], +.boostlook .doc h2[id], +.boostlook .doc h3[id], +.boostlook .doc h4[id], +.boostlook .doc h5[id], +.boostlook .doc h6[id], +.boostlook .doc :where(h1, h2, h3, h4, h5, h6):has(.anchor), +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]) { + scroll-margin-top: 0.75rem; +} + +/* Anchor positioning within headings */ +.boostlook .doc h1:has(.anchor), +.boostlook .doc h2:has(.anchor), +.boostlook .doc h3:has(.anchor), +.boostlook .doc h4:has(.anchor), +.boostlook .doc h5:has(.anchor), +.boostlook .doc h6:has(.anchor), +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) { + display: inline-block; + /* Anchor width and spacing compensation */ + padding-right: 3rem; +} + +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href] { + text-decoration: none; + color: inherit; +} + +/* Heading Anchors */ +.boostlook .doc h1 .anchor, +.boostlook .doc h2 .anchor, +.boostlook .doc h3 .anchor, +.boostlook .doc h4 .anchor, +.boostlook .doc h5 .anchor, +.boostlook .doc h6 .anchor, +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id], +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before { + position: absolute; + top: 50%; + right: 0; + display: flex; + align-items: center; + justify-content: center; + margin-left: revert; + width: 2rem; + height: 2rem; + border: 1px; + visibility: hidden; + opacity: 0; + text-decoration: none; + border-radius: var(--spacing-size-lg, 1.5rem); + border: 1px solid var(--border-border-primary, #e4e7ea); + background: var(--surface-background-main-base-primary, #fff); + transform: translateY(-50%); + transition: all 0.2s ease; +} + +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id] { + visibility: visible; +} +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before { + content: ""; +} + +.boostlook .doc h1 .anchor::before, +.boostlook .doc h2 .anchor::before, +.boostlook .doc h3 .anchor::before, +.boostlook .doc h4 .anchor::before, +.boostlook .doc h5 .anchor::before, +.boostlook .doc h6 .anchor::before, +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after { + content: var(--icon-anchor); + display: block; + line-height: 1; + opacity: 0.6; + transition: opacity 0.3s ease; +} + +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after { + position: absolute; + top: 50%; + right: 0; + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + line-height: 0; + transform: translateY(-50%); + transition: all 0.2s ease; +} + +.doc h1:hover .anchor, +.doc h2:hover .anchor, +.doc h3:hover .anchor, +.doc h4:hover .anchor, +.doc h5:hover .anchor, +.doc h6:hover .anchor, +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:before { + opacity: 1; + visibility: visible; +} + +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:after { + opacity: 0.6; + visibility: visible; +} + +.boostlook .doc h1 .anchor:hover, +.boostlook .doc h2 .anchor:hover, +.boostlook .doc h3 .anchor:hover, +.boostlook .doc h4 .anchor:hover, +.boostlook .doc h5 .anchor:hover, +.boostlook .doc h6 .anchor:hover, +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]:hover) a[href]:before { + border-color: var(--border-border-blue, #92cbe9); +} + +.boostlook .doc h1 .anchor:active, +.boostlook .doc h2 .anchor:active, +.boostlook .doc h3 .anchor:active, +.boostlook .doc h4 .anchor:active, +.boostlook .doc h5 .anchor:active, +.boostlook .doc h6 .anchor:active, +.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:active:before { + border-color: var(--border-border-blue, #92cbe9); + background: var(--surface-background-main-surface-blue-secondary, #daeef9); +} + +.boostlook .doc h1 .anchor:hover::before, +.boostlook .doc h2 .anchor:hover::before, +.boostlook .doc h3 .anchor:hover::before, +.boostlook .doc h4 .anchor:hover::before, +.boostlook .doc h5 .anchor:hover::before, +.boostlook .doc h6 .anchor:hover::before { + opacity: 1; +} + +/* Mobile: always show anchor icons (no hover on touch devices) */ +@media (hover: none) { + .boostlook .doc h1 .anchor, + .boostlook .doc h2 .anchor, + .boostlook .doc h3 .anchor, + .boostlook .doc h4 .anchor, + .boostlook .doc h5 .anchor, + .boostlook .doc h6 .anchor, + .boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before { + opacity: 1 !important; + visibility: visible !important; + } + + .boostlook .doc h1 .anchor::before, + .boostlook .doc h2 .anchor::before, + .boostlook .doc h3 .anchor::before, + .boostlook .doc h4 .anchor::before, + .boostlook .doc h5 .anchor::before, + .boostlook .doc h6 .anchor::before, + .boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after { + opacity: 0.6 !important; + visibility: visible !important; + } +} + +/* Paragraph Styling — Metalab 2.0: Sans/Desktop/Regular/Base/Tight */ +.boostlook p { + padding-top: initial !important; + padding-bottom: initial !important; + color: var(--text-main-text-body-secondary, #585A64); + font-size: var(--typography-font-size-sm, 1rem); + line-height: 120%; + letter-spacing: -0.16px; +} + +/* Components margins */ +.boostlook .paragraph + .paragraph { + margin-top: var(--padding-padding-md, 1rem); +} + +.boostlook:not(:has(.doc)) .section > p + p, +.boostlook:not(:has(.doc)) .chapter > p + p, +.boostlook div.blockquote blockquote p + p, +.boostlook#libraryReadMe > p:not(:first-child) + p, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > p + p, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > p + p, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > p + p { + margin-top: var(--padding-padding-3xs, 0.25rem); +} +.boostlook #content .admonitionblock + .tabs, +.boostlook .paragraph + .tabs { + margin-top: var(--spacing-size-2md, 1.3rem); +} + +.boostlook #content .paragraph + .admonitionblock, +.boostlook #content .tabs + .paragraph, +.boostlook #content .colist + .paragraph, +.boostlook #content .admonitionblock + .admonitionblock, +.boostlook #content .olist + .admonitionblock, +.boostlook #content .olist + .paragraph, +.boostlook:not(:has(.doc)) div.orderedlist + p, +.boostlook:not(:has(.doc)) p + div.orderedlist, +.boostlook:not(:has(.doc)) .itemizedlist + p, +.boostlook:not(:has(.doc)) div.itemizedlist:has(+ a[id^="bind"]) + a + *, +.boostlook:not(:has(.doc)) div.table:has(+ .table-break) + .table-break + *, +.boostlook #content .paragraph + .olist, +.boostlook #content .paragraph + .listingblock, +.boostlook #content .paragraph + .literalblock, +.boostlook #content .paragraph + .ulist, +.boostlook #content .paragraph + .dlist, +.boostlook #content .paragraph + .imageblock, +.boostlook #content .paragraph + .exampleblock, +.boostlook #content .paragraph + .quoteblock, +.boostlook #content .ulist + .admonitionblock, +.boostlook #content .ulist + .paragraph, +.boostlook #content .colist + .admonitionblock, +.boostlook #content .admonitionblock + .paragraph, +.boostlook #content .paragraph + table.tableblock, +.boostlook.boostlook:not(:has(.doc)) p + table.table, +.boostlook.boostlook:not(:has(.doc)) p + .informaltable, +.boostlook #content table.tableblock + .paragraph, +.boostlook #content table.tableblock + .admonitionblock, +.boostlook:not(:has(.doc)) .informaltable + p, +.boostlook #content .imageblock + .paragraph, +.boostlook:not(:has(.doc)) .inlinemediaobject + p, +.boostlook:not(:has(.doc)) p:has(> .inlinemediaobject:only-child) + p, +.boostlook:not(:has(.doc)) p + pre, +.boostlook:not(:has(.doc)) p + .listingblock, +.boostlook:not(:has(.doc)) .section p + ul, +.boostlook:not(:has(.doc)) .section p + dl, +.boostlook#libraryReadMe > p + pre, +.boostlook#libraryReadMe > p + ul, +.boostlook#libraryReadMe > p + table, +.boostlook#libraryReadMe > table + p, +.boostlook#libraryReadMe > ul + p, +.boostlook#libraryReadMe .literalblock + .paragraph, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) + p, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) + p, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) + p { + margin-top: var(--padding-padding-xs, 0.75rem) !important; +} + +.boostlook #content .dlist + .paragraph, +.boostlook #content .dlist + .listingblock, +.boostlook:not(:has(.doc)) div.blockquote + p, +.boostlook:not(:has(.doc)) .variablelist + p { + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook h2 + .tabs, +.boostlook .doc h2 + .tabs, +.boostlook h3 + .tabs, +.boostlook .doc h3 + .tabs, +.boostlook h4 + .tabs, +.boostlook .doc h4 + .tabs, +.boostlook h5 + .tabs, +.boostlook .doc h5 + .tabs, +.boostlook h5 + .tabs, +.boostlook .doc h6 + .tabs { + margin-top: var(--padding-padding-sm, 0.75rem); +} + +.boostlook #content .sectionbody .olist:first-child, +.boostlook:not(:has(.doc)) .section div.orderedlist:first-child { + margin-top: var(--padding-padding-3xs, 0.25rem); +} + +.boostlook .olist .imageblock .content, +.boostlook .ulist .imageblock .content { + margin-bottom: var(--padding-padding-xs, 0.75rem); +} + +/* Special paragraph cases */ +.boostlook table p, +.boostlook ul p { + margin: 0; +} + +/* Link Styling */ +.boostlook a, +.boostlook .doc a { + color: var(--text-main-text-link-blue, #026a9f); + text-decoration: none; + transition: color 0.3s ease; +} + +/* Content body links: underline per Figma (paragraphs and lists only) */ +.boostlook #content .doc .paragraph a:not(.anchor), +.boostlook #content .doc .ulist a:not(.anchor), +.boostlook #content .doc .olist a:not(.anchor), +.boostlook #content .doc .dlist a:not(.anchor) { + text-decoration: underline; + text-underline-offset: 2px; +} + +/* Link Hover States */ +.boostlook a:hover, +.boostlook .doc a:hover { + color: var(--text-states-text-warning, #FF9442); + cursor: pointer; +} + +/* Emphasis within code */ +.boostlook code em, +.boostlook code i, +.boostlook pre em, +.boostlook pre i { + font-family: "Monaspace Xenon", monospace; + font-size: inherit; + font-style: italic; +} + +.boostlook em { + font-family: inherit; + font-size: inherit; + font-style: italic; +} + +/* Text Emphasis */ +.boostlook b, +.boostlook strong { + font-variation-settings: "wght" 600, "wdth" 87.5; + text-shadow: none; +} + +/* Comments within code (inline and blocks) */ +.boostlook code span.c, +.boostlook code span.ch, +.boostlook code span.cm, +.boostlook code span.cp, +.boostlook code span.cpf, +.boostlook code span.c1, +.boostlook code span.cs, +.boostlook code span.comment { + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +/* Code Block Styling */ +.boostlook .doc .listingblock, +.boostlook .listingblock { + position: relative; +} + +.boostlook .doc .listingblock code, +.boostlook .listingblock code { + display: initial; +} + +.boostlook .hljs { + background: transparent; +} + +.boostlook code { + font-family: var(--font-family-code, "Monaspace Neon"), monospace; +} + +.boostlook table thead code { + background: inherit; +} + +.boostlook pre code, +.boostlook pre code.hljs, +.boostlook .doc .content pre code, +.boostlook .doc pre.highlight code { + font-size: var(--typography-font-size-2xs, 0.75rem); + font-feature-settings: "calt" 1, "liga" 0; + line-height: 130%; + letter-spacing: var(--spacing-size-size-0, 0rem); + color: var(--text-main-text-primary, #18191b); + padding: revert; + border: none; +} + +.boostlook pre code .conum[data-value]::after, +.boostlook pre code.hljs .conum[data-value]::after, +.boostlook .doc .content pre code .conum[data-value]::after, +.boostlook .doc pre.highlight code .conum[data-value]::after { + content: "("attr(data-value)")"; +} + +.boostlook pre:not(:has(> code)), +.boostlook pre:not(:has(> code)):has(p, span) { + font-size: var(--typography-font-size-xs, 0.875rem); + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.boostlook pre, +.boostlook pre.rouge, +.boostlook .doc .content pre, +.boostlook .doc pre.highlight, +.boostlook .doc .listingblock pre:not(.highlight), +.boostlook .doc .literalblock pre +.boostlook .literalblock pre, +.boostlook .listingblock > .content > pre, +.boostlook .listingblock > .content > pre:not(.highlight), +.boostlook .literalblock > .content > pre:not(.highlight), +.boostlook .exampleblock > .content, +.boostlook .sidebarblock { + padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem); + background: var(--atom-one-light-bg, #fafafa) !important; + border-radius: var(--radius-xxl, 1rem); + border: 1px solid var(--border-border-primary, #e4e7ea); + box-shadow: none; + line-height: 130%; +} + +.boostlook .sidebarblock { + margin-top: 20px; + border: 1px solid var(--border-border-secondary, #d5d7d9); +} + +/* Dark theme code block background */ +html.dark .boostlook pre, +html.dark .boostlook pre.rouge, +html.dark .boostlook .doc .content pre, +html.dark .boostlook .doc pre.highlight, +html.dark .boostlook .doc .listingblock pre:not(.highlight), +html.dark .boostlook .doc .literalblock pre, +html.dark .boostlook#libraryReadMe > pre:not(:last-child), +html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)), +html.dark .boostlook .doc .literalblock pre, +html.dark .boostlook .literalblock pre, +html.dark .boostlook .literalblock > .content > pre:not(.highlight), +html.dark .boostlook .listingblock > .content > pre, +html.dark .boostlook .sidebarblock, +html.dark .boostlook .exampleblock > .content, +html.dark .boostlook .listingblock > .content > pre { + background: var(--atom-one-dark-bg, #282c34) !important; +} + +.boostlook .doc pre { + padding: initial; +} + +.boostlook .content:has(> pre), +.boostlook .content:has(> pre.highlight) { + border-radius: 0; + /*border: 1px solid var(--border-border-secondary, #d5d7d9);*/ + background: none; +} + +.boostlook pre.programlisting, +.boostlook pre.synopsis, +.boostlook pre.literallayout, +.boostlook#libraryReadMe > pre { + border: 1px solid var(--border-border-secondary, #d5d7d9); +} + +/* Code Block Regular Title */ +.boostlook .doc .listingblock .title, +.boostlook .listingblock .title { + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-variation-settings: "wght" 600, "wdth" 87.5; + line-height: var(--typography-line-height-md, 1.25rem); + letter-spacing: unset; + padding-bottom: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook .doc .listingblock .title a, +.boostlook .listingblock .title a { + font: inherit; + text-decoration: none; +} + +/* Code Block Title With File Name. + * Applies only if codeblock has child with class .toolbox + * and it`s title doesn`t includes any other elems as children +*/ +.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)), +.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) { + position: absolute; + top: 1px; + height: 2rem; + max-width: calc(100% - 5rem); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0; + padding-left: var(--spacing-size-sm); + display: flex; + align-items: center; + gap: var(--spacing-size-2xs, 0.5rem); + color: var(--text-main-text-body-tetriary, #62676b); + font-family: "Mona Sans"; + font-size: var(--typography-font-size-2xs, 0.75rem); + font-style: normal; + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + z-index: 1; + display: none; +} + +.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before, +.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before { + content: var(--icon-file); + line-height: 0; +} + +/* Code Block Margins */ +.boostlook .listingblock:has(> .content > pre), +.boostlook .listingblock:has(> .content > pre.highlight), +.boostlook:not(:has(.doc)) pre.programlisting, +.boostlook:not(:has(.doc)) pre.synopsis, +.boostlook#libraryReadMe > pre, +.boostlook#libraryReadMe .literalblock:has(pre), +.boostlook#libraryReadMe div.highlight:has(> pre) { + margin: 0; + border: none; + background-color: transparent; + padding:0; +} + +/* Apply left margin only if code block not in definition block or in table */ +.boostlook:not(:has(.doc)) pre.programlisting:not(:is(dd pre, td pre)), +.boostlook:not(:has(.doc)) pre.synopsis:not(:is(dd pre, td pre)), +.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)), +.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)), +.boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)) { + /*margin-left: var(--spacing-size-xl);*/ + /*border: 1px solid var(--border-border-secondary, #d5d7d9);*/ + background: var(--atom-one-light-bg, #fafafa); + margin-top: var(--padding-padding-xs, 0.75rem); +} + +.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)) { + margin-left: var(--spacing-size-xl); + border: 1px solid var(--border-border-secondary, #d5d7d9); +} + +@media screen and (max-width: 767px) { + .boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)) { + margin-left: 0; + } +} +.boostlook .olist.arabic > ol > li .listingblock:has(> .content > pre):not(:is(dd pre, td pre)), +.boostlook:not(:has(.doc)) .orderedlist > ol > li .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)) { + margin-left: 0; +} + +.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)):has(.title) { + border: none; + background: none; +} + +.boostlook .listingblock:has(> .content > pre):not(:last-child), +.boostlook .listingblock:has(> .content > pre.highlight):not(:last-child), +.boostlook:not(:has(.doc)) pre.programlisting:not(:last-child), +.boostlook:not(:has(.doc)) pre.synopsis:not(:last-child), +.boostlook#libraryReadMe > pre:not(:last-child) { + margin-bottom: var(--padding-padding-xs, 0.75rem); +} + +.boostlook .content:has(> pre):has(> .source-toolbox) { + position: relative; + display: flex; + flex-direction: column-reverse; +} + +.boostlook .highlight pre, +.boostlook .content:has(> pre) pre.highlight, +.boostlook .literalblock > .content > pre:not(.highlight) { + border: 1px solid var(--border-border-primary, #e4e7ea); + border-radius: var(--radius-xxl, 1rem); +} +.boostlook .content:has(> pre):has(> .source-toolbox) pre { + /*border: 1px solid var(--border-border-secondary, #d5d7d9);*/ + /*border-radius: var(--spacing-size-2xs, 0.5rem);*/ +} + +.boostlook .content:has(> pre):has(> .source-toolbox) .source-toolbox { + position: static; + order: 0; + display: flex; + visibility: visible; + top: unset; + right: unset; + color: var(--text-main-text-body-tetriary, #62676b); + font-family: inherit; + z-index: 1; + padding: var(--article-article-compressing-from-12-8--, 0.5rem) var(--spacing-size-sm, 1rem); + /*min-height: 2rem;*/ + height: 0; + max-height: 0; + min-height: 0; + padding: 0; + /*margin-top: -1px;*/ +} + +.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox { + min-height: 0; + height: 0; + padding: 0 !important; + margin-bottom: -1px; +} +.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox .copy-button { + top: 0.25rem; +} +.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang { + color: var(--text-main-text-body-quaternary, #949a9e); + text-align: right; + font-family: "Mona Sans"; + font-size: var(--typography-font-size-2xs, 0.75rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + text-transform: uppercase; + margin-left: auto; + display: none; +} +.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang::after { + content: none; +} + +/* Code Block Copy to Clipboard Icon */ +.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button { + position: absolute; + top: 2.25rem; + right: 0.25rem; + display: flex; + flex-direction: column; + align-items: center; + color: inherit; + outline: none; + font-size: inherit; + line-height: inherit; + width: 2rem; + height: 2rem; + padding: var(--spacing-size-3xs, 0.25rem); + border-radius: var(--spacing-size-2xs, 0.5rem); + border: 1px solid var(--border-border-primary, #e4e7ea); + background: var(--surface-background-main-surface-primary, #f5f6f8); + opacity: 0; + visibility: hidden; + transition: all 0.2s ease; +} + +.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover { + border: 1px solid var(--border-border-blue, #92cbe9); +} + +.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button { + opacity: 1; + visibility: visible; +} + +/* Mobile: hide copy button (clipboard API requires HTTPS) */ +@media (hover: none) { + .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button { + display: none !important; + } +} + +.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button img { + display: none; +} + +.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button::before { + content: var(--icon-clipboard); + width: var(--icons-24, 1.5rem); + height: var(--icons-24, 1.5rem); + aspect-ratio: 1/1; +} + +/* Code Block Copied Toast */ +.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast { + flex: none; + position: relative; + display: inline-flex; + justify-content: center; + padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-xs, 0.75rem); + flex-direction: column; + align-items: center; + margin-top: 1em; + background: var(--surface-background-main-surface-primary, #f5f6f8); + border-radius: var(--spacing-size-2xs, 0.5rem); + border: 1px solid var(--border-border-secondary, #d5d7d9); + color: var(--text-main-text-primary, #18191b); + cursor: auto; + opacity: 0; + transition: opacity 0.5s ease 0.5s; +} + +.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast::after { + content: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2011.95L11.6569%206.2931L6%200.636243L0.343146%206.2931L6%2011.95Z%22%20fill%3D%22%23F5F6F8%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.343146%206.2931L6%200.636243L11.6569%206.2931L10.9497%207.0002L6%202.05046L1.05025%207.0002L0.343146%206.2931Z%22%20fill%3D%22%23E4E7EA%22%2F%3E%3C%2Fsvg%3E"); + position: absolute; + top: -62%; + width: 1em; + height: 1em; + border: unset; + border-left-color: unset; + transform: unset; + transform-origin: unset; + color: var(--text-main-text-primary, #18191b); + text-align: center; + font-size: var(--typography-font-size-sm, 1rem); + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */ +} + +/* Code Styling */ +.boostlook p code:not(:has(> code)), +.boostlook li code:not(:has(> code)), +.boostlook .doc p code:not(:has(> code)), +.boostlook .doc .colist > table code:not(:has(> code)) { + display: inline; + color: var(--text-code-text, #050816); + font-size: 0.88em; + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-md); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.boostlook p:not(:is(table p)) code:not(:has(> code)), +.boostlook li code:not(:has(> code)), +.boostlook .doc p:not(:is(table p)) code:not(:has(> code)), +.boostlook .doc .colist > table code:not(:has(> code)) { + border-radius: unset; + padding: unset; + /* border: 1px solid var(--border-border-secondary, #d5d7d9); */ + background: transparent !important; +} + +/* Code Links */ +.boostlook p:not(:is(table p)) a code, +.boostlook li:not(:is(table li)) a code, +.boostlook .doc p:not(:is(table p)) a code, +.boostlook .doc table a code, +.boostlook .doc .colist > table a code, +.boostlook code:has(> a:first-child:last-child), +.boostlook code:has(> a:only-child), +.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child), +.boostlook p:not(:is(table p)) code:has(> a:only-child), +.boostlook li:not(:is(table li)) code:has(> a:first-child:last-child), +.boostlook li:not(:is(table li)) code:has(> a:only-child), +.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child), +.boostlook .doc p:not(:is(table p)) code:has(> a:only-child), +.boostlook .doc .colist > table code:has(> a:first-child:last-child), +.boostlook .doc .colist > table code:has(> a:only-child) { + /* transition: all 0.2s ease; */ + border-radius: unset; + border: none; + background: transparent !important; + color: inherit; +} + +/* Applies to links in code in case where only one link tag inside code */ +/* .boostlook code:not(.tableblock code, .table code):has(> a:first-child:last-child) a, +.boostlook code:not(.tableblock code, .table code):has(> a:only-child) a, +.boostlook p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a, +.boostlook p code:not(.tableblock code, .table code):has(> a:only-child) a, +.boostlook li code:not(.tableblock code, .table code):has(> a:first-child:last-child) a, +.boostlook li code:not(.tableblock code, .table code):has(> a:only-child) a, +.boostlook .doc p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a, +.boostlook .doc p code:not(.tableblock code, .table code):has(> a:only-child) a, +.boostlook .doc .colist > table code:has(> a:first-child:last-child) a, +.boostlook .doc .colist > table code:has(> a:only-child) a { + text-decoration: none; + font: inherit; + color: inherit; +} */ + +/* .boostlook .doc table.tableblock code a, +.boostlook:not(:has(.doc)) table.table code a { */ +/* text-decoration-color: transparent; */ +/* color: var(--text-code-blue, #329cd2); */ +/* line-height: var(--typography-line-height-lg, 1.5rem); */ +/* } */ + +/* Code Link Hover States */ +/* .boostlook p:not(:is(table p)) a:hover code, +.boostlook li a:hover code, +.boostlook .doc p:not(:is(table p)) a:hover code, +.boostlook .doc table a:hover code, +.boostlook .doc .colist > table a:hover code, +.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child):hover, +.boostlook p:not(:is(table p)) code:has(> a:only-child):hover, +.boostlook li code:has(> a:first-child:last-child):hover, +.boostlook li code:has(> a:only-child):hover, +.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child):hover, +.boostlook .doc p:not(:is(table p)) code:has(> a:only-child):hover, +.boostlook .doc .colist > table code:has(> a:first-child:last-child):hover, +.boostlook .doc .colist > table code:has(> a:only-child):hover { + border-color: var(--border-border-blue-hover, #329cd2); + background: var(--surface-background-main-surface-blue-tetriary, #c2e2f4) !important; +} */ + +.boostlook a:hover code { + color: inherit; +} + +.boostlook .doc table.tableblock code:hover a, +.boostlook:not(:has(.doc)) table.table code:hover a, +.boostlook .doc table.tableblock code a:focus-visible, +.boostlook:not(:has(.doc)) table.table code a:focus-visible { + text-decoration-color: var(--border-border-blue, #92cbe9); +} + +/* Syntax Highlighting — Figma 6-role palette: + * Keyword (#1345E8 / #38DDFF) — keywords, types, titles, built-ins, operators + * Literal (#289D30 / #72FE92) — strings, numbers + * Comment (#A3A38C / #FFF173) — comments, quotes + * Preprocessor (#D31FA7 / #F358C0) — preprocessor directives + * Attribute (#9E9E9E / #A3A3A3) — attributes, named constants + * Text (#050816 / #FFFFFF) — default text, names, punctuation + */ + +/* Keywords & types → Keyword */ +.boostlook .hljs-keyword, +.boostlook .hljs-selector-tag, +.boostlook .hljs-subst, +.boostlook .hljs-type, +.boostlook pre span.k, +.boostlook pre span.kc, +.boostlook pre span.kd, +.boostlook pre span.kn, +.boostlook pre span.kp, +.boostlook pre span.kr, +.boostlook pre span.kt, +.boostlook pre span.keyword, +.boostlook pre span.property { + color: var(--text-code-keyword, #1345E8); +} + +/* Titles, sections, built-ins → Keyword */ +.boostlook .hljs-title, +.boostlook .hljs-section, +.boostlook .hljs-selector-id, +.boostlook .hljs-built_in, +.boostlook pre span.nf, +.boostlook pre span.nc { + color: var(--text-code-keyword, #1345E8); +} + +/* Attributes → Attribute */ +.boostlook pre span.na, +.boostlook pre span.no, +.boostlook .hljs-attr { + color: var(--text-code-attribute, #9E9E9E); +} + +/* Identifiers → Text */ +.boostlook pre span.n, +.boostlook pre span.nb, +.boostlook pre span.bp, +.boostlook pre span.nd, +.boostlook pre span.ni, +.boostlook pre span.ne, +.boostlook pre span.py, +.boostlook pre span.nl, +.boostlook pre span.nn, +.boostlook pre span.nx, +.boostlook pre span.nt, +.boostlook pre span.nv, +.boostlook pre span.vc, +.boostlook pre span.vg, +.boostlook pre span.vi, +.boostlook pre span.identifier { + color: var(--text-code-text, #050816); +} + +/* Comments → Comment */ +.boostlook pre span.c, +.boostlook pre span.ch, +.boostlook pre span.cm, +.boostlook pre span.cpf, +.boostlook pre span.c1, +.boostlook pre span.cs, +.boostlook pre span.sd, +.boostlook pre span.sh, +.boostlook pre span.comment, +.boostlook .hljs-comment, +.boostlook .cpp-comment, +.boostlook .hljs-quote, +.boostlook .hljs-bullet, +.boostlook .hljs-code { + color: var(--text-code-comment, #A3A38C); + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +/* Preprocessor (Rouge span.cp) → Preprocessor */ +.boostlook pre span.cp { + color: var(--text-code-preprocessor, #D31FA7); +} + +/* Strings → Literal */ +.boostlook pre span.s, +.boostlook pre span.sa, +.boostlook pre span.sb, +.boostlook pre span.dl, +.boostlook pre span.s2, +.boostlook pre span.se, +.boostlook pre span.si, +.boostlook pre span.sx, +.boostlook pre span.sr, +.boostlook pre span.s1, +.boostlook pre span.ss, +.boostlook pre span.string, +.boostlook .hljs-doctag, +.boostlook .hljs-string, +.boostlook .hljs-addition { + color: var(--text-code-literal, #289D30); +} + +/* Numbers → Literal */ +.boostlook .hljs-number, +.boostlook pre span.mi, +.boostlook pre span.mf, +.boostlook pre span.mb, +.boostlook pre span.mh, +.boostlook pre span.mo, +.boostlook pre span.il { + color: var(--text-code-literal, #289D30); +} + +/* Operators → Keyword */ +.boostlook pre span.o, +.boostlook pre span.ow { + color: var(--text-code-keyword, #1345E8); +} + +/* Punctuation → Text */ +.boostlook pre span.p { + color: var(--text-code-text, #050816); +} + +/* Preprocessor / meta → Preprocessor */ +.boostlook .hljs-meta { + color: var(--text-code-preprocessor, #D31FA7); +} + +/* Deletion, misc → Keyword */ +.boostlook .hljs-deletion, +.boostlook .hljs-selector-class, +.boostlook .hljs-template-tag { + color: var(--text-code-keyword, #1345E8); +} + +.boostlook .hljs-attribute { + color: var(--text-code-attribute, #9E9E9E); +} + +.boostlook .hljs-name, +.boostlook .hljs-tag { + color: var(--text-code-text, #050816); +} + +/* Syntax Defaults */ +.boostlook .hljs-attribute, +.boostlook .hljs-doctag, +.boostlook .hljs-keyword, +.boostlook .hljs-meta .hljs-keyword, +.boostlook .hljs-name, +.boostlook .hljs-selector-tag, +.boostlook .hljs-section, +.boostlook .hljs-title { + font-weight: inherit; +} + +/* Dark mode hljs overrides — beat site.css html.dark .hljs-* selectors */ +html.dark .boostlook .hljs-keyword, +html.dark .boostlook .hljs-selector-tag, +html.dark .boostlook .hljs-subst, +html.dark .boostlook .hljs-type { + color: var(--text-code-keyword, #38DDFF); +} + +html.dark .boostlook .hljs-title, +html.dark .boostlook .hljs-section, +html.dark .boostlook .hljs-selector-id, +html.dark .boostlook .hljs-built_in { + color: var(--text-code-keyword, #38DDFF); +} + +html.dark .boostlook .hljs-comment, +html.dark .boostlook .hljs-quote, +html.dark .boostlook .hljs-bullet, +html.dark .boostlook .hljs-code { + color: var(--text-code-comment, #FFF173); + font-style: italic; +} + +html.dark .boostlook .hljs-doctag, +html.dark .boostlook .hljs-string, +html.dark .boostlook .hljs-addition { + color: var(--text-code-literal, #72FE92); +} + +html.dark .boostlook .hljs-number, +html.dark .boostlook .hljs-literal, +html.dark .boostlook .hljs-variable, +html.dark .boostlook .hljs-template-variable, +html.dark .boostlook pre span.mi, +html.dark .boostlook pre span.mf, +html.dark .boostlook pre span.mb, +html.dark .boostlook pre span.mh, +html.dark .boostlook pre span.mo, +html.dark .boostlook pre span.il { + color: var(--text-code-literal, #72FE92); +} + +html.dark .boostlook pre span.o, +html.dark .boostlook pre span.ow { + color: var(--text-code-keyword, #38DDFF); +} + +html.dark .boostlook pre span.p { + color: var(--text-code-text, #FFFFFF); +} + +html.dark .boostlook .hljs-meta { + color: var(--text-code-preprocessor, #F358C0); +} + +html.dark .boostlook .hljs-deletion, +html.dark .boostlook .hljs-selector-class, +html.dark .boostlook .hljs-template-tag { + color: var(--text-code-keyword, #38DDFF); +} + +html.dark .boostlook .hljs-attribute, +html.dark .boostlook .hljs-attr { + color: var(--text-code-attribute, #A3A3A3); +} + +html.dark .boostlook .hljs-name, +html.dark .boostlook .hljs-tag { + color: var(--text-code-text, #FFFFFF); +} + +/* Override cpp-highlight theme from site.css */ +.boostlook .doc pre.highlight code.cpp-highlight, +.boostlook pre.highlight code.cpp-highlight, +.boostlook code.cpp-highlight { + color: var(--text-main-text-body-primary, #050816); +} + +.boostlook .doc pre.highlight code.cpp-highlight .cpp-keyword, +.boostlook pre.highlight code.cpp-highlight .cpp-keyword, +.boostlook code.cpp-highlight .cpp-keyword { + color: var(--text-code-keyword, #1345E8); +} + +.boostlook .doc pre.highlight code.cpp-highlight .cpp-string, +.boostlook pre.highlight code.cpp-highlight .cpp-string, +.boostlook code.cpp-highlight .cpp-string { + color: var(--text-code-literal, #289D30); +} + +.boostlook .doc pre.highlight code.cpp-highlight .cpp-preprocessor, +.boostlook pre.highlight code.cpp-highlight .cpp-preprocessor, +.boostlook code.cpp-highlight .cpp-preprocessor { + color: var(--text-code-preprocessor, #D31FA7); +} + +.boostlook .doc pre.highlight code.cpp-highlight .cpp-comment, +.boostlook pre.highlight code.cpp-highlight .cpp-comment, +.boostlook code.cpp-highlight .cpp-comment { + color: var(--text-code-comment, #A3A38C); + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +.boostlook .doc pre.highlight code.cpp-highlight .cpp-attribute, +.boostlook pre.highlight code.cpp-highlight .cpp-attribute, +.boostlook code.cpp-highlight .cpp-attribute { + color: var(--text-code-attribute, #9E9E9E); +} + +/* Dark mode cpp-highlight overrides */ +html.dark .boostlook .doc pre.highlight code.cpp-highlight, +html.dark .boostlook pre.highlight code.cpp-highlight, +html.dark .boostlook code.cpp-highlight { + color: var(--text-main-text-primary, #f5f6f8); +} + +html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-keyword, +html.dark .boostlook pre.highlight code.cpp-highlight .cpp-keyword, +html.dark .boostlook code.cpp-highlight .cpp-keyword { + color: var(--text-code-keyword, #38DDFF); +} + +html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-string, +html.dark .boostlook pre.highlight code.cpp-highlight .cpp-string, +html.dark .boostlook code.cpp-highlight .cpp-string { + color: var(--text-code-literal, #72FE92); +} + +html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-preprocessor, +html.dark .boostlook pre.highlight code.cpp-highlight .cpp-preprocessor, +html.dark .boostlook code.cpp-highlight .cpp-preprocessor { + color: var(--text-code-preprocessor, #F358C0); +} + +html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-comment, +html.dark .boostlook pre.highlight code.cpp-highlight .cpp-comment, +html.dark .boostlook code.cpp-highlight .cpp-comment { + color: var(--text-code-comment, #FFF173); + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-attribute, +html.dark .boostlook pre.highlight code.cpp-highlight .cpp-attribute, +html.dark .boostlook code.cpp-highlight .cpp-attribute { + color: var(--text-code-attribute, #A3A3A3); +} + +/* Table Headings */ +.boostlook h6:has(+ table) { + margin-left: 1em; +} + +/* Quote Blocks */ +.boostlook .quoteblock, +.boostlook .doc .quoteblock, +.boostlook .verseblock, +.boostlook .doc .verseblock, +.boostlook div.blockquote { + padding: var(--padding-padding-md, 1.125rem) var(--padding-padding-lg, 1.5rem); + border-radius: var(--spacing-size-size-0, 0rem); + border-left: 2px solid var(--border-border-active, #18191b); + background: var(--surface-background-main-surface-primary, #f5f6f8); + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-sm, 1rem); + line-height: var(--typography-line-height-lg, 1.5rem); +} + +/* Add intendation */ +.boostlook .sectionbody .quoteblock, +.boostlook .sectionbody .doc .quoteblock, +.boostlook .sectionbody .verseblock, +.boostlook .sectionbody .doc .verseblock, +.boostlook .sectionbody div.blockquote, +.boostlook .section .quoteblock, +.boostlook .section .doc .quoteblock, +.boostlook .section .verseblock, +.boostlook .section .doc .verseblock, +.boostlook .section div.blockquote { + margin-left: var(--spacing-size-xl, 2rem); +} + +@media screen and (max-width: 767px) { + .boostlook .sectionbody .quoteblock, + .boostlook .sectionbody .doc .quoteblock, + .boostlook .sectionbody .verseblock, + .boostlook .sectionbody .doc .verseblock, + .boostlook .sectionbody div.blockquote, + .boostlook .section .quoteblock, + .boostlook .section .doc .quoteblock, + .boostlook .section .verseblock, + .boostlook .section .doc .verseblock, + .boostlook .section div.blockquote { + margin-left: 0; + } +} + +.boostlook .quoteblock:not(:first-child), +.boostlook .doc .quoteblock:not(:first-child), +.boostlook .verseblock:not(:first-child), +.boostlook .doc .verseblock:not(:first-child), +.boostlook div.blockquote:not(:first-child) { + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook .quoteblock blockquote, +.boostlook .doc .quoteblock blockquote, +.boostlook .verseblock blockquote, +.boostlook .doc .verseblock blockquote, +.boostlook div.blockquote blockquote { + margin: 0; + font: inherit; + color: inherit; +} + +.boostlook .quoteblock blockquote .paragraph, +.boostlook .doc .quoteblock blockquote .paragraph, +.boostlook .verseblock blockquote .paragraph, +.boostlook .doc .verseblock blockquote .paragraph, +.boostlook div.blockquote blockquote p { + font: inherit; +} + +.boostlook .quoteblock blockquote p, +.boostlook .doc .quoteblock blockquote p, +.boostlook .verseblock blockquote p, +.boostlook .doc .verseblock blockquote p { + margin: 0; + font: inherit; + color: inherit; +} + +.boostlook .quoteblock blockquote:before { + content: none; +} + +/* Pagination */ +.boostlook nav.pagination { + border-top: revert; + line-height: initial; + margin: revert; + display: flex; + padding: var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem); + align-items: stretch; + gap: var(--spacing-size-2xs, 0.5rem); +} + +.boostlook nav.pagination > span { + display: flex; + flex-direction: column; + flex: 0 1 50%; + backdrop-filter: blur(8px); + padding-right: revert; + padding-left: revert; + margin-left: revert; +} +.boostlook nav.pagination > span.next { + text-align: right; + margin-left: auto; +} + +.boostlook nav.pagination span::before { + content: none !important; +} + +.boostlook nav.pagination > span a { + /* Container padding + two paddings of arrow icon container + arrow icon width + gap between arrow and content */ + --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-3xs) * 2) + var(--icons-24) + var(--padding-padding-md)); + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 100%; + border-radius: var(--padding-padding-xs, 0.75rem); + border: 1px solid var(--border-border-primary, #e4e7ea); + background: var(--pagination-bg, #fff); + padding: var(--padding-padding-xs, 0.75rem); + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-sm, 1rem); + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + text-decoration: none; + transition: border-color 0.2s ease, background-color 0.2s ease; +} + +.boostlook nav.pagination > span:hover a { + border-color: var(--border-border-blue, #92cbe9); + background: var(--surface-background-main-surface-blue-secondary, #daeef9); +} + +html.dark .boostlook nav.pagination > span:hover a { + border-color: var(--border-border-blue, #92cbe9); + background: var(--colors-primary-850, #1A1C29); +} + +.boostlook nav.pagination > span.prev a { + padding-left: var(--_arrow-based-padding); +} +.boostlook nav.pagination > span.next a { + padding-right: var(--_arrow-based-padding); +} + +@media screen and (min-width: 990px) { + .boostlook nav.pagination > span a { + --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-xs) * 2) + var(--icons-24) + var(--padding-padding-md)); + } +} + +.boostlook nav.pagination > span a::before { + width: auto; + position: static; + color: var(--text-main-text-body-quaternary, #949a9e); + font-size: var(--typography-font-size-2xs, 0.75rem); + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + transform: revert; +} + +.boostlook nav.pagination > span.prev a::before { + content: "Previous"; +} +.boostlook nav.pagination > span.next a::before { + content: "Next"; +} + +.boostlook nav.pagination > span a::after { + --_arrow-size: calc((var(--spacing-size-3xs, 0.25rem) * 2) + var(--icons-24)); + position: absolute; + top: 50%; + display: flex; + width: var(--_arrow-size); + height: var(--_arrow-size); + align-items: center; + justify-content: center; + border-radius: var(--spacing-size-2xs, 0.5rem); + transform: translateY(-50%); +} + +@media screen and (min-width: 990px) { + .boostlook nav.pagination > span a::after { + --_arrow-size: calc((var(--spacing-size-xs, 0.75rem) * 2) + var(--icons-24)); + } +} + +.boostlook nav.pagination > span.prev a::after { + content: var(--icon-arrow-left); + left: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook nav.pagination > span.next a::after { + content: var(--icon-arrow-right); + right: var(--padding-padding-2xs, 0.5rem); +} + +/* Admonitions */ +/* Admonitions — Metalab 2.0 */ +.boostlook #content .admonitionblock, +.boostlook:not(:has(.doc)) div.note, +.boostlook:not(:has(.doc)) div.tip, +.boostlook:not(:has(.doc)) div.important, +.boostlook:not(:has(.doc)) div.caution, +.boostlook:not(:has(.doc)) div.warning, +.boostlook:not(:has(.doc)) div.blurb, +.boostlook:not(:has(.doc)) p.blurb { + padding: var(--spacing-large, 1rem); + border-radius: var(--radius-xxl, 1rem); + border: 1px solid var(--border-border-primary, #e4e7ea); + margin: revert; + background: var(--surface-background-main-base-primary, #fff); +} + +.boostlook #content li .admonitionblock, +.boostlook:not(:has(.doc)) li div.note, +.boostlook:not(:has(.doc)) li div.tip, +.boostlook:not(:has(.doc)) li div.important, +.boostlook:not(:has(.doc)) li div.caution, +.boostlook:not(:has(.doc)) li div.warning, +.boostlook:not(:has(.doc)) li div.blurb, +.boostlook:not(:has(.doc)) li p.blurb { + margin-left: 0; +} + +/* Readme Template Admonitionblock */ +.boostlook:not(:has(.doc)) .notices { + background-image: none !important; +} + +.boostlook #content .admonitionblock > table, +.boostlook:not(:has(.doc)) div.note > table, +.boostlook:not(:has(.doc)) div.tip > table, +.boostlook:not(:has(.doc)) div.important > table, +.boostlook:not(:has(.doc)) div.caution > table, +.boostlook:not(:has(.doc)) div.warning > table, +.boostlook:not(:has(.doc)) div.blurb > table, +.boostlook:not(:has(.doc)) p.blurb > table { + all: revert; + table-layout: fixed; + position: relative; + width: 100%; +} + +.boostlook #content .admonitionblock > table tr, +.boostlook:not(:has(.doc)) div.note tbody, +.boostlook:not(:has(.doc)) div.tip tbody, +.boostlook:not(:has(.doc)) div.important tbody, +.boostlook:not(:has(.doc)) div.caution tbody, +.boostlook:not(:has(.doc)) div.warning tbody, +.boostlook:not(:has(.doc)) div.blurb tbody, +.boostlook:not(:has(.doc)) p.blurb tbody, +.boostlook:not(:has(.doc)) .notices { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; +} + +.boostlook #content .admonitionblock > table tr td { + padding: 0; + border: unset; +} + +.boostlook #content .admonitionblock > table tr td.icon, +.boostlook:not(:has(.doc)) div.note > table tr:first-child th, +.boostlook:not(:has(.doc)) div.tip > table tr:first-child th, +.boostlook:not(:has(.doc)) div.important > table tr:first-child th, +.boostlook:not(:has(.doc)) div.caution > table tr:first-child th, +.boostlook:not(:has(.doc)) div.warning > table tr:first-child th, +.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th, +.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices .heading { + display: flex; + align-items: center; + gap: var(--spacing-size-2xs, 0.5rem); + /* Removes legacy icon */ + background: transparent; +} + +.boostlook:not(:has(.doc)) .notices .heading { + margin: 0; +} + +.boostlook:not(:has(.doc)) div.note > table tr:first-child th, +.boostlook:not(:has(.doc)) div.tip > table tr:first-child th, +.boostlook:not(:has(.doc)) div.important > table tr:first-child th, +.boostlook:not(:has(.doc)) div.caution > table tr:first-child th, +.boostlook:not(:has(.doc)) div.warning > table tr:first-child th, +.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th, +.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th, +.boostlook:not(:has(.doc)) div.note > table tr:first-child th > *, +.boostlook:not(:has(.doc)) div.tip > table tr:first-child th > *, +.boostlook:not(:has(.doc)) div.important > table tr:first-child th > *, +.boostlook:not(:has(.doc)) div.caution > table tr:first-child th > *, +.boostlook:not(:has(.doc)) div.warning > table tr:first-child th > *, +.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th > *, +.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th > *, +.boostlook #content .admonitionblock > table tr td.icon > *, +.boostlook:not(:has(.doc)) .notices .heading { + color: var(--text-main-text-primary, #050816); + font-size: 1rem; + font-weight: 500; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: 100%; + letter-spacing: -0.16px; +} +.boostlook #content .admonitionblock > table tr td.icon > * { + padding: 0; + font-family: var(--font-family-body, "Mona Sans"); +} + +.boostlook #content .admonitionblock > table tr td.icon i.fa::after { + content: attr(title); +} + +.boostlook #content .admonitionblock > table tr td.content, + /* Leagcy Doc */ +.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td, +.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p, +.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td, +.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p, +.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td, +.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p, +.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td, +.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p, +.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td, +.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p, +.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td, +.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p, +.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td, +.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p, + /* Antora Template Correction*/ +.boostlook #content .admonitionblock > table tr td.content p, +.boostlook:not(:has(.doc)) .notices .message p { + color: var(--text-main-text-body-tetriary, #717378); + font-size: var(--typography-font-size-2xs, 0.75rem); + font-variation-settings: "wght" 400, "wdth" 87.5; + line-height: 135%; + letter-spacing: -0.12px; +} + +.boostlook:not(:has(.doc)) .notices .message { + margin: 0; +} + +.boostlook #content .admonitionblock > table code, +.boostlook:not(:has(.doc)) div.note > table code, +.boostlook:not(:has(.doc)) div.tip > table code, +.boostlook:not(:has(.doc)) div.important > table code, +.boostlook:not(:has(.doc)) div.caution > table code, +.boostlook:not(:has(.doc)) div.warning > table code, +.boostlook:not(:has(.doc)) div.blurb > table code, +.boostlook:not(:has(.doc)) p.blurb > table code { + margin: revert; + padding: 0; +} + +/* Note — Metalab 2.0: neutral card */ +.boostlook #content .admonitionblock.note, +.boostlook:not(:has(.doc)) div.note, +.boostlook:not(:has(.doc)) .notices.note { + border-color: var(--stroke-weak, rgba(13 14 15 / 0.1)); + background-color: var(--surface-weak, #fff); +} + +.boostlook #content .admonitionblock.note > table tr td.icon > *, +.boostlook:not(:has(.doc)) div.note > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.note .heading { + color: var(--text-main-text-primary, #18191b); +} + +/* Tip */ +.boostlook #content .admonitionblock.tip, +.boostlook:not(:has(.doc)) div.tip, +.boostlook:not(:has(.doc)) .notices.tip { + border-color: var(--border-border-positive, #f8fefb); + background-color: var(--surface-background-states-surface-positive-primary, #f6fafd); +} +/* .boostlook #content .admonitionblock.tip > table tr td.icon, +.boostlook:not(:has(.doc)) div.tip > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.tip .heading { + background: var(--border-border-positive, #bdeed6); +} */ +.boostlook #content .admonitionblock.tip > table tr td.icon > *, +.boostlook:not(:has(.doc)) div.tip > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.tip .heading { + color: var(--text-main-text-primary, #18191b); +} + +/* Important */ +.boostlook #content .admonitionblock.important, +.boostlook #content .admonitionblock.caution, +.boostlook:not(:has(.doc)) div.important, +.boostlook:not(:has(.doc)) div.caution, +.boostlook:not(:has(.doc)) .notices.important { + border-color: var(--border-border-brand-orange, #ffd897); + background-color: var(--surface-background-states-surface-warning-primary, #fefcf9); +} +/* .boostlook #content .admonitionblock.important > table tr td.icon, +.boostlook #content .admonitionblock.caution > table tr td.icon, +.boostlook:not(:has(.doc)) div.important > table tr:first-child th, +.boostlook:not(:has(.doc)) div.caution > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.important { + background: var(--surface-background-states-surface-warning-tetriary, #ffd4b3); +} */ +.boostlook #content .admonitionblock.important > table tr td.icon > *, +.boostlook #content .admonitionblock.caution > table tr td.icon > *, +.boostlook:not(:has(.doc)) div.important > table tr:first-child th, +.boostlook:not(:has(.doc)) div.caution > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.important { + color: var(--text-main-text-primary, #18191b); +} + +/* Warning */ +.boostlook #content .admonitionblock.warning, +.boostlook:not(:has(.doc)) div.warning, +.boostlook:not(:has(.doc)) .notices.warning { + border-color: var(--border-border-negative, #ffcad2); + background-color: var(--surface-background-states-surface-negative-primary, #fdf1f3); +} +/* .boostlook #content .admonitionblock.warning > table tr td.icon, +.boostlook:not(:has(.doc)) div.warning > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.warning .heading { + background: var(--surface-background-states-surface-negative-tetriary, #ffcad2); +} */ +.boostlook #content .admonitionblock.warning > table tr td.icon > *, +.boostlook:not(:has(.doc)) div.warning > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.warning .heading { + color: var(--text-main-text-primary, #18191b); +} + +/* Dlist-as-admonition: a standalone .dlist with a single .hdlist1 term + (e.g. "Note", "Tip") should render as a card matching admonitionblock. */ +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) { + padding: var(--spacing-large, 1rem); + border-radius: var(--radius-xxl, 1rem); + border: 1px solid var(--stroke-weak, rgba(13 14 15 / 0.1)); + background-color: var(--surface-weak, #fff); + margin-top: var(--padding-padding-sm, 1rem); +} + +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) dl { + gap: var(--spacing-size-3xs, 0.25rem); +} + +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) .hdlist1 { + font-size: 1rem; + font-weight: 500; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: 100%; + letter-spacing: -0.16px; + color: var(--text-main-text-primary, #18191b); +} + +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) dd { + border: none; + padding: 0; + margin-left: 0; + color: var(--text-main-text-body-tetriary, #717378); + font-size: var(--typography-font-size-sm, 0.875rem); + font-variation-settings: "wght" 400, "wdth" 87.5; + line-height: 135%; + letter-spacing: -0.12px; +} + +/* Dlist */ +/* Apply top margin only for root list */ +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist), +.boostlook .dlist dl dt:not(:first-child):not(.dlist .dlist), +.boostlook:not(:has(.doc)) .variablelist:not(:first-child):not(.variablelist .variablelist), +.boostlook:not(:has(.doc)) .variablelist dl dt:not(:first-child):not(.variablelist .variablelist) { + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) { + background-color: var(--surface-background-main-surface-blue-primary, #ebf4f9); + border: 1px solid transparent; /* var(--border-border-blue-primary, #c2e2f4) */ + padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem); + margin-left: var(--spacing-size-xl); +} + +.boostlook #content .colist.arabic > table > tbody > tr td .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) { + margin-left: 0; +} + +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) .hdlist1 { + font-size: var(--typography-font-size-sm, 1rem); + font-variation-settings: "wght" 600, "wdth" 62.5; + line-height: var(--typography-line-height-lg, 1.5rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + font-weight: 600; + color: var(--text-main-text-primary, #18191b) !important; + /*margin-bottom: var(--spacing-size-2xs, 0.5rem);*/ +} +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd a:hover { + color: var(--text-states-text-warning, #FF9442); + cursor: pointer; +} +.boostlook #content .olist.arabic > ol > li table.tableblock:not(:first-child), +.boostlook #content .olist.arabic > ol > li .dlist:not(:first-child):not(.dlist .dlist) { + margin-left: 0; +} +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd a { + color: var(--text-main-text-link-blue, #026a9f); + text-decoration: none; + transition: color 0.3s ease; +} +.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd { + margin: 0; + padding: 0; + border: none; + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-xs, 0.875rem); + font-variation-settings: "wght" 400, "wdth" 87.5; + line-height: var(--typography-line-height-lg, 1.5rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.boostlook .dlist dl, +.boostlook:not(:has(.doc)) .variablelist dl { + display: flex; + flex-direction: column; + gap: var(--spacing-size-2xs, 0.5rem); +} + +/* Where is this used */ +.boostlook .dlist dl dt, +.boostlook:not(:has(.doc)) .variablelist dl dt { + display: block; + width: fit-content; + padding: initial; + border-radius: initial; + border: initial; + /* border-bottom-left-radius: unset; */ + background: initial; + color: var(--text-code-text, #050816); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + margin-bottom: 0; +} + +/* styles for nested list */ +.boostlook .dlist:is(.dlist .dlist) dl dt, +.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dt { + font-size: var(--typography-font-size-sm, 1rem); +} + +.boostlook .dlist dl dt code, +.boostlook:not(:has(.doc)) .variablelist dl dt code { + border: none; + padding: 0; + background: transparent !important; +} + +.boostlook .dlist dl dt .term, +.boostlook:not(:has(.doc)) .variablelist dl dt .term { + font: inherit; + font-weight: inherit; +} + +.boostlook .dlist dl dt code, +.boostlook:not(:has(.doc)) .variablelist dl dt code { + font-variation-settings: "wght" 600, "wdth" 87.5; + font-family: var(--font-family-code, 'Monaspace Neon'); +} + +.boostlook .dlist dl dd, +.boostlook:not(:has(.doc)) .variablelist dl dd { + margin: unset; + margin-top: -1px; + padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-sm, 1rem); + border-radius: var(--spacing-size-size-0, 0rem); + border: 1px solid var(--border-border-primary, #e4e7ea); + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-xs, 0.875rem); + line-height: var(--typography-line-height-lg, 1.5rem); +} + +/* styles for nested list */ +.boostlook .dlist:is(.dlist .dlist) dl dd, +.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dd { + border: none; + padding: initial; +} + +/* styles for block if it has nested list */ +.boostlook .dlist dl dd:has(>.dlist), +.boostlook:not(:has(.doc)) .variablelist dl dd:has(>.variablelist) { + padding: var(--padding-padding-sm, 1rem); +} + +/* apply margin only for top level list */ +.boostlook .dlist dl > dd:not(:is(dl dl dd)), +.boostlook:not(:has(.doc)) .variablelist dl > dd:not(:is(dl dl dd)) { + margin-left: var(--spacing-size-xl); +} + +@media screen and (max-width: 767px) { + .boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) { + margin-left: 0; + } + + .boostlook .dlist dl > dd:not(:is(dl dl dd)), + .boostlook:not(:has(.doc)) .variablelist dl > dd:not(:is(dl dl dd)) { + margin-left: 0; + } +} + +.boostlook .dlist dl dd p, +.boostlook:not(:has(.doc)) .variablelist dl dd p { + font: inherit; + margin: 0; +} + +.boostlook .dlist dl dd em, +.boostlook:not(:has(.doc)) .variablelist dl dd em { + font: inherit; + font-variation-settings: "wght" 500, "wdth" 87.5; +} + +/* Edit Page Link */ +.boostlook .edit-this-page { + color: var(--text-main-text-body-quaternary, #949a9e); + text-align: right; + font-size: var(--typography-font-size-2xs, 0.75rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + padding: 0 var(--padding-padding-2xs, 0.5rem); +} + +.boostlook .edit-this-page a { + color: inherit; + font: inherit; + text-decoration: underline; +} + +html.dark .boostlook .edit-this-page { + color: #CACBCE; +} + +/* Layout Structure */ +.boostlook #header, +.boostlook #content, +.boostlook #footer { + padding-left: var(--main-margin); + padding-right: var(--main-margin); +} + +.boostlook #header { + padding-top: 1.25rem; +} + +.boostlook #footer { + padding-top: var(--padding-padding-sm); + padding-bottom: calc(var(--padding-padding-sm) + env(safe-area-inset-bottom, 0px)); + color: var(--text-main-text-body-quaternary, #949a9e); + font-size: var(--typography-font-size-xs); + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Unordered Lists */ +/* Reset Legacy and Common */ +.boostlook .doc .dlist .dlist, +.boostlook .doc .dlist .olist, +.boostlook .doc .dlist .ulist, +.boostlook .doc .olist .dlist, +.boostlook .doc .olist .olist, +.boostlook .doc .olist .ulist, +.boostlook .doc .olist li + li, +.boostlook .doc .ulist .dlist, +.boostlook .doc .ulist .olist, +.boostlook .doc .ulist .ulist, +.boostlook .doc .ulist:not(.tablist) li + li, +.boostlook:not(:has(.doc)) div.orderedlist li + li { + margin-top: var(--padding-padding-3xs, 0.25rem); +} + +.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist { + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook .doc .dlist .dlist, +.boostlook .doc .dlist .olist, +.boostlook .doc .dlist .ulist, +.boostlook .doc .olist .dlist, +.boostlook .doc .olist .olist, +.boostlook .doc .olist .ulist, +.boostlook .doc .ulist .dlist, +.boostlook .doc .ulist .olist, +.boostlook .doc .ulist .ulist, +.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist { + margin-bottom: var(--padding-padding-2xs, 0.5rem); +} + +/* Default List */ +.boostlook div.itemizedlist:has(> ul.itemizedlist):not(:first-child), +.boostlook :not(div.itemizedlist) > ul.itemizedlist, +.boostlook .ulist:not(:first-child):not(.tablist), +.boostlook .ulist:not(:first-child).disc, +.boostlook#libraryReadMe ul:not(:first-child), + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]), +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) { + margin-top: var(--padding-padding-xs, 0.75rem); +} + +.boostlook ul.itemizedlist, +.boostlook .ulist:not(.tablist) > ul, +.boostlook .ulist.disc > ul, +.boostlook#libraryReadMe ul, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]), +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) { + list-style: none; + padding: 0; +} + +.boostlook ul.itemizedlist { + list-style: none !important; +} + +.boostlook ul.itemizedlist > li, +.boostlook .ulist:not(.tablist) > ul > li, +.boostlook .ulist.disc > ul > li, +.boostlook#libraryReadMe ul > li, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class])> li, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class])> li { + position: relative; + padding-left: 1.5rem; + line-height: var(--typography-line-height-lg, 1.5rem); +} + +.boostlook ul.itemizedlist > li, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ul:not([class]) li, +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ol:not([class]) li, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content ul:not([class]) li, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content ol:not([class]) li, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ul:not([class]) li, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ol:not([class]) li { + font: inherit; + line-height: var(--typography-line-height-lg, 1.5rem); +} + +.boostlook ul.itemizedlist > li + li, +.boostlook .ulist:not(.tablist) > ul > li + li, +.boostlook .ulist.disc > ul > li + li, +.boostlook#libraryReadMe ul > li + li, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li + li, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li + li, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li + li { + margin-top: var(--padding-padding-3xs, 0.25rem); +} + +.boostlook ul.itemizedlist > li::before, +.boostlook .ulist:not(.tablist) > ul > li::before, +.boostlook .ulist.disc > ul > li::before, +.boostlook#libraryReadMe ul > li::before, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li::before, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li::before, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li::before { + content: "\2022"; + position: absolute; + left: 0; + top: 0; + width: 24px; + height: calc(var(--typography-font-size-sm, 1rem) * 1.2); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-main-text-primary, #18191b); +} + +/* Link-list sections (See Also, Next Steps, etc.): blue bullets for the + last .sect1 (no following .sect1 sibling) or its last .sect2, when the + final .ulist contains only link items. */ +.boostlook #content .doc .sect1:not(:has(~ .sect1)) > .sectionbody > .ulist:last-child > ul > li:has(> p > a:only-child), +.boostlook #content .doc .sect1:not(:has(~ .sect1)) .sect2:last-child > .ulist:last-child > ul > li:has(> p > a:only-child) { + padding-left: 1.25rem; +} + +.boostlook #content .doc .sect1:not(:has(~ .sect1)) > .sectionbody > .ulist:last-child > ul > li:has(> p > a:only-child)::before, +.boostlook #content .doc .sect1:not(:has(~ .sect1)) .sect2:last-child > .ulist:last-child > ul > li:has(> p > a:only-child)::before { + width: 16px; + color: var(--text-main-text-link-blue, #026a9f); +} + +/* Link-only list items: blue bullets when li contains only a link */ +.boostlook .ulist:not(.tablist) > ul > li:has(> p > a:only-child)::before { + color: var(--text-main-text-link-blue, #026a9f) !important; +} + +/* Unresolved xref links: red bullet to match the red link text */ +.boostlook #content .doc .sect1:not(:has(~ .sect1)) > .sectionbody > .ulist:last-child > ul > li:has(> p > a.unresolved)::before, +.boostlook #content .doc .sect1:not(:has(~ .sect1)) .sect2:last-child > .ulist:last-child > ul > li:has(> p > a.unresolved)::before { + color: #c00; +} + +/* Ordered Lists */ +.boostlook .olist.arabic > ol, +.boostlook .olist.loweralpha > ol, +.boostlook:not(:has(.doc)) .orderedlist > ol { + list-style: none; + counter-reset: list-counter; + padding-left: 0; + padding-bottom: 1rem; +} + +/* Arabic Ordered List */ +.boostlook .olist.arabic > ol > li, +.boostlook:not(:has(.doc)) .orderedlist > ol > li { + position: relative; + padding-left: 2rem; + counter-increment: list-counter; + line-height: var(--typography-line-height-lg, 1.5rem); +} + +.boostlook .olist.arabic > ol > li::before, +.boostlook:not(:has(.doc)) .orderedlist > ol > li::before { + content: counter(list-counter)"."; + position: absolute; + left: 0; + top: -4px; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-sm, 1rem); + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ +} + +.boostlook .olist.arabic > ol > li::after, +.boostlook:not(:has(.doc)) .orderedlist > ol > li::after { + content: ""; + position: absolute; + left: 1px; + top: 0px; + width: 30px; + height: 24px; + /*border: 1px solid var(--border-border-tetriary);*/ + /* Mask to make square brackets for marker to make it look like [ 01 ] */ + /*clip-path: polygon(0 0, 3px 0, 3px 3px, 27px 3px, 27px 0, 30px 0, 30px 24px, 27px 24px, 27px 21px, 3px 21px, 3px 24px, 0 24px);*/ +} + +/* LowerAlfa Ordered List */ +.boostlook .olist.loweralpha > ol > li { + position: relative; + padding-left: 2rem; + counter-increment: list-counter; + line-height: var(--typography-line-height-lg, 1.5rem); +} + +.boostlook .olist.loweralpha > ol > li::before { + content: counter(list-counter, lower-alpha) ". "; + position: absolute; + left: 0; + top: 0; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-xs, 0.875rem); + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--Typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Conum */ +.boostlook .doc .conum[data-value] { + position: relative; + border: none; + border-radius: 100%; + display: inline-flex; + align-items: center; + justify-content: center; + font-family: "Mona Sans"; + font-style: normal; + font-variation-settings: "wght" 350, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); + font-size: var(--typography-font-size-sm, 1rem); + text-align: center; + width: 32px; + height: 32px; + letter-spacing: var(--spacing-size-size-0, 0rem); + text-indent: unset; + color: var(--text-main-text-primary, #18191b); + text-align: center; + /*background: var(--surface-background-main-surface-secondary, #e4e7ea);*/ +} +.boostlook .doc code .conum[data-value] { + background: transparent; + width: auto; + height: auto; + font-size: inherit; + font-family: inherit; + line-height: inherit; + color: var(--text-main-text-primary, #18191b); +} + +.boostlook .doc .conum[data-value]::after { + content: attr(data-value)"."; + font: inherit; +} + +.boostlook .doc .conum[data-value] + b { + display: none; +} + +/* Collist */ +.boostlook .colist.arabic { + margin: revert; +} +.boostlook .colist.arabic > table { + width: 100%; + border-collapse: collapse; + color: var(--text-main-text-body-primary); +} + +.boostlook .colist.arabic > table > tbody > tr td, +.boostlook .colist.arabic > table > tr td { + /* Reset Legacy */ + padding: revert; + padding-top: var(--padding-padding-3xs, 0.25rem); + padding-bottom: 0; + font-size: var(--typography-font-size-sm, 1rem); +} + +.boostlook .colist.arabic > table > tbody > tr > :first-child, +.boostlook .colist.arabic > table > tr > :first-child { + padding-left: 0; + padding-right: 0; + vertical-align: top; + /* to make first column fit its content */ + width: 1%; + white-space: nowrap; +} + +.boostlook .colist.arabic > table > tbody > tr > :first-child:has(.conum), +.boostlook .colist.arabic > table > tr > :first-child:has(.conum) { + padding-top: 0; +} + +/* Tables */ +/* Reset Antora Table Styles */ +.boostlook #content table.tableblock tr, +.boostlook #content table.tableblock td, +.boostlook #content table.tableblock th, +.boostlook #content table.tableblock thead, +.boostlook #content table.tableblock tbody, +.boostlook #content table.tableblock tfoot, +.boostlook #content table.tableblock caption, +.boostlook #content table.tableblock colgroup, +.boostlook #content table.tableblock col, +.boostlook #content table.tableblock, +.boostlook:not(:has(.doc)) table.table tr, +.boostlook:not(:has(.doc)) table.table td, +.boostlook:not(:has(.doc)) table.table th, +.boostlook:not(:has(.doc)) table.table thead, +.boostlook:not(:has(.doc)) table.table tbody, +.boostlook:not(:has(.doc)) table.table tfoot, +.boostlook:not(:has(.doc)) table.table caption, +.boostlook:not(:has(.doc)) table.table colgroup, +.boostlook:not(:has(.doc)) table.table col, +.boostlook:not(:has(.doc)) table.table, +.boostlook#libraryReadMe > table, +.boostlook#libraryReadMe > table tr, +.boostlook#libraryReadMe > table td, +.boostlook#libraryReadMe > table th, +.boostlook#libraryReadMe > table thead, +.boostlook#libraryReadMe > table tbody, +.boostlook#libraryReadMe > table tfoot, +.boostlook#libraryReadMe > table caption, +.boostlook#libraryReadMe > table colgroup, +.boostlook#libraryReadMe > table col { + all: unset; + display: revert; +} + + +.boostlook #content table.tableblock:not(:first-child), +.boostlook:not(:has(.doc)) .table:not(:first-child), +.boostlook#libraryReadMe > table:not(:first-child) { + margin-top: var(--padding-padding-xs, 0.75rem); +} + +.boostlook #content table.tableblock.stretch, +.boostlook:not(:has(.doc)) table.table, +.boostlook#libraryReadMe > table.stretch { + min-width: 100%; +} + +/* Horizontal scroll for tables on mobile */ +@media screen and (max-width: 767px) { + .boostlook #content table.tableblock, + .boostlook:not(:has(.doc)) table.table, + .boostlook#libraryReadMe > table { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + max-width: 100%; + } + + .boostlook #content table.tableblock.stretch, + .boostlook:not(:has(.doc)) table.table, + .boostlook#libraryReadMe > table.stretch { + min-width: unset; + } + + .boostlook #content table.tableblock colgroup, + .boostlook:not(:has(.doc)) table.table colgroup { + display: none; + } + + .boostlook #content table.tableblock th, + .boostlook #content table.tableblock td, + .boostlook:not(:has(.doc)) table.table th, + .boostlook:not(:has(.doc)) table.table td, + .boostlook#libraryReadMe > table th, + .boostlook#libraryReadMe > table td { + min-width: 100px !important; + } +} + +.boostlook #content table.tableblock caption, +.boostlook:not(:has(.doc)) div.table .title { + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-variation-settings: "wght" 600, "wdth" 87.5; + line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */ + padding: 0; + padding-bottom: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook #content table.tableblock caption > *, +.boostlook:not(:has(.doc)) div.table .title > * { + font: inherit; + font-variation-settings: "wght" 500, "wdth" 87.5; + text-decoration: none; +} + +.boostlook:not(:has(.doc)) div.table .title { + padding-bottom: var(--padding-padding-2xs, 0.5rem) !important; +} + +/* Table cells — Metalab 2.0 */ +.boostlook #content table.tableblock th, +.boostlook #content table.tableblock td, +.boostlook:not(:has(.doc)) table.table th, +.boostlook:not(:has(.doc)) table.table td, +.boostlook#libraryReadMe > table th, +.boostlook#libraryReadMe > table td { + padding: 12px 16px; + min-height: 28px; + text-align: left; + border-top: 1px solid var(--table-stroke, #0508161A); + border-left: 1px solid var(--table-stroke, #0508161A); +} + +.boostlook #content table.tableblock th:last-child, +.boostlook #content table.tableblock td:last-child, +.boostlook:not(:has(.doc)) table.table th:last-child, +.boostlook:not(:has(.doc)) table.table td:last-child, +.boostlook#libraryReadMe > table th:last-child, +.boostlook#libraryReadMe > table td:last-child { + border-right: 1px solid var(--table-stroke, #0508161A); +} + +.boostlook #content table.tableblock tr:last-child td, +.boostlook:not(:has(.doc)) table.table tr:last-child td, +.boostlook#libraryReadMe > table tr:last-child td { + border-bottom: 1px solid var(--table-stroke, #0508161A); +} + +.boostlook #content table.tableblock:has(thead) th:first-child, +.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:first-child, +.boostlook:not(:has(.doc)) table.table:has(thead) th:first-child, +.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:first-child, +.boostlook#libraryReadMe > table:has(thead) th:first-child, +.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:first-child { + /*border-top-left-radius: var(--spacing-size-2xs, 0.5rem);*/ +} + +.boostlook #content table.tableblock:has(thead) th:last-child, +.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:last-child, +.boostlook:not(:has(.doc)) table.table:has(thead) th:last-child, +.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:last-child, +.boostlook#libraryReadMe > table:has(thead) th:last-child, +.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:last-child { + /*border-top-right-radius: var(--spacing-size-2xs, 0.5rem);*/ +} + +.boostlook #content table.tableblock tr:last-child td:first-child, +.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child, +.boostlook#libraryReadMe > table tr:last-child td:first-child { + /*border-bottom-left-radius: var(--spacing-size-2xs, 0.5rem);*/ +} + +.boostlook #content table.tableblock tr:last-child td:last-child, +.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child, +.boostlook#libraryReadMe > table tr:last-child td:last-child { + /*border-bottom-right-radius: var(--spacing-size-2xs, 0.5rem);*/ +} + +/* Table header — Metalab 2.0: Surface-Mid bg, 12px per Figma */ +.boostlook #content .doc table.tableblock th, +.boostlook #content .doc table.tableblock th strong, +.boostlook #content .doc table.tableblock:not(:has(thead)) > tbody > tr:first-child > td, +.boostlook:not(:has(.doc)) #content table.tableblock th, +.boostlook:not(:has(.doc)) #content table.tableblock th strong, +.boostlook:not(:has(.doc)) #content table.tableblock:not(:has(thead)) > tbody > tr:first-child > td, +.boostlook:not(:has(.doc)) table.table th, +.boostlook:not(:has(.doc)) table.table th strong, +.boostlook#libraryReadMe > table th, +.boostlook#libraryReadMe > table th strong { + background-color: var(--table-header-bg, #F7F7F8); + color: var(--text-main-text-primary, #050816); + font-size: var(--typography-font-size-xs, 0.875rem); + font-variation-settings: "wght" 700, "wdth" 87.5; + line-height: 140%; + letter-spacing: -0.12px; +} + +/* Table data — Metalab 2.0: 12px per Figma, Text-Secondary */ +.boostlook #content .doc table.tableblock td, +.boostlook:not(:has(.doc)) #content table.tableblock td, +.boostlook:not(:has(.doc)) table.table td, +.boostlook#libraryReadMe > table td { + background-color: var(--table-bg, #fff); + color: var(--text-main-text-body-secondary, #585A64); + font-size: var(--typography-font-size-2xs, 0.75rem); + font-style: normal; + line-height: 140%; + letter-spacing: -0.12px; +} + +.boostlook#libraryReadMe > table td { + vertical-align: middle; +} + +.boostlook #content table.tableblock td.valign-top, +.boostlook:not(:has(.doc)) table.table td.valign-top, +.boostlook#libraryReadMe > table td.valign-top { + vertical-align: top; +} + +.boostlook #content table.tableblock td.valign-bottom, +.boostlook:not(:has(.doc)) table.table td.valign-bottom, +.boostlook#libraryReadMe > table td.valign-bottom { + vertical-align: bottom; +} + +.boostlook #content table.tableblock td.valign-center, +.boostlook:not(:has(.doc)) table.table td.valign-center, +.boostlook#libraryReadMe > table td.valign-center { + vertical-align: middle; +} + +.boostlook #content table.tableblock td.halign-left, +.boostlook:not(:has(.doc)) table.table td.halign-left, +.boostlook#libraryReadMe > table td.halign-left { + text-align: left; +} + +.boostlook #content table.tableblock td.halign-center, +.boostlook:not(:has(.doc)) table.table td.halign-center, +.boostlook#libraryReadMe > table td.halign-center { + text-align: center; +} + +.boostlook #content table.tableblock th p, +.boostlook #content table.tableblock td p, +.boostlook:not(:has(.doc)) table.table th p, +.boostlook:not(:has(.doc)) table.table td p, +.boostlook#libraryReadMe > table th p, +.boostlook#libraryReadMe > table td p { + font: inherit; + color: inherit; +} + +.boostlook #content table.tableblock td strong, +.boostlook:not(:has(.doc)) table.table td strong, +.boostlook#libraryReadMe > table td strong { + font-variation-settings: "wght" 600, "wdth" 87.5; +} + +.boostlook #content table.tableblock td code, +.boostlook:not(:has(.doc)) table.table td code, +.boostlook#libraryReadMe > table td code { + background: transparent !important; + padding: 0; + border: none; + font-size: var(--typography-font-size-2xs, 0.75rem); +} + +.boostlook #content table.tableblock .footnotes tr td, +.boostlook:not(:has(.doc)) table.table .footnotes tr td { + border: none; + border-radius: 0; + padding: var(--padding-padding-xs) 0; +} + +/* Image Styles */ +.boostlook .doc .imageblock, +.boostlook .doc .videoblock { + display: flex; + flex-direction: column; + align-items: center; +} + +.boostlook:not(#libraryReadMe) .image:has(> img), +.boostlook .content:has(> img), +.boostlook .mediaobject:has(> embed) { + display: flex; + padding: var(--padding-padding-md, 1.125rem); + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: var(--spacing-size-xs, 0.75rem); + background: var(--surface-background-main-surface-primary, #f5f6f8); + width: 100%; + margin-top: var(--padding-padding-xs, 0.75rem); +} + +.boostlook:not(#libraryReadMe) .image:has(> img), +.boostlook .content:has(> img) { + background-color: transparent; +} + +.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img, > object) { + display: inline-block; + vertical-align: text-bottom; + line-height: 0; +} + +.doc ul.checklist p>i.fa-check-square-o:first-child, .doc ul.checklist p>i.fa-square-o:first-child { + display: none; +} + +.boostlook .doc .imageblock .content:has(img) { + background-color: transparent; + padding-left: 0; + padding-right: 0; +} + +/*----------------- Global Styles for .boostlook end -----------------*/ + +/* ----------- Scrollbars Styles Start ------------- */ + +/** + * + * Scrollbar Styling + * + * This stylesheet provides comprehensive scrollbar customization for different contexts. + * + * Features: + * 1. Global Scrollbar Styles: + * - Applies thin scrollbar width and custom colors to the HTML element. + * - Customizes scrollbar appearance for elements within the `.boostlook` class. + * + * 2. Media Query Adjustments: + * - For screens with a minimum width of 768px, further customizes scrollbar colors for specific elements. + * - Changes scrollbar thumb color on hover for better visibility. + * + * 3. Webkit Scrollbar Customization: + * - Sets the width and height of the scrollbar. + * - Customizes the scrollbar track and thumb with specific colors and border-radius. + * - Adjusts scrollbar appearance for elements within the `.boostlook` class and its descendants. + * + * 4. Hover Effects: + * - Changes the scrollbar thumb color on hover for better user interaction. + * + */ + +@supports (scrollbar-width: thin) { + /* HTML Matches its scroll background to content background */ + html { + scrollbar-width: thin; + scrollbar-color: var(--border-border-tetriary, #afb3b6) var(--surface-background-main-base-primary, #fff); + } + + .boostlook, + .boostlook *, + .boostlook pre, + .boostlook code, + .boostlook:has(:not(.doc)) div.table .table-contents { + scrollbar-width: thin; + scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent; + } + + @media screen and (min-width: 768px) { + .boostlook pre, + .boostlook code, + .boostlook:has(:not(.doc)) div.table .table-contents { + scrollbar-width: thin; + scrollbar-color: transparent transparent; + } + + .boostlook pre:hover, + .boostlook code:hover, + .boostlook:has(:not(.doc)) div.table .table-contents:hover { + scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent; + } + } +} + +html::-webkit-scrollbar, +.boostlook::-webkit-scrollbar, +.boostlook *::-webkit-scrollbar { + width: 8px !important; + height: 8px !important; +} + +html::-webkit-scrollbar-track { + background: var(--surface-background-main-base-primary, #fff); + border-radius: var(--spacing-size-2xs, 0.5rem); +} + +.boostlook::-webkit-scrollbar-track, +.boostlook *::-webkit-scrollbar-track, +.boostlook pre::-webkit-scrollbar-track, +.boostlook code::-webkit-scrollbar-track, +.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-track { + width: 6px; + background: transparent; + border-radius: var(--spacing-size-2xs, 0.5rem); +} + +html::-webkit-scrollbar-thumb, +.boostlook::-webkit-scrollbar-thumb, +.boostlook *::-webkit-scrollbar-thumb, +.boostlook pre::-webkit-scrollbar-thumb, +.boostlook code::-webkit-scrollbar-thumb, +.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb { + width: 6px; + background: var(--border-border-tetriary, #afb3b6); +} + +@media screen and (min-width: 768px) { + .boostlook pre::-webkit-scrollbar-thumb, + .boostlook code::-webkit-scrollbar-thumb, + .boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb { + background: transparent; + } + + .boostlook pre:hover::-webkit-scrollbar-thumb, + .boostlook code:hover::-webkit-scrollbar-thumb, + .boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb { + background-color: var(--border-border-tetriary, #afb3b6); + } +} + +.boostlook .doc pre, +.boostlook p code, +.boostlook table code, +.boostlook p tt, +.boostlook p kbd, +.boostlook p samp, +.boostlook p pre, +.boostlook:not(:has(.doc)) pre, +.boostlook code, +.boostlook pre code, +.boostlook .doc .content pre code, +.boostlook#libraryReadMe pre code { + overflow-x: auto; +} + +/* ----------- Scrollbars Styles End ------------- */ + +/* Template-specific Adjustments */ + +/* Hide root scrollbars for Antora template */ +html:has(.article > .boostlook) { + height: 100vh; + height: -webkit-fill-available; + height: 100dvh; + overflow: hidden; +} + +/* Mobile: remove fixed height + overflow:hidden that conflicts with iOS Safari dynamic toolbar */ +@media (hover: none) and (pointer: coarse) { + html:not(.is-clipped--nav):has(.article > .boostlook) { + height: auto; + overflow: visible; + } +} + +/* Iframe container scrollbar handling */ +html:has(#docsiframe) { + overflow-y: hidden; +} + +/* Chrome/Edge scrollbar for iframe container */ +html:has(#docsiframe)::-webkit-scrollbar { + width: 0; + height: 0; +} + +/* Antora template - Scrollable content area */ +.boostlook #content:has(> .doc) { + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +/* Mobile: extra bottom padding to clear iOS Safari toolbar */ +@media (hover: none) and (pointer: coarse) { + .boostlook #content:has(> .doc) { + padding-bottom: 3.5rem; + } +} + +/* Asciidoc template - Content overflow handling */ +.boostlook:has(#content > .sect1) { + overflow-y: auto; + height: 100vh; + height: 100dvh; +} + +/* Table Container */ +.boostlook .content div:has(> table), +.boostlook .doc table.tableblock, +.boostlook #content .sect3:has(.tableblock) { + overflow-x: auto !important; +} + +/* Article Layout */ +.article.toc2.toc-left { + height: 100vh; + height: 100dvh; + /* Simplified: always use offset behavior, never center */ + margin-left: var(--main-max-width-leftbar); + background: var(--surface-background-main-base-primary, #fff); + position: relative; + overflow-y: auto; +} + +/* TOC Common start */ +/* Background Colors */ +.boostlook #toc.toc2, +.boostlook #header:not(:has(.nav-container)), +.boostlook #content, +.boostlook #footer { + background: var(--surface-background-main-base-primary, #fff); +} +/* TOC Scrolling */ +.boostlook #toc.toc2 { + overflow-y: auto; + scrollbar-color: inherit; +} +/* TOC Positioning */ +.boostlook #toc.toc2, +#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active, +#antora-template-wrapper:not(:has(article.doc)) #toc.toc2.is-active, +div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook)) #toc.toc2.is-active { + position: static; +} + +/* TOC Toggle Button */ +.boostlook #toggle-toc { + visibility: hidden; + height: 0; + width: 0; +} + +/* TOC Navigation Menu */ +.boostlook #toc ul, +.boostlook:not(:has(.doc)) div.toc dd { + margin: 0; + padding: 0 0 0 var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem); + color: var(--text-main-text-body-secondary, #494d50); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + line-height: var(--typography-line-height-md, 1.25rem); + list-style: none; + box-sizing: border-box; + position: relative; + z-index: 0; +} + +.boostlook #toc .nav-menu > .nav-list, +.boostlook #toc .nav-menu > .nav-list > .nav-list, +.boostlook #toc > ul.sectlevel1 { + padding-left: 0; +} + +.boostlook .nav-menu .nav-list li, +.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)), +.boostlook #toc > ul.sectlevel1 li:has(> ul) a, +.boostlook:not(:has(.doc)) div.toc dt { + position: relative; + padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem) var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem); +} + +.boostlook .nav-menu .nav-list .nav-link { + display: inline-block; + font-size: var(--typography-font-size-xs); + color: var(--text-main-text-body-secondary, #494d50); + text-decoration: none; + padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem) var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem); + border-radius: var(--padding-padding-3xs, 0.25rem); +} + +.boostlook .nav-menu li[data-depth="1"]:not(:has(> .nav-item-toggle)) > .nav-link { + color: var(--text-main-text-primary, #18191b); + font-variation-settings: "wght" 600, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.boostlook .nav-menu .nav-list li:has(.nav-text), +.boostlook .nav-menu .nav-list li[data-depth="1"]:not(:has(> .nav-item-toggle)), +.boostlook #toc > ul.sectlevel1 li:has(> ul):not(:first-of-type) { + margin-top: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem); +} + +.boostlook .nav-menu .nav-list li[data-depth="1"]:not(:has(> .nav-item-toggle)) { + padding-left: 0; +} + +.boostlook .nav-text, +.boostlook #toc > ul.sectlevel1 li:has(> ul) > a, +.boostlook #toc > ul.sectlevel1 > li:not(:has(> ul)) > a, +.boostlook .nav-menu .nav-item:has(> .nav-item-toggle) > .nav-link { + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-xs); + font-variation-settings: "wght" 600, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); + padding-left: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Section separator lines */ +.boostlook .nav-menu > .nav-list > .nav-item, +.boostlook .nav-menu .nav-item:has(> .nav-text), +.boostlook .nav-menu .nav-item:has(> .nav-item-toggle), +.boostlook .nav-menu li[data-depth="1"]:not(:has(> .nav-item-toggle)) { + border-top: 1px solid var(--border-border-primary, #e4e7ea); + margin-top: 0; + padding-top: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem); + padding-bottom: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem); +} + +.boostlook .nav-menu > .nav-list > .nav-item:first-child, +.boostlook .nav-menu > .nav-list > .nav-list > li[data-depth="1"]:first-child { + border-top: none; + margin-top: 0; +} + +/* Table of Contents Links */ +.boostlook #toc a, +.boostlook:not(:has(.doc)) div.toc a { + color: var(--text-main-text-body-secondary, #494d50); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + line-height: var(--typography-line-height-sm, 1rem); /* 142.857% */ + text-decoration: none; +} + +/* On-page TOC (right side): underline links per Figma */ +.boostlook #toc:not(.toc2) > ul.sectlevel1 a, +.boostlook:not(:has(.doc)) div.toc a { + text-decoration: underline; + text-underline-offset: 2px; +} + +.boostlook #toc a:hover, +.boostlook #toc a:focus, +.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:hover, +.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:focus, +.boostlook:not(:has(.doc)) div.toc a:hover, +.boostlook:not(:has(.doc)) div.toc a:focus { + color: var(--text-main-text-link-blue-secondary, #0077B8); + text-decoration: none; +} + +.boostlook .nav-menu .nav-link:hover, +.boostlook .nav-menu .nav-link:focus { + color: var(--text-main-text-primary, #18191b); +} + +/* +.boostlook #toc .nav-link:visited:not(:hover), +.boostlook #toc .sectlevel1 li:not(:has(> ul)) a:visited:not(:hover), +.boostlook:not(:has(.doc)) div.toc a:visited:not(:hover) { + color: var(--text-main-text-link-viewed, #62b3dd); +} +*/ + +.boostlook .nav-list li[data-depth]:not([data-depth="1"]), +.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li, +.boostlook:not(:has(.doc)) div.toc dd dt { + margin-left: calc(var(--leftbar-paddings-leftbar-padding-2xs) * -1); +} + +.boostlook .nav-list li[data-depth]:not([data-depth="1"]):hover::before, +.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)):hover::before, +.boostlook:not(:has(.doc)) div.toc dd dt:hover::before { + background-color: var(--border-border-blue-hover, #329cd2); + isolation: isolate; + z-index: 1; +} + +/* Navigation Menu Title */ +.boostlook #toc #toctitle, +.boostlook .nav-menu h3.title { + padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem); + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-sm, 0.875rem); + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + font-variation-settings: "wght" 600, "wdth" 87.5; +} + +/* TOC code in links */ +.boostlook #toc a code, +.boostlook:not(:has(.doc)) div.toc a code { + /* slightly reduce code elements font size in side menu */ + font-size: 0.96em; + display: inline; + background: none !important; + padding: 0; + border: none; + color: inherit; + transition: none; +} + +/* Content */ +.boostlook #content .doc, +.boostlook #content > .sect1, +.boostlook #header > *, +.boostlook #footer > * { + max-width: var(--main-content-width); + margin-left: 0; +} + +.boostlook #preamble + .sect1, +.boostlook .doc .sect1 + .sect1 { + margin-top: revert; +} + +/* Responsive Design */ +@media screen and (min-width: 768px) { + .article.toc2.toc-left { + padding: 0 1rem 0 1rem; + } + + .boostlook #toggle-toc { + visibility: visible; + height: auto; + width: auto; + } + + .boostlook #toc.toc2 { + position: fixed; + width: var(--main-max-width-leftbar); + left: 0; + top: 0; + z-index: 1000; + height: 100vh; + height: 100dvh; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + visibility: visible; + } + + .boostlook #toc.toc2:not(.nav-container) { + padding: 1rem 1.5rem; + } + + .boostlook #toc.toc2:not(.nav-container):has(#toggle-toc) { + /* Extra left padding if toc toggle exists */ + padding: 1rem 1.5rem 1rem 2.2rem; + } + + + /* TOC Toggle Button */ + .boostlook #toggle-toc { + position: fixed; + top: 2rem; + left: 1rem; + background-color: var(--surface-background-main-base-primary); + box-shadow: 0 0px 3px var(--surface-background-main-surface-transparent-inverse); + border: 0; + padding: 0; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M400-240l240-240-240-240-56%2056%20184%20184-184%20184%2056%2056Z%22%2F%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-position: center; + border-radius: var(--radius-xxl, 1rem); + height: 2rem; + width: 2rem; + text-indent: -9999px; + z-index: 1001; + } + + /* Hidden TOC */ + html.toc-hidden .boostlook { + margin-left: 0; + } + + html.toc-hidden .boostlook #toggle-toc { + left: 2px; + } + + /* Visible TOC */ + html.toc-visible .boostlook #toggle-toc { + left: 2px; + background-color: var(--surface-background-main-base-primary); + } + + html.toc-visible .boostlook { + margin-left: 0; + } + + html.toc-hidden .boostlook #toc.toc2 { + visibility: hidden; + } + + html.toc-visible #toc.toc2 { + opacity: 1; + visibility: visible; + /* width: 250px; + padding-left: 1.5rem; */ + } + + /* TOC Shadow States */ + html.toc-visible:not(.toc-pinned) #toc.toc2 { + box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.1); + } + + /* TOC Pin States */ + html.toc-visible.toc-pinned #toggle-toc { + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M560-240%20320-480l240-240%2056%2056-184%20184%20184%20184-56%2056Z%22%2F%3E%3C%2Fsvg%3E"); + } + + /* html.toc-visible.toc-pinned .boostlook { + margin-left: var(--main-max-width-leftbar); + } */ +} +/* TOC Collapsible Sections (Asciidoctor) */ + +/* Section separator lines for collapsible items and top-level leaf items */ +.boostlook #toc > ul.sectlevel1 > li:has(> ul), +.boostlook #toc > ul.sectlevel1 > li:not(:has(> ul)) { + border-top: 1px solid var(--border-border-primary, #e4e7ea); + margin-top: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem); + padding-top: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem); + padding-bottom: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem); +} + +.boostlook #toc > ul.sectlevel1 > li:has(> ul):first-child, +.boostlook #toc > ul.sectlevel1 > li:not(:has(> ul)):first-child { + border-top: none; + margin-top: 0; + padding-top: 0; +} + +/* Flex layout for items with toggle */ +.boostlook #toc li.nav-item { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Nested list takes full width below header */ +.boostlook #toc li.nav-item > ul { + flex-basis: 100%; + order: 2; +} + +/* Toggle button styling */ +.boostlook #toc .nav-item-toggle { + background: none; + border: none; + outline: none; + width: 1.25rem; + height: 1.25rem; + padding: 0; + position: static; + margin-left: 0; + margin-top: 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + order: 1; + transform: none; +} + +/* Down-pointing caret (collapsed) */ +.boostlook #toc .nav-item-toggle::after { + content: ""; + display: block; + width: 1rem; + height: 1rem; + background-color: var(--text-main-text-body-secondary, #494d50); + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain; +} + +/* Up-pointing caret (expanded) */ +.boostlook #toc li.nav-item.is-active > .nav-item-toggle::after { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E"); +} + +/* Collapsed state — hide child list */ +.boostlook #toc li.nav-item:not(.is-active) > ul { + display: none; +} + +/* TOC Common End */ + +/*----------------- Styles specific to AsciiDoctor content start -----------------*/ + +/** + * AsciiDoctor-Specific Styles + * Styles that apply specifically to content generated by AsciiDoctor. + * These styles handle: + * 1. Article layout and structure + * 2. Table of contents (TOC) styling + * 3. Content formatting + * 4. Responsive design adjustments + */ + +/* Header Adjustments */ +.boostlook #header > h1 { + margin-top: 0; +} + +.boostlook #header .author { + display: inline-block; + margin-top: var(--padding-padding-md, 1.125rem); + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-lg, 1.25rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-xl, 1.75rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Rouge — reset font-style so only comments are italic (handled by 07-global-code.css) */ +.boostlook pre.rouge code span { + font-style: normal; +} + +/* Toctitle flex layout for theme toggle */ +.boostlook #toctitle { + display: flex; + align-items: center; + justify-content: space-between; +} + +/* TOC leaf links — match Antora .nav-link styling for hover */ +.boostlook #toc > ul.sectlevel1 li:not(.nav-item) > a { + display: inline-block; + padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem) var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem); + border-radius: var(--padding-padding-3xs, 0.25rem); + transition: background 0.15s ease; +} +.boostlook #toc > ul.sectlevel1 li:not(.nav-item) > a:hover { + background: var(--colors-primary-100, #EFEFF1); +} +html.dark .boostlook #toc > ul.sectlevel1 li:not(.nav-item) > a:hover { + background: var(--colors-primary-600, #585A64); +} + +/* Active TOC link — highlights link matching current hash (match Antora) */ +.boostlook #toc a.is-active-link { + background: var(--colors-primary-100, #EFEFF1); + border-radius: var(--padding-padding-3xs, 0.25rem); + color: var(--text-main-text-primary, #18191b); +} +html.dark .boostlook #toc a.is-active-link { + background: var(--colors-primary-600, #585A64); + color: var(--text-main-text-primary, #fff); +} + +/* Theme toggle for Asciidoctor pages (scoped to #toctitle to avoid Antora) */ +.boostlook #toctitle .theme-toggle { + background: none; + border: none; + cursor: pointer; + padding: 4px; + color: var(--text-main-text-body-tetriary, #62676b); + display: inline-flex; + align-items: center; + vertical-align: middle; +} +.boostlook #toctitle .theme-toggle:hover { + color: var(--text-main-text-body-primary, #050816); +} +html.dark .boostlook #toctitle .theme-toggle:hover { + color: var(--text-main-text-primary, #fff); +} +/* Toggle icon visibility — match Antora: moon in light, sun in dark */ +.boostlook #toctitle .theme-toggle .theme-icon-light { display: none; } +html.dark .boostlook #toctitle .theme-toggle .theme-icon-light { display: inline; } +html.dark .boostlook #toctitle .theme-toggle .theme-icon-dark { display: none; } + +/*----------------- Styles specific to AsciiDoctor content end -----------------*/ + +/*----------------- Styles specific to Antora Templates start -----------------*/ + +/** + * Antora Template Styles + * Specific styles for Antora-generated documentation. + * These styles handle: + * 1. Header and navigation layout + * 2. Typography customization + * 3. Navigation menu structure + * 4. Content layout and formatting + * 5. Responsive design adaptations + */ + +/* Table of Contents */ +.boostlook .nav { + height: 100%; + padding: var(--spacing-size-sm, 1rem) var(--spacing-size-lg, 1.5rem); + position: static; + background-color: unset; + box-shadow: none; + height: auto; + overflow-y: auto; +} + +/* Toc Navigation */ +.boostlook #toc .nav-menu h3.title a { + color: inherit; + font: inherit; +} + +.boostlook #toc .nav-menu h3.title a:focus, +.boostlook #toc .nav-menu h3.title a:hover { + color: var(--text-main-text-link-blue-secondary, #0077B8); +} + +/* Navigation Menu */ +.boostlook .nav-panel-menu { + overflow: visible; +} + +.boostlook .nav-close { + display: none; +} + +.boostlook .nav-menu > .nav-list > .nav-list { + margin-left: 0; +} + +.boostlook .nav-list li[data-depth]:not([data-depth="1"]).is-current-page.is-active::before { + background-color: var(--text-main-text-primary, #18191b); +} + +/* Active Page Indicator — apply to the link, not the whole li */ +.boostlook .nav-list .is-current-page.is-active { + position: relative; +} + +.boostlook .nav-list .is-current-page.is-active > .nav-link { + background: var(--colors-primary-100, #EFEFF1); + width: fit-content; +} + +.dark .boostlook .nav-list .is-current-page.is-active > .nav-link { + background: var(--colors-primary-600, #585A64); +} + +.boostlook #toc .nav-list .is-current-page.is-active > .nav-link { + color: var(--text-main-text-primary, #18191b); +} + +/* Hover background on nav link items */ +.boostlook .nav-menu .nav-list li:not(.nav-item) > .nav-link:hover { + background: var(--colors-primary-100, #EFEFF1); +} + +.dark .boostlook .nav-menu .nav-list li:not(.nav-item) > .nav-link:hover { + background: var(--colors-primary-600, #585A64); +} + +/* Section header layout — toggle + text inline */ +.boostlook .nav-menu .nav-item:has(> .nav-item-toggle) { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Nested nav-list takes full width below header */ +.boostlook .nav-menu .nav-item:has(> .nav-item-toggle) > .nav-list { + flex-basis: 100%; + order: 2; +} + +/* Chevron toggle button */ +.boostlook .nav-menu .nav-item-toggle { + background: none; + border: none; + outline: none; + width: 1.25rem; + height: 1.25rem; + padding: 0; + position: static; + margin-left: 0; + margin-top: 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + order: 1; + transform: none; +} + +.boostlook .nav-menu .nav-item-toggle::after { + content: ""; + display: block; + width: 1rem; + height: 1rem; + background-color: var(--text-main-text-body-secondary, #494d50); + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain; +} + +.boostlook .nav-menu .nav-item.is-active > .nav-item-toggle { + transform: none; +} + +.boostlook .nav-menu .nav-item.is-active > .nav-item-toggle::after { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E"); +} + +/* Header Layout */ +.boostlook #header:has(.nav-container) { + padding: 0; +} + +/* Typography */ +.boostlook .doc, +.boostlook .doc i { + font: inherit; +} +.boostlook .doc i { + color: inherit; +} + +/* TOC Container */ +.boostlook #toc.toc2.nav-container { + position: fixed; +} + +.boostlook #toc.toc2.nav-container.is-active { + position: static; + height: 100vh; + height: 100dvh; + padding: 0; + overflow-y: auto; +} + +/* Nav Toggle */ +.boostlook #content .nav-toggle { + display: flex; + padding: var(--spacing-size-3xs, 0.25rem); + align-items: center; + border: none; + border-radius: var(--spacing-size-2xs, 0.5rem); + outline: none; + line-height: inherit; + height: unset; + width: unset; + margin-right: var(--padding-padding-xs, 0.5rem); + + background: var(--surface-background-main-base-primary, #fff); + background-size: auto; + background-position-x: auto; +} + +.boostlook #content .nav-toggle:before { + content: var(--icon-menu); + line-height: 0; +} + +@media screen and (min-width: 768px) { + .boostlook #content .nav-toggle { + display: none; + visibility: hidden; + } +} + +/* Layout */ +.boostlook .article .content { + gap: 1rem; +} + +.boostlook #content:has(.toc.sidebar) { + display: flex; +} + +.boostlook #footer:has(> script):not(:has(> div)) { + padding-top: 0; + padding-bottom: 0; +} + +/* Toolbar */ +.boostlook .toolbar { + position: static; + height: auto; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--padding-padding-md, 1.125rem) 0; + color: var(--text-main-text-body-tetriary, #62676b); + background-color: transparent; + box-shadow: unset; +} + +.boostlook .toolbar + h1 { + margin-top: 0; +} + +/* Breadcrumbs */ +.boostlook .breadcrumbs { + display: block; + flex: 1 1; + min-width: 0; + padding: 0; + font-size: inherit; + line-height: revert; + overflow: auto; + scrollbar-width: none; + margin-right: var(--spacing-size-3xs); +} + +.boostlook .breadcrumbs::-webkit-scrollbar { + display: none; +} + +.boostlook .breadcrumbs ul { + display: flex; + flex-wrap: nowrap; + align-items: center; + margin: 0; + padding: 0; + list-style: none; + color: var(--text-main-text-body-tetriary, #62676b); + font-size: var(--typography-font-size-xs, 0.875rem); + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.boostlook .breadcrumbs ul li { + font: inherit; + display: flex; + align-items: center; + white-space: nowrap; +} + +@media screen and (max-width: 767px) { + .boostlook .breadcrumbs ul li:not(:first-child):not(:last-child) { + display: none; + } + + .boostlook .breadcrumbs ul li:last-child { + overflow: hidden; + min-width: 0; + } + + .boostlook .breadcrumbs ul li:last-child a { + overflow: hidden; + text-overflow: ellipsis; + display: block; + } +} + +.boostlook .breadcrumbs ul li a { + font: inherit; + color: var(--text-main-text-body-tetriary, #62676b); + text-decoration: none; + position: relative; +} + +.boostlook .breadcrumbs ul li:last-of-type a { + color: var(--text-main-text-link-blue-secondary, #0077B8); +} + +.boostlook .breadcrumbs ul li a:hover { + text-decoration: underline; +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) { + display: flex; + align-items: center; + padding: 0; + margin-right: var(--padding-padding-xs, 0.75rem); + gap: var(--spacing-size-2xs, 0.5rem); + border-radius: var(--spacing-size-2xs, 0.5rem); + border: none; + background: none; +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child)::after { + content: none; +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a { + display: flex; + align-items: center; + gap: var(--spacing-size-3xs, 0.25rem); + line-height: 0; + color: var(--text-main-text-primary, #18191b); + text-decoration: none; +} + +.boostlook .breadcrumbs ul li::after { + content: ""; + display: inline-block; + flex-shrink: 0; + flex-grow: 0; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--surface-icons-icon-tetriary, #949a9e); + padding: 0; + margin: 0 var(--spacing-size-2xs, 0.5rem); +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child)::after, +.boostlook .breadcrumbs ul li:last-of-type::after { + content: none; +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a svg { + display: none; +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a::before { + content: var(--icon-home); +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border: 1px solid transparent; + border-radius: var(--spacing-size-2xs, 0.5rem); + transition: border-color 0.2s ease, background-color 0.2s ease; +} + +.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a:hover { + border-color: var(--border-border-blue, #92cbe9); + background: var(--surface-background-main-surface-blue-secondary, #daeef9); +} + +/* Spirit Navigation */ +.boostlook .toolbar .spirit-nav, +.boostlook:not(:has(.doc)) .spirit-nav { + display: flex; + align-items: center; + gap: 0.125rem; +} + +.boostlook .toolbar .spirit-nav .disabled, +.boostlook:not(:has(.doc)) .spirit-nav .disabled { + opacity: 0.35; + cursor: not-allowed; + pointer-events: none; +} + +.boostlook:not(:has(.doc)) .spirit-nav { + padding-top: var(--padding-padding-md, 1.125rem); + justify-content: flex-end; +} + +.boostlook .toolbar .spirit-nav a, +.boostlook:not(:has(.doc)) .spirit-nav a { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-size-2xs, 0.5rem); + border-radius: var(--spacing-size-2xs, 0.5rem); + border: 1px solid transparent; + width: 24px; + height: 24px; + text-decoration: none; + padding: 0; + position: relative; + transition: border-color 0.2s ease, background-color 0.2s ease; +} + +.boostlook .toolbar .spirit-nav a:hover, +.boostlook:not(:has(.doc)) .spirit-nav a:hover { + border: 1px solid var(--border-border-blue, #92cbe9); + background: var(--surface-background-main-surface-blue-secondary, #daeef9); +} + +.boostlook .toolbar .spirit-nav a span { + overflow: hidden; + position: relative; +} + +.boostlook:not(:has(.doc)) .spirit-nav a img { + display: none; + border-width: 0px; +} + +/* hide default icons if elemnts exists */ +.boostlook .toolbar .spirit-nav a span[title*="Previous"], +.boostlook .toolbar .spirit-nav a span[title*="Next"], +.boostlook .toolbar .spirit-nav a span[title*="Up"] { + color: transparent; + display: block; + width: 100%; + height: 100%; +} + +.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after, +.boostlook .toolbar .spirit-nav a span[title*="Next"]::after, +.boostlook .toolbar .spirit-nav a span[title*="Up"]::after, +.boostlook:not(:has(.doc)) .spirit-nav a[accesskey]::after { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + line-height: 0; +} + +.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after, +.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="p"]::after { + content: var(--icon-arrow-left); +} +.boostlook .toolbar .spirit-nav a span[title*="Next"]::after, +.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="n"]::after { + content: var(--icon-arrow-right); +} +.boostlook .toolbar .spirit-nav a span[title*="Up"]::after, +.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after { + content: var(--icon-arrow-up); +} +.boostlook .toolbar .spirit-nav a span[title*="Up"]::after, +.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after { + content: var(--icon-arrow-up); +} + +.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="h"]::after { + content: var(--icon-home); +} + +/* Tabs Elements */ +.boostlook .tabs .tabpanel { + border: revert; + padding: var(--padding-padding-xs, 0.75rem) 0; + background: transparent; +} + +.boostlook .tablist, +.boostlook .tabs .tabpanel { + border-bottom: 1px solid var(--border-border-primary, #e4e7ea); +} + +.boostlook .tablist > ul[role="tablist"] { + background-color: var(--surface-background-main-surface-primary, #f5f6f8); +} +.dark .boostlook .tablist > ul[role="tablist"] { + background-color: var(--surface-background-main-surface-primary, #18191b); +} +.boostlook .tablist > ul .tab { + position: relative; + display: flex; + padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-md, 1.125rem); + justify-content: center; + align-items: center; + color: var(--text-main-text-body-tetriary, #62676b); + font-size: var(--typography-font-size-xs, 0.875rem); + line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */ + cursor: pointer; + border: none; + background: transparent; +} + +.boostlook .tabs.is-loading .tablist li:first-child::after, +.boostlook .tabs:not(.is-loading) .tablist li.is-selected::after { + content: ""; + display: block; + height: 1px; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + border-bottom: 1px solid var(--text-main-text-primary, #18191b); +} + +.boostlook .tablist > ul .tab * { + color: inherit; +} + +.boostlook .tablist > ul .tab.is-selected, +.boostlook .tablist > ul .tab:hover { + color: var(--text-main-text-primary, #18191b); +} + +.boostlook .tablist.ulist > ul li + li { + margin-left: unset; +} + +.boostlook .tabs:not(.is-loading) .tablist .tab:not(.is-selected) { + background-color: transparent; +} + +/* Search Field Container */ +#search-field { + display: flex; + position: relative; +} + +/* Search Input */ +#search-input { + padding: 0.15rem 0.75rem 0.15rem 1.75rem !important; + border: 1px solid var(--border-border-secondary); + border-radius: var(--radius-m, 0.375rem); + background-color: var(--surface-background-main-surface-primary); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 0.35rem center; + background-size: 16px 16px; + color: var(--text-main-text-body-primary); + font-family: inherit; + font-size: 1rem !important; /* 16px minimum prevents iOS zoom on focus */ + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} + +#search-input::placeholder { + color: var(--text-main-text-body-tetriary); +} + +#search-input:focus { + outline: none; + border-color: var(--border-border-blue-primary); + box-shadow: 0 0 0 3px var(--colors-secondary-50); +} + +#search-input:disabled { + background: var(--colors-primary-100); + color: var(--text-main-text-body-tetriary); + cursor: not-allowed; +} + +/* Results Dropdown */ +.search-result-dropdown-menu { + position: absolute; + z-index: 100; + top: 100%; + right: 0; + margin-top: var(--spacing-default, 0.5rem); + min-width: 400px; + border-radius: var(--radius-l, 0.5rem); + background: var(--surface-background-main-base-primary); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); +} + +.search-result-dataset { + padding: 0.5rem; + border: 1px solid var(--border-border-secondary); + border-radius: var(--radius-l, 0.5rem); + min-width: 580px; + max-height: calc(100vh - 6rem); + max-height: calc(100dvh - 6rem); + overflow: auto; +} + +/* Result Component Header */ +.search-result-component-header { + padding: 0.5rem 0.75rem; + margin: 0.25rem 0; + border-bottom: 1px solid var(--border-border-secondary); + color: var(--text-main-text-body-secondary); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.025em; +} + +/* Result Item */ +.search-result-item { + display: flex; + margin: 0.25rem 0; + border-radius: var(--radius-m, 0.375rem); +} + +.search-result-item:hover { + background: var(--colors-primary-50); +} + +.search-result-item .no-result { + padding: 1rem; + color: var(--text-main-text-body-tetriary); + text-align: center; +} + +/* Result Document Title (Left Column) */ +.search-result-document-title { + width: 25%; + padding: 0.625rem 0.75rem; + border-right: 1px solid var(--border-border-secondary); + color: var(--text-main-text-body-tetriary); + font-size: 0.75rem; + text-align: right; +} + +/* Result Document Hit (Right Column) */ +.search-result-document-hit { + flex: 1; + color: var(--text-main-text-body-secondary); + font-size: 0.8125rem; +} + +.search-result-document-hit > a { + display: block; + padding: 0.5rem 0.75rem; + color: inherit; + text-decoration: none; +} + +.search-result-document-hit > a:hover { + background: transparent; +} + +.search-result-document-hit .search-result-section-title { + margin-bottom: 0.25rem; + color: var(--text-main-text-body-primary); + font-size: 0.875rem; + font-weight: 500; +} + +.search-result-document-hit .search-result-highlight { + padding: 0.1em 0.2em; + border-radius: var(--radius-xs, 0.125rem); + background: var(--colors-secondary-50); + color: var(--text-main-text-link-blue); + font-weight: 500; +} + +/* Search Responsive: Mobile (< 768px) */ +@media screen and (max-width: 767px) { + .boostlook .toolbar { + flex-wrap: wrap; + gap: 0.75rem; + } + + .boostlook #content .nav-toggle { + margin-right: 0; + } + + .search-container { + order: 99; + flex: 1 0 100%; + } + + #search-input { + width: 100% !important; + min-width: unset; + font-size: 1rem !important; /* Prevents iOS zoom on focus */ + } + + .search-result-dropdown-menu { + position: fixed; + top: 6rem; + left: 1rem; + right: 1rem; + min-width: unset; + max-width: unset; + width: auto; + } + + .search-result-dataset { + min-width: unset; + } +} + +/* Search Responsive: Tablet (768px - 1023px) */ +@media screen and (min-width: 768px) { + #search-input { + width: unset !important; + min-width: unset !important; + } + + .search-result-dropdown-menu { + position: fixed; + top: 4rem; + left: calc(var(--main-max-width-leftbar) + 1rem); + right: 1rem; + min-width: unset; + max-width: unset; + width: auto; + } + + .search-result-dataset { + min-width: unset; + } +} + +/* Search Responsive: Desktop (1024px+) */ +@media screen and (min-width: 1024px) { + #search-input { + min-width: 200px !important; + z-index: 1001; + } + + .search-result-dropdown-menu { + position: absolute; + top: 100%; + left: auto; + right: 0; + width: clamp(530px, 45vw, 600px); + } +} + +/*----------------- Styles specific to Antora Templates end -----------------*/ + +/*---------- Quickbook docs styling fixes -----------*/ + +/** + * Quickbook Documentation Styles + * Comprehensive styling for Quickbook-generated documentation, including: + * 1. Typography and heading hierarchy + * 2. Content blocks and spacing + * 3. Navigation and spirit-nav elements + * 4. Special elements (notes, tips, etc.) + * 5. Code and syntax highlighting + */ + +#boost-legacy-docs-wrapper:has(> .boostlook), +#antora-template-wrapper:has(> .boostlook), +div.source-docs-antora.boostlook:has(> .boostlook) { + /* CharConv template fix */ + margin: auto; +} + +/* Legacy boostlook container */ +.boostlook#boost-legacy-docs-wrapper, +.boostlook#antora-template-wrapper, +div.source-docs-antora.boostlook { + margin-top: 0; + max-width: unset; + overflow: hidden; + position: relative; + min-height: 100vh; + min-height: 100dvh; +} + +.boostlook#boost-legacy-docs-wrapper > #header, +.boostlook#boost-legacy-docs-wrapper > #content, +.boostlook#boost-legacy-docs-wrapper > #footer, +.boostlook#boost-legacy-docs-wrapper > #footnotes, +.boostlook#antora-template-wrapper > #header, +.boostlook#antora-template-wrapper > #content, +.boostlook#antora-template-wrapper > #footer, +.boostlook#antora-template-wrapper > #footnotes, +div.source-docs-antora.boostlook > #header, +div.source-docs-antora.boostlook > #content, +div.source-docs-antora.boostlook > #footer, +div.source-docs-antora.boostlook > #footnotes { + /* width: auto; + max-width: unset; + margin-left: auto; */ + padding-left: unset; + padding-right: unset; +} + +/* Add Side margin for legacy boostlook container */ +#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)), +#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) { + padding: 0 var(--main-margin, 3rem); +} + +/* Title Block Common */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type { + margin-bottom: var(--padding-padding-md, 1.125rem); +} + +/* Title Styles */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .title, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .title, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .title, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .title, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .title, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .title { + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-2xl, 1.75rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-3xl, 2.5rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + margin: 0; +} + +/* Title Author */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .author, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .author, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .author, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .author, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .author, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .author, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .author, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content .author, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .author { + margin: 0; + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-lg, 1.25rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-xl, 1.75rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Top margin for first Author in title */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div.author, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div.author, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div.author, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div.author, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div.author, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div.author, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.author, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.author, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content div.author { + margin-top: var(--padding-padding-md, 1.125rem); +} + +/* Reduce top margin for next authors in authors group */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .authorgroup div.author:not(:first-child), +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .authorgroup div.author:not(:first-child), +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .authorgroup div.author:not(:first-child), +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .authorgroup div.author:not(:first-child), +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .authorgroup div.author:not(:first-child), +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .authorgroup div.author:not(:first-child) { + margin-top: var(--padding-padding-2xs); +} + +/* Remove Top Margin for next .copyright */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author { + margin-top: var(--padding-padding-3xs); +} + +/* Title Copyright */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .copyright, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .copyright, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .copyright, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .copyright, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .copyright, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .copyright, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .copyright, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content .copyright, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .copyright { + color: var(--text-main-text-body-secondary, #494d50); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + line-height: var(--typography-line-height-lg, 1.5rem); + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +/* Remove Top Margin for next .copyright */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright { + margin-top: 0; +} + +/* Title Legalnotice */ +.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .legalnotice, +.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .legalnotice, +.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .legalnotice, +.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .legalnotice, +.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .legalnotice, +.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .legalnotice, + /* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .legalnotice { + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-sm, 1rem); + font-style: normal; + line-height: var(--typography-line-height-lg, 1.5rem); + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .legalnotice { + margin-bottom: var(--padding-padding-md, 1.125rem); +} + +/* Remove
s */ +.boostlook:not(:has(.doc)) .titlepage hr { + display: none; +} + +/* Table of Contents */ +.boostlook:not(:has(.doc)) div.toc { + color: var(--text-main-text-body-secondary, #494d50); + font-family: var(--font-family-body, "Mona Sans"); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + line-height: var(--typography-line-height-md, 1.25rem); + margin: 0; + margin-bottom: var(--padding-padding-md, 1.125rem); + padding: 0; + border: none; +} + +.boostlook:not(:has(.doc)) div.toc > p { + display: flex; + padding: var(--spacing-size-3xs, 0.25rem); + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-2xs, 0.75rem); + font-variation-settings: "wght" 600, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.boostlook:not(:has(.doc)) div.toc > p > * { + font: inherit; + color: inherit; +} + +.boostlook:not(:has(.doc)) div.toc .toc dt { + color: var(--text-main-text-body-secondary, #494d50); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + line-height: var(--typography-line-height-md, 1.25rem); +} + +.boostlook:not(:has(.doc)) div.toc dd dd { + padding-left: var(--leftbar-paddings-leftbar-padding-sm); +} + +/* Section Layout */ +.boostlook#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *, +.boostlook#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > * { + /* max-width: var(--main-content-width); + margin-left: inherit; + margin-right: inherit; */ + margin: 0 auto; +} + +/* hide footer spirit nav since it wasn't visible before */ +.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav, +.boostlook#boost-legacy-docs-wrapper div.spirit-nav:last-child, +.boostlook#antora-template-wrapper div.spirit-nav:last-child, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spirit-nav:last-child { + display: none !important; +} + +/* hidden elems */ +.boostlook:not(:has(.doc)) > hr, +.boostlook:not(:has(.doc)) .table-break { + display: none; +} + +/* Content Blocks */ +.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img):first-child:last-child { + margin: var(--padding-padding-xs, 0.75rem) 0; +} + +.boostlook :is(h1, h2, h3, h4, h5) code, +.boostlook .doc :is(h1, h2, h3, h4, h5) code { + background: transparent !important; + border: none; + font-size: 0.85em; + font-weight: 400; + color: inherit; + padding: 0; + display: initial; + transition: none; +} + +.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code { + background: transparent !important; + border: none; + font-size: inherit; + color: inherit; + padding: 0; + display: initial; + transition: none; +} + +/* Special Blocks */ +/* hide legacy icon */ +.boostlook:not(:has(.doc)) div:not(.admonitionblock).note > table tr:first-child td, +.boostlook:not(:has(.doc)) div:not(.admonitionblock).tip > table tr:first-child td, +.boostlook:not(:has(.doc)) div:not(.admonitionblock).important > table tr:first-child td, +.boostlook:not(:has(.doc)) div:not(.admonitionblock).caution > table tr:first-child td, +.boostlook:not(:has(.doc)) div:not(.admonitionblock).warning > table tr:first-child td, +.boostlook:not(:has(.doc)) div:not(.admonitionblock).blurb > table tr:first-child td, +.boostlook:not(:has(.doc)) p.blurb > table tr:first-child td { + display: none; +} + +/* Special Blocks Margins */ +.boostlook:not(:has(.doc)) div.note, +.boostlook:not(:has(.doc)) div.tip, +.boostlook:not(:has(.doc)) div.important, +.boostlook:not(:has(.doc)) div.caution, +.boostlook:not(:has(.doc)) div.warning, +.boostlook:not(:has(.doc)) div.blurb, +.boostlook:not(:has(.doc)) p.blurb { + margin-top: var(--padding-padding-xs, 0.75rem); + margin-bottom: var(--padding-padding-2xs); +} + +.boostlook:not(:has(.doc)) .titlepage + div.note, +.boostlook:not(:has(.doc)) .titlepage + div.tip, +.boostlook:not(:has(.doc)) .titlepage + div.important, +.boostlook:not(:has(.doc)) .titlepage + div.caution, +.boostlook:not(:has(.doc)) .titlepage + div.warning, +.boostlook:not(:has(.doc)) .titlepage + div.blurb, +.boostlook:not(:has(.doc)) .titlepage + p.blurb { + margin-top: var(--padding-padding-2xs); +} + +/* Tables */ +/* Make div with Table display block */ +.boostlook:has(:not(.doc)) div.table { + display: block; +} + +/* Enable Horizontal Scroll */ +.boostlook:has(:not(.doc)) div.table .table-contents, +.boostlook:has(:not(.doc)) .informaltable:has(> .table) { + overflow: auto; +} + +/* References Table */ +/* This is specific selector for refences tables which containes many tables and only tables as direct children */ +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) { + display: flex; + flex-direction: column; + gap: var(--padding-padding-md, 1.125rem); + /* border: 2px solid red; */ +} + +/* Disable margins for all Headings inside table */ +.boostlook:has(:not(.doc)) .informaltable:has(> .table) :is(h1, h2, h3, h4, h5, h6) { + margin: 0; +} + +/* Table has inner table th */ +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) th { + border: none; + padding: 0 0 var(--padding-padding-xs, 0.75rem) 0; + background: none; + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-md, 1.125rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Disable global cell paddings */ +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) > tbody > tr > td { + padding: 0; +} + +/* Add border radius to tbody first row */ +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:first-child { + border-top-left-radius: var(--spacing-size-2xs, 0.5rem); + overflow: hidden; +} + +/* Add border radius to tbody first row */ +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:last-child { + border-top-right-radius: var(--spacing-size-2xs, 0.5rem); + overflow: hidden; +} + +/* Select Inner Headings and make it look as table head */ +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tbody :is(h1, h2, h3, h4, h5, h6) { + padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem); + gap: var(--spacing-size-xs, 0.75rem); + background: var(--surface-background-main-surface-primary, #f5f6f8); + color: var(--text-main-text-body-tetriary, #62676b); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Inner table styles */ +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist { + width: 100%; +} + +.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist td { + border: none; + padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem); +} + +/* Footnotes */ +.boostlook:has(:not(.doc)) .footnotes { + margin-top: var(--padding-padding-lg); + border-top: 1px solid var(--border-border-primary); +} + +.boostlook:has(:not(.doc)) .footnotes hr { + display: none; +} + +/* Copyright Footer */ +/* If Footer has no content than use it as bottom spacer */ +.boostlook .copyright-footer:empty { + padding-top: var(--main-margin); +} + +/* If Footer has content */ +.boostlook .copyright-footer:not(:empty) { + padding: var(--padding-padding-lg) 0; +} + +/* Footer Content */ +.boostlook:not(:has(.doc)) .copyright-footer { + color: var(--text-main-text-body-quaternary, #949a9e); + font-size: var(--typography-font-size-xs); + font-variation-settings: "wght" 500, "wdth" 87.5; + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + text-align: left; +} + +/* Footer Content */ +.boostlook:not(:has(.doc)) .copyright-footer p { + text-align: inherit; + font-size: var(--typography-font-size-2xs); + color: var(--text-main-text-body-primary, #2a2c30); +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content hr, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content hr, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content hr { + display: none; +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet { + position: relative; +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre), +.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) { + margin: 0; + border: none; + padding: 0; +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) pre, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre) pre, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) pre { + padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem); + margin-top: var(--padding-padding-3xs, 0.25rem); +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]), +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]) { + margin-left: 0; + margin-right: 0; +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]), +.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]), +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]):not(:last-child), +.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]):not(:last-child), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]):not(:last-child), +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:not(:last-child) pre, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:not(:last-child) pre, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:not(:last-child) pre { + margin-bottom: var(--padding-padding-xs, 0.75rem); +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content + p:has(> small), +.boostlook:not(:has(.doc))#antora-template-wrapper > #content + p:has(> small), +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content + p:has(> small) { + padding: var(--padding-padding-lg) 0 !important; +} + +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .footnotes, +.boostlook:not(:has(.doc))#antora-template-wrapper > #content .footnotes, +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .footnotes { + padding-top: var(--padding-padding-xs, 0.75rem); +} + +@media screen and (min-width: 768px) { + body.article:has(.boostlook#boost-legacy-docs-wrapper), + body.article:has(.boostlook#antora-template-wrapper), + body.article:has(div.source-docs-antora.boostlook) { + /* !important ovverides website own styles !important + * Adjust this to "padding: 0 1rem 0 1rem" + * when website container width will be used as in new look design + */ + padding: 0 !important; + } + + #boost-legacy-docs-wrapper .boostlook #toc.toc2, + #antora-template-wrapper .boostlook #toc.toc2, + div.source-docs-antora.boostlook:has(> .boostlook) .boostlook #toc.toc2 { + /* Adjust this to "max(1rem, 50% - 45rem)" + * when website container width will be used as in new look design + */ + left: max(0rem, 50% - 45rem); + } +} +/* TOC Common End */ + +/*----------------- Quickbook Documentation Styles end -----------------*/ + +/*----------------- Library README Styles start -----------------*/ + +.boostlook#libraryReadMe { + margin-left: 0; + background: #fff; +} + +html.dark .boostlook#libraryReadMe { + background: var(--colors-primary-850); +} + +.boostlook#libraryReadMe > * { + max-width: unset; + margin-left: inherit; + margin-right: inherit; +} + +.boostlook#libraryReadMe > h1:first-child { + margin-top: 0; +} + +.boostlook#libraryReadMe h1 { + font-size: 1.75rem; + letter-spacing: -0.01em; +} + +@media (min-width: 768px) { + .boostlook#libraryReadMe h1 { + font-size: 2.5rem; + } +} + +.boostlook#libraryReadMe div.highlight:has(> pre) { + background: transparent !important; +} + +.boostlook#libraryReadMe p:has(> a img ) { + display:flex; + flex-wrap:wrap; + justify-content: flex-start; + align-items: center; +} + +.boostlook#libraryReadMe p a:has(> img ) { + margin-left:.5rem; +} + +.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)) { + padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem); + border: 1px solid var(--border-border-secondary, #d5d7d9); +} + +/*----------------- Library README Styles end -----------------*/ + +/*----------------- AsciiDoctor-Specific Responsive TOC Layout start -----------------*/ + +/* Prevent header/content/footer padding from jumping at 990px breakpoint */ +@media (min-width: 990px) { + :root { + --main-max-width-leftbar: 18.25rem; + --main-margin: 0rem; + } +} + +/* === Tablet/Desktop: TOC Sidebar Layout (768px+) === */ +@media screen and (min-width: 768px) { + .boostlook #toc.toc2 { + position: fixed !important; + left: 0 !important; + width: var(--main-max-width-leftbar) !important; + top: 0 !important; + height: 100vh !important; + height: 100dvh !important; + } + + .boostlook #toggle-toc { + position: fixed !important; + left: 1rem !important; + top: 2rem !important; + } + + .toc2 .boostlook:has(> #content .doc) { + margin-left: 0; + } + + html.toc-visible .boostlook { + margin-left: 0 !important; + } + + .article.toc2.toc-left { + max-width: none !important; + } + html:not(.toc-hidden, .toc-visible) .article.toc2.toc-left, + .toc-visible.toc-pinned .article.toc2.toc-left { + margin-left: var(--main-max-width-leftbar) !important; + } +} + +/* === Wide Screens: Expanded Content Width (1536px+) === */ +@media screen and (min-width: 1536px) { + :root { + --main-content-width: 1100px; + --main-content-left-spacing: 2rem; + } +} + +/* === Ultra-Wide Screens: Maximum content width (1920px+) === */ +@media screen and (min-width: 1920px) { + :root { + --main-content-width: 1300px; + --main-content-left-spacing: 4rem; + } + + .boostlook #content, + .boostlook #header > h1, + .boostlook #header .author { + margin-left: var(--main-content-left-spacing); + } +} + +/*----------------- AsciiDoctor-Specific Responsive TOC Layout end -----------------*/ diff --git a/templates/base.html b/templates/base.html index 05def8ebc..239c0391a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -56,7 +56,11 @@ {% comment %} {% endcomment %} + {% flag "v3" %} + + {% else %} + {% endflag %} {% flag "v3" %}