nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

theme: support for colored borders between menu and content #626

Browse source
This commit is contained in:
Sören Weber 2023-08-25 03:14:09 +02:00
parent 5d0a1cff61
commit ed1715d467
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
17 changed files with 307 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
exampleSite/content/basics/migration/_index.en.md
View file

@ -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}

156
layouts/partials/menu.html
View file

@ -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,31 +17,34 @@
{{ 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 }}">
{{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
{{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default false }}
{{- if eq $currentOrdersectionsby "title" }}
{{- range .Site.Home.Pages.ByTitle }}
{{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
<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 }}
{{- if eq $currentOrdersectionsby "title" }}
{{- range .Site.Home.Pages.ByTitle }}
{{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
{{- end }}
{{- else }}
{{- range .Site.Home.Pages.ByWeight }}
{{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
{{- end }}
{{- end }}
{{- else }}
{{- range .Site.Home.Pages.ByWeight }}
{{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
{{- end }}
{{- end }}
</ul>
</ul>
</div>
{{- $page := . }}
{{- $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
{{- with .Site.Menus.shortcuts }}
@ -66,73 +70,75 @@
{{- $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>
<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>
<li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
<div class="padding menu-control">
<i class="fas fa-language fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="select-language">{{ T "Language" }}</label>
<select id="select-language" onchange="location = baseUri + this.value;">
{{- $page := .Page }}
{{- $pageLang := .Page.Lang }}
{{- range .Page.AllTranslations }}
{{- $translation := . }}
{{- range $siteLanguages }}
{{- if eq $translation.Lang .Lang }}
{{- if eq $pageLang .Lang }}
<option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}" selected>{{ .LanguageName }}</option>
{{- else }}
<option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}">{{ .LanguageName }}</option>
<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>
<li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
<div class="padding menu-control">
<i class="fas fa-language fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="select-language">{{ T "Language" }}</label>
<select id="select-language" onchange="location = baseUri + this.value;">
{{- $page := .Page }}
{{- $pageLang := .Page.Lang }}
{{- range .Page.AllTranslations }}
{{- $translation := . }}
{{- range $siteLanguages }}
{{- if eq $translation.Lang .Lang }}
{{- if eq $pageLang .Lang }}
<option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}" selected>{{ .LanguageName }}</option>
{{- else }}
<option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}">{{ .LanguageName }}</option>
{{- end }}
{{- end }}
{{- end }}
{{- end }}
{{- end }}
</select>
</select>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</li>
<li id="select-variant-container" class="footerVariantSwitch{{if $showvariantswitch}} showVariantSwitch{{end}}">
<div class="padding menu-control">
<i class="fas fa-paint-brush fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="select-variant">{{ T "Theme" }}</label>
<select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
{{- $firstvariant := true }}
{{- range $themevariants }}
{{- $themevariant := . }}
{{- $variantname := replaceRE "[-_]+" " " $themevariant }}
{{- if $firstvariant }}
{{- $firstvariant = false }}
<option id="{{ $themevariant }}" value="{{ $themevariant }}" selected>{{ $variantname | title }}</option>
{{- else }}
<option id="{{ $themevariant }}" value="{{ $themevariant }}">{{ $variantname | title }}</option>
</li>
<li id="select-variant-container" class="footerVariantSwitch{{if $showvariantswitch}} showVariantSwitch{{end}}">
<div class="padding menu-control">
<i class="fas fa-paint-brush fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="select-variant">{{ T "Theme" }}</label>
<select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
{{- $firstvariant := true }}
{{- range $themevariants }}
{{- $themevariant := . }}
{{- $variantname := replaceRE "[-_]+" " " $themevariant }}
{{- if $firstvariant }}
{{- $firstvariant = false }}
<option id="{{ $themevariant }}" value="{{ $themevariant }}" selected>{{ $variantname | title }}</option>
{{- else }}
<option id="{{ $themevariant }}" value="{{ $themevariant }}">{{ $variantname | title }}</option>
{{- end }}
{{- end }}
{{- end }}
</select>
</select>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script>window.variants && variants.markSelectedVariant();</script>
</li>
<li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
<div class="padding menu-control">
<i class="fas fa-history fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<button onclick="clearHistory();">{{ T "Clear-History" }}</button>
<script>window.variants && variants.markSelectedVariant();</script>
</li>
<li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
<div class="padding menu-control">
<i class="fas fa-history fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<button onclick="clearHistory();">{{ T "Clear-History" }}</button>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div id="footer" class="footerFooter{{if $showfooter}} showFooter{{end}}">
{{- $footer }}
</li>
</ul>
</div>
<div id="footer" class="footerFooter{{if $showfooter}} showFooter{{end}}">
{{- $footer }}
</div>
</div>
</div>
</aside>

64
static/css/ie.css
View file

@ -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 */

2
static/css/theme-blue.css
View file

@ -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 */

2
static/css/theme-green.css
View file

@ -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 */

2
static/css/theme-learn.css
View file

@ -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 */

2
static/css/theme-neon.css
View file

@ -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 */

2
static/css/theme-red.css
View file

@ -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 */

5
static/css/theme-relearn-bright.css
View file

@ -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 */

2
static/css/theme-relearn-dark.css
View file

@ -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 */

2
static/css/theme-relearn-light.css
View file

@ -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 */

11
static/css/theme-zen-dark.css
View file

@ -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
static/css/theme-zen-light.css
View file

@ -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 */

92
static/css/theme.css
View file

@ -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;
}

8
static/css/variant-internal.css
View file

@ -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 ));

42
static/css/variant.css
View file

@ -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);
}

10
static/js/variant.js
View file

@ -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', },