83e6372c7d
There is no need to differentiate between site tools and the navigation anymore. Instead now it's differentiated between the navigation tools and the displayed content.
144 lines
3.7 KiB
Text
Executable file
144 lines
3.7 KiB
Text
Executable file
/**
|
|
* This file provides the design styles the navigational elements in the sidebar
|
|
*
|
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
|
* @author Andreas Gohr <gohr@cosmocode.de>
|
|
*/
|
|
#dokuwiki__aside {
|
|
@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
|
|
|
|
// the toggle element
|
|
h6 {
|
|
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;
|
|
|
|
// simple fake icon
|
|
strong {
|
|
display: inline-block;
|
|
font-size: @icon-size * 0.5;
|
|
width: @icon-size * 0.9;
|
|
height: @icon-size * 0.9;
|
|
line-height: @icon-size * 0.9;
|
|
margin: @icon-size * 0.05;
|
|
vertical-align: baseline;
|
|
text-align: center;
|
|
color: @color-nav;
|
|
border: 2px solid @color-nav;
|
|
border-top-right-radius: 50%;
|
|
border-bottom-left-radius: 50%;
|
|
|
|
}
|
|
|
|
// real icon
|
|
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 strong {
|
|
color: @button_background;
|
|
border-color: @button_background;
|
|
}
|
|
|
|
span svg path {
|
|
fill: @button_background;
|
|
}
|
|
}
|
|
}
|
|
|
|
// the panel (hidden by default)
|
|
div.nav-panel {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|