From 569e12b7cf5a36b82908778213ef20edebcde971 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 11:40:12 +0100 Subject: [PATCH 01/13] code cleaning --- css/area_content.less | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/css/area_content.less b/css/area_content.less index 4c1b87b..ad90afc 100755 --- a/css/area_content.less +++ b/css/area_content.less @@ -5,11 +5,8 @@ */ -.content .row > .col-xs-12{ - box-shadow: __box_shadow__; +.content .row { + > .col-xs-12 { + box-shadow: @box-shadow; + } } - - - - - From a9c24a5f58759d6a321e60f92ac003314a84d471 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 11:40:39 +0100 Subject: [PATCH 02/13] page-footer, main-footer --- css/area_footer.less | 18 ++++++++++++------ main.php | 22 ++++++++++++++++++---- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/css/area_footer.less b/css/area_footer.less index 1fe8498..9edb4c2 100755 --- a/css/area_footer.less +++ b/css/area_footer.less @@ -9,6 +9,17 @@ /* no print */ @media screen { + .page-footer { + background: @background_page-header; + border-top: 1px solid @color-border; + font-size: @font-size-default; + padding: @margin-small (@margin-big - .5); + + bdi { + font-weight: bold; + } + } + #dokuwiki__footer { .main-footer { position: relative; @@ -17,10 +28,7 @@ p { font-size: @font-size-default; - } - - bdi { - font-weight: bold; + margin: 0; } } } @@ -31,7 +39,6 @@ @media @screen_min-md { #dokuwiki__footer { - .col-xs-12 { float: right; width: 73%; @@ -49,7 +56,6 @@ @media @screen_max-md { #dokuwiki__footer { - .main-footer { padding: @margin-default (@margin-big - .5); } diff --git a/main.php b/main.php index 5294469..1c40205 100755 --- a/main.php +++ b/main.php @@ -321,13 +321,27 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show'); + +
+ +
+ - - + @@ -350,9 +364,9 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show'); /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* 'Last modified' etc */ +/* copyright */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - tpl_pageinfo() + echo "var - fixme"; ?>

From 9638f4f044dd2c982e3b50da880a3c5dd5cb7450 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 11:41:28 +0100 Subject: [PATCH 03/13] code cleaning --- css/base_structure.less | 93 +++++++++++++++++++++++------------------ 1 file changed, 52 insertions(+), 41 deletions(-) diff --git a/css/base_structure.less b/css/base_structure.less index 5849a64..2816ed0 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -5,128 +5,139 @@ */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Col Grid */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .make-grid(xs); -@media screen{ - .container{ +@media screen { + .container { margin: 0 @margin-big; } } @media @screen_min-xxs { - .container{ + .container { //border: 1px solid deeppink; } } @media @screen_min-xs { - .container{ + .container { //border: 1px solid orangered; } } @media @screen_min-sm { - .container{ + .container { //border: 1px solid green; } + .make-grid(sm); } @media @screen_min-md { - .container{ + .container { //border: 1px solid blue; } + .make-grid(md); } @media @screen_min-lg { - .container{ + .container { //border: 1px solid blue; } + .make-grid(lg); } @media @screen_min-xlg { - html{ + html { font-size: 120%; } - .container{ + + .container { //border: 1px solid red; } } @media @screen_min-xxlg { - html{ + html { //font-size: 135%; } - .container{ + + .container { //border: 1px solid red; } } - - @media @screen_min-md { // z-indeces - .nav-direct p{ + .nav-direct p { z-index: 1000; } - .top-header{ + + .top-header { z-index: 900; } - .tools .row > .col-xs-12{ + + .tools .row > .col-xs-12 { z-index: 1; } - .header .row > .col-xs-12{ + + .header .row > .col-xs-12 { z-index: 2; } - .content .row > .col-xs-12{ + + .content .row > .col-xs-12 { z-index: 3; } - .top-header{ + .top-header { position: absolute; top: 0; left: 0; width: 100%; } - .header, .tools{ - .row{ + .header, .tools { + .row { position: relative; - > .col-xs-12{ + > .col-xs-12 { width: 23%; box-sizing: border-box; } } } - .header{ - .row > .col-xs-12{ + .header { + .row > .col-xs-12 { position: relative; height: 150px; min-height: 6rem; } } - .tools{ - .row > .col-xs-12{ + .tools { + .row > .col-xs-12 { position: absolute; background: pink; } } - .content{ - .row > .col-xs-12{ + .content { + .row > .col-xs-12 { width: 100%; background-color: #fff; } } - .showSidebar{ - .content{ - .row > .col-xs-12{ + + .showSidebar { + .content { + .row > .col-xs-12 { width: 73%; position: relative; float: right; @@ -134,37 +145,37 @@ } } - .claim{ - .logo{ + .claim { + .logo { position: absolute; bottom: 1em; overflow: visible; } - .logo img{ + .logo img { height: 60px; width: auto; } } - .showSidebar{ - .claim{ - .logo{ + .showSidebar { + .claim { + .logo { position: absolute; bottom: 0; height: 1px; overflow: visible; } - .logo img{ + .logo img { max-width: 100%; height: auto; } } } - .main-sidebar{ - &.search{ - > img{ + .main-sidebar { + &.search { + > img { width: 100%; height: auto; } From 522fc138e1da23a5763dc94e8b0b67256f476501 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 11:42:09 +0100 Subject: [PATCH 04/13] link-hover added --- css/base.less | 34 +++++++++++++++++++--------------- lang/de/lang.php | 6 ++++-- lang/en/lang.php | 2 ++ style.ini | 5 ++++- 4 files changed, 29 insertions(+), 18 deletions(-) diff --git a/css/base.less b/css/base.less index c7df3a4..5494a9c 100755 --- a/css/base.less +++ b/css/base.less @@ -9,28 +9,36 @@ /* converted vars */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@height-context-bar: 50px; +@background_page-header: __background_page-header__; -@border-radius: __default_border_radius__; +@border-radius: __default_border_radius__; -@font_family_screen: __font_family_screen__; +@font_family_screen: __font_family_screen__; -@color-border: __border__; -@color-nav: __nav_menu_color__; -@color-nav-hover: __nav_menu_hover_color__; -@color-nav-hover-bg: __nav_menu_hover_bg__; +@color-text: __text__; +@color-border: __border__; +@color-nav: __nav_menu_color__; +@color-nav-hover: __nav_menu_hover_color__; +@color-nav-hover-bg: __nav_menu_hover_bg__; -@color-content-bg: __background_content__; -@color-site-bg: __background_site__; +@color-content-bg: __background_content__; +@color-site-bg: __background_site__; -@color-link: __existing__; +@color-link: __existing__; +@color-link-hover: @color-nav; + +@box-shadow-offset: __box_shadow_offset__; +@box-shadow: __box_shadow__; +@box-shadow-colored: __box_shadow_colored__; /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* global vars */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@margin-small: .5rem; +@height-context-bar: 50px; + +@margin-small: 1rem; @margin-default: 1.5rem; @margin-big: 2.5rem; @@ -120,10 +128,6 @@ @grid-columns: 12; -@box-shadow-offset: __box_shadow_offset__; -@box-shadow: __box_shadow__; -@box-shadow-colored:__box_shadow_colored__; - /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* all media */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ diff --git a/lang/de/lang.php b/lang/de/lang.php index 6adf305..ca6d504 100755 --- a/lang/de/lang.php +++ b/lang/de/lang.php @@ -29,8 +29,10 @@ $lang['tasks_page_none'] = 'keine offenen Aufgaben für diese Seite'; $lang['discussion'] = 'Diskussion'; $lang['back_to_article'] = 'Zurück zum Artikel'; $lang['userpage'] = 'Benutzer-Seite'; -$lang['__existing__'] = 'The color for links to existing pages'; -$lang['__missing__'] = 'The color for links to non-existing pages'; +$lang['__existing__'] = 'Schriftfarbe für Links zu vorhandenen Webseiten'; +$lang['__existing-hover__'] = 'Hoverfarbe für Links zu vorhandenen Webseiten'; +$lang['__missing__'] = 'Schriftfarbe für Links zu nicht vorhandenen Webseiten'; +$lang['__missing-hover__'] = 'Hoverfarbe für Links zu nicht vorhandenen Webseiten'; $lang['__site_width__'] = 'The width of the full site (can be any length unit: %, px, em, ...)'; $lang['__sidebar_width__'] = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)'; diff --git a/lang/en/lang.php b/lang/en/lang.php index 4442633..e257b33 100755 --- a/lang/en/lang.php +++ b/lang/en/lang.php @@ -30,6 +30,8 @@ $lang['discussion'] = 'Discussion'; $lang['back_to_article'] = 'Back to article'; $lang['userpage'] = 'User page'; $lang['__existing__'] = 'The color for links to existing pages'; +$lang['__existing-hover__'] = 'The hover-color for links to existing pages'; $lang['__missing__'] = 'The color for links to non-existing pages'; +$lang['__missing-hover__'] = 'The hover-color for links to non-existing pages'; $lang['__site_width__'] = 'The width of the full site (can be any length unit: %, px, em, ...)'; $lang['__sidebar_width__'] = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)'; diff --git a/style.ini b/style.ini index efdc09d..5ca0d54 100755 --- a/style.ini +++ b/style.ini @@ -121,8 +121,10 @@ __highlight__ = "#efefef" ; @ini_highlight ; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ; these are used for links -__existing__ = "#286da8" ; @ini_existing +__existing__ = "#286DA8" ; @ini_existing +__existing-hover__ = "#286DA8" __missing__ = "#CD5360" ; @ini_missing +__missing-hover__ = "#CD5360" ; widths __site_width__ = "64em" ; @ini_site_width @@ -146,3 +148,4 @@ __background_site__ = "#ECECEC" __default_border_radius__ = "5px" +__background_page-header__ = "#F9F9F9" From c04d41f357c6815aa5a0ec2e8ff55d25b236964b Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 14:44:25 +0100 Subject: [PATCH 05/13] ie11: logo to large --- css/base_structure.less | 1 + 1 file changed, 1 insertion(+) diff --git a/css/base_structure.less b/css/base_structure.less index 2816ed0..5f3556a 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -164,6 +164,7 @@ position: absolute; bottom: 0; height: 1px; + width: 100%; // fo IE overflow: visible; } .logo img { From 062754f8802fde769b6418d8a151ab1bb0baddf1 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 14:44:50 +0100 Subject: [PATCH 06/13] some vars for button --- css/base.less | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/css/base.less b/css/base.less index 5494a9c..8aa4e35 100755 --- a/css/base.less +++ b/css/base.less @@ -27,9 +27,12 @@ @color-link: __existing__; @color-link-hover: @color-nav; -@box-shadow-offset: __box_shadow_offset__; -@box-shadow: __box_shadow__; -@box-shadow-colored: __box_shadow_colored__; +@button_color: __button_color__; +@button_background: __button_background__; + +@box-shadow-offset: __box_shadow_offset__; +@box-shadow: __box_shadow__; +@box-shadow-colored: __box_shadow_colored__; /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ From 8de9d2c986a001179493b1d297b2f8733896dbef Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 14:45:51 +0100 Subject: [PATCH 07/13] mixins for "num" and li as wrapper for icon-buttons --- css/base_mixins.less | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/css/base_mixins.less b/css/base_mixins.less index a1dbeb7..317d8c9 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -141,6 +141,47 @@ } +/* + + + + + small icon-buttons (breadcrumb, page-header) + + + + + */ +.btn-usertools-wrapper(@elem:2em) { + display: inline-block; + min-height: @elem; + min-width: @elem; + box-sizing: border-box; + color: @color-nav; + font-size: .8rem; + padding: 0; + margin: 0 .2rem 0 .1rem; +} + +.btn-usertools-num () { + .num { + position: absolute; + right: -.4em; + top: -.4em; + background-color: @color-border; + border-radius: 2px; + color: @color-nav; + font-size: .6rem; + font-weight: 400; + text-align: center; + line-height: 100%; + padding: .2em .3em .1em; + transition: @transition color, @transition background-color; + } + + a { + &:hover, + &:active, + &:focus { + .num { + background-color: @button_color; + color: @button_background; + } + } + } +} + + .btn-default-size() { height: 1rem; width: 1rem; @@ -178,6 +219,7 @@ overflow: hidden; white-space: nowrap; text-indent: -9999px; + &::before{ text-indent: 0; float: right; From e4e1e8685d071bc835dda3884f8066e6a9bda8d9 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 14:46:18 +0100 Subject: [PATCH 08/13] some vars for button --- lang/de/lang.php | 5 +++-- lang/en/lang.php | 5 +++-- style.ini | 9 +++++---- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/lang/de/lang.php b/lang/de/lang.php index ca6d504..8dd4043 100755 --- a/lang/de/lang.php +++ b/lang/de/lang.php @@ -30,10 +30,11 @@ $lang['discussion'] = 'Diskussion'; $lang['back_to_article'] = 'Zurück zum Artikel'; $lang['userpage'] = 'Benutzer-Seite'; $lang['__existing__'] = 'Schriftfarbe für Links zu vorhandenen Webseiten'; -$lang['__existing-hover__'] = 'Hoverfarbe für Links zu vorhandenen Webseiten'; $lang['__missing__'] = 'Schriftfarbe für Links zu nicht vorhandenen Webseiten'; -$lang['__missing-hover__'] = 'Hoverfarbe für Links zu nicht vorhandenen Webseiten'; $lang['__site_width__'] = 'The width of the full site (can be any length unit: %, px, em, ...)'; $lang['__sidebar_width__'] = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)'; +$lang['__button_color__'] = 'Schriftfarbe für Buttons'; +$lang['__button_background__'] = 'Hintergrundfarbe für Buttons'; + //Setup VIM: ex: et ts=2 : diff --git a/lang/en/lang.php b/lang/en/lang.php index e257b33..09b3d77 100755 --- a/lang/en/lang.php +++ b/lang/en/lang.php @@ -30,8 +30,9 @@ $lang['discussion'] = 'Discussion'; $lang['back_to_article'] = 'Back to article'; $lang['userpage'] = 'User page'; $lang['__existing__'] = 'The color for links to existing pages'; -$lang['__existing-hover__'] = 'The hover-color for links to existing pages'; $lang['__missing__'] = 'The color for links to non-existing pages'; -$lang['__missing-hover__'] = 'The hover-color for links to non-existing pages'; $lang['__site_width__'] = 'The width of the full site (can be any length unit: %, px, em, ...)'; $lang['__sidebar_width__'] = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)'; + +$lang['__button_color__'] = 'Color for buttons'; +$lang['__button_background__'] = 'Backgroundcolor for buttons'; diff --git a/style.ini b/style.ini index 5ca0d54..1a54be5 100755 --- a/style.ini +++ b/style.ini @@ -122,9 +122,10 @@ __highlight__ = "#efefef" ; @ini_highlight ; these are used for links __existing__ = "#286DA8" ; @ini_existing -__existing-hover__ = "#286DA8" __missing__ = "#CD5360" ; @ini_missing -__missing-hover__ = "#CD5360" + +__button_color__ = "#286DA8" +__button_background__ = "#FFF" ; widths __site_width__ = "64em" ; @ini_site_width @@ -141,9 +142,9 @@ __box_shadow__ = "0 0 .5em rgb(153,153,153,.5)" __box_shadow_offset__ = ".1em .1em .1em rgb(153,153,153,.5)" __nav_menu_color__ = "#696969" __nav_menu_hover_color__ = "#286da8" -__nav_menu_hover_bg__ = "#FFFFFF" +__nav_menu_hover_bg__ = "#FFF" -__background_content__ = "#FFFFFF" +__background_content__ = "#FFF" __background_site__ = "#ECECEC" __default_border_radius__ = "5px" From ed6fc9e542700e6895baddbff69081f577b470a3 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 14:48:13 +0100 Subject: [PATCH 09/13] uniform styles for icon-buttons (+ mixin added) --- css/area_nav-breadcrumb.less | 176 ++++++++++++++++----------- css/area_nav-usertools.less | 222 +++++++++++++++++------------------ css/plugins/do_tasks.less | 51 ++++---- 3 files changed, 236 insertions(+), 213 deletions(-) diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index be26926..68bf701 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -8,109 +8,145 @@ padding: 2rem 2rem 1rem; border-bottom: 1px solid @color-border; - > p{ + > p { font-size: .83rem; margin: 0; - *{ + + * { font-size: .83rem; } - .bchead{ + + .bchead { .sr-only(); } - a{ - &:hover,&:focus,&:active{ + + a { + &:hover, + &:focus, + &:active { color: @color-nav; } } - span.home{ - a{ + + span.home { + a { .fontello(); .hide-text-show-before(); .icon-home(); + height: 1em; width: auto; - text-decoration:none; - &:before{ + text-decoration: none; + transition: @transition color; + + &:before { font-size: 1rem; margin-top: .17rem; } - &:hover,&:focus,&:active{ - color: @color-nav; + + &:hover, + &:focus, + &:active { + color: @color-link-hover; } } - } } - .page-attributes{ - float:right; + + .page-attributes { + float: right; display: inline-block; list-style: none; - margin:0; padding:0; + margin: 0; + padding: 0; max-width: 30%; - > li{ - display: inline-block; - //float: right; - margin: 0 .1rem; - padding: 0; - font-size: .8rem; - #plugin__qc__wrapper{ - position:absolute; - right:0; - width: auto; - border: 0 none; - background: @color-site-bg; - } - a[aria-expanded="false"] + #plugin__qc__wrapper{ - display: none; - } - #plugin__qc__wrapper[aria-hidden="false"]{ - margin-top: .7rem; - } + > li { + .btn-usertools-wrapper(); // uniform li - #plugin__qc__icon{ - display: none; - } - &.plugin__qc{ + float: left; + + &.plugin__qc { display: inline-block; overflow: visible; } - #plugin__qc__link{ - font-size: .8rem; - position: relative; - display: block; - height: 1rem; - width: 1rem; - border: 1px solid @color-border; - background-color: @color-site-bg; - border-radius: @border-radius; - color: @color-nav; - min-height: 1.2em; - min-width: 1.4em; - box-sizing: content-box; - padding: .3em .25em .15em; - .prefix{ - font-size: .8rem; - .fontello(); - .hide-text-show-before(); - .icon-emo-happy(); - color: @color-nav; + &.do_none { + background-color: @color-site-bg; + } + + + .btn-usertools-num (); + + + .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; } - .num{ - position: absolute; - padding: .2em .3em .1em; - text-align: center; - font-size: .6rem; - line-height: 100%; - font-weight: 400; - right: -0.3em; - top: -0.4em; - background-color: @color-border; - border-radius: 2px; - color: @color-nav; + } + } // 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 { + display: none; + } + + &:hover, + &:active, + &:focus { + border-color: @button_color; + color: @button_color; + + .prefix { + color: @button_color; } } } + + #plugin__qc__wrapper { + position: absolute; + right: 0; + width: auto; + border: 0 none; + background: @color-site-bg; + + &[aria-hidden="false"] { + margin-top: .7rem; + } + } + + #plugin__qc__icon { + display: none; + } + + #plugin__qc__link { + font-size: .8rem; + position: relative; + + .prefix { + .icon-emo-happy(); + + font-size: inherit; + } + } } } diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index bd387f8..b8a3c5f 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -4,159 +4,153 @@ * @author Jana Deutschlaender */ + .nav-usertools { - &.has-bar{ + &.has-bar { margin-top: @height-context-bar; padding-top: .5rem; } - ul{ + + ul { float: right; - padding: 0; margin: .2rem -.2rem 0 0; - li{ - display: inline-block; + padding: 0; + margin: .2rem -.2rem 0 0; + + li { + .btn-usertools-wrapper(); // uniform li + float: right; - margin: 0 .1rem; - padding: 0; font-size: .8rem; - *{ + + * { font-size: .8rem; } - a{ - color: @color-nav; - box-sizing: content-box; - padding: .3em .25em .15em; - text-align: center; - text-decoration: none; + + > strong, + > a { + display: block; + width: auto; + min-height: 2em; border: 1px solid @color-border; border-radius: @border-radius; - margin: 2px; - cursor: pointer; - - &:hover, &:active, &:focus{ - background-color: @color-nav-hover-bg; - border-width: 3px; - border-style: double; - margin: 0; - - //-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; - } - - .fontello(); - .hide-text-show-before(); - &:before{ - font-size: 1.12em; - cursor: pointer; - content: "?"; - } - - /* icon register new user */ - &.register{ - .icon-user(); - } - /* icon log-out */ - &.logout{ - .icon-logout(); - } - /* icon log-in */ - &.login{ - .icon-login(); - } - /* icon admin */ - &.admin{ - .icon-cog(); - } - - /* add more icons if needed */ + color: @color-nav; + text-align: center; + margin: 0; } - &.user-task{ + .btn-usertools-num (); + + &.user { border: 1px solid @color-border; border-radius: @border-radius; - color: @color-nav; - display: inline-block; - height: 1rem; - width: 1rem; - min-height: 1.2em; - min-width: 1.4em; - box-sizing: content-box; - padding: .3em .25em .15em; - margin-top: 2px; + padding: .3rem .25rem; + + bdi { + color: @color-nav; + display: inline-block; + padding-top: 1px; + } + + > bdi:first-of-type { + .fontello(); + .icon-user(); + + &::before { + float: left; + background: @color-nav; + border: 4px solid @color-nav; + border-radius: 50%; + color: #fff; + font-size: .5rem; + margin-top: -1px; + margin-right: 6px; + } + } + } // user + + &.user-task { position: relative; - - a{ + a { position: relative; overflow: visible; white-space: normal; text-indent: 0; - &:before{ + + &::before { content: ""; position: absolute; } } - .prefix{ + .prefix { .fontello(); .hide-text-show-before(); .icon-clipboard(); + color: @color-nav; + margin-top: .3rem; } - - - .num{ - position: absolute; - padding: .2em .3em .1em; - text-align: center; - font-size: .6rem; - line-height: 100%; - font-weight: 400; - right: -0.3em; - top: -0.4em; - background-color: @color-border; - border-radius: 2px; - color: @color-nav; - } - &.opentasks, &.opentask{ - .num{ + &.opentasks, + &.opentask { + .num { background-color: @color-link; color: #fff; } } + } // user-task + } // li + + a { + .fontello(); + .hide-text-show-before(); + + cursor: pointer; + background-color: #fff; + text-decoration: none; + transition: @transition color, @transition border-color; + + &:hover, + &:active, + &:focus { + border-color: @color-nav-hover; + //-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; } - &.user{ - border: 1px solid @color-border; - border-radius: @border-radius; - color: @color-nav; - display: inline-block; - height: 1rem; - min-height: 1.2em; - min-width: 1.4em; - box-sizing: content-box; - padding: .3em .25em .15em; - margin-top: 2px; - bdi{ - color: @color-nav; - display: inline-block; - padding-top: 1px; - } - >bdi:first-of-type{ - .fontello(); - .icon-user(); - &:before{ - border: 4px solid @color-nav; - margin-top: -1px; - border-radius: 50%; - background: @color-nav; - color: #fff; - font-size: .5rem; - float: left; - } - } + &::before { + content: "?"; + display: block; + width: 100%; + box-sizing: border-box; + font-size: 1.12em; + cursor: pointer; + margin: .3rem 0; } + + /* icon register new user */ + &.register { + .icon-user(); + } + + /* icon log-out */ + &.logout { + .icon-logout(); + } + + /* icon log-in */ + &.login { + .icon-login(); + } + + /* icon admin */ + &.admin { + .icon-cog(); + } + + /* add more icons if needed */ } } } diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index b88b94a..ec76a59 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -2,39 +2,32 @@ /* all media */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -ul.page-attributes{ - .plugin__do_pagetasks{ - &.do_none{ - border: 1px solid @color-border; - border-radius: @border-radius; - color: @color-nav; - display: inline-block; - height: 1rem; - min-height: 1.2em; - min-width: 1.4em; - box-sizing: content-box; - padding: .3em .25em .15em; - position: relative; - } - .num{ - position: absolute; - padding: .2em .3em .1em; - text-align: center; - font-size: .6rem; - line-height: 100%; - font-weight: 400; - right: -0.3em; - top: -0.4em; - background-color: @color-border; - border-radius: 2px; - color: @color-nav; - } - .prefix{ +ul.page-attributes { + .plugin__do_pagetasks { + @icon-size: 2em; + + .btn-usertools-num (); + + .prefix { .fontello(); .hide-text-show-before(); .icon-clipboard(); - color: @color-nav; + font-size: .8rem; + min-height: @icon-size; + min-width: @icon-size; + color: @color-nav; + transition: @transition color; + } + + &.do_none { + position: relative; + height: 1rem; + width: 1rem; + box-sizing: border-box; + border: 1px solid @color-border; + border-radius: @border-radius; + padding: 0 .2em; } } } From 5a16f4f4f50d71a7dda16123864b702513960579 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 14:48:35 +0100 Subject: [PATCH 10/13] new searchsubmitbutton design --- css/area_sidebar-search.less | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less index d11bc69..f48f501 100755 --- a/css/area_sidebar-search.less +++ b/css/area_sidebar-search.less @@ -23,8 +23,6 @@ input { min-height: @icon-size; box-sizing: border-box; - border-color: @color-link; - border-radius: 0; } button[type="submit"] { @@ -32,22 +30,28 @@ .hide-text-show-before(); .icon-search(); + position: relative; width: @icon-size; min-height: @icon-size; + overflow: visible; background-image: none; - background-color: @color-link; - border: solid 1px @color-link; - border-radius: 0; - color: #fff; + background-color: transparent; + border: solid 1px transparent; + border-right-color: @color-border; + color: @color-nav; margin-left: -(@icon-size); padding: 0; - transition: @transition color, @transition background-color; + transition: @transition color, @transition border-color; &:hover, &:focus, &:active { - background-color: #fff; + border: solid 1px @color-link; color: @color-link; + + &::after { + background-color: @color-link; + } } &::before { @@ -57,6 +61,17 @@ text-align: center; margin: 0; } + + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: -1px; + background-color: @color-border; + transition: @transition background-color; + } } } } From 9a1f716d9add2efaab5b5074aef928b4f07816d5 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 15:18:50 +0100 Subject: [PATCH 11/13] styles for icon-buttons .num with "0"-amount --- css/area_nav-breadcrumb.less | 20 ++++++++++++-------- css/area_nav-usertools.less | 8 +++++++- css/base_mixins.less | 4 ++-- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 68bf701..7b07621 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -63,22 +63,26 @@ > li { .btn-usertools-wrapper(); // uniform li + .btn-usertools-num(); float: left; + &.do_none { + &:not([class*="plugin__qc"]) { + background-color: @color-site-bg; + } + + .num { + background-color: @color-border; + color: @color-nav; + } + } + &.plugin__qc { display: inline-block; overflow: visible; } - &.do_none { - background-color: @color-site-bg; - } - - - .btn-usertools-num (); - - .prefix { .fontello(); .hide-text-show-before(); diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index b8a3c5f..558eecd 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -18,6 +18,7 @@ li { .btn-usertools-wrapper(); // uniform li + .btn-usertools-num(); float: right; font-size: .8rem; @@ -38,7 +39,12 @@ margin: 0; } - .btn-usertools-num (); + &.noopentasks { + .num { + background-color: @color-border; + color: @color-nav; + } + } &.user { border: 1px solid @color-border; diff --git a/css/base_mixins.less b/css/base_mixins.less index 317d8c9..07077b3 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -158,9 +158,9 @@ position: absolute; right: -.4em; top: -.4em; - background-color: @color-border; + background-color: @button_color; border-radius: 2px; - color: @color-nav; + color: #fff; font-size: .6rem; font-weight: 400; text-align: center; From acbf1f1210d2e1e5ba86c5ae33945e47e6756d05 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 15:36:49 +0100 Subject: [PATCH 12/13] breadcrumb padding --- css/area_nav-breadcrumb.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 7b07621..4970a5a 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -5,7 +5,7 @@ */ .breadcrumbs { - padding: 2rem 2rem 1rem; + padding: @margin-small 1.8rem; border-bottom: 1px solid @color-border; > p { @@ -134,7 +134,7 @@ background: @color-site-bg; &[aria-hidden="false"] { - margin-top: .7rem; + margin-top: .5rem; } } From a2b6ba855e93f63a99f7657e01df4d22565b5f68 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 3 Jan 2017 15:58:22 +0100 Subject: [PATCH 13/13] responsive behaviour --- css/plugins/magic-matcher.less | 45 +++++++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index 1276b10..e7ad9a1 100755 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -1,5 +1,3 @@ - - /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* all media */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @@ -8,12 +6,13 @@ /* + + + + + + + + + + + + + + + + + + + + + + + */ /* magic matcher bar with form on top of page */ -#dokuwiki_magic-matcher{ - +#dokuwiki_magic-matcher { position: fixed; - top:0; left: 0; + top: 0; + left: 0; width: 100%; - #magicmatcher__context{ + + #magicmatcher__context { box-sizing: border-box; background-color: __nav_direct_background__; box-shadow: __box_shadow__; @@ -25,24 +24,46 @@ padding: .8em 1em .5em; margin-bottom: 0; - .chosen-container-single .chosen-single span{ - line-height: @line-height-bigger; + .chosen-container-single { + .chosen-single span { + line-height: @line-height-bigger; + } } } } -.no-js{ - #dokuwiki_magic-matcher{ +.no-js { + #dokuwiki_magic-matcher { display: none; } } +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1023px */ + +@media @screen_max-lg { + #dokuwiki_magic-matcher { + #magicmatcher__context { + .chosen-container-single { + width: 20% !important; + + + select + .chosen-container-single { + width: 58% !important; + } + } + } + } +} + + + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* print */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@media print{ - #dokuwiki_magic-matcher{ + +@media print { + #dokuwiki_magic-matcher { display: none; } }