From ed1715d4679f932fe90f86c3afe5c21c7b9ccb33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Fri, 25 Aug 2023 03:14:09 +0200 Subject: [PATCH] theme: support for colored borders between menu and content #626 --- .../content/basics/migration/_index.en.md | 10 +- layouts/partials/menu.html | 156 +++++++++--------- static/css/ie.css | 64 ++++++- static/css/theme-blue.css | 2 +- static/css/theme-green.css | 2 +- static/css/theme-learn.css | 2 +- static/css/theme-neon.css | 2 +- static/css/theme-red.css | 2 +- static/css/theme-relearn-bright.css | 5 +- static/css/theme-relearn-dark.css | 2 +- static/css/theme-relearn-light.css | 2 +- static/css/theme-zen-dark.css | 11 +- static/css/theme-zen-light.css | 9 +- static/css/theme.css | 92 +++++++++-- static/css/variant-internal.css | 8 +- static/css/variant.css | 42 ++++- static/js/variant.js | 10 +- 17 files changed, 307 insertions(+), 114 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 8066d5cf5e..60dec87f5b 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -22,7 +22,7 @@ This document shows you what's new in the latest release. For a detailed list of - {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme has updated its Swagger dependency to 5.4.1 for the [`openapi` shortcode]({{% relref "shortcodes/openapi" %}}). - With this comes a change in the light variants of `Relearn Bright`, `Relearn Light` and `Zen Light` of the theme by switching the syntaxhighlightning inside of openapi to a light scheme. This brings it more in sync with the style used by the theme variants itself. + With this comes a change in the light theme variants of `Relearn Bright`, `Relearn Light` and `Zen Light` by switching the syntaxhighlightning inside of openapi to a light scheme. This brings it more in sync with the style used by the theme variants itself. Additionally, the syntaxhighlightning inside of openapi for printing was switched to a light scheme for all theme variants. @@ -33,6 +33,14 @@ This document shows you what's new in the latest release. For a detailed list of --PRINT-OPENAPI-CODE-theme: obsidian; ```` +- {{% badge style="note" title=" " %}}Change{{% /badge %}} For consistency reasons, we renamed the CSS variable `--MENU-SECTION-HR-color` to `--MENU-SECTION-SEPARATOR-color`. You don't need to change anything in your custom color stylesheet as the old name will be used as a fallback. + +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme variants `Zen Light` and `Zen Dark` now add more contrast between menu, topbar and content by adding thin borders. + + Those borders are now configurable by using the CSS variables `--MAIN-TOPBAR-BORDER-color`, `--MENU-BORDER-color`, `--MENU-TOPBAR-BORDER-color`, `--MENU-TOPBAR-SEPARATOR-color`, `--MENU-HEADER-SEPARATOR-color` and `--MENU-SECTION-ACTIVE-CATEGORY-BORDER-color`. + + For existing variants nothing has changed visually. + --- ## 5.19.0 (2023-08-12) {#5190} diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 5cc5a56b04..56cc3e3dda 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -8,6 +8,7 @@ {{- end }} diff --git a/static/css/ie.css b/static/css/ie.css index d794abbdf9..1baf914dc9 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -18,6 +18,9 @@ #sidebar { left: 0; } + #header { + border-right: 1px solid transparent; + } .searchbox > :first-child { left: .5rem; } @@ -84,6 +87,10 @@ #sidebar-toggle-span { border-right: thin solid rgba( 134, 134, 134, .333 ); } + #body #breadcrumbs { + border-left-style: solid; + border-left-width: 1px; + } html[dir="rtl"] #body #breadcrumbs { float: left; } @@ -199,6 +206,18 @@ transform: scaleX(1); } + #header-topbar { + border-right-style: solid; + border-right-width: 1px; + } + + #header-wrapper, + #homelinks, + #content-wrapper > * { + border-right-style: solid; + border-right-width: 1px; + } + /* ----------------------------------------------- */ /* set default colors as in variant.css for IE11 */ html { @@ -217,6 +236,15 @@ color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */ } + #body #breadcrumbs { + border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */ + } + @media screen and (max-width: 48rem) { + #body #breadcrumbs { + border-left-color: transparent; + } + } + a:hover, .anchor:hover, #toc-menu:hover { @@ -231,7 +259,6 @@ /* initially use section background to avoid flickering on load when a non default variant is active */ background-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */ - border-bottom-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */ color: rgba( 224, 224, 224, 1 ); /* var(--MENU-SEARCH-color) */ } @@ -295,8 +322,8 @@ color: rgba( 186, 186, 186, 1 ); /* var(--MENU-SECTIONS-LINK-color) */ } - #sidebar hr { - border-color: rgba( 96, 96, 96, 1 ); /* var(--MENU-SECTION-HR-color) */ + #content-wrapper hr { + border-color: rgba( 96, 96, 96, 1 ); /* var(--MENU-SECTION-SEPARATOR-color) */ } #footer { @@ -502,6 +529,10 @@ background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */ } + #body #breadcrumbs { + border-left-color: rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color) */ + } + #body a[aria-disabled="true"], #searchresults .autocomplete-suggestion > .context { color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */ @@ -536,7 +567,6 @@ #homelinks { background-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-BORDER-color) */ - border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-BORDER-color) */ } #homelinks a { @@ -547,6 +577,10 @@ color: rgba( 128, 128, 128, 1 ) /* var(--MENU-HOME-LINK-HOVER-color) */; } + #homelinks hr { + border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-SEPARATOR-color) */ + } + .progress { background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */ } @@ -795,6 +829,28 @@ color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */ } + #topbar { + border-bottom-color: transparent; /* var(--MAIN-TOPBAR-BORDER-color) */ + } + + #header-topbar { + border-bottom-color: transparent; + border-right-color: transparent; /* var(--MENU-TOPBAR-BORDER-color) */ + } + + #header-wrapper, + #homelinks, + #content-wrapper > * { + border-right-color: transparent; /* var(--MENU-BORDER-color) */ + } + + #sidebar ul.collapsible-menu li.active > a{ + border-bottom-color: transparent; /* var(--MENU-BORDER-color) */ + border-top-color: transparent; /* var(--MENU-BORDER-color) */ + border-left-color: transparent; /* var(--MENU-BORDER-color) */ + border-right-color: transparent; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BORDER-color) */ + } + /* ----------------------------------------------- */ /* set further styles to fix broken stuff in IE11 */ diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css index 5b49219345..8a92190f02 100644 --- a/static/css/theme-blue.css +++ b/static/css/theme-blue.css @@ -40,7 +40,7 @@ --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ --MENU-VISITED-color: rgba( 28, 144, 243, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: rgba( 32, 39, 43, 1 ); /* Color of
separator in menu */ + --MENU-SECTION-SEPARATOR-color: rgba( 32, 39, 43, 1 ); /* Color of
separator in menu */ /* base styling for boxes */ --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ diff --git a/static/css/theme-green.css b/static/css/theme-green.css index 9dd9f4a056..8eb5f68aff 100644 --- a/static/css/theme-green.css +++ b/static/css/theme-green.css @@ -40,7 +40,7 @@ --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ --MENU-VISITED-color: rgba( 89, 154, 62, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: rgba( 24, 33, 28, 1 ); /* Color of
separator in menu */ + --MENU-SECTION-SEPARATOR-color: rgba( 24, 33, 28, 1 ); /* Color of
separator in menu */ /* base styling for boxes */ --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css index 1fe8129c9f..da3880b056 100644 --- a/static/css/theme-learn.css +++ b/static/css/theme-learn.css @@ -40,7 +40,7 @@ --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ --MENU-VISITED-color: rgba( 0, 189, 243, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: rgba( 42, 35, 47, 1 ); /* Color of
separator in menu */ + --MENU-SECTION-SEPARATOR-color: rgba( 42, 35, 47, 1 ); /* Color of
separator in menu */ /* base styling for boxes */ --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css index 9051a8c321..6543b0140b 100644 --- a/static/css/theme-neon.css +++ b/static/css/theme-neon.css @@ -50,7 +50,7 @@ --MENU-SECTIONS-LINK-color: rgba( 255, 255, 255, 1 ); /* link color of menu topics */ --MENU-SECTIONS-LINK-HOVER-color: rgba( 208, 208, 208, 1 ); /* hovered link color of menu topics */ --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 86, 255, 232, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-HR-color: rgba( 186, 186, 186, 1 ); /* separator color of menu footer */ + --MENU-SECTION-SEPARATOR-color: rgba( 186, 186, 186, 1 ); /* separator color between menu sections and menu footer */ --MENU-VISITED-color: rgba( 51, 161, 255, 1 ); /* icon color of visited menu topics if configured */ diff --git a/static/css/theme-red.css b/static/css/theme-red.css index c2b702950d..17b23c86a4 100644 --- a/static/css/theme-red.css +++ b/static/css/theme-red.css @@ -40,7 +40,7 @@ --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */ --MENU-VISITED-color: rgba( 243, 28, 28, 1 ); /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: rgba( 43, 32, 32, 1 ); /* Color of
separator in menu */ + --MENU-SECTION-SEPARATOR-color: rgba( 43, 32, 32, 1 ); /* Color of
separator in menu */ /* base styling for boxes */ --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */ diff --git a/static/css/theme-relearn-bright.css b/static/css/theme-relearn-bright.css index bde62e076d..7389ca8072 100644 --- a/static/css/theme-relearn-bright.css +++ b/static/css/theme-relearn-bright.css @@ -30,6 +30,7 @@ --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in config.toml */ --MENU-HEADER-BG-color: rgba( 0, 0, 0, 0 ); /* background color of menu header */ + --MENU-HEADER-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu header and menu */ --MENU-HOME-LINK-color: rgba( 64, 64, 64, 1 ); /* home button color if configured */ --MENU-HOME-LINK-HOVER-color: rgba( 0, 0, 0, 1 ); /* hovered home button color if configured */ @@ -39,11 +40,11 @@ --MENU-SEARCH-BORDER-color: transparent; /* border color of search box */ --MENU-SECTIONS-BG-color: rgba( 131, 201, 50, 1 ); /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */ - --MENU-SECTIONS-ACTIVE-BG-color: rgba( 0, 0, 0, .05 ); /* background color of the active menu section */ + --MENU-SECTIONS-ACTIVE-BG-color: transparent; /* background color of the active menu section */ --MENU-SECTIONS-LINK-color: rgba( 50, 50, 50, 1 ); /* link color of menu topics */ --MENU-SECTIONS-LINK-HOVER-color: rgba( 255, 255, 255, 1 ); /* hovered link color of menu topics */ --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 50, 50, 50, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-HR-color: rgba( 96, 96, 96, 1 ); /* separator color of menu footer */ + --MENU-SECTION-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu sections and menu footer */ --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* text color of colored box titles */ --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* background color of colored boxes */ diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css index 6f2c2a4923..5304a0c59f 100644 --- a/static/css/theme-relearn-dark.css +++ b/static/css/theme-relearn-dark.css @@ -40,7 +40,7 @@ --MENU-SECTIONS-LINK-HOVER-color: rgba( 255, 255, 255, 1 ); /* hovered link color of menu topics */ --MENU-SECTIONS-ACTIVE-BG-color: rgba( 50, 50, 50, 1 ); /* background color of the active menu section */ --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 130, 229, 80, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-HR-color: rgba( 96, 96, 96, 1 ); /* separator color of menu footer */ + --MENU-SECTION-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu sections and menu footer */ --MENU-VISITED-color: rgba( 72, 106, 201, 1 ); /* icon color of visited menu topics if configured */ diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css index 6f36224549..dcf107d6a2 100644 --- a/static/css/theme-relearn-light.css +++ b/static/css/theme-relearn-light.css @@ -41,7 +41,7 @@ --MENU-SECTIONS-LINK-color: rgba( 186, 186, 186, 1 ); /* link color of menu topics */ --MENU-SECTIONS-LINK-HOVER-color: rgba( 255, 255, 255, 1 ); /* hovered link color of menu topics */ --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 68, 68, 68, 1 ); /* text color of the displayed menu topic */ - --MENU-SECTION-HR-color: rgba( 96, 96, 96, 1 ); /* separator color of menu footer */ + --MENU-SECTION-SEPARATOR-color: rgba( 96, 96, 96, 1 ); /* separator color between menu sections and menu footer */ --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* text color of colored box titles */ --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* background color of colored boxes */ diff --git a/static/css/theme-zen-dark.css b/static/css/theme-zen-dark.css index 91ff192844..d0de74f9b5 100644 --- a/static/css/theme-zen-dark.css +++ b/static/css/theme-zen-dark.css @@ -9,9 +9,10 @@ --PRIMARY-color: rgba( 47, 129, 235, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 47, 129, 235, 1 ); /* brand secondary color */ - --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ + --MAIN-TOPBAR-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color between topbar and content */ --MAIN-LINK-HOVER-color: rgb(112, 174, 245); /* hovered link color of content */ --MAIN-BG-color: rgba( 32, 32, 32, 1 ); /* background color of content */ + --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ --MAIN-TITLES-TEXT-color: rgba( 255, 255, 255, 1 ); /* text color of h2-h6 titles and transparent box titles */ /* adjusted to relearn-dark chroma style */ @@ -28,8 +29,12 @@ --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in config.toml */ --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in config.toml */ + --MENU-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color between menu and content */ + --MENU-TOPBAR-BORDER-color: rgba( 39, 39, 39, 1 ); /* separator color of vertical line between menu and topbar */ + --MENU-TOPBAR-SEPARATOR-color: rgba( 71, 71, 71, 1 ); /* separator color of vertical line between menu and topbar */ --MENU-HEADER-BG-color: transparent; /* background color of menu header */ - --MENU-HEADER-BORDER-color: transparent; /* separator color of menu header */ + --MENU-HEADER-BORDER-color: transparent; /* border color between menu header and menu */ + --MENU-HEADER-SEPARATOR-color: rgba( 71, 71, 71, .66 ); /* separator color between menu header and menu */ --MENU-HOME-LINK-color: rgba( 224, 224, 224, 1 ); /* home button color if configured */ --MENU-HOME-LINK-HOVER-color: rgba( 47, 129, 235, 1 ); /* hovered home button color if configured */ @@ -44,7 +49,7 @@ --MENU-SECTIONS-LINK-HOVER-color: rgba( 47, 129, 235, 1 ); /* hoverd link color of menu topics */ --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 47, 129, 235, 1 ); /* text color of the displayed menu topic */ --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 32, 32, 32, 1 ); /* background color of the displayed menu topic */ - --MENU-SECTION-HR-color: rgba( 71, 71, 71, 1 ); /* separator color of menu footer */ + --MENU-SECTION-SEPARATOR-color: rgba( 71, 71, 71, .66 ); /* separator color between menu sections and menu footer */ --BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* text color of colored box titles */ --BOX-BG-color: rgba( 20, 20, 20, 1 ); /* background color of colored boxes */ diff --git a/static/css/theme-zen-light.css b/static/css/theme-zen-light.css index 0cc87feb73..2cd29d94c3 100644 --- a/static/css/theme-zen-light.css +++ b/static/css/theme-zen-light.css @@ -9,6 +9,7 @@ --PRIMARY-color: rgba( 26, 115, 232, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 26, 115, 232, 1 ); /* brand secondary color */ + --MAIN-TOPBAR-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color between topbar and content */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hoverd link color of content */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ --MAIN-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of content and h1 titles */ @@ -28,8 +29,12 @@ --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in config.toml */ --OPENAPI-CODE-theme: idea; /* name of the default OpenAPI code theme for this variant, can be overridden in config.toml */ + --MENU-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color between menu and content */ + --MENU-TOPBAR-BORDER-color: rgba( 247, 247, 247, 1 ); /* border color of vertical line between menu and topbar */ + --MENU-TOPBAR-SEPARATOR-color: rgba( 210, 210, 210, 1 ); /* separator color of vertical line between menu and topbar */ --MENU-HEADER-BG-color: transparent; /* background color of menu header */ - --MENU-HEADER-BORDER-color: transparent; /* separator color of menu header */ + --MENU-HEADER-BORDER-color: transparent; /* border color between menu header and menu */ + --MENU-HEADER-SEPARATOR-color: rgba( 210, 210, 210, .66 ); /* separator color between menu header and menu */ --MENU-HOME-LINK-color: rgba( 64, 64, 64, 1 ); /* home button color if configured */ --MENU-HOME-LINK-HOVER-color: rgba( 26, 115, 232, 1 ); /* hoverd home button color if configured */ @@ -44,7 +49,7 @@ --MENU-SECTIONS-LINK-HOVER-color: rgba( 26, 115, 232, 1 ); /* hoverd link color of menu topics */ --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 26, 115, 232, 1 ); /* text color of the displayed menu topic */ --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* background color of the displayed menu topic */ - --MENU-SECTION-HR-color: rgba( 210, 210, 210, 1 ); /* separator color of menu footer */ + --MENU-SECTION-SEPARATOR-color: rgba( 210, 210, 210, .66 ); /* separator color between menu sections and menu footer */ --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* text color of colored box titles */ --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* background color of colored boxes */ diff --git a/static/css/theme.css b/static/css/theme.css index 3fb836393f..71c50a058f 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -7,89 +7,104 @@ need a way to calculate them ourself */ :root { --dpr: 1; --bpx: 1; + --bpx1: 1; } @media (min-resolution: 105dpi) { :root { --dpr: 1.1; --bpx: 1.1; + --bpx1: calc(1/1.1); } } @media (min-resolution: 115dpi) { :root { --dpr: 1.2; --bpx: 1.2; + --bpx1: calc(1/1.2); } } @media (min-resolution: 120dpi) { :root { --dpr: 1.25; --bpx: 1.25; + --bpx1: calc(1/1.25); } } @media (min-resolution: 128dpi) { :root { --dpr: 1.333; --bpx: 1.333; + --bpx1: calc(1/1.333); } } @media (min-resolution: 144dpi) { :root { --dpr: 1.5; --bpx: 1.5; + --bpx1: calc(1/1.5); } } @media (min-resolution: 160dpi) { :root { --dpr: 1.666; --bpx: 1.666; + --bpx1: calc(1/1.666); } } @media (min-resolution: 168dpi) { :root { --dpr: 1.75; --bpx: 1.75; + --bpx1: calc(1/1.75); } } @media (min-resolution: 192dpi) { :root { --dpr: 2; --bpx: 1; + --bpx1: 1; } } @media (min-resolution: 240dpi) { :root { --dpr: 2.5; --bpx: 1.25; + --bpx1: calc(1/1.25); } } @media (min-resolution: 288dpi) { :root { --dpr: 3; --bpx: 1; + --bpx1: 1; } } @media (min-resolution: 384dpi) { :root { --dpr: 4; --bpx: 1; + --bpx1: 1; } } @media (min-resolution: 480dpi) { :root { --dpr: 5; --bpx: 1.25; + --bpx1: calc(1/1.25); } } @media (min-resolution: 576dpi) { :root { --dpr: 6; --bpx: 1.5; + --bpx1: calc(1/1.5); } } @media (min-resolution: 768dpi) { :root { --dpr: 8; --bpx: 1; + --bpx1: 1; } } @@ -156,12 +171,15 @@ dd { } #header-wrapper { - border-bottom-style: solid; - border-bottom-width: 4px; text-align: center; padding: 1rem; position: relative; } +#header { + border-block-end: 1px solid transparent; + position: relative; + z-index: 1; +} #header a { display: inline-block; } @@ -278,10 +296,10 @@ dd { } #sidebar .footermargin { - margin-top: auto; + flex-grow: 1; } -#sidebar hr { +#content-wrapper hr { border-bottom-style: solid; border-bottom-width: 1px; margin: 1.5rem 1rem 1rem 1rem; @@ -923,11 +941,6 @@ td { top: 50%; } -#sidebar .highlightable { - padding: 1rem 0 1rem; - position: relative; -} - #topbar { min-height: 3rem; position: relative; @@ -984,9 +997,11 @@ span.nav i{ } #body #breadcrumbs { + border-inline-start-style: solid; + border-inline-start-width: 1px; float: left; height: auto; - line-height: 1.4; + line-height: 1.2; margin-bottom: 0; overflow: hidden; position: relative; @@ -1001,6 +1016,7 @@ html[dir="rtl"] #body #breadcrumbs { } @media screen and (max-width: 48rem) { #body #breadcrumbs { + border-inline-start-color: transparent; text-overflow: unset; } } @@ -1170,9 +1186,15 @@ pre > .copy-to-clipboard-button { } #homelinks { + padding: 0; +} +#homelinks ul { + margin: .5rem 0; +} +#homelinks hr { border-bottom-style: solid; - border-bottom-width: 4px; - padding: .5rem 0; + border-bottom-width: 1px; + margin: 0 1rem 3px 1rem; } option { @@ -1539,7 +1561,7 @@ html[dir="rtl"] .menu-control span { .showVariantSwitch, .showVisitedLinks, .showFooter { - display: initial; + display: block; } @media screen and (max-width: 48rem) { @@ -2031,3 +2053,47 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right { #body .tab-content-text > pre.pre-code:only-child{ border-width: 0; } + +/* bordering the menu and topbar */ + +#topbar { + border-bottom-style: solid; + border-bottom-width: 1px; +} + +#header-topbar { + border-bottom-style: solid; + border-bottom-width: 1px; + border-inline-end-style: solid; + border-inline-end-width: 1px; + height: 3rem; + position: absolute; + top: 0; + width: 100%; + z-index: 1; +} + +#header-wrapper, +#homelinks, +#content-wrapper > * { + border-inline-end-style: solid; + border-inline-end-width: 1px; +} + +#topics > ul { + margin-top: 1rem; +} + +#sidebar ul.collapsible-menu li.active > a{ + border-style: solid; + border-width: 1px; + padding-bottom: calc( .25rem - var(--bpx1)*1px); + padding-left: calc( 1rem - var(--bpx1)*1px); + padding-right: calc( 1rem - var(--bpx1)*1px); + padding-top: calc( .25rem - var(--bpx1)*1px); + width: calc(100% + var(--bpx1)*1px); +} + +#menu-footer { + padding-bottom: 1rem; +} diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css index bfc11c79ac..36f4cc0d1d 100644 --- a/static/css/variant-internal.css +++ b/static/css/variant-internal.css @@ -5,6 +5,7 @@ --INTERNAL-SECONDARY-color: var(--SECONDARY-color, var(--MAIN-LINK-color, rgba( 72, 106, 201, 1 ))); /* not --INTERNAL-MAIN-LINK-color */ --INTERNAL-ACCENT-color: var(--ACCENT-color, rgba( 255, 255, 0, 1 )); + --INTERNAL-MAIN-TOPBAR-BORDER-color: var(--MAIN-TOPBAR-BORDER-color, transparent); --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, var(--SECONDARY-color, rgba( 72, 106, 201, 1 ))); /* not --INTERNAL-SECONDARY-color */ --INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color)); --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, rgba( 255, 255, 255, 1 )); @@ -46,8 +47,12 @@ --INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color)); + --INTERNAL-MENU-BORDER-color: var(--MENU-BORDER-color, transparent); + --INTERNAL-MENU-TOPBAR-BORDER-color: var(--MENU-TOPBAR-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color)); + --INTERNAL-MENU-TOPBAR-SEPARATOR-color: var(--MENU-TOPBAR-SEPARATOR-color, transparent); --INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, var(--PRIMARY-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-PRIMARY-color */ --INTERNAL-MENU-HEADER-BORDER-color: var(--MENU-HEADER-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color)); + --INTERNAL-MENU-HEADER-SEPARATOR-color: var(--MENU-HEADER-SEPARATOR-color, var(--INTERNAL-MENU-HEADER-BORDER-color)); --INTERNAL-MENU-HOME-LINK-color: var(--MENU-HOME-LINK-color, rgba( 50, 50, 50, 1 )); --INTERNAL-MENU-HOME-LINK-HOVER-color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, rgba( 128, 128, 128, 1 ))); @@ -62,9 +67,10 @@ --INTERNAL-MENU-SECTIONS-LINK-HOVER-color: var(--MENU-SECTIONS-LINK-HOVER-color, var(--INTERNAL-MENU-SECTIONS-LINK-color)); --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, rgba( 68, 68, 68, 1 )); --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color, var(--INTERNAL-MAIN-BG-color)); + --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BORDER-color, transparent); --INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, var(--INTERNAL-SECONDARY-color)); - --INTERNAL-MENU-SECTION-HR-color: var(--MENU-SECTION-HR-color, rgba( 96, 96, 96, 1 )); + --INTERNAL-MENU-SECTION-SEPARATOR-color: var(--MENU-SECTION-SEPARATOR-color, var(--MENU-SECTION-HR-color, rgba( 96, 96, 96, 1 ))); --INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 )); --INTERNAL-BOX-BG-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 )); diff --git a/static/css/variant.css b/static/css/variant.css index a6c6a84b7b..f15986ce95 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -29,7 +29,6 @@ a:hover, #header-wrapper { background-color: var(--INTERNAL-MENU-HEADER-BG-color); - border-color: var(--INTERNAL-MENU-HEADER-BORDER-color); color: var(--INTERNAL-MENU-SEARCH-color); } @@ -88,8 +87,8 @@ a:hover, color: var(--INTERNAL-MENU-SECTIONS-LINK-color); } -#sidebar hr { - border-color: var(--INTERNAL-MENU-SECTION-HR-color); +#content-wrapper hr { + border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color); } #footer { @@ -254,6 +253,16 @@ table { background-color: var(--INTERNAL-MAIN-BG-color); } +#body #breadcrumbs { + border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color); +} +@media screen and (max-width: 48rem) { + #body #breadcrumbs { + border-inline-start-color: transparent; + } +} + + #body a[aria-disabled="true"], #searchresults .autocomplete-suggestion > .context { color: var(--INTERNAL-MAIN-TEXT-color); @@ -301,7 +310,6 @@ pre .copy-to-clipboard-button:hover { #homelinks { background-color: var(--INTERNAL-MENU-HEADER-BORDER-color); - border-color: var(--INTERNAL-MENU-HEADER-BORDER-color); } #homelinks a { @@ -312,6 +320,10 @@ pre .copy-to-clipboard-button:hover { color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color); } +#homelinks hr { + border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color); +} + .progress { background-color: var(--INTERNAL-MAIN-BG-color); } @@ -434,3 +446,25 @@ article ul > li > input[type="checkbox"] { #body .tab-panel-style.cstyle.transparent.tab-content{ background-color: var(--VARIABLE-BOX-BG-color); } + +#topbar { + border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color); +} + +#header-topbar { + border-bottom-color: transparent; + border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color); +} + +#header-wrapper, +#homelinks, +#content-wrapper > * { + border-inline-end-color: var(--INTERNAL-MENU-BORDER-color); +} + +#sidebar ul.collapsible-menu li.active > a{ + border-bottom-color: var(--INTERNAL-MENU-BORDER-color); + border-top-color: var(--INTERNAL-MENU-BORDER-color); + border-inline-start-color: var(--INTERNAL-MENU-BORDER-color); + border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color); +} diff --git a/static/js/variant.js b/static/js/variant.js index 4c3bf4ef05..d3f4d676ff 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -539,6 +539,7 @@ var variants = { { name: 'SECONDARY-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'brand secondary color', }, { name: 'ACCENT-color', group: 'content', default: '#ffff00', tooltip: 'brand accent color, used for search highlights', }, + { name: 'MAIN-TOPBAR-BORDER-color', group: 'content', default: 'transparent', tooltip: 'border color between topbar and content', }, { name: 'MAIN-LINK-color', group: 'content', fallback: 'SECONDARY-color', tooltip: 'link color of content', }, { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'hoverd link color of content', }, { name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', }, @@ -579,8 +580,12 @@ var variants = { { name: 'OPENAPI-theme', group: '3rd party', default: 'light', tooltip: 'name of the default OpenAPI theme for this variant, can be overridden in config.toml', }, { name: 'OPENAPI-CODE-theme', group: '3rd party', default: 'obsidian', tooltip: 'name of the default OpenAPI code theme for this variant, can be overridden in config.toml', }, + { name: 'MENU-BORDER-color', group: 'header', default: 'transparent', tooltip: 'border color between menu and content', }, + { name: 'MENU-TOPBAR-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color of vertical line between menu and topbar', }, + { name: 'MENU-TOPBAR-SEPARATOR-color', group: 'header', default: 'transparent', tooltip: 'separator color of vertical line between menu and topbar', }, { name: 'MENU-HEADER-BG-color', group: 'header', fallback: 'PRIMARY-color', tooltip: 'background color of menu header', }, - { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'separator color of menu header', }, + { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color between menu header and menu', }, + { name: 'MENU-HEADER-SEPARATOR-color', group: 'header', fallback: 'MENU-HEADER-BORDER-color', tooltip: 'separator color between menu header and menu', }, { name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232', tooltip: 'home button color if configured', }, { name: 'MENU-HOME-LINK-HOVER-color', group: 'header', default: '#808080', tooltip: 'hoverd home button color if configured', }, { name: 'MENU-SEARCH-color', group: 'header', default: '#e0e0e0', tooltip: 'text and icon color of search box', }, @@ -593,7 +598,8 @@ var variants = { { name: 'MENU-SECTIONS-LINK-HOVER-color', group: 'sections', fallback: 'MENU-SECTIONS-LINK-color', tooltip: 'hoverd link color of menu topics', }, { name: 'MENU-SECTION-ACTIVE-CATEGORY-color', group: 'sections', default: '#444444', tooltip: 'text color of the displayed menu topic', }, { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color', tooltip: 'background color of the displayed menu topic', }, - { name: 'MENU-SECTION-HR-color', group: 'sections', default: '#606060', tooltip: 'separator color of menu footer', }, + { name: 'MENU-SECTION-ACTIVE-CATEGORY-BORDER-color', group: 'sections', default: 'transparent', tooltip: 'border color between the displayed menu topic and the content', }, + { name: 'MENU-SECTION-SEPARATOR-color', group: 'sections', default: '#606060', tooltip: 'separator color between menu sections and menu footer', }, { name: 'MENU-VISITED-color', group: 'sections', fallback: 'SECONDARY-color', tooltip: 'icon color of visited menu topics if configured', }, { name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )', tooltip: 'text color of colored box titles', },