EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP style adjustments to match eh22 styleguide

Browse source
This commit is contained in:
kritzl 2025-02-15 03:32:26 +01:00
commit 9402a254c6
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
56 changed files with 966 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

143
css/area_main-sidebar-nav.less
View file

@ -19,6 +19,10 @@
}
nav {
display: flex;
flex-direction: column;
gap: 0.75rem;
&.nav-main {
margin-bottom: @nav-margin;
}
@ -59,6 +63,7 @@
/* + + + + + active + + + + + */
span.curid {
font-weight: bold;
}
@ -78,26 +83,32 @@
}
/* + + + the wrapper around the toggle to reserve space + + + */
div.nav {
min-height: @icon-size + @margin-small;
border: 1px solid transparent;
background-color: var(--color-background);
border-radius: 0.5rem;
// the toggle element
a {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
color: var(--color-foreground);
font-size: 1.2em;
border: solid 0.1em var(--color-shade-1);
transition-property: filter, border-color;
transition-duration: 200ms;
transition-timing-function: ease-out;
cursor: pointer;
display: table;
width: 100%;
min-height: @icon-size + @margin-small;
opacity: 1;
border: 1px solid transparent;
border-radius: @fix_border-radius;
color: @ini_nav_menu_color;
font-size: @font-size-head6;
font-weight: normal;
margin: -1px 0 @very-small-spacing;
padding-bottom: .4rem;
padding-top: .4rem;
transition: @transition color, @transition background-color, @transition border-color;
padding: 0.4rem 0.1rem;
span {
display: inline-block;
@ -105,19 +116,51 @@
color: inherit;
}
&:hover,
&:focus,
&:active {
position: relative; // always show label, even with collapsed sidebar
width: 100%;
background-color: @ini_nav_menu_hover_bg;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_color;
text-decoration: none;
/* + + + submenu entry is active + + + */
/* + + + toggle: open + + + */
&.is-active, &.is-open {
background-color: var(--color-shade-2);
border-color: var(--color-shade-4);
color: var(--color-foreground);
span.ico {
&:after {
background-color: @ini_nav_menu_hover_color;
background-color: currentColor;
}
strong {
border-color: currentColor;
}
svg {
path {
fill: currentColor;
}
}
}
}
}
&:hover,
&:focus-within {
position: relative; // always show label, even with collapsed sidebar
z-index: 100;
a {
width: 100%;
background-color: transparent;
border: solid 0.1em var(--color-white);
text-decoration: none;
color: var(--color-white);
--local-primary: var(--color-primary);
filter: @dropshadow;
transition: @neonflicker;
span.ico {
&:after {
background-color: currentColor;
}
strong {
@ -126,63 +169,12 @@
svg {
path {
fill: @ini_nav_menu_hover_color;
fill: currentColor;
}
}
}
}
/* + + + submenu entry is active + + + */
&.is-active {
font-weight: bold;
}
/* + + + toggle: open + + + */
&.is-open {
background-color: @ini_nav_menu_hover_color;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_bg;
span.ico {
&:after {
background-color: @ini_nav_menu_hover_bg;
}
strong {
border-color: @ini_nav_menu_hover_bg;
}
svg {
path {
fill: @ini_nav_menu_hover_bg;
}
}
}
&:hover,
&:focus,
&:active {
background-color: @ini_nav_menu_hover_bg;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_color;
span.ico {
&:after {
background-color: @ini_nav_menu_hover_color;
}
strong {
border-color: inherit;
}
svg {
path {
fill: @ini_nav_menu_hover_color;
}
}
}
}
}
}
span.ico {
@ -205,7 +197,7 @@
bottom: auto;
height: @border-height;
width: 1px;
background-color: @ini_nav_menu_color;
background-color: currentColor;
margin-top: -(@border-height / 2);
// wordbreak too late in IE 10
@ -222,7 +214,7 @@
display: inline-block;
width: @icon-size * 0.98;
height: @icon-size * 0.98;
border: 2px solid fade(@ini_nav_menu_color, 80%);
border: 2px solid currentColor;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
color: inherit;
@ -240,7 +232,7 @@
height: @icon-size;
path {
fill: @ini_nav_menu_color;
fill: currentColor;
transition: @transition all;
}
}
@ -254,6 +246,7 @@
}
/* + + + + + the panel (hidden by default) + + + + + */
div.nav-panel {
display: none;
margin-top: .5rem;
@ -328,7 +321,7 @@
min-width: 45%;
max-width: 90%;
height: auto;
background: @ini_background_site;
background: var(--color-background);
> nav {
position: relative;