From 1975b6e8ee352b6747b8c3b9d539cc0f5af11879 Mon Sep 17 00:00:00 2001 From: wdm-ih Date: Fri, 14 Feb 2025 12:02:06 +0200 Subject: [PATCH] update boostlook.css to new design system remove high level styles updated styles for common components; set basic layout margins; antora and asciidoc templates desktop antora and asciidoc mobile commented unused legacy css variables fixed styles for links in code blocks Quickbook template adaptation removed unused css vars templates specific adjustments; syntax colors --- boostlook.css | 4449 +++++++++---- .../asciidoctor-backend-html5/specimen.html | 5718 +++++++++++++++++ doc/specimen-docinfo-footer.html | 4 +- 3 files changed, 8909 insertions(+), 1262 deletions(-) create mode 100644 doc/bin/asciidoctor-backend-html5/specimen.html diff --git a/boostlook.css b/boostlook.css index 1248b4c..188dfa6 100644 --- a/boostlook.css +++ b/boostlook.css @@ -82,159 +82,318 @@ * - 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 + * - 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 (cross-theme) - * 2. Light Theme Variables - * 3. Dark Theme Variables + * 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 */ - --bl-header-height: 2.5rem; /* Standard header height */ + --bl-primary-color: rgb(255, 159, 0); /* Boost's signature orange color */ - /* Light Theme Variables - Color scheme for light mode */ - /* General Variables */ - --light-bl-secondary-color: rgb(2, 132, 199); + /*----------------- 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-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; - /* Background and Border Colors */ - --light-bl-background: rgb(255, 255, 255); - --light-bl-border-color: rgb(209, 209, 209); - --light-bl-card-background-color: rgb(255, 255, 255); - --light-bl-code-background: rgb(248, 248, 248); - --light-bl-code-border-color: rgb(220, 220, 220); - --light-bl-pre-background: rgb(248, 248, 248); - --light-bl-quote-background: rgb(255, 255, 255); - --light-bl-table-head-background: rgb(248, 248, 248); - --light-bl-table-stripe-color: rgb(248, 248, 248); - --light-bl-tabpanel-background: rgb(255, 255, 255); + /* 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; - /* Text Colors */ - --light-bl-code-text-color: rgb(0, 0, 0); - --light-bl-header-color: rgb(49, 74, 87); - --light-bl-nav-link-color: rgb(51, 65, 85); - --light-bl-paragraph-color: rgb(0, 0, 0); - --light-bl-text-color: rgb(51, 65, 85); + /* Colors Negative Shades */ + --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; - /* Interactive Elements */ - --light-bl-link-color: rgb(2, 132, 199); - --light-bl-link-hover-color: rgba(255, 159, 0); - --light-bl-nav-link-hover-color: rgb(2, 132, 199); + /* Colors Positive Shades */ + --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; - /* Syntax Highlighting */ - --light-bl-hljs-attribute-color: rgb(70, 130, 180); - --light-bl-hljs-doctag-color: rgb(221, 17, 68); - --light-bl-hljs-keyword-color: rgb(51, 51, 51); - --light-bl-hljs-number-color: rgb(0, 128, 128); - --light-bl-hljs-section-color: rgb(153, 0, 0); + /* Colors Warning Shades */ + --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; - /* UI Elements */ - --light-bl-breadcrumbs-svg-color: rgb(0, 0, 0); - --light-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23000000'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E"); - --light-bl-nav-fade-color: rgb(255, 255, 255, 1); - --light-bl-pasteboard-color: rgb(229, 231, 235); + /* Colors Blue Shades */ + --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; - /* Scrollbar Colors */ - --light-bl-scrollbar-track-color: rgb(234, 240, 243); - --light-bl-scrollbar-thumb-color: rgb(193, 193, 193); - --light-bl-scrollbar_hover-thumb-color: rgb(193, 193, 193); + /* 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; - /* Additional Theme Variables */ - --light-bl-table-border-color: rgb(209, 209, 209); - --light-bl-tab-background: rgb(240, 240, 240); + /* Colors Other */ + --colors-neutral-150: #d5d7d9; + --colors-neutral-850: #2a2c30; + --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); - /** - * Dark Theme Variables - * Color palette and design tokens for dark mode - */ - /* General Variables */ - --dark-bl-secondary-color: rgb(125, 211, 252); + /* 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-lg: 1.5rem; + --spacing-size-xl: 2rem; + --spacing-size-2xl: 2.5rem; + --spacing-size-3xl: 3rem; + --main-container: 90rem; - /* Background and Border Colors */ - --dark-bl-background: rgb(5, 26, 38); - --dark-bl-border-color: rgb(3, 25, 37); - --dark-bl-card-background-color: rgb(23, 42, 52); - --dark-bl-code-background: rgb(5, 26, 38); - --dark-bl-code-border-color: transparent; - --dark-bl-pre-background: rgb(5, 26, 38); - --dark-bl-quote-background: rgb(11, 59, 82); - --dark-bl-table-head-background: rgb(5, 26, 38); - --dark-bl-table-stripe-color: rgb(49,74,87); - --dark-bl-table-border-color: rgb(49, 74, 87); - --dark-bl-tabpanel-background: rgb(49, 74, 87); - --dark-bl-tab-background: rgb(30, 50, 65); + /* New Look Typography */ + --font-family-code: "Noto Sans Mono"; + --font-size-3xs: 0.625rem; + --font-size-2xs: 0.75rem; + --font-size-xs: 0.875rem; + --font-size-sm: 1rem; + --font-size-md: 1.125rem; + --font-size-lg: 1.25rem; + --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; - /* Text Colors */ - --dark-bl-code-text-color: rgb(255, 255, 255); - --dark-bl-header-color: rgb(255, 255, 255); - --dark-bl-nav-link-color: rgb(255, 255, 255); - --dark-bl-paragraph-color: rgb(255, 255, 255); - --dark-bl-text-color: rgb(255, 255, 255); + /* 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"); - /* Interactive Elements */ - --dark-bl-link-color: rgb(125, 211, 252); - --dark-bl-link-hover-color: rgb(255, 159, 0); - --dark-bl-nav-link-hover-color: rgb(2, 132, 199); + /* 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"); - /* Syntax Highlighting */ - --dark-bl-hljs-attribute-color: rgb(70, 130, 180); - --dark-bl-hljs-doctag-color: rgb(255, 99, 132); - --dark-bl-hljs-keyword-color: rgb(173, 216, 230); - --dark-bl-hljs-number-color: rgb(72, 209, 204); - --dark-bl-hljs-section-color: rgb(255, 69, 58); + /* 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"); - /* UI Elements */ - --dark-bl-breadcrumbs-svg-color: rgb(255, 255, 255); - --dark-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23ccc'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E"); - --dark-bl-nav-fade-color: rgb(23, 42, 52); - --dark-bl-pasteboard-color: rgb(05, 26, 38); - --dark-bl-pagination-color: rgb(200, 200, 200); - --dark-bl-quote-word-color: rgb(209, 228, 242); + /* 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"); - /* Scrollbar Colors */ - --dark-bl-scrollbar-track-color: rgb(46, 58, 66); - --dark-bl-scrollbar-thumb-color: rgb(109, 124, 133); - --dark-bl-scrollbar_hover-thumb-color: rgb(147, 161, 170); + /* 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"); - /** - * Specific Use Colors - * Special purpose colors for both light and dark themes - */ - /* Light Theme Special Colors */ - --site-light-red: red; - --site-light-green: green; - --site-light-lime: #00FF00; - --site-light-blue: blue; - --site-light-navy: rgb(20, 20, 164); - --site-light-yellow: yellow; - --site-light-magenta: magenta; - --site-light-indigo: #4B0082; - --site-light-cyan: cyan; - --site-light-purple: purple; - --site-light-gold: #987301; - --site-light-silver: silver; - --site-light-gray: #808080; + /* 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%20d%3D%22M9%2016.25C8.58579%2016.25%208.25%2016.5858%208.25%2017C8.25%2017.4142%208.58579%2017.75%209%2017.75H15C15.4142%2017.75%2015.75%2017.4142%2015.75%2017C15.75%2016.5858%2015.4142%2016.25%2015%2016.25H9Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.8808%203.23523C12.823%202.24353%2011.177%202.24353%2010.1192%203.23523L4.11916%208.86023C3.56462%209.38011%203.25%2010.1063%203.25%2010.8665V18C3.25%2019.5188%204.48122%2020.75%206%2020.75H18C19.5188%2020.75%2020.75%2019.5188%2020.75%2018V10.8665C20.75%2010.1063%2020.4354%209.38011%2019.8808%208.86023L13.8808%203.23523ZM11.1451%204.32953C11.6259%203.87876%2012.3741%203.87876%2012.8549%204.32953L18.8549%209.95453C19.107%2010.1908%2019.25%2010.5209%2019.25%2010.8665V18C19.25%2018.6903%2018.6904%2019.25%2018%2019.25H6C5.30964%2019.25%204.75%2018.6903%204.75%2018V10.8665C4.75%2010.5209%204.89301%2010.1908%205.14507%209.95453L11.1451%204.32953Z%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%20d%3D%22M9%2016.25C8.58579%2016.25%208.25%2016.5858%208.25%2017C8.25%2017.4142%208.58579%2017.75%209%2017.75H15C15.4142%2017.75%2015.75%2017.4142%2015.75%2017C15.75%2016.5858%2015.4142%2016.25%2015%2016.25H9Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.8808%203.23523C12.823%202.24353%2011.177%202.24353%2010.1192%203.23523L4.11916%208.86023C3.56462%209.38011%203.25%2010.1063%203.25%2010.8665V18C3.25%2019.5188%204.48122%2020.75%206%2020.75H18C19.5188%2020.75%2020.75%2019.5188%2020.75%2018V10.8665C20.75%2010.1063%2020.4354%209.38011%2019.8808%208.86023L13.8808%203.23523ZM11.1451%204.32953C11.6259%203.87876%2012.3741%203.87876%2012.8549%204.32953L18.8549%209.95453C19.107%2010.1908%2019.25%2010.5209%2019.25%2010.8665V18C19.25%2018.6903%2018.6904%2019.25%2018%2019.25H6C5.30964%2019.25%204.75%2018.6903%204.75%2018V10.8665C4.75%2010.5209%204.89301%2010.1908%205.14507%209.95453L11.1451%204.32953Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); - /* Dark Theme Special Colors */ - --site-dark-red: #fa6f6f; - --site-dark-green: #45b945; - --site-dark-lime: #00FF00; - --site-dark-blue: #6666f8; - --site-dark-navy: #6060c4; - --site-dark-yellow: yellow; - --site-dark-magenta: magenta; - --site-dark-indigo: #a53def; - --site-dark-cyan: cyan; - --site-dark-purple: #ac43ac; - --site-dark-gold: gold; - --site-dark-silver: silver; - --site-dark-gray: #808080; + /* 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-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-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-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-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); + } +} + +@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 -----------------*/ @@ -249,132 +408,234 @@ /* Light Theme (Default) Configuration */ html { - /* General Variables */ - --bl-secondary-color: var(--light-bl-secondary-color); + /*----------------- 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); - /* Background and Borders */ - --bl-background: var(--light-bl-background); - --bl-border-color: var(--light-bl-border-color); - --bl-card-background-color: var(--light-bl-card-background-color); - --bl-code-background: var(--light-bl-code-background); - --bl-code-border-color: var(--light-bl-code-border-color); - --bl-pre-background: var(--light-bl-pre-background); - --bl-quote-background: var(--light-bl-quote-background); - --bl-table-border-color: var(--light-bl-table-border-color); - --bl-table-head-background: var(--light-bl-table-head-background); - --bl-table-stripe-color: var(--light-bl-table-stripe-color); - --bl-tabpanel-background: var(--light-bl-tabpanel-background); + --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); - /* Typography and Colors */ - --bl-code-text-color: var(--light-bl-code-text-color); - --bl-header-color: var(--light-bl-header-color); - --bl-link-color: var(--light-bl-link-color); - --bl-link-hover-color: var(--light-bl-link-hover-color); - --bl-nav-link-color: var(--light-bl-nav-link-color); - --bl-nav-link-hover-color: var(--light-bl-nav-link-hover-color); - --bl-nav-fade-color: var(--light-bl-nav-fade-color); - --bl-paragraph-color: var(--light-bl-paragraph-color); - --bl-text-color: var(--light-bl-text-color); + --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); - /* UI Components */ - --bl-breadcrumbs-svg-color: var(--light-bl-breadcrumbs-svg-color); - --bl-caret-svg: var(--light-bl-caret-svg); - --bl-pasteboard-color: var(--light-bl-pasteboard-color); + --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); - /* Syntax Highlighting */ - --bl-hljs-doctag-color: var(--light-bl-hljs-doctag-color); - --bl-hljs-attribute-color: var(--light-bl-hljs-attribute-color); - --bl-hljs-keyword-color: var(--light-bl-hljs-keyword-color); - --bl-hljs-number-color: var(--light-bl-hljs-number-color); - --bl-hljs-section-color: var(--light-bl-hljs-section-color); + --text-code-red: var(--colors-code-colors-red-contrast); + --text-code-green: var(--colors-code-colors-green-contrast); + --text-code-blue: var(--colors-code-colors-blue-contrast); + --text-code-yellow: var(--colors-code-colors-yellow-contrast); + --text-code-purple: var(--colors-code-colors-purple-contrast); + --text-code-turquoise: var(--colors-code-colors-turquoise-contrast); + --text-code-neutral: var(--colors-code-colors-black); + --text-code-navy: var(--colors-code-colors-navy-contrast); - /* Scrollbar Styling */ - --bl-scrollbar-track-color: var(--light-bl-scrollbar-track-color); - --bl-scrollbar-thumb-color: var(--light-bl-scrollbar-thumb-color); - --bl-scrollbar_hover-thumb-color: var(--light-bl-scrollbar_hover-thumb-color); + --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); - /* Special Purpose Colors */ - --color-red: var(--site-light-red); - --color-green: var(--site-light-green); - --color-lime: var(--site-light-lime); - --color-blue: var(--site-light-blue); - --color-navy: var(--site-light-navy); - --color-yellow: var(--site-light-yellow); - --color-magenta: var(--site-light-magenta); - --color-indigo: var(--site-light-indigo); - --color-cyan: var(--site-light-cyan); - --color-purple: var(--site-light-purple); - --color-gold: var(--site-light-gold); - --color-silver: var(--site-light-silver); - --color-gray: var(--site-light-gray); + --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-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-secondary: var(--colors-overlay-overlay-white-88); + + --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-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-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-hover: var(--colors-blue-400); + + /*----------------- New Look Variables End -----------------*/ } /* Dark Theme Configuration */ html.dark { - /* General Variables */ - --bl-secondary-color: var(--dark-bl-secondary-color); + /*----------------- 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); - /* Background and Borders */ - --bl-background: var(--dark-bl-background); - --bl-border-color: var(--dark-bl-border-color); - --bl-card-background-color: var(--dark-bl-card-background-color); - --bl-code-background: var(--dark-bl-code-background); - --bl-code-border-color: var(--dark-bl-code-border-color); - --bl-pre-background: var(--dark-bl-code-background); - --bl-quote-background: var(--dark-bl-quote-background); - --bl-quote-word-color: var(--dark-bl-quote-word-color); - --bl-table-border-color: var(--dark-bl-table-border-color); - --bl-table-head-background: var(--dark-bl-table-head-background); - --bl-table-stripe-color: var(--dark-bl-table-stripe-color); - --bl-tabpanel-background: var(--dark-bl-tabpanel-background); + --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); - /* Typography and Colors */ - --bl-code-text-color: var(--dark-bl-code-text-color); - --bl-header-color: var(--dark-bl-header-color); - --bl-link-color: var(--dark-bl-link-color); - --bl-link-hover-color: var(--dark-bl-link-hover-color); - --bl-nav-link-color: var(--dark-bl-nav-link-color); - --bl-nav-link-hover-color: var(--dark-bl-nav-link-hover-color); - --bl-nav-fade-color: var(--dark-bl-nav-fade-color); - --bl-paragraph-color: var(--dark-bl-paragraph-color); - --bl-text-color: var(--dark-bl-text-color); + --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); - /* UI Components */ - --bl-breadcrumbs-svg-color: var(--dark-bl-breadcrumbs-svg-color); - --bl-caret-svg: var(--dark-bl-caret-svg); - --bl-pasteboard-color: var(--dark-bl-pasteboard-color); - --bl-pagination-color: var(--dark-bl-pagination-color); + --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); - /* Syntax Highlighting */ - --bl-hljs-attribute-color: var(--dark-bl-hljs-attribute-color); - --bl-hljs-doctag-color: var(--dark-bl-hljs-doctag-color); - --bl-hljs-keyword-color: var(--dark-bl-hljs-keyword-color); - --bl-hljs-number-color: var(--dark-bl-hljs-number-color); - --bl-hljs-section-color: var(--dark-bl-hljs-section-color); + --text-code-red: var(--colors-code-colors-red); + --text-code-green: var(--colors-code-colors-green); + --text-code-blue: var(--colors-code-colors-blue); + --text-code-yellow: var(--colors-code-colors-yellow); + --text-code-purple: var(--colors-code-colors-purple); + --text-code-turquoise: var(--colors-code-colors-turquoise); + --text-code-neutral: var(--colors-code-colors-white); + --text-code-navy: var(--colors-code-colors-navy); - /* Scrollbar Styling */ - --bl-scrollbar-track-color: var(--dark-bl-scrollbar-track-color); - --bl-scrollbar-thumb-color: var(--dark-bl-scrollbar-thumb-color); - --bl-scrollbar_hover-thumb-color: var(--dark-bl-scrollbar_hover-thumb-color); + --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); - /* Special Purpose Colors */ - --color-red: var(--site-dark-red); - --color-green: var(--site-dark-green); - --color-lime: var(--site-dark-lime); - --color-blue: var(--site-dark-blue); - --color-navy: var(--site-dark-navy); - --color-yellow: var(--site-dark-yellow); - --color-magenta: var(--site-dark-magenta); - --color-indigo: var(--site-dark-indigo); - --color-cyan: var(--site-dark-cyan); - --color-purple: var(--site-dark-purple); - --color-gold: var(--site-dark-gold); - --color-silver: var(--site-dark-silver); - --color-gray: var(--site-dark-gray); + --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-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-secondary: var(--colors-overlay-overlay-black-88); + + --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-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-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-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 -----------------*/ /** @@ -393,51 +654,55 @@ html.dark { @font-face { font-family: "Noto Sans Display"; font-style: normal; - font-weight: 100 900; /* Variable font weight range */ + font-weight: 100 900; + /* Variable font weight range */ font-variation-settings: "wght" 400; font-stretch: semi-condensed; - font-display: block; /* Prevents FOIT */ - src: url('/_/fonts/NotoSansDisplay.ttf') format('truetype'), - url('../../../../tools/boostlook/NotoSansDisplay.ttf') format('truetype'), - url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format('truetype'); + font-display: block; + /* Prevents FOIT */ + src: url("/_/fonts/NotoSansDisplay.ttf") format("truetype"), url("../../../../tools/boostlook/NotoSansDisplay.ttf") format("truetype"), + url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype"); } /* Noto Sans Display - Italic */ @font-face { font-family: "Noto Sans Display"; font-style: italic; - font-weight: 100 900; /* Variable font weight range */ + font-weight: 100 900; + /* Variable font weight range */ font-variation-settings: "wght" 400; font-stretch: semi-condensed; - font-display: block; /* Prevents FOIT */ - src: url("/font/NotoSansDisplay-Italic.ttf") format("truetype"), - url("../../../../tools/boostlook/NotoSansDisplay-Italic.ttf") format("truetype"), - url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format('truetype'); + font-display: block; + /* Prevents FOIT */ + src: url("/font/NotoSansDisplay-Italic.ttf") format("truetype"), url("../../../../tools/boostlook/NotoSansDisplay-Italic.ttf") format("truetype"), + url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype"); } /* Noto Sans Mono - Variable Weight */ @font-face { font-family: "Noto Sans Mono"; font-style: normal; - font-weight: 100 900; /* Variable font weight range */ + font-weight: 100 900; + /* Variable font weight range */ font-variation-settings: "wght" 400; font-stretch: semi-condensed; - font-display: block; /* Prevents FOIT */ - src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"), - url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"), - url("https://cppalliance.org/fonts/NotoSansMono.ttf") format('truetype'); + font-display: block; + /* Prevents FOIT */ + src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"), url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"), + url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype"); } /* Noto Sans Mono - Fixed Weight */ @font-face { font-family: "Noto Sans Mono"; font-style: normal; - font-weight: 400; /* Fixed weight for specific use cases */ + font-weight: 400; + /* Fixed weight for specific use cases */ font-stretch: ultra-condensed; - font-display: block; /* Prevents FOIT */ - src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"), - url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"), - url("https://cppalliance.org/fonts/NotoSansMono.ttf") format('truetype'); + font-display: block; + /* Prevents FOIT */ + src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"), url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"), + url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype"); } /*----------------- Font-Face Declarations end -----------------*/ @@ -447,17 +712,20 @@ html.dark { /** * Modern CSS Reset * A minimal CSS reset that: - * 1. Uses modern box-sizing model + * 1. Uses the modern box-sizing model * 2. Removes default margins * 3. Improves text rendering - * 4. Handles media elements consistently + * 4. Ensures responsive media elements * 5. Normalizes form elements * 6. Prevents text overflow issues - * 7. Provides proper stacking context + * 7. Provides a proper stacking context + * 8. Resets legacy table and adjacent element styles */ /* Box sizing rules */ -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: border-box; } @@ -466,31 +734,78 @@ html.dark { margin: 0; } +html body { + margin: 0; +} + /* Body defaults */ body { line-height: 1.5; - -webkit-font-smoothing: antialiased; /* Improves text rendering on WebKit */ + -webkit-font-smoothing: antialiased; + margin: 0; + /* Improves text rendering on WebKit */ } /* Media elements */ -img, picture, video, canvas, svg { +img, +picture, +video, +canvas, +svg { display: block; - max-width: 100%; /* Responsive media elements */ + max-width: 100%; + /* Responsive media elements */ } /* Form elements */ -input, button, textarea, select { - font: inherit; /* Inherit typography */ +input, +button, +textarea, +select { + font: inherit; + /* Inherit typography */ } /* Text elements */ -p, h1, h2, h3, h4, h5, h6 { - overflow-wrap: break-word; /* Prevent text overflow */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; + /* Prevent text overflow */ +} + +body :not(pre):not([class^="L"]) > code { + /* ovverrides builtin colors */ + color: var(--text-code-neutral, #0d0e0f); } /* Stacking context */ -#root, #__next { - isolation: isolate; /* Create new 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 -----------------*/ @@ -501,17 +816,21 @@ p, h1, h2, h3, h4, h5, h6 { * Global Styles for .boostlook * Core styles that apply to all .boostlook containers regardless of template. * These styles establish: - * 1. Typography hierarchy and spacing - * 2. Link appearances and interactions - * 3. Code block formatting - * 4. List and table styles - * 5. Layout structure and spacing + * 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: "Noto Sans Display" !important; - font-stretch: 90%; + font-stretch: 100%; + background: var(--surface-background-main-base-primary, #fff); } /* Typography Hierarchy @@ -519,56 +838,281 @@ p, h1, h2, h3, h4, h5, h6 { * 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 h6 { +.boostlook .doc h5, +.boostlook h6, +.boostlook .doc h6 { + color: var(--text-main-text-primary, #18191b); display: block; - line-height: 1; - margin-top: 2rem; - margin-bottom: 1rem; + line-height: var(--typography-line-height-xl, 1.75rem); + margin-top: var(--padding-padding-md, 1.125rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + margin-bottom: 0.5rem; font-weight: 500; position: relative; } /* Heading Sizes */ -.boostlook h1 { font-size: 1.8rem; } /* Primary headings */ -.boostlook h2 { font-size: 1.65rem; } /* Section headings */ -.boostlook h3 { font-size: 1.5rem; } /* Subsection headings */ -.boostlook h4 { font-size: 1.35rem; } /* Topic headings */ -.boostlook h5 { font-size: 1.25rem; } /* Subtopic headings */ -.boostlook h6 { font-size: 1rem; } /* Minor headings */ +.boostlook h1, +.boostlook .doc h1 { + font-size: var(--typography-font-size-2xl, 1.75rem); + line-height: var(--typography-line-height-3xl, 2.5rem); /* 142.857% */ +} -/* Document-specific heading adjustments */ +/* Primary headings */ +.boostlook h2, +.boostlook .doc h2 { + font-size: var(--typography-font-size-lg, 1.25rem); +} + +/* Section headings */ +.boostlook h3, +.boostlook .doc h3 { + font-size: var(--typography-font-size-md, 1.125rem); + line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */ +} + +/* Subsection headings */ +.boostlook h4, +.boostlook .doc h4 { + font-size: var(--font-size-sm, 1rem); + line-height: var(--font-line-height-lg, 1.5rem); +} + +/* Topic headings */ +.boostlook h5, +.boostlook .doc h5 { + font-size: var(--font-size-xs, 0.875rem); + line-height: var(--font-line-height-md, 1.25rem); +} + +/* 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 .anchor { - margin: 3px 0 0 -1.3ex; +.boostlook .doc h2:has(.anchor), +.boostlook .doc h1:has(.anchor), +.boostlook .doc h3:has(.anchor), +.boostlook .doc h4:has(.anchor), +.boostlook .doc h5:has(.anchor), +.boostlook .doc h6:has(.anchor) { + display: inline-block; + /* Anchor width and spacing compensation */ + padding-right: 3rem; } +/* Heading Anchors */ +.boostlook .doc h1 .anchor, .boostlook .doc h2 .anchor, -.boostlook .doc h3 .anchor { - margin: 2px 0 0 -1.3ex; -} - +.boostlook .doc h3 .anchor, .boostlook .doc h4 .anchor, .boostlook .doc h5 .anchor, .boostlook .doc h6 .anchor { - margin: 1px 0 0 -1.3ex; + 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 .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 { + content: var(--icon-anchor); + display: block; + line-height: 1; + opacity: 0.6; + transition: opacity 0.3s 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 { + opacity: 1; + 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 { + 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 { + 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 { - font-size: 1rem; - margin-bottom: 1.5rem; - color: var(--bl-text-color); padding-top: initial !important; padding-bottom: initial !important; + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-sm, 1rem); + font-weight: 400; + line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */ +} + +/* Components margins */ +.boostlook .paragraph + .paragraph, +.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 { + margin-top: var(--padding-padding-3xs, 0.25rem); +} + +.boostlook .paragraph + .tabs, +.boostlook #content .paragraph + .admonitionblock, +.boostlook #content .tabs + .paragraph, +.boostlook #content .colist + .paragraph, +.boostlook #content .admonitionblock + .tabs, +.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 { + 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, +.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 */ @@ -580,36 +1124,30 @@ p, h1, h2, h3, h4, h5, h6 { /* Link Styling */ .boostlook a, .boostlook .doc a { - color: var(--bl-link-color); - text-decoration: none; + color: var(--text-main-text-primary, #18191b); + font-weight: 500; + text-decoration-line: underline; + text-decoration-style: dotted; + text-decoration-skip-ink: auto; + text-decoration-color: var(--border-border-blue, #92cbe9); + text-decoration-thickness: 8%; + text-underline-offset: 12%; + text-underline-position: from-font; + transition: color 0.3s ease; } /* Link Hover States */ .boostlook a:hover, -.boostlook .doc a:hover, -#libraryReadMe a:hover, -#boost-legacy-docs-wrapper a:hover { - color: var(--bl-link-hover-color); +.boostlook .doc a:hover { + color: var(--text-main-text-link-blue-secondary, #0284c7); cursor: pointer; - text-decoration: underline; } /* Link States */ .boostlook p a:visited, -.boostlook table a, -.boostlook .pagination a { - color: var(--bl-link-color); -} - -/* Code Block Styling */ -.boostlook code, -.boostlook pre code, -.boostlook .doc .content pre code { - border-color: var(--bl-code-border-color); - color: var(--bl-code-text-color); - padding: 1.2em .8em; - font-family: "Noto Sans Mono", monospace; - margin-bottom: 1.25rem; +.boostlook table a:visited, +.boostlook .pagination a:visited { + color: var(--text-main-text-body-tetriary, #62676b); } /* Emphasis within code */ @@ -619,198 +1157,1518 @@ p, h1, h2, h3, h4, h5, h6 { font-size: inherit; } -/* Table Headings */ -.boostlook h6:has(+table) { - margin-left: 1em; +/* Text Emphasis */ +.boostlook b, +.boostlook strong { + font-variation-settings: "wght" 600; } -/* List Styling */ -.boostlook ul.itemizedlist, -#boost-legacy-docs-wrapper .ulist ul { - padding: 0 0 0 15px; +/* 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, "Noto Sans Mono"), 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-weight: 400; + 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:not(:has(> code)), +.boostlook pre:not(:has(> code)):has(p, span) { + font-size: var(--typography-font-size-xs, 0.875rem); + font-weight: 400; + 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 { + padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem); + background: var(--surface-background-main-surface-primary, #f5f6f8); + border-radius: 0.45rem; + border: unset; +} + +.boostlook .doc pre { + padding: initial; +} + +.boostlook .content:has(> pre), +.boostlook .content:has(> pre.highlight) { + border-radius: var(--spacing-size-2xs, 0.5rem); + border: 1px solid var(--border-border-secondary, #d5d7d9); + background: var(--surface-background-main-surface-secondary, #e4e7ea); +} + +/* 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: italic; + font-weight: 500; + line-height: var(--typography-line-height-md, 1.25rem); + letter-spacing: unset; + padding-bottom: var(--padding-padding-3xs, 0.25rem); +} + +/* 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 Display"; + font-size: var(--typography-font-size-2xs, 0.75rem); + font-style: normal; + font-weight: 400; + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); + z-index: 1; +} + +.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#libraryReadMe > pre, +.boostlook#libraryReadMe .literalblock:has(pre) { margin: 0; + margin-top: var(--padding-padding-3xs, 0.25rem); +} + +.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#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 .content:has(> pre):has(> .source-toolbox) pre { + border-top: 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; +} + +.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang { + color: var(--text-main-text-body-quaternary, #949a9e); + text-align: right; + font-family: "Noto Sans Display"; + font-size: var(--typography-font-size-2xs, 0.75rem); + font-style: normal; + font-weight: 500; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + text-transform: uppercase; + margin-left: auto; +} +.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-weight: 500; + line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */ } /* Code Styling */ -.boostlook h2 a code { - color: var(--bl-nav-link-color); - font-size: 1.65rem; -} - -.boostlook h3 a code, -.boostlook h3 a:hover code { - color: var(--bl-nav-link-color) !important; - font-size: 1.5rem; -} - -.boostlook code, -.boostlook p code, -.boostlook li code, -.boostlook .doc p code, -.boostlook .doc table code, -.boostlook .doc .colist > table code { - background: none; - padding: 0; +.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: var(--typography-font-size-xs, 0.875rem); + padding: 0 var(--padding-padding-3xs); + font-style: normal; font-weight: 400; + line-height: var(--typography-line-height-md); + letter-spacing: var(--spacing-size-size-0, 0rem); font-stretch: 90%; - color: var(--bl-code-text-color) !important; +} + +.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: var(--spacing-size-3xs, 0.25rem); + border: 1px solid var(--border-border-secondary, #d5d7d9); + background: var(--surface-background-main-surface-primary, #f5f6f8) !important; } /* Code Links */ -.boostlook code a, -.boostlook p code a, -.boostlook li code a, -.boostlook .doc p code a, -.boostlook .doc table code a, -.boostlook .doc .colist > table code a, -.boostlook a code, -.boostlook p a code, -.boostlook li a code, -.boostlook .doc p a code, +.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 { - color: var(--bl-link-color) !important; +.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: var(--spacing-size-3xs, 0.25rem); + border: 1px solid var(--border-border-blue, #92cbe9); + background: var(--surface-background-main-surface-blue-secondary, #daeef9) !important; + color: var(--text-states-text-additional-tetriary, #026a9f); } +/* 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 code a:hover, -.boostlook p code a:hover, -.boostlook li code a:hover, -.boostlook .doc p code a:hover, -.boostlook .doc table code a:hover, -.boostlook .doc .colist > table code a:hover, -.boostlook a:hover code, -.boostlook p a:hover code, +.boostlook p:not(:is(table p)) a:hover code, .boostlook li a:hover code, -.boostlook .doc p 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 { - color: var(--bl-link-hover-color) !important; +.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; } -/* Table Cell Code */ -.boostlook td code { - margin-bottom: 10px; +.boostlook a:hover code { + color: inherit; } -/* Quote Blocks */ -.boostlook .quoteblock, -.boostlook .verseblock { - background: var(--bl-quote-background); - border-left: 3px solid var(--bl-border-color); - color: var(--bl-text-color); -} - -.boostlook .quoteblock::before, -.boostlook .verseblock::before { - color: var(--bl-quote-word-color); -} - -/* Tab Panels */ -.boostlook .tabpanel { - background-color: var(--bl-tabpanel-background); +.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 { - color: var(--bl-hljs-keyword-color); +.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 .hljs-number { - color: var(--bl-hljs-number-color); +.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-code-navy, #162ec6); } +.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 .hljs-quote, +.boostlook .hljs-addition, +.boostlook .hljs-built_in, +.boostlook .hljs-bullet, +.boostlook .hljs-code { + color: var(--text-code-green, #48ac7b); +} + +.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 { - color: var(--bl-hljs-doctag-color); +.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(--bl-hljs-section-color); + color: var(--text-code-blue, #329cd2); } .boostlook .hljs-attribute, .boostlook .hljs-name, .boostlook .hljs-tag { - color: var(--bl-hljs-attribute-color); + 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) var(--spacing-size-2xs, 0.5rem) var(--spacing-size-2xs, 0.5rem) 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); + font-weight: 400; + line-height: var(--typography-line-height-lg, 1.5rem); +} + +.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; +} + +.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; } /* Pagination */ -.boostlook nav.pagination span::before { - color: var(--bl-pagination-color); +.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); } -/* Text Emphasis */ -.boostlook b, -.boostlook strong { - font-variation-settings: "wght" 700; +.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-weight: 500; + 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); +} + +.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-weight: 500; + 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:hover { + color: inherit; +} + +.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-xs, 0.75rem); + border: 1px solid transparent; + margin: revert; + background: transparent; +} + +/* 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; + padding: var(--spacing-size-3xs, 0.25rem) var(--spacing-size-2xs, 0.5rem); + align-items: center; + gap: var(--spacing-size-2xs, 0.5rem); + border-radius: 1.25rem; + background-color: var(--colors-neutral-500, #18191b); +} + +.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-2xs, 0.75rem); + font-weight: 500; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + text-transform: uppercase; +} +.boostlook #content .admonitionblock > table tr td.icon > * { + padding: 0; +} + +.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-weight: 500; + 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; +} + +.boostlook #content .admonitionblock.note, +.boostlook:not(:has(.doc)) div.note { + border-color: var(--border-border-blue, #92cbe9); +} +.boostlook #content .admonitionblock.note > table tr td.icon, +.boostlook:not(:has(.doc)) div.note > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.heading { + background: var(--surface-background-states-surface-additional-tetriary, #92cbe9); +} +.boostlook #content .admonitionblock.note > table tr td.icon > *, +.boostlook:not(:has(.doc)) div.note > table tr:first-child th, +.boostlook:not(:has(.doc)) .notices.heading { + color: var(--text-states-text-additional-tetriary, #026a9f); +} + +.boostlook #content .admonitionblock.tip, +.boostlook:not(:has(.doc)) div.tip { + border-color: var(--border-border-positive, #bdeed6); +} +.boostlook #content .admonitionblock.tip > table tr td.icon, +.boostlook:not(:has(.doc)) div.tip > table tr:first-child th { + 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 { + color: var(--text-states-text-positive-tetriary, #48ac7b); +} + +.boostlook #content .admonitionblock.important, +.boostlook #content .admonitionblock.caution, +.boostlook:not(:has(.doc)) div.important, +.boostlook:not(:has(.doc)) div.caution { + border-color: var(--border-border-warning, #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 { + 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 { + color: var(--text-states-text-warning-tetriary, #c25909); +} + +.boostlook #content .admonitionblock.warning, +.boostlook:not(:has(.doc)) div.warning { + border-color: var(--border-border-negative, #ffcad2); +} +.boostlook #content .admonitionblock.warning > table tr td.icon, +.boostlook:not(:has(.doc)) div.warning > table tr:first-child th { + 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 { + color: var(--text-states-text-negative-tetriary, #bc233c); +} + +/* Dlist */ +.boostlook #content .dlist:not(:first-child), +.boostlook .dlist dl dt:not(:first-child), +.boostlook:not(:has(.doc)) .variablelist:not(:first-child), +.boostlook:not(:has(.doc)) .variablelist dl dt:not(:first-child) { + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +.boostlook .dlist dl, +.boostlook:not(:has(.doc)) .variablelist dl { + display: flex; + flex-direction: column; +} + +.boostlook .dlist dl dt, +.boostlook:not(:has(.doc)) .variablelist dl dt { + display: block; + width: fit-content; + padding: var(--leftbar-paddings-leftbar-padding-0, 0rem) var(--padding-padding-2xs, 0.5rem); + border-radius: var(--spacing-size-3xs, 0.25rem); + border: 1px solid var(--border-border-secondary, #d5d7d9); + background: var(--surface-background-main-surface-primary, #f5f6f8); + color: var(--text-code-neutral, #0d0e0f); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-weight: 400; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); + margin-bottom: 0; +} + +.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 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(--padding-padding-2xs, 0.5rem); + 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); +} + +.boostlook .dlist dl dd p, +.boostlook:not(:has(.doc)) .variablelist dl dd p { + font: inherit; + margin: 0; +} + +/* 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-weight: 500; + 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: 1.25rem; - padding-right: 1.25rem; + padding-left: var(--main-margin); + padding-right: var(--main-margin); } .boostlook #header { padding-top: 1.25rem; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.boostlook #content { - padding-top: 1.25rem; - padding-bottom: .50rem; } .boostlook #footer { - padding-bottom: 1.25rem; - border-bottom-left-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; + 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-weight: 500; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); } -/* First Heading Adjustment */ -.boostlook h2:first-of-type { - margin-top: 0; +/* 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 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 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]) { + 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]) { + 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 { + 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 { + 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 { + 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 { + content: "•"; + 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; +} + +/* Arabic Ordered List */ +.boostlook .olist.arabic > ol > li, +.boostlook:not(:has(.doc)) .orderedlist > ol > li { + position: relative; + padding-left: 3rem; + counter-increment: list-counter; +} + +.boostlook .olist.arabic > ol > li::before, +.boostlook:not(:has(.doc)) .orderedlist > ol > li::before { + content: counter(list-counter, decimal-leading-zero); + 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-2xs, 0.75rem); + font-weight: 400; + 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-weight: 500; + 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 Display"; + font-style: normal; + font-weight: 500; + line-height: var(--typography-line-height-sm, 1rem); + font-size: var(--typography-font-size-2xs, 0.75rem); + text-align: center; + width: 24px; + height: 24px; + 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 .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; +} + +.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: var(--padding-padding-sm, 1rem); + vertical-align: top; + /* to make first column fit its content */ + width: 1%; + white-space: nowrap; +} + +/* 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 { + all: unset; + display: revert; +} + +.boostlook #content table.tableblock:not(:first-child), +.boostlook:not(:has(.doc)) .table:not(:first-child) { + margin-top: var(--padding-padding-xs, 0.75rem); +} + +.boostlook #content table.tableblock.stretch, +.boostlook:not(:has(.doc)) table.table { + min-width: 100%; +} + +.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: italic; + font-weight: 500; + line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */ + padding: 0; + padding-bottom: var(--padding-padding-3xs, 0.25rem); +} + +.boostlook #content table.tableblock caption > *, +.boostlook:not(:has(.doc)) div.table .title > * { + font-weight: inherit; + font-variation-settings: "wght" 500; +} + +.boostlook:not(:has(.doc)) div.table .title { + padding-bottom: var(--padding-padding-3xs, 0.25rem) !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 { + padding: var(--padding-padding-sm, 1rem) var(--spacing-size-sm, 1rem); + 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 { + 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 { + 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 { + border-top-left-radius: var(--spacing-size-xs, 0.75rem); +} + +.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 { + border-top-right-radius: var(--spacing-size-xs, 0.75rem); +} + +.boostlook #content table.tableblock tr:last-child td:first-child, +.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child { + border-bottom-left-radius: var(--spacing-size-xs, 0.75rem); +} + +.boostlook #content table.tableblock tr:last-child td:last-child, +.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child { + border-bottom-right-radius: var(--spacing-size-xs, 0.75rem); +} + +.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 { + 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-weight: 500; + font-variation-settings: "wght" 500; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ +} + +.boostlook #content table.tableblock td, +.boostlook:not(:has(.doc)) table.table td { + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-weight: 500; + line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */ + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +.boostlook #content table.tableblock td.valign-top, +.boostlook:not(:has(.doc)) table.table td.valign-top { + vertical-align: top; +} + +.boostlook #content table.tableblock td.valign-bottom, +.boostlook:not(:has(.doc)) table.table td.valign-bottom { + vertical-align: bottom; +} + +.boostlook #content table.tableblock td.valign-center, +.boostlook:not(:has(.doc)) table.table td.valign-center { + vertical-align: middle; +} + +.boostlook #content table.tableblock td.halign-left, +.boostlook:not(:has(.doc)) table.table td.halign-left { + text-align: left; +} + +.boostlook #content table.tableblock td.halign-center, +.boostlook:not(:has(.doc)) table.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 { + font: inherit; + color: inherit; +} + +.boostlook #content table.tableblock td strong, +.boostlook:not(:has(.doc)) table.table td strong { + font-weight: 600; + font-variation-settings: "wght" 600; +} + +.boostlook #content table.tableblock td code, +.boostlook:not(:has(.doc)) table.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 .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(:has(.doc)) .inlinemediaobject:has(> img, > object) { + display: inline-block; + vertical-align: text-bottom; + line-height: 0; } /*----------------- Global Styles for .boostlook end -----------------*/ +/* ----------- Scrollbars Styles Start ------------- */ + /** + * * Scrollbar Styling - * "Hide" scrollbar, and display on hover - * Comprehensive scrollbar customization for different contexts: - * 1. Global Scrollbar Styles - * 2. Template-specific adjustments - * 3. Code Elements - * 4. Table Containers + * + * 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. + * */ -/* Global Scrollbar Styles */ -.boostlook * { - scrollbar-color: initial !important; - scrollbar-width: initial !important; -} -.boostlook:not(:has(.doc)) ::-webkit-scrollbar { - width: 2px; - height: 2px; +@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; + } + } } -.boostlook ::-webkit-scrollbar-track { - border-radius: 8px; - background-color: var( --bl-scrollbar-track-color); +html::-webkit-scrollbar, +.boostlook::-webkit-scrollbar, +.boostlook *::-webkit-scrollbar { + width: 8px !important; + height: 8px !important; } -.boostlook ::-webkit-scrollbar-thumb { - background-color: var( --bl-scrollbar-thumb-color); /* blend into background */ +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 */ @@ -836,57 +2694,12 @@ html:has(#docsiframe)::-webkit-scrollbar { height: 100vh; } -.boostlook #content:has(> .doc)::-webkit-scrollbar, -.boostlook .nav::-webkit-scrollbar { - width: 10px; -} - -.boostlook #content:has(> .doc)::-webkit-scrollbar-thumb, -.boostlook .nav::-webkit-scrollbar-thumb { - border-radius: 8px; -} - - /* Asciidoc template - Content overflow handling */ .boostlook:has(#content > .sect1) { overflow-y: auto; height: 100vh; } -/* Code Elements */ -.boostlook pre::-webkit-scrollbar-track, -.boostlook code::-webkit-scrollbar-track { - background-color: var(--bl-pre-background); - border: 1px solid var(--bl-pre-background); -} - -.boostlook pre::-webkit-scrollbar-thumb, -.boostlook code::-webkit-scrollbar-thumb { - background-color: var(--bl-pre-background); -} - -.boostlook pre:hover::-webkit-scrollbar-thumb, -.boostlook code:hover::-webkit-scrollbar-thumb { - background-color: var(--bl-scrollbar-thumb-color); -} - -.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; - scrollbar-color: initial; - scrollbar-width: initial; -} - /* Table Container */ .boostlook .content div:has(> table), .boostlook .doc table.tableblock, @@ -894,147 +2707,35 @@ html:has(#docsiframe)::-webkit-scrollbar { overflow-x: auto !important; } -.boostlook .content div:has(> table)::-webkit-scrollbar-track, -.boostlook .doc table.tableblock::-webkit-scrollbar-track, -.boostlook #content .sect3:has(.tableblock)::-webkit-scrollbar-track { - border-radius: 1px; - background-color: var(--bl-background); -} - -.boostlook .content div:has(> table)::-webkit-scrollbar-thumb, -.boostlook .doc table.tableblock::-webkit-scrollbar-thumb, -.boostlook #content .sect3:has(.tableblock)::-webkit-scrollbar-thumb { - background-color: var(--bl-background); /* blend into background */ -} - -.boostlook .content div:has(> table):hover::-webkit-scrollbar-thumb, -.boostlook .doc table.tableblock:hover::-webkit-scrollbar-thumb, -.boostlook #content .sect3:has(.tableblock):hover::-webkit-scrollbar-thumb { - background-color: var(--bl-scrollbar-thumb-color); - color: var(--bl-scrollbar-thumb-color); -} - -/*----------------- 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 - */ - /* Article Layout */ .article.toc2.toc-left { min-height: 100vh; - max-width: 80rem; + /* with padding compensation */ + max-width: calc(var(--main-container) + 2rem); margin-left: auto; margin-right: auto; - background-color: var(--bl-pasteboard-color); + background: var(--surface-background-main-base-primary, #fff); position: relative; } -/* Pre-formatted Text Blocks */ -.boostlook:not(:has(.doc)) pre { - font-family: "Noto Sans Mono", monospace; - background-color: var(--bl-pre-background); - margin-bottom: 1.25rem; - padding: 1rem; - border-color: var(--bl-code-border-color); -} - -/* Table Styling */ -.boostlook:not(:has(.doc)) table { - border-collapse: collapse; - margin: 1em 0; - border: 1px solid var(--bl-table-border-color); -} - -.boostlook:not(:has(.doc)) th { - background-color: var(--bl-table-head-background); - text-align: left; - padding: 0.25em 0.55em; -} - -.boostlook:not(:has(.doc)) td { - border: 1px solid var(--bl-table-border-color); - padding: 0.25em 0.55em; -} - -/* Header Adjustments */ -.boostlook #header > h1 { - margin-top: 0; -} - -/* Table of Contents Styling */ -.boostlook #toc > ul.sectlevel1 { - padding-left: 0; -} - -.boostlook #toc ul { - margin: 0; - padding: 0 0 0 0.8rem; - line-height: 1.5; - font-size: 1rem; - list-style: none; -} - -/* Table of Contents Links */ -.boostlook #toc a { - color: var(--bl-nav-link-color); -} - -.boostlook #toc a:hover, -.boostlook #toc a:focus { - color: var(--bl-nav-link-hover-color); -} - -.boostlook #toc.toc2 { - padding-bottom: 1.5rem; -} - -.boostlook #toc .sectlevel1 > li > a { - font-variation-settings: "wght" 550; -} - -.boostlook #toc #toctitle { - font-size: 1.5rem; -} - +/* TOC Common start */ /* Background Colors */ .boostlook #toc.toc2, .boostlook #header:not(:has(.nav-container)), .boostlook #content, .boostlook #footer { - background-color: var(--bl-card-background-color); + background: var(--surface-background-main-base-primary, #fff); } - /* TOC Scrolling */ -.boostlook #toc.toc2, -.boostlook #toc.toc2.nav-container { +.boostlook #toc.toc2 { overflow-y: auto; } - /* TOC Positioning */ .boostlook #toc.toc2, #boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active { position: static; } -#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2 { - position: fixed; -} - -/* TOC List Padding */ -.boostlook #toc.toc2 > ul { - padding-bottom: 2rem; - box-sizing: border-box; - position: relative; - z-index: 0; -} - /* TOC Toggle Button */ .boostlook #toggle-toc { visibility: hidden; @@ -1043,71 +2744,183 @@ html:has(#docsiframe)::-webkit-scrollbar { } /* 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; + font-weight: 400; + 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 { - padding-left: 0 +.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-weight: 500; + 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; + font-weight: 400; + line-height: var(--typography-line-height-md, 1.25rem); /* 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 .nav-menu .title { - border-bottom: 1px solid var(--bl-table-border-color); - margin-bottom: 16px; +.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-weight: 600; } -/* Legacy Documentation Titles */ -#boost-legacy-docs-wrapper h2.title { - margin-top: 0; - margin-bottom: 0.5rem; - font-weight: 500; +/* 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.875em; + display: inline; + background: none !important; + padding: 0; + border: none; + color: inherit; + transition: none; } -#boost-legacy-docs-wrapper h3.title, -#boost-legacy-docs-wrapper.boostlook h3 { - font-weight: 550; - margin-bottom: 0.5rem; - font-feature-settings: normal; +/* Content */ +.boostlook #content .doc, +.boostlook #content > .sect1, +.boostlook #header > *, +.boostlook #footer > * { + max-width: var(--main-content-width); + margin: 0 auto; } -/* Rouge Syntax Highlighting */ -.boostlook pre.rouge .o { - font-weight: 400; +.boostlook #preamble + .sect1, +.boostlook .doc .sect1 + .sect1 { + margin-top: revert; } -.boostlook pre.rouge code span { - font-style: normal; +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; } - .article.toc2.toc-left { - padding: 1rem 1rem 0 1rem; - } - - .boostlook #toc.toc2 { - border-radius: 0.5rem; - } - .boostlook #toc.toc2 { position: fixed; - width: 17rem; - left: max(1rem, 50% - 39rem); - top: 1rem; + width: var(--main-max-width-leftbar); + left: max(1rem, 50% - 45rem); + top: 0; z-index: 1000; - height: calc(100vh - 1rem); - padding: 1rem; - padding: 1rem 1rem 1.5rem; + 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 { - margin-left: 18rem; + margin-left: var(--main-max-width-leftbar); } /* TOC Toggle Button */ @@ -1133,22 +2946,20 @@ html:has(#docsiframe)::-webkit-scrollbar { /* Hidden TOC */ html.toc-hidden .boostlook { margin-left: 0; - transition: margin-left 0.15s ease; } html.toc-hidden .boostlook #toggle-toc { - left: max(0rem, 50% - 39rem - 1rem); + left: max(0rem, 50% - 45rem - 1rem); } /* Visible TOC */ html.toc-visible .boostlook #toggle-toc { - left: max(0rem, 50% - 39rem - 1rem); + left: max(0rem, 50% - 45rem - 1rem); background-color: rgb(255, 255, 255, 1); } html.toc-visible .boostlook { margin-left: 0; - transition: margin-left 0.15s ease; } html.toc-hidden .boostlook #toc.toc2 { @@ -1158,13 +2969,13 @@ html:has(#docsiframe)::-webkit-scrollbar { html.toc-visible #toc.toc2 { opacity: 1; visibility: visible; - width: 250px; - padding-left: 1.5rem; + /* 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.10); + box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.1); } /* TOC Pin States */ @@ -1173,20 +2984,46 @@ html:has(#docsiframe)::-webkit-scrollbar { } html.toc-visible.toc-pinned .boostlook { - margin-left: 17rem; - transition: margin-left 0.15s ease; + margin-left: var(--main-max-width-leftbar); } } +/* TOC Common End */ -@media screen and (min-width: 1024px) { - html { - font-size: .83333rem; - } +/*----------------- Styles specific to AsciiDoctor content start -----------------*/ - html.toc-visible.toc-pinned .boostlook { - margin-left: 20rem; - transition: margin-left 0.15s ease; - } +/** + * 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-weight: 500; + line-height: var(--typography-line-height-xl, 1.75rem); + letter-spacing: var(--spacing-size-size-0, 0rem); +} + +/* Rouge Syntax Highlighting */ +.boostlook pre.rouge .o { + font-weight: 400; +} + +.boostlook pre.rouge code span { + font-style: normal; } /*----------------- Styles specific to AsciiDoctor content end -----------------*/ @@ -1204,29 +3041,26 @@ html:has(#docsiframe)::-webkit-scrollbar { * 5. Responsive design adaptations */ -/* Header Layout */ -.boostlook #header:has(.nav-container) { - padding: 0; +/* 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; } -/* Typography */ -.boostlook .doc { - line-height: 1.5rem; - padding-bottom: 1.5rem; +/* Toc Navigation */ +.boostlook #toc .nav-menu h3.title a { + color: inherit; + font: inherit; } -.boostlook .doc, -.boostlook .doc i { - color: var(--bl-text-color); - font-family: "Noto Sans Display"; -} - -.boostlook .nav-menu .title { - font-size: 1.5rem; -} - -.boostlook .breadcrumbs ul li { - font-size: 0.875rem !important; +.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 */ @@ -1242,25 +3076,50 @@ html:has(#docsiframe)::-webkit-scrollbar { margin-left: 0; } -.boostlook .nav-menu > .nav-list > .nav-list > li { - font-variation-settings: "wght" 550; +.boostlook .nav-list li[data-depth="1"].is-current-page.is-active { + padding-left: 1.375rem; } -/* Navigation Links */ -.boostlook .nav-link, -.boostlook .nav-menu a{ - cursor: pointer; - color: var(--bl-nav-link-color); - margin-right: -0.5rem; +.boostlook .nav-list li[data-depth="1"].is-current-page.is-active::before { + content: ""; + position: absolute; + width: 0.125rem; + height: 0.125rem; + border-radius: 2rem; + left: 0.625rem; + top: 50%; + transform: translateY(-50%); + background-color: var(--surface-icons-icon-blue, #026a9f); } -.boostlook .nav-link:hover, -.boostlook .nav-menu a:hover { - color: var(--bl-nav-link-hover-color); +.boostlook .nav-list li[data-depth]:not([data-depth="1"]).is-current-page.is-active::before { + background-color: var(--text-main-text-primary, #18191b); } -.boostlook .nav-text { - color: var(--bl-nav-link-color); +/* 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 { + font-weight: 400; + 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 */ @@ -1270,58 +3129,39 @@ html:has(#docsiframe)::-webkit-scrollbar { .boostlook #toc.toc2.nav-container.is-active { position: static; + height: 100vh; + padding: 0; + overflow-y: auto; } -.boostlook #header .nav-container.is-active { - padding: 1rem; -} - +/* Nav Toggle */ .boostlook #content .nav-toggle { - background-position-x: 0; -} - -/* Active Page Indicator */ -.boostlook .nav-list .is-current-page.is-active { - position: relative; -} - -.boostlook .is-current-page.is-active::before { - content: ""; - position: absolute; - top: 0.3125rem; - width: 16px; - height: 16px; - margin-left: -1.25rem; - background-image: var(--bl-caret-svg); - background-repeat: no-repeat; - background-position: center center; - background-size: 16px; -} - -/* Breadcrumbs */ -.boostlook .breadcrumbs { - display: block; -} - -.boostlook .breadcrumbs ul li:first-of-type { 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 .breadcrumbs svg { - fill: var(--bl-breadcrumbs-svg-color); +.boostlook #content .nav-toggle:before { + content: var(--icon-menu); + line-height: 0; } -/* Code Block */ -.boostlook .doc .content pre code { - background-color: var(--bl-pre-background); - border-color: var(--bl-code-border-color); - color: var(--bl-code-text-color); - padding: 1.2em .8em; - border-radius: 0; -} - -.boostlook .doc pre { - padding: initial; +@media screen and (min-width: 768px) { + .boostlook #content .nav-toggle { + display: none; + visibility: hidden; + } } /* Layout */ @@ -1337,76 +3177,269 @@ html:has(#docsiframe)::-webkit-scrollbar { padding-top: 0; } -/* Table of Contents */ -.boostlook .nav { +/* 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-weight: 500; + 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: var(--padding-padding-2xs, 0.5rem); +} + +.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 .toc .toc-menu a { - border-left: 0; - padding: .25rem 0 0 0; +.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; } -/* Admonitions */ -.boostlook .admonitionblock p { - line-height: normal; +.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 .doc .admonitionblock { - background-color: var(--bl-tabpanel-background); - border-radius: 8px; +.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="h"]::after { + content: var(--icon-home); } -/* Tabs */ -.boostlook .tabs:not(.is-loading) .tablist li:not(.is-selected) { - background-color: var(--bl-tab-background); +/* Tabs Elements */ +.boostlook .tabs .tabpanel { + border: revert; + padding: var(--padding-padding-xs, 0.75rem) 0; + background: transparent; } -.boostlook .tablist > ul li { - background-color: var(--bl-tabpanel-background); +.boostlook .tablist, +.boostlook .tabs .tabpanel { + border-bottom: 1px solid var(--border-border-primary, #e4e7ea); } -/* Tables */ -.boostlook .doc table.tableblock { +.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); + font-weight: 400; + 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; - margin-bottom: 1.5rem; - margin-top: 1rem; + height: 1px; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + border-bottom: 1px solid var(--text-main-text-primary, #18191b); } -.boostlook .doc table.tableblock tr th { - background-color: var(--bl-table-head-background); - font-size: 1rem; +.boostlook .tablist > ul .tab * { + color: inherit; } -.dark .doc table.stripes-even>tbody>tr:nth-of-type(2n) { - background-color: var(--bl-table-stripe-color); +.boostlook .tablist > ul .tab.is-selected { + color: var(--text-main-text-primary, #18191b); } -.boostlook .doc p.tableblock + p.tableblock { - margin-top: .25rem; +.boostlook .tablist.ulist > ul li + li { + margin-left: unset; } -/* Toolbar */ -.boostlook .toolbar .breadcrumbs a, -.boostlook .toolbar .breadcrumbs li { - color: var(--bl-text-color); -} - -@media screen and (max-width: 768px) { - .boostlook .toolbar { - width: calc(100% - 2.5rem); - position: fixed; - top: 0; - padding-top: 10px; - } -} - -/* Responsive Design */ -@media screen and (min-width: 768px) { - .boostlook #content:has(> article.doc) { - border-top-right-radius: 0.5rem; - border-top-left-radius: 0.5rem; - } +.boostlook .tabs:not(.is-loading) .tablist .tab:not(.is-selected) { + background-color: transparent; } /*----------------- Styles specific to Antora Templates end -----------------*/ @@ -1423,568 +3456,464 @@ html:has(#docsiframe)::-webkit-scrollbar { * 5. Code and syntax highlighting */ -/* Heading Styles */ -#boost-legacy-docs-wrapper.boostlook h1 { - font-size: 1.8rem; +/* Legacy boostlook container */ +.boostlook#boost-legacy-docs-wrapper { + margin-top: 0; + max-width: unset; + overflow: hidden; + position: relative; + min-height: 100vh; } -#boost-legacy-docs-wrapper.boostlook h2 { - font-size: 1.65rem; - border-bottom: 1px solid #eaf0f3; - border-bottom: 1px solid var(--bl-table-border-color); +.boostlook#boost-legacy-docs-wrapper > #header, +.boostlook#boost-legacy-docs-wrapper > #content, +.boostlook#boost-legacy-docs-wrapper > #footer, +.boostlook#boost-legacy-docs-wrapper > #footnotes { + width: auto; + max-width: unset; + margin-left: auto; +} + +/* Add Side margin for legacy boostlook container */ +#boost-legacy-docs-wrapper:not(:has(.doc)) { + 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-weight: 500; -} - -#boost-legacy-docs-wrapper.boostlook h3 { - font-size: 1.5rem; -} - -#boost-legacy-docs-wrapper.boostlook h4 { - font-size: 1.35rem; -} - -/* Paragraph Spacing */ -#boost-legacy-docs-wrapper.boostlook p, -.boostlook p { - margin-bottom: 0; - font-size: 16px; -} - -#boost-legacy-docs-wrapper li { - font-size: 16px; -} - -/* Table Headers */ -#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) th { - background-color: var(--bg-color); - border-color: var(--bl-border-color); -} - -/* Special Content Blocks */ -.boostlook div.note, -.boostlook div.tip, -.boostlook div.important, -.boostlook div.caution, -.boostlook div.warning, -.boostlook div.blurb, -.boostlook p.blurb { - border: 1px solid var(--bl-border-color); - border-radius: 8px; - background-color: var(--bl-tabpanel-background); - margin: 1pc 0 0 0; - padding: 8px; -} - -/* Special Block Tables */ -.boostlook div.note table, -.boostlook div.tip table, -.boostlook div.important table, -.boostlook div.caution table, -.boostlook div.warning table, -.boostlook div.blurb table, -.boostlook p.blurb table { - border: none; - border-collapse: collapse; + line-height: var(--typography-line-height-3xl, 2.5rem); + letter-spacing: var(--spacing-size-size-0, 0rem); margin: 0; } -/* Special Block Headers */ -.boostlook div.note th, -.boostlook div.tip th, -.boostlook div.important th, -.boostlook div.caution th, -.boostlook div.warning th, -.boostlook div.blurb th, -.boostlook .blurb th { - background-color: transparent !important; - font-size: 16px; +/* 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 { + margin: 0; + color: var(--text-main-text-primary, #18191b); + font-size: var(--typography-font-size-lg, 1.25rem); + font-style: normal; + font-weight: 500; + line-height: var(--typography-line-height-xl, 1.75rem); + letter-spacing: var(--spacing-size-size-0, 0rem); } -/* Special Block Cells */ -.boostlook div.note td, -.boostlook div.tip td, -.boostlook div.important td, -.boostlook div.caution td, -.boostlook div.warning td, -.boostlook div.blurb td, -.boostlook p.blurb td { - border: none !important; - padding: 1px; +/* 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 { + margin-top: var(--padding-padding-md, 1.125rem); } -/* Pre-formatted Text */ -.boostlook:not(:has(.doc)) td pre { - padding: 5px; +/* 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); } -/* Program Listings */ -.boostlook .programlisting { - margin: 1rem 0; +/* 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); } -/* Table Typography */ -.boostlook table h1, -.boostlook table h2, -.boostlook table h3 { - line-height: 2rem; +/* 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 { + color: var(--text-main-text-body-secondary, #494d50); + font-size: var(--typography-font-size-xs, 0.875rem); + font-style: normal; + font-weight: 400; + line-height: var(--typography-line-height-lg, 1.5rem); + margin-top: var(--padding-padding-2xs, 0.5rem); } -.boostlook table h4, -.boostlook table h5, -.boostlook table h6 { - line-height: 1.75rem; +/* 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; } -/* Variable Lists */ -.boostlook:not(:has(.doc)) div.variablelist dl dt { - margin-bottom: 0.2em; - font-variation-settings: "wght" 700; +/* 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 { + color: var(--text-main-text-body-primary, #2a2c30); + font-size: var(--typography-font-size-sm, 1rem); + font-style: normal; + font-weight: 400; + line-height: var(--typography-line-height-lg, 1.5rem); + margin-top: var(--padding-padding-2xs, 0.5rem); } -.boostlook:not(:has(.doc)) div.variablelist dl dd { - margin: 0em 0em 0.5em 2em; - font-size: 10pt; +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice { + margin-bottom: var(--padding-padding-md, 1.125rem); } -.boostlook:not(:has(.doc)) div.variablelist table tbody tr td p, -.boostlook:not(:has(.doc)) div.variablelist dl dd p { - margin: 0em 0em 0.5em 0em; - line-height: 1; +/* Remove
s */ +.boostlook:not(:has(.doc)) .titlepage hr { + display: none; } /* Table of Contents */ .boostlook:not(:has(.doc)) div.toc { - border-radius: 8px; - padding: 1rem; - margin: 1rem 0; - font-size: 80%; - line-height: 1.15; - color: var(--text-color); - border: 1px solid var(--bl-border-color); - background-color: var(--bl-pre-background); -} - -.boostlook:not(:has(.doc)) div.toc dl.toc { - background-color: transparent; -} - -.boostlook:not(:has(.doc)) #toc ul { - list-style: none !important; - margin: 0.5rem 0 !important; -} - -#boost-legacy-docs-wrapper.boostlook div.toc > p { - padding-top: 0 !important; -} - -.boostlook dl.toc > dt { - font-variation-settings: "wght" 550; -} - -.boostlook dl.toc dd { - padding-left: .6rem; -} - -/* Copyright Footer */ -.boostlook .copyright-footer { - padding: 1rem; -} - -/* Section Layout */ -body > .section, -body > .chapter, -#boost-legacy-docs-wrapper.boostlook > .section, -#boost-legacy-docs-wrapper.boostlook > .chapter, -#boost-legacy-docs-wrapper.boostlook > .document, -#boost-legacy-docs-wrapper.boostlook > .refentry, -#boost-legacy-docs-wrapper.boostlook > .book { - margin: 0rem 1rem; - padding: 1rem; - background-color: var(--card-color); - border-radius: 0.5rem; -} - -/* Spirit Navigation */ -.boostlook:not(:has(.doc)) .spirit-nav { - position: relative; - float: right; - top: 0.2rem; - right: 28px; - text-align: right; - margin: 0.75rem; - padding-left: 10px; - max-width: 80rem; - display: flex; - z-index: 5; -} - -.boostlook:not(:has(.doc)) .spirit-nav a, -#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) .spirit-nav a { - font-family: 'Material Symbols Outlined'; - font-size: 18px; - display: inline-block; - padding-left: 0.5em; - width: 24px; - height: 24px; - color: var(--bl-nav-link-color); -} - -.boostlook:not(:has(.doc)) .spirit-nav a:hover, -#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) .spirit-nav a:hover, -.toolbar a:hover .material-symbols-outlined { - color: var(--bl-primary-color); - text-decoration: none; -} - -.boostlook:not(:has(.doc)) .spirit-nav a img { - display: none; - border-width: 0px; -} - -.dark .boostlook:not(:has(.doc)) .spirit-nav img { - -webkit-filter: invert(100%); - filter: invert(100%); -} - -/* hide footer spirit nav since it wasn't visible before */ -.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav { - display: none !important; -} - -/* Spirit Navigation Icons */ -.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='p']::after { - content: "arrow_back"; -} -.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='u']::after { - content: "arrow_upward"; -} -.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='h']::after { - content: "home"; -} -.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='n']::after { - content: "arrow_forward"; -} - -/* Responsive Spirit Navigation */ -@media screen and (max-width: 768px) { - .boostlook:not(:has(.doc)) .spirit-nav { - right: 2rem; - top: 0.2rem; - } -} - -/* Legacy Styling Overrides */ -body[bgcolor="white"]:has(.boostlook):not(:has(.doc)) { - background-color: transparent; -} - -.boostlook:not(:has(.doc)) { - border-radius: 0; -} - -/* General Elements */ -.boostlook:not(:has(.doc)) h1, -.boostlook:not(:has(.doc)) h2, -.boostlook:not(:has(.doc)) h2:first-of-type, -.boostlook:not(:has(.doc)) h3, -.boostlook:not(:has(.doc)) h4, -.boostlook:not(:has(.doc)) h5, -.boostlook:not(:has(.doc)) h6 { - margin: 1em 0em 0.5em; -} - -.boostlook:not(:has(.doc)) h5 { - font-style: italic; + 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; font-weight: 400; - font-size: 110%; -} - -.boostlook:not(:has(.doc)) h1 a, -.boostlook:not(:has(.doc)) h2 a, -.boostlook:not(:has(.doc)) h3 a, -.boostlook:not(:has(.doc)) h4 a { - color: var(--bl-header-color) -} - -.boostlook:not(:has(.doc)) p { - padding: 1em 0 !important; -} - -.boostlook:not(:has(.doc)) li p { - padding: 0 !important; -} - -.boostlook:not(:has(.doc)) > hr { - display: none; -} - -.boostlook:not(:has(.doc)) ol { - padding-left: 1em; -} - -.boostlook:not(:has(.doc)) ol li { - list-style-type: decimal; -} - -/* Pre-formatted Text and Code */ -.boostlook:not(:has(.doc)) pre { - background-color: var(--bl-pre-background); - border: 1px solid var(--bl-code-border-color); - padding: 1.2em .8em; + line-height: var(--typography-line-height-md, 1.25rem); margin: 0; -} - -.boostlook:not(:has(.doc)) pre code { + margin-bottom: var(--padding-padding-md, 1.125rem); + padding: 0; border: none; } -.boostlook:not(:has(.doc)) :not(.highlight) pre { - color: var(--bl-code-text-color); +.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-weight: 600; + line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */ + letter-spacing: var(--spacing-size-size-0, 0rem); } -/* Table Headers */ -.boostlook:not(:has(.doc)) div.informaltable table tr th, -.boostlook:not(:has(.doc)) div.table table tr th { - border: 1px solid var(--bl-border-color); +.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; + font-weight: 400; + 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)) > * { + max-width: var(--main-content-width); + margin-left: inherit; + margin-right: inherit; +} + +/* 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 { + 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-weight: 500; + 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-xs, 0.75rem); + 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-xs, 0.75rem); + 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-2xs, 0.5rem) var(--spacing-size-sm, 1rem); + 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-weight: 500; + 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-2xs, 0.5rem) var(--spacing-size-sm, 1rem); +} + +/* 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 { - text-align: right; - font-size: 70%; -} - -.boostlook:not(:has(.doc)) .copyright-footer p { + color: var(--text-main-text-body-quaternary, #949a9e); + font-size: var(--typography-font-size-xs); + font-weight: 500; + line-height: var(--typography-line-height-sm, 1rem); + letter-spacing: var(--spacing-size-size-0, 0rem); text-align: left; - font-size: 10pt; - line-height: 1.15; } -/* Syntax Highlighting */ -.property, -.highlight .k, -.highlight .kc, -.highlight .kd, -.highlight .kn, -.highlight .kp, -.highlight .kr, -.highlight .kt, -.keyword { - color: var(--color-purple); +/* 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); } -.highlight .n, -.highlight .na, -.highlight .nb, -.highlight .bp, -.highlight .nc, -.highlight .no, -.highlight .nd, -.highlight .ni, -.highlight .ne, -.highlight .nf, -.highlight .py, -.highlight .nl, -.highlight .nn, -.highlight .nx, -.highlight .nt, -.highlight .nv, -.highlight .vc, -.highlight .vg, -.highlight .vi, -.identifier { - color: var(--color-navy); +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content hr { + display: none; } -.special { - color: var(--text-color); +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet { + position: relative; } -.highlight .cp, -.preprocessor { - color: var(--color-blue); +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) { + margin: 0; + border: none; + padding: 0; } -.highlight .sc -.char { - color: var(--color-lime); +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #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); } -.highlight .c, -.highlight .ch, -.highlight .cm, -.highlight .cp, -.highlight .cpf, -.highlight .c1, -.highlight .cs, -.highlight .sd, -.highlight .sh, -.comment { - color: var(--color-green); +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]) { + margin-left: 0; + margin-right: 0; } -.highlight .s, -.highlight .sa, -.highlight .sb, -.highlight .dl, -.highlight .s2, -.highlight .se, -.highlight .si, -.highlight .sx, -.highlight .sr, -.highlight .s1, -.highlight .ss, -.string { - color: var(--color-gold); +/* 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))#boost-legacy-docs-wrapper > #content > pre:not([class]):not(:last-child), +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:not(:last-child) pre { + margin-bottom: var(--padding-padding-xs, 0.75rem); } -.highlight .m, -.highlight .mf, -.highlight .mh, -.highlight .mi, -.highlight .mo, -.number { - color: var(--color-red); +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content + p:has(> small) { + padding: var(--padding-padding-lg) 0 !important; } -.highlight, -.white_bkd { - background-color: var(--card-color); +/* Outcome 2.2 Weird Template fix */ +.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .footnotes { + padding-top: var(--padding-padding-xs, 0.75rem); } -.highlight .hll, -.dk_grey_bkd { - background-color: var(--border-color); +@media screen and (min-width: 768px) { + body.article:has(.boostlook#boost-legacy-docs-wrapper) { + /* !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 { + /* Adjust this to "max(1rem, 50% - 45rem)" + * when website container width will be used as in new look design + */ + left: max(0rem, 50% - 45rem); + } } /*----------------- Quickbook Documentation Styles end -----------------*/ /*----------------- Library README Styles start -----------------*/ -/** - * Library README Styles - * Specific styles for the Boost library README pages. - * These styles handle: - * 1. Typography and heading hierarchy - * 2. Content spacing and margins - * 3. List styling and nesting - * 4. Link appearances - */ - -/* Base Container */ .boostlook#libraryReadMe { margin-left: 0; } -/* Headings */ -.boostlook#libraryReadMe h1 { - font-size: 1.875rem; - font-variation-settings: "wght" 600; - line-height: 1em; - border-bottom: 1px solid var(--bl-border-color); +.boostlook#libraryReadMe > * { + max-width: unset; + margin-left: inherit; + margin-right: inherit; } -.boostlook#libraryReadMe h2 { - margin-top: 0.75rem; - font-size: 1.5rem; - font-variation-settings: "wght" 600; - line-height: 1em; - border-bottom: 1px solid var(--bl-border-color); -} - -.boostlook#libraryReadMe h3 { - margin-top: 0.75rem; - font-size: 1.25rem; - font-variation-settings: "wght" 600; - margin-bottom: 0.5rem; - font-feature-settings: normal; -} - -.boostlook#libraryReadMe h4 { - font-size: 1.35rem; -} - -/* Paragraphs */ -.boostlook#libraryReadMe p { - font-size: 1rem; - padding-bottom: 0.25rem; - font-variation-settings: "wght" 300; - margin-bottom: 0; -} - -/* Lists */ -.boostlook#libraryReadMe ul { - list-style-type: disc; - list-style-position: inside; - padding-left: 1rem; - margin-bottom: 1.5rem; -} - -.boostlook#libraryReadMe ul li { - font-size: 1rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-variation-settings: "wght" 300; -} - -.boostlook#libraryReadMe li p { - display: inline; -} - -/* Special list cases */ -.boostlook#libraryReadMe > h3 + ul { - list-style-type: none; -} - -.boostlook#libraryReadMe > h3 + ul > li > a { - font-variation-settings: "wght" 600; -} - -.boostlook#libraryReadMe ul > li > ul > li { - list-style-type: disc; -} - -.boostlook#libraryReadMe ul > li > ul > li > a { - font-variation-settings: "wght" 400; -} - -.boostlook#libraryReadMe h3 + p + ul { - list-style-type: none; -} - -.boostlook#libraryReadMe h3 + p + ul > li { - font-variation-settings: "wght" 600; -} - -/* Tables */ -.boostlook#libraryReadMe table { - table-layout: auto; - width: 100%; -} - -/* Links */ -.boostlook#libraryReadMe a { - color: var(--bl-link-color); -} - -.boostlook#libraryReadMe a img { - display: inline; -} - -/* Code Blocks */ -.boostlook#libraryReadMe pre { - padding: 0; -} - -.boostlook#libraryReadMe pre code { - background-color: var(--bl-code-background); - margin-bottom: 0; -} - -/* Syntax Highlighting Fix */ -.boostlook#libraryReadMe .language- span { - color: inherit; - font-weight: initial; +.boostlook#libraryReadMe > h1:first-child { + margin-top: 0; } /*----------------- Library README Styles end -----------------*/ diff --git a/doc/bin/asciidoctor-backend-html5/specimen.html b/doc/bin/asciidoctor-backend-html5/specimen.html new file mode 100644 index 0000000..e6e5425 --- /dev/null +++ b/doc/bin/asciidoctor-backend-html5/specimen.html @@ -0,0 +1,5718 @@ + + + + + + + + +CharConv: An Implementation of <charconv> in C++11 + + +
+ +
+
+

Overview

+
+
+

Description

+
+

Boost.Charconv converts character buffers to numbers, and numbers to character buffers. +It is a small library of two overloaded functions to do the heavy lifting, plus several supporting enums, structures, templates, and constants, with a particular focus on performance and consistency +across the supported development environments.

+
+
+

Why should I be interested in this Library? Charconv is locale-independent, non-allocating1, non-throwing and only requires a minimum of C++ 11. +It provides functionality similar to that found in std::printf or std::strtod with substantial performance increases. +This library can also be used in place of the standard library <charconv> if unavailable with your toolchain. +Currently only GCC 11+ and MSVC 19.24+ support both integer and floating-point conversions in their implementation of <charconv>.
+If you are using either of those compilers, Boost.Charconv is at least as performant as <charconv>, and can be up to several times faster. +See: Benchmarks

+
+
+

1 The one edge case where allocation may occur is you are parsing a string to an 80 or 128-bit long double or __float128, and the string is over 1024 bytes long.

+
+
+
+

Supported Compilers / OS

+
+

Boost.Charconv is tested on Ubuntu, macOS, and Windows with the following compilers:

+
+
+
    +
  • +

    GCC 5 or later

    +
    • +
  • +

    Clang 3.8 or later

    +
    • +
  • +

    Visual Studio 2015 (14.0) or later

    +
    • +
+
+
+

Tested on GitHub Actions and Drone.

+
+
+
+
+
+

Getting Started

+
+
+

B2

+
+

Run the following commands to clone the latest versions of Boost and Charconv, prepare the Boost.Build system for use, and build the libraries with C++11 as the default standard:

+
+
+
+
git clone https://github.com/boostorg/boost
+cd boost
+git submodule update --init
+cd ..
+./bootstrap
+./b2 cxxstd=11
+
+
+
+

To install the development environment, run:

+
+
+
+
sudo ./b2 install cxxstd=11
+
+
+
+

The value of cxxstd must be at least 11. See the b2 documentation under cxxstd for all valid values.

+
+
+
+

__float128 and std::float128_t Support

+
+

If using B2 or CMake the build system will automatically define BOOST_CHARCONV_HAS_QUADMATH and link against it if the build system can successfully run a small test case. +If you are using another build system and you want support for these types you will have to define BOOST_CHARCONV_HAS_QUADMATH, and link against libquadmath.

+
+
+ + + + + +
+
Important
+		 +libquadmath is only available on supported platforms (e.g. Linux with x86, x86_64, PPC64, and IA64). +
+
+
+
+

Dependencies

+
+

This library depends on: Boost.Assert, Boost.Config, Boost.Core, and optionally libquadmath (see above).

+
+
+
+
+
+

Basic Usage Examples

+
+
+

Usage Examples

+
+
+
#include <boost/charconv.hpp>
+
+const char* buffer = "42";
+int v = 0;
+boost::charconv::from_chars_result r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v);
+assert(r.ec == std::errc());
+assert(v == 42);
+
+char buffer[64];
+int v = 123456;
+boost::charconv::to_chars_result r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer), v);
+assert(r.ec == std::errc());
+assert(!strncmp(buffer, "123456", 6)); // Strncmp returns 0 on match
+
+
+
+
+
+
+

API Reference

+
+
+

Functions

+
+ +
+
+
+

Structures

+
+ +
+
+
+

Enums

+
+ +
+
+
+

Constants

+
+ +
+
+
+

Macros

+
+ +
+
+
+
+
+

from_chars

+
+
+

from_chars overview

+
+

from_chars is a set of functions that parse a string from [first, last) in an attempt to convert the string into value according to the chars_format specified (if applicable). +The parsing of number is locale-independent (e.g. equivalent to the "C" locale). +The result of from_chars is from_chars_result which on success returns ptr == last and ec == std::errc(), and on failure returns ptr equal to the last valid character parsed or last on underflow/overflow, and ec == std::errc::invalid_argument or std::errc::result_out_of_range respectively. from_chars does not require the character sequence to be null terminated.

+
+
+
+

Definitions

+
+
+
namespace boost { namespace charconv {
+
+struct from_chars_result
+{
+    const char* ptr;
+    std::errc ec;
+
+    friend constexpr bool operator==(const from_chars_result& lhs, const from_chars_result& rhs) noexcept = default;
+    constexpr explicit operator bool() const noexcept { return ec == std::errc{}; }
+}
+
+template <typename Integral>
+BOOST_CXX14_CONSTEXPR from_chars_result from_chars(const char* first, const char* last, Integral& value, int base = 10) noexcept;
+
+template <typename Integral>
+BOOST_CXX14_CONSTEXPR from_chars_result from_chars(boost::core::string_view sv, Integral& value, int base = 10) noexcept;
+
+BOOST_CXX14_CONSTEXPR from_chars_result from_chars<bool>(const char* first, const char* last, bool& value, int base) = delete;
+
+template <typename Real>
+from_chars_result from_chars(const char* first, const char* last, Real& value, chars_format fmt = chars_format::general) noexcept;
+
+template <typename Real>
+from_chars_result from_chars(boost::core::string_view sv, Real& value, chars_format fmt = chars_format::general) noexcept;
+
+// See note below Usage notes for from_chars for floating point types
+
+template <typename Real>
+from_chars_result from_chars_erange(const char* first, const char* last, Real& value, chars_format fmt = chars_format::general) noexcept;
+
+template <typename Real>
+from_chars_result from_chars_erange(boost::core::string_view sv, Real& value, chars_format fmt = chars_format::general) noexcept;
+
+}} // Namespace boost::charconv
+
+
+
+
+

from_chars parameters

+
+
    +
  • +

    first, last - pointers to a valid range to parse

    +
    • +
  • +

    sv - string view of a valid range to parse. +Compatible with boost::core::string_view, std::string, and std::string_view

    +
    • +
  • +

    value - where the output is stored upon successful parsing

    +
    • +
  • +

    base (integer only) - the integer base to use. Must be between 2 and 36 inclusive

    +
    • +
  • +

    fmt (floating point only) - The format of the buffer. See chars_format overview for description.

    +
    • +
+
+
+
+

from_chars_result

+
+
    +
  • +

    ptr - On return from from_chars it is a pointer to the first character not matching the pattern, or pointer to last if all characters are successfully parsed.

    +
    • +
  • +

    ec - the error code. Values returned by from_chars are:

    +
    • +
+
+ ++++ + + + + + + + + + + + + + + + + + + +

Return Value

Description

std::errc()

Successful Parsing

std::errc::invalid_argument

1) Parsing a negative into an unsigned type

+

2) Leading + sign

+

3) Leading space

+

4) Incompatible formatting (e.g. exponent on chars_format::fixed, or p as exponent on value that is not chars_format::hex) See chars_format overview

std::errc::result_out_of_range

1) Overflow

+

2) Underflow

+
+
    +
  • +

    operator== - compares the values of ptr and ec for equality

    +
    • +
+
+
+
+

Usage Notes

+
+

Usage notes for from_chars for integral types

+
+
    +
  • +

    All built-in integral types are allowed except bool which is deleted

    +
    • +
  • +

    These functions have been tested to support __int128 and unsigned __int128

    +
    • +
  • +

    from_chars for integral types is constexpr when compiled using -std=c++14 or newer

    +
    +
      +
    • +

      One known exception is GCC 5 which does not support constexpr comparison of const char*.

      +
      • +
    +
    +
    • +
  • +

    A valid string must only contain the characters for numbers. Leading spaces are not ignored, and will return std::errc::invalid_argument.

    +
    • +
+
+
+
+

Usage notes for from_chars for floating point types

+
+
    +
  • +

    On std::errc::result_out_of_range we return ±0 for small values (e.g. 1.0e-99999) or ±HUGE_VAL for large values (e.g. 1.0e+99999) to match the handling of std::strtod. +This is a divergence from the standard which states we should return the value argument unmodified.

    +
    +
      +
    • +

      from_chars has an open issue with LWG here: https://cplusplus.github.io/LWG/lwg-active.html#3081. +The standard for <charconv> does not distinguish between underflow and overflow like strtod does. +Let’s say you are writing a JSON library, and you replace std::strtod with boost::charconv::from_chars for performance reasons. +Charconv returns std::errc::result_out_of_range on some conversion. +You would then have to parse the string again yourself to figure out which of the four possible reasons you got std::errc::result_out_of_range. +Charconv can give you that information by using boost::charconv::from_chars_erange instead of boost::charconv::from_chars throughout the code base. +By implementing the resolution to the LWG issue that matches the established strtod behavior I think we are providing the correct behavior without waiting on the committee’s decision.

      +
      • +
    +
    +
    • +
  • +

    These functions have been tested to support all built-in floating-point types and those from C++23’s <stdfloat>

    +
    +
      +
    • +

      Long doubles can be 64, 80, or 128-bit, but must be IEEE 754 compliant. An example of a non-compliant, and therefore unsupported, format is __ibm128.

      +
      • +
    • +

      Use of __float128 or std::float128_t requires compiling with -std=gnu++xx and linking GCC’s libquadmath. +This is done automatically when building with CMake.

      +
      • +
    +
    +
    • +
+
+
+
+
+

Examples

+
+

Basic usage

+
+
Integral
+
+
+
const char* buffer = "42";
+int v = 0;
+from_chars_result r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v);
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(v == 42);
+
+std::string str_buffer (buffer);
+boost::core::string_view sv(str_buffer);
+int v2;
+auto r2 = boost::charconv::from_chars(sv, v2);
+assert(r);
+assert(v2 == v);
+
+
+
+
+
Floating Point
+
+
+
const char* buffer = "1.2345"
+double v = 0;
+auto r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v);
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(v == 1.2345);
+
+std::string str_buffer(buffer);
+double v2;
+auto r2 = boost::charconv::from_chars(buffer, v2);
+assert(r2);
+assert(v == v2);
+
+
+
+
+
+

Hexadecimal

+
+
Integral
+
+
+
const char* buffer = "2a";
+unsigned v = 0;
+auto r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v, 16);
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(v == 42);
+
+
+
+
+
Floating Point
+
+
+
const char* buffer = "1.3a2bp-10";
+double v = 0;
+auto r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v, boost::charconv::chars_format::hex);
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(v == 8.0427e-18);
+
+
+
+
+
+

std::errc::invalid_argument

+
+

The below is invalid because a negative value is being parsed into an unsigned integer.

+
+
+
+
const char* buffer = "-123";
+unsigned v = 0;
+auto r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v);
+assert(r.ec == std::errc::invalid_argument);
+assert(!r); // Same as above but less verbose. Added in C++26.
+
+
+
+

The below is invalid because a fixed format floating-point value can not have an exponent.

+
+
+
+
const char* buffer = "-1.573e-3";
+double v = 0;
+auto r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v, boost::charconv::chars_format::fixed);
+assert(r.ec == std::errc::invalid_argument);
+assert(!r); // Same as above but less verbose. Added in C++26.
+
+
+
+

Note: In the event of std::errc::invalid_argument, v is not modified by from_chars

+
+
+
+

std::errc::result_out_of_range

+
+
+
const char* buffer = "1234";
+unsigned char v = 0;
+auto r = boost::charconv::from_chars(buffer, buffer + std::strlen(buffer), v);
+assert(r.ec == std::errc::result_out_of_range);
+assert(!r); // Same as above but less verbose. Added in C++26.
+assert(v == 0)
+
+
+
+

Note: In the event of std::errc::result_out_of_range, v is not modified by from_chars

+
+
+
+
+
+
+

to_chars

+
+
+

to_chars overview

+
+

to_chars is a set of functions that attempts to convert value into a character buffer specified by [first, last). +The result of to_chars is to_chars_result which on success returns ptr equal to one-past-the-end of the characters written and ec == std::errc() and on failure returns std::errc::value_too_large and ptr == last. +to_chars does not null-terminate the returned characters.

+
+
+
+

Definitions

+
+
+
namespace boost { namespace charconv {
+
+struct to_chars_result
+{
+    char* ptr;
+    std::errc ec;
+
+    friend constexpr bool operator==(const to_chars_result& lhs, const to_chars_result& rhs) noexcept; = default;
+    constexpr explicit operator bool() const noexcept { return ec == std::errc{}; }
+};
+
+template <typename Integral>
+BOOST_CHARCONV_CONSTEXPR to_chars_result to_chars(char* first, char* last, Integral value, int base = 10) noexcept;
+
+template <typename Integral>
+BOOST_CHARCONV_CONSTEXPR to_chars_result to_chars<bool>(char* first, char* last, Integral value, int base) noexcept = delete;
+
+template <typename Real>
+to_chars_result to_chars(char* first, char* last, Real value, chars_format fmt = chars_format::general, int precision) noexcept;
+
+}} // Namespace boost::charconv
+
+
+
+
+

to_chars parameters

+
+
    +
  • +

    first, last - pointers to the beginning and end of the character buffer

    +
    • +
  • +

    value - the value to be parsed into the buffer

    +
    • +
  • +

    base (integer only) - the integer base to use. Must be between 2 and 36 inclusive

    +
    • +
  • +

    fmt (float only) - the floating point format to use. +See chars_format overview for description.

    +
    • +
  • +

    precision (float only) - the number of decimal places required

    +
    • +
+
+
+
+

to_chars_result

+
+
    +
  • +

    ptr - On return from to_chars points to one-past-the-end of the characters written on success or last on failure

    +
    • +
  • +

    ec - the error code. Values returned by to_chars are:

    +
    • +
+
+ ++++ + + + + + + + + + + + + + + +

Return Value

Description

std::errc()

Successful Parsing

std::errc::value_too_large

1) Overflow

+

2) Underflow

+
+
    +
  • +

    operator== - compares the value of ptr and ec for equality

    +
    • +
+
+
+
+

Usage Notes

+
+

Usage notes for to_chars for integral types

+
+
    +
  • +

    All built-in integral types are allowed except bool which is deleted

    +
    • +
  • +

    from_chars for integral type is constexpr (BOOST_CHARCONV_CONSTEXPR is defined) when:

    +
    +
      +
    • +

      compiled using -std=c++14 or newer

      +
      • +
    • +

      using a compiler with __builtin_ is_constant_evaluated

      +
      • +
    +
    +
    • +
  • +

    These functions have been tested to support __int128 and unsigned __int128

    +
    • +
+
+
+
+

Usage notes for to_chars for floating point types

+
+
    +
  • +

    The following will be returned when handling different values of NaN

    +
    +
      +
    • +

      qNaN returns "nan"

      +
      • +
    • +

      -qNaN returns "-nan(ind)"

      +
      • +
    • +

      sNaN returns "nan(snan)"

      +
      • +
    • +

      -sNaN returns "-nan(snan)"

      +
      • +
    +
    +
    • +
  • +

    These functions have been tested to support all built-in floating-point types and those from C++23’s <stdfloat>

    +
    +
      +
    • +

      Long doubles can be 64, 80, or 128-bit, but must be IEEE 754 compliant. An example of a non-compliant, and therefore unsupported, format is ibm128.

      +
      • +
    • +

      Use of __float128 or std::float128_t requires compiling with -std=gnu++xx and linking GCC’s libquadmath. +This is done automatically when building with CMake.

      +
      • +
    +
    +
    • +
+
+
+
+
+

Examples

+
+

Basic Usage

+
+
Integral
+
+
+
char buffer[64] {};
+int v = 42;
+to_chars_result r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer) - 1, v);
+assert(r.ec == std::errc());
+assert(!strcmp(buffer, "42")); // strcmp returns 0 on match
+
+
+
+
+
Floating Point
+
+
+
char buffer[64] {};
+double v = 1e300;
+to_chars_result r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer) - 1, v);
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(!strcmp(buffer, "1e+300"));
+
+
+
+
+
+

Hexadecimal

+
+
Integral
+
+
+
char buffer[64] {};
+int v = 42;
+to_chars_result r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer) - 1, v, 16);
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(!strcmp(buffer, "2a")); // strcmp returns 0 on match
+
+
+
+
+
Floating Point
+
+
+
char buffer_u[64] {};
+double u = -1.08260383390082950e+20;
+
+char buffer_v[64] {};
+double v = -1.08260383390082946e+20;
+
+to_chars(buffer_u, buffer_u + sizeof(buffer_u) - 1, u, chars_format::hex);
+to_chars(buffer_v, buffer_v + sizeof(buffer_v) - 1, v, chars_format::hex);
+
+std::cout << "U: " << buffer_u << "\nV: " << buffer_v << std::endl;
+
+// U: -1.779a8946bb5fap+66
+// V: -1.779a8946bb5f9p+66
+//
+// With hexfloats we can see the ULP distance between U and V is a - 9 == 1.
+
+
+
+
+
+

std::errc::value_too_large

+
+
Integral
+
+
+
char buffer[3] {};
+int v = -1234;
+to_chars_result r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer) - 1, v, 16);
+assert(r.ec == std::errc::value_too_large);
+assert(!r); // Same as above but less verbose. Added in C++26.
+
+
+
+
+
Floating Point
+
+
+
char buffer[3] {};
+double v = 1.2345;
+auto r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer) - 1, v);
+assert(r.ec == std::errc::value_too_large);
+assert(!r); // Same as above but less verbose. Added in C++26.
+
+
+
+

In the event of std::errc::value_too_large, to_chars_result.ptr is equal to last

+
+
+
+
+
+
+
+

chars_format

+
+
+

chars_format overview

+
+

boost::charconv::chars_format is an enum class used to define the format of floating point types with from_chars and to_chars.

+
+
+
+

Definition

+
+
+
namespace boost { namespace charconv {
+
+enum class chars_format : unsigned
+{
+    scientific = 1 << 0,
+    fixed = 1 << 1,
+    hex = 1 << 2,
+    general = fixed | scientific
+};
+
+}} // Namespace boost::charconv
+
+
+
+
+

Formats

+
+

Scientific Format

+
+

Scientific format will be of the form 1.3e+03. +The integer part will be between 0 and 9 inclusive. The fraction and exponent will always appear. +The exponent will always have a minimum of 2 digits.

+
+
+
+

Fixed Format

+
+

Fixed format will be of the form 2.30 or 3090. An exponent will not appear with this format. +If the precision of to_chars exceeds that of the type (e.g. std::numeric_limits<double>::chars10), 0s will be appended to the end of the significant digits.

+
+
+
+

Hex Format

+
+

Hex format will be of the form 1.0cp+05. The integer part will always be 0 or 1. +The exponent will be with a p instead of an e as used with base 10 formats, because e is a valid hex value. +Note: Every binary floating-point number has a unique representation as a hexfloat, but not every hexfloat has a unique representation as a binary floating-point number. +This is due to the fact that the number of bits in the significand of an IEEE754 binary32 and binary64 are not divisible by 4.

+
+
+
Hexfloat Use Cases
+
+

For those unfamiliar with hexfloats, they are valuable in specific instances:

+
+
+
    +
  • +

    Precision control: Hexfloats can offer finer control over the precision of floating-point values. +In hexadecimal notation, each digit represents four bits (one hexit), allowing you to directly manipulate the precision of the number by specifying a certain number of hexadecimal digits. +This can be useful when you need to precisely control the level of accuracy required for your calculations.

    +
    • +
  • +

    Bit-level representation: Hexfloats provide a direct representation of the underlying bits of a floating-point number. +Each hexadecimal digit corresponds to a specific group of bits, making it easier to visualize and understand the internal structure of the floating-point value. +This can be helpful for debugging or analyzing floating-point arithmetic operations (e.g. Computing ULP distances).

    +
    • +
+
+
+
+
+

General

+
+

General format will be the shortest representation of a number in either fixed or general format (e.g. 1234 instead of 1.234e+03.

+
+
+
+
+
+
+

Limits

+
+
+

Limits overview

+
+

The contents of <boost/charconv/limits.hpp> are designed to help the user optimize the size of the buffer required for to_chars.

+
+
+
+

Definitions

+
+
+
namespace boost { namespace charconv {
+
+template <typename T>
+constexpr int limits<T>::max_chars10;
+
+template <typename T>
+constexpr int limits<T>::max_chars;
+
+}} // Namespace boost::charconv
+
+
+
+

max_chars10

+
+

The minimum size of the buffer that needs to be +passed to to_chars to guarantee successful conversion for all values of type T, when either no base is passed, or base 10 is passed.

+
+
+
+

max_chars

+
+

The minimum size of the buffer that needs to be passed to to_chars to guarantee successful conversion for all values of type T, for any value of base.

+
+
+
+
+

Examples

+
+

The following two examples are for max_chars10 to optimize the buffer size with to_chars for an integral type and a floating-point type respectively.

+
+
+
+
char buffer [boost::charconv::limits<std::int32_t>::max_chars10;
+auto r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer), std::numeric_limits<std::int32_t>::max());
+
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(!strcmp(buffer, "2147483647")); // strcmp returns 0 on match
+
+
+
+
+
char buffer [boost::charconv::limits<float>::max_chars10;
+auto r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer), std::numeric_limits<float>::max());
+
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(!strcmp(buffer, "3.40282347e+38")); // strcmp returns 0 on match
+
+
+
+

The following example is a usage of max_chars when used to serialize an integer in binary (base = 2).

+
+
+
+
char buffer [boost::charconv::limits<std::uint16_t>::max_chars;
+auto r = boost::charconv::to_chars(buffer, buffer + sizeof(buffer), std::numeric_limits<std::uint16_t>::max(), 2);
+
+assert(r.ec == std::errc());
+assert(r); // Same as above but less verbose. Added in C++26.
+assert(!strcmp(buffer, "1111111111111111")); // strcmp returns 0 on match
+
+
+
+
+
+
+

Benchmarks

+
+
+

This section describes a range of performance benchmarks that have been run comparing this library with the standard library, and how to run your own benchmarks if required.

+
+
+

The values are relative to the performance of std::printf and std::strtoX. +Larger numbers are more performant (e.g. 2.00 means twice as fast, and 0.50 means it takes twice as long). +std::printf and std::strtoX are always listed first as they will be the reference value.

+
+
+

How to run the Benchmarks

+
+

To run the benchmarks yourself, navigate to the test folder and define BOOST_CHARCONV_RUN_BENCHMARKS when running the tests. +An example on Linux with b2: ../../../b2 cxxstd=20 toolset=gcc-13 define=BOOST_CHARCONV_RUN_BENCHMARKS STL_benchmark linkflags="-lfmt" -a release .

+
+
+

Additionally, you will need the following:

+
+
+
    +
  • +

    A compiler with full <charconv> support:

    +
    +
      +
    • +

      GCC 11 or newer

      +
      • +
    • +

      MSVC 19.24 or newer

      +
      • +
    +
    +
    • +
  • +

    libdouble-conversion

    +
    • +
  • +

    {fmt}

    +
    • +
+
+
+
+

Results

+
+

x86_64 Linux

+
+

Data in tables 1 - 4 were run on Ubuntu 23.04 with x86_64 architecture using GCC 13.1.0 with libstdc++.

+
+
+
Floating Point
+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 1. to_chars floating point with the shortest representation
FunctionRelative Performance (float / double)

std::printf

1.00 / 1.00

Boost.lexical_cast

0.56 / 0.49

Boost.spirit.karma

1.70 / 2.62

std::to_chars

4.01 / 6.03

Boost.Charconv.to_chars

4.46 / 6.20

Google double-conversion

1.26 / 1.91

{fmt}

2.52 / 3.63

+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 2. from_chars floating point with scientific formatting
FunctionRelative Performance (float / double)

std::strto(f/d)

1.00 / 1.00

Boost.lexical_cast

0.33 / 0.42

Boost.spirit.qi

3.17 / 4.65

std::from_chars

3.23 / 5.77

Boost.Charconv.from_chars

3.28 / 5.75

Google double-conversion

1.16 / 1.30

+
+
+
Integral
+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 3. to_chars base 10 integers
FunctionRelative Performance (uint32_t / uint64_t)

std::printf

1.00 / 1.00

Boost.lexical_cast

1.80 / 1.38

Boost.spirit.karma

2.81 / 1.62

std::to_chars

4.06 / 2.45

Boost.Charconv.to_chars

4.13 / 2.48

{fmt}

2.88 / 2.21

+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 4. from_chars base 10 integers
FunctionRelative Performance (uint32_t / uint64_t)

std::strto(ul,ull)

1.00 / 1.00

Boost.lexical_cast

0.53 / 0.52

Boost.spirit.qi

2.24 / 1.49

std::from_chars

1.97 / 1.68

Boost.Charconv.from_chars

2.54 / 1.78

+
+
+
+

x86_64 Windows

+
+

Data in tables 5 - 8 were run on Windows 11 with x86_64 architecture using MSVC 14.3 (V17.7.0).

+
+
+
Floating Point
+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 5. to_chars floating point with the shortest representation
FunctionRelative Performance (float / double)

std::printf

1.00 / 1.00

Boost.lexical_cast

0.50 / 0.70

Boost.spirit.karma

2.23 / 7.58

std::to_chars

5.58 / 15.77

Boost.Charconv.to_chars

5.62 / 15.26

+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 6. from_chars floating point with scientific formatting
FunctionRelative Performance (float / double)

std::strto(f/d)

1.00 / 1.00

Boost.lexical_cast

0.14 / 0.20

Boost.spirit.qi

2.03 / 4.58

std::from_chars

1.01 / 1.23

Boost.Charconv.from_chars

2.06 / 5.21

+
+
+
Integral
+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 7. to_chars base 10 integers
FunctionRelative Performance (uint32_t / uint64_t)

std::printf

1.00 / 1.00

Boost.lexical_cast

0.68 / 0.68

Boost.spirit.karma

2.75 / 1.67

std::to_chars

2.75 / 2.10

Boost.Charconv.to_chars

2.75 / 2.06

+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 8. from_chars base 10 integers
FunctionRelative Performance (uint32_t / uint64_t)

std::strto(ul,ull)

1.00 / 1.00

Boost.lexical_cast

0.46 / 0.39

Boost.spirit.qi

1.94 / 1.63

std::from_chars

2.43 / 2.18

Boost.Charconv.from_chars

2.68 / 2.27

+
+
+
+

ARM MacOS

+
+

Data in tables 9-12 were run on MacOS Ventura 13.5.2 with M1 Pro architecture using Homebrew GCC 13.2.0 with libstdc++.

+
+
+
Floating Point
+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 9. to_chars floating point with the shortest representation
FunctionRelative Performance (float / double)

std::printf

1.00 / 1.00

Boost.lexical_cast

0.58 / 0.16

Boost.spirit.karma

1.39 / 1.22

std::to_chars

6.78 / 6.47

Boost.Charconv.to_chars

7.25 / 6.86

Google double-conversion

2.26 / 2.16

{fmt}

3.78 / 3.38

+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 10. from_chars floating point with scientific formatting
FunctionRelative Performance (float / double)

std::strto(f/d)

1.00 / 1.00

Boost.lexical_cast

0.06 / 0.06

Boost.spirit.qi

1.12 / 1.06

std::from_chars

1.32 / 1.65

Boost.Charconv.from_chars

1.28 / 1.63

Google double-conversion

0.45 / 0.32

+
+
+
Integral
+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 11. to_chars base 10 integers
FunctionRelative Performance (uint32_t / uint64_t)

std::printf

1.00 / 1.00

Boost.lexical_cast

2.08 / 1.75

Boost.spirit.karma

4.17 / 2.06

std::to_chars

6.25 / 4.12

Boost.Charconv.to_chars

6.25 / 4.12

{fmt}

5.29 / 3.47

+ + ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 12. from_chars base 10 integers
FunctionRelative Performance (uint32_t / uint64_t)

std::strto(ul,ull)

1.00 / 1.00

Boost.lexical_cast

0.56 / 0.54

Boost.spirit.qi

1.39 / 1.33

std::from_chars

1.92 / 1.65

Boost.Charconv.from_chars

2.27 / 1.65

+
+
+
+
+
+
+

Sources

+
+
+

The following papers and blog posts serve as the basis for the algorithms used in the library:

+
+
+ +
+
+
+
+

Acknowledgments

+
+
+

Special thanks to the following people (non-inclusive list):

+
+
+
    +
  • +

    Peter Dimov for providing technical guidance and contributing to the library throughout development.

    +
    • +
  • +

    Junekey Jeon for developing and answering my questions about his integer-formatting, Dragonbox, and Floff.

    +
    • +
  • +

    Chris Kormanyos for serving as the library review manager.

    +
    • +
  • +

    Stephan T. Lavavej for providing the basis for the benchmarks.

    +
    • +
  • +

    All that reviewed the library and provided feedback to make it better.

    +
    • +
+
+
+
+
+ +
+
+

This documentation is copyright 2022-2023 Peter Dimov and Matt Borland and is distributed under +the Boost Software License, Version 1.0.

+
+
+
+
+ + +
+ + \ No newline at end of file diff --git a/doc/specimen-docinfo-footer.html b/doc/specimen-docinfo-footer.html index d0d391a..91faa92 100644 --- a/doc/specimen-docinfo-footer.html +++ b/doc/specimen-docinfo-footer.html @@ -1,6 +1,6 @@