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

Fix nav-bar item styling

Browse source
This commit is contained in:
traumweh 2025-04-05 12:13:21 +02:00
commit 3146dd8025
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
2 changed files with 47 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

84
css/area_nav-usertools.less
View file

@ -76,23 +76,14 @@
&.user {
position: relative;
display: table-cell;
background-color: var(--color-background);
border: solid 1px @wikiicons-border;
background-color: var(--color-shade-1);
border: solid 1px var(--color-shade-2);
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
color: @ini_text_webframe;
color: var(--color-foreground);
padding-right: .3rem;
@media @screen_min-md {
padding-top: .35rem;
}
@media @screen_max-md {
min-height: @toggle-size;
padding-top: .3rem;
}
@media @screen_max-sm {
padding-top: .35rem;
}
@media @screen_max-xs {
@ -102,14 +93,12 @@
overflow: hidden;
white-space: nowrap;
margin: -1px 0 0;
padding-top: .4rem;
}
@media @screen_max-xxs {
left: -10px;
right: 0;
width: auto;
padding-top: .35rem;
}
> a {
@ -119,9 +108,9 @@
position: relative;
height: 1rem; // for IE11
overflow: visible;
background: @ini_nav_menu_hover_bg; // for removing bg-image
background: var(--color-shade-1); // for removing bg-image
border: 0 none;
color: @ini_nav_menu_hover_color;
color: var(--color-foreground);
text-indent: 0;
font-size: inherit;
margin-right: -.3rem;
@ -158,7 +147,7 @@
right: -1px;
width: auto;
opacity: 0;
border: solid 1px @ini_nav_menu_hover_color;
border: solid 1px var(--color-shade-2);
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
color: inherit;
transform: none;
@ -167,12 +156,15 @@
&:hover,
&:focus,
&:active {
background-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_bg;
background-color: transparent;
color: var(--color-glow-secondary);
filter: var(--filter-glow-secondary);
transition: var(--transition-glow);
&::before {
opacity: 1;
border-color: @ini_nav_menu_hover_color;
filter: var(--filter-glow-secondary);
border-color: var(--color-glow-secondary);
}
bdi,
@ -197,22 +189,10 @@
&::before {
position: absolute;
top: 2px;
left: -2px;
font-size: 1.4rem;
font-size: @font-size-default + (@font-scale-factor * 4);
margin: 0;
@media @screen_min-xxlg {
top: -.25rem;
}
@media @screen_max-xxlg {
top: -.2rem;
}
@media @screen_max-xs {
top: -.25rem;
}
}
}
} // user
@ -222,16 +202,29 @@
.menuitem, button {
padding: 2px 0 0 2px;
min-height: @toggle-size; // overrides button[type="submit"] styles
border: solid 1px @wikiicons-border; // overrides button[type="submit"] styles
background-color: var(--color-shade-1);
color: var(--color-foreground);
border: solid 1px var(--color-shade-2); // overrides button[type="submit"] styles
.btn-hover();
&:hover svg, &:focus svg {
&:hover,
&:active,
&:focus {
background-color: transparent;
border-color: var(--color-glow-secondary);
color: var(--color-glow-secondary);
filter: var(--filter-glow-secondary);
}
&:hover svg,
&:active svg,
&:focus svg {
transition: @transition fill;
fill: @ini_nav_menu_hover_bg;
fill: var(--color-glow-secondary);
}
svg {
fill: @ini_nav_menu_hover_color;
fill: var(--color-shade-1);
height: @font-size-default + (@font-scale-factor * 4);
}
@ -245,6 +238,7 @@
.hide-text-show-before();
.btn-hover();
background-color: var(--color-shade-1);
cursor: pointer;
position: relative;
line-height: 1;
@ -311,8 +305,8 @@
&:before {
transition: @transition background-color;
background-color: var(--color-background);
color: @ini_nav_menu_color;
background-color: var(--color-shade-1);
color: var(--color-foreground);
text-indent: 0;
}
}
@ -323,18 +317,18 @@
bdi {
&:before {
background-color: @ini_nav_menu_hover_bg;
color: @ini_nav_menu_hover_color;
background-color: var(--color-shade-1);
color: var(--color-foreground);
}
}
&:hover {
color: @ini_nav_menu_hover_color;
color: var(--color-glow-secondary);
bdi {
&:before {
background-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_bg;
background-color: transparent;
color: var(--color-glow-secondary);
}
}
}

14
css/base_mixins.less
View file

@ -136,16 +136,18 @@
/* + + + + + small icon-buttons (breadcrumb, page-header) + + + + + */
.btn-hover {
background-color: @ini_nav_menu_hover_bg;
color: @ini_nav_menu_hover_color;
transition: @transition color, @transition background-color, @transition border-color;
background-color: var(--color-shade-1);
border-color: var(--color-shade-2);
color: var(--color-foreground);
transition: var(--transition-glow);
&:hover,
&:active,
&:focus {
background-color: @ini_nav_menu_hover_color;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_bg;
background-color: transparent;
border-color: var(--color-glow-secondary);
color: var(--color-glow-secondary);
filter: var(--filter-glow-secondary);
.prefix {
color: inherit;