boost/boostlook
2
0
Fork 0
mirror of https://github.com/boostorg/boostlook.git synced 2026-02-22 15:22:11 +00:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: boost:claude/document-boostlook-workflow-GObyh
Branches Tags
boost:develop boost:fix/typography-tweaks boost:feature/boostlook-v3 boost:claude/document-boostlook-workflow-GObyh boost:master boost:fix-gha-workflow-auth boost:develop_tino boost:develop_tino_qa boost:qa/update-def-list-and-nested-def-list-styles boost:qa-improvements-for-callout-blocks-and-nested-definition-lists boost:qa/boostlook-tino-charconv-layout-issues boost:feature/boostlook-css-redesign
boost:boost-1.90.0 boost:boost-1.90.0.beta1 boost:boost-1.89.0 boost:boost-1.88.0 boost:boost-1.88.0.beta1 boost:boost-1.87.0 boost:boost-1.87.0.beta1
..
compare: boost:fix/typography-tweaks
Branches Tags
boost:fix/typography-tweaks boost:develop boost:feature/boostlook-v3 boost:claude/document-boostlook-workflow-GObyh boost:master boost:fix-gha-workflow-auth boost:develop_tino boost:develop_tino_qa boost:qa/update-def-list-and-nested-def-list-styles boost:qa-improvements-for-callout-blocks-and-nested-definition-lists boost:qa/boostlook-tino-charconv-layout-issues boost:feature/boostlook-css-redesign
boost:boost-1.90.0 boost:boost-1.90.0.beta1 boost:boost-1.89.0 boost:boost-1.88.0 boost:boost-1.88.0.beta1 boost:boost-1.87.0 boost:boost-1.87.0.beta1

5 Commits
claude/doc ... fix/typogr

Author SHA1 Message Date
julioest
8f92b1e120 fix: refine typography 
- Scale inline code in headings to 0.85em with font-weight 400
- Reduce inline code in paragraphs from 0.96em to 0.88em
- Match line-height (1.5rem) across p, ul, and ol elements
- Widen condensed text from wdth 80 to 87.5
- Reduce heading margin-top from 2rem to 1.5rem
 2026-02-19 18:39:12 -05:00
julioest
9019bd322b fix: remove dead code and commented-out CSS from boostlook.css 2026-02-17 19:09:25 -05:00
julioest
1fda28e1b7 feat: add boostlook-v3.css development build 2026-02-17 19:09:25 -05:00
julioest
ed2cb1636c feat: add modular v3 CSS source and build script 2026-02-17 19:09:25 -05:00
julioest
1f8d2f8a79 fix: remove unused local font files 2026-02-17 19:09:25 -05:00
29 changed files with 9794 additions and 486 deletions
Expand all files Collapse all files

BIN
MonaspaceNeon-Regular.woff2
View File

Binary file not shown.

BIN
MonaspaceRadon-Italic.woff2
View File

Binary file not shown.

BIN
MonaspaceXenon-Italic.woff2
View File

Binary file not shown.

BIN
NotoSansMono-Regular.ttf
View File

Binary file not shown.

BIN
NotoSansMono.ttf
View File

Binary file not shown.

4835
boostlook-v3.css Normal file
View File

File diff suppressed because it is too large Load Diff

191
boostlook.css
View File

@@ -435,8 +435,6 @@
--typography-font-size-h3: var(--font-size-2md);
--typography-font-size-h4: var(--font-size-md);
/*
*/
}
}
@@ -859,7 +857,7 @@ h6 {
}
body :not(pre):not([class^="L"]) > code {
/* ovverrides builtin colors */
/* overrides builtin colors */
color: var(--text-code-neutral, #0d0e0f);
border: 0;
background-color: unset;
@@ -911,7 +909,7 @@ body :not(pre):not([class^="L"]) > code {
/* Base Container */
.boostlook {
font-family: var(--font-family-body, "Noto Sans") !important;
font-variation-settings: "wght" 350, "wdth" 80;
font-variation-settings: "wght" 350, "wdth" 87.5;
background: var(--surface-background-main-base-primary, #fff);
}
@@ -934,10 +932,10 @@ body :not(pre):not([class^="L"]) > code {
color: var(--text-main-text-primary, #18191b);
display: block;
line-height: var(--typography-line-height-xl, 1.75rem);
margin-top: var(--padding-padding-xl, 2rem);
margin-top: var(--padding-padding-lg, 1.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
margin-bottom: 0.5rem;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
position: relative;
}
@@ -1288,7 +1286,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
/* Text Emphasis */
.boostlook b,
.boostlook strong {
font-variation-settings: "wght" 600, "wdth" 80;
font-variation-settings: "wght" 600, "wdth" 87.5;
text-shadow: none;
}
@@ -1405,7 +1403,6 @@ html.dark .boostlook .listingblock > .content > pre {
.boostlook .content:has(> pre),
.boostlook .content:has(> pre.highlight) {
border-radius: 0;
/*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
background: var(--surface-background-main-surface-secondary, #e4e7ea);
}
@@ -1422,7 +1419,7 @@ html.dark .boostlook .listingblock > .content > pre {
color: var(--text-main-text-body-primary, #2a2c30);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 600, "wdth" 80;
font-variation-settings: "wght" 600, "wdth" 87.5;
line-height: var(--typography-line-height-md, 1.25rem);
letter-spacing: unset;
padding-bottom: var(--padding-padding-2xs, 0.5rem);
@@ -1490,8 +1487,6 @@ html.dark .boostlook .listingblock > .content > pre {
.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)),
.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)),
.boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)) {
/*margin-left: var(--spacing-size-xl);*/
/*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
background: var(--atom-one-light-bg, #fafafa);
margin-top: var(--padding-padding-xs, 0.75rem);
}
@@ -1533,11 +1528,6 @@ html.dark .boostlook .listingblock > .content > pre {
border: 1px solid var(--border-border-secondary, #d5d7d9);
border-radius: 0;
}
.boostlook .content:has(> pre):has(> .source-toolbox) pre {
/*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
/*border-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook .content:has(> pre):has(> .source-toolbox) .source-toolbox {
position: static;
order: 0;
@@ -1549,12 +1539,10 @@ html.dark .boostlook .listingblock > .content > pre {
font-family: inherit;
z-index: 1;
padding: var(--article-article-compressing-from-12-8--, 0.5rem) var(--spacing-size-sm, 1rem);
/*min-height: 2rem;*/
height: 0;
max-height: 0;
min-height: 0;
padding: 0;
/*margin-top: -1px;*/
}
.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox {
@@ -1572,7 +1560,7 @@ html.dark .boostlook .listingblock > .content > pre {
font-family: "Noto Sans";
font-size: var(--typography-font-size-2xs, 0.75rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
text-transform: uppercase;
@@ -1658,7 +1646,7 @@ html.dark .boostlook .listingblock > .content > pre {
color: var(--text-main-text-primary, #18191b);
text-align: center;
font-size: var(--typography-font-size-sm, 1rem);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
}
@@ -1669,9 +1657,9 @@ html.dark .boostlook .listingblock > .content > pre {
.boostlook .doc .colist > table code:not(:has(> code)) {
display: inline;
color: var(--text-code-neutral, #0d0e0f);
font-size: 0.96em;
font-size: 0.88em;
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-md);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -1682,7 +1670,6 @@ html.dark .boostlook .listingblock > .content > pre {
.boostlook .doc .colist > table code:not(:has(> code)) {
border-radius: unset;
padding: unset;
/* border: 1px solid var(--border-border-secondary, #d5d7d9); */
background: transparent !important;
}
@@ -1702,54 +1689,12 @@ html.dark .boostlook .listingblock > .content > pre {
.boostlook .doc p:not(:is(table p)) code:has(> a:only-child),
.boostlook .doc .colist > table code:has(> a:first-child:last-child),
.boostlook .doc .colist > table code:has(> a:only-child) {
/* transition: all 0.2s ease; */
border-radius: unset;
border: none;
background: transparent !important;
color: inherit;
}
/* Applies to links in code in case where only one link tag inside code */
/* .boostlook code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook p code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook li code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook li code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook .doc p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook .doc p code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook .doc .colist > table code:has(> a:first-child:last-child) a,
.boostlook .doc .colist > table code:has(> a:only-child) a {
text-decoration: none;
font: inherit;
color: inherit;
} */
/* .boostlook .doc table.tableblock code a,
.boostlook:not(:has(.doc)) table.table code a { */
/* text-decoration-color: transparent; */
/* color: var(--text-code-blue, #329cd2); */
/* line-height: var(--typography-line-height-lg, 1.5rem); */
/* } */
/* Code Link Hover States */
/* .boostlook p:not(:is(table p)) a:hover code,
.boostlook li a:hover code,
.boostlook .doc p:not(:is(table p)) a:hover code,
.boostlook .doc table a:hover code,
.boostlook .doc .colist > table a:hover code,
.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
.boostlook p:not(:is(table p)) code:has(> a:only-child):hover,
.boostlook li code:has(> a:first-child:last-child):hover,
.boostlook li code:has(> a:only-child):hover,
.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
.boostlook .doc p:not(:is(table p)) code:has(> a:only-child):hover,
.boostlook .doc .colist > table code:has(> a:first-child:last-child):hover,
.boostlook .doc .colist > table code:has(> a:only-child):hover {
border-color: var(--border-border-blue-hover, #329cd2);
background: var(--surface-background-main-surface-blue-tetriary, #c2e2f4) !important;
} */
.boostlook a:hover code {
color: inherit;
}
@@ -2012,7 +1957,7 @@ html.dark .boostlook .hljs-code {
padding: var(--padding-padding-xs, 0.75rem);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-sm, 1rem);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
letter-spacing: var(--spacing-size-size-0, 0rem);
text-decoration: none;
@@ -2042,7 +1987,7 @@ html.dark .boostlook .hljs-code {
position: static;
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-2xs, 0.75rem);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
transform: revert;
@@ -2200,7 +2145,6 @@ html.dark .boostlook .hljs-code {
font-variation-settings: "wght" 600, "wdth" 62.5;
line-height: var(--typography-line-height-lg, 1.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
/* text-transform: uppercase; */
}
.boostlook #content .admonitionblock > table tr td.icon > * {
padding: 0;
@@ -2232,7 +2176,7 @@ html.dark .boostlook .hljs-code {
.boostlook:not(:has(.doc)) .notices .message p {
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 400, "wdth" 80;
font-variation-settings: "wght" 400, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -2354,7 +2298,6 @@ html.dark .boostlook .hljs-code {
letter-spacing: var(--spacing-size-size-0, 0rem);
font-weight: 600;
color: #000 !important;
/*margin-bottom: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd a:hover {
color: var(--text-states-text-warning, #FF9442);
@@ -2375,7 +2318,7 @@ html.dark .boostlook .hljs-code {
border: none;
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 400, "wdth" 80;
font-variation-settings: "wght" 400, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -2387,7 +2330,6 @@ html.dark .boostlook .hljs-code {
gap: var(--spacing-size-2xs, 0.5rem);
}
/* Where is this used */
.boostlook .dlist dl dt,
.boostlook:not(:has(.doc)) .variablelist dl dt {
display: block;
@@ -2395,12 +2337,11 @@ html.dark .boostlook .hljs-code {
padding: initial;
border-radius: initial;
border: initial;
/* border-bottom-left-radius: unset; */
background: initial;
color: var(--text-code-neutral, #0d0e0f);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
margin-bottom: 0;
@@ -2427,7 +2368,7 @@ html.dark .boostlook .hljs-code {
.boostlook .dlist dl dt code,
.boostlook:not(:has(.doc)) .variablelist dl dt code {
font-variation-settings: "wght" 600, "wdth" 80;
font-variation-settings: "wght" 600, "wdth" 87.5;
font-family: var(--font-family-code, 'Monaspace Neon');
}
@@ -2471,7 +2412,7 @@ html.dark .boostlook .hljs-code {
.boostlook .dlist dl dd em,
.boostlook:not(:has(.doc)) .variablelist dl dd em {
font: inherit;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
}
/* Edit Page Link */
@@ -2480,7 +2421,7 @@ html.dark .boostlook .hljs-code {
text-align: right;
font-size: var(--typography-font-size-2xs, 0.75rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
padding: 0 var(--padding-padding-2xs, 0.5rem);
@@ -2507,7 +2448,7 @@ html.dark .boostlook .hljs-code {
padding-bottom: var(--padding-padding-sm);
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-xs);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -2585,6 +2526,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class])> li {
position: relative;
padding-left: 2rem;
line-height: var(--typography-line-height-lg, 1.5rem);
}
.boostlook ul.itemizedlist > li,
@@ -2596,6 +2538,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ul:not([class]) li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ol:not([class]) li {
font: inherit;
line-height: var(--typography-line-height-lg, 1.5rem);
}
.boostlook ul.itemizedlist > li + li,
@@ -2645,6 +2588,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
position: relative;
padding-left: 2rem;
counter-increment: list-counter;
line-height: var(--typography-line-height-lg, 1.5rem);
}
.boostlook .olist.arabic > ol > li::before,
@@ -2671,9 +2615,6 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
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 */
@@ -2681,6 +2622,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
position: relative;
padding-left: 2rem;
counter-increment: list-counter;
line-height: var(--typography-line-height-lg, 1.5rem);
}
.boostlook .olist.loweralpha > ol > li::before {
@@ -2695,7 +2637,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
justify-content: center;
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--Typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -2710,7 +2652,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
justify-content: center;
font-family: "Noto Sans";
font-style: normal;
font-variation-settings: "wght" 350, "wdth" 80;
font-variation-settings: "wght" 350, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem);
font-size: var(--typography-font-size-sm, 1rem);
text-align: center;
@@ -2720,7 +2662,6 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
text-indent: unset;
color: var(--text-main-text-primary, #18191b);
text-align: center;
/*background: var(--surface-background-main-surface-secondary, #e4e7ea);*/
}
.boostlook .doc code .conum[data-value] {
background: transparent;
@@ -2840,7 +2781,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
color: var(--text-main-text-body-primary, #2a2c30);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 600, "wdth" 80;
font-variation-settings: "wght" 600, "wdth" 87.5;
line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
padding: 0;
padding-bottom: var(--padding-padding-2xs, 0.5rem);
@@ -2849,7 +2790,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
.boostlook #content table.tableblock caption > *,
.boostlook:not(:has(.doc)) div.table .title > * {
font: inherit;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
text-decoration: none;
}
@@ -2884,36 +2825,6 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
}
.boostlook #content table.tableblock:has(thead) th:first-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:first-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:first-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:first-child,
.boostlook#libraryReadMe > table:has(thead) th:first-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:first-child {
/*border-top-left-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock:has(thead) th:last-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:last-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:last-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:last-child,
.boostlook#libraryReadMe > table:has(thead) th:last-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:last-child {
/*border-top-right-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock tr:last-child td:first-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child,
.boostlook#libraryReadMe > table tr:last-child td:first-child {
/*border-bottom-left-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock tr:last-child td:last-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child,
.boostlook#libraryReadMe > table tr:last-child td:last-child {
/*border-bottom-right-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock th,
.boostlook #content table.tableblock th strong,
.boostlook:not(:has(.doc)) table.table th,
@@ -2923,7 +2834,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
background: var(--surface-background-main-surface-primary, #f5f6f8);
color: var(--text-main-text-primary, #000000);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
}
@@ -2984,7 +2895,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
.boostlook #content table.tableblock td strong,
.boostlook:not(:has(.doc)) table.table td strong,
.boostlook#libraryReadMe > table td strong {
font-variation-settings: "wght" 600, "wdth" 80;
font-variation-settings: "wght" 600, "wdth" 87.5;
}
.boostlook #content table.tableblock td code,
@@ -3282,7 +3193,7 @@ div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook))
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a {
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-2xs, 0.75rem);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -3349,7 +3260,7 @@ div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook))
font-size: var(--typography-font-size-2xs, 0.75rem);
line-height: var(--typography-line-height-sm, 1rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
font-variation-settings: "wght" 600, "wdth" 80;
font-variation-settings: "wght" 600, "wdth" 87.5;
}
/* TOC code in links */
@@ -3471,8 +3382,6 @@ html.is-clipped--nav:has(.boostlook) div#content {
html.toc-visible #toc.toc2 {
opacity: 1;
visibility: visible;
/* width: 250px;
padding-left: 1.5rem; */
}
/* TOC Shadow States */
@@ -3514,7 +3423,7 @@ html.is-clipped--nav:has(.boostlook) div#content {
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-lg, 1.25rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-xl, 1.75rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -3666,6 +3575,7 @@ html.dark .boostlook pre.rouge .cm {
font: inherit;
}
.boostlook .doc i {
font: inherit;
color: inherit;
}
@@ -3768,7 +3678,7 @@ html.dark .boostlook pre.rouge .cm {
list-style: none;
color: var(--text-main-text-body-tetriary, #62676b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -3874,8 +3784,6 @@ html.dark .boostlook pre.rouge .cm {
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;
@@ -4250,9 +4158,6 @@ div.source-docs-antora.boostlook > #header,
div.source-docs-antora.boostlook > #content,
div.source-docs-antora.boostlook > #footer,
div.source-docs-antora.boostlook > #footnotes {
/* width: auto;
max-width: unset;
margin-left: auto; */
padding-left: unset;
padding-right: unset;
}
@@ -4284,7 +4189,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) {
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-2xl, 1.75rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-3xl, 2.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
margin: 0;
@@ -4305,7 +4210,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-lg, 1.25rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-xl, 1.75rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -4420,7 +4325,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #cont
padding: var(--spacing-size-3xs, 0.25rem);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-2xs, 0.75rem);
font-variation-settings: "wght" 600, "wdth" 80;
font-variation-settings: "wght" 600, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -4445,9 +4350,6 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #cont
.boostlook#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
.boostlook#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > * {
/* max-width: var(--main-content-width);
margin-left: inherit;
margin-right: inherit; */
margin: 0 auto;
}
@@ -4470,6 +4372,18 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
margin: var(--padding-padding-xs, 0.75rem) 0;
}
.boostlook :is(h1, h2, h3, h4, h5) code,
.boostlook .doc :is(h1, h2, h3, h4, h5) code {
background: transparent !important;
border: none;
font-size: 0.85em;
font-weight: 400;
color: inherit;
padding: 0;
display: initial;
transition: none;
}
.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code {
background: transparent !important;
border: none;
@@ -4532,7 +4446,6 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
display: flex;
flex-direction: column;
gap: var(--padding-padding-md, 1.125rem);
/* border: 2px solid red; */
}
/* Disable margins for all Headings inside table */
@@ -4548,7 +4461,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-md, 1.125rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -4578,7 +4491,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
color: var(--text-main-text-body-tetriary, #62676b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
@@ -4618,7 +4531,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
.boostlook:not(:has(.doc)) .copyright-footer {
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-xs);
font-variation-settings: "wght" 500, "wdth" 80;
font-variation-settings: "wght" 500, "wdth" 87.5;
line-height: var(--typography-line-height-sm, 1rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
text-align: left;

21
build-css.sh Executable file
View File

@@ -0,0 +1,21 @@
#!/bin/sh
# Concatenate CSS modules into boostlook-v3.css
cat \
src/css/00-header.css \
src/css/01-variables.css \
src/css/02-themes.css \
src/css/03-fonts.css \
src/css/04-reset.css \
src/css/05-global-typography.css \
src/css/06-global-links.css \
src/css/07-global-code.css \
src/css/08-global-components.css \
src/css/09-global-tables-images.css \
src/css/10-scrollbars.css \
src/css/11-template-layout.css \
src/css/12-asciidoctor.css \
src/css/13-antora.css \
src/css/14-quickbook.css \
src/css/15-readme.css \
src/css/16-responsive-toc.css \
> boostlook-v3.css

BIN
notosans_mono.woff
View File

Binary file not shown.

BIN
notosans_mono_ext.woff
View File

Binary file not shown.

115
src/css/00-header.css Normal file
View File

@@ -0,0 +1,115 @@
/**
* Boost Look v3 — Development Build
* New design and development for the Boost C++ Libraries website (boost.io),
* in collaboration with MetaLab.
* Built from modular sources in src/css/ via build-css.sh
* Note: boostlook.css remains the current production stylesheet.
* License: BSL-1.0
*/
/**
* File Structure Overview (src/css/):
* 00-header.css - License, file overview
* 01-variables.css - Root CSS custom properties, spacing, typography, icons
* 02-themes.css - Light/dark theme variable mappings
* 03-fonts.css - @font-face declarations (Noto Sans, Monaspace)
* 04-reset.css - CSS reset (box-sizing, margins, defaults)
* 05-global-typography.css - Base container, headings h1-h6, heading anchors
* 06-global-links.css - Paragraph styling, links, footnotes
* 07-global-code.css - Code blocks, inline code, syntax highlighting (hljs)
* 08-global-components.css - Quotes, pagination, admonitions, lists, edit-page link
* 09-global-tables-images.css - Tables, image styles
* 10-scrollbars.css - Scrollbar styling (Firefox + WebKit)
* 11-template-layout.css - Template-specific scrolling, iframe, TOC common styles
* 12-asciidoctor.css - AsciiDoctor-specific styles, Rouge syntax highlighting
* 13-antora.css - Antora navigation, toolbar, breadcrumbs, tabs, search
* 14-quickbook.css - Quickbook legacy wrapper, titles, TOC, tables, footer
* 15-readme.css - Library README styles
* 16-responsive-toc.css - AsciiDoctor responsive TOC layout (768px → 1920px)
*/
/**
* Template Structure:
* The framework supports these main documentation templates:
*
* 1. AsciiDoctor Template:
* example: https://www.boost.io/doc/libs/1_87_0/libs/charconv/doc/html/charconv.html
* <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
*/
/**
* Framework Selector Conventions
*
* The framework uses the following selector prefixes:
*
* 1. .boostlook
* - Primary selector for cross-template styles
* - Applies to all documentation formats
* - Used for common components and layouts
*
* 2. .boostlook:not(:has(.doc)),
* .boostlook#boost-legacy-docs-wrapper - (DEPRECATED),
* .boostlook#antora-template-wrapper,
* div.source-docs-antora.boostlook:not(:has(>.boostlook)) - (Fallback)
* - Specific to legacy Quickbook templates
* - Maintains backward compatibility
* - Handles specialized Quickbook formatting
*
* 3. .boostlook#libraryReadMe
* - Dedicated to README template styling
* - Optimized for library documentation
* - Ensures consistent README presentation
*/

345
src/css/01-variables.css Normal file
View File

@@ -0,0 +1,345 @@
/*----------------- Root Variables - Start -----------------*/
/* Root CSS Variables
* Defines core design tokens used throughout the framework.
* Organized into:
* 1. General Variables - Global settings used across themes
* 2. Color System - Comprehensive color palette including brand, state, and UI colors
* 3. Typography - Font sizes, line heights, and text styling variables
* 4. Spacing System - Padding, margins, and layout spacing tokens
* 5. Icons - SVG icon definitions for light and dark themes
* 6. Responsive Design - Mobile-first breakpoint variables
*/
:root {
/* General Variables - Core design tokens for all themes */
--bl-primary-color: rgb(255, 159, 0); /* Boost's signature orange color */
/*----------------- New Look Variables Start -----------------*/
/* New Look Primitives */
/* Colors Shades of Grey */
--colors-neutral-0: #ffffff;
--colors-neutral-50: #f5f6f8;
--colors-neutral-100: #e4e7ea;
--colors-neutral-200: #c7cccf;
--colors-neutral-250: #f9f9f9;
--colors-neutral-300: #afb3b6;
--colors-neutral-400: #949a9e;
--colors-neutral-500: #798086;
--colors-neutral-600: #62676b;
--colors-neutral-700: #494d50;
--colors-neutral-800: #393b3f;
--colors-neutral-900: #18191b;
--colors-neutral-950: #0d0e0f;
/* Colors Brand Shades */
--colors-brand-orange-50: #fbf2e6;
--colors-brand-orange-100: #ffeaca;
--colors-brand-orange-200: #ffd897;
--colors-brand-orange-300: #ffc364;
--colors-brand-orange-400: #ffb030;
--colors-brand-orange-500: #ff9f00;
--colors-brand-orange-600: #cd7e00;
--colors-brand-orange-700: #9b5f00;
--colors-brand-orange-800: #694000;
--colors-brand-orange-900: #352000;
--colors-brand-orange-950: #1e1200;
/* Colors Negative Shades */
--colors-negative-50: #fdf1f3ff;
--colors-negative-100: #ffe6ea;
--colors-negative-200: #ffcad2;
--colors-negative-300: #fe9aab;
--colors-negative-400: #f9677f;
--colors-negative-500: #eb3856;
--colors-negative-600: #bc233c;
--colors-negative-700: #8d1529;
--colors-negative-800: #600d1b;
--colors-negative-900: #39070f;
--colors-negative-950: #1d0408;
/* Colors Positive Shades */
--colors-positive-0: #f8fefb;
--colors-positive-50: #f0fef7ff;
--colors-positive-100: #def7eb;
--colors-positive-200: #bdeed6;
--colors-positive-300: #9ce6c2;
--colors-positive-400: #7bddad;
--colors-positive-500: #5ad599;
--colors-positive-600: #48ac7b;
--colors-positive-700: #36825d;
--colors-positive-800: #255940;
--colors-positive-850: #1c4431;
--colors-positive-900: #132f22;
--colors-positive-950: #0a1b13;
/* Colors Warning Shades */
--colors-warning-0: rgba(255, 248, 243, 0.5);
--colors-warning-50: #fff8f3ff;
--colors-warning-100: #ffefe2;
--colors-warning-200: #ffd4b3;
--colors-warning-300: #feb780;
--colors-warning-400: #ff9442;
--colors-warning-500: #fd760f;
--colors-warning-600: #c25909;
--colors-warning-700: #914104;
--colors-warning-800: #5d2a02;
--colors-warning-900: #341700;
--colors-warning-950: #1f0e01;
/* Colors Blue Shades */
--colors-blue-0: #f6fafd;
--colors-blue-25: #ebf4f9;
--colors-blue-50: #daeef9;
--colors-blue-100: #c2e2f4;
--colors-blue-200: #92cbe9;
--colors-blue-300: #62b3dd;
--colors-blue-400: #329cd2;
--colors-blue-500: #0284c7;
--colors-blue-600: #026a9f;
--colors-blue-700: #014f77;
--colors-blue-800: #013550;
--colors-blue-850: #01283c;
--colors-blue-900: #001a28;
--colors-blue-950: #000d14;
/* Colors Code Syntax Pallette */
--colors-code-colors-red: var(--colors-negative-400);
--colors-code-colors-green: var(--colors-positive-500);
--colors-code-colors-blue: var(--colors-blue-300);
--colors-code-colors-black: var(--colors-neutral-950);
--colors-code-colors-yellow: #ebc419;
--colors-code-colors-purple: #b350ed;
--colors-code-colors-turquoise: #67eaf9;
--colors-code-colors-white: var(--colors-neutral-0);
--colors-code-colors-red-contrast: var(--colors-negative-500);
--colors-code-colors-green-contrast: var(--colors-positive-600);
--colors-code-colors-blue-contrast: var(--colors-blue-400);
--colors-code-colors-yellow-contrast: #d7a200;
--colors-code-colors-purple-contrast: #9f26e5;
--colors-code-colors-turquoise-contrast: #0dc4d5;
--colors-code-colors-navy: #5469f7;
--colors-code-colors-navy-contrast: #162ec6;
/* Atom One Dark Theme Colors */
--atom-one-dark-bg: #282c34;
--atom-one-dark-text: #abb2bf;
--atom-one-dark-comment: #5c6370;
--atom-one-dark-keyword: #c678dd;
--atom-one-dark-operator: #e06c75;
--atom-one-dark-function: #61aeee;
--atom-one-dark-string: #98c379;
--atom-one-dark-variable: #d19a66;
--atom-one-dark-constant: #56b6c2;
--atom-one-dark-class: #e6c07b;
/* Atom One Light Theme Colors */
--atom-one-light-bg: #fafafa;
--atom-one-light-text: #383a42;
--atom-one-light-comment: #a0a1a7;
--atom-one-light-keyword: #a626a4;
--atom-one-light-operator: #e45649;
--atom-one-light-function: #4078f2;
--atom-one-light-string: #50a14f;
--atom-one-light-variable: #986801;
--atom-one-light-constant: #0184bb;
--atom-one-light-class: #c18401;
/* Colors Other */
--colors-neutral-150: #d5d7d9;
--colors-neutral-850: #2a2c30;
--colors-neutral-750: #1c1c1c;
--colors-overlay-overlay-white-40: rgba(255 255 255 / 0.4);
--colors-overlay-overlay-black-40: rgba(13 14 15 / 0.4);
--colors-overlay-overlay-white-64: rgba(255 255 255 / 0.64);
--colors-overlay-overlay-black-64: rgba(13 14 15 / 0.64);
--colors-overlay-overlay-white-88: rgba(255 255 255 / 0.88);
--colors-overlay-overlay-black-88: rgba(13 14 15 / 0.88);
/* Spacings And Sizes */
--spacing-size-size-0: 0rem;
--spacing-size-4xs: 0.125rem;
--spacing-size-3xs: 0.25rem;
--spacing-size-2xs: 0.5rem;
--spacing-size-xs: 0.75rem;
--spacing-size-sm: 1rem;
--spacing-size-md: 1.125rem;
--spacing-size-2md: 1.3rem;
--spacing-size-lg: 1.5rem;
--spacing-size-xl: 2rem;
--spacing-size-2xl: 2.5rem;
--spacing-size-3xl: 3rem;
--main-container: 90rem;
/* New Look Typography */
--font-family-body: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--font-family-code: "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.875rem;
--font-size-sm: 1rem;
--font-size-2sm: 1.2rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-2md: 1.3rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.75rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
--font-line-height-xs: 0.75rem;
--font-line-height-sm: 1rem;
--font-line-height-md: 1.25rem;
--font-line-height-lg: 1.5rem;
--font-line-height-xl: 1.75rem;
--font-line-height-2xl: 2rem;
--font-line-height-3xl: 2.5rem;
--font-line-height-4xl: 3rem;
/* New Look Icons */
/* Themed Headings Anchor Icon */
--icon-anchor-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_10452)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_10452%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
--icon-anchor-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_7189)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_7189%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
/* Themed Left Arrow Icon */
--icon-arrow-left-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-left-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
/* Themed Right Arrow Icon */
--icon-arrow-right-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-right-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
/* Themed Up Arrow Icon */
--icon-arrow-up-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-up-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
/* Themed Clipboard Icon */
--icon-clipboard-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
--icon-clipboard-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
/* Themed Home Icon */
--icon-home-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1192%203.23498C11.177%202.24329%2012.823%202.24329%2013.8808%203.23498L19.8808%208.85998C20.4354%209.37986%2020.75%2010.1061%2020.75%2010.8662V18.9997C20.75%2019.9662%2019.9665%2020.7497%2019%2020.7497H15C14.5858%2020.7497%2014.25%2020.414%2014.25%2019.9997V15.9998C14.25%2015.8617%2014.1381%2015.7498%2014%2015.7498H10C9.86193%2015.7498%209.75%2015.8617%209.75%2015.9998V19.9997C9.75%2020.414%209.41421%2020.7497%209%2020.7497H5C4.0335%2020.7497%203.25%2019.9662%203.25%2018.9997V10.8662C3.25%2010.1061%203.56462%209.37986%204.11916%208.85998L10.1192%203.23498ZM12.8549%204.32929C12.3741%203.87852%2011.6259%203.87852%2011.1451%204.32929L5.14507%209.95429C4.89301%2010.1906%204.75%2010.5207%204.75%2010.8662V18.9997C4.75%2019.1378%204.86193%2019.2497%205%2019.2497H8.25V15.9998C8.25%2015.0333%209.0335%2014.2498%2010%2014.2498H14C14.9665%2014.2498%2015.75%2015.0333%2015.75%2015.9998V19.2497H19C19.1381%2019.2497%2019.25%2019.1378%2019.25%2018.9997V10.8662C19.25%2010.5207%2019.107%2010.1906%2018.8549%209.95429L12.8549%204.32929Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
--icon-home-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1192%203.23523C11.177%202.24353%2012.823%202.24353%2013.8808%203.23523L19.8808%208.86023C20.4354%209.38011%2020.75%2010.1063%2020.75%2010.8665V19C20.75%2019.9665%2019.9665%2020.75%2019%2020.75H15C14.5858%2020.75%2014.25%2020.4142%2014.25%2020V16C14.25%2015.8619%2014.1381%2015.75%2014%2015.75H10C9.86193%2015.75%209.75%2015.8619%209.75%2016V20C9.75%2020.4142%209.41421%2020.75%209%2020.75H5C4.0335%2020.75%203.25%2019.9665%203.25%2019V10.8665C3.25%2010.1063%203.56462%209.38011%204.11916%208.86023L10.1192%203.23523ZM12.8549%204.32953C12.3741%203.87876%2011.6259%203.87876%2011.1451%204.32953L5.14507%209.95453C4.89301%2010.1908%204.75%2010.5209%204.75%2010.8665V19C4.75%2019.1381%204.86193%2019.25%205%2019.25H8.25V16C8.25%2015.0335%209.0335%2014.25%2010%2014.25H14C14.9665%2014.25%2015.75%2015.0335%2015.75%2016V19.25H19C19.1381%2019.25%2019.25%2019.1381%2019.25%2019V10.8665C19.25%2010.5209%2019.107%2010.1908%2018.8549%209.95453L12.8549%204.32953Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
/* Themed File Icon */
--icon-file-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%2362676B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%2362676B%22%2F%3E%3C%2Fsvg%3E");
--icon-file-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%23949A9E%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%23949A9E%22%2F%3E%3C%2Fsvg%3E");
/* Themed Menu Icon */
--icon-menu-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
--icon-menu-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
/* New Look Responsive Mobile First */
/* Spacing */
--leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
--leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
--leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
--leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
--padding-padding-lg: var(--spacing-size-md);
--padding-padding-sm: var(--spacing-size-xs);
--padding-padding-2sm: var(--spacing-size-2md);
--padding-padding-xs: var(--spacing-size-xs);
--padding-padding-2xs: var(--spacing-size-2xs);
--padding-padding-3xs: var(--spacing-size-3xs);
--padding-padding-xl: var(--spacing-size-xl);
--leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
--leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
--leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
--padding-padding-md: var(--spacing-size-sm);
--main-margin: var(--spacing-size-sm);
--main-max-width-leftbar: 0rem;
--main-content-width: 54rem;
--icons-24: 1.5rem;
--icons-20: 1.25rem;
--icons-16: 1rem;
--icons-12: 0.75rem;
/* Typography */
--typography-font-size-3xs: var(--font-size-3xs);
--typography-font-size-2xs: var(--font-size-2xs);
--typography-font-size-xs: var(--font-size-xs);
--typography-font-size-sm: var(--font-size-xs);
--typography-font-size-md: var(--font-size-sm);
--typography-font-size-2md: var(--font-size-2sm);
--typography-font-size-lg: var(--font-size-md);
--typography-font-size-xl: var(--font-size-lg);
--typography-font-size-2xl: var(--font-size-xl);
--typography-font-size-3xl: var(--font-size-2xl);
--typography-font-size-4xl: var(--font-size-3xl);
--typography-line-height-xs: var(--font-line-height-xs);
--typography-line-height-sm: var(--font-line-height-sm);
--typography-line-height-md: var(--font-line-height-md);
--typography-line-height-lg: var(--font-line-height-md);
--typography-line-height-xl: var(--font-line-height-lg);
--typography-line-height-2xl: var(--font-line-height-lg);
--typography-line-height-3xl: var(--font-line-height-2xl);
--typography-line-height-4xl: var(--font-line-height-3xl);
/*----------------- New Look Variables End -----------------*/
}
/*----------------- New Look Responsive Desktop Start -----------------*/
@media (min-width: 768px) {
:root {
/* Spacing */
--leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
--leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
--leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
--leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
--padding-padding-lg: var(--spacing-size-lg);
--padding-padding-sm: var(--spacing-size-sm);
--padding-padding-xs: var(--spacing-size-xs);
--padding-padding-2xs: var(--spacing-size-2xs);
--padding-padding-3xs: var(--spacing-size-3xs);
--leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
--leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
--leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
--padding-padding-md: var(--spacing-size-md);
--main-margin: var(--spacing-size-xl);
--main-max-width-leftbar: 18.25rem;
--icons-24: 1.5rem;
--icons-20: 1.25rem;
--icons-16: 1rem;
--icons-12: 0.75rem;
/* Typography */
--typography-font-size-3xs: var(--font-size-3xs);
--typography-font-size-2xs: var(--font-size-2xs);
--typography-font-size-xs: var(--font-size-xs);
--typography-font-size-sm: var(--font-size-sm);
--typography-font-size-md: var(--font-size-md);
--typography-font-size-2md: var(--font-size-2md);
--typography-font-size-lg: var(--font-size-lg);
--typography-font-size-xl: var(--font-size-xl);
--typography-font-size-2xl: var(--font-size-2xl);
--typography-font-size-3xl: var(--font-size-3xl);
--typography-font-size-4xl: var(--font-size-4xl);
--typography-line-height-xs: var(--font-line-height-xs);
--typography-line-height-sm: var(--font-line-height-sm);
--typography-line-height-md: var(--font-line-height-md);
--typography-line-height-lg: var(--font-line-height-lg);
--typography-line-height-xl: var(--font-line-height-xl);
--typography-line-height-2xl: var(--font-line-height-2xl);
--typography-line-height-3xl: var(--font-line-height-3xl);
--typography-line-height-4xl: var(--font-line-height-4xl);
/* Heading */
--typography-font-size-h1: var(--font-size-2xl);
--typography-font-size-h2: var(--font-size-xl);
--typography-font-size-h3: var(--font-size-2md);
--typography-font-size-h4: var(--font-size-md);
/*
*/
}
}
@media (min-width: 990px) {
:root {
--main-max-width-leftbar: 21.25rem;
--main-margin: var(--spacing-size-3xl);
}
}
/*----------------- New Look Responsive Desktop End -----------------*/
/*----------------- Root Variables - End -----------------*/

243
src/css/02-themes.css Normal file
View File

@@ -0,0 +1,243 @@
/*----------------- HTML Variables - Start -----------------*/
/**
* HTML Theme Variables
* These variables are applied to the HTML element and control the active theme.
* The framework supports two themes:
* 1. Light Theme (default)
* 2. Dark Theme (activated by html.dark class)
*/
/* Light Theme (Default) Configuration */
html {
/*----------------- New Look Variables Start -----------------*/
--icon-anchor: var(--icon-anchor-light);
--icon-arrow-left: var(--icon-arrow-left-light);
--icon-arrow-right: var(--icon-arrow-right-light);
--icon-arrow-up: var(--icon-arrow-up-light);
--icon-clipboard: var(--icon-clipboard-light);
--icon-home: var(--icon-home-light);
--icon-file: var(--icon-file-light);
--icon-menu: var(--icon-menu-light);
--text-buttons-button-label-primary-default: var(--colors-neutral-0);
--text-buttons-button-label-secondary-default: var(--colors-neutral-900);
--text-buttons-button-label-inactive: var(--colors-neutral-500);
--text-main-text-primary: var(--colors-neutral-900);
--text-main-text-link-blue-secondary: var(--colors-blue-500);
--text-main-text-link-blue-tetriary: var(--colors-blue-400);
--text-main-text-body-secondary: var(--colors-neutral-700);
--text-main-text-body-quaternary: var(--colors-neutral-400);
--text-main-text-body-tetriary: var(--colors-neutral-600);
--text-main-text-body-primary: var(--colors-neutral-850);
--text-main-text-link-blue: var(--colors-blue-600);
--text-states-text-warning-tetriary: var(--colors-warning-600);
--text-states-text-warning-secondary: var(--colors-warning-500);
--text-states-text-positive-secondary: var(--colors-positive-500);
--text-states-text-positive-tetriary: var(--colors-positive-600);
--text-states-text-negative-secondary: var(--colors-negative-500);
--text-states-text-negative-tetriary: var(--colors-negative-600);
--text-states-text-warning: var(--colors-warning-400);
--text-states-text-positive: var(--colors-positive-400);
--text-states-text-negative: var(--colors-negative-400);
--text-states-text-additional: var(--colors-blue-400);
--text-states-text-additional-secondary: var(--colors-blue-500);
--text-states-text-additional-tetriary: var(--colors-blue-600);
--text-code-red: var(--atom-one-light-operator);
--text-code-green: var(--atom-one-light-string);
--text-code-blue: var(--atom-one-light-function);
--text-code-yellow: var(--atom-one-light-variable);
--text-code-purple: var(--atom-one-light-keyword);
--text-code-turquoise: var(--atom-one-light-constant);
--text-code-neutral: var(--atom-one-light-text);
--text-code-navy: var(--atom-one-light-class);
--surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-400);
--surface-button-button-bg-primary-default: var(--colors-blue-700);
--surface-button-button-bg-primary-pressed: var(--colors-blue-700);
--surface-button-button-bg-primary-inactive: var(--colors-neutral-200);
--surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-500);
--surface-button-button-bg-primary-hover: var(--colors-blue-800);
--surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-400);
--surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-200);
--surface-background-main-base-primary: var(--colors-neutral-0);
--surface-background-main-surface-primary: var(--colors-neutral-50);
--surface-background-main-surface-secondary: var(--colors-neutral-100);
--surface-background-main-surface-tetriary: var(--colors-neutral-150);
--surface-background-main-surface-blue-primary: var(--colors-blue-0);
--surface-background-main-surface-blue-secondary: var(--colors-blue-50);
--surface-background-main-surface-blue-tetriary: var(--colors-blue-100);
--surface-background-main-surface-blue-quaternary: var(--colors-blue-200);
--surface-background-main-surface-transparent: var(--colors-overlay-overlay-white-64);
--surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-black-40);
--surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-white-88);
--surface-background-states-surface-warning-primary: var(--colors-warning-0);
--surface-background-states-surface-warning-secondary: var(--colors-warning-100);
--surface-background-states-surface-warning-tetriary: var(--colors-warning-200);
--surface-background-states-surface-warning-quaternary: var(--colors-warning-300);
--surface-background-states-surface-positive-primary: var(--colors-positive-50);
--surface-background-states-surface-positive-secondary: var(--colors-positive-100);
--surface-background-states-surface-positive-tetriary: var(--colors-positive-200);
--surface-background-states-surface-positive-quaternary: var(--colors-positive-300);
--surface-background-states-surface-negative-primary: var(--colors-negative-50);
--surface-background-states-surface-negative-secondary: var(--colors-negative-100);
--surface-background-states-surface-negative-tetriary: var(--colors-negative-200);
--surface-background-states-surface-negative-quaternary: var(--colors-negative-300);
--surface-background-states-surface-additional-secondary: var(--colors-blue-100);
--surface-background-states-surface-additional-tetriary: var(--colors-blue-200);
--surface-background-states-surface-additional-quaternary: var(--colors-blue-300);
--surface-icons-icon-primary: var(--colors-neutral-900);
--surface-icons-icon-button-primary: var(--colors-neutral-0);
--surface-icons-icon-button-secondary: var(--colors-neutral-900);
--surface-icons-icon-button-inactive: var(--colors-neutral-500);
--surface-icons-icon-secondary: var(--colors-neutral-600);
--surface-icons-icon-quaternary: var(--colors-neutral-200);
--surface-icons-icon-cta: var(--colors-brand-orange-500);
--surface-icons-icon-hover: var(--colors-brand-orange-400);
--surface-icons-icon-tetriary: var(--colors-neutral-400);
--surface-icons-icon-warning: var(--colors-warning-600);
--surface-icons-icon-positive: var(--colors-positive-600);
--surface-icons-icon-negative: var(--colors-negative-600);
--surface-icons-icon-brand-orange: var(--colors-brand-orange-600);
--surface-icons-icon-blue: var(--colors-blue-600);
--surface-icons-icon-blue-light: var(--colors-blue-200);
--border-border-primary: var(--colors-neutral-100);
--border-border-secondary: var(--colors-neutral-150);
--border-border-tetriary: var(--colors-neutral-300);
--border-border-quaternary: var(--colors-neutral-600);
--border-border-active: var(--colors-neutral-900);
--border-border-brand-orange: var(--colors-brand-orange-200);
--border-border-warning: var(--colors-warning-200);
--border-border-positive: var(--colors-positive-200);
--border-border-negative: var(--colors-negative-200);
--border-border-blue: var(--colors-blue-200);
--border-border-blue-primary: var(--colors-blue-100);
--border-border-blue-hover: var(--colors-blue-400);
/*----------------- New Look Variables End -----------------*/
}
/* Dark Theme Configuration */
html.dark {
/*----------------- New Look Variables Dark Mode Start -----------------*/
--icon-anchor: var(--icon-anchor-dark);
--icon-arrow-left: var(--icon-arrow-left-dark);
--icon-arrow-right: var(--icon-arrow-right-dark);
--icon-arrow-up: var(--icon-arrow-up-dark);
--icon-clipboard: var(--icon-clipboard-dark);
--icon-home: var(--icon-home-dark);
--icon-file: var(--icon-file-dark);
--icon-menu: var(--icon-menu-dark);
--text-buttons-button-label-primary-default: var(--colors-neutral-0);
--text-buttons-button-label-secondary-default: var(--colors-neutral-950);
--text-buttons-button-label-inactive: var(--colors-neutral-500);
--text-main-text-primary: var(--colors-neutral-0);
--text-main-text-link-blue-secondary: var(--colors-blue-500);
--text-main-text-link-blue-tetriary: var(--colors-blue-600);
--text-main-text-link-blue: var(--colors-blue-400);
--text-main-text-body-secondary: var(--colors-neutral-200);
--text-main-text-body-tetriary: var(--colors-neutral-300);
--text-main-text-body-quaternary: var(--colors-neutral-600);
--text-main-text-body-primary: var(--colors-neutral-50);
--text-states-text-warning-tetriary: var(--colors-warning-400);
--text-states-text-warning-secondary: var(--colors-warning-500);
--text-states-text-warning: var(--colors-warning-600);
--text-states-text-positive-secondary: var(--colors-positive-500);
--text-states-text-positive-tetriary: var(--colors-positive-400);
--text-states-text-positive: var(--colors-positive-600);
--text-states-text-negative-secondary: var(--colors-negative-500);
--text-states-text-negative-tetriary: var(--colors-negative-400);
--text-states-text-negative: var(--colors-negative-600);
--text-states-text-additional: var(--colors-blue-600);
--text-states-text-additional-secondary: var(--colors-blue-500);
--text-states-text-additional-tetriary: var(--colors-blue-400);
--text-code-red: var(--atom-one-dark-operator);
--text-code-green: var(--atom-one-dark-string);
--text-code-blue: var(--atom-one-dark-function);
--text-code-yellow: var(--atom-one-dark-variable);
--text-code-purple: var(--atom-one-dark-keyword);
--text-code-turquoise: var(--atom-one-dark-constant);
--text-code-neutral: var(--atom-one-dark-text);
--text-code-navy: var(--atom-one-dark-class);
--surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500);
--surface-button-button-bg-primary-default: var(--colors-blue-800);
--surface-button-button-bg-primary-pressed: var(--colors-blue-800);
--surface-button-button-bg-primary-inactive: var(--colors-neutral-800);
--surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-400);
--surface-button-button-bg-primary-hover: var(--colors-blue-700);
--surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-500);
--surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-800);
--surface-background-main-base-primary: var(--colors-neutral-950);
--surface-background-main-surface-primary: var(--colors-neutral-900);
--surface-background-main-surface-secondary: var(--colors-neutral-850);
--surface-background-main-surface-tetriary: var(--colors-neutral-800);
--surface-background-main-surface-blue-primary: var(--colors-blue-900);
--surface-background-main-surface-blue-secondary: var(--colors-blue-900);
--surface-background-main-surface-blue-tetriary: var(--colors-blue-850);
--surface-background-main-surface-blue-quaternary: var(--colors-blue-800);
--surface-background-main-surface-transparent: var(--colors-overlay-overlay-black-64);
--surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-white-40);
--surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-black-88);
--surface-background-states-surface-warning-primary: var(--colors-warning-950);
--surface-background-states-surface-warning-secondary: var(--colors-warning-950);
--surface-background-states-surface-warning-tetriary: var(--colors-warning-800);
--surface-background-states-surface-warning-quaternary: var(--colors-warning-700);
--surface-background-states-surface-positive-primary: var(--colors-positive-950);
--surface-background-states-surface-positive-secondary: var(--colors-positive-950);
--surface-background-states-surface-positive-tetriary: var(--colors-positive-800);
--surface-background-states-surface-positive-quaternary: var(--colors-positive-700);
--surface-background-states-surface-negative-primary: var(--colors-negative-950);
--surface-background-states-surface-negative-secondary: var(--colors-negative-950);
--surface-background-states-surface-negative-tetriary: var(--colors-negative-800);
--surface-background-states-surface-negative-quaternary: var(--colors-negative-700);
--surface-background-states-surface-additional-secondary: var(--colors-blue-950);
--surface-background-states-surface-additional-tetriary: var(--colors-blue-800);
--surface-background-states-surface-additional-quaternary: var(--colors-blue-700);
--surface-icons-icon-primary: var(--colors-neutral-0);
--surface-icons-icon-button-primary: var(--colors-neutral-0);
--surface-icons-icon-button-secondary: var(--colors-neutral-950);
--surface-icons-icon-button-inactive: var(--colors-neutral-600);
--surface-icons-icon-secondary: var(--colors-neutral-400);
--surface-icons-icon-quaternary: var(--colors-neutral-600);
--surface-icons-icon-cta: var(--colors-brand-orange-500);
--surface-icons-icon-hover: var(--colors-brand-orange-600);
--surface-icons-icon-warning: var(--colors-warning-400);
--surface-icons-icon-positive: var(--colors-positive-400);
--surface-icons-icon-negative: var(--colors-negative-400);
--surface-icons-icon-brand-orange: var(--colors-brand-orange-400);
--surface-icons-icon-blue: var(--colors-blue-400);
--surface-icons-icon-blue-light: var(--colors-blue-700);
--border-border-primary: var(--colors-neutral-850);
--border-border-secondary: var(--colors-neutral-800);
--border-border-tetriary: var(--colors-neutral-700);
--border-border-quaternary: var(--colors-neutral-500);
--border-border-active: var(--colors-neutral-0);
--border-border-brand-orange: var(--colors-brand-orange-900);
--border-border-warning: var(--colors-warning-800);
--border-border-positive: var(--colors-positive-800);
--border-border-negative: var(--colors-negative-800);
--border-border-blue: var(--colors-blue-700);
--border-border-blue-primary: var(--colors-blue-850);
--border-border-blue-hover: var(--colors-blue-500);
/*----------------- New Look Variables Dark Mode Start -----------------*/
}
/*----------------- HTML Variables - End -----------------*/

93
src/css/03-fonts.css Normal file
View File

@@ -0,0 +1,93 @@
/* Override for Antora default styles */
html:has(.boostlook) {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1rem;
height: 100%;
scroll-behavior: smooth;
}
/*----------------- Font-Face Declarations start -----------------*/
/**
* Typography Configuration
* The framework uses Noto Sans family as its primary font system:
* 1. Noto Sans Display: Main text font with variable weight support
* 2. Monaspace Neon: Monospace font for code blocks
*
* Font Loading Strategy:
* - Multiple source paths for resilient loading
* - Variable fonts for optimal performance
* - Font-display: block to prevent FOIT (Flash of Invisible Text)
*/
/* Noto Sans Display - Regular */
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 100 900;
font-stretch: 62.5% 100%;
font-variation-settings: "wght" 400, "wdth" 62.5;
font-display: block;
src: url("../font/NotoSansDisplay.ttf") format("truetype"),
url("/static/font/notosans.woff2") format("woff2"),
url("../../../../tools/boostlook/notosans.woff2") format("woff2"),
url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype");
size-adjust: 100%;
ascent-override: 92%;
descent-override: 22%;
line-gap-override: 0%;
}
/* Noto Sans Display - Italic */
@font-face {
font-family: "Noto Sans";
font-style: italic;
font-weight: 100 900;
font-stretch: 62.5% 100%;
font-variation-settings: "wght" 400, "wdth" 62.5;
font-display: block;
src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"),
url("/static/font/notosans_ext.woff2") format("woff2"),
url("../../../../tools/boostlook/notosans_ext.woff2") format("woff2"),
url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype");
size-adjust: 100%;
ascent-override: 92%;
descent-override: 22%;
line-gap-override: 0%;
}
/* Monaspace Neon - Regular */
@font-face {
font-family: "Monaspace Neon";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../font/MonaspaceNeonFrozen-Regular.ttf") format("truetype"),
url("/static/font/MonaspaceNeon-Var.woff2") format("woff2"),
url("../../../../tools/boostlook/MonaspaceNeon-Var.woff2") format("woff2"),
url("https://cppalliance.org/fonts/MonaspaceNeon-Var.woff2") format("woff2");
size-adjust: 100%;
ascent-override: 92%;
descent-override: 22%;
line-gap-override: 0%;
}
/* Monaspace Xenon - Italic */
@font-face {
font-family: "Monaspace Xenon";
font-style: italic;
font-weight: 400;
font-display: block;
src: url("../font/MonaspaceXenonFrozen-Italic.ttf") format("truetype"),
url("/static/font/MonaspaceXenon-Var.woff2") format("woff2"),
url("../../../../tools/boostlook/MonaspaceXenon-Var.woff2") format("woff2"),
url("https://cppalliance.org/fonts/MonaspaceXenon-Var.woff2") format("woff2");
size-adjust: 100%;
ascent-override: 92%;
descent-override: 22%;
line-gap-override: 0%;
}
/*----------------- Font-Face Declarations end -----------------*/

105
src/css/04-reset.css Normal file
View File

@@ -0,0 +1,105 @@
/*----------------- CSS Reset start -----------------*/
/**
* Modern CSS Reset
* A minimal CSS reset that:
* 1. Uses the modern box-sizing model
* 2. Removes default margins
* 3. Improves text rendering
* 4. Ensures responsive media elements
* 5. Normalizes form elements
* 6. Prevents text overflow issues
* 7. Provides a proper stacking context
* 8. Resets legacy table and adjacent element styles
*/
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
* {
margin: 0;
}
html body {
margin: 0;
}
/* Body defaults */
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
margin: 0;
/* Improves text rendering on WebKit */
}
/* Media elements */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
/* Responsive media elements */
}
/* Form elements */
input,
button,
textarea,
select {
font: inherit;
/* Inherit typography */
}
/* Text elements */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
/* Prevent text overflow */
}
body :not(pre):not([class^="L"]) > code {
/* overrides builtin colors */
color: var(--text-code-neutral, #0d0e0f);
border: 0;
background-color: unset;
}
/* Stacking context */
#root,
#__next {
isolation: isolate;
/* Create new stacking context */
}
/* Reset Legacy Table and Next to Table Element Styles */
.boostlook .tablecontainer,
.boostlook .tablecontainer + *,
.boostlook :not(.tablecontainer) > table.tableblock,
.boostlook :not(.tablecontainer) > table.tableblock + *,
.boostlook .doc .tablecontainer,
.boostlook .doc .tablecontainer + *,
.boostlook .doc :not(.tablecontainer) > table.tableblock,
.boostlook .doc :not(.tablecontainer) > table.tableblock + *,
.boostlook.boostlook:not(:has(.doc)) table.table,
.boostlook.boostlook:not(:has(.doc)) table.table + * {
margin: revert;
}
.boostlook .underline:has(> code:only-child) {
text-decoration-line: none;
}
/*----------------- CSS Reset end -----------------*/

261
src/css/05-global-typography.css Normal file
View File

@@ -0,0 +1,261 @@
/*----------------- Global Styles for .boostlook start -----------------*/
/**
* Global Styles for .boostlook
* Core styles that apply to all .boostlook containers regardless of template.
* These styles establish:
* 1. Base container styling
* 2. Typography hierarchy and spacing
* 3. Link appearances and interactions
* 4. Code block formatting and syntax highlighting
* 5. List and table styles
* 6. Special block elements (quotes, admonitions, etc.)
* 7. Pagination and navigation elements
* 8. Layout structure and spacing
*/
/* Base Container */
.boostlook {
font-family: var(--font-family-body, "Noto Sans") !important;
font-variation-settings: "wght" 350, "wdth" 80;
background: var(--surface-background-main-base-primary, #fff);
}
/* Typography Hierarchy
* Establishes consistent heading sizes and spacing
* while maintaining proper visual hierarchy
*/
.boostlook h1,
.boostlook .doc h1,
.boostlook h2,
.boostlook .doc h2,
.boostlook h3,
.boostlook .doc h3,
.boostlook h4,
.boostlook .doc h4,
.boostlook h5,
.boostlook .doc h5,
.boostlook h6,
.boostlook .doc h6 {
color: var(--text-main-text-primary, #18191b);
display: block;
line-height: var(--typography-line-height-xl, 1.75rem);
margin-top: var(--padding-padding-xl, 2rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
margin-bottom: 0.5rem;
font-variation-settings: "wght" 500, "wdth" 80;
position: relative;
}
/* Heading Sizes */
.boostlook h1,
.boostlook .doc h1 {
font-size: var(--typography-font-size-h1, 1.75rem);
line-height: var(--typography-line-height-3xl, 2.5rem); /* 142.857% */
}
/* Primary headings */
.boostlook h2,
.boostlook .doc h2 {
font-size: var(--typography-font-size-h2, 1.5rem);
}
/* Section headings */
.boostlook h3,
.boostlook .doc h3 {
font-size: var(--typography-font-size-h3, 1.3rem);
line-height: var(--typography-line-height-xl, 1.85rem); /* 155.556% */
}
/* Subsection headings */
.boostlook h4,
.boostlook .doc h4 {
font-size: var(--typography-font-size-h4, 1.125rem);
line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
}
/* Topic headings */
.boostlook h5,
.boostlook .doc h5 {
font-size: var(--font-size-sm, 1rem);
line-height: var(--font-line-height-lg, 1.5rem);
}
/* Subtopic headings */
.boostlook h6,
.boostlook .doc h6 {
font-size: var(--font-size-xs, 0.875rem);
line-height: var(--font-line-height-md, 1.25rem);
}
/* Document-specific headings adjustments */
.boostlook .doc h2:not(.discrete) {
/* website-v2-doc styles overrides */
margin-left: 0;
padding-left: 0;
border-bottom: revert;
margin-right: revert;
padding: revert;
}
.boostlook h2:has(+ .sectionbody > .sect2:first-child > h3),
.boostlook .doc h2:has(+ .sectionbody > .sect2:first-child > h3) {
margin-bottom: 0;
}
.boostlook h3:has(+ .sect3 > h4:first-child),
.boostlook .doc h2:has(+ .sect3 > h4:first-child) {
margin-bottom: 0;
}
/* Override default docs site css */
.boostlook .doc .dlist,
.boostlook .doc .exampleblock,
.boostlook .doc .hdlist,
.boostlook .doc .imageblock,
.boostlook .doc .listingblock,
.boostlook .doc .literalblock,
.boostlook .doc .olist,
.boostlook .doc .paragraph,
.boostlook .doc .partintro,
.boostlook .doc .quoteblock,
.boostlook .doc .sidebarblock,
.boostlook .doc .tabs,
.boostlook .doc .ulist,
.boostlook .doc .verseblock,
.boostlook .doc .videoblock,
.boostlook .doc details,
.boostlook .doc hr {
margin: revert;
}
/* Anchor positioning within headings */
.boostlook .doc h1:has(.anchor),
.boostlook .doc h2:has(.anchor),
.boostlook .doc h3:has(.anchor),
.boostlook .doc h4:has(.anchor),
.boostlook .doc h5:has(.anchor),
.boostlook .doc h6:has(.anchor),
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) {
display: inline-block;
/* Anchor width and spacing compensation */
padding-right: 3rem;
}
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href] {
text-decoration: none;
color: inherit;
}
/* Heading Anchors */
.boostlook .doc h1 .anchor,
.boostlook .doc h2 .anchor,
.boostlook .doc h3 .anchor,
.boostlook .doc h4 .anchor,
.boostlook .doc h5 .anchor,
.boostlook .doc h6 .anchor,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id],
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
position: absolute;
top: 50%;
right: 0;
display: flex;
align-items: center;
justify-content: center;
margin-left: revert;
width: 2rem;
height: 2rem;
border: 1px;
visibility: hidden;
opacity: 0;
text-decoration: none;
border-radius: var(--spacing-size-lg, 1.5rem);
border: 1px solid var(--border-border-primary, #e4e7ea);
background: var(--surface-background-main-base-primary, #fff);
transform: translateY(-50%);
transition: all 0.2s ease;
}
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id] {
visibility: visible;
}
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
content: "";
}
.boostlook .doc h1 .anchor::before,
.boostlook .doc h2 .anchor::before,
.boostlook .doc h3 .anchor::before,
.boostlook .doc h4 .anchor::before,
.boostlook .doc h5 .anchor::before,
.boostlook .doc h6 .anchor::before,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
content: var(--icon-anchor);
display: block;
line-height: 1;
opacity: 0.6;
transition: opacity 0.3s ease;
}
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
position: absolute;
top: 50%;
right: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
line-height: 0;
transform: translateY(-50%);
transition: all 0.2s ease;
}
.doc h1:hover .anchor,
.doc h2:hover .anchor,
.doc h3:hover .anchor,
.doc h4:hover .anchor,
.doc h5:hover .anchor,
.doc h6:hover .anchor,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:before {
opacity: 1;
visibility: visible;
}
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:after {
opacity: 0.6;
visibility: visible;
}
.boostlook .doc h1 .anchor:hover,
.boostlook .doc h2 .anchor:hover,
.boostlook .doc h3 .anchor:hover,
.boostlook .doc h4 .anchor:hover,
.boostlook .doc h5 .anchor:hover,
.boostlook .doc h6 .anchor:hover,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]:hover) a[href]:before {
border-color: var(--border-border-blue, #92cbe9);
}
.boostlook .doc h1 .anchor:active,
.boostlook .doc h2 .anchor:active,
.boostlook .doc h3 .anchor:active,
.boostlook .doc h4 .anchor:active,
.boostlook .doc h5 .anchor:active,
.boostlook .doc h6 .anchor:active,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:active:before {
border-color: var(--border-border-blue, #92cbe9);
background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}
.boostlook .doc h1 .anchor:hover::before,
.boostlook .doc h2 .anchor:hover::before,
.boostlook .doc h3 .anchor:hover::before,
.boostlook .doc h4 .anchor:hover::before,
.boostlook .doc h5 .anchor:hover::before,
.boostlook .doc h6 .anchor:hover::before {
opacity: 1;
}

152
src/css/06-global-links.css Normal file
View File

@@ -0,0 +1,152 @@
/* Paragraph Styling */
.boostlook p {
padding-top: initial !important;
padding-bottom: initial !important;
color: var(--text-main-text-body-primary, #2a2c30);
font-size: var(--typography-font-size-sm, 1rem);
line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
}
/* Components margins */
.boostlook .paragraph + .paragraph {
margin-top: var(--padding-padding-md, 1rem);
}
.boostlook:not(:has(.doc)) .section > p + p,
.boostlook:not(:has(.doc)) .chapter > p + p,
.boostlook div.blockquote blockquote p + p,
.boostlook#libraryReadMe > p:not(:first-child) + p,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > p + p,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > p + p,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > p + p {
margin-top: var(--padding-padding-3xs, 0.25rem);
}
.boostlook #content .admonitionblock + .tabs,
.boostlook .paragraph + .tabs {
margin-top: var(--spacing-size-2md, 1.3rem);
}
.boostlook #content .paragraph + .admonitionblock,
.boostlook #content .tabs + .paragraph,
.boostlook #content .colist + .paragraph,
.boostlook #content .admonitionblock + .admonitionblock,
.boostlook #content .olist + .admonitionblock,
.boostlook #content .olist + .paragraph,
.boostlook:not(:has(.doc)) div.orderedlist + p,
.boostlook:not(:has(.doc)) p + div.orderedlist,
.boostlook:not(:has(.doc)) .itemizedlist + p,
.boostlook:not(:has(.doc)) div.itemizedlist:has(+ a[id^="bind"]) + a + *,
.boostlook:not(:has(.doc)) div.table:has(+ .table-break) + .table-break + *,
.boostlook #content .paragraph + .olist,
.boostlook #content .ulist + .admonitionblock,
.boostlook #content .ulist + .paragraph,
.boostlook #content .colist + .admonitionblock,
.boostlook #content .admonitionblock + .paragraph,
.boostlook #content .paragraph + table.tableblock,
.boostlook.boostlook:not(:has(.doc)) p + table.table,
.boostlook.boostlook:not(:has(.doc)) p + .informaltable,
.boostlook #content table.tableblock + .paragraph,
.boostlook #content table.tableblock + .admonitionblock,
.boostlook:not(:has(.doc)) .informaltable + p,
.boostlook #content .imageblock + .paragraph,
.boostlook:not(:has(.doc)) .inlinemediaobject + p,
.boostlook:not(:has(.doc)) p:has(> .inlinemediaobject:only-child) + p,
.boostlook#libraryReadMe > p + table,
.boostlook#libraryReadMe > table + p,
.boostlook#libraryReadMe > ul + p,
.boostlook#libraryReadMe .literalblock + .paragraph,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) + p,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) + p,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) + p {
margin-top: var(--padding-padding-xs, 0.75rem);
}
.boostlook #content .dlist + .paragraph,
.boostlook #content .dlist + .listingblock,
.boostlook:not(:has(.doc)) div.blockquote + p,
.boostlook:not(:has(.doc)) .variablelist + p {
margin-top: var(--padding-padding-2xs, 0.5rem);
}
.boostlook h2 + .tabs,
.boostlook .doc h2 + .tabs,
.boostlook h3 + .tabs,
.boostlook .doc h3 + .tabs,
.boostlook h4 + .tabs,
.boostlook .doc h4 + .tabs,
.boostlook h5 + .tabs,
.boostlook .doc h5 + .tabs,
.boostlook h5 + .tabs,
.boostlook .doc h6 + .tabs {
margin-top: var(--padding-padding-sm, 0.75rem);
}
.boostlook #content .sectionbody .olist:first-child,
.boostlook:not(:has(.doc)) .section div.orderedlist:first-child {
margin-top: var(--padding-padding-3xs, 0.25rem);
}
.boostlook .olist .imageblock .content,
.boostlook .ulist .imageblock .content {
margin-bottom: var(--padding-padding-xs, 0.75rem);
}
/* Special paragraph cases */
.boostlook table p,
.boostlook ul p {
margin: 0;
}
/* Link Styling */
.boostlook a,
.boostlook .doc a {
color: var(--text-main-text-link-blue, #026a9f);
text-decoration: none;
transition: color 0.3s ease;
}
/* Link Hover States */
.boostlook a:hover,
.boostlook .doc a:hover {
color: var(--text-states-text-warning, #FF9442);
cursor: pointer;
}
/* Emphasis within code */
.boostlook code em,
.boostlook code i,
.boostlook pre em,
.boostlook pre i {
font-family: "Monaspace Xenon", monospace;
font-size: inherit;
font-style: italic;
}
.boostlook em {
font-family: inherit;
font-size: inherit;
font-style: italic;
}
/* Text Emphasis */
.boostlook b,
.boostlook strong {
font-variation-settings: "wght" 600, "wdth" 80;
text-shadow: none;
}
/* Comments within code (inline and blocks) */
.boostlook code span.c,
.boostlook code span.ch,
.boostlook code span.cm,
.boostlook code span.cp,
.boostlook code span.cpf,
.boostlook code span.c1,
.boostlook code span.cs,
.boostlook code span.comment {
font-family: "Monaspace Xenon", monospace;
font-style: italic;
}

592
src/css/07-global-code.css Normal file
View File

@@ -0,0 +1,592 @@
/* Code Block Styling */
.boostlook .doc .listingblock,
.boostlook .listingblock {
position: relative;
}
.boostlook .doc .listingblock code,
.boostlook .listingblock code {
display: initial;
}
.boostlook .hljs {
background: transparent;
}
.boostlook code {
font-family: var(--font-family-code, "Monaspace Neon"), monospace;
}
.boostlook table thead code {
background: inherit;
}
.boostlook pre code,
.boostlook pre code.hljs,
.boostlook .doc .content pre code,
.boostlook .doc pre.highlight code {
font-size: var(--typography-font-size-xs, 0.875rem);
font-feature-settings: "calt" 1, "liga" 0;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
color: var(--text-main-text-primary, #18191b);
padding: revert;
border: none;
}
.boostlook pre code .conum[data-value]::after,
.boostlook pre code.hljs .conum[data-value]::after,
.boostlook .doc .content pre code .conum[data-value]::after,
.boostlook .doc pre.highlight code .conum[data-value]::after {
content: "("attr(data-value)")";
}
.boostlook pre:not(:has(> code)),
.boostlook pre:not(:has(> code)):has(p, span) {
font-size: var(--typography-font-size-xs, 0.875rem);
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
.boostlook pre,
.boostlook pre.rouge,
.boostlook .doc .content pre,
.boostlook .doc pre.highlight,
.boostlook .doc .listingblock pre:not(.highlight),
.boostlook .doc .literalblock pre
.boostlook .literalblock pre,
.boostlook .listingblock > .content > pre,
.boostlook .listingblock > .content > pre:not(.highlight),
.boostlook .literalblock > .content > pre:not(.highlight),
.boostlook .exampleblock > .content,
.boostlook .sidebarblock {
padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
background: var(--atom-one-light-bg, #fafafa) !important;
border-radius: 0;
border: none;
box-shadow: none;
}
.boostlook .sidebarblock {
margin-top: 20px;
border: 1px solid var(--border-border-secondary, #d5d7d9);
}
/* Dark theme code block background */
html.dark .boostlook pre,
html.dark .boostlook pre.rouge,
html.dark .boostlook .doc .content pre,
html.dark .boostlook .doc pre.highlight,
html.dark .boostlook .doc .listingblock pre:not(.highlight),
html.dark .boostlook .doc .literalblock pre,
html.dark .boostlook#libraryReadMe > pre:not(:last-child),
html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)),
html.dark .boostlook .doc .literalblock pre,
html.dark .boostlook .literalblock pre,
html.dark .boostlook .literalblock > .content > pre:not(.highlight),
html.dark .boostlook .listingblock > .content > pre,
html.dark .boostlook .sidebarblock,
html.dark .boostlook .exampleblock > .content,
html.dark .boostlook .listingblock > .content > pre {
background: var(--atom-one-dark-bg, #282c34) !important;
}
.boostlook .doc pre {
padding: initial;
}
.boostlook .content:has(> pre),
.boostlook .content:has(> pre.highlight) {
border-radius: 0;
/*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
background: var(--surface-background-main-surface-secondary, #e4e7ea);
}
.boostlook pre.programlisting,
.boostlook pre.synopsis,
.boostlook pre.literallayout,
.boostlook#libraryReadMe > pre {
border: 1px solid var(--border-border-secondary, #d5d7d9);
}
/* Code Block Regular Title */
.boostlook .doc .listingblock .title,
.boostlook .listingblock .title {
color: var(--text-main-text-body-primary, #2a2c30);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 600, "wdth" 80;
line-height: var(--typography-line-height-md, 1.25rem);
letter-spacing: unset;
padding-bottom: var(--padding-padding-2xs, 0.5rem);
}
.boostlook .doc .listingblock .title a,
.boostlook .listingblock .title a {
font: inherit;
text-decoration: none;
}
/* Code Block Title With File Name.
* Applies only if codeblock has child with class .toolbox
* and it`s title doesn`t includes any other elems as children
*/
.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)),
.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) {
position: absolute;
top: 1px;
height: 2rem;
max-width: calc(100% - 5rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0;
padding-left: var(--spacing-size-sm);
display: flex;
align-items: center;
gap: var(--spacing-size-2xs, 0.5rem);
color: var(--text-main-text-body-tetriary, #62676b);
font-family: "Noto Sans";
font-size: var(--typography-font-size-2xs, 0.75rem);
font-style: normal;
line-height: var(--typography-line-height-sm, 1rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
z-index: 1;
display: none;
}
.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before,
.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before {
content: var(--icon-file);
line-height: 0;
}
/* Code Block Margins */
.boostlook .listingblock:has(> .content > pre),
.boostlook .listingblock:has(> .content > pre.highlight),
.boostlook:not(:has(.doc)) pre.programlisting,
.boostlook:not(:has(.doc)) pre.synopsis,
.boostlook#libraryReadMe > pre,
.boostlook#libraryReadMe .literalblock:has(pre),
.boostlook#libraryReadMe div.highlight:has(> pre) {
margin: 0;
border: none;
background-color: transparent;
padding:0;
}
/* Apply left margin only if code block not in definition block or in table */
.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)),
.boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)),
.boostlook:not(:has(.doc)) pre.programlisting:not(:is(dd pre, td pre)),
.boostlook:not(:has(.doc)) pre.synopsis:not(:is(dd pre, td pre)),
.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)),
.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)),
.boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)) {
/*margin-left: var(--spacing-size-xl);*/
/*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
background: var(--atom-one-light-bg, #fafafa);
margin-top: var(--padding-padding-xs, 0.75rem);
}
.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)) {
margin-left: var(--spacing-size-xl);
border: 1px solid var(--border-border-secondary, #d5d7d9);
}
.boostlook .olist.arabic > ol > li .listingblock:has(> .content > pre):not(:is(dd pre, td pre)),
.boostlook:not(:has(.doc)) .orderedlist > ol > li .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)) {
margin-left: 0;
}
.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)), .boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)) {
margin-left: var(--spacing-size-xl);
}
.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)):has(.title) {
border: none;
background: none;
}
.boostlook .listingblock:has(> .content > pre):not(:last-child),
.boostlook .listingblock:has(> .content > pre.highlight):not(:last-child),
.boostlook:not(:has(.doc)) pre.programlisting:not(:last-child),
.boostlook:not(:has(.doc)) pre.synopsis:not(:last-child),
.boostlook#libraryReadMe > pre:not(:last-child) {
margin-bottom: var(--padding-padding-xs, 0.75rem);
}
.boostlook .content:has(> pre):has(> .source-toolbox) {
position: relative;
display: flex;
flex-direction: column-reverse;
}
.boostlook .highlight pre,
.boostlook .content:has(> pre) pre.highlight,
.boostlook .literalblock > .content > pre:not(.highlight) {
border: 1px solid var(--border-border-secondary, #d5d7d9);
border-radius: 0;
}
.boostlook .content:has(> pre):has(> .source-toolbox) pre {
/*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
/*border-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook .content:has(> pre):has(> .source-toolbox) .source-toolbox {
position: static;
order: 0;
display: flex;
visibility: visible;
top: unset;
right: unset;
color: var(--text-main-text-body-tetriary, #62676b);
font-family: inherit;
z-index: 1;
padding: var(--article-article-compressing-from-12-8--, 0.5rem) var(--spacing-size-sm, 1rem);
/*min-height: 2rem;*/
height: 0;
max-height: 0;
min-height: 0;
padding: 0;
/*margin-top: -1px;*/
}
.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox {
min-height: 0;
height: 0;
padding: 0 !important;
margin-bottom: -1px;
}
.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox .copy-button {
top: 0.25rem;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang {
color: var(--text-main-text-body-quaternary, #949a9e);
text-align: right;
font-family: "Noto Sans";
font-size: var(--typography-font-size-2xs, 0.75rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
text-transform: uppercase;
margin-left: auto;
display: none;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang::after {
content: none;
}
/* Code Block Copy to Clipboard Icon */
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button {
position: absolute;
top: 2.25rem;
right: 0.25rem;
display: flex;
flex-direction: column;
align-items: center;
color: inherit;
outline: none;
font-size: inherit;
line-height: inherit;
width: 2rem;
height: 2rem;
padding: var(--spacing-size-3xs, 0.25rem);
border-radius: var(--spacing-size-2xs, 0.5rem);
border: 1px solid var(--border-border-primary, #e4e7ea);
background: var(--surface-background-main-surface-primary, #f5f6f8);
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover {
border: 1px solid var(--border-border-blue, #92cbe9);
}
.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button {
opacity: 1;
visibility: visible;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button img {
display: none;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button::before {
content: var(--icon-clipboard);
width: var(--icons-24, 1.5rem);
height: var(--icons-24, 1.5rem);
aspect-ratio: 1/1;
}
/* Code Block Copied Toast */
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast {
flex: none;
position: relative;
display: inline-flex;
justify-content: center;
padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-xs, 0.75rem);
flex-direction: column;
align-items: center;
margin-top: 1em;
background: var(--surface-background-main-surface-primary, #f5f6f8);
border-radius: var(--spacing-size-2xs, 0.5rem);
border: 1px solid var(--border-border-secondary, #d5d7d9);
color: var(--text-main-text-primary, #18191b);
cursor: auto;
opacity: 0;
transition: opacity 0.5s ease 0.5s;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast::after {
content: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2011.95L11.6569%206.2931L6%200.636243L0.343146%206.2931L6%2011.95Z%22%20fill%3D%22%23F5F6F8%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.343146%206.2931L6%200.636243L11.6569%206.2931L10.9497%207.0002L6%202.05046L1.05025%207.0002L0.343146%206.2931Z%22%20fill%3D%22%23E4E7EA%22%2F%3E%3C%2Fsvg%3E");
position: absolute;
top: -62%;
width: 1em;
height: 1em;
border: unset;
border-left-color: unset;
transform: unset;
transform-origin: unset;
color: var(--text-main-text-primary, #18191b);
text-align: center;
font-size: var(--typography-font-size-sm, 1rem);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
}
/* Code Styling */
.boostlook p code:not(:has(> code)),
.boostlook li code:not(:has(> code)),
.boostlook .doc p code:not(:has(> code)),
.boostlook .doc .colist > table code:not(:has(> code)) {
display: inline;
color: var(--text-code-neutral, #0d0e0f);
font-size: 0.96em;
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-md);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
.boostlook p:not(:is(table p)) code:not(:has(> code)),
.boostlook li code:not(:has(> code)),
.boostlook .doc p:not(:is(table p)) code:not(:has(> code)),
.boostlook .doc .colist > table code:not(:has(> code)) {
border-radius: unset;
padding: unset;
/* border: 1px solid var(--border-border-secondary, #d5d7d9); */
background: transparent !important;
}
/* Code Links */
.boostlook p:not(:is(table p)) a code,
.boostlook li:not(:is(table li)) a code,
.boostlook .doc p:not(:is(table p)) a code,
.boostlook .doc table a code,
.boostlook .doc .colist > table a code,
.boostlook code:has(> a:first-child:last-child),
.boostlook code:has(> a:only-child),
.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child),
.boostlook p:not(:is(table p)) code:has(> a:only-child),
.boostlook li:not(:is(table li)) code:has(> a:first-child:last-child),
.boostlook li:not(:is(table li)) code:has(> a:only-child),
.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child),
.boostlook .doc p:not(:is(table p)) code:has(> a:only-child),
.boostlook .doc .colist > table code:has(> a:first-child:last-child),
.boostlook .doc .colist > table code:has(> a:only-child) {
/* transition: all 0.2s ease; */
border-radius: unset;
border: none;
background: transparent !important;
color: inherit;
}
/* Applies to links in code in case where only one link tag inside code */
/* .boostlook code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook p code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook li code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook li code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook .doc p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook .doc p code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook .doc .colist > table code:has(> a:first-child:last-child) a,
.boostlook .doc .colist > table code:has(> a:only-child) a {
text-decoration: none;
font: inherit;
color: inherit;
} */
/* .boostlook .doc table.tableblock code a,
.boostlook:not(:has(.doc)) table.table code a { */
/* text-decoration-color: transparent; */
/* color: var(--text-code-blue, #329cd2); */
/* line-height: var(--typography-line-height-lg, 1.5rem); */
/* } */
/* Code Link Hover States */
/* .boostlook p:not(:is(table p)) a:hover code,
.boostlook li a:hover code,
.boostlook .doc p:not(:is(table p)) a:hover code,
.boostlook .doc table a:hover code,
.boostlook .doc .colist > table a:hover code,
.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
.boostlook p:not(:is(table p)) code:has(> a:only-child):hover,
.boostlook li code:has(> a:first-child:last-child):hover,
.boostlook li code:has(> a:only-child):hover,
.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
.boostlook .doc p:not(:is(table p)) code:has(> a:only-child):hover,
.boostlook .doc .colist > table code:has(> a:first-child:last-child):hover,
.boostlook .doc .colist > table code:has(> a:only-child):hover {
border-color: var(--border-border-blue-hover, #329cd2);
background: var(--surface-background-main-surface-blue-tetriary, #c2e2f4) !important;
} */
.boostlook a:hover code {
color: inherit;
}
.boostlook .doc table.tableblock code:hover a,
.boostlook:not(:has(.doc)) table.table code:hover a,
.boostlook .doc table.tableblock code a:focus-visible,
.boostlook:not(:has(.doc)) table.table code a:focus-visible {
text-decoration-color: var(--border-border-blue, #92cbe9);
}
/* Syntax Highlighting */
.boostlook .hljs-keyword,
.boostlook .hljs-selector-tag,
.boostlook .hljs-subst,
.boostlook pre span.k,
.boostlook pre span.kc,
.boostlook pre span.kd,
.boostlook pre span.kn,
.boostlook pre span.kp,
.boostlook pre span.kr,
.boostlook pre span.kt,
.boostlook pre span.keyword,
.boostlook pre span.property {
color: var(--text-code-purple, #9f26e5);
}
.boostlook pre span.n,
.boostlook pre span.na,
.boostlook pre span.nb,
.boostlook pre span.bp,
.boostlook pre span.nc,
.boostlook pre span.no,
.boostlook pre span.nd,
.boostlook pre span.ni,
.boostlook pre span.ne,
.boostlook pre span.nf,
.boostlook pre span.py,
.boostlook pre span.nl,
.boostlook pre span.nn,
.boostlook pre span.nx,
.boostlook pre span.nt,
.boostlook pre span.nv,
.boostlook pre span.vc,
.boostlook pre span.vg,
.boostlook pre span.vi,
.boostlook pre span.identifier {
color: var(--text-main-text-body-primary, #2a2c30);
}
.boostlook pre span.c,
.boostlook pre span.ch,
.boostlook pre span.cm,
.boostlook pre span.cp,
.boostlook pre span.cpf,
.boostlook pre span.c1,
.boostlook pre span.cs,
.boostlook pre span.sd,
.boostlook pre span.sh,
.boostlook pre span.comment,
.boostlook .hljs-comment,
.boostlook .cpp-comment,
.boostlook .hljs-quote,
.boostlook .hljs-addition,
.boostlook .hljs-built_in,
.boostlook .hljs-bullet,
.boostlook .hljs-code {
color: var(--atom-one-light-comment, #a0a1a7);
font-family: "Monaspace Xenon", monospace;
font-style: italic;
}
/* Dark theme comment color */
html.dark .boostlook pre span.c,
html.dark .boostlook pre span.ch,
html.dark .boostlook pre span.cm,
html.dark .boostlook pre span.cp,
html.dark .boostlook pre span.cpf,
html.dark .boostlook pre span.c1,
html.dark .boostlook pre span.cs,
html.dark .boostlook pre span.sd,
html.dark .boostlook pre span.sh,
html.dark .boostlook pre span.comment,
html.dark .boostlook .hljs-comment,
html.dark .boostlook .cpp-comment,
html.dark .boostlook .hljs-quote,
html.dark .boostlook .hljs-addition,
html.dark .boostlook .hljs-built_in,
html.dark .boostlook .hljs-bullet,
html.dark .boostlook .hljs-code {
color: var(--atom-one-dark-comment, #5c6370);
font-family: "Monaspace Xenon", monospace;
font-style: italic;
}
.boostlook pre span.s,
.boostlook pre span.sa,
.boostlook pre span.sb,
.boostlook pre span.dl,
.boostlook pre span.s2,
.boostlook pre span.se,
.boostlook pre span.si,
.boostlook pre span.sx,
.boostlook pre span.sr,
.boostlook pre span.s1,
.boostlook pre span.ss,
.boostlook pre span.string,
.boostlook .hljs-doctag,
.boostlook .hljs-string,
.boostlook .hljs-deletion,
.boostlook .hljs-number,
.boostlook .hljs-quote,
.boostlook .hljs-selector-class,
.boostlook .hljs-selector-id,
.boostlook .hljs-template-tag,
.boostlook .hljs-type {
color: var(--text-code-red, #f9677f);
}
.boostlook .hljs-section,
.boostlook .hljs-selector-id,
.boostlook .hljs-title {
color: var(--text-code-blue, #329cd2);
}
.boostlook .hljs-attribute,
.boostlook .hljs-name,
.boostlook .hljs-tag {
color: var(--text-main-text-primary, #18191b);
}
/* Syntax Defaults */
.boostlook .hljs-attribute,
.boostlook .hljs-doctag,
.boostlook .hljs-keyword,
.boostlook .hljs-meta .hljs-keyword,
.boostlook .hljs-name,
.boostlook .hljs-selector-tag,
.boostlook .hljs-section,
.boostlook .hljs-title {
font-weight: inherit;
}
.boostlook .hljs-meta {
color: inherit;
}

878
src/css/08-global-components.css Normal file
View File

@@ -0,0 +1,878 @@
/* Table Headings */
.boostlook h6:has(+ table) {
margin-left: 1em;
}
/* Quote Blocks */
.boostlook .quoteblock,
.boostlook .doc .quoteblock,
.boostlook .verseblock,
.boostlook .doc .verseblock,
.boostlook div.blockquote {
padding: var(--padding-padding-md, 1.125rem) var(--padding-padding-lg, 1.5rem);
border-radius: var(--spacing-size-size-0, 0rem);
border-left: 2px solid var(--border-border-active, #18191b);
background: var(--surface-background-main-surface-primary, #f5f6f8);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-sm, 1rem);
line-height: var(--typography-line-height-lg, 1.5rem);
}
/* Add intendation */
.boostlook .sectionbody .quoteblock,
.boostlook .sectionbody .doc .quoteblock,
.boostlook .sectionbody .verseblock,
.boostlook .sectionbody .doc .verseblock,
.boostlook .sectionbody div.blockquote,
.boostlook .section .quoteblock,
.boostlook .section .doc .quoteblock,
.boostlook .section .verseblock,
.boostlook .section .doc .verseblock,
.boostlook .section div.blockquote {
margin-left: var(--spacing-size-xl, 2rem);
}
.boostlook .quoteblock:not(:first-child),
.boostlook .doc .quoteblock:not(:first-child),
.boostlook .verseblock:not(:first-child),
.boostlook .doc .verseblock:not(:first-child),
.boostlook div.blockquote:not(:first-child) {
margin-top: var(--padding-padding-2xs, 0.5rem);
}
.boostlook .quoteblock blockquote,
.boostlook .doc .quoteblock blockquote,
.boostlook .verseblock blockquote,
.boostlook .doc .verseblock blockquote,
.boostlook div.blockquote blockquote {
margin: 0;
font: inherit;
color: inherit;
}
.boostlook .quoteblock blockquote .paragraph,
.boostlook .doc .quoteblock blockquote .paragraph,
.boostlook .verseblock blockquote .paragraph,
.boostlook .doc .verseblock blockquote .paragraph,
.boostlook div.blockquote blockquote p {
font: inherit;
}
.boostlook .quoteblock blockquote p,
.boostlook .doc .quoteblock blockquote p,
.boostlook .verseblock blockquote p,
.boostlook .doc .verseblock blockquote p {
margin: 0;
font: inherit;
color: inherit;
}
.boostlook .quoteblock blockquote:before {
content: none;
}
/* Pagination */
.boostlook nav.pagination {
border-top: revert;
line-height: initial;
margin: revert;
display: flex;
padding: var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem);
align-items: stretch;
gap: var(--spacing-size-2xs, 0.5rem);
}
.boostlook nav.pagination > span {
display: flex;
flex-direction: column;
flex: 1 0 0;
backdrop-filter: blur(8px);
padding-right: revert;
padding-left: revert;
margin-left: revert;
}
.boostlook nav.pagination > span.next {
text-align: right;
}
.boostlook nav.pagination span::before {
content: none !important;
}
.boostlook nav.pagination > span a {
/* Container padding + two paddings of arrow icon container + arrow icon width + gap between arrow and content */
--_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-3xs) * 2) + var(--icons-24) + var(--padding-padding-md));
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
border-radius: var(--padding-padding-xs, 0.75rem);
border: 1px solid var(--border-border-primary, #e4e7ea);
padding: var(--padding-padding-xs, 0.75rem);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-sm, 1rem);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
letter-spacing: var(--spacing-size-size-0, 0rem);
text-decoration: none;
transition: background-color 0.3s ease;
}
.boostlook nav.pagination > span:hover a {
background: var(--surface-background-main-surface-primary, #f5f6f8);
color: inherit;
}
.boostlook nav.pagination > span.prev a {
padding-left: var(--_arrow-based-padding);
}
.boostlook nav.pagination > span.next a {
padding-right: var(--_arrow-based-padding);
}
@media screen and (min-width: 990px) {
.boostlook nav.pagination > span a {
--_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-xs) * 2) + var(--icons-24) + var(--padding-padding-md));
}
}
.boostlook nav.pagination > span a::before {
width: auto;
position: static;
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-2xs, 0.75rem);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
transform: revert;
}
.boostlook nav.pagination > span.prev a::before {
content: "Previous";
}
.boostlook nav.pagination > span.next a::before {
content: "Next";
}
.boostlook nav.pagination > span a::after {
--_arrow-size: calc((var(--spacing-size-3xs, 0.25rem) * 2) + var(--icons-24));
position: absolute;
top: 50%;
display: flex;
width: var(--_arrow-size);
height: var(--_arrow-size);
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: var(--spacing-size-2xs, 0.5rem);
background: var(--surface-background-main-base-primary, #fff);
transition: all 0.2s ease;
transform: translateY(-50%);
}
@media screen and (min-width: 990px) {
.boostlook nav.pagination > span a::after {
--_arrow-size: calc((var(--spacing-size-xs, 0.75rem) * 2) + var(--icons-24));
}
}
.boostlook nav.pagination > span.prev a::after {
content: var(--icon-arrow-left);
left: var(--padding-padding-2xs, 0.5rem);
}
.boostlook nav.pagination > span.next a::after {
content: var(--icon-arrow-right);
right: var(--padding-padding-2xs, 0.5rem);
}
.boostlook nav.pagination > span:hover a::after {
border-color: var(--border-border-blue, #92cbe9);
background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}
/* Admonitions */
.boostlook #content .admonitionblock,
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) div.blurb,
.boostlook:not(:has(.doc)) p.blurb {
padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
border-radius: var(--spacing-size-size-0, 0rem);
border: 1px solid transparent;
margin: revert;
margin-left: var(--spacing-size-xl);
background: transparent;
}
.boostlook #content li .admonitionblock,
.boostlook:not(:has(.doc)) li div.note,
.boostlook:not(:has(.doc)) li div.tip,
.boostlook:not(:has(.doc)) li div.important,
.boostlook:not(:has(.doc)) li div.caution,
.boostlook:not(:has(.doc)) li div.warning,
.boostlook:not(:has(.doc)) li div.blurb,
.boostlook:not(:has(.doc)) li p.blurb {
margin-left: 0;
}
/* Readme Template Admonitionblock */
.boostlook:not(:has(.doc)) .notices {
background-image: none !important;
}
.boostlook #content .admonitionblock > table,
.boostlook:not(:has(.doc)) div.note > table,
.boostlook:not(:has(.doc)) div.tip > table,
.boostlook:not(:has(.doc)) div.important > table,
.boostlook:not(:has(.doc)) div.caution > table,
.boostlook:not(:has(.doc)) div.warning > table,
.boostlook:not(:has(.doc)) div.blurb > table,
.boostlook:not(:has(.doc)) p.blurb > table {
all: revert;
table-layout: fixed;
position: relative;
width: 100%;
}
.boostlook #content .admonitionblock > table tr,
.boostlook:not(:has(.doc)) div.note tbody,
.boostlook:not(:has(.doc)) div.tip tbody,
.boostlook:not(:has(.doc)) div.important tbody,
.boostlook:not(:has(.doc)) div.caution tbody,
.boostlook:not(:has(.doc)) div.warning tbody,
.boostlook:not(:has(.doc)) div.blurb tbody,
.boostlook:not(:has(.doc)) p.blurb tbody,
.boostlook:not(:has(.doc)) .notices {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-size-2xs, 0.5rem);
}
.boostlook #content .admonitionblock > table tr td {
padding: 0;
border: unset;
}
.boostlook #content .admonitionblock > table tr td.icon,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices .heading {
display: flex;
align-items: center;
gap: var(--spacing-size-2xs, 0.5rem);
/* Removes legacy icon */
background: transparent;
}
.boostlook:not(:has(.doc)) .notices .heading {
margin: 0;
}
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th > *,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th > *,
.boostlook #content .admonitionblock > table tr td.icon > *,
.boostlook:not(:has(.doc)) .notices .heading {
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-sm, 1rem);
font-variation-settings: "wght" 600, "wdth" 62.5;
line-height: var(--typography-line-height-lg, 1.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
/* text-transform: uppercase; */
}
.boostlook #content .admonitionblock > table tr td.icon > * {
padding: 0;
font-family: var(--font-family-body, "Noto Sans");
}
.boostlook #content .admonitionblock > table tr td.icon i.fa::after {
content: attr(title);
}
.boostlook #content .admonitionblock > table tr td.content,
/* Leagcy Doc */
.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p,
/* Antora Template Correction*/
.boostlook #content .admonitionblock > table tr td.content p,
.boostlook:not(:has(.doc)) .notices .message p {
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 400, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
.boostlook:not(:has(.doc)) .notices .message {
margin: 0;
}
.boostlook #content .admonitionblock > table code,
.boostlook:not(:has(.doc)) div.note > table code,
.boostlook:not(:has(.doc)) div.tip > table code,
.boostlook:not(:has(.doc)) div.important > table code,
.boostlook:not(:has(.doc)) div.caution > table code,
.boostlook:not(:has(.doc)) div.warning > table code,
.boostlook:not(:has(.doc)) div.blurb > table code,
.boostlook:not(:has(.doc)) p.blurb > table code {
margin: revert;
padding: 0;
}
/* Note */
.boostlook #content .admonitionblock.note,
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) .notices.note {
border-color: var(--border-border-blue-primary, #c2e2f4); /* var(--border-border-blue-primary, #c2e2f4) */
background-color: var(--surface-background-main-surface-blue-primary, #f6fafd);
}
.boostlook #content .admonitionblock.note > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.note .heading {
color: var(--text-main-text-primary, #18191b);
}
/* Tip */
.boostlook #content .admonitionblock.tip,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) .notices.tip {
border-color: var(--border-border-positive, #f8fefb);
background-color: var(--surface-background-states-surface-positive-primary, #f6fafd);
}
/* .boostlook #content .admonitionblock.tip > table tr td.icon,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.tip .heading {
background: var(--border-border-positive, #bdeed6);
} */
.boostlook #content .admonitionblock.tip > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.tip .heading {
color: var(--text-main-text-primary, #18191b);
}
/* Important */
.boostlook #content .admonitionblock.important,
.boostlook #content .admonitionblock.caution,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) .notices.important {
border-color: var(--border-border-brand-orange, #ffd897);
background-color: var(--surface-background-states-surface-warning-primary, #fefcf9);
}
/* .boostlook #content .admonitionblock.important > table tr td.icon,
.boostlook #content .admonitionblock.caution > table tr td.icon,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.important {
background: var(--surface-background-states-surface-warning-tetriary, #ffd4b3);
} */
.boostlook #content .admonitionblock.important > table tr td.icon > *,
.boostlook #content .admonitionblock.caution > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.important {
color: var(--text-main-text-primary, #18191b);
}
/* Warning */
.boostlook #content .admonitionblock.warning,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) .notices.warning {
border-color: var(--border-border-negative, #ffcad2);
background-color: var(--surface-background-states-surface-negative-primary, #fdf1f3);
}
/* .boostlook #content .admonitionblock.warning > table tr td.icon,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.warning .heading {
background: var(--surface-background-states-surface-negative-tetriary, #ffcad2);
} */
.boostlook #content .admonitionblock.warning > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.warning .heading {
color: var(--text-main-text-primary, #18191b);
}
/* Dlist */
/* Apply top margin only for root list */
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist),
.boostlook .dlist dl dt:not(:first-child):not(.dlist .dlist),
.boostlook:not(:has(.doc)) .variablelist:not(:first-child):not(.variablelist .variablelist),
.boostlook:not(:has(.doc)) .variablelist dl dt:not(:first-child):not(.variablelist .variablelist) {
margin-top: var(--padding-padding-2xs, 0.5rem);
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
background-color: var(--surface-background-main-surface-blue-primary, #ebf4f9);
border: 1px solid transparent; /* var(--border-border-blue-primary, #c2e2f4) */
padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
margin-left: var(--spacing-size-xl);
}
.boostlook #content .colist.arabic > table > tbody > tr td .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
margin-left: 0;
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) .hdlist1 {
font-size: var(--typography-font-size-sm, 1rem);
font-variation-settings: "wght" 600, "wdth" 62.5;
line-height: var(--typography-line-height-lg, 1.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
font-weight: 600;
color: #000 !important;
/*margin-bottom: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd a:hover {
color: var(--text-states-text-warning, #FF9442);
cursor: pointer;
}
.boostlook #content .olist.arabic > ol > li table.tableblock:not(:first-child),
.boostlook #content .olist.arabic > ol > li .dlist:not(:first-child):not(.dlist .dlist) {
margin-left: 0;
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd a {
color: var(--text-main-text-link-blue, #026a9f);
text-decoration: none;
transition: color 0.3s ease;
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd {
margin: 0;
padding: 0;
border: none;
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 400, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
.boostlook .dlist dl,
.boostlook:not(:has(.doc)) .variablelist dl {
display: flex;
flex-direction: column;
gap: var(--spacing-size-2xs, 0.5rem);
}
/* Where is this used */
.boostlook .dlist dl dt,
.boostlook:not(:has(.doc)) .variablelist dl dt {
display: block;
width: fit-content;
padding: initial;
border-radius: initial;
border: initial;
/* border-bottom-left-radius: unset; */
background: initial;
color: var(--text-code-neutral, #0d0e0f);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
margin-bottom: 0;
}
/* styles for nested list */
.boostlook .dlist:is(.dlist .dlist) dl dt,
.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dt {
font-size: var(--typography-font-size-sm, 1rem);
}
.boostlook .dlist dl dt code,
.boostlook:not(:has(.doc)) .variablelist dl dt code {
border: none;
padding: 0;
background: transparent !important;
}
.boostlook .dlist dl dt .term,
.boostlook:not(:has(.doc)) .variablelist dl dt .term {
font: inherit;
font-weight: inherit;
}
.boostlook .dlist dl dt code,
.boostlook:not(:has(.doc)) .variablelist dl dt code {
font-variation-settings: "wght" 600, "wdth" 80;
font-family: var(--font-family-code, 'Monaspace Neon');
}
.boostlook .dlist dl dd,
.boostlook:not(:has(.doc)) .variablelist dl dd {
margin: unset;
margin-top: -1px;
padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-sm, 1rem);
border-radius: var(--spacing-size-size-0, 0rem);
border: 1px solid var(--border-border-primary, #e4e7ea);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-xs, 0.875rem);
line-height: var(--typography-line-height-lg, 1.5rem);
}
/* styles for nested list */
.boostlook .dlist:is(.dlist .dlist) dl dd,
.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dd {
border: none;
padding: initial;
}
/* styles for block if it has nested list */
.boostlook .dlist dl dd:has(>.dlist),
.boostlook:not(:has(.doc)) .variablelist dl dd:has(>.variablelist) {
padding: var(--padding-padding-sm, 1rem);
}
/* apply margin only for top level list */
.boostlook .dlist dl > dd:not(:is(dl dl dd)),
.boostlook:not(:has(.doc)) .variablelist dl > dd:not(:is(dl dl dd)) {
margin-left: var(--spacing-size-xl);
}
.boostlook .dlist dl dd p,
.boostlook:not(:has(.doc)) .variablelist dl dd p {
font: inherit;
margin: 0;
}
.boostlook .dlist dl dd em,
.boostlook:not(:has(.doc)) .variablelist dl dd em {
font: inherit;
font-variation-settings: "wght" 500, "wdth" 80;
}
/* Edit Page Link */
.boostlook .edit-this-page {
color: var(--text-main-text-body-quaternary, #949a9e);
text-align: right;
font-size: var(--typography-font-size-2xs, 0.75rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
padding: 0 var(--padding-padding-2xs, 0.5rem);
}
.boostlook .edit-this-page a {
all: inherit;
}
/* Layout Structure */
.boostlook #header,
.boostlook #content,
.boostlook #footer {
padding-left: var(--main-margin);
padding-right: var(--main-margin);
}
.boostlook #header {
padding-top: 1.25rem;
}
.boostlook #footer {
padding-top: var(--padding-padding-sm);
padding-bottom: var(--padding-padding-sm);
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-xs);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
/* Unordered Lists */
/* Reset Legacy and Common */
.boostlook .doc .dlist .dlist,
.boostlook .doc .dlist .olist,
.boostlook .doc .dlist .ulist,
.boostlook .doc .olist .dlist,
.boostlook .doc .olist .olist,
.boostlook .doc .olist .ulist,
.boostlook .doc .olist li + li,
.boostlook .doc .ulist .dlist,
.boostlook .doc .ulist .olist,
.boostlook .doc .ulist .ulist,
.boostlook .doc .ulist:not(.tablist) li + li,
.boostlook:not(:has(.doc)) div.orderedlist li + li {
margin-top: var(--padding-padding-3xs, 0.25rem);
}
.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
margin-top: var(--padding-padding-2xs, 0.5rem);
}
.boostlook .doc .dlist .dlist,
.boostlook .doc .dlist .olist,
.boostlook .doc .dlist .ulist,
.boostlook .doc .olist .dlist,
.boostlook .doc .olist .olist,
.boostlook .doc .olist .ulist,
.boostlook .doc .ulist .dlist,
.boostlook .doc .ulist .olist,
.boostlook .doc .ulist .ulist,
.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
margin-bottom: var(--padding-padding-2xs, 0.5rem);
}
/* Default List */
.boostlook div.itemizedlist:has(> ul.itemizedlist):not(:first-child),
.boostlook :not(div.itemizedlist) > ul.itemizedlist,
.boostlook .ulist:not(:first-child):not(.tablist),
.boostlook .ulist:not(:first-child).disc,
.boostlook#libraryReadMe ul:not(:first-child),
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
margin-top: var(--padding-padding-xs, 0.75rem);
}
.boostlook ul.itemizedlist,
.boostlook .ulist:not(.tablist) > ul,
.boostlook .ulist.disc > ul,
.boostlook#libraryReadMe ul,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
list-style: none;
padding: 0;
}
.boostlook ul.itemizedlist {
list-style: none !important;
}
.boostlook ul.itemizedlist > li,
.boostlook .ulist:not(.tablist) > ul > li,
.boostlook .ulist.disc > ul > li,
.boostlook#libraryReadMe ul > li,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class])> li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class])> li {
position: relative;
padding-left: 2rem;
}
.boostlook ul.itemizedlist > li,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ul:not([class]) li,
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ol:not([class]) li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content ul:not([class]) li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content ol:not([class]) li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ul:not([class]) li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ol:not([class]) li {
font: inherit;
}
.boostlook ul.itemizedlist > li + li,
.boostlook .ulist:not(.tablist) > ul > li + li,
.boostlook .ulist.disc > ul > li + li,
.boostlook#libraryReadMe ul > li + li,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li + li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li + li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li + li {
margin-top: var(--padding-padding-3xs, 0.25rem);
}
.boostlook ul.itemizedlist > li::before,
.boostlook .ulist:not(.tablist) > ul > li::before,
.boostlook .ulist.disc > ul > li::before,
.boostlook#libraryReadMe ul > li::before,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li::before,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li::before,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li::before {
content: "\2022";
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main-text-primary, #18191b);
}
/* Ordered Lists */
.boostlook .olist.arabic > ol,
.boostlook .olist.loweralpha > ol,
.boostlook:not(:has(.doc)) .orderedlist > ol {
list-style: none;
counter-reset: list-counter;
padding-left: 0;
padding-bottom: 1rem;
}
/* Arabic Ordered List */
.boostlook .olist.arabic > ol > li,
.boostlook:not(:has(.doc)) .orderedlist > ol > li {
position: relative;
padding-left: 2rem;
counter-increment: list-counter;
}
.boostlook .olist.arabic > ol > li::before,
.boostlook:not(:has(.doc)) .orderedlist > ol > li::before {
content: counter(list-counter)".";
position: absolute;
left: 0;
top: -4px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-sm, 1rem);
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
}
.boostlook .olist.arabic > ol > li::after,
.boostlook:not(:has(.doc)) .orderedlist > ol > li::after {
content: "";
position: absolute;
left: 1px;
top: 0px;
width: 30px;
height: 24px;
/*border: 1px solid var(--border-border-tetriary);*/
/* Mask to make square brackets for marker to make it look like [ 01 ] */
/*clip-path: polygon(0 0, 3px 0, 3px 3px, 27px 3px, 27px 0, 30px 0, 30px 24px, 27px 24px, 27px 21px, 3px 21px, 3px 24px, 0 24px);*/
}
/* LowerAlfa Ordered List */
.boostlook .olist.loweralpha > ol > li {
position: relative;
padding-left: 2rem;
counter-increment: list-counter;
}
.boostlook .olist.loweralpha > ol > li::before {
content: counter(list-counter, lower-alpha) ". ";
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--Typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
/* Conum */
.boostlook .doc .conum[data-value] {
position: relative;
border: none;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Noto Sans";
font-style: normal;
font-variation-settings: "wght" 350, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem);
font-size: var(--typography-font-size-sm, 1rem);
text-align: center;
width: 32px;
height: 32px;
letter-spacing: var(--spacing-size-size-0, 0rem);
text-indent: unset;
color: var(--text-main-text-primary, #18191b);
text-align: center;
/*background: var(--surface-background-main-surface-secondary, #e4e7ea);*/
}
.boostlook .doc code .conum[data-value] {
background: transparent;
width: auto;
height: auto;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: var(--text-main-text-primary, #18191b);
}
.boostlook .doc .conum[data-value]::after {
content: attr(data-value)".";
font: inherit;
}
.boostlook .doc .conum[data-value] + b {
display: none;
}
/* Collist */
.boostlook .colist.arabic {
margin: revert;
}
.boostlook .colist.arabic > table {
width: 100%;
border-collapse: collapse;
color: var(--text-main-text-body-primary);
}
.boostlook .colist.arabic > table > tbody > tr td,
.boostlook .colist.arabic > table > tr td {
/* Reset Legacy */
padding: revert;
padding-top: var(--padding-padding-3xs, 0.25rem);
padding-bottom: 0;
font-size: var(--typography-font-size-sm, 1rem);
}
.boostlook .colist.arabic > table > tbody > tr > :first-child,
.boostlook .colist.arabic > table > tr > :first-child {
padding-left: 0;
padding-right: 0;
vertical-align: top;
/* to make first column fit its content */
width: 1%;
white-space: nowrap;
}
.boostlook .colist.arabic > table > tbody > tr > :first-child:has(.conum),
.boostlook .colist.arabic > table > tr > :first-child:has(.conum) {
padding-top: 0;
}

272
src/css/09-global-tables-images.css Normal file
View File

@@ -0,0 +1,272 @@
/* Tables */
/* Reset Antora Table Styles */
.boostlook #content table.tableblock tr,
.boostlook #content table.tableblock td,
.boostlook #content table.tableblock th,
.boostlook #content table.tableblock thead,
.boostlook #content table.tableblock tbody,
.boostlook #content table.tableblock tfoot,
.boostlook #content table.tableblock caption,
.boostlook #content table.tableblock colgroup,
.boostlook #content table.tableblock col,
.boostlook #content table.tableblock,
.boostlook:not(:has(.doc)) table.table tr,
.boostlook:not(:has(.doc)) table.table td,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table thead,
.boostlook:not(:has(.doc)) table.table tbody,
.boostlook:not(:has(.doc)) table.table tfoot,
.boostlook:not(:has(.doc)) table.table caption,
.boostlook:not(:has(.doc)) table.table colgroup,
.boostlook:not(:has(.doc)) table.table col,
.boostlook:not(:has(.doc)) table.table,
.boostlook#libraryReadMe > table,
.boostlook#libraryReadMe > table tr,
.boostlook#libraryReadMe > table td,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table thead,
.boostlook#libraryReadMe > table tbody,
.boostlook#libraryReadMe > table tfoot,
.boostlook#libraryReadMe > table caption,
.boostlook#libraryReadMe > table colgroup,
.boostlook#libraryReadMe > table col {
all: unset;
display: revert;
}
/* Add intendation */
.boostlook #content .sectionbody > table.tableblock,
.boostlook #content .section > table.tableblock,
.boostlook .sectionbody > div.informaltable:not(:is(.informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))))),
.boostlook .section > div.informaltable:not(:is(.informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))))),
.boostlook:not(:has(.doc)) .sectionbody > div.table .table-contents,
.boostlook:not(:has(.doc)) .section > div.table .table-contents,
.boostlook#libraryReadMe > table {
margin-left: var(--spacing-size-xl, 2rem);
}
.boostlook #content table.tableblock:not(:first-child),
.boostlook:not(:has(.doc)) .table:not(:first-child),
.boostlook#libraryReadMe > table:not(:first-child) {
margin-top: var(--padding-padding-xs, 0.75rem);
}
.boostlook #content table.tableblock.stretch,
.boostlook:not(:has(.doc)) table.table,
.boostlook#libraryReadMe > table.stretch {
min-width: 100%;
margin-left: var(--spacing-size-xl, 2rem);
}
.boostlook #content table.tableblock caption,
.boostlook:not(:has(.doc)) div.table .title {
color: var(--text-main-text-body-primary, #2a2c30);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 600, "wdth" 80;
line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
padding: 0;
padding-bottom: var(--padding-padding-2xs, 0.5rem);
}
.boostlook #content table.tableblock caption > *,
.boostlook:not(:has(.doc)) div.table .title > * {
font: inherit;
font-variation-settings: "wght" 500, "wdth" 80;
text-decoration: none;
}
.boostlook:not(:has(.doc)) div.table .title {
padding-bottom: var(--padding-padding-2xs, 0.5rem) !important;
}
.boostlook #content table.tableblock th,
.boostlook #content table.tableblock td,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table td,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table td {
padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
text-align: left;
border-top: 1px solid var(--border-border-primary, #e4e7ea);
border-left: 1px solid var(--border-border-primary, #e4e7ea);
}
.boostlook #content table.tableblock th:last-child,
.boostlook #content table.tableblock td:last-child,
.boostlook:not(:has(.doc)) table.table th:last-child,
.boostlook:not(:has(.doc)) table.table td:last-child,
.boostlook#libraryReadMe > table th:last-child,
.boostlook#libraryReadMe > table td:last-child {
border-right: 1px solid var(--border-border-primary, #e4e7ea);
}
.boostlook #content table.tableblock tr:last-child td,
.boostlook:not(:has(.doc)) table.table tr:last-child td,
.boostlook#libraryReadMe > table tr:last-child td {
border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
}
.boostlook #content table.tableblock:has(thead) th:first-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:first-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:first-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:first-child,
.boostlook#libraryReadMe > table:has(thead) th:first-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:first-child {
/*border-top-left-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock:has(thead) th:last-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:last-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:last-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:last-child,
.boostlook#libraryReadMe > table:has(thead) th:last-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:last-child {
/*border-top-right-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock tr:last-child td:first-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child,
.boostlook#libraryReadMe > table tr:last-child td:first-child {
/*border-bottom-left-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock tr:last-child td:last-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child,
.boostlook#libraryReadMe > table tr:last-child td:last-child {
/*border-bottom-right-radius: var(--spacing-size-2xs, 0.5rem);*/
}
.boostlook #content table.tableblock th,
.boostlook #content table.tableblock th strong,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table th strong,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table th strong {
background: var(--surface-background-main-surface-primary, #f5f6f8);
color: var(--text-main-text-primary, #000000);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
}
.boostlook #content table.tableblock td,
.boostlook:not(:has(.doc)) table.table td,
.boostlook#libraryReadMe > table td {
color: var(--text-main-text-body-primary, #2a2c30);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
.boostlook#libraryReadMe > table td {
vertical-align: middle;
}
.boostlook #content table.tableblock td.valign-top,
.boostlook:not(:has(.doc)) table.table td.valign-top,
.boostlook#libraryReadMe > table td.valign-top {
vertical-align: top;
}
.boostlook #content table.tableblock td.valign-bottom,
.boostlook:not(:has(.doc)) table.table td.valign-bottom,
.boostlook#libraryReadMe > table td.valign-bottom {
vertical-align: bottom;
}
.boostlook #content table.tableblock td.valign-center,
.boostlook:not(:has(.doc)) table.table td.valign-center,
.boostlook#libraryReadMe > table td.valign-center {
vertical-align: middle;
}
.boostlook #content table.tableblock td.halign-left,
.boostlook:not(:has(.doc)) table.table td.halign-left,
.boostlook#libraryReadMe > table td.halign-left {
text-align: left;
}
.boostlook #content table.tableblock td.halign-center,
.boostlook:not(:has(.doc)) table.table td.halign-center,
.boostlook#libraryReadMe > table td.halign-center {
text-align: center;
}
.boostlook #content table.tableblock th p,
.boostlook #content table.tableblock td p,
.boostlook:not(:has(.doc)) table.table th p,
.boostlook:not(:has(.doc)) table.table td p,
.boostlook#libraryReadMe > table th p,
.boostlook#libraryReadMe > table td p {
font: inherit;
color: inherit;
}
.boostlook #content table.tableblock td strong,
.boostlook:not(:has(.doc)) table.table td strong,
.boostlook#libraryReadMe > table td strong {
font-variation-settings: "wght" 600, "wdth" 80;
}
.boostlook #content table.tableblock td code,
.boostlook:not(:has(.doc)) table.table td code,
.boostlook#libraryReadMe > table td code {
background: transparent !important;
padding: 0;
border: none;
}
.boostlook #content table.tableblock .footnotes tr td,
.boostlook:not(:has(.doc)) table.table .footnotes tr td {
border: none;
border-radius: 0;
padding: var(--padding-padding-xs) 0;
}
/* Image Styles */
.boostlook .doc .imageblock,
.boostlook .doc .videoblock {
display: flex;
flex-direction: column;
align-items: center;
}
.boostlook:not(#libraryReadMe) .image:has(> img),
.boostlook .content:has(> img),
.boostlook .mediaobject:has(> embed) {
display: flex;
padding: var(--padding-padding-md, 1.125rem);
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: var(--spacing-size-xs, 0.75rem);
background: var(--surface-background-main-surface-primary, #f5f6f8);
width: 100%;
margin-top: var(--padding-padding-xs, 0.75rem);
}
.boostlook:not(#libraryReadMe) .image:has(> img),
.boostlook .content:has(> img) {
background-color: transparent;
}
.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img, > object) {
display: inline-block;
vertical-align: text-bottom;
line-height: 0;
}
.doc ul.checklist p>i.fa-check-square-o:first-child, .doc ul.checklist p>i.fa-square-o:first-child {
display: none;
}
.boostlook .doc .imageblock .content:has(img) {
background-color: transparent;
padding-left: 0;
padding-right: 0;
}
/*----------------- Global Styles for .boostlook end -----------------*/

122
src/css/10-scrollbars.css Normal file
View File

@@ -0,0 +1,122 @@
/* ----------- Scrollbars Styles Start ------------- */
/**
*
* Scrollbar Styling
*
* This stylesheet provides comprehensive scrollbar customization for different contexts.
*
* Features:
* 1. Global Scrollbar Styles:
* - Applies thin scrollbar width and custom colors to the HTML element.
* - Customizes scrollbar appearance for elements within the `.boostlook` class.
*
* 2. Media Query Adjustments:
* - For screens with a minimum width of 768px, further customizes scrollbar colors for specific elements.
* - Changes scrollbar thumb color on hover for better visibility.
*
* 3. Webkit Scrollbar Customization:
* - Sets the width and height of the scrollbar.
* - Customizes the scrollbar track and thumb with specific colors and border-radius.
* - Adjusts scrollbar appearance for elements within the `.boostlook` class and its descendants.
*
* 4. Hover Effects:
* - Changes the scrollbar thumb color on hover for better user interaction.
*
*/
@supports (scrollbar-width: thin) {
/* HTML Matches its scroll background to content background */
html {
scrollbar-width: thin;
scrollbar-color: var(--border-border-tetriary, #afb3b6) var(--surface-background-main-base-primary, #fff);
}
.boostlook,
.boostlook *,
.boostlook pre,
.boostlook code,
.boostlook:has(:not(.doc)) div.table .table-contents {
scrollbar-width: thin;
scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
}
@media screen and (min-width: 768px) {
.boostlook pre,
.boostlook code,
.boostlook:has(:not(.doc)) div.table .table-contents {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.boostlook pre:hover,
.boostlook code:hover,
.boostlook:has(:not(.doc)) div.table .table-contents:hover {
scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
}
}
}
html::-webkit-scrollbar,
.boostlook::-webkit-scrollbar,
.boostlook *::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
html::-webkit-scrollbar-track {
background: var(--surface-background-main-base-primary, #fff);
border-radius: var(--spacing-size-2xs, 0.5rem);
}
.boostlook::-webkit-scrollbar-track,
.boostlook *::-webkit-scrollbar-track,
.boostlook pre::-webkit-scrollbar-track,
.boostlook code::-webkit-scrollbar-track,
.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-track {
width: 6px;
background: transparent;
border-radius: var(--spacing-size-2xs, 0.5rem);
}
html::-webkit-scrollbar-thumb,
.boostlook::-webkit-scrollbar-thumb,
.boostlook *::-webkit-scrollbar-thumb,
.boostlook pre::-webkit-scrollbar-thumb,
.boostlook code::-webkit-scrollbar-thumb,
.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
width: 6px;
background: var(--border-border-tetriary, #afb3b6);
}
@media screen and (min-width: 768px) {
.boostlook pre::-webkit-scrollbar-thumb,
.boostlook code::-webkit-scrollbar-thumb,
.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
background: transparent;
}
.boostlook pre:hover::-webkit-scrollbar-thumb,
.boostlook code:hover::-webkit-scrollbar-thumb,
.boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb {
background-color: var(--border-border-tetriary, #afb3b6);
}
}
.boostlook .doc pre,
.boostlook p code,
.boostlook table code,
.boostlook p tt,
.boostlook p kbd,
.boostlook p samp,
.boostlook p pre,
.boostlook:not(:has(.doc)) pre,
.boostlook code,
.boostlook pre code,
.boostlook .doc .content pre code,
.boostlook#libraryReadMe pre code {
overflow-x: auto;
}
/* ----------- Scrollbars Styles End ------------- */

323
src/css/11-template-layout.css Normal file
View File

@@ -0,0 +1,323 @@
/* Template-specific Adjustments */
/* Hide root scrollbars for Antora template */
html:has(.article > .boostlook) {
height: 100vh;
overflow: hidden;
}
/* Iframe container scrollbar handling */
html:has(#docsiframe) {
overflow-y: hidden;
}
/* Chrome/Edge scrollbar for iframe container */
html:has(#docsiframe)::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Antora template - Scrollable content area */
.boostlook #content:has(> .doc) {
overflow-y: auto;
}
/* Asciidoc template - Content overflow handling */
.boostlook:has(#content > .sect1) {
overflow-y: auto;
height: 100vh;
}
/* Table Container */
.boostlook .content div:has(> table),
.boostlook .doc table.tableblock,
.boostlook #content .sect3:has(.tableblock) {
overflow-x: auto !important;
}
/* Article Layout */
.article.toc2.toc-left {
min-height: 100vh;
/* Simplified: always use offset behavior, never center */
margin-left: var(--main-max-width-leftbar);
background: var(--surface-background-main-base-primary, #fff);
position: relative;
overflow-y: auto;
}
/* TOC Common start */
/* Background Colors */
.boostlook #toc.toc2,
.boostlook #header:not(:has(.nav-container)),
.boostlook #content,
.boostlook #footer {
background: var(--surface-background-main-base-primary, #fff);
}
/* TOC Scrolling */
.boostlook #toc.toc2 {
overflow-y: auto;
scrollbar-color: inherit;
}
/* TOC Positioning */
.boostlook #toc.toc2,
#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
#antora-template-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook)) #toc.toc2.is-active {
position: static;
}
/* TOC Toggle Button */
.boostlook #toggle-toc {
visibility: hidden;
height: 0;
width: 0;
}
/* TOC Navigation Menu */
.boostlook #toc ul,
.boostlook:not(:has(.doc)) div.toc dd {
margin: 0;
padding: 0 0 0 var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem);
color: var(--text-main-text-body-secondary, #494d50);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
line-height: var(--typography-line-height-md, 1.25rem);
list-style: none;
box-sizing: border-box;
position: relative;
z-index: 0;
}
.boostlook #toc .nav-menu > .nav-list,
.boostlook #toc .nav-menu > .nav-list > .nav-list,
.boostlook #toc > ul.sectlevel1 {
padding-left: 0;
}
.boostlook .nav-menu .nav-list li,
.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)),
.boostlook #toc > ul.sectlevel1 li:has(> ul) a,
.boostlook:not(:has(.doc)) div.toc dt {
position: relative;
padding: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem) var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
}
.boostlook .nav-menu .nav-list li:has(.nav-text),
.boostlook #toc > ul.sectlevel1 li:has(> ul):not(:first-of-type) {
margin-top: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem);
}
.boostlook .nav-text,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a {
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-2xs, 0.75rem);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
/* Table of Contents Links */
.boostlook #toc a,
.boostlook:not(:has(.doc)) div.toc a {
color: var(--text-main-text-body-secondary, #494d50);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
line-height: var(--typography-line-height-sm, 1rem); /* 142.857% */
text-decoration: none;
}
.boostlook #toc a:hover,
.boostlook #toc a:focus,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:hover,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:focus,
.boostlook:not(:has(.doc)) div.toc a:hover,
.boostlook:not(:has(.doc)) div.toc a:focus {
color: var(--text-main-text-link-blue-secondary, #0284c7);
text-decoration: none;
}
/*
.boostlook #toc .nav-link:visited:not(:hover),
.boostlook #toc .sectlevel1 li:not(:has(> ul)) a:visited:not(:hover),
.boostlook:not(:has(.doc)) div.toc a:visited:not(:hover) {
color: var(--text-main-text-link-viewed, #62b3dd);
}
*/
.boostlook .nav-list li[data-depth]:not([data-depth="1"]),
.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li,
.boostlook:not(:has(.doc)) div.toc dd dt {
margin-left: calc(var(--leftbar-paddings-leftbar-padding-2xs) * -1);
padding-left: calc(var(--padding-padding-sm, 1rem) + var(--leftbar-paddings-leftbar-padding-2xs));
}
.boostlook .nav-list li[data-depth]:not([data-depth="1"])::before,
.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li::before,
.boostlook:not(:has(.doc)) div.toc dd dt:before {
content: "";
position: absolute;
left: var(--leftbar-paddings-leftbar-padding-2xs);
top: 0;
width: 1px;
height: 100%;
background: var(--border-border-secondary, #d5d7d9);
}
.boostlook .nav-list li[data-depth]:not([data-depth="1"]):hover::before,
.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)):hover::before,
.boostlook:not(:has(.doc)) div.toc dd dt:hover:before {
background-color: var(--border-border-blue-hover, #329cd2);
isolation: isolate;
z-index: 1;
}
/* Navigation Menu Title */
.boostlook #toc #toctitle,
.boostlook .nav-menu h3.title {
padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-2xs, 0.75rem);
line-height: var(--typography-line-height-sm, 1rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
font-variation-settings: "wght" 600, "wdth" 80;
}
/* TOC code in links */
.boostlook #toc a code,
.boostlook:not(:has(.doc)) div.toc a code {
/* slightly reduce code elements font size in side menu */
font-size: 0.96em;
display: inline;
background: none !important;
padding: 0;
border: none;
color: inherit;
transition: none;
}
/* Content */
.boostlook #content .doc,
.boostlook #content > .sect1,
.boostlook #header > *,
.boostlook #footer > * {
max-width: var(--main-content-width);
margin-left: 0;
}
.boostlook #preamble + .sect1,
.boostlook .doc .sect1 + .sect1 {
margin-top: revert;
}
html:not(.is-clipped--nav):has(.boostlook) div#content {
display: block;
visibility: visible;
}
html.is-clipped--nav:has(.boostlook) div#content {
display: none;
visibility: hidden;
}
/* Responsive Design */
@media screen and (min-width: 768px) {
.article.toc2.toc-left {
padding: 0 1rem 0 1rem;
}
.boostlook #toggle-toc {
visibility: visible;
height: auto;
width: auto;
}
.boostlook #toc.toc2 {
position: fixed;
width: var(--main-max-width-leftbar);
left: 0;
top: 0;
z-index: 1000;
height: 100vh;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
border-right: 1px solid var(--border-border-primary, #e4e7ea);
visibility: visible;
}
.boostlook #toc.toc2:not(.nav-container) {
padding: 1rem 1.5rem;
}
.boostlook #toc.toc2:not(.nav-container):has(#toggle-toc) {
/* Extra left padding if toc toggle exists */
padding: 1rem 1.5rem 1rem 2.2rem;
}
/* TOC Toggle Button */
.boostlook #toggle-toc {
position: fixed;
top: 2rem;
left: 1rem;
background-color: var(--surface-background-main-base-primary);
box-shadow: 0 0px 3px var(--surface-background-main-surface-transparent-inverse);
border: 0;
padding: 0;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M400-240l240-240-240-240-56%2056%20184%20184-184%20184%2056%2056Z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: center;
border-radius: 1rem;
height: 2rem;
width: 2rem;
text-indent: -9999px;
z-index: 1001;
}
/* Hidden TOC */
html.toc-hidden .boostlook {
margin-left: 0;
}
html.toc-hidden .boostlook #toggle-toc {
left: 2px;
}
/* Visible TOC */
html.toc-visible .boostlook #toggle-toc {
left: 2px;
background-color: var(--surface-background-main-base-primary);
}
html.toc-visible .boostlook {
margin-left: 0;
}
html.toc-hidden .boostlook #toc.toc2 {
visibility: hidden;
}
html.toc-visible #toc.toc2 {
opacity: 1;
visibility: visible;
/* width: 250px;
padding-left: 1.5rem; */
}
/* TOC Shadow States */
html.toc-visible:not(.toc-pinned) #toc.toc2 {
box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.1);
}
/* TOC Pin States */
html.toc-visible.toc-pinned #toggle-toc {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M560-240%20320-480l240-240%2056%2056-184%20184%20184%20184-56%2056Z%22%2F%3E%3C%2Fsvg%3E");
}
/* html.toc-visible.toc-pinned .boostlook {
margin-left: var(--main-max-width-leftbar);
} */
}
/* TOC Common End */

100
src/css/12-asciidoctor.css Normal file
View File

@@ -0,0 +1,100 @@
/*----------------- Styles specific to AsciiDoctor content start -----------------*/
/**
* AsciiDoctor-Specific Styles
* Styles that apply specifically to content generated by AsciiDoctor.
* These styles handle:
* 1. Article layout and structure
* 2. Table of contents (TOC) styling
* 3. Content formatting
* 4. Responsive design adjustments
*/
/* Header Adjustments */
.boostlook #header > h1 {
margin-top: 0;
}
.boostlook #header .author {
display: inline-block;
margin-top: var(--padding-padding-md, 1.125rem);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-lg, 1.25rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-xl, 1.75rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
/* Rouge Syntax Highlighting */
/* Light theme Rouge syntax highlighting */
.boostlook pre.rouge .k { /* Keywords like const, auto */
color: var(--atom-one-light-keyword, #a626a4);
}
.boostlook pre.rouge .kt { /* Types like char, int */
color: var(--atom-one-light-keyword, #a626a4);
}
.boostlook pre.rouge .n,
.boostlook pre.rouge .nf { /* Names, identifiers, functions */
color: var(--atom-one-light-text, #383a42);
}
.boostlook pre.rouge .o { /* Operators */
color: var(--atom-one-light-operator, #e45649);
}
.boostlook pre.rouge .s,
.boostlook pre.rouge .s1,
.boostlook pre.rouge .s2 { /* Strings */
color: var(--atom-one-light-string, #50a14f);
}
.boostlook pre.rouge .mi,
.boostlook pre.rouge .mf { /* Numbers */
color: var(--atom-one-light-variable, #986801);
}
.boostlook pre.rouge .p { /* Punctuation */
color: var(--atom-one-light-text, #383a42);
}
.boostlook pre.rouge .c,
.boostlook pre.rouge .c1,
.boostlook pre.rouge .cm { /* Comments */
color: var(--atom-one-light-comment, #a0a1a7);
font-family: "Monaspace Xenon", monospace;
font-style: italic;
}
/* Dark theme Rouge syntax highlighting */
html.dark .boostlook pre.rouge .k,
html.dark .boostlook pre.rouge .kt {
color: var(--atom-one-dark-keyword, #c678dd);
}
html.dark .boostlook pre.rouge .n,
html.dark .boostlook pre.rouge .nf {
color: var(--atom-one-dark-text, #abb2bf);
}
html.dark .boostlook pre.rouge .o {
color: var(--atom-one-dark-operator, #e06c75);
}
html.dark .boostlook pre.rouge .s,
html.dark .boostlook pre.rouge .s1,
html.dark .boostlook pre.rouge .s2 {
color: var(--atom-one-dark-string, #98c379);
}
html.dark .boostlook pre.rouge .mi,
html.dark .boostlook pre.rouge .mf {
color: var(--atom-one-dark-variable, #d19a66);
}
html.dark .boostlook pre.rouge .p {
color: var(--atom-one-dark-text, #abb2bf);
}
html.dark .boostlook pre.rouge .c,
html.dark .boostlook pre.rouge .c1,
html.dark .boostlook pre.rouge .cm {
color: var(--atom-one-dark-comment, #5c6370);
font-family: "Monaspace Xenon", monospace;
font-style: italic;
}
.boostlook pre.rouge code span {
font-style: normal;
}
/*----------------- Styles specific to AsciiDoctor content end -----------------*/

616
src/css/13-antora.css Normal file
View File

@@ -0,0 +1,616 @@
/*----------------- Styles specific to Antora Templates start -----------------*/
/**
* Antora Template Styles
* Specific styles for Antora-generated documentation.
* These styles handle:
* 1. Header and navigation layout
* 2. Typography customization
* 3. Navigation menu structure
* 4. Content layout and formatting
* 5. Responsive design adaptations
*/
/* Table of Contents */
.boostlook .nav {
height: 100%;
padding: var(--spacing-size-sm, 1rem) var(--spacing-size-lg, 1.5rem);
position: static;
background-color: unset;
box-shadow: none;
height: auto;
overflow-y: auto;
}
/* Toc Navigation */
.boostlook #toc .nav-menu h3.title a {
color: inherit;
font: inherit;
}
.boostlook #toc .nav-menu h3.title a:focus,
.boostlook #toc .nav-menu h3.title a:hover {
color: var(--text-main-text-link-blue-secondary, #0284c7);
}
/* Navigation Menu */
.boostlook .nav-panel-menu {
overflow: visible;
}
.boostlook .nav-close {
display: none;
}
.boostlook .nav-menu > .nav-list > .nav-list {
margin-left: 0;
}
.boostlook .nav-list li[data-depth]:not([data-depth="1"]).is-current-page.is-active::before {
background-color: var(--text-main-text-primary, #18191b);
}
/* Active Page Indicator */
.boostlook .nav-list .is-current-page.is-active {
position: relative;
border-radius: var(--padding-padding-3xs, 0.25rem);
background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}
.boostlook #toc .nav-list .is-current-page.is-active > .nav-link {
color: var(--text-main-text-primary, #18191b);
}
/* Header Layout */
.boostlook #header:has(.nav-container) {
padding: 0;
}
/* Typography */
.boostlook .doc,
.boostlook .doc i {
font: inherit;
}
.boostlook .doc i {
color: inherit;
}
/* TOC Container */
.boostlook #toc.toc2.nav-container {
position: fixed;
}
.boostlook #toc.toc2.nav-container.is-active {
position: static;
height: 100vh;
padding: 0;
overflow-y: auto;
}
/* Nav Toggle */
.boostlook #content .nav-toggle {
display: flex;
padding: var(--spacing-size-3xs, 0.25rem);
align-items: center;
border: none;
border-radius: var(--spacing-size-2xs, 0.5rem);
outline: none;
line-height: inherit;
height: unset;
width: unset;
margin-right: var(--padding-padding-xs, 0.5rem);
background: var(--surface-background-main-base-primary, #fff);
background-size: auto;
background-position-x: auto;
}
.boostlook #content .nav-toggle:before {
content: var(--icon-menu);
line-height: 0;
}
@media screen and (min-width: 768px) {
.boostlook #content .nav-toggle {
display: none;
visibility: hidden;
}
}
/* Layout */
.boostlook .article .content {
gap: 1rem;
}
.boostlook #content:has(.toc.sidebar) {
display: flex;
}
.boostlook #footer:has(> script):not(:has(> div)) {
padding-top: 0;
padding-bottom: 0;
}
/* Toolbar */
.boostlook .toolbar {
position: static;
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--padding-padding-md, 1.125rem) 0;
color: var(--text-main-text-body-tetriary, #62676b);
background-color: transparent;
box-shadow: unset;
}
.boostlook .toolbar + h1 {
margin-top: 0;
}
/* Breadcrumbs */
.boostlook .breadcrumbs {
display: block;
flex: 1 1;
padding: 0;
font-size: inherit;
line-height: revert;
overflow: auto;
scrollbar-width: none;
margin-right: var(--spacing-size-3xs);
}
.boostlook .breadcrumbs::-webkit-scrollbar {
display: none;
}
.boostlook .breadcrumbs ul {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
color: var(--text-main-text-body-tetriary, #62676b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
.boostlook .breadcrumbs ul li {
font: inherit;
display: flex;
align-items: center;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.boostlook .breadcrumbs ul li:not(:first-child):not(:last-child) {
display: none;
}
}
.boostlook .breadcrumbs ul li a {
font: inherit;
color: var(--text-main-text-link-blue-secondary, #0284c7);
text-decoration: none;
position: relative;
}
.boostlook .breadcrumbs ul li a:hover {
text-decoration: underline;
}
.boostlook .breadcrumbs ul li:first-of-type {
display: flex;
align-items: center;
padding: var(--spacing-size-3xs, 0.25rem);
margin-right: var(--padding-padding-xs, 0.75rem);
gap: var(--spacing-size-2xs, 0.5rem);
border-radius: var(--spacing-size-2xs, 0.5rem);
border: 1px solid var(--border-border-primary, #e4e7ea);
background: var(--surface-background-main-surface-primary, #f5f6f8);
}
.boostlook .breadcrumbs ul li:first-of-type::after {
content: none;
}
.boostlook .breadcrumbs ul li:first-of-type a {
display: flex;
align-items: center;
gap: var(--spacing-size-3xs, 0.25rem);
line-height: 0;
color: var(--text-main-text-primary, #18191b);
text-decoration: none;
}
.boostlook .breadcrumbs ul li::after {
content: "";
display: inline-block;
flex-shrink: 0;
flex-grow: 0;
width: 2px;
height: 2px;
border-radius: 50%;
background: var(--surface-icons-icon-tetriary, #949a9e);
padding: 0;
margin: 0 var(--spacing-size-2xs, 0.5rem);
}
.boostlook .breadcrumbs ul li:first-of-type::after,
.boostlook .breadcrumbs ul li:last-of-type::after {
content: none;
}
.boostlook .breadcrumbs ul li:first-of-type a svg {
display: none;
}
.boostlook .breadcrumbs ul li:first-of-type a::before {
content: var(--icon-home);
}
/* Spirit Navigation */
.boostlook .toolbar .spirit-nav,
.boostlook:not(:has(.doc)) .spirit-nav {
display: flex;
align-items: center;
gap: 0.125rem;
}
.boostlook .toolbar .spirit-nav .disabled,
.boostlook:not(:has(.doc)) .spirit-nav .disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.boostlook:not(:has(.doc)) .spirit-nav {
padding-top: var(--padding-padding-md, 1.125rem);
justify-content: flex-end;
}
.boostlook .toolbar .spirit-nav a,
.boostlook:not(:has(.doc)) .spirit-nav a {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-size-2xs, 0.5rem);
border-radius: var(--spacing-size-2xs, 0.5rem);
/* border: 1px solid var(--border-border-primary, #e4e7ea); */
/* background: var(--surface-background-main-base-primary, #fff); */
width: 32px;
height: 32px;
text-decoration: none;
padding: 0;
position: relative;
transition: all 0.2s ease;
}
.boostlook .toolbar .spirit-nav a:hover,
.boostlook:not(:has(.doc)) .spirit-nav a:hover {
border: 1px solid var(--border-border-blue, #92cbe9);
background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}
.boostlook .toolbar .spirit-nav a span {
overflow: hidden;
position: relative;
}
.boostlook:not(:has(.doc)) .spirit-nav a img {
display: none;
border-width: 0px;
}
/* hide default icons if elemnts exists */
.boostlook .toolbar .spirit-nav a span[title*="Previous"],
.boostlook .toolbar .spirit-nav a span[title*="Next"],
.boostlook .toolbar .spirit-nav a span[title*="Up"] {
color: transparent;
display: block;
width: 100%;
height: 100%;
}
.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey]::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 0;
}
.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="p"]::after {
content: var(--icon-arrow-left);
}
.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="n"]::after {
content: var(--icon-arrow-right);
}
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
content: var(--icon-arrow-up);
}
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
content: var(--icon-arrow-up);
}
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="h"]::after {
content: var(--icon-home);
}
/* Tabs Elements */
.boostlook .tabs .tabpanel {
border: revert;
padding: var(--padding-padding-xs, 0.75rem) 0;
background: transparent;
}
.boostlook .tablist,
.boostlook .tabs .tabpanel {
border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
}
.boostlook .tablist > ul[role="tablist"] {
background-color: var(--colors-neutral-250, #f9f9f9);
}
.dark .boostlook .tablist > ul[role="tablist"] {
background-color: var(--colors-neutral-750, #1c1c1c);
}
.boostlook .tablist > ul .tab {
position: relative;
display: flex;
padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-md, 1.125rem);
justify-content: center;
align-items: center;
color: var(--text-main-text-body-tetriary, #62676b);
font-size: var(--typography-font-size-xs, 0.875rem);
line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
cursor: pointer;
border: none;
background: transparent;
}
.boostlook .tabs.is-loading .tablist li:first-child::after,
.boostlook .tabs:not(.is-loading) .tablist li.is-selected::after {
content: "";
display: block;
height: 1px;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
border-bottom: 1px solid var(--text-main-text-primary, #18191b);
}
.boostlook .tablist > ul .tab * {
color: inherit;
}
.boostlook .tablist > ul .tab.is-selected,
.boostlook .tablist > ul .tab:hover {
color: var(--text-main-text-primary, #18191b);
}
.boostlook .tablist.ulist > ul li + li {
margin-left: unset;
}
.boostlook .tabs:not(.is-loading) .tablist .tab:not(.is-selected) {
background-color: transparent;
}
/* Search Field Container */
#search-field {
display: flex;
position: relative;
}
/* Search Input */
#search-input {
padding: 0.15rem 0.75rem 0.15rem 1.75rem !important;
border: 1px solid var(--border-border-secondary);
border-radius: 6px;
background-color: var(--surface-background-main-surface-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.35rem center;
background-size: 16px 16px;
color: var(--text-main-text-body-primary);
font-family: inherit;
font-size: 1rem !important; /* 16px minimum prevents iOS zoom on focus */
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#search-input::placeholder {
color: var(--text-main-text-body-tetriary);
}
#search-input:focus {
outline: none;
border-color: var(--border-border-blue-primary);
box-shadow: 0 0 0 3px var(--colors-blue-50);
}
#search-input:disabled {
background: var(--colors-neutral-100);
color: var(--text-main-text-body-tetriary);
cursor: not-allowed;
}
/* Results Dropdown */
.search-result-dropdown-menu {
position: absolute;
z-index: 100;
top: 100%;
right: 0;
margin-top: 8px;
min-width: 400px;
border-radius: 8px;
background: var(--surface-background-main-base-primary);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.search-result-dataset {
padding: 0.5rem;
border: 1px solid var(--border-border-secondary);
border-radius: 8px;
min-width: 580px;
max-height: calc(100vh - 6rem);
overflow: auto;
}
/* Result Component Header */
.search-result-component-header {
padding: 0.5rem 0.75rem;
margin: 0.25rem 0;
border-bottom: 1px solid var(--border-border-secondary);
color: var(--text-main-text-body-secondary);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
/* Result Item */
.search-result-item {
display: flex;
margin: 0.25rem 0;
border-radius: 6px;
}
.search-result-item:hover {
background: var(--colors-neutral-50);
}
.search-result-item .no-result {
padding: 1rem;
color: var(--text-main-text-body-tetriary);
text-align: center;
}
/* Result Document Title (Left Column) */
.search-result-document-title {
width: 25%;
padding: 0.625rem 0.75rem;
border-right: 1px solid var(--border-border-secondary);
color: var(--text-main-text-body-tetriary);
font-size: 0.75rem;
text-align: right;
}
/* Result Document Hit (Right Column) */
.search-result-document-hit {
flex: 1;
color: var(--text-main-text-body-secondary);
font-size: 0.8125rem;
}
.search-result-document-hit > a {
display: block;
padding: 0.5rem 0.75rem;
color: inherit;
text-decoration: none;
}
.search-result-document-hit > a:hover {
background: transparent;
}
.search-result-document-hit .search-result-section-title {
margin-bottom: 0.25rem;
color: var(--text-main-text-body-primary);
font-size: 0.875rem;
font-weight: 500;
}
.search-result-document-hit .search-result-highlight {
padding: 0.1em 0.2em;
border-radius: 2px;
background: var(--colors-blue-50);
color: var(--text-main-text-link-blue);
font-weight: 500;
}
/* Search Responsive: Mobile (< 768px) */
@media screen and (max-width: 767px) {
.boostlook .toolbar {
flex-wrap: wrap;
gap: 0.75rem;
}
.search-container {
order: 99;
flex: 1 0 100%;
}
#search-input {
width: 100% !important;
min-width: unset;
font-size: 1rem !important; /* Prevents iOS zoom on focus */
}
.search-result-dropdown-menu {
position: fixed;
top: 6rem;
left: 1rem;
right: 1rem;
min-width: unset;
max-width: unset;
width: auto;
}
.search-result-dataset {
min-width: unset;
}
}
/* Search Responsive: Tablet (768px - 1023px) */
@media screen and (min-width: 768px) {
#search-input {
width: unset !important;
min-width: unset !important;
}
.search-result-dropdown-menu {
position: fixed;
top: 4rem;
left: calc(var(--main-max-width-leftbar) + 1rem);
right: 1rem;
min-width: unset;
max-width: unset;
width: auto;
}
.search-result-dataset {
min-width: unset;
}
}
/* Search Responsive: Desktop (1024px+) */
@media screen and (min-width: 1024px) {
#search-input {
min-width: 200px !important;
z-index: 1001;
}
.search-result-dropdown-menu {
position: absolute;
top: 100%;
left: auto;
right: 0;
width: clamp(530px, 45vw, 600px);
}
}
/*----------------- Styles specific to Antora Templates end -----------------*/

513
src/css/14-quickbook.css Normal file
View File

@@ -0,0 +1,513 @@
/*---------- Quickbook docs styling fixes -----------*/
/**
* Quickbook Documentation Styles
* Comprehensive styling for Quickbook-generated documentation, including:
* 1. Typography and heading hierarchy
* 2. Content blocks and spacing
* 3. Navigation and spirit-nav elements
* 4. Special elements (notes, tips, etc.)
* 5. Code and syntax highlighting
*/
#boost-legacy-docs-wrapper:has(> .boostlook),
#antora-template-wrapper:has(> .boostlook),
div.source-docs-antora.boostlook:has(> .boostlook) {
/* CharConv template fix */
margin: auto;
}
/* Legacy boostlook container */
.boostlook#boost-legacy-docs-wrapper,
.boostlook#antora-template-wrapper,
div.source-docs-antora.boostlook {
margin-top: 0;
max-width: unset;
overflow: hidden;
position: relative;
min-height: 100vh;
}
.boostlook#boost-legacy-docs-wrapper > #header,
.boostlook#boost-legacy-docs-wrapper > #content,
.boostlook#boost-legacy-docs-wrapper > #footer,
.boostlook#boost-legacy-docs-wrapper > #footnotes,
.boostlook#antora-template-wrapper > #header,
.boostlook#antora-template-wrapper > #content,
.boostlook#antora-template-wrapper > #footer,
.boostlook#antora-template-wrapper > #footnotes,
div.source-docs-antora.boostlook > #header,
div.source-docs-antora.boostlook > #content,
div.source-docs-antora.boostlook > #footer,
div.source-docs-antora.boostlook > #footnotes {
/* width: auto;
max-width: unset;
margin-left: auto; */
padding-left: unset;
padding-right: unset;
}
/* Add Side margin for legacy boostlook container */
#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) {
padding: 0 var(--main-margin, 3rem);
}
/* Title Block Common */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type {
margin-bottom: var(--padding-padding-md, 1.125rem);
}
/* Title Styles */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .title {
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-2xl, 1.75rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-3xl, 2.5rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
margin: 0;
}
/* Title Author */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .author,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .author,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .author,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .author {
margin: 0;
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-lg, 1.25rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-xl, 1.75rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
}
/* Top margin for first Author in title */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div.author,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.author,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.author,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content div.author {
margin-top: var(--padding-padding-md, 1.125rem);
}
/* Reduce top margin for next authors in authors group */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .authorgroup div.author:not(:first-child) {
margin-top: var(--padding-padding-2xs);
}
/* Remove Top Margin for next .copyright */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author {
margin-top: var(--padding-padding-3xs);
}
/* Title Copyright */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .copyright,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .copyright,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .copyright,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .copyright {
color: var(--text-main-text-body-secondary, #494d50);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
line-height: var(--typography-line-height-lg, 1.5rem);
margin-top: var(--padding-padding-2xs, 0.5rem);
}
/* Remove Top Margin for next .copyright */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright {
margin-top: 0;
}
/* Title Legalnotice */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .legalnotice,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .legalnotice {
color: var(--text-main-text-body-primary, #2a2c30);
font-size: var(--typography-font-size-sm, 1rem);
font-style: normal;
line-height: var(--typography-line-height-lg, 1.5rem);
margin-top: var(--padding-padding-2xs, 0.5rem);
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .legalnotice {
margin-bottom: var(--padding-padding-md, 1.125rem);
}
/* Remove <hr/>s */
.boostlook:not(:has(.doc)) .titlepage hr {
display: none;
}
/* Table of Contents */
.boostlook:not(:has(.doc)) div.toc {
color: var(--text-main-text-body-secondary, #494d50);
font-family: var(--font-family-body, "Noto Sans");
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
line-height: var(--typography-line-height-md, 1.25rem);
margin: 0;
margin-bottom: var(--padding-padding-md, 1.125rem);
padding: 0;
border: none;
}
.boostlook:not(:has(.doc)) div.toc > p {
display: flex;
padding: var(--spacing-size-3xs, 0.25rem);
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-2xs, 0.75rem);
font-variation-settings: "wght" 600, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
.boostlook:not(:has(.doc)) div.toc > p > * {
font: inherit;
color: inherit;
}
.boostlook:not(:has(.doc)) div.toc .toc dt {
color: var(--text-main-text-body-secondary, #494d50);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
line-height: var(--typography-line-height-md, 1.25rem);
}
.boostlook:not(:has(.doc)) div.toc dd dd {
padding-left: var(--leftbar-paddings-leftbar-padding-sm);
}
/* Section Layout */
.boostlook#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
.boostlook#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > * {
/* max-width: var(--main-content-width);
margin-left: inherit;
margin-right: inherit; */
margin: 0 auto;
}
/* hide footer spirit nav since it wasn't visible before */
.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav,
.boostlook#boost-legacy-docs-wrapper div.spirit-nav:last-child,
.boostlook#antora-template-wrapper div.spirit-nav:last-child,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spirit-nav:last-child {
display: none !important;
}
/* hidden elems */
.boostlook:not(:has(.doc)) > hr,
.boostlook:not(:has(.doc)) .table-break {
display: none;
}
/* Content Blocks */
.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img):first-child:last-child {
margin: var(--padding-padding-xs, 0.75rem) 0;
}
.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code {
background: transparent !important;
border: none;
font-size: inherit;
color: inherit;
padding: 0;
display: initial;
transition: none;
}
/* Special Blocks */
/* hide legacy icon */
.boostlook:not(:has(.doc)) div:not(.admonitionblock).note > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).tip > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).important > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).caution > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).warning > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).blurb > table tr:first-child td,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child td {
display: none;
}
/* Special Blocks Margins */
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) div.blurb,
.boostlook:not(:has(.doc)) p.blurb {
margin-top: var(--padding-padding-xs, 0.75rem);
margin-bottom: var(--padding-padding-2xs);
}
.boostlook:not(:has(.doc)) .titlepage + div.note,
.boostlook:not(:has(.doc)) .titlepage + div.tip,
.boostlook:not(:has(.doc)) .titlepage + div.important,
.boostlook:not(:has(.doc)) .titlepage + div.caution,
.boostlook:not(:has(.doc)) .titlepage + div.warning,
.boostlook:not(:has(.doc)) .titlepage + div.blurb,
.boostlook:not(:has(.doc)) .titlepage + p.blurb {
margin-top: var(--padding-padding-2xs);
}
/* Tables */
/* Make div with Table display block */
.boostlook:has(:not(.doc)) div.table {
display: block;
}
/* Enable Horizontal Scroll */
.boostlook:has(:not(.doc)) div.table .table-contents,
.boostlook:has(:not(.doc)) .informaltable:has(> .table) {
overflow: auto;
}
/* References Table */
/* This is specific selector for refences tables which containes many tables and only tables as direct children */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) {
display: flex;
flex-direction: column;
gap: var(--padding-padding-md, 1.125rem);
/* border: 2px solid red; */
}
/* Disable margins for all Headings inside table */
.boostlook:has(:not(.doc)) .informaltable:has(> .table) :is(h1, h2, h3, h4, h5, h6) {
margin: 0;
}
/* Table has inner table th */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) th {
border: none;
padding: 0 0 var(--padding-padding-xs, 0.75rem) 0;
background: none;
color: var(--text-main-text-primary, #18191b);
font-size: var(--typography-font-size-md, 1.125rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
/* Disable global cell paddings */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) > tbody > tr > td {
padding: 0;
}
/* Add border radius to tbody first row */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:first-child {
border-top-left-radius: var(--spacing-size-2xs, 0.5rem);
overflow: hidden;
}
/* Add border radius to tbody first row */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:last-child {
border-top-right-radius: var(--spacing-size-2xs, 0.5rem);
overflow: hidden;
}
/* Select Inner Headings and make it look as table head */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tbody :is(h1, h2, h3, h4, h5, h6) {
padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
gap: var(--spacing-size-xs, 0.75rem);
background: var(--surface-background-main-surface-primary, #f5f6f8);
color: var(--text-main-text-body-tetriary, #62676b);
font-size: var(--typography-font-size-xs, 0.875rem);
font-style: normal;
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
letter-spacing: var(--spacing-size-size-0, 0rem);
}
/* Inner table styles */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist {
width: 100%;
}
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist td {
border: none;
padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
}
/* Footnotes */
.boostlook:has(:not(.doc)) .footnotes {
margin-top: var(--padding-padding-lg);
border-top: 1px solid var(--border-border-primary);
}
.boostlook:has(:not(.doc)) .footnotes hr {
display: none;
}
/* Copyright Footer */
/* If Footer has no content than use it as bottom spacer */
.boostlook .copyright-footer:empty {
padding-top: var(--main-margin);
}
/* If Footer has content */
.boostlook .copyright-footer:not(:empty) {
padding: var(--padding-padding-lg) 0;
}
/* Footer Content */
.boostlook:not(:has(.doc)) .copyright-footer {
color: var(--text-main-text-body-quaternary, #949a9e);
font-size: var(--typography-font-size-xs);
font-variation-settings: "wght" 500, "wdth" 80;
line-height: var(--typography-line-height-sm, 1rem);
letter-spacing: var(--spacing-size-size-0, 0rem);
text-align: left;
}
/* Footer Content */
.boostlook:not(:has(.doc)) .copyright-footer p {
text-align: inherit;
font-size: var(--typography-font-size-2xs);
color: var(--text-main-text-body-primary, #2a2c30);
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content hr,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content hr,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content hr {
display: none;
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet {
position: relative;
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) {
margin: 0;
border: none;
padding: 0;
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) pre,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre) pre,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) pre {
padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
margin-top: var(--padding-padding-3xs, 0.25rem);
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]) {
margin-left: 0;
margin-right: 0;
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]):not(:last-child),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]):not(:last-child),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]):not(:last-child),
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:not(:last-child) pre,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:not(:last-child) pre,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:not(:last-child) pre {
margin-bottom: var(--padding-padding-xs, 0.75rem);
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content + p:has(> small),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content + p:has(> small),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content + p:has(> small) {
padding: var(--padding-padding-lg) 0 !important;
}
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .footnotes,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .footnotes,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .footnotes {
padding-top: var(--padding-padding-xs, 0.75rem);
}
@media screen and (min-width: 768px) {
body.article:has(.boostlook#boost-legacy-docs-wrapper),
body.article:has(.boostlook#antora-template-wrapper),
body.article:has(div.source-docs-antora.boostlook) {
/* !important ovverides website own styles !important
* Adjust this to "padding: 0 1rem 0 1rem"
* when website container width will be used as in new look design
*/
padding: 0 !important;
}
#boost-legacy-docs-wrapper .boostlook #toc.toc2,
#antora-template-wrapper .boostlook #toc.toc2,
div.source-docs-antora.boostlook:has(> .boostlook) .boostlook #toc.toc2 {
/* Adjust this to "max(1rem, 50% - 45rem)"
* when website container width will be used as in new look design
*/
left: max(0rem, 50% - 45rem);
}
}
/* TOC Common End */
/*----------------- Quickbook Documentation Styles end -----------------*/

38
src/css/15-readme.css Normal file
View File

@@ -0,0 +1,38 @@
/*----------------- Library README Styles start -----------------*/
.boostlook#libraryReadMe {
margin-left: 0;
}
.boostlook#libraryReadMe > * {
max-width: unset;
margin-left: inherit;
margin-right: inherit;
}
.boostlook#libraryReadMe > h1:first-child {
margin-top: 0;
}
.boostlook#libraryReadMe div.highlight:has(> pre) {
background: transparent !important;
}
.boostlook#libraryReadMe p:has(> a img ) {
display:flex;
flex-wrap:wrap;
justify-content: flex-start;
align-items: center;
}
.boostlook#libraryReadMe p a:has(> img ) {
margin-left:.5rem;
}
.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)) {
padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
border: 1px solid var(--border-border-secondary, #d5d7d9);
}
/*----------------- Library README Styles end -----------------*/

67
src/css/16-responsive-toc.css Normal file
View File

@@ -0,0 +1,67 @@
/*----------------- AsciiDoctor-Specific Responsive TOC Layout start -----------------*/
/* Prevent header/content/footer padding from jumping at 990px breakpoint */
@media (min-width: 990px) {
:root {
--main-max-width-leftbar: 18.25rem;
--main-margin: var(--spacing-size-xl);
}
}
/* === Tablet/Desktop: TOC Sidebar Layout (768px+) === */
@media screen and (min-width: 768px) {
.boostlook #toc.toc2 {
position: fixed !important;
left: 0 !important;
width: var(--main-max-width-leftbar) !important;
top: 0 !important;
height: 100vh !important;
}
.boostlook #toggle-toc {
position: fixed !important;
left: 1rem !important;
top: 2rem !important;
}
.toc2 .boostlook:has(> #content .doc) {
margin-left: 0;
}
html.toc-visible .boostlook {
margin-left: 0 !important;
}
.article.toc2.toc-left {
max-width: none !important;
}
html:not(.toc-hidden, .toc-visible) .article.toc2.toc-left,
.toc-visible.toc-pinned .article.toc2.toc-left {
margin-left: var(--main-max-width-leftbar) !important;
}
}
/* === Wide Screens: Expanded Content Width (1536px+) === */
@media screen and (min-width: 1536px) {
:root {
--main-content-width: 1100px;
--main-content-left-spacing: 2rem;
}
}
/* === Ultra-Wide Screens: Maximum content width (1920px+) === */
@media screen and (min-width: 1920px) {
:root {
--main-content-width: 1300px;
--main-content-left-spacing: 4rem;
}
.boostlook #content,
.boostlook #header > h1,
.boostlook #header .author {
margin-left: var(--main-content-left-spacing);
}
}
/*----------------- AsciiDoctor-Specific Responsive TOC Layout end -----------------*/

51
src/css/README.md Normal file
View File

@@ -0,0 +1,51 @@
# Boostlook v3 CSS — Modular Source
## Overview
`boostlook-v3.css` is the next iteration of the Boost Look CSS framework, built from modular source files in `src/css/`. It replaces the monolithic `boostlook.css` with an organized, maintainable file structure while preserving full backward compatibility.
The production `boostlook-v3.css` is generated by concatenating all modules in order via `build-css.sh`.
## File Structure
| File | Description |
|------|-------------|
| `00-header.css` | License, file overview, template structure docs, selector conventions |
| `01-variables.css` | Root CSS custom properties — spacing, typography, icons |
| `02-themes.css` | Light/dark theme variable mappings |
| `03-fonts.css` | `@font-face` declarations (Noto Sans, Monaspace) |
| `04-reset.css` | CSS reset (box-sizing, margins, defaults) |
| `05-global-typography.css` | Base container, headings h1–h6, heading anchors |
| `06-global-links.css` | Paragraph styling, links, footnotes |
| `07-global-code.css` | Code blocks, inline code, syntax highlighting (hljs) |
| `08-global-components.css` | Quotes, pagination, admonitions, lists, edit-page link |
| `09-global-tables-images.css` | Tables, image styles |
| `10-scrollbars.css` | Scrollbar styling (Firefox + WebKit) |
| `11-template-layout.css` | Template-specific scrolling, iframe, TOC common styles |
| `12-asciidoctor.css` | AsciiDoctor-specific styles, Rouge syntax highlighting |
| `13-antora.css` | Antora navigation, toolbar, breadcrumbs, tabs, search |
| `14-quickbook.css` | Quickbook legacy wrapper, titles, TOC, tables, footer |
| `15-readme.css` | Library README styles |
| `16-responsive-toc.css` | AsciiDoctor responsive TOC layout (768px to 1920px) |
## Build Instructions
Run from the repository root:
```sh
sh build-css.sh
```
This concatenates all modules (in numeric order) into `boostlook-v3.css` at the repo root.
## CSS Tooling Roadmap
> **Status:** Decision deferred — documenting options for future reference.
The current build uses a simple shell concatenation script (`build-css.sh`). As the framework matures, we may adopt proper CSS tooling. Options under consideration:
- **Lightning CSS** — Fast bundler/minifier with modern CSS transforms and browser-target downleveling
- **PostCSS** — Plugin-based pipeline (autoprefixer, nesting, custom media queries)
- **stylelint + minification** — Linting for consistency, paired with a dedicated minifier (e.g., cssnano)
Criteria for the eventual decision: build speed, browser compatibility needs, developer ergonomics, and minimal dependency footprint.

347
workflows/WORKFLOW.md
View File

@@ -1,347 +0,0 @@
# Boostlook CSS Workflow Documentation
This document describes the GitHub Actions workflow that synchronizes `boostlook.css` across the Boost documentation ecosystem. It covers how styling changes flow from this repository to the production websites.
## Table of Contents
- [Overview](#overview)
- [Repository Relationships](#repository-relationships)
- [Workflow Diagram](#workflow-diagram)
- [Detailed Workflow Steps](#detailed-workflow-steps)
- [Branch Strategy](#branch-strategy)
- [Manual Triggers](#manual-triggers)
- [Technical Reference](#technical-reference)
- [Troubleshooting](#troubleshooting)
---
## Overview
The boostlook repository is the **single source of truth** for Boost's documentation styling. When `boostlook.css` is modified, automated workflows propagate those changes to two downstream repositories:
1. **website-v2** - The main Boost website (Django-based)
2. **website-v2-docs** - The Antora-based documentation site
This ensures visual consistency across all Boost web properties.
---
## Repository Relationships
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ BOOSTLOOK │
│ (boostorg/boostlook) │
│ │
│ Source of truth for boostlook.css │
│ Branch: develop │
└─────────────────────────────────────────────────────────────────────────────┘
│
│ On push to develop (boostlook.css changed)
│ OR manual workflow_dispatch
▼
┌───────────────────────────┴───────────────────────────┐
│ │
▼ ▼
┌───────────────────────────────┐ ┌───────────────────────────────────┐
│ WEBSITE-V2 │ │ WEBSITE-V2-DOCS │
│ (boostorg/website-v2) │ │ (boostorg/website-v2-docs) │
│ │ │ │
│ Receives: direct file copy │ │ Receives: workflow trigger │
│ Location: static/css/ │ │ Process: fetches from boostlook │
│ boostlook.css │ │ during antora-ui build │
│ Branch: develop │ │ Branch: develop │
│ │ │ │
│ Django website │ │ Antora documentation site │
└───────────────────────────────┘ └───────────────────────────────────┘
│ │
│ actions-gcp.yaml │ publish.yml
▼ ▼
┌───────────────────────────────┐ ┌───────────────────────────────────┐
│ GKE DEPLOYMENT │ │ AWS S3 + FASTLY CDN │
│ │ │ │
│ develop → stage namespace │ │ Documentation hosting │
│ master → production │ │ with CDN caching │
└───────────────────────────────┘ └───────────────────────────────────┘
```
---
## Workflow Diagram
### Sync Process Flow
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ 1. Developer pushes changes to boostlook.css on develop branch │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 2. sync-boostlook-css.yml workflow triggers │
│ - Checks out boostlook repo │
│ - Checks out website-v2 repo (develop branch) │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 3. Copy boostlook.css to website-v2/static/css/boostlook.css │
│ - Run pre-commit hooks for validation │
│ - Commit and push to website-v2 develop branch │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 4. Trigger website-v2-docs workflows: │
│ - ui-release.yml: Builds new Antora UI bundle │
│ - publish.yml: Rebuilds and publishes documentation │
└─────────────────────────────────────────────────────────────────────────────┘
│
┌───────────────┴───────────────┐
▼ ▼
┌───────────────────────────────┐ ┌───────────────────────────────────────┐
│ 5a. website-v2 deploys │ │ 5b. website-v2-docs deploys │
│ via actions-gcp.yaml │ │ to AWS S3 + Fastly │
│ to GKE stage namespace │ │ │
└───────────────────────────────┘ └───────────────────────────────────────┘
```
---
## Detailed Workflow Steps
### Step 1: Trigger Conditions
The `sync-boostlook-css.yml` workflow in this repository triggers when:
| Trigger | Condition | Branch |
|---------|-----------|--------|
| Push | `boostlook.css` file is modified | `develop` |
| Manual | `workflow_dispatch` from GitHub UI | Any (runs on develop) |
**Important**: The workflow only runs when executed from the official `boostorg/boostlook` repository (fork protection).
### Step 2: CSS Synchronization to website-v2
The workflow performs these actions:
1. **Checkout repositories**
- Checks out boostlook (current repo)
- Checks out `boostorg/website-v2` (develop branch) into `website-v2/` subdirectory
2. **Copy CSS file**
```
boostlook.css → website-v2/static/css/boostlook.css
```
3. **Validation**
- Installs pre-commit
- Runs pre-commit hooks on the copied CSS file
4. **Commit and push**
- Commits with message: `chore: Update boostlook.css from boostlook repository`
- Pushes to website-v2's develop branch
- Skips if no changes detected
### Step 3: Trigger website-v2-docs Workflows
After successfully updating website-v2, the workflow triggers two workflows in `boostorg/website-v2-docs`:
#### ui-release.yml
Builds the Antora UI bundle:
1. Sets up Node.js 18.x
2. Runs `npm ci` and `gulp bundle` in the `antora-ui` directory
3. The gulp build process **fetches boostlook.css** from this repository:
```
https://raw.githubusercontent.com/boostorg/boostlook/${BOOSTLOOK_BRANCH}/boostlook.css
```
4. Creates a GitHub release tagged `ui-{branch-name}` with `ui-bundle.zip`
**Note**: The `BOOSTLOOK_BRANCH` environment variable determines which branch to fetch from. In CI, this defaults to `develop` unless the current branch is `master`.
#### publish.yml
Builds and deploys the documentation:
1. Runs `build.sh` to generate documentation
2. Syncs to AWS S3 (multiple environments)
3. Purges Fastly CDN cache
### Step 4: Downstream Deployments
#### website-v2 Deployment
The `actions-gcp.yaml` workflow in website-v2 handles deployment:
| Branch | Deployment Target |
|--------|-------------------|
| `develop` | GKE `stage` namespace |
| `master` | GKE `production` namespace |
#### website-v2-docs Deployment
The `publish.yml` workflow deploys to:
- AWS S3 buckets (multiple environments)
- Fastly CDN with cache purging
---
## Branch Strategy
### Current Configuration
| Repository | Development Branch | Production Branch |
|------------|-------------------|-------------------|
| boostlook | `develop` | `master` |
| website-v2 | `develop` | `master` |
| website-v2-docs | `develop` | `master` |
### How Changes Flow
```
boostlook (develop) ──► website-v2 (develop) ──► Stage deployment
└──► website-v2-docs (develop) ──► Stage documentation
boostlook (master) ──► Manual process or separate workflow for production
```
**Current Behavior**: The automated sync workflow only operates on the `develop` branch. Production deployments follow a separate process (typically merging develop to master).
### Recommended Workflow
1. Make CSS changes in boostlook on `develop` branch
2. Changes automatically sync to staging environments
3. Test changes on staging
4. Merge `develop` to `master` in all three repos for production
---
## Manual Triggers
### Triggering the Sync Workflow Manually
1. Go to **Actions** tab in the boostlook repository
2. Select **"Sync boostlook.css to website-v2 & website-v2-docs"**
3. Click **"Run workflow"**
4. Select the branch (typically `develop`)
5. Click **"Run workflow"**
### When to Use Manual Triggers
- After fixing a failed automatic sync
- To force a refresh without changing the CSS
- Testing workflow changes
- Recovering from sync issues
---
## Technical Reference
### Files Involved
| Repository | File | Purpose |
|------------|------|---------|
| boostlook | `.github/workflows/sync-boostlook-css.yml` | Main sync workflow |
| boostlook | `boostlook.css` | Source stylesheet |
| website-v2 | `static/css/boostlook.css` | Destination (Django static) |
| website-v2 | `.github/workflows/actions-gcp.yaml` | GKE deployment |
| website-v2-docs | `.github/workflows/ui-release.yml` | Antora UI bundle build |
| website-v2-docs | `.github/workflows/publish.yml` | Documentation publish |
| website-v2-docs | `antora-ui/gulp.d/tasks/build.js` | Fetches boostlook.css |
### Required Secrets
The sync workflow requires these GitHub secrets:
| Secret | Purpose |
|--------|---------|
| `WEBSITE_V2_PAT` | Personal Access Token with write access to website-v2 and website-v2-docs repositories |
### Environment Variables
| Variable | Used In | Default | Purpose |
|----------|---------|---------|---------|
| `BOOSTLOOK_BRANCH` | website-v2-docs | `master` (CI: `develop`) | Branch to fetch boostlook.css from |
### API Endpoints
The antora-ui build fetches boostlook.css from:
```
https://raw.githubusercontent.com/boostorg/boostlook/${BOOSTLOOK_BRANCH}/boostlook.css
```
---
## Troubleshooting
### Common Issues
#### Sync workflow failed at "Commit and push"
**Cause**: The `WEBSITE_V2_PAT` token may have expired or lack permissions.
**Solution**:
1. Generate a new PAT with `repo` scope
2. Update the `WEBSITE_V2_PAT` secret in boostlook repository settings
#### Changes not appearing on staging
**Possible causes**:
1. Workflow failed silently
2. CDN cache not purged
3. Downstream workflow failed
**Solution**:
1. Check Actions tab in all three repositories
2. Manually trigger CDN purge
3. Re-run failed workflows
#### website-v2-docs showing old styles
**Cause**: The antora-ui build may be using cached boostlook.css.
**Solution**:
1. Check the `BOOSTLOOK_BRANCH` variable
2. Manually trigger ui-release.yml with `--skip-boostlook` disabled
3. Verify the CSS URL is accessible
#### Pre-commit hooks failing
**Cause**: CSS formatting issues.
**Solution**:
1. Run pre-commit locally: `pre-commit run --files boostlook.css`
2. Fix any reported issues
3. Push the corrected file
### Verification Steps
After making changes, verify the sync worked:
1. **Check workflow status**: Actions tab in boostlook repo
2. **Verify website-v2 commit**: Check recent commits on develop branch
3. **Check ui-release.yml**: Actions tab in website-v2-docs
4. **Check publish.yml**: Actions tab in website-v2-docs
5. **Test staging sites**: Verify CSS changes are visible
### Logs and Debugging
Each workflow step outputs logs accessible from the Actions tab. Key logs to check:
- `Copy boostlook.css to website-v2` - Confirms file was copied
- `Commit and push changes` - Shows if changes were detected
- `Trigger website-v2-docs ui-release workflow` - Confirms downstream trigger
---
## Additional Resources
- [website-v2-operations Deployments](https://github.com/cppalliance/website-v2-operations/tree/master/deployments) - Infrastructure documentation
- [Antora UI README](https://github.com/boostorg/website-v2-docs/tree/develop/antora-ui) - UI bundle documentation
- [Boost.Build Documentation](https://boostorg.github.io/build/) - For local preview setup
---
*Last updated: January 2025*