9fd3d99b8f
Now the SVGs are loaded via AJAX and are directly embedded into the HTML. This allows for styling them via CSS and we can apply proper hover styles. The svg dispatcher was extended with an embed option (boolean parameter 'e') which will return an absolute minimum svg with absolutely no styles.
118 lines
3 KiB
Text
Executable file
118 lines
3 KiB
Text
Executable file
/**
|
|
* This file provides the design styles for the sidebar (navmain).
|
|
*
|
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
|
*/
|
|
|
|
#dokuwiki__aside.main-sidebar {
|
|
.nav-main {
|
|
@icon-size: @font-size-big;
|
|
@menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
|
|
|
|
margin-left: @menu-margin; // moves *all* sidebar content to the right
|
|
|
|
.navi-toggle {
|
|
cursor: pointer;
|
|
|
|
height: @line-height-big;
|
|
line-height: @line-height-big;
|
|
font-weight: normal;
|
|
margin-left: (@menu-margin * -1); // moves the toggles back to the left
|
|
|
|
color: @color-nav;
|
|
border: 1px solid transparent;
|
|
border-radius: @fix_border-radius;
|
|
// margin-bottom: -.3rem; FIXME
|
|
// padding: .7em 0 .7em (@margin-big + 1); FIXME WTF?
|
|
transition: @transition color, @transition background-color, @transition border-color;
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: @menu-margin;
|
|
height: @line-height-big;
|
|
border-right: 1px solid @color-border;
|
|
text-align: center;
|
|
margin-right: @margin-small;
|
|
color: @color-nav;
|
|
|
|
svg {
|
|
width: @icon-size;
|
|
height: @icon-size;
|
|
path {
|
|
fill: @color-nav;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: @button_color;
|
|
border-color: @button_background;
|
|
color: @button_background;
|
|
text-decoration: none;
|
|
|
|
span svg path {
|
|
fill: @button_background;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// FIXME check if the stuff below is still relevant
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* min-width: 1440px */
|
|
|
|
@media @screen_min-xlg {
|
|
#dokuwiki__aside.main-sidebar {
|
|
.nav-main {
|
|
.li {
|
|
font-size: @font-size-default;
|
|
padding: .1em 0;
|
|
|
|
* {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
}
|
|
|
|
> ul > li > .li {
|
|
font-size: @font-size-default;
|
|
|
|
* {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* max-width: 1199px */
|
|
|
|
@media @screen_max-xlg {
|
|
#dokuwiki__aside.main-sidebar {
|
|
.nav-main {
|
|
.li {
|
|
font-size: @font-size-default;
|
|
padding: .15em 0 .15em .25rem;
|
|
|
|
* {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
}
|
|
|
|
> ul > li > .li {
|
|
font-size: @font-size-default;
|
|
|
|
> * {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|