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 '
  • '; } ?>