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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
/**
|
||||
* This file provides the design styles for the sidebar (navmain).
|
||||
* 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
|
||||
|
|
@ -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…
Add table
Add a link
Reference in a new issue