mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
theme: support for colored borders between menu and content #626
This commit is contained in:
Sören Weber
parent
5d0a1cff61
commit
ed1715d467
17 changed files with 307 additions and 114 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
{{- end }}
|
||||
<aside id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}">
|
||||
{{- $currentNode := . }}
|
||||
<div id="header-topbar" class="default-animation"></div>
|
||||
<div id="header-wrapper" class="default-animation">
|
||||
<div id="header" class="default-animation">
|
||||
{{ partial "logo.html" . }}
|
||||
|
|
@ -16,18 +17,20 @@
|
|||
{{ partial "search.html" . }}
|
||||
{{- end }}
|
||||
</div>
|
||||
<div id="homelinks" class="default-animation{{ if not .Site.Params.disableLandingPageButton }} homelinks{{ end }}">
|
||||
{{- if not .Site.Params.disableLandingPageButton }}
|
||||
{{- if (ne .Site.Params.landingPageURL nil) }}
|
||||
{{- warnf "%q: UNSUPPORTED usage of 'landingPageURL' config parameter found, remove it and optionally overwrite the `logo.html` partial to provide a link if it should not point to the project's home page; see https://mcshelby.github.io/hugo-theme-relearn/basics/migration/#420" .File.Path }}
|
||||
{{- end }}
|
||||
<div id="homelinks" class="default-animation">
|
||||
<ul>
|
||||
<li><a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .Site.Home) }}">{{ .Site.Params.landingPageName | default `<i class="fas fa-home"></i> Home` | safeHTML }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{- end }}
|
||||
<hr class="padding">
|
||||
</div>
|
||||
<div id="content-wrapper" class="highlightable">
|
||||
<ul class="topics enlarge morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
|
||||
<div id="topics">
|
||||
<ul class="enlarge morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
|
||||
{{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
|
||||
{{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
|
||||
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default false }}
|
||||
|
|
@ -41,6 +44,7 @@
|
|||
{{- end }}
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{- $page := . }}
|
||||
{{- $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
|
||||
{{- with .Site.Menus.shortcuts }}
|
||||
|
|
@ -66,6 +70,7 @@
|
|||
{{- $footer := partial "menu-footer.html" . }}
|
||||
{{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }}
|
||||
<div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div>
|
||||
<div id="menu-footer">
|
||||
<hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
|
||||
<div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
|
||||
<ul>
|
||||
|
|
@ -135,6 +140,7 @@
|
|||
{{- $footer }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{{- define "section-tree-nav" }}
|
||||
{{- $currentNode := .currentnode }}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <hr> separator in menu */
|
||||
--MENU-SECTION-SEPARATOR-color: rgba( 32, 39, 43, 1 ); /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
|
||||
|
|
|
|||
|
|
@ -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 <hr> separator in menu */
|
||||
--MENU-SECTION-SEPARATOR-color: rgba( 24, 33, 28, 1 ); /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
|
||||
|
|
|
|||
|
|
@ -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 <hr> separator in menu */
|
||||
--MENU-SECTION-SEPARATOR-color: rgba( 42, 35, 47, 1 ); /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <hr> separator in menu */
|
||||
--MENU-SECTION-SEPARATOR-color: rgba( 43, 32, 32, 1 ); /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ));
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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', },
|
||||
|
|
|
|||
Loading…
Reference in a new issue