diff --git a/static/css/boostlook.css b/static/css/boostlook.css index 9ce16a4a..1f39113f 100644 --- a/static/css/boostlook.css +++ b/static/css/boostlook.css @@ -113,6 +113,8 @@ --dark-bl-pagination-color: rgb(200, 200, 200); --dark-bl-quote-background: rgb(11, 59, 82); --dark-bl-quote-word-color: rgb(209, 228, 242); + --dark-bl-table-border-color: rgb(3, 25, 37); + --dark-bl-table-head-background: rgb(5, 26, 38); --dark-bl-tab-background: rgb(23, 42, 52); --dark-bl-table-stripe-color: rgb(49,74,87); --dark-bl-tabpanel-background: rgb(49 74 87); @@ -177,6 +179,8 @@ html.dark { --bl-quote-background: var(--dark-bl-quote-background); --bl-quote-word-color: var(--dark-bl-quote-word-color); --bl-tab-background: var(--dark-bl-tab-background); + --bl-table-border-color: var(--dark-bl-table-border-color); + --bl-table-head-background: var(--dark-bl-table-head-background); --bl-table-stripe-color: var(--dark-bl-table-stripe-color); --bl-tabpanel-background: var(--dark-bl-tabpanel-background); --bl-text-color: var(--dark-bl-text-color); @@ -267,7 +271,6 @@ p, h1, h2, h3, h4, h5, h6 { margin-top: 1em; margin-bottom: 1em; font-weight: 500; - letter-spacing: .1rem; } .boostlook h1 { font-size: 2.5rem; } @@ -358,19 +361,18 @@ p, h1, h2, h3, h4, h5, h6 { overflow-x: auto; } +.boostlook code, .boostlook p code, -.boostlook .colist > table code { - color: var(--bl-code-text-color) !important; -} - +.boostlook li code, .boostlook .doc p code, -.boostlook .doc table code { +.boostlook .doc table code, +.boostlook .doc .colist > table code { background: none; padding: 0; font-weight: 600; + color: var(--bl-code-text-color) !important; } - .boostlook .quoteblock, .boostlook .verseblock { background: var(--bl-quote-background); @@ -437,6 +439,39 @@ p, h1, h2, h3, h4, h5, h6 { padding-bottom: 1.5rem; } +.boostlook b, +.boostlook strong { + font-weight: bold; +} + +.boostlook #header, +.boostlook #content, +.boostlook #footer { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.boostlook #header { + padding-top: 1.25rem; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +.boostlook #content { + padding-top: 1.25rem; + overflow-y: auto; +} + +.boostlook #footer { + padding-bottom: 1.25rem; + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + +.boostlook h2:first-of-type { + margin-top: 0; +} + /*----------------- Global Styles for .boostlook end -----------------*/ /*----------------- Styles specific to AsciiDoctor content start -----------------*/ @@ -456,6 +491,11 @@ p, h1, h2, h3, h4, h5, h6 { margin-bottom: 1.25rem; padding: 1rem; overflow-x: auto; + border-radius: 8px; +} + +.boostlook:not(:has(.doc)) div.highlight { + border-radius: 8px; } .boostlook:not(:has(.doc)) table { @@ -500,16 +540,20 @@ p, h1, h2, h3, h4, h5, h6 { font-size: 1.5rem; } -.boostlook, -.boostlook #toc.toc2 { +.boostlook #toc.toc2, +.boostlook #header:not(:has(.nav-container)), +.boostlook #content, +.boostlook #footer { background-color: var(--bl-card-background-color); - padding: 1rem 1.5rem; +} + +.boostlook #toc.toc2, +.boostlook #toc.toc2.nav-container { + overflow-y: auto; } .boostlook #toc.toc2 { position: static; - padding-left: 0; - overflow-y: auto; } .boostlook #toc.toc2 > ul { @@ -525,12 +569,14 @@ p, h1, h2, h3, h4, h5, h6 { width: 0; } -.boostlook #toc .nav-menu > .nav-list { +.boostlook #toc .nav-menu > .nav-list, +.boostlook #toc .nav-menu > .nav-list > .nav-list { padding-left: 0 } .boostlook .nav-menu .title { border-bottom: 1px solid var(--bl-table-border-color); + margin-bottom: 16px; } .boostlook #content .sect3:has(.tableblock) { @@ -558,10 +604,9 @@ p, h1, h2, h3, h4, h5, h6 { } .article.toc2.toc-left { - padding: 1rem; + padding: 1rem 1rem 0 1rem; } - .boostlook, .boostlook #toc.toc2 { border-radius: 0.5rem; } @@ -572,7 +617,7 @@ p, h1, h2, h3, h4, h5, h6 { left: max(1rem, 50% - 39rem); top: 1rem; z-index: 1000; - height: calc(100vh - 2rem); + height: calc(100vh - 1rem); padding: 1rem; padding: 1rem 1rem 1.5rem; overflow-x: hidden; @@ -653,6 +698,10 @@ p, h1, h2, h3, h4, h5, h6 { /*----------------- Styles specific to Antora Templates start -----------------*/ +.boostlook #header:has(.nav-container) { + padding: 0; +} + /* Typography */ .boostlook .doc { line-height: 1.5rem; @@ -711,10 +760,16 @@ p, h1, h2, h3, h4, h5, h6 { color: #828282; } -/* TODO: Remove when docs wrapper is resolved in website-v2 */ -.source-docs-antora .boostlook #toc.toc2 { - top: 1rem !important; - max-height: calc(100vh - 1rem) !important; +.boostlook #toc.toc2.nav-container { + position: fixed; +} + +.boostlook #header .nav-container.is-active { + padding: 1rem; +} + +.boostlook #content .nav-toggle { + background-position-x: 0; } /* Active Page Indicator */ @@ -771,6 +826,10 @@ p, h1, h2, h3, h4, h5, h6 { display: flex; } +.boostlook #footer:has(> script):not(:has(> div)) { + padding-top: 0; +} + /* Table of Contents */ .boostlook .nav { height: 100%; @@ -781,10 +840,6 @@ p, h1, h2, h3, h4, h5, h6 { padding: .25rem 0 0 0; } -.boostlook .nav-menu .title { - padding-left: .8rem; -} - /* Admonitions */ .boostlook .admonitionblock p { line-height: normal; @@ -825,4 +880,21 @@ p, h1, h2, h3, h4, h5, h6 { color: var(--bl-text-color); } + +/* Responsive Styles */ +@media screen and (min-width: 768px) { + .boostlook #content:has(> article.doc) { + border-top-right-radius: 0.5rem; + border-top-left-radius: 0.5rem; + } +} + /*----------------- Styles specific to Antora Templates end -----------------*/ +/*----------------- Styles specific to website-v2 start -----------------*/ + +/* Library/Releases Readmes */ +#libraryReadMe li p { + display: inline; +} + +/*----------------- Styles specific to website-v2 end -----------------*/