diff --git a/boostlook-v3.css b/boostlook-v3.css new file mode 100644 index 0000000..ff803b0 --- /dev/null +++ b/boostlook-v3.css @@ -0,0 +1,4835 @@ +/** + * 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 Shades of Grey */ + --colors-neutral-0: #ffffff; + --colors-neutral-50: #f5f6f8; + --colors-neutral-100: #e4e7ea; + --colors-neutral-200: #c7cccf; + --colors-neutral-250: #f9f9f9; + --colors-neutral-300: #afb3b6; + --colors-neutral-400: #949a9e; + --colors-neutral-500: #798086; + --colors-neutral-600: #62676b; + --colors-neutral-700: #494d50; + --colors-neutral-800: #393b3f; + --colors-neutral-900: #18191b; + --colors-neutral-950: #0d0e0f; + + /* Colors Brand Shades */ + --colors-brand-orange-50: #fbf2e6; + --colors-brand-orange-100: #ffeaca; + --colors-brand-orange-200: #ffd897; + --colors-brand-orange-300: #ffc364; + --colors-brand-orange-400: #ffb030; + --colors-brand-orange-500: #ff9f00; + --colors-brand-orange-600: #cd7e00; + --colors-brand-orange-700: #9b5f00; + --colors-brand-orange-800: #694000; + --colors-brand-orange-900: #352000; + --colors-brand-orange-950: #1e1200; + + /* 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-900: #39070f; + --colors-negative-950: #1d0408; + + /* Colors Positive Shades */ + --colors-positive-0: #f8fefb; + --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-850: #1c4431; + --colors-positive-900: #132f22; + --colors-positive-950: #0a1b13; + + /* Colors Warning Shades */ + --colors-warning-0: rgba(255, 248, 243, 0.5); + --colors-warning-50: #fff8f3ff; + --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-900: #341700; + --colors-warning-950: #1f0e01; + + /* Colors Blue Shades */ + --colors-blue-0: #f6fafd; + --colors-blue-25: #ebf4f9; + --colors-blue-50: #daeef9; + --colors-blue-100: #c2e2f4; + --colors-blue-200: #92cbe9; + --colors-blue-300: #62b3dd; + --colors-blue-400: #329cd2; + --colors-blue-500: #0284c7; + --colors-blue-600: #026a9f; + --colors-blue-700: #014f77; + --colors-blue-800: #013550; + --colors-blue-850: #01283c; + --colors-blue-900: #001a28; + --colors-blue-950: #000d14; + + /* Colors Code Syntax Pallette */ + --colors-code-colors-red: var(--colors-negative-400); + --colors-code-colors-green: var(--colors-positive-500); + --colors-code-colors-blue: var(--colors-blue-300); + --colors-code-colors-black: var(--colors-neutral-950); + --colors-code-colors-yellow: #ebc419; + --colors-code-colors-purple: #b350ed; + --colors-code-colors-turquoise: #67eaf9; + --colors-code-colors-white: var(--colors-neutral-0); + --colors-code-colors-red-contrast: var(--colors-negative-500); + --colors-code-colors-green-contrast: var(--colors-positive-600); + --colors-code-colors-blue-contrast: var(--colors-blue-400); + --colors-code-colors-yellow-contrast: #d7a200; + --colors-code-colors-purple-contrast: #9f26e5; + --colors-code-colors-turquoise-contrast: #0dc4d5; + --colors-code-colors-navy: #5469f7; + --colors-code-colors-navy-contrast: #162ec6; + + /* Atom One Dark Theme Colors */ + --atom-one-dark-bg: #282c34; + --atom-one-dark-text: #abb2bf; + --atom-one-dark-comment: #5c6370; + --atom-one-dark-keyword: #c678dd; + --atom-one-dark-operator: #e06c75; + --atom-one-dark-function: #61aeee; + --atom-one-dark-string: #98c379; + --atom-one-dark-variable: #d19a66; + --atom-one-dark-constant: #56b6c2; + --atom-one-dark-class: #e6c07b; + + /* Atom One Light Theme Colors */ + --atom-one-light-bg: #fafafa; + --atom-one-light-text: #383a42; + --atom-one-light-comment: #a0a1a7; + --atom-one-light-keyword: #a626a4; + --atom-one-light-operator: #e45649; + --atom-one-light-function: #4078f2; + --atom-one-light-string: #50a14f; + --atom-one-light-variable: #986801; + --atom-one-light-constant: #0184bb; + --atom-one-light-class: #c18401; + + /* Colors Other */ + --colors-neutral-150: #d5d7d9; + --colors-neutral-850: #2a2c30; + --colors-neutral-750: #1c1c1c; + --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; + + /* New Look Typography */ + --font-family-body: "Noto 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; + --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-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 */ + --icon-arrow-left-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%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%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%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%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed Right Arrow Icon */ + --icon-arrow-right-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%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%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%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%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); + + /* Themed Up Arrow Icon */ + --icon-arrow-up-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%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%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%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%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%23FFFFFF%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%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%22M10.1192%203.23498C11.177%202.24329%2012.823%202.24329%2013.8808%203.23498L19.8808%208.85998C20.4354%209.37986%2020.75%2010.1061%2020.75%2010.8662V18.9997C20.75%2019.9662%2019.9665%2020.7497%2019%2020.7497H15C14.5858%2020.7497%2014.25%2020.414%2014.25%2019.9997V15.9998C14.25%2015.8617%2014.1381%2015.7498%2014%2015.7498H10C9.86193%2015.7498%209.75%2015.8617%209.75%2015.9998V19.9997C9.75%2020.414%209.41421%2020.7497%209%2020.7497H5C4.0335%2020.7497%203.25%2019.9662%203.25%2018.9997V10.8662C3.25%2010.1061%203.56462%209.37986%204.11916%208.85998L10.1192%203.23498ZM12.8549%204.32929C12.3741%203.87852%2011.6259%203.87852%2011.1451%204.32929L5.14507%209.95429C4.89301%2010.1906%204.75%2010.5207%204.75%2010.8662V18.9997C4.75%2019.1378%204.86193%2019.2497%205%2019.2497H8.25V15.9998C8.25%2015.0333%209.0335%2014.2498%2010%2014.2498H14C14.9665%2014.2498%2015.75%2015.0333%2015.75%2015.9998V19.2497H19C19.1381%2019.2497%2019.25%2019.1378%2019.25%2018.9997V10.8662C19.25%2010.5207%2019.107%2010.1906%2018.8549%209.95429L12.8549%204.32929Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E"); + --icon-home-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%22M10.1192%203.23523C11.177%202.24353%2012.823%202.24353%2013.8808%203.23523L19.8808%208.86023C20.4354%209.38011%2020.75%2010.1063%2020.75%2010.8665V19C20.75%2019.9665%2019.9665%2020.75%2019%2020.75H15C14.5858%2020.75%2014.25%2020.4142%2014.25%2020V16C14.25%2015.8619%2014.1381%2015.75%2014%2015.75H10C9.86193%2015.75%209.75%2015.8619%209.75%2016V20C9.75%2020.4142%209.41421%2020.75%209%2020.75H5C4.0335%2020.75%203.25%2019.9665%203.25%2019V10.8665C3.25%2010.1063%203.56462%209.38011%204.11916%208.86023L10.1192%203.23523ZM12.8549%204.32953C12.3741%203.87876%2011.6259%203.87876%2011.1451%204.32953L5.14507%209.95453C4.89301%2010.1908%204.75%2010.5209%204.75%2010.8665V19C4.75%2019.1381%204.86193%2019.25%205%2019.25H8.25V16C8.25%2015.0335%209.0335%2014.25%2010%2014.25H14C14.9665%2014.25%2015.75%2015.0335%2015.75%2016V19.25H19C19.1381%2019.25%2019.25%2019.1381%2019.25%2019V10.8665C19.25%2010.5209%2019.107%2010.1908%2018.8549%209.95453L12.8549%204.32953Z%22%20fill%3D%22white%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 */ + --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-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-2xs); + --typography-font-size-xs: var(--font-size-xs); + --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-md); + --typography-font-size-xl: var(--font-size-lg); + --typography-font-size-2xl: var(--font-size-xl); + --typography-font-size-3xl: var(--font-size-2xl); + --typography-font-size-4xl: var(--font-size-3xl); + --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 */ + --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-2xs: var(--spacing-size-2xs); + --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs); + --padding-padding-md: var(--spacing-size-md); + --main-margin: var(--spacing-size-xl); + --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-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-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 */ + --typography-font-size-h1: var(--font-size-2xl); + --typography-font-size-h2: var(--font-size-xl); + --typography-font-size-h3: var(--font-size-2md); + --typography-font-size-h4: var(--font-size-md); + + /* +*/ + } +} + +@media (min-width: 990px) { + :root { + --main-max-width-leftbar: 21.25rem; + --main-margin: var(--spacing-size-3xl); + } +} + +/*----------------- 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 { + /*----------------- 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-neutral-0); + --text-buttons-button-label-secondary-default: var(--colors-neutral-900); + --text-buttons-button-label-inactive: var(--colors-neutral-500); + + --text-main-text-primary: var(--colors-neutral-900); + --text-main-text-link-blue-secondary: var(--colors-blue-500); + --text-main-text-link-blue-tetriary: var(--colors-blue-400); + --text-main-text-body-secondary: var(--colors-neutral-700); + --text-main-text-body-quaternary: var(--colors-neutral-400); + --text-main-text-body-tetriary: var(--colors-neutral-600); + --text-main-text-body-primary: var(--colors-neutral-850); + --text-main-text-link-blue: var(--colors-blue-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-blue-400); + --text-states-text-additional-secondary: var(--colors-blue-500); + --text-states-text-additional-tetriary: var(--colors-blue-600); + + --text-code-red: var(--atom-one-light-operator); + --text-code-green: var(--atom-one-light-string); + --text-code-blue: var(--atom-one-light-function); + --text-code-yellow: var(--atom-one-light-variable); + --text-code-purple: var(--atom-one-light-keyword); + --text-code-turquoise: var(--atom-one-light-constant); + --text-code-neutral: var(--atom-one-light-text); + --text-code-navy: var(--atom-one-light-class); + + --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-400); + --surface-button-button-bg-primary-default: var(--colors-blue-700); + --surface-button-button-bg-primary-pressed: var(--colors-blue-700); + --surface-button-button-bg-primary-inactive: var(--colors-neutral-200); + --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-500); + --surface-button-button-bg-primary-hover: var(--colors-blue-800); + --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-400); + --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-200); + + --surface-background-main-base-primary: var(--colors-neutral-0); + --surface-background-main-surface-primary: var(--colors-neutral-50); + --surface-background-main-surface-secondary: var(--colors-neutral-100); + --surface-background-main-surface-tetriary: var(--colors-neutral-150); + --surface-background-main-surface-blue-primary: var(--colors-blue-0); + --surface-background-main-surface-blue-secondary: var(--colors-blue-50); + --surface-background-main-surface-blue-tetriary: var(--colors-blue-100); + --surface-background-main-surface-blue-quaternary: var(--colors-blue-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-blue-100); + --surface-background-states-surface-additional-tetriary: var(--colors-blue-200); + --surface-background-states-surface-additional-quaternary: var(--colors-blue-300); + + --surface-icons-icon-primary: var(--colors-neutral-900); + --surface-icons-icon-button-primary: var(--colors-neutral-0); + --surface-icons-icon-button-secondary: var(--colors-neutral-900); + --surface-icons-icon-button-inactive: var(--colors-neutral-500); + --surface-icons-icon-secondary: var(--colors-neutral-600); + --surface-icons-icon-quaternary: var(--colors-neutral-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-neutral-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-blue-600); + --surface-icons-icon-blue-light: var(--colors-blue-200); + + --border-border-primary: var(--colors-neutral-100); + --border-border-secondary: var(--colors-neutral-150); + --border-border-tetriary: var(--colors-neutral-300); + --border-border-quaternary: var(--colors-neutral-600); + --border-border-active: var(--colors-neutral-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-blue-200); + --border-border-blue-primary: var(--colors-blue-100); + --border-border-blue-hover: var(--colors-blue-400); + + /*----------------- New Look Variables End -----------------*/ +} + +/* Dark Theme Configuration */ +html.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-neutral-0); + --text-buttons-button-label-secondary-default: var(--colors-neutral-950); + --text-buttons-button-label-inactive: var(--colors-neutral-500); + + --text-main-text-primary: var(--colors-neutral-0); + --text-main-text-link-blue-secondary: var(--colors-blue-500); + --text-main-text-link-blue-tetriary: var(--colors-blue-600); + --text-main-text-link-blue: var(--colors-blue-400); + --text-main-text-body-secondary: var(--colors-neutral-200); + --text-main-text-body-tetriary: var(--colors-neutral-300); + --text-main-text-body-quaternary: var(--colors-neutral-600); + --text-main-text-body-primary: var(--colors-neutral-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-blue-600); + --text-states-text-additional-secondary: var(--colors-blue-500); + --text-states-text-additional-tetriary: var(--colors-blue-400); + + --text-code-red: var(--atom-one-dark-operator); + --text-code-green: var(--atom-one-dark-string); + --text-code-blue: var(--atom-one-dark-function); + --text-code-yellow: var(--atom-one-dark-variable); + --text-code-purple: var(--atom-one-dark-keyword); + --text-code-turquoise: var(--atom-one-dark-constant); + --text-code-neutral: var(--atom-one-dark-text); + --text-code-navy: var(--atom-one-dark-class); + + --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500); + --surface-button-button-bg-primary-default: var(--colors-blue-800); + --surface-button-button-bg-primary-pressed: var(--colors-blue-800); + --surface-button-button-bg-primary-inactive: var(--colors-neutral-800); + --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-400); + --surface-button-button-bg-primary-hover: var(--colors-blue-700); + --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-500); + --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-800); + + --surface-background-main-base-primary: var(--colors-neutral-950); + --surface-background-main-surface-primary: var(--colors-neutral-900); + --surface-background-main-surface-secondary: var(--colors-neutral-850); + --surface-background-main-surface-tetriary: var(--colors-neutral-800); + --surface-background-main-surface-blue-primary: var(--colors-blue-900); + --surface-background-main-surface-blue-secondary: var(--colors-blue-900); + --surface-background-main-surface-blue-tetriary: var(--colors-blue-850); + --surface-background-main-surface-blue-quaternary: var(--colors-blue-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-blue-950); + --surface-background-states-surface-additional-tetriary: var(--colors-blue-800); + --surface-background-states-surface-additional-quaternary: var(--colors-blue-700); + + --surface-icons-icon-primary: var(--colors-neutral-0); + --surface-icons-icon-button-primary: var(--colors-neutral-0); + --surface-icons-icon-button-secondary: var(--colors-neutral-950); + --surface-icons-icon-button-inactive: var(--colors-neutral-600); + --surface-icons-icon-secondary: var(--colors-neutral-400); + --surface-icons-icon-quaternary: var(--colors-neutral-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-blue-400); + --surface-icons-icon-blue-light: var(--colors-blue-700); + + --border-border-primary: var(--colors-neutral-850); + --border-border-secondary: var(--colors-neutral-800); + --border-border-tetriary: var(--colors-neutral-700); + --border-border-quaternary: var(--colors-neutral-500); + --border-border-active: var(--colors-neutral-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-blue-700); + --border-border-blue-primary: var(--colors-blue-850); + --border-border-blue-hover: var(--colors-blue-500); + + /*----------------- 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%; +} + +/* 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-neutral, #0d0e0f); + 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, "Noto Sans") !important; + font-variation-settings: "wght" 350, "wdth" 80; + 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, #18191b); + display: block; + line-height: var(--typography-line-height-xl, 1.75rem); + margin-top: var(--padding-padding-xl, 2rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + margin-bottom: 0.5rem; + font-variation-settings: "wght" 500, "wdth" 80; + position: relative; +} + +/* Heading Sizes */ +.boostlook h1, +.boostlook .doc h1 { + font-size: var(--typography-font-size-h1, 1.75rem); + line-height: var(--typography-line-height-3xl, 2.5rem); /* 142.857% */ +} + +/* Primary headings */ +.boostlook h2, +.boostlook .doc h2 { + font-size: var(--typography-font-size-h2, 1.5rem); +} + +/* Section headings */ +.boostlook h3, +.boostlook .doc h3 { + font-size: var(--typography-font-size-h3, 1.3rem); + line-height: var(--typography-line-height-xl, 1.85rem); /* 155.556% */ +} + +/* Subsection headings */ +.boostlook h4, +.boostlook .doc h4 { + font-size: var(--typography-font-size-h4, 1.125rem); + line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */ +} + +/* Topic headings */ +.boostlook h5, +.boostlook .doc h5 { + font-size: var(--font-size-sm, 1rem); + line-height: var(--font-line-height-lg, 1.5rem); +} + +/* Subtopic headings */ +.boostlook h6, +.boostlook .doc h6 { + font-size: var(--font-size-xs, 0.875rem); + line-height: var(--font-line-height-md, 1.25rem); +} + +/* 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; +} + +/* 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; +} + +/* Paragraph Styling */ +.boostlook p { + padding-top: initial !important; + padding-bottom: initial !important; + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-sm, 1rem); + line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */ +} + +/* 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 .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#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); +} + +.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; +} + +/* 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" 80; + 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-xs, 0.875rem); + font-feature-settings: "calt" 1, "liga" 0; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + 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: 0; + border: none; + box-shadow: none; +} + +.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: var(--surface-background-main-surface-secondary, #e4e7ea); +} + +.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" 80; + 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: "Noto 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 .listingblock:has(> .content > pre):not(:is(dd pre, td pre)), +.boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)), +.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); +} +.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)), .boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)) { + margin-left: var(--spacing-size-xl); +} + +.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-secondary, #d5d7d9); + border-radius: 0; +} +.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: "Noto Sans"; + font-size: var(--typography-font-size-2xs, 0.75rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 80; + 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; +} + +.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" 80; + 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-neutral, #0d0e0f); + font-size: 0.96em; + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 80; + 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 */ +.boostlook .hljs-keyword, +.boostlook .hljs-selector-tag, +.boostlook .hljs-subst, +.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-purple, #9f26e5); +} + +.boostlook pre span.n, +.boostlook pre span.na, +.boostlook pre span.nb, +.boostlook pre span.bp, +.boostlook pre span.nc, +.boostlook pre span.no, +.boostlook pre span.nd, +.boostlook pre span.ni, +.boostlook pre span.ne, +.boostlook pre span.nf, +.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-main-text-body-primary, #2a2c30); +} + +.boostlook pre span.c, +.boostlook pre span.ch, +.boostlook pre span.cm, +.boostlook pre span.cp, +.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-addition, +.boostlook .hljs-built_in, +.boostlook .hljs-bullet, +.boostlook .hljs-code { + color: var(--atom-one-light-comment, #a0a1a7); + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +/* Dark theme comment color */ +html.dark .boostlook pre span.c, +html.dark .boostlook pre span.ch, +html.dark .boostlook pre span.cm, +html.dark .boostlook pre span.cp, +html.dark .boostlook pre span.cpf, +html.dark .boostlook pre span.c1, +html.dark .boostlook pre span.cs, +html.dark .boostlook pre span.sd, +html.dark .boostlook pre span.sh, +html.dark .boostlook pre span.comment, +html.dark .boostlook .hljs-comment, +html.dark .boostlook .cpp-comment, +html.dark .boostlook .hljs-quote, +html.dark .boostlook .hljs-addition, +html.dark .boostlook .hljs-built_in, +html.dark .boostlook .hljs-bullet, +html.dark .boostlook .hljs-code { + color: var(--atom-one-dark-comment, #5c6370); + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +.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-deletion, +.boostlook .hljs-number, +.boostlook .hljs-quote, +.boostlook .hljs-selector-class, +.boostlook .hljs-selector-id, +.boostlook .hljs-template-tag, +.boostlook .hljs-type { + color: var(--text-code-red, #f9677f); +} + +.boostlook .hljs-section, +.boostlook .hljs-selector-id, +.boostlook .hljs-title { + color: var(--text-code-blue, #329cd2); +} + +.boostlook .hljs-attribute, +.boostlook .hljs-name, +.boostlook .hljs-tag { + color: var(--text-main-text-primary, #18191b); +} + +/* 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; +} + +.boostlook .hljs-meta { + color: inherit; +} + +/* 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); +} + +.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: 1 0 0; + backdrop-filter: blur(8px); + padding-right: revert; + padding-left: revert; + margin-left: revert; +} +.boostlook nav.pagination > span.next { + text-align: right; +} + +.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); + 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" 80; + line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + text-decoration: none; + transition: background-color 0.3s ease; +} + +.boostlook nav.pagination > span:hover a { + background: var(--surface-background-main-surface-primary, #f5f6f8); + color: inherit; +} + +.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" 80; + 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: 1px solid transparent; + border-radius: var(--spacing-size-2xs, 0.5rem); + background: var(--surface-background-main-base-primary, #fff); + transition: all 0.2s ease; + 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); +} + +.boostlook nav.pagination > span:hover a::after { + border-color: var(--border-border-blue, #92cbe9); + background: var(--surface-background-main-surface-blue-secondary, #daeef9); +} + +/* Admonitions */ +.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(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem); + border-radius: var(--spacing-size-size-0, 0rem); + border: 1px solid transparent; + margin: revert; + margin-left: var(--spacing-size-xl); + background: transparent; +} + +.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: var(--spacing-size-2xs, 0.5rem); +} + +.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, #18191b); + 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); + /* text-transform: uppercase; */ +} +.boostlook #content .admonitionblock > table tr td.icon > * { + padding: 0; + font-family: var(--font-family-body, "Noto 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-primary, #18191b); + font-size: var(--typography-font-size-xs, 0.875rem); + font-variation-settings: "wght" 400, "wdth" 80; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.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 */ +.boostlook #content .admonitionblock.note, +.boostlook:not(:has(.doc)) div.note, +.boostlook:not(:has(.doc)) .notices.note { + border-color: var(--border-border-blue-primary, #c2e2f4); /* var(--border-border-blue-primary, #c2e2f4) */ + background-color: var(--surface-background-main-surface-blue-primary, #f6fafd); +} + +.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 */ +/* 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: #000 !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" 80; + 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-neutral, #0d0e0f); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-variation-settings: "wght" 500, "wdth" 80; + 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" 80; + 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); +} + +.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" 80; +} + +/* 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" 80; + 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 { + all: inherit; +} + +/* 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: var(--padding-padding-sm); + color: var(--text-main-text-body-quaternary, #949a9e); + font-size: var(--typography-font-size-xs); + font-variation-settings: "wght" 500, "wdth" 80; + 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: 2rem; +} + +.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; +} + +.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: 24px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-main-text-primary, #18191b); +} + +/* 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; +} + +.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; +} + +.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" 80; + 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: "Noto Sans"; + font-style: normal; + font-variation-settings: "wght" 350, "wdth" 80; + 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; +} + +/* Add intendation */ +.boostlook #content .sectionbody > table.tableblock, +.boostlook #content .section > table.tableblock, +.boostlook .sectionbody > div.informaltable:not(:is(.informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))))), +.boostlook .section > div.informaltable:not(:is(.informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))))), +.boostlook:not(:has(.doc)) .sectionbody > div.table .table-contents, +.boostlook:not(:has(.doc)) .section > div.table .table-contents, +.boostlook#libraryReadMe > table { + margin-left: var(--spacing-size-xl, 2rem); +} + +.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%; + margin-left: var(--spacing-size-xl, 2rem); +} + +.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" 80; + 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" 80; + text-decoration: none; +} + +.boostlook:not(:has(.doc)) div.table .title { + padding-bottom: var(--padding-padding-2xs, 0.5rem) !important; +} + +.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: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem); + text-align: left; + border-top: 1px solid var(--border-border-primary, #e4e7ea); + border-left: 1px solid var(--border-border-primary, #e4e7ea); +} + +.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(--border-border-primary, #e4e7ea); +} + +.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(--border-border-primary, #e4e7ea); +} + +.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);*/ +} + +.boostlook #content table.tableblock th, +.boostlook #content table.tableblock th strong, +.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: var(--surface-background-main-surface-primary, #f5f6f8); + color: var(--text-main-text-primary, #000000); + font-size: var(--typography-font-size-xs, 0.875rem); + font-variation-settings: "wght" 500, "wdth" 80; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ +} + +.boostlook #content table.tableblock td, +.boostlook:not(:has(.doc)) table.table td, +.boostlook#libraryReadMe > table td { + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.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" 80; +} + +.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; +} + +.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; + overflow: hidden; +} + +/* 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; +} + +/* Asciidoc template - Content overflow handling */ +.boostlook:has(#content > .sect1) { + overflow-y: auto; + height: 100vh; +} + +/* 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 { + min-height: 100vh; + /* 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-4xs, 0.125rem) var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem); +} + +.boostlook .nav-menu .nav-list li:has(.nav-text), +.boostlook #toc > ul.sectlevel1 li:has(> ul):not(:first-of-type) { + margin-top: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem); +} + +.boostlook .nav-text, +.boostlook #toc > ul.sectlevel1 li:has(> ul) > a { + color: var(--text-main-text-body-quaternary, #949a9e); + font-size: var(--typography-font-size-2xs, 0.75rem); + font-variation-settings: "wght" 500, "wdth" 80; + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* 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; +} + +.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, #0284c7); + text-decoration: none; +} +/* +.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); + padding-left: calc(var(--padding-padding-sm, 1rem) + var(--leftbar-paddings-leftbar-padding-2xs)); +} + +.boostlook .nav-list li[data-depth]:not([data-depth="1"])::before, +.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li::before, +.boostlook:not(:has(.doc)) div.toc dd dt:before { + content: ""; + position: absolute; + left: var(--leftbar-paddings-leftbar-padding-2xs); + top: 0; + width: 1px; + height: 100%; + background: var(--border-border-secondary, #d5d7d9); +} + +.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-2xs, 0.75rem); + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + font-variation-settings: "wght" 600, "wdth" 80; +} + +/* 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; +} + +html:not(.is-clipped--nav):has(.boostlook) div#content { + display: block; + visibility: visible; +} + +html.is-clipped--nav:has(.boostlook) div#content { + display: none; + visibility: hidden; +} + +/* 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; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + border-right: 1px solid var(--border-border-primary, #e4e7ea); + 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: 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 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" 80; + line-height: var(--typography-line-height-xl, 1.75rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Rouge Syntax Highlighting */ +/* Light theme Rouge syntax highlighting */ +.boostlook pre.rouge .k { /* Keywords like const, auto */ + color: var(--atom-one-light-keyword, #a626a4); +} +.boostlook pre.rouge .kt { /* Types like char, int */ + color: var(--atom-one-light-keyword, #a626a4); +} +.boostlook pre.rouge .n, +.boostlook pre.rouge .nf { /* Names, identifiers, functions */ + color: var(--atom-one-light-text, #383a42); +} +.boostlook pre.rouge .o { /* Operators */ + color: var(--atom-one-light-operator, #e45649); +} +.boostlook pre.rouge .s, +.boostlook pre.rouge .s1, +.boostlook pre.rouge .s2 { /* Strings */ + color: var(--atom-one-light-string, #50a14f); +} +.boostlook pre.rouge .mi, +.boostlook pre.rouge .mf { /* Numbers */ + color: var(--atom-one-light-variable, #986801); +} +.boostlook pre.rouge .p { /* Punctuation */ + color: var(--atom-one-light-text, #383a42); +} +.boostlook pre.rouge .c, +.boostlook pre.rouge .c1, +.boostlook pre.rouge .cm { /* Comments */ + color: var(--atom-one-light-comment, #a0a1a7); + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +/* Dark theme Rouge syntax highlighting */ +html.dark .boostlook pre.rouge .k, +html.dark .boostlook pre.rouge .kt { + color: var(--atom-one-dark-keyword, #c678dd); +} +html.dark .boostlook pre.rouge .n, +html.dark .boostlook pre.rouge .nf { + color: var(--atom-one-dark-text, #abb2bf); +} +html.dark .boostlook pre.rouge .o { + color: var(--atom-one-dark-operator, #e06c75); +} +html.dark .boostlook pre.rouge .s, +html.dark .boostlook pre.rouge .s1, +html.dark .boostlook pre.rouge .s2 { + color: var(--atom-one-dark-string, #98c379); +} +html.dark .boostlook pre.rouge .mi, +html.dark .boostlook pre.rouge .mf { + color: var(--atom-one-dark-variable, #d19a66); +} +html.dark .boostlook pre.rouge .p { + color: var(--atom-one-dark-text, #abb2bf); +} +html.dark .boostlook pre.rouge .c, +html.dark .boostlook pre.rouge .c1, +html.dark .boostlook pre.rouge .cm { + color: var(--atom-one-dark-comment, #5c6370); + font-family: "Monaspace Xenon", monospace; + font-style: italic; +} + +.boostlook pre.rouge code span { + font-style: normal; +} + +/*----------------- 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, #0284c7); +} + +/* 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 */ +.boostlook .nav-list .is-current-page.is-active { + position: relative; + border-radius: var(--padding-padding-3xs, 0.25rem); + background: var(--surface-background-main-surface-blue-secondary, #daeef9); +} + +.boostlook #toc .nav-list .is-current-page.is-active > .nav-link { + color: var(--text-main-text-primary, #18191b); +} + +/* 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; + 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; + 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" 80; + 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 a { + font: inherit; + color: var(--text-main-text-link-blue-secondary, #0284c7); + text-decoration: none; + position: relative; +} + +.boostlook .breadcrumbs ul li a:hover { + text-decoration: underline; +} + +.boostlook .breadcrumbs ul li:first-of-type { + display: flex; + align-items: center; + padding: var(--spacing-size-3xs, 0.25rem); + margin-right: var(--padding-padding-xs, 0.75rem); + gap: var(--spacing-size-2xs, 0.5rem); + border-radius: var(--spacing-size-2xs, 0.5rem); + border: 1px solid var(--border-border-primary, #e4e7ea); + background: var(--surface-background-main-surface-primary, #f5f6f8); +} + +.boostlook .breadcrumbs ul li:first-of-type::after { + content: none; +} + +.boostlook .breadcrumbs ul li:first-of-type 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: 2px; + height: 2px; + 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::after, +.boostlook .breadcrumbs ul li:last-of-type::after { + content: none; +} + +.boostlook .breadcrumbs ul li:first-of-type a svg { + display: none; +} + +.boostlook .breadcrumbs ul li:first-of-type a::before { + content: var(--icon-home); +} + +/* 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 var(--border-border-primary, #e4e7ea); */ + /* background: var(--surface-background-main-base-primary, #fff); */ + width: 32px; + height: 32px; + text-decoration: none; + padding: 0; + position: relative; + transition: all 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(--colors-neutral-250, #f9f9f9); +} +.dark .boostlook .tablist > ul[role="tablist"] { + background-color: var(--colors-neutral-750, #1c1c1c); +} +.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: 6px; + 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-blue-50); +} + +#search-input:disabled { + background: var(--colors-neutral-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: 8px; + min-width: 400px; + border-radius: 8px; + 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: 8px; + min-width: 580px; + max-height: calc(100vh - 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: 6px; +} + +.search-result-item:hover { + background: var(--colors-neutral-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: 2px; + background: var(--colors-blue-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; + } + + .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; +} + +.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" 80; + 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" 80; + 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, "Noto 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" 80; + 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: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" 80; + 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" 80; + 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" 80; + 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; +} + +.boostlook#libraryReadMe > * { + max-width: unset; + margin-left: inherit; + margin-right: inherit; +} + +.boostlook#libraryReadMe > h1:first-child { + margin-top: 0; +} + +.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: var(--spacing-size-xl); + } +} + +/* === 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; + } + + .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 -----------------*/