From f1737183299be4b393ded7db75200cf69d8cabf4 Mon Sep 17 00:00:00 2001 From: wdm-ih Date: Mon, 7 Apr 2025 14:10:37 +0300 Subject: [PATCH] qa: improves styles for various blocks and element - minor fix of code block left margin - replace dot symbol with unicode representation - add styles to header links without .anchor elem inside replaced home icon - reduces navigation buttons gap and removes buttons border - changes font style and increases spacing between table, code titles - fixes toc toggle styles and toc container paddings - add left margin for code blocks, improved syntax highlight - reduce table cell paddings; fixed border radius for tables - removed background of inline code elements - updated in-text link styles - removed background for inline code links --- boostlook_tino.css | 218 +++++++++++++++++++++++++++++---------------- 1 file changed, 141 insertions(+), 77 deletions(-) diff --git a/boostlook_tino.css b/boostlook_tino.css index b4633c9..be91966 100644 --- a/boostlook_tino.css +++ b/boostlook_tino.css @@ -224,6 +224,8 @@ /* Colors Other */ --colors-neutral-150: #d5d7d9; --colors-neutral-850: #2a2c30; + --colors-overlay-overlay-white-40: rgba(255 255 255 / 0.40); + --colors-overlay-overlay-black-40: rgba(13 14 15 / 0.40); --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); @@ -286,8 +288,8 @@ --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%20d%3D%22M9%2016.25C8.58579%2016.25%208.25%2016.5858%208.25%2017C8.25%2017.4142%208.58579%2017.75%209%2017.75H15C15.4142%2017.75%2015.75%2017.4142%2015.75%2017C15.75%2016.5858%2015.4142%2016.25%2015%2016.25H9Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.8808%203.23523C12.823%202.24353%2011.177%202.24353%2010.1192%203.23523L4.11916%208.86023C3.56462%209.38011%203.25%2010.1063%203.25%2010.8665V18C3.25%2019.5188%204.48122%2020.75%206%2020.75H18C19.5188%2020.75%2020.75%2019.5188%2020.75%2018V10.8665C20.75%2010.1063%2020.4354%209.38011%2019.8808%208.86023L13.8808%203.23523ZM11.1451%204.32953C11.6259%203.87876%2012.3741%203.87876%2012.8549%204.32953L18.8549%209.95453C19.107%2010.1908%2019.25%2010.5209%2019.25%2010.8665V18C19.25%2018.6903%2018.6904%2019.25%2018%2019.25H6C5.30964%2019.25%204.75%2018.6903%204.75%2018V10.8665C4.75%2010.5209%204.89301%2010.1908%205.14507%209.95453L11.1451%204.32953Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E"); - --icon-home-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9%2016.25C8.58579%2016.25%208.25%2016.5858%208.25%2017C8.25%2017.4142%208.58579%2017.75%209%2017.75H15C15.4142%2017.75%2015.75%2017.4142%2015.75%2017C15.75%2016.5858%2015.4142%2016.25%2015%2016.25H9Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.8808%203.23523C12.823%202.24353%2011.177%202.24353%2010.1192%203.23523L4.11916%208.86023C3.56462%209.38011%203.25%2010.1063%203.25%2010.8665V18C3.25%2019.5188%204.48122%2020.75%206%2020.75H18C19.5188%2020.75%2020.75%2019.5188%2020.75%2018V10.8665C20.75%2010.1063%2020.4354%209.38011%2019.8808%208.86023L13.8808%203.23523ZM11.1451%204.32953C11.6259%203.87876%2012.3741%203.87876%2012.8549%204.32953L18.8549%209.95453C19.107%2010.1908%2019.25%2010.5209%2019.25%2010.8665V18C19.25%2018.6903%2018.6904%2019.25%2018%2019.25H6C5.30964%2019.25%204.75%2018.6903%204.75%2018V10.8665C4.75%2010.5209%204.89301%2010.1908%205.14507%209.95453L11.1451%204.32953Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); + --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"); @@ -473,6 +475,7 @@ html { --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-secondary: var(--colors-warning-100); @@ -583,6 +586,7 @@ html.dark { --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-secondary: var(--colors-warning-950); @@ -945,24 +949,32 @@ body :not(pre):not([class^="L"]) > code { } /* Anchor positioning within headings */ -.boostlook .doc h2:has(.anchor), .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 .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 .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; @@ -983,12 +995,20 @@ body :not(pre):not([class^="L"]) > code { 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 .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; @@ -996,22 +1016,45 @@ body :not(pre):not([class^="L"]) > code { 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 { +.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 .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); } @@ -1020,7 +1063,8 @@ body :not(pre):not([class^="L"]) > code { .boostlook .doc h3 .anchor:active, .boostlook .doc h4 .anchor:active, .boostlook .doc h5 .anchor:active, -.boostlook .doc h6 .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); } @@ -1131,22 +1175,15 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte /* Link Styling */ .boostlook a, .boostlook .doc a { - color: var(--text-main-text-primary, #18191b); - font-weight: 500; - text-decoration-line: underline; - text-decoration-style: dotted; - text-decoration-skip-ink: auto; - text-decoration-color: var(--border-border-blue, #92cbe9); - text-decoration-thickness: 8%; - text-underline-offset: 12%; - text-underline-position: from-font; + 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-main-text-link-blue-secondary, #0284c7); + color: var(--text-states-text-warning, #FF9442); cursor: pointer; } @@ -1221,7 +1258,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook .doc .literalblock pre { padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem); background: var(--surface-background-main-surface-primary, #f5f6f8); - border-radius: 0.45rem; + border-radius: var(--spacing-size-2xs); border: unset; } @@ -1236,16 +1273,26 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte background: var(--surface-background-main-surface-secondary, #e4e7ea); } +.boostlook pre.programlisting { + 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: italic; - font-weight: 500; + font-style: normal; + font-weight: 600; line-height: var(--typography-line-height-md, 1.25rem); letter-spacing: unset; - padding-bottom: var(--padding-padding-3xs, 0.25rem); + 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. @@ -1290,7 +1337,17 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook#libraryReadMe .literalblock:has(pre), .boostlook#libraryReadMe div.highlight:has(> pre) { margin: 0; - margin-top: var(--padding-padding-3xs, 0.25rem); + margin-top: var(--padding-padding-2xs, 0.5rem); +} + +/* Apply left margin only if code block not in definition block */ +.boostlook .listingblock:has(> .content > pre):not(:is(dd pre)), +.boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre)), +.boostlook:not(:has(.doc)) pre.programlisting:not(:is(dd pre)), +.boostlook#libraryReadMe > pre:not(:is(dd pre)), +.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre)), +.boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre)) { + margin-left: var(--spacing-size-xl); } .boostlook .listingblock:has(> .content > pre):not(:last-child), @@ -1427,8 +1484,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook .doc .colist > table code:not(:has(> code)) { display: inline; color: var(--text-code-neutral, #0d0e0f); - font-size: var(--typography-font-size-xs, 0.875rem); - padding: 0 var(--padding-padding-3xs); + font-size: 0.96em; font-style: normal; font-weight: 400; line-height: var(--typography-line-height-md); @@ -1440,9 +1496,10 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook li code:not(:has(> code)), .boostlook .doc p:not(:is(table p)) code:not(:has(> code)), .boostlook .doc .colist > table code:not(:has(> code)) { - border-radius: var(--spacing-size-3xs, 0.25rem); - border: 1px solid var(--border-border-secondary, #d5d7d9); - background: var(--surface-background-main-surface-primary, #f5f6f8) !important; + border-radius: unset; + padding: unset; + /* border: 1px solid var(--border-border-secondary, #d5d7d9); */ + background: transparent !important; } /* Code Links */ @@ -1461,15 +1518,15 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook .doc p:not(:is(table p)) code:has(> a:only-child), .boostlook .doc .colist > table code:has(> a:first-child:last-child), .boostlook .doc .colist > table code:has(> a:only-child) { - transition: all 0.2s ease; - border-radius: var(--spacing-size-3xs, 0.25rem); - border: 1px solid var(--border-border-blue, #92cbe9); - background: var(--surface-background-main-surface-blue-secondary, #daeef9) !important; - color: var(--text-states-text-additional-tetriary, #026a9f); + /* 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: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, @@ -1482,7 +1539,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte text-decoration: none; font: inherit; color: inherit; -} +} */ /* .boostlook .doc table.tableblock code a, .boostlook:not(:has(.doc)) table.table code a { */ @@ -1492,7 +1549,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte /* } */ /* Code Link Hover States */ -.boostlook p:not(:is(table p)) a:hover code, +/* .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, @@ -1507,7 +1564,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .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; @@ -1556,7 +1613,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook pre span.vg, .boostlook pre span.vi, .boostlook pre span.identifier { - color: var(--text-code-navy, #162ec6); + color: var(--text-main-text-body-primary, #2a2c30); } .boostlook pre span.c, @@ -1735,6 +1792,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook nav.pagination > span:hover a { background: var(--surface-background-main-surface-primary, #f5f6f8); + color: inherit; } .boostlook nav.pagination > span.prev a { @@ -2226,7 +2284,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .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: "•"; + content: "\2022"; position: absolute; left: 0; top: 0; @@ -2421,21 +2479,22 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook:not(:has(.doc)) div.table .title { color: var(--text-main-text-body-primary, #2a2c30); font-size: var(--typography-font-size-xs, 0.875rem); - font-style: italic; - font-weight: 500; + font-style: normal; + font-weight: 600; line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */ padding: 0; - padding-bottom: var(--padding-padding-3xs, 0.25rem); + padding-bottom: var(--padding-padding-2xs, 0.5rem); } .boostlook #content table.tableblock caption > *, .boostlook:not(:has(.doc)) div.table .title > * { - font-weight: inherit; + font: inherit; font-variation-settings: "wght" 500; + text-decoration: none; } .boostlook:not(:has(.doc)) div.table .title { - padding-bottom: var(--padding-padding-3xs, 0.25rem) !important; + padding-bottom: var(--padding-padding-2xs, 0.5rem) !important; } .boostlook #content table.tableblock th, @@ -2444,7 +2503,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .boostlook:not(:has(.doc)) table.table td, .boostlook#libraryReadMe > table th, .boostlook#libraryReadMe > table td { - padding: var(--padding-padding-sm, 1rem) var(--spacing-size-sm, 1rem); + 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); @@ -2471,7 +2530,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .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-xs, 0.75rem); + border-top-left-radius: var(--spacing-size-2xs, 0.5rem); } .boostlook #content table.tableblock:has(thead) th:last-child, @@ -2480,19 +2539,19 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte .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-xs, 0.75rem); + 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-xs, 0.75rem); + 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-xs, 0.75rem); + border-bottom-right-radius: var(--spacing-size-2xs, 0.5rem); } .boostlook #content table.tableblock th, @@ -2803,7 +2862,7 @@ html:has(#docsiframe)::-webkit-scrollbar { .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 { +div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook)) #toc.toc2.is-active { position: static; } @@ -2927,7 +2986,7 @@ div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(>.boostlook)) # .boostlook #toc a code, .boostlook:not(:has(.doc)) div.toc a code { /* slightly reduce code elements font size in side menu */ - font-size: 0.875em; + font-size: 0.96em; display: inline; background: none !important; padding: 0; @@ -2990,6 +3049,11 @@ html.is-clipped--nav:has(.boostlook) div#content { 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; + } + .toc2 .boostlook { margin-left: var(--main-max-width-leftbar); } @@ -2999,8 +3063,8 @@ html.is-clipped--nav:has(.boostlook) div#content { position: fixed; top: 2rem; left: max(1rem, 50% - 39rem - 1rem); - background-color: rgb(255, 255, 255, 0.5); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + 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; @@ -3020,13 +3084,13 @@ html.is-clipped--nav:has(.boostlook) div#content { } html.toc-hidden .boostlook #toggle-toc { - left: max(0rem, 50% - 45rem - 1rem); + left: max(2px, 50% - 45rem - 1rem); } /* Visible TOC */ html.toc-visible .boostlook #toggle-toc { - left: max(0rem, 50% - 45rem - 1rem); - background-color: rgb(255, 255, 255, 1); + left: max(2px, 50% - 45rem - 1rem); + background-color: var(--surface-background-main-base-primary); } html.toc-visible .boostlook { @@ -3375,7 +3439,7 @@ html.is-clipped--nav:has(.boostlook) div#content { .boostlook:not(:has(.doc)) .spirit-nav { display: flex; align-items: center; - gap: var(--padding-padding-2xs, 0.5rem); + gap: 0.125rem; } .boostlook:not(:has(.doc)) .spirit-nav { @@ -3390,8 +3454,8 @@ html.is-clipped--nav:has(.boostlook) div#content { 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); + /* border: 1px solid var(--border-border-primary, #e4e7ea); */ + /* background: var(--surface-background-main-base-primary, #fff); */ width: 32px; height: 32px; text-decoration: none; @@ -3703,7 +3767,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte /* 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 { +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .legalnotice { margin-bottom: var(--padding-padding-md, 1.125rem); } @@ -3767,7 +3831,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > * { .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 { +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spirit-nav:last-child { display: none !important; } @@ -3872,19 +3936,19 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) div.spir /* Add border radius to tbody first row */ .boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:first-child { - border-top-left-radius: var(--spacing-size-xs, 0.75rem); + 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-xs, 0.75rem); + 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-2xs, 0.5rem) var(--spacing-size-sm, 1rem); + 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); @@ -3902,7 +3966,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) div.spir .boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist td { border: none; - padding: var(--padding-padding-2xs, 0.5rem) var(--spacing-size-sm, 1rem); + padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem); } /* Footnotes */ @@ -3946,21 +4010,21 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) div.spir /* 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 { +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 { +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) { +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) { margin: 0; border: none; padding: 0; @@ -3969,7 +4033,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte /* 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 { +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); } @@ -3977,7 +4041,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte /* 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]) { +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]) { margin-left: 0; margin-right: 0; } @@ -3985,27 +4049,27 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte /* 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]), +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), +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 { +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) { +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 { +div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .footnotes { padding-top: var(--padding-padding-xs, 0.75rem); } @@ -4022,7 +4086,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte #boost-legacy-docs-wrapper .boostlook #toc.toc2, #antora-template-wrapper .boostlook #toc.toc2, - div.source-docs-antora.boostlook:has(>.boostlook) .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 */