diff --git a/css/area_main-content.less b/css/area_main-content.less new file mode 100644 index 0000000..d5d984f --- /dev/null +++ b/css/area_main-content.less @@ -0,0 +1,69 @@ +/** + * This file provides the design styles for the main-content. + * + * @author Jana Deutschlaender + */ + + +#dokuwiki__content.main-content { + img { + display: inline-block; + } + +/* + + + source block + + + */ + .code { + margin-top: @grid; + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + #dokuwiki__content.main-content { + p, a, + li, dl, + td, th, + label, + button { + font-size: .88rem; + line-height: 140%; + + * { + font-size: inherit; + line-height: inherit; + } + } + + .code { + font-size: .75rem; + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1199px */ + +@media @screen_max-xlg { + #dokuwiki__content.main-content { + p, a, + li, dl, + td, th, + label, + button { + font-size: 1rem; + line-height: 140%; + + * { + font-size: inherit; + line-height: inherit; + } + } + + .code { + font-size: .94rem; + } + } +} diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less index 675e595..87370ae 100644 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -7,10 +7,10 @@ #dokuwiki__aside.main-sidebar { counter-reset: nav-counter; + /* + + + + + nav main + + + + + */ .nav-main { > ul { - @icon-size: 2rem; margin: 0; @@ -21,6 +21,7 @@ } li { + list-style-type: none; color: @color-nav; &:first-of-type { @@ -29,29 +30,49 @@ } .li { - color: @color-nav; - a { - color: inherit; + display: list-item; + list-style-type: square; + color: @color-nav; + padding-top: .1rem; + padding-bottom: .1rem; + transition: @transition color; + + &:hover, + &:focus, + &:active { + color: @button_color; + } } } /* + + + first level + + + */ > li { + position: relative; list-style-type: none; - border-bottom: solid 1px @color-border; margin: 0; padding: 0 0 .3rem 0; counter-increment: nav-counter; - > .li { //background-color: pink;// hier activ !!! + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + display: block; + width: 100%; + height: 1px; + background-color: @color-border; + } + + > .li { position: relative; + z-index: 1; + margin-top: -1px; padding: .5rem 0 .5rem (@icon-size + 1); &::before { - //background-color: @color-link; - color: @color-nav; content: counter(nav-counter); position: absolute; top: 0; @@ -65,6 +86,7 @@ height: 100%; width: @icon-size; overflow: hidden; + color: @color-nav; text-align: center; margin-top: auto; margin-bottom: auto; @@ -78,23 +100,27 @@ width: 1px; left: (@icon-size + .5); background-color: @color-border; - transition: @transition background-color; } - &.opened, &.closed{ + &.opened, + &.closed { padding: 0; - &::before, &::after{ + + &::before, + &::after { display: none; } - a{ - display: block; + + a { position: relative; - padding: .5rem 0 .8rem (@icon-size + 1); - margin-bottom: -.3rem; + display: block; border: 1px solid transparent; + border-radius: 2px; + margin-bottom: -.3rem; + padding: .6rem 0 .7rem (@icon-size + 1); + transition: @transition color, @transition background-color, @transition border-color; + &::before { - //background-color: @color-link; - color: @color-nav; content: counter(nav-counter); position: absolute; top: -.1rem; @@ -108,9 +134,11 @@ height: 100%; width: @icon-size; overflow: hidden; + color: @color-nav; text-align: center; margin-top: auto; margin-bottom: auto; + transition: @transition color; } &::after { @@ -123,46 +151,59 @@ background-color: @color-border; transition: @transition background-color; } - &:hover, &:focus, &:active{ - text-decoration: none; - background-color: #fff; - border-color: @color-link; - color: @color-link; - } - } - } - - &.opened{ - a{ - background-color: @color-link; - color: #fff; - &::after, &::before{ - color: #fff; - border-color: #fff; - } - &:hover, &:focus, &:active{ + &:hover, + &:focus, + &:active { + background-color: @button_background; + border-color: @button_color; + color: @button_color; text-decoration: none; - background-color: #fff; - border-color: @color-link; - color: @color-link; - &::after, &::before{ - color: inherit; - border-color: inherit; + + &::before { + color: @button_color; + } + + &::after { + background-color: @button_color; } } } } - + ul{ + + &.opened { + a { + background-color: @button_color; + color: @button_background; + + &::before { + color: @button_background; + } + + &:hover, + &:focus, + &:active { + background-color: @button_background; + border-color: @button_color; + color: @button_color; + text-decoration: none; + + &::before { + color: @button_color; + } + } + } + } + + + ul { height: auto; overflow: hidden; } - &.closed + ul{ - height: 0; - } + + &.closed + ul { + height: 0; + } } - - } } } diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 4fc30ab..38b861e 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -160,6 +160,8 @@ } } -.mode_admin{ + +/* + + + + + ? + + + + + */ +.mode_admin { } diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 74a38ec..0d1b134 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -90,17 +90,9 @@ } .prefix { - .btn-prefix (); + .btn-prefix(); .icon-clipboard(); } - - &.opentasks, - &.opentask { - .num { - background-color: @color-link; - color: #fff; - } - } } // user-task } // li @@ -118,10 +110,10 @@ &:hover, &:active, &:focus { - border-color: @color-nav-hover; + border-color: @button_color; //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); - color: @color-nav-hover; + color: @button_color; } &::before { diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less index f48f501..ff96456 100755 --- a/css/area_sidebar-search.less +++ b/css/area_sidebar-search.less @@ -46,11 +46,11 @@ &:hover, &:focus, &:active { - border: solid 1px @color-link; - color: @color-link; + border: solid 1px @button_color; + color: @button_color; &::after { - background-color: @color-link; + background-color: @button_color; } } diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 1c69786..348a927 100644 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -50,16 +50,28 @@ } } + /* + + + linklist + + + */ ul { padding-left: (@icon-size + .5); } li { - color: @color-nav; + list-style-type: none; a { - color: inherit; + display: list-item; + list-style-type: square; + color: @color-nav; + padding-top: .1rem; + padding-bottom: .1rem; + transition: @transition color; + + &:hover, + &:focus, + &:active { + color: @button_color; + } } &:first-of-type { diff --git a/css/base.less b/css/base.less index 8aa4e35..fb60e2d 100755 --- a/css/base.less +++ b/css/base.less @@ -45,6 +45,8 @@ @margin-default: 1.5rem; @margin-big: 2.5rem; +@grid: @margin-small; + @transition: ease-out .30s; diff --git a/css/base_mixins.less b/css/base_mixins.less index 715abb1..9f75f95 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -160,15 +160,15 @@ .btn-usertools-num () { .num { position: absolute; - right: -.4em; + right: -.5em; top: -.4em; background-color: @button_color; border-radius: 2px; - color: #fff; + color: @button_background; font-size: .6rem; font-weight: 400; text-align: center; - line-height: 100%; + line-height: 1; padding: .2em .3em .1em; transition: @transition color, @transition background-color; } @@ -189,8 +189,8 @@ .fontello(); .hide-text-show-before(); - color: @color-nav; - font-size: 1rem; + color: inherit; + font-size: 1.3em; margin-top: .2rem; } diff --git a/css/plugins/struct.less b/css/plugins/struct.less new file mode 100644 index 0000000..eec790a --- /dev/null +++ b/css/plugins/struct.less @@ -0,0 +1,24 @@ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* all media */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +#dokuwiki__content { + .structaggregation { + @link-height: 1.5rem; + + position: relative; + padding-bottom: @link-height; + margin-bottom: @grid; + + .table { + margin-bottom: 0; + } + + > a { + position: absolute; + bottom: 0; + height: @link-height; + margin-bottom: 0; + } + } +} diff --git a/style.ini b/style.ini index 9cd8c89..03c3a06 100755 --- a/style.ini +++ b/style.ini @@ -71,12 +71,14 @@ css/area_sidebar-search.less = all css/area_nav-pagetools.less = all css/area_main-sidebar.less = all css/area_sidetools.less = all +css/area_main-content.less = all ; _____________ plugin styles _____________ css/plugins/magic-matcher.less = all css/plugins/do_tasks.less = all +css/plugins/struct.less = all ; _____________ print styles _____________