/** * README: * This stylesheet provides styles for both AsciiDoctor and Antora templates, using the * `boostlook` class for a consistent appearance across both templates. * * Note: This is a work-in-progress and may continue to evolve as templates and requirements * change. * * High-Level HTML Structure: * * - Common Structure: *
*
...
*
...
* *
* * - AsciiDoctor Example: *
*
*

...

* *
*
*
*
...
*
* *
* * - Antora Example: *
*
* *
*
*
*

Getting Started

*
...
*
*
* *
* * - Shared Styles: * Selectors like `.boostlook .header`, `.boostlook .content`, and `.boostlook .footer` * apply common styles across both templates. * * - Specific Styles: * Use `.boostlook:not(:has(.doc))` for AsciiDoctor-specific styles and * `.boostlook .doc` for Antora-specific styles to target unique elements accordingly. * * This CSS file aims to simplify maintenance by aligning the HTML structure and * reducing the need for complex selectors. */ /*----------------- Root Variables - Start -----------------*/ :root { /* General Variables */ --bl-primary-color: rgb(255, 159, 0); --bl-header-height: 2.5rem; /* Light Theme Variables */ --light-bl-background: rgb(255, 255, 255); --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-card-background-color: rgb(255, 255, 255); --light-bl-code-background: rgb(255, 255, 255); --light-bl-code-border-color: rgb(220, 220, 220); --light-bl-code-text-color: rgb(0, 0, 0); --light-bl-link-color: rgb(2, 132, 199); --light-bl-link-hover-color: rgba(0, 90, 156, 0.7); --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); --light-bl-nav-link-color: rgb(0, 0, 0); --light-bl-nav-link-hover-color: rgba(0, 0, 0, 0.6); --light-bl-nav-fade-color: rgb(255, 255, 255, 1); --light-bl-paragraph-color: rgb(0, 0, 0); --light-bl-pasteboard-color: rgb(229, 231, 235); --light-bl-pre-background: rgb(248, 248, 248); --light-bl-primary-color: rgb(255, 159, 0); --light-bl-quote-background: rgb(255, 255, 255); --light-bl-table-border-color: rgb(232, 232, 232); --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); --light-bl-text-color: rgb(51, 65, 85); /* Dark Theme Variables */ --dark-bl-border-color: rgb(209, 228, 242); --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-card-background-color: rgb(23, 42, 52); --dark-bl-code-background: rgb(20, 20, 20); --dark-bl-code-border-color: transparent; --dark-bl-code-text-color: rgb(255, 255, 255); --dark-bl-link-color: rgb(125 211 252); --dark-bl-link-hover-color: rgb(100, 160, 210); --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); --dark-bl-nav-link-color: rgb(255, 255, 255); --dark-bl-nav-link-hover-color: rgba(255, 255, 255, 0.6); --dark-bl-nav-fade-color: rgb(23, 42, 52); --dark-bl-paragraph-color: rgb(255, 255, 255); --dark-bl-pasteboard-color: rgb(05, 26, 38); --dark-bl-pagination-color: rgb(200, 200, 200); --dark-bl-quote-background: rgb(11, 59, 82); --dark-bl-quote-word-color: rgb(209, 228, 242); --dark-bl-table-border-color: rgb(3, 25, 37); --dark-bl-table-head-background: rgb(5, 26, 38); --dark-bl-tab-background: rgb(23, 42, 52); --dark-bl-table-stripe-color: rgb(49,74,87); --dark-bl-tabpanel-background: rgb(49 74 87); --dark-bl-text-color: rgb(255, 255, 255); } /*----------------- Root Variables - End -----------------*/ /*----------------- HTML Variables - Start -----------------*/ html { --bl-background: var(--light-bl-background); --bl-breadcrumbs-svg-color: var(--light-bl-breadcrumbs-svg-color); --bl-caret-svg: var(--light-bl-caret-svg); --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-code-text-color: var(--light-bl-code-text-color); --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); --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-pasteboard-color: var(--light-bl-pasteboard-color); --bl-pre-background: var(--light-bl-pre-background); --bl-quote-background: var(--light-bl-quote-background); --bl-tab-background: var(--light-bl-tab-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); --bl-text-color: var(--light-bl-text-color); } html.dark { --bl-border-color: var(--dark-bl-border-color); --bl-breadcrumbs-svg-color: var(--dark-bl-breadcrumbs-svg-color); --bl-caret-svg: var(--dark-bl-caret-svg); --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-code-text-color: var(--dark-bl-code-text-color); --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); --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-pasteboard-color: var(--dark-bl-pasteboard-color); --bl-pagination-color: var(--dark-bl-pagination-color); --bl-quote-background: var(--dark-bl-quote-background); --bl-quote-word-color: var(--dark-bl-quote-word-color); --bl-tab-background: var(--dark-bl-tab-background); --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); --bl-text-color: var(--dark-bl-text-color); } /*----------------- HTML Variables - End -----------------*/ /*----------------- Font-Face Declarations start -----------------*/ @font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: normal; font-stretch: semi-condensed; font-display: block; src: url('/_/fonts/NotoSansDisplay.ttf') format('truetype'), url('../../../../tools/boostlook/NotoSansDisplay.ttf') format('truetype'), url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format('truetype'); } @font-face { font-family: "Noto Sans Display"; font-style: italic; font-weight: normal; font-stretch: semi-condensed; font-display: block; 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-face { font-family: "Noto Sans Mono"; font-style: normal; font-weight: normal; font-stretch: semi-condensed; font-display: block; 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 -----------------*/ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } #root, #__next { isolation: isolate; } /*----------------- CSS Reset end -----------------*/ /*----------------- Global Styles for .boostlook start -----------------*/ .boostlook { font-family: "Noto Sans Display" !important; font-stretch: condensed; } .boostlook h1, .boostlook h2, .boostlook h3, .boostlook h4, .boostlook h5, .boostlook h6 { display: block; line-height: 1; margin-top: 1em; margin-bottom: 1em; font-weight: 500; } .boostlook h1 { font-size: 2.5rem; } .boostlook h2 { font-size: 2rem; } .boostlook h3 { font-size: 1.5rem; } .boostlook h4 { font-size: 1.35rem; } .boostlook h5 { font-size: 1.25rem; } .boostlook h6 { font-size: 1rem; } .boostlook h1, .boostlook h2, .boostlook h3, .boostlook h4, .boostlook h5, .boostlook h6 { margin-top: 2rem; margin-bottom: 1rem; } .boostlook .doc h2:not(.discrete) { margin-left: 0; padding-left: 0; } .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; } .boostlook p { font-size: 1rem; margin-bottom: 1.5rem; } .boostlook table p, .boostlook ul p { margin: 0; } .boostlook a, .boostlook .doc a { color: var(--bl-link-color); text-decoration: none; } .boostlook a:hover, .boostlook .doc a:hover { color: var(--bl-link-hover-color); cursor: pointer; text-decoration: none; } .boostlook code { font-family: "Noto Sans Mono", monospace; margin-bottom: 1.25rem; } .boostlook em, .boostlook code em { font-family: "Noto Sans Display"; font-size: inherit; } .boostlook h6:has(+table) { margin-left: 1em; } .boostlook p code, .boostlook table code, .boostlook p tt, .boostlook p kbd, .boostlook p samp, .boostlook p pre { overflow-x: hidden; } .boostlook .content div:has(> table) { overflow-x: auto; } .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: 600; color: var(--bl-code-text-color) !important; } .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); } .boostlook .tabpanel { background-color: var(--bl-tabpanel-background); } .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 p a:visited, .boostlook table a, .boostlook .pagination a { color: var(--bl-link-color); } .boostlook .hljs-attribute, .boostlook .hljs-name, .boostlook .hljs-tag { color: var(--bl-hljs-attribute-color); } .boostlook nav.pagination span::before { color: var(--bl-pagination-color); } .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 b, .boostlook strong { font-weight: bold; } .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; overflow-y: auto; } .boostlook #footer { padding-bottom: 1.25rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .boostlook h2:first-of-type { margin-top: 0; } /*----------------- Global Styles for .boostlook end -----------------*/ /*----------------- Styles specific to AsciiDoctor content start -----------------*/ .article.toc2.toc-left { min-height: 100vh; max-width: 80rem; margin-left: auto; margin-right: auto; background-color: var(--bl-pasteboard-color); position: relative; } .boostlook:not(:has(.doc)) pre { font-family: "Noto Sans Mono", monospace; background-color: var(--bl-pre-background); margin-bottom: 1.25rem; padding: 1rem; overflow-x: auto; border-radius: 8px; } .boostlook:not(:has(.doc)) div.highlight { border-radius: 8px; } .boostlook:not(:has(.doc)) table { border-collapse: collapse; margin: 1em; 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; font-weight: 550; } .boostlook:not(:has(.doc)) td { border: 1px solid var(--bl-table-border-color); padding: 0.25em 0.55em; } .boostlook #header > h1 { margin-top: 0; } .boostlook #toc > ul.sectlevel1 { padding-left: 0; } .boostlook #toc ul { margin: 0; padding: 0 0 0 0.8rem; line-height: 1.725; font-size: 1rem; list-style: none; } .boostlook #toc .sectlevel1 > li > a { font-weight: bolder; } .boostlook #toc #toctitle { font-size: 1.5rem; } .boostlook #toc.toc2, .boostlook #header:not(:has(.nav-container)), .boostlook #content, .boostlook #footer { background-color: var(--bl-card-background-color); } .boostlook #toc.toc2, .boostlook #toc.toc2.nav-container { overflow-y: auto; } .boostlook #toc.toc2 { position: static; } .boostlook #toc.toc2 > ul { padding-bottom: 2rem; box-sizing: border-box; position: relative; z-index: 0; } .boostlook #toggle-toc { visibility: hidden; height: 0; width: 0; } .boostlook #toc .nav-menu > .nav-list, .boostlook #toc .nav-menu > .nav-list > .nav-list { padding-left: 0 } .boostlook .nav-menu .title { border-bottom: 1px solid var(--bl-table-border-color); margin-bottom: 16px; } .boostlook #content .sect3:has(.tableblock) { overflow-x: auto; } .boostlook .title { font-weight: bolder; margin-bottom: 0.5rem; } .boostlook pre.rouge .o { font-weight: normal; } .boostlook pre.rouge code span { font-style: normal; } @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; } .boostlook#libraryReadMe { margin-left: 0; } .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; } } @media screen and (min-width: 768px) { html.toc-hidden .boostlook { margin-left: 0; } html.toc-hidden .boostlook #toggle-toc { left: max(0rem, 50% - 39rem - 1rem); } 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; } html.toc-hidden .boostlook #toc.toc2 { visibility: hidden; } html.toc-visible #toc.toc2 { opacity: 1; visibility: visible; width: 250px; padding-left: 1.5rem; } html.toc-visible:not(.toc-pinned) #toc.toc2 { box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.10); } 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; } } /*----------------- Styles specific to AsciiDoctor content end -----------------*/ /*----------------- Styles specific to Antora Templates start -----------------*/ .boostlook #header:has(.nav-container) { padding: 0; } /* Typography */ .boostlook .doc { line-height: 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; } .boostlook p { color: var(--bl-text-color); padding-top: initial !important; padding-bottom: initial !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-weight: bolder; } .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-link-hover-color); } .boostlook .nav-text { color: #828282; } .boostlook #toc.toc2.nav-container { position: fixed; } .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-code-background); border-color: var(--bl-code-border-color); color: var(--bl-code-text-color); border-radius: 8px; padding: 1.2em .8em } .boostlook .doc pre { padding: initial; overflow-x: hidden; } /* 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; overflow-x: auto; margin-bottom: 1.5rem; } .boostlook .doc table.tableblock tr th { background-color: transparent; font-size: 1rem; } .dark .doc table.stripes-even>tbody>tr:nth-of-type(2n) { background-color: var(--bl-table-stripe-color); } /* Toolbar */ .boostlook .toolbar .breadcrumbs a, .boostlook .toolbar .breadcrumbs li { color: var(--bl-text-color); } /* Responsive Styles */ @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 -----------------*/ /*----------------- Styles specific to website-v2 start -----------------*/ /* Library/Releases Readmes */ #libraryReadMe li p { display: inline; } /*----------------- Styles specific to website-v2 end -----------------*/