From 83e6372c7d3f6cbe45ad2361c0dfc93169455296 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Thu, 16 Feb 2017 15:10:50 +0100 Subject: [PATCH] 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. --- css/area_main-sidebar-content.less | 14 + ...idebar.less => area_main-sidebar-nav.less} | 4 +- css/area_sidetools.less | 342 ------------------ style.ini | 5 +- tpl/main-sidebar-nav.php | 2 +- 5 files changed, 20 insertions(+), 347 deletions(-) create mode 100644 css/area_main-sidebar-content.less rename css/{area_main-sidebar.less => area_main-sidebar-nav.less} (96%) delete mode 100755 css/area_sidetools.less diff --git a/css/area_main-sidebar-content.less b/css/area_main-sidebar-content.less new file mode 100644 index 0000000..60f6e1b --- /dev/null +++ b/css/area_main-sidebar-content.less @@ -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 + } + } +} diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar-nav.less similarity index 96% rename from css/area_main-sidebar.less rename to css/area_main-sidebar-nav.less index 107f76a..8bc479e 100755 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar-nav.less @@ -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 + * @author Andreas Gohr */ - #dokuwiki__aside { @icon-size: @font-size-big; @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong diff --git a/css/area_sidetools.less b/css/area_sidetools.less deleted file mode 100755 index 7d005da..0000000 --- a/css/area_sidetools.less +++ /dev/null @@ -1,342 +0,0 @@ -/** - * This file provides the design styles for the sitetools (nav). - * - * @author Jana Deutschlaender - */ - - -.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; - } - } -} diff --git a/style.ini b/style.ini index 6785b2e..2e9d166 100755 --- a/style.ini +++ b/style.ini @@ -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 diff --git a/tpl/main-sidebar-nav.php b/tpl/main-sidebar-nav.php index 81a985c..71597ea 100644 --- a/tpl/main-sidebar-nav.php +++ b/tpl/main-sidebar-nav.php @@ -61,7 +61,7 @@ $crumbs = array_reverse($crumbs, true); foreach($crumbs as $id => $name) { echo '
  • '; - tpl_link(wl($id), hsc($name), 'class="breadcrumbs" title="' . $id . '"'); + tpl_link(wl($id), hsc($name), 'title="' . $id . '"'); echo '
    • '; } ?>