From bdad3fbdc30db126e9dc1f5bf3d8e6f7afb8a6ac Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 4 Jan 2017 10:36:44 +0100 Subject: [PATCH 1/4] icon-buttons font-size + padding --- css/area_nav-breadcrumb.less | 39 +++++++++++++++++++----------------- css/area_nav-usertools.less | 35 ++++++++++++++++---------------- css/base_mixins.less | 4 ++++ css/plugins/do_tasks.less | 10 ++++----- 4 files changed, 48 insertions(+), 40 deletions(-) diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 4970a5a..25c626d 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -53,6 +53,8 @@ } } + +/* + + + + + icon list + + + + + */ .page-attributes { float: right; display: inline-block; @@ -67,6 +69,17 @@ float: left; + .prefix { + .fontello(); + .hide-text-show-before(); + .icon-clipboard(); + + color: @color-nav; + font-size: 1.3em; + margin-top: .2rem; + } + +/* check !!! */ &.do_none { &:not([class*="plugin__qc"]) { background-color: @color-site-bg; @@ -77,27 +90,12 @@ color: @color-nav; } } +/* end check !!! */ &.plugin__qc { display: inline-block; overflow: visible; } - - .prefix { - .fontello(); - .hide-text-show-before(); - - height: auto; - width: 100%; - color: @color-nav; - text-align: center; - transition: @transition color; - - &::before { - width: 100%; - margin: .35em 0 0; - } - } } // li a { @@ -143,13 +141,18 @@ } #plugin__qc__link { - font-size: .8rem; position: relative; .prefix { .icon-emo-happy(); - font-size: inherit; + width: 100%; + font-size: .9rem; + + &::before { + width: 100%; + margin: .1em 0 0; + } } } } diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 558eecd..92e1c3c 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -11,6 +11,8 @@ padding-top: .5rem; } + +/* + + + + + icon list + + + + + */ ul { float: right; padding: 0; @@ -21,11 +23,6 @@ .btn-usertools-num(); float: right; - font-size: .8rem; - - * { - font-size: .8rem; - } > strong, > a { @@ -67,9 +64,8 @@ border: 4px solid @color-nav; border-radius: 50%; color: #fff; - font-size: .5rem; - margin-top: -1px; - margin-right: 6px; + font-size: .6rem; + margin: -2px 6px -2px 0; } } } // user @@ -84,7 +80,7 @@ text-indent: 0; &::before { - content: ""; + content: ''; position: absolute; } } @@ -95,7 +91,8 @@ .icon-clipboard(); color: @color-nav; - margin-top: .3rem; + font-size: 1.3em; + margin-top: .2rem; } &.opentasks, @@ -108,6 +105,8 @@ } // user-task } // li + +/* + + + icons + + + */ a { .fontello(); .hide-text-show-before(); @@ -131,9 +130,9 @@ display: block; width: 100%; box-sizing: border-box; - font-size: 1.12em; + font-size: 1.4em; cursor: pointer; - margin: .3rem 0; + margin: .2rem 0 0; } /* icon register new user */ @@ -154,9 +153,11 @@ /* icon admin */ &.admin { .icon-cog(); - } - /* add more icons if needed */ - } - } -} + &::before { + margin-top: .18rem; + } + } + } // a + } // ul +} // nav-usertools diff --git a/css/base_mixins.less b/css/base_mixins.less index 07077b3..6558f8e 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -151,6 +151,10 @@ font-size: .8rem; padding: 0; margin: 0 .2rem 0 .1rem; + + * { + font-size: .8rem; + } } .btn-usertools-num () { diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index ec76a59..79a5e17 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -13,11 +13,12 @@ ul.page-attributes { .hide-text-show-before(); .icon-clipboard(); - font-size: .8rem; - min-height: @icon-size; - min-width: @icon-size; color: @color-nav; - transition: @transition color; + display: block; + width: 100%; + box-sizing: border-box; + font-size: 1.3em; + margin: .2rem 0 0; } &.do_none { @@ -27,7 +28,6 @@ ul.page-attributes { box-sizing: border-box; border: 1px solid @color-border; border-radius: @border-radius; - padding: 0 .2em; } } } From 9008d561d88761eec1bc4ec73d91db221576c692 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 4 Jan 2017 10:38:40 +0100 Subject: [PATCH 2/4] jiralinks in content --- css/plugins/magic-matcher.less | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index e7ad9a1..b0e0741 100755 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -32,6 +32,27 @@ } } +/* + + + + + in content + + + + + */ +a.jiralink { + font-size: @font-size-default; + + img { + float: left; + display: inline-block; + margin-top: 2px; + margin-right: 3px; + } + + span.mm__status { + display: inline-block; + font-size: @font-size-default; + margin-left: 5px; + padding: 1px 4px; + } +} + + +/* + + + + + no js version + + + + + */ .no-js { #dokuwiki_magic-matcher { display: none; From 51068a28805bd078934f207d6181cfd619bc0ed8 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 4 Jan 2017 12:52:57 +0100 Subject: [PATCH 3/4] css aside prepared --- css/area_main-sidebar.less | 121 +++++++++++++++++++++++++++++++++++++ css/area_sidetools.less | 109 +++++++++++++++++++++++++++++++++ style.ini | 2 + 3 files changed, 232 insertions(+) create mode 100644 css/area_main-sidebar.less create mode 100644 css/area_sidetools.less diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less new file mode 100644 index 0000000..f661324 --- /dev/null +++ b/css/area_main-sidebar.less @@ -0,0 +1,121 @@ +/** + * This file provides the design styles for the sidebar (navmain). + * + * @author Jana Deutschlaender + */ + + +#dokuwiki__aside.main-sidebar { + +/* + + + + + nav main + + + + + */ + .nav-main { + > ul { + @icon-size: 2rem; + + margin: 0; + padding: 0; + + ul { + margin-left: (@icon-size + .5); + } + + li { + color: @color-nav; + + &:first-of-type { + padding-top: .3rem; + } + } + + .li { + color: @color-nav; + + a { + color: inherit; + } + } + + +/* + + + first level + + + */ + > li { + list-style-type: none; + border-bottom: solid 1px @color-border; + margin: 0; + padding: 0 0 .3rem 0; + + > .li { //background-color: pink;// hier activ !!! + position: relative; + padding: .5rem 0 .5rem (@icon-size + 1); + + &::before { background-color: gold;// test + content: '?'; + position: absolute; + top: 0; + left: 0; + display: flex; + display: -webkit-flex; + flex-direction: column; + -webkit-flex-direction: column; + justify-content: center; + -webkit-justify-content: center; + height: 100%; + width: @icon-size; + overflow: hidden; + text-align: center; + margin-top: auto; + margin-bottom: auto; + } + + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: (@icon-size + .5); + background-color: @color-border; + transition: @transition background-color; + } + } + } + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + #dokuwiki__aside.main-sidebar { + .nav-main { + .li { + font-size: .88rem; + padding: .1rem 0; + + > * { + font-size: .88rem; + } + } + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1199px */ + +@media @screen_max-xlg { + #dokuwiki__aside.main-sidebar { + .nav-main { + .li { + font-size: 1rem; + padding: .15rem .25rem; + + > * { + font-size: 1rem; + } + } + } + } +} diff --git a/css/area_sidetools.less b/css/area_sidetools.less new file mode 100644 index 0000000..657c333 --- /dev/null +++ b/css/area_sidetools.less @@ -0,0 +1,109 @@ +/** + * This file provides the design styles for the sitetools (nav). + * + * @author Jana Deutschlaender + */ + + +#dokuwiki__sitetools.nav-sitetools { + @icon-size: 2rem; + + h6 { //background-color: pink;// hier activ !!! + position: relative; + width: auto; + height: auto; + color: @color-nav; + font-size: .88rem; + font-weight: normal; + margin: 0; + padding: .5rem 0 .5rem (@icon-size + 1); + + &::before { + background-color: gold; + content: '?'; + position: absolute; + top: 0; + left: 0; + display: flex; + display: -webkit-flex; + flex-direction: column; + -webkit-flex-direction: column; + justify-content: center; + -webkit-justify-content: center; + height: 100%; + width: @icon-size; + overflow: hidden; + text-align: center; + margin-top: auto; + margin-bottom: auto; + } + + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: (@icon-size + .5); + background-color: @color-border; + transition: @transition background-color; + } + } + +/* + + + linklist + + + */ + ul { + padding-left: (@icon-size + .5); + } + + li { + color: @color-nav; + + a { + color: inherit; + } + + &:first-of-type { + padding-top: .3rem; + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + #dokuwiki__sitetools.nav-sitetools { + li { + font-size: 100%; + padding-top: .1rem; + padding-bottom: .1rem; + + > * { + font-size: .88rem; + } + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1199px */ + +@media @screen_max-xlg { + #dokuwiki__sitetools.nav-sitetools { + h6 { + font-size: 1rem; + } + + li { + font-size: 1rem; + padding-top: .15rem; + padding-bottom: .15rem; + + > * { + font-size: 1rem; + } + } + } +} diff --git a/style.ini b/style.ini index 1a54be5..64ea103 100755 --- a/style.ini +++ b/style.ini @@ -69,6 +69,8 @@ css/area_nav-breadcrumb.less = all css/area_nav-usertools.less = all css/area_sidebar-search.less = all css/area_nav-pagetools.less = all +css/area_main-sidebar.less = all +css/area_sidetools.less = all ; _____________ plugin styles _____________ From fb408e5e994873b1f0c18338dada95703ab63cb4 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 4 Jan 2017 13:21:37 +0100 Subject: [PATCH 4/4] uniform styles for icon-buttons (+ mixin for prefix added) --- css/area_nav-breadcrumb.less | 32 +++++++++++++++++--------------- css/area_nav-usertools.less | 11 +++++------ css/base_mixins.less | 9 +++++++++ css/plugins/do_tasks.less | 26 +------------------------- 4 files changed, 32 insertions(+), 46 deletions(-) diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index a47faa1..4fc30ab 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -69,19 +69,28 @@ float: left; - .prefix { - .fontello(); - .hide-text-show-before(); - .icon-clipboard(); - + > strong, + > a { + display: block; + width: auto; + min-height: 2em; + border: 1px solid @color-border; + border-radius: @border-radius; color: @color-nav; - font-size: 1.3em; - margin-top: .2rem; + text-align: center; + margin: 0; + } + + .prefix { + .btn-prefix (); + .icon-clipboard(); } /* check !!! */ &.do_none { - &:not([class*="plugin__qc"]) { + position: relative; + + strong { background-color: @color-site-bg; } @@ -99,13 +108,6 @@ } // li a { - display: block; - width: auto; - min-height: 2em; - margin: 0; - border: 1px solid @color-border; - border-radius: @border-radius; - color: @color-nav; transition: @transition color, @transition border-color; &[aria-expanded="false"] + #plugin__qc__wrapper { diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 92e1c3c..74a38ec 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -37,6 +37,10 @@ } &.noopentasks { + strong { + background-color: @color-site-bg; + } + .num { background-color: @color-border; color: @color-nav; @@ -86,13 +90,8 @@ } .prefix { - .fontello(); - .hide-text-show-before(); + .btn-prefix (); .icon-clipboard(); - - color: @color-nav; - font-size: 1.3em; - margin-top: .2rem; } &.opentasks, diff --git a/css/base_mixins.less b/css/base_mixins.less index 6558f8e..aac2b6b 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -185,6 +185,15 @@ } } +.btn-prefix () { + .fontello(); + .hide-text-show-before(); + + color: @color-nav; + font-size: 1rem; + margin-top: .2rem; +} + .btn-default-size() { height: 1rem; diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index 79a5e17..989fe7b 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -4,30 +4,6 @@ ul.page-attributes { .plugin__do_pagetasks { - @icon-size: 2em; - - .btn-usertools-num (); - - .prefix { - .fontello(); - .hide-text-show-before(); - .icon-clipboard(); - - color: @color-nav; - display: block; - width: 100%; - box-sizing: border-box; - font-size: 1.3em; - margin: .2rem 0 0; - } - - &.do_none { - position: relative; - height: 1rem; - width: 1rem; - box-sizing: border-box; - border: 1px solid @color-border; - border-radius: @border-radius; - } + &.do_none { } } }