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

14
css/base_mixins.less
View file

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