some style adjustments for the sidebar
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.
This commit is contained in:
Andreas Gohr
parent
6c61749bf2
commit
83e6372c7d
5 changed files with 20 additions and 347 deletions
14
css/area_main-sidebar-content.less
Normal file
14
css/area_main-sidebar-content.less
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* This file provides the design styles the non-navigational elements in the sidebar
|
||||
*/
|
||||
#dokuwiki__aside {
|
||||
|
||||
// do not indent the first level of lists in the sidebar
|
||||
ul, ol {
|
||||
padding-left: 0;
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5em; // same padding as defined in base styles
|
||||
}
|
||||
}
|
||||
}
|
||||
144
css/area_main-sidebar-nav.less
Executable file
144
css/area_main-sidebar-nav.less
Executable file
|
|
@ -0,0 +1,144 @@
|
|||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,342 +0,0 @@
|
|||
/**
|
||||
* This file provides the design styles for the sitetools (nav).
|
||||
*
|
||||
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
||||
*/
|
||||
|
||||
|
||||
.side-tools.main-sidebar {
|
||||
@icon-size: @margin-default;
|
||||
|
||||
counter-increment: bar-counter;
|
||||
|
||||
ul,
|
||||
.trace {
|
||||
padding-left: (@margin-big + .5);
|
||||
}
|
||||
|
||||
ul {
|
||||
border-bottom: 1px solid @color-border;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
|
||||
a {
|
||||
display: list-item;
|
||||
list-style-type: square;
|
||||
color: @color-nav;
|
||||
padding-top: .1em;
|
||||
padding-bottom: .1em;
|
||||
transition: @transition color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: @button_background;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: .3em;
|
||||
}
|
||||
}
|
||||
|
||||
> nav {
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 (@margin-big + .5);
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
color: @color-nav;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* + + + + + headlines for linklists + + + + + */
|
||||
h6 {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: @color-nav;
|
||||
font-weight: normal;
|
||||
padding: .7em 0 .7em (@margin-big + 1.1);
|
||||
|
||||
&[class="sr-only"] {
|
||||
border-bottom: solid 1px @color-border;
|
||||
}
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* + + + icon + + + */
|
||||
&::before {
|
||||
.display-flex();
|
||||
.flex-direction();
|
||||
.justify-content();
|
||||
|
||||
content: counter(bar-counter, lower-alpha);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: @margin-big;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
|
||||
/* + + + line bottom + + + */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
bottom: 15%;
|
||||
width: 1px;
|
||||
left: (@margin-big + .6);
|
||||
background-color: @color-border;
|
||||
transition: @transition background-color;
|
||||
}
|
||||
|
||||
+ ul,
|
||||
+ div {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* + + + toggle + + + */
|
||||
&.opened,
|
||||
&.closed {
|
||||
padding: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @fix_border-radius;
|
||||
padding: .6em 0 .6em (@margin-big + 1);
|
||||
transition: @transition color, @transition background-color, @transition border-color;
|
||||
|
||||
&::before {
|
||||
.display-flex();
|
||||
.flex-direction();
|
||||
.justify-content();
|
||||
|
||||
content: counter(bar-counter, lower-alpha);
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: @margin-big;
|
||||
overflow: hidden;
|
||||
color: @color-nav;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
transition: @transition color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
bottom: 15%;
|
||||
width: 1px;
|
||||
left: @margin-big;
|
||||
background-color: @color-border;
|
||||
transition: @transition background-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: @button_color;
|
||||
border-color: @button_background;
|
||||
color: @button_background;
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
color: @button_background;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: @button_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.opened {
|
||||
a {
|
||||
background-color: @button_background;
|
||||
color: @button_color;
|
||||
|
||||
&::before {
|
||||
background-color: @color-site-bg;
|
||||
border-radius: @fix_border-radius 0 0 @fix_border-radius;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: @button_color;
|
||||
border-color: @button_background;
|
||||
color: @button_background;
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
background-color: @button_color;
|
||||
color: @button_background;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
background-color: @button_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ ul,
|
||||
+ div {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
+ ul {
|
||||
margin-top: .5em;
|
||||
padding-bottom: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
+ ul,
|
||||
+ div {
|
||||
height: 0;
|
||||
a{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* + + + + + f.i. trace + + + + + */
|
||||
p {
|
||||
max-height: 6rem;
|
||||
overflow-y: auto;
|
||||
background-color: @color-content-bg;
|
||||
border: 1px solid @button_background;
|
||||
border-radius: @fix_border-radius;
|
||||
font-size: @font-size-small;
|
||||
margin-top: .1rem;
|
||||
padding: .3rem .6em;
|
||||
|
||||
* {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.bchead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bcsep {
|
||||
float: left;
|
||||
clear: both;
|
||||
display: block;
|
||||
width: 3%;
|
||||
vertical-align: top;
|
||||
color: @color-link;
|
||||
padding-top: .3em;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
border: 0 none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
bdi {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 94%;
|
||||
line-height: 125%;
|
||||
padding: .1rem 0;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* min-width: 1440px */
|
||||
|
||||
@media @screen_min-xlg {
|
||||
.side-tools.main-sidebar {
|
||||
h6 {
|
||||
font-size: @font-size-default;
|
||||
|
||||
* {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: @font-size-small;
|
||||
padding: .1em 0 .1em .1rem;
|
||||
|
||||
> * {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* max-width: 1439px */
|
||||
|
||||
@media @screen_max-xlg {
|
||||
.side-tools.main-sidebar {
|
||||
h6 {
|
||||
font-size: @font-size-default;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: @font-size-small;
|
||||
padding: .15em 0 .15em .23rem;
|
||||
|
||||
> * {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -71,8 +71,9 @@ css/area_nav-usertools.less = all
|
|||
css/area_sidebar-search.less = all
|
||||
css/area_nav-pagetools.less = all
|
||||
css/area_nav-metabox.less = all
|
||||
css/area_main-sidebar.less = all
|
||||
css/area_sidetools.less = all
|
||||
css/area_main-sidebar-nav.less = all
|
||||
css/area_main-sidebar-content.less = all
|
||||
;css/area_sidetools.less = all
|
||||
css/area_main-content.less = all
|
||||
css/area_togglelink.less = all
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
$crumbs = array_reverse($crumbs, true);
|
||||
foreach($crumbs as $id => $name) {
|
||||
echo '<li>';
|
||||
tpl_link(wl($id), hsc($name), 'class="breadcrumbs" title="' . $id . '"');
|
||||
tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
|
||||
echo '</li>';
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue