mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
menu: rebuild collapsible expander #466
because sizing and positioning was a mess; the follwing things are fixed with this: - resizes and positions correctly according to html elements font-size - IE11 compatiblity is now given - a11y: expander is now correctly given a focus outline - chevron is now coded into html instead of a css content value, which makes it easier to change (was an issue in the past) - the visited checkmark now breaks correctly on long lines and hides behind the text if necessary - some more css classes were introduced to make further extensions (eg. nested shortcut links) easier
This commit is contained in:
Sören Weber
parent
cbe565db22
commit
c0a1c9cbcb
8 changed files with 192 additions and 193 deletions
|
|
@ -20,6 +20,8 @@ This document shows you what's new in the latest release. For a detailed list of
|
||||||
|
|
||||||
## 5.12.0 (not yet released)
|
## 5.12.0 (not yet released)
|
||||||
|
|
||||||
|
- {{% badge style="note" title=" " %}}Change{{% /badge %}} In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed (again). While Internet Explorer 11 has issues in displaying it, the functionality still works.
|
||||||
|
|
||||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for the great [VSCode Front Matter extension](https://github.com/estruyf/vscode-front-matter) which provides on-premise CMS capabilties to Hugo.
|
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for the great [VSCode Front Matter extension](https://github.com/estruyf/vscode-front-matter) which provides on-premise CMS capabilties to Hugo.
|
||||||
|
|
||||||
The theme provides Front Matter snippets for its shortcodes. Currently only English and German is supported. Put a reference into your `frontmatter.json` like this
|
The theme provides Front Matter snippets for its shortcodes. Currently only English and German is supported. Put a reference into your `frontmatter.json` like this
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<div id="content-wrapper" class="highlightable">
|
<div id="content-wrapper" class="highlightable">
|
||||||
<ul class="topics{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
|
<ul class="topics enlarge morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
|
||||||
{{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
|
{{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
|
||||||
{{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
|
{{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
|
||||||
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default false }}
|
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default false }}
|
||||||
|
|
@ -42,15 +42,15 @@
|
||||||
{{- $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
|
{{- $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
|
||||||
{{- with .Site.Menus.shortcuts }}
|
{{- with .Site.Menus.shortcuts }}
|
||||||
<div id="shortcuts">
|
<div id="shortcuts">
|
||||||
<div class="nav-title">{{ if not $disableShortcutsTitle }}{{ T "Shortcuts-Title" }}{{ end }}</div>
|
<div class="nav-title padding">{{ if not $disableShortcutsTitle }}{{ T "Shortcuts-Title" }}{{ end }}</div>
|
||||||
<ul>
|
<ul class="space">
|
||||||
{{- range sort . "Weight" }}
|
{{- range sort . "Weight" }}
|
||||||
{{- $shortcut := . }}
|
{{- $shortcut := . }}
|
||||||
{{- with $page.Site.GetPage (printf "%s" $shortcut.URL ) }}
|
{{- with $page.Site.GetPage (printf "%s" $shortcut.URL ) }}
|
||||||
{{- $to := . }}
|
{{- $to := . }}
|
||||||
<li>{{ $shortcut.Pre }}<a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $to) }}">{{ safeHTML $shortcut.Name }}</a>{{ $shortcut.Post }}</li>
|
<li>{{ $shortcut.Pre }}<a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $to) }}">{{ safeHTML $shortcut.Name }}</a>{{ $shortcut.Post }}</li>
|
||||||
{{- else }}
|
{{- else }}
|
||||||
<li>{{ $shortcut.Pre }}<a class="padding" href="{{ $shortcut.URL | relLangURL }}">{{ safeHTML $shortcut.Name }}</a>{{ $shortcut.Post }}</li>
|
<li>{{ $shortcut.Pre }}<a class="padding"href="{{ $shortcut.URL | relLangURL }}">{{ safeHTML $shortcut.Name }}</a>{{ $shortcut.Post }}</li>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -62,8 +62,8 @@
|
||||||
{{- $showvariantswitch := gt (int (len $themevariants)) 1 }}
|
{{- $showvariantswitch := gt (int (len $themevariants)) 1 }}
|
||||||
{{- $footer := partial "menu-footer.html" . }}
|
{{- $footer := partial "menu-footer.html" . }}
|
||||||
{{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }}
|
{{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }}
|
||||||
<div class="footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div>
|
<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="default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
|
<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}}">
|
<div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
|
||||||
<ul>
|
<ul>
|
||||||
<li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
|
<li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
|
||||||
|
|
@ -153,9 +153,9 @@
|
||||||
{{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
|
{{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
|
||||||
{{- $pageHash := md5 .Page }}
|
{{- $pageHash := md5 .Page }}
|
||||||
{{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
|
{{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
|
||||||
<li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="dd-item{{if $isActive }} active{{end}}{{if (or $isSelf $isAncestor) }} parent{{end}}{{if $currentAlwaysopen}} alwaysopen{{end}}">{{ if .Site.Params.collapsibleMenu }}<input type="checkbox" id="section-{{ $pageHash }}" aria-controls="subsections-{{ $pageHash }}" class="toggle"{{ if $isOpen }} checked{{ end }}><label class="a11y-only toggle" for="section-{{ $pageHash }}" >{{ T "Submenu" ( or .Params.menuTitle .LinkTitle .Title ) }}</label>{{ end }}<a href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
|
<li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="{{if $isActive }}active {{end}}{{if (or $isSelf $isAncestor) }}parent {{end}}{{if $currentAlwaysopen}}alwaysopen{{end}}">{{ if .Site.Params.collapsibleMenu }}<input type="checkbox" id="section-{{ $pageHash }}" aria-controls="subsections-{{ $pageHash }}"{{ if $isOpen }} checked{{ end }}><label for="section-{{ $pageHash }}"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">{{ T "Submenu" ( or .Params.menuTitle .LinkTitle .Title ) }}</span></label>{{ end }}<a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
|
||||||
{{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
|
{{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
|
||||||
{{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul id="subsections-{{ $pageHash }}">
|
{{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul id="subsections-{{ $pageHash }}" class="morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
|
||||||
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }}
|
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }}
|
||||||
{{- if eq $currentOrdersectionsby "title" }}
|
{{- if eq $currentOrdersectionsby "title" }}
|
||||||
{{- range $pages.ByTitle }}
|
{{- range $pages.ByTitle }}
|
||||||
|
|
@ -167,7 +167,7 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- end }}</ul></li>
|
{{- end }}</ul></li>
|
||||||
{{- else }}
|
{{- else }}
|
||||||
<li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="dd-item{{if $isActive }} active{{end}}"><a href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
|
<li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="{{if $isActive }}active{{end}}"><a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
|
||||||
{{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
|
{{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
|
||||||
{{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a></li>
|
{{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a></li>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
|
||||||
|
|
@ -31,14 +31,8 @@
|
||||||
#sidebar ul li.visited + span {
|
#sidebar ul li.visited + span {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
#sidebar ul li li {
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
#sidebar ul li .read-icon {
|
#sidebar ul li .read-icon {
|
||||||
text-align: right;
|
right: 1rem;
|
||||||
}
|
|
||||||
html[dir="rtl"] #sidebar ul li .read-icon {
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
#sidebar .nav-title {
|
#sidebar .nav-title {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
|
|
@ -165,15 +159,6 @@
|
||||||
.footerVisitedLinks > * {
|
.footerVisitedLinks > * {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
#sidebar ul.collapsible-menu input.toggle {
|
|
||||||
left: 1rem;
|
|
||||||
}
|
|
||||||
#sidebar .collapsible-menu input.toggle:before {
|
|
||||||
margin-left: -1rem;
|
|
||||||
}
|
|
||||||
html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
|
|
||||||
content: "\f054";
|
|
||||||
}
|
|
||||||
.searchform input {
|
.searchform input {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -206,6 +191,17 @@
|
||||||
.autocomplete-suggestion > .context {
|
.autocomplete-suggestion > .context {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
}
|
}
|
||||||
|
/* menu */
|
||||||
|
#sidebar ul ul {
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
#sidebar ul.collapsible-menu > li > label {
|
||||||
|
left: 0;
|
||||||
|
padding-left: .125rem;
|
||||||
|
}
|
||||||
|
html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
/* ----------------------------------------------- */
|
/* ----------------------------------------------- */
|
||||||
/* set default colors as in variant.css for IE11 */
|
/* set default colors as in variant.css for IE11 */
|
||||||
|
|
@ -264,7 +260,7 @@
|
||||||
opacity: .666;
|
opacity: .666;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar .collapsible-menu .toggle,
|
#sidebar .collapsible-menu label,
|
||||||
#sidebar .select-container,
|
#sidebar .select-container,
|
||||||
#sidebar a,
|
#sidebar a,
|
||||||
#sidebar button {
|
#sidebar button {
|
||||||
|
|
@ -272,28 +268,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar select:hover,
|
#sidebar select:hover,
|
||||||
#sidebar .collapsible-menu .toggle:hover,
|
#sidebar .collapsible-menu label:hover,
|
||||||
#sidebar .select-container:hover,
|
#sidebar .select-container:hover,
|
||||||
#sidebar a:hover,
|
#sidebar a:hover,
|
||||||
#sidebar button:hover {
|
#sidebar button:hover {
|
||||||
color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
|
color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul.topics > li.parent,
|
#sidebar ul.enlarge > li.parent,
|
||||||
#sidebar ul.topics > li.active {
|
#sidebar ul.enlarge > li.active {
|
||||||
background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
|
background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul.collapsible-menu li.active > .toggle,
|
#sidebar li.active > label,
|
||||||
#sidebar ul.topics li.active > a {
|
#sidebar li.active > a {
|
||||||
color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
|
color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul.topics li.active > a {
|
#sidebar li.active > a {
|
||||||
background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
|
background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li.visited > a .read-icon {
|
#sidebar ul li > a .read-icon {
|
||||||
color: #486ac9; /* var(--MENU-VISITED-color) */
|
color: #486ac9; /* var(--MENU-VISITED-color) */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -108,7 +108,8 @@ textarea {
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
|
|
||||||
button {
|
button {
|
||||||
overflow: visible; }
|
overflow: visible;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
button,
|
button,
|
||||||
select {
|
select {
|
||||||
|
|
|
||||||
|
|
@ -172,17 +172,6 @@ body h6 {
|
||||||
0 0 10px var(--INTERNAL-MAIN-TITLES-H5-color);
|
0 0 10px var(--INTERNAL-MAIN-TITLES-H5-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
body #sidebar ul.collapsible-menu li.active > .toggle,
|
|
||||||
body #sidebar ul.topics li.active > a {
|
|
||||||
color: #fff;
|
|
||||||
text-shadow:
|
|
||||||
0 0 1px #fff,
|
|
||||||
0 0 2px #fff,
|
|
||||||
0 0 8px #808080,
|
|
||||||
0 0 4px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color),
|
|
||||||
0 0 8px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
body #sidebar .searchbox button:hover,
|
body #sidebar .searchbox button:hover,
|
||||||
body .searchbox span:hover {
|
body .searchbox span:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -195,7 +184,7 @@ body .searchbox span:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body #sidebar select:hover,
|
body #sidebar select:hover,
|
||||||
body #sidebar .collapsible-menu .toggle:hover,
|
body #sidebar .collapsible-menu label:hover,
|
||||||
body #sidebar .select-container:hover,
|
body #sidebar .select-container:hover,
|
||||||
body #sidebar a:hover,
|
body #sidebar a:hover,
|
||||||
body #sidebar button:hover {
|
body #sidebar button:hover {
|
||||||
|
|
@ -208,6 +197,17 @@ body #sidebar button:hover {
|
||||||
0 0 8px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
|
0 0 8px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body #sidebar li.active > label,
|
||||||
|
body #sidebar li.active > a {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow:
|
||||||
|
0 0 1px #fff,
|
||||||
|
0 0 2px #fff,
|
||||||
|
0 0 8px #808080,
|
||||||
|
0 0 4px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color),
|
||||||
|
0 0 8px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
|
||||||
|
}
|
||||||
|
|
||||||
body #homelinks a:hover {
|
body #homelinks a:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-shadow:
|
text-shadow:
|
||||||
|
|
|
||||||
|
|
@ -149,60 +149,6 @@ dd {
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul.topics {
|
|
||||||
margin: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics li {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics > li > ul > li:last-child {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics ul ul {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics li.parent > ul,
|
|
||||||
#sidebar ul.topics li.active > ul,
|
|
||||||
#sidebar ul.topics li.alwaysopen > ul {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.collapsible-menu > li > .toggle,
|
|
||||||
#sidebar ul.topics > li > a {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
line-height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics > li > a b {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics > li > a .fa {
|
|
||||||
margin-top: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics > li {
|
|
||||||
margin-left: -1rem;
|
|
||||||
margin-right: -1rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics li > a {
|
|
||||||
margin-left: -1rem;
|
|
||||||
margin-right: -1rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul {
|
#sidebar ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -217,47 +163,14 @@ dd {
|
||||||
margin-inline-end: 1rem;
|
margin-inline-end: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li a,
|
|
||||||
#sidebar ul li button {
|
|
||||||
display: block;
|
|
||||||
padding: .125rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul li a span {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul li > a,
|
|
||||||
#sidebar ul li > button {
|
|
||||||
padding: .25rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul li li {
|
|
||||||
padding-inline-start: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.topics > li > a .read-icon {
|
|
||||||
margin-top: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar #shortcuts li {
|
|
||||||
list-style: none;
|
|
||||||
padding: .125rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul li .read-icon {
|
#sidebar ul li .read-icon {
|
||||||
display: none;
|
display: none;
|
||||||
float: right;
|
|
||||||
font-size: .8125rem;
|
font-size: .8125rem;
|
||||||
|
inset-inline-end: 1rem;
|
||||||
margin: .25rem 0 0 0;
|
margin: .25rem 0 0 0;
|
||||||
min-width: 1rem;
|
min-width: 1rem;
|
||||||
text-align: start;
|
position: absolute;
|
||||||
}
|
z-index: -1;
|
||||||
html[dir="rtl"] #sidebar ul li .read-icon {
|
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul li.visited > a .read-icon {
|
#sidebar ul li.visited > a .read-icon {
|
||||||
|
|
@ -1507,50 +1420,6 @@ input[type="search"]::-webkit-search-cancel-button,
|
||||||
input[type="search"]::-webkit-search-results-button,
|
input[type="search"]::-webkit-search-results-button,
|
||||||
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||||
|
|
||||||
#sidebar ul.collapsible-menu input.toggle {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 2rem;
|
|
||||||
inset-inline-start: 1rem;
|
|
||||||
padding-top: .35rem;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar ul.collapsible-menu > li > input.toggle {
|
|
||||||
padding-top: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar .collapsible-menu input.toggle:before {
|
|
||||||
content: "\f054";
|
|
||||||
font-family: "Font Awesome 5 Free";
|
|
||||||
font-size: .8rem;
|
|
||||||
font-weight: 900;
|
|
||||||
margin-inline-start: -1rem;
|
|
||||||
padding-bottom: .65rem;
|
|
||||||
padding-left: .2rem;
|
|
||||||
padding-right: .2rem;
|
|
||||||
padding-top: .6rem;
|
|
||||||
}
|
|
||||||
html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
|
|
||||||
content: "\f053";
|
|
||||||
}
|
|
||||||
|
|
||||||
html[dir] #sidebar .collapsible-menu input.toggle:checked:before {
|
|
||||||
content: "\f078";
|
|
||||||
padding-left: .1rem;
|
|
||||||
padding-right: .1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar .collapsible-menu input.toggle + label.toggle + a + ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar .collapsible-menu input.toggle:checked + label.toggle + a + ul {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.math.align-left > mjx-container{
|
.math.align-left > mjx-container{
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
|
@ -1781,3 +1650,134 @@ article ul li input[type="checkbox"]:checked::before {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: min(2vh, 2vw);
|
padding: min(2vh, 2vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* basic menu list styles (non-collapsible) */
|
||||||
|
|
||||||
|
#sidebar ul > li > a {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.space > li > * {
|
||||||
|
padding-bottom: .125rem;
|
||||||
|
padding-top: .125rem;
|
||||||
|
}
|
||||||
|
#sidebar ul.space > li > ul {
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.morespace > li > * {
|
||||||
|
padding-bottom: .25rem;
|
||||||
|
padding-top: .25rem;
|
||||||
|
}
|
||||||
|
#sidebar ul.morespace > li > ul {
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.enlarge > li > a {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
#sidebar ul.enlarge > li > a > .read-icon {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
#sidebar ul.enlarge > li > ul > li:last-child {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul ul {
|
||||||
|
padding-inline-start: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* collapsible menu style overrides */
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > input {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-top: .65rem;
|
||||||
|
position: absolute;
|
||||||
|
width: 1rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
#sidebar ul.collapsible-menu.enlarge > li > input {
|
||||||
|
margin-top: .9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > label {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
margin-bottom: 0; /* nucleus */
|
||||||
|
padding-inline-start: .125rem;
|
||||||
|
position: absolute;
|
||||||
|
width: 1rem;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
#sidebar ul.collapsible-menu.enlarge > li > label {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > label:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
transition: width 0.5s ease;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > label:hover:after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > label > .fas {
|
||||||
|
font-size: .8rem;
|
||||||
|
width: .6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* closed menu */
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > input + label ~ ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > input + label > .fa-chevron-down {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#sidebar ul.collapsible-menu > li > input + label > .fa-chevron-right {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* open menu */
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > input:checked + label ~ ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-down {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-right {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* adjust menu for RTL reading direction */
|
||||||
|
|
||||||
|
html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -150,7 +150,7 @@ a:hover,
|
||||||
color: var(--INTERNAL-MENU-SEARCH-color);
|
color: var(--INTERNAL-MENU-SEARCH-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar .collapsible-menu .toggle,
|
#sidebar .collapsible-menu label,
|
||||||
#sidebar .select-container,
|
#sidebar .select-container,
|
||||||
#sidebar a,
|
#sidebar a,
|
||||||
#sidebar button {
|
#sidebar button {
|
||||||
|
|
@ -158,24 +158,24 @@ a:hover,
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar select:hover,
|
#sidebar select:hover,
|
||||||
#sidebar .collapsible-menu .toggle:hover,
|
#sidebar .collapsible-menu label:hover,
|
||||||
#sidebar .select-container:hover,
|
#sidebar .select-container:hover,
|
||||||
#sidebar a:hover,
|
#sidebar a:hover,
|
||||||
#sidebar button:hover {
|
#sidebar button:hover {
|
||||||
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
|
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul.topics > li.parent,
|
#sidebar ul.enlarge > li.parent,
|
||||||
#sidebar ul.topics > li.active {
|
#sidebar ul.enlarge > li.active {
|
||||||
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
|
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul.collapsible-menu li.active > .toggle,
|
#sidebar li.active > label,
|
||||||
#sidebar ul.topics li.active > a {
|
#sidebar li.active > a {
|
||||||
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
|
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar ul.topics li.active > a {
|
#sidebar li.active > a {
|
||||||
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
|
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -550,7 +550,7 @@ function initMenuScrollbar(){
|
||||||
});
|
});
|
||||||
// now that we may have collapsible menus, we need to call a resize
|
// now that we may have collapsible menus, we need to call a resize
|
||||||
// for the menu scrollbar if sections are expanded/collapsed
|
// for the menu scrollbar if sections are expanded/collapsed
|
||||||
document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){
|
document.querySelectorAll('#sidebar .collapsible-menu input').forEach( function(e){
|
||||||
e.addEventListener('change', function(){
|
e.addEventListener('change', function(){
|
||||||
psm && setTimeout( function(){ psm.update(); }, 10 );
|
psm && setTimeout( function(){ psm.update(); }, 10 );
|
||||||
});
|
});
|
||||||
|
|
@ -828,7 +828,7 @@ function initScrollPositionSaver(){
|
||||||
function scrollToPositions() {
|
function scrollToPositions() {
|
||||||
// show active menu entry
|
// show active menu entry
|
||||||
window.setTimeout( function(){
|
window.setTimeout( function(){
|
||||||
var e = document.querySelector( '#sidebar ul.topics li.active a' );
|
var e = document.querySelector( '#sidebar li.active a' );
|
||||||
if( e && e.scrollIntoView ){
|
if( e && e.scrollIntoView ){
|
||||||
e.scrollIntoView({
|
e.scrollIntoView({
|
||||||
block: 'center',
|
block: 'center',
|
||||||
|
|
@ -910,8 +910,8 @@ function mark() {
|
||||||
expandInputs[0].checked = true;
|
expandInputs[0].checked = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if( parent.tagName.toLowerCase() === 'li' ){
|
if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){
|
||||||
var toggleInputs = parent.querySelectorAll( 'input.toggle:not(.menu-marked)' );
|
var toggleInputs = parent.querySelectorAll( 'input:not(.menu-marked)' );
|
||||||
if( toggleInputs.length ){
|
if( toggleInputs.length ){
|
||||||
toggleInputs[0].classList.add( 'menu-marked' );
|
toggleInputs[0].classList.add( 'menu-marked' );
|
||||||
toggleInputs[0].dataset.checked = toggleInputs[0].checked ? 'true' : 'false';
|
toggleInputs[0].dataset.checked = toggleInputs[0].checked ? 'true' : 'false';
|
||||||
|
|
@ -987,8 +987,8 @@ function unmark() {
|
||||||
for( var i = 0; i < markedElements.length; i++ ){
|
for( var i = 0; i < markedElements.length; i++ ){
|
||||||
var parent = markedElements[i].parentNode;
|
var parent = markedElements[i].parentNode;
|
||||||
while( parent && parent.classList ){
|
while( parent && parent.classList ){
|
||||||
if( parent.tagName.toLowerCase() === 'li' ){
|
if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){
|
||||||
var toggleInputs = parent.querySelectorAll( 'input.toggle.menu-marked' );
|
var toggleInputs = parent.querySelectorAll( 'input.menu-marked' );
|
||||||
if( toggleInputs.length ){
|
if( toggleInputs.length ){
|
||||||
toggleInputs[0].checked = toggleInputs[0].dataset.checked === 'true';
|
toggleInputs[0].checked = toggleInputs[0].dataset.checked === 'true';
|
||||||
toggleInputs[0].dataset.checked = null;
|
toggleInputs[0].dataset.checked = null;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue