mirror of
https://github.com/boostorg/boostlook.git
synced 2026-01-19 04:02:14 +00:00
538540cdc9
- add boostlook_tino.css design system - revert boostlook.css to previous version - remove boostlook_old.css backup
1991 lines
48 KiB
CSS
1991 lines
48 KiB
CSS
/**
|
|
* Boost Look CSS Framework
|
|
* Version: 1.0.0
|
|
* Description: A comprehensive CSS framework for styling Boost C++ Library documentation
|
|
* Author: Boost C++ Libraries
|
|
* License: BSL-1.0
|
|
*/
|
|
|
|
/**
|
|
* File Structure Overview:
|
|
* 1. Root Variables (Light/Dark themes)
|
|
* 2. HTML Variables
|
|
* 3. Font-Face Declarations
|
|
* 4. CSS Reset
|
|
* 5. Global Styles for .boostlook
|
|
* 6. Styling for Scrollbar Display
|
|
* 7. AsciiDoctor-specific Styles
|
|
* 8. Antora Templates Styles
|
|
* 9. Quickbook Documentation Styles
|
|
* 10. Library README Styles
|
|
*/
|
|
|
|
/**
|
|
* Template Structure:
|
|
* The framework supports these main documentation templates:
|
|
*
|
|
* 1. AsciiDoctor Template:
|
|
* example: https://www.boost.io/doc/libs/1_87_0/libs/charconv/doc/html/charconv.html
|
|
* <div class="boostlook">
|
|
* <div class="header">
|
|
* <h1>Title</h1>
|
|
* <div id="toc" class="toc2">
|
|
* <button id="toggle-toc">Show Table of Contents</button>
|
|
* <ul class="sectlevel1">TOC Links</ul>
|
|
* </div>
|
|
* </div>
|
|
* <div id="content">
|
|
* <div class="sect1">Content Sections</div>
|
|
* </div>
|
|
* <div id="footer">Footer Content</div>
|
|
* </div>
|
|
*
|
|
* 2. Antora Template:
|
|
* example: https://www.boost.io/doc/libs/1_87_0/doc/antora/url/index.html
|
|
* <div class="boostlook">
|
|
* <div id="header">
|
|
* <div id="toc" class="nav-container toc2">Navigation</div>
|
|
* </div>
|
|
* <div id="content">
|
|
* <article class="doc max-width-reset">
|
|
* <div class="toolbar">Breadcrumbs and Spirit Nav</div>
|
|
* <h1>Title</h1>
|
|
* <div class="sect1">Content Sections</div>
|
|
* </article>
|
|
* </div>
|
|
* <div id="footer">Footer Content</div>
|
|
* </div>
|
|
*
|
|
* 3. Quickbook Template:
|
|
* example: https://www.boost.io/doc/libs/1_87_0/doc/html/accumulators.html
|
|
* <div class="boostlook">
|
|
* <div class="spirit-nav">Navigation</div>
|
|
* <div class="chapter"> <!-- might also be .section, .refentry, .document, or .book -->
|
|
* <div class="titlepage">Title and information</div>
|
|
* <div class="toc">Table of Contents</div>
|
|
* <div class="section>Content</div>
|
|
* <div class="copyright-footer">Footer</div>
|
|
* </div>
|
|
* </div>
|
|
*
|
|
* 4. README Template:
|
|
* example: https://www.boost.io/library/1.87.0/beast/
|
|
* <section id="libraryReadMe" class="boostlook">ReadMe Content</section>
|
|
*/
|
|
|
|
/**
|
|
* Design Philosophy:
|
|
* - Consistent styling across different documentation templates
|
|
* - Responsive design with mobile-first approach
|
|
* - Dark/Light theme support
|
|
* - Accessible typography and color schemes
|
|
* - Modern scrolling and navigation experience
|
|
*/
|
|
|
|
/*----------------- 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
|
|
*/
|
|
|
|
: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 */
|
|
|
|
/* Light Theme Variables - Color scheme for light mode */
|
|
/* General Variables */
|
|
--light-bl-secondary-color: rgb(2, 132, 199);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* Additional Theme Variables */
|
|
--light-bl-table-border-color: rgb(209, 209, 209);
|
|
--light-bl-tab-background: rgb(240, 240, 240);
|
|
|
|
/**
|
|
* Dark Theme Variables
|
|
* Color palette and design tokens for dark mode
|
|
*/
|
|
/* General Variables */
|
|
--dark-bl-secondary-color: rgb(125, 211, 252);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/**
|
|
* 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;
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/*----------------- Root Variables - End -----------------*/
|
|
|
|
/*----------------- HTML Variables - Start -----------------*/
|
|
|
|
/**
|
|
* HTML Theme Variables
|
|
* These variables are applied to the HTML element and control the active theme.
|
|
* The framework supports two themes:
|
|
* 1. Light Theme (default)
|
|
* 2. Dark Theme (activated by html.dark class)
|
|
*/
|
|
|
|
/* Light Theme (Default) Configuration */
|
|
html {
|
|
/* General Variables */
|
|
--bl-secondary-color: var(--light-bl-secondary-color);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Dark Theme Configuration */
|
|
html.dark {
|
|
/* General Variables */
|
|
--bl-secondary-color: var(--dark-bl-secondary-color);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/*----------------- HTML Variables - End -----------------*/
|
|
|
|
/*----------------- Font-Face Declarations start -----------------*/
|
|
|
|
/**
|
|
* Typography Configuration
|
|
* The framework uses Noto Sans family as its primary font system:
|
|
* 1. Noto Sans Display: Main text font with variable weight support
|
|
* 2. Noto Sans Mono: Monospace font for code blocks
|
|
*
|
|
* Font Loading Strategy:
|
|
* - Multiple source paths for resilient loading
|
|
* - Variable fonts for optimal performance
|
|
* - Font-display: block to prevent FOIT (Flash of Invisible Text)
|
|
*/
|
|
|
|
/* Noto Sans Display - Regular */
|
|
@font-face {
|
|
font-family: "Noto Sans Display";
|
|
font-style: normal;
|
|
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');
|
|
}
|
|
|
|
/* Noto Sans Display - Italic */
|
|
@font-face {
|
|
font-family: "Noto Sans Display";
|
|
font-style: italic;
|
|
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');
|
|
}
|
|
|
|
/* Noto Sans Mono - Variable Weight */
|
|
@font-face {
|
|
font-family: "Noto Sans Mono";
|
|
font-style: normal;
|
|
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');
|
|
}
|
|
|
|
/* 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-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-Face Declarations end -----------------*/
|
|
|
|
/*----------------- CSS Reset start -----------------*/
|
|
|
|
/**
|
|
* Modern CSS Reset
|
|
* A minimal CSS reset that:
|
|
* 1. Uses modern box-sizing model
|
|
* 2. Removes default margins
|
|
* 3. Improves text rendering
|
|
* 4. Handles media elements consistently
|
|
* 5. Normalizes form elements
|
|
* 6. Prevents text overflow issues
|
|
* 7. Provides proper stacking context
|
|
*/
|
|
|
|
/* Box sizing rules */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Remove default margin */
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Body defaults */
|
|
body {
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased; /* Improves text rendering on WebKit */
|
|
}
|
|
|
|
/* Media elements */
|
|
img, picture, video, canvas, svg {
|
|
display: block;
|
|
max-width: 100%; /* Responsive media elements */
|
|
}
|
|
|
|
/* Form elements */
|
|
input, button, textarea, select {
|
|
font: inherit; /* Inherit typography */
|
|
}
|
|
|
|
/* Text elements */
|
|
p, h1, h2, h3, h4, h5, h6 {
|
|
overflow-wrap: break-word; /* Prevent text overflow */
|
|
}
|
|
|
|
/* Stacking context */
|
|
#root, #__next {
|
|
isolation: isolate; /* Create new stacking context */
|
|
}
|
|
|
|
/*----------------- CSS Reset end -----------------*/
|
|
|
|
/*----------------- Global Styles for .boostlook start -----------------*/
|
|
|
|
/**
|
|
* Global Styles for .boostlook
|
|
* Core styles that apply to all .boostlook containers regardless of template.
|
|
* These styles establish:
|
|
* 1. Typography hierarchy and spacing
|
|
* 2. Link appearances and interactions
|
|
* 3. Code block formatting
|
|
* 4. List and table styles
|
|
* 5. Layout structure and spacing
|
|
*/
|
|
|
|
/* Base Container */
|
|
.boostlook {
|
|
font-family: "Noto Sans Display" !important;
|
|
font-stretch: 90%;
|
|
}
|
|
|
|
/* Typography Hierarchy
|
|
* Establishes consistent heading sizes and spacing
|
|
* while maintaining proper visual hierarchy
|
|
*/
|
|
.boostlook h1,
|
|
.boostlook h2,
|
|
.boostlook h3,
|
|
.boostlook h4,
|
|
.boostlook h5,
|
|
.boostlook h6 {
|
|
display: block;
|
|
line-height: 1;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
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 */
|
|
|
|
/* Document-specific heading adjustments */
|
|
.boostlook .doc h2:not(.discrete) {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Anchor positioning within headings */
|
|
.boostlook .doc h1 .anchor {
|
|
margin: 3px 0 0 -1.3ex;
|
|
}
|
|
|
|
.boostlook .doc h2 .anchor,
|
|
.boostlook .doc h3 .anchor {
|
|
margin: 2px 0 0 -1.3ex;
|
|
}
|
|
|
|
.boostlook .doc h4 .anchor,
|
|
.boostlook .doc h5 .anchor,
|
|
.boostlook .doc h6 .anchor {
|
|
margin: 1px 0 0 -1.3ex;
|
|
}
|
|
|
|
/* Paragraph Styling */
|
|
.boostlook p {
|
|
font-size: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--bl-text-color);
|
|
padding-top: initial !important;
|
|
padding-bottom: initial !important;
|
|
}
|
|
|
|
/* Special paragraph cases */
|
|
.boostlook table p,
|
|
.boostlook ul p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Link Styling */
|
|
.boostlook a,
|
|
.boostlook .doc a {
|
|
color: var(--bl-link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 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);
|
|
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;
|
|
}
|
|
|
|
/* Emphasis within code */
|
|
.boostlook em,
|
|
.boostlook code em {
|
|
font-family: "Noto Sans Display";
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Table Headings */
|
|
.boostlook h6:has(+table) {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
/* List Styling */
|
|
.boostlook ul.itemizedlist,
|
|
#boost-legacy-docs-wrapper .ulist ul {
|
|
padding: 0 0 0 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 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;
|
|
font-weight: 400;
|
|
font-stretch: 90%;
|
|
color: var(--bl-code-text-color) !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 .doc table a code,
|
|
.boostlook .doc .colist > table a code {
|
|
color: var(--bl-link-color) !important;
|
|
}
|
|
|
|
/* 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 li a:hover code,
|
|
.boostlook .doc p a:hover code,
|
|
.boostlook .doc table a:hover code,
|
|
.boostlook .doc .colist > table a:hover code {
|
|
color: var(--bl-link-hover-color) !important;
|
|
}
|
|
|
|
/* Table Cell Code */
|
|
.boostlook td code {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Syntax Highlighting */
|
|
.boostlook .hljs-keyword,
|
|
.boostlook .hljs-selector-tag,
|
|
.boostlook .hljs-subst {
|
|
color: var(--bl-hljs-keyword-color);
|
|
}
|
|
|
|
.boostlook .hljs-number {
|
|
color: var(--bl-hljs-number-color);
|
|
}
|
|
|
|
.boostlook .hljs-doctag,
|
|
.boostlook .hljs-string {
|
|
color: var(--bl-hljs-doctag-color);
|
|
}
|
|
|
|
.boostlook .hljs-section,
|
|
.boostlook .hljs-selector-id,
|
|
.boostlook .hljs-title {
|
|
color: var(--bl-hljs-section-color);
|
|
}
|
|
|
|
.boostlook .hljs-attribute,
|
|
.boostlook .hljs-name,
|
|
.boostlook .hljs-tag {
|
|
color: var(--bl-hljs-attribute-color);
|
|
}
|
|
|
|
/* Pagination */
|
|
.boostlook nav.pagination span::before {
|
|
color: var(--bl-pagination-color);
|
|
}
|
|
|
|
/* Text Emphasis */
|
|
.boostlook b,
|
|
.boostlook strong {
|
|
font-variation-settings: "wght" 700;
|
|
}
|
|
|
|
/* Layout Structure */
|
|
.boostlook #header,
|
|
.boostlook #content,
|
|
.boostlook #footer {
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* First Heading Adjustment */
|
|
.boostlook h2:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/*----------------- Global Styles for .boostlook end -----------------*/
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
/* Global Scrollbar Styles */
|
|
.boostlook * {
|
|
scrollbar-color: initial !important;
|
|
scrollbar-width: initial !important;
|
|
}
|
|
.boostlook:not(:has(.doc)) ::-webkit-scrollbar {
|
|
width: 2px;
|
|
height: 2px;
|
|
}
|
|
|
|
.boostlook ::-webkit-scrollbar-track {
|
|
border-radius: 8px;
|
|
background-color: var( --bl-scrollbar-track-color);
|
|
}
|
|
|
|
.boostlook ::-webkit-scrollbar-thumb {
|
|
background-color: var( --bl-scrollbar-thumb-color); /* blend into background */
|
|
}
|
|
|
|
/* Template-specific Adjustments */
|
|
|
|
/* Hide root scrollbars for Antora template */
|
|
html:has(.article > .boostlook) {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Iframe container scrollbar handling */
|
|
html:has(#docsiframe) {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* Chrome/Edge scrollbar for iframe container */
|
|
html:has(#docsiframe)::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* Antora template - Scrollable content area */
|
|
.boostlook #content:has(> .doc) {
|
|
overflow-y: auto;
|
|
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,
|
|
.boostlook #content .sect3:has(.tableblock) {
|
|
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;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: var(--bl-pasteboard-color);
|
|
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;
|
|
}
|
|
|
|
/* Background Colors */
|
|
.boostlook #toc.toc2,
|
|
.boostlook #header:not(:has(.nav-container)),
|
|
.boostlook #content,
|
|
.boostlook #footer {
|
|
background-color: var(--bl-card-background-color);
|
|
}
|
|
|
|
/* TOC Scrolling */
|
|
.boostlook #toc.toc2,
|
|
.boostlook #toc.toc2.nav-container {
|
|
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;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
/* TOC Navigation Menu */
|
|
.boostlook #toc .nav-menu > .nav-list,
|
|
.boostlook #toc .nav-menu > .nav-list > .nav-list {
|
|
padding-left: 0
|
|
}
|
|
|
|
/* Navigation Menu Title */
|
|
.boostlook .nav-menu .title {
|
|
border-bottom: 1px solid var(--bl-table-border-color);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Legacy Documentation Titles */
|
|
#boost-legacy-docs-wrapper h2.title {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#boost-legacy-docs-wrapper h3.title,
|
|
#boost-legacy-docs-wrapper.boostlook h3 {
|
|
font-weight: 550;
|
|
margin-bottom: 0.5rem;
|
|
font-feature-settings: normal;
|
|
}
|
|
|
|
/* Rouge Syntax Highlighting */
|
|
.boostlook pre.rouge .o {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.boostlook pre.rouge code span {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media screen and (min-width: 768px) {
|
|
.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;
|
|
z-index: 1000;
|
|
height: calc(100vh - 1rem);
|
|
padding: 1rem;
|
|
padding: 1rem 1rem 1.5rem;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.boostlook {
|
|
margin-left: 18rem;
|
|
}
|
|
|
|
/* TOC Toggle Button */
|
|
.boostlook #toggle-toc {
|
|
position: fixed;
|
|
top: 2rem;
|
|
left: max(1rem, 50% - 39rem - 1rem);
|
|
background-color: rgb(255, 255, 255, 0.5);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M400-240l240-240-240-240-56%2056%20184%20184-184%20184%2056%2056Z%22%2F%3E%3C%2Fsvg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
border-radius: 1rem;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
text-indent: -9999px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
/* Hidden TOC */
|
|
html.toc-hidden .boostlook {
|
|
margin-left: 0;
|
|
transition: margin-left 0.15s ease;
|
|
}
|
|
|
|
html.toc-hidden .boostlook #toggle-toc {
|
|
left: max(0rem, 50% - 39rem - 1rem);
|
|
}
|
|
|
|
/* Visible TOC */
|
|
html.toc-visible .boostlook #toggle-toc {
|
|
left: max(0rem, 50% - 39rem - 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 {
|
|
visibility: hidden;
|
|
}
|
|
|
|
html.toc-visible #toc.toc2 {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
width: 250px;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/* TOC Shadow States */
|
|
html.toc-visible:not(.toc-pinned) #toc.toc2 {
|
|
box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.10);
|
|
}
|
|
|
|
/* TOC Pin States */
|
|
html.toc-visible.toc-pinned #toggle-toc {
|
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M560-240%20320-480l240-240%2056%2056-184%20184%20184%20184-56%2056Z%22%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
html.toc-visible.toc-pinned .boostlook {
|
|
margin-left: 17rem;
|
|
transition: margin-left 0.15s ease;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
html {
|
|
font-size: .83333rem;
|
|
}
|
|
|
|
html.toc-visible.toc-pinned .boostlook {
|
|
margin-left: 20rem;
|
|
transition: margin-left 0.15s ease;
|
|
}
|
|
}
|
|
|
|
/*----------------- Styles specific to AsciiDoctor content end -----------------*/
|
|
|
|
/*----------------- Styles specific to Antora Templates start -----------------*/
|
|
|
|
/**
|
|
* Antora Template Styles
|
|
* Specific styles for Antora-generated documentation.
|
|
* These styles handle:
|
|
* 1. Header and navigation layout
|
|
* 2. Typography customization
|
|
* 3. Navigation menu structure
|
|
* 4. Content layout and formatting
|
|
* 5. Responsive design adaptations
|
|
*/
|
|
|
|
/* Header Layout */
|
|
.boostlook #header:has(.nav-container) {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Typography */
|
|
.boostlook .doc {
|
|
line-height: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Navigation Menu */
|
|
.boostlook .nav-panel-menu {
|
|
overflow: visible;
|
|
}
|
|
|
|
.boostlook .nav-close {
|
|
display: none;
|
|
}
|
|
|
|
.boostlook .nav-menu > .nav-list > .nav-list {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.boostlook .nav-menu > .nav-list > .nav-list > li {
|
|
font-variation-settings: "wght" 550;
|
|
}
|
|
|
|
/* Navigation Links */
|
|
.boostlook .nav-link,
|
|
.boostlook .nav-menu a{
|
|
cursor: pointer;
|
|
color: var(--bl-nav-link-color);
|
|
margin-right: -0.5rem;
|
|
}
|
|
|
|
.boostlook .nav-link:hover,
|
|
.boostlook .nav-menu a:hover {
|
|
color: var(--bl-nav-link-hover-color);
|
|
}
|
|
|
|
.boostlook .nav-text {
|
|
color: var(--bl-nav-link-color);
|
|
}
|
|
|
|
/* TOC Container */
|
|
.boostlook #toc.toc2.nav-container {
|
|
position: fixed;
|
|
}
|
|
|
|
.boostlook #toc.toc2.nav-container.is-active {
|
|
position: static;
|
|
}
|
|
|
|
.boostlook #header .nav-container.is-active {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.boostlook .breadcrumbs svg {
|
|
fill: var(--bl-breadcrumbs-svg-color);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Layout */
|
|
.boostlook .article .content {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.boostlook #content:has(.toc.sidebar) {
|
|
display: flex;
|
|
}
|
|
|
|
.boostlook #footer:has(> script):not(:has(> div)) {
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Table of Contents */
|
|
.boostlook .nav {
|
|
height: 100%;
|
|
}
|
|
|
|
.boostlook .toc .toc-menu a {
|
|
border-left: 0;
|
|
padding: .25rem 0 0 0;
|
|
}
|
|
|
|
/* Admonitions */
|
|
.boostlook .admonitionblock p {
|
|
line-height: normal;
|
|
}
|
|
|
|
.boostlook .doc .admonitionblock {
|
|
background-color: var(--bl-tabpanel-background);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Tabs */
|
|
.boostlook .tabs:not(.is-loading) .tablist li:not(.is-selected) {
|
|
background-color: var(--bl-tab-background);
|
|
}
|
|
|
|
.boostlook .tablist > ul li {
|
|
background-color: var(--bl-tabpanel-background);
|
|
}
|
|
|
|
/* Tables */
|
|
.boostlook .doc table.tableblock {
|
|
display: block;
|
|
margin-bottom: 1.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.boostlook .doc table.tableblock tr th {
|
|
background-color: var(--bl-table-head-background);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.dark .doc table.stripes-even>tbody>tr:nth-of-type(2n) {
|
|
background-color: var(--bl-table-stripe-color);
|
|
}
|
|
|
|
.boostlook .doc p.tableblock + p.tableblock {
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/*----------------- Styles specific to Antora Templates end -----------------*/
|
|
|
|
/*---------- Quickbook docs styling fixes -----------*/
|
|
|
|
/**
|
|
* Quickbook Documentation Styles
|
|
* Comprehensive styling for Quickbook-generated documentation, including:
|
|
* 1. Typography and heading hierarchy
|
|
* 2. Content blocks and spacing
|
|
* 3. Navigation and spirit-nav elements
|
|
* 4. Special elements (notes, tips, etc.)
|
|
* 5. Code and syntax highlighting
|
|
*/
|
|
|
|
/* Heading Styles */
|
|
#boost-legacy-docs-wrapper.boostlook h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
#boost-legacy-docs-wrapper.boostlook h2 {
|
|
font-size: 1.65rem;
|
|
border-bottom: 1px solid #eaf0f3;
|
|
border-bottom: 1px solid var(--bl-table-border-color);
|
|
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;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Pre-formatted Text */
|
|
.boostlook:not(:has(.doc)) td pre {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Program Listings */
|
|
.boostlook .programlisting {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
/* Table Typography */
|
|
.boostlook table h1,
|
|
.boostlook table h2,
|
|
.boostlook table h3 {
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.boostlook table h4,
|
|
.boostlook table h5,
|
|
.boostlook table h6 {
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
/* Variable Lists */
|
|
.boostlook:not(:has(.doc)) div.variablelist dl dt {
|
|
margin-bottom: 0.2em;
|
|
font-variation-settings: "wght" 700;
|
|
}
|
|
|
|
.boostlook:not(:has(.doc)) div.variablelist dl dd {
|
|
margin: 0em 0em 0.5em 2em;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
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;
|
|
margin: 0;
|
|
}
|
|
|
|
.boostlook:not(:has(.doc)) pre code {
|
|
border: none;
|
|
}
|
|
|
|
.boostlook:not(:has(.doc)) :not(.highlight) pre {
|
|
color: var(--bl-code-text-color);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Copyright Footer */
|
|
.boostlook:not(:has(.doc)) .copyright-footer {
|
|
text-align: right;
|
|
font-size: 70%;
|
|
}
|
|
|
|
.boostlook:not(:has(.doc)) .copyright-footer p {
|
|
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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.special {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.highlight .cp,
|
|
.preprocessor {
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
.highlight .sc
|
|
.char {
|
|
color: var(--color-lime);
|
|
}
|
|
|
|
.highlight .c,
|
|
.highlight .ch,
|
|
.highlight .cm,
|
|
.highlight .cp,
|
|
.highlight .cpf,
|
|
.highlight .c1,
|
|
.highlight .cs,
|
|
.highlight .sd,
|
|
.highlight .sh,
|
|
.comment {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.highlight .m,
|
|
.highlight .mf,
|
|
.highlight .mh,
|
|
.highlight .mi,
|
|
.highlight .mo,
|
|
.number {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.highlight,
|
|
.white_bkd {
|
|
background-color: var(--card-color);
|
|
}
|
|
|
|
.highlight .hll,
|
|
.dk_grey_bkd {
|
|
background-color: var(--border-color);
|
|
}
|
|
|
|
/*----------------- 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 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;
|
|
}
|
|
|
|
/*----------------- Library README Styles end -----------------*/
|