From b965719e3cd981e2881d6c9ab8dda77ec0a6a86d Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 10:05:27 +0100 Subject: [PATCH 01/13] code cleaning + hover for logo only 2px border --- css/base_structure.less | 96 +++++++++++++++-------------------------- 1 file changed, 34 insertions(+), 62 deletions(-) diff --git a/css/base_structure.less b/css/base_structure.less index e97e995..6f6ccc9 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -18,38 +18,20 @@ } @media @screen_min-xxs { - .container { - //border: 1px solid deeppink; - } } @media @screen_min-xs { - .container { - //border: 1px solid orangered; - } } @media @screen_min-sm { - .container { - //border: 1px solid green; - } - .make-grid(sm); } @media @screen_min-md { - .container { - //border: 1px solid blue; - } - .make-grid(md); } @media @screen_min-lg { - .container { - //border: 1px solid blue; - } - .make-grid(lg); } @@ -57,25 +39,16 @@ html { font-size: 120%; } - - .container { - //border: 1px solid red; - } } @media @screen_min-xxlg { html { //font-size: 135%; } - - .container { - //border: 1px solid red; - } } +/* + + + + + z-indeces + + + + + */ @media @screen_min-md { - - // z-indeces .nav-direct p { z-index: 1000; } @@ -103,9 +76,11 @@ width: 100%; } - .header, .tools { + .header, + .tools { .row { position: relative; + > .col-xs-12 { width: 23%; box-sizing: border-box; @@ -129,12 +104,36 @@ .content { .row > .col-xs-12 { - width: 100%; position: relative; + width: 100%; background-color: #fff; } } + .claim { + .logo { + position: absolute; + bottom: 1em; + overflow: visible; + + img { + height: 60px; + width: auto; + border-style: solid; + border-color: transparent; + border-width: 0 2px; + } + + a:hover, + a:focus, + a:active { + img { + border-width: 0; + } + } + } + } + .showSidebar { .content { .row > .col-xs-12 { @@ -142,32 +141,7 @@ float: right; } } - } - .claim { - .logo { - position: absolute; - bottom: 1em; - overflow: visible; - } - - .logo img { - height: 60px; - width: auto; - border-style: solid; - border-color: transparent; - border-width: 0 3px; - } - .logo { - a:hover, a:focus, a:active{ - img { - border: 0 none; - } - } - } - } - - .showSidebar { .claim { .logo { position: absolute; @@ -176,6 +150,7 @@ width: 100%; // fo IE overflow: visible; } + .logo img { max-width: 100%; height: auto; @@ -193,9 +168,7 @@ } } - @media @screen_max-md { - .container { margin: 0 2.5rem 0 1.25rem; } @@ -209,11 +182,12 @@ .content { position: relative; - #dokuwiki__pagetools{ - top: 0; + #dokuwiki__pagetools { + top: 0; } - .row > .col-xs-12 #dokuwiki__content::before{ + + .row > .col-xs-12 #dokuwiki__content::before { display: none; } } @@ -231,6 +205,4 @@ display: none; } } - } - From 04289d080f0399f474d81a40b87004ff0cafcdfb Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 10:05:54 +0100 Subject: [PATCH 02/13] sidebar: last LI without border-bottom --- css/area_main-sidebar.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less index 6a47f20..7b9652d 100644 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -52,13 +52,13 @@ /* + + + first level + + + */ > li { + counter-increment: nav-counter; position: relative; list-style-type: none; margin: 0; padding: 0 0 .3em; - counter-increment: nav-counter; - &::after { + &:not(:last-of-type)::after { content: ''; position: absolute; left: 0; From 1b08ab7c4791890646ec1cf1af9aaccd868c322f Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 10:20:27 +0100 Subject: [PATCH 03/13] linked h6 + add css for trace --- css/area_sidetools.less | 333 +++++++++++++++++++++++++++------------- 1 file changed, 229 insertions(+), 104 deletions(-) diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 3193fb5..7b1fad4 100644 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -10,78 +10,6 @@ counter-increment: bar-counter; - > nav { - > ul { - padding-bottom: .4rem; - margin-bottom: 0; - } - } - - h6 { - position: relative; - width: auto; - height: auto; - color: @color-nav; - font-weight: normal; - padding: .5em 0 .5em (@icon-size + 1.1); - - &::before { - content: counter(bar-counter, lower-alpha); - 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 + .6); - background-color: @color-border; - transition: @transition background-color; - } - - + ul,+ div { - height: auto; - overflow: hidden; - } - - &.opened { - + ul, + div { - height: auto; - overflow: hidden; - } - + ul { - margin-top: .5em; - margin-bottom: .25em; - } - } - - &.closed { - + ul, + div { - height: 0; - padding: 0; - } - } - - } - - -/* + + + linklist + + + */ ul, .trace { padding-left: (@icon-size + .5); @@ -91,38 +19,6 @@ border-bottom: 1px solid @color-border; } - p { - max-height: 6rem; - overflow-y: auto; - background-color: @background_page-header; - border: 1px solid @color-border; - padding: .4rem; - font-size: .8rem; - *{ - font-size: inherit; - } - - .bchead, - .bcsep { - display: none; - } - - .breadcrumbs { - padding: 0; - margin: 0; - } - - bdi { - display: block; - line-height: 125%; - padding: .1rem 0; - } - - a { - cursor: pointer; - } - } - li { list-style-type: none; @@ -145,6 +41,235 @@ padding-top: .3em; } } + + > nav { + > ul { + margin: 0; + padding: 0 0 0 (@icon-size + .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: .5em 0 .5em (@icon-size + 1.1); + + &[class="sr-only"] { + border-bottom: solid 1px @color-border; + } + + * { + color: inherit; + } + + +/* + + + icon + + + */ + &::before { + content: counter(bar-counter, lower-alpha); + 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; + } + + +/* + + + line bottom + + + */ + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: (@icon-size + .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: 2px; + padding: .6em 0 .6em (@icon-size + 1); + transition: @transition color, @transition background-color, @transition border-color; + + &::before { + content: counter(bar-counter, lower-alpha); + position: absolute; + top: -.1em; + 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; + 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: (@icon-size + .5); + 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 { + color: @button_color; + } + + &:hover, + &:focus, + &:active { + background-color: @button_color; + border-color: @button_background; + color: @button_background; + text-decoration: none; + + &::before { + color: @button_background; + } + } + } + + + ul, + + div { + height: auto; + overflow: hidden; + } + + + ul { + margin-top: .5em; + padding-bottom: .4rem; + } + } + + &.closed { + + ul, + + div { + height: 0; + } + } + } + + +/* + + + + + f.i. trace + + + + + */ + p { + max-height: 6rem; + overflow-y: auto; + background-color: @background_page-header; + border: 1px solid @button_background; + font-size: .8rem; + padding: .5rem .6em; + + * { + font-size: inherit; + } + + .bchead { + display: none; + } + + .bcsep { + display: inline-block; + vertical-align: top; + padding-top: .3em; + } + + .breadcrumbs { + border: 0 none; + padding: 0; + margin: 0; + } + + bdi { + display: inline-block; + width: 95%; + line-height: 125%; + padding: .1rem 0; + } + + a { + cursor: pointer; + } + } } From 52b93d12e9171b5f43c148b4ee48dfbeadde1035 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 11:51:32 +0100 Subject: [PATCH 04/13] hover: bg-color for hover --- css/area_nav-breadcrumb.less | 3 ++- css/area_nav-usertools.less | 3 ++- css/area_sidebar-search.less | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 0a84098..b0c96ea 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -109,7 +109,7 @@ } // li a { - transition: @transition color, @transition border-color; + transition: @transition color, @transition background-color, @transition border-color; &[aria-expanded="false"] + #plugin__qc__wrapper { display: none; @@ -118,6 +118,7 @@ &:hover, &:active, &:focus { + background-color: @button_color; border-color: @button_background; color: @button_background; diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index c98f46e..094400d 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -105,11 +105,12 @@ cursor: pointer; background-color: #fff; text-decoration: none; - transition: @transition color, @transition border-color; + transition: @transition color, @transition background-color, @transition border-color; &:hover, &:active, &:focus { + background-color: @button_color; border-color: @button_background; //-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); diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less index 1006884..0268218 100755 --- a/css/area_sidebar-search.less +++ b/css/area_sidebar-search.less @@ -41,11 +41,12 @@ color: @color-nav; margin-left: -(@icon-size); padding: 0; - transition: @transition color, @transition border-color; + transition: @transition color, @transition background-color, @transition border-color; &:hover, &:focus, &:active { + background-color: @button_color; border: solid 1px @button_background; color: @button_background; From 80a859757131f8960d0bceb1687a4aed3502f416 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 11:52:51 +0100 Subject: [PATCH 05/13] deleted margin-bottom for main-content (for optional bg-color without white space) --- css/base_design.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/base_design.less b/css/base_design.less index 3eaa15c..85d3067 100755 --- a/css/base_design.less +++ b/css/base_design.less @@ -54,7 +54,7 @@ a { background: @color-content-bg; color: inherit; padding: 1rem 2rem 2rem; - margin-bottom: .5rem; + // margin-bottom: .5rem; // no margin: if there is another bg-color, then there is an #fff border overflow: hidden; word-wrap: break-word; } From 2c70b809106e9f30c0c51509c17f919cb8739180 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 11:53:49 +0100 Subject: [PATCH 06/13] trace + better padding and font for responsive --- css/area_sidetools.less | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 7b1fad4..930caba 100644 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -234,10 +234,12 @@ p { max-height: 6rem; overflow-y: auto; - background-color: @background_page-header; + background-color: @color-content-bg; border: 1px solid @button_background; + border-radius: 2px; font-size: .8rem; - padding: .5rem .6em; + margin-top: .1rem; + padding: .3rem .6em; * { font-size: inherit; @@ -250,6 +252,7 @@ .bcsep { display: inline-block; vertical-align: top; + color: @color-link; padding-top: .3em; } @@ -287,12 +290,11 @@ } li { - font-size: 100%; - padding-top: .1em; - padding-bottom: .1em; + font-size: .8rem; + padding: .1em 0 .1em .1rem; > * { - font-size: .8rem; + font-size: inherit; } } } @@ -309,11 +311,11 @@ } li { - font-size: 1rem; - padding: .15em .25rem; + font-size: .9rem; + padding: .15em 0 .15em .23rem; > * { - font-size: 1rem; + font-size: inherit; } } } From 784809336d85840156e9f038cc1124bca4038b5e Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 11:53:57 +0100 Subject: [PATCH 07/13] better padding and font for responsive --- css/area_main-sidebar.less | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less index 7b9652d..fe71498 100644 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -228,23 +228,23 @@ @media @screen_min-xlg { #dokuwiki__aside.main-sidebar { .nav-main { - > ul > li > .li { - font-size: .9rem; - - * { - font-size: inherit; - } - } - .li { font-size: .8rem; padding: .1em 0; * { - font-size: .8rem; + font-size: inherit; font-weight: inherit; } } + + > ul > li > .li { + font-size: .9rem; + + * { + font-size: inherit; + } + } } } } @@ -257,8 +257,17 @@ #dokuwiki__aside.main-sidebar { .nav-main { .li { + font-size: .9rem; + padding: .15em 0 .15em .25rem; + + * { + font-size: inherit; + font-weight: inherit; + } + } + + > ul > li > .li { font-size: 1rem; - padding: .15em .25rem; > * { font-size: inherit; From 3417b385647a54f3338721680bc47d2260c0115e Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 12:53:18 +0100 Subject: [PATCH 08/13] font-size in responsive --- css/area_sidetools.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 930caba..38e4cf3 100644 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -318,5 +318,9 @@ font-size: inherit; } } + + p { + font-size: .9rem; + } } } From 16ba7ca94f192d29340cf03dd2b71c1c52016caa Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 12:53:31 +0100 Subject: [PATCH 09/13] __link__ added --- style.ini | 1 + 1 file changed, 1 insertion(+) diff --git a/style.ini b/style.ini index e328b79..35be7aa 100755 --- a/style.ini +++ b/style.ini @@ -126,6 +126,7 @@ __highlight__ = "#efefef" ; @ini_highlight ; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ; these are used for links +__link__ = "#286DA8" ; @ini_link __existing__ = "#286DA8" ; @ini_existing __missing__ = "#CD5360" ; @ini_missing From 746025d20bf4aec35bc52f19055b952708981f98 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 13:55:20 +0100 Subject: [PATCH 10/13] font-size + custom vars --- css/base_design.less | 185 ++++++++++++++++++++++++++++++------------- 1 file changed, 130 insertions(+), 55 deletions(-) diff --git a/css/base_design.less b/css/base_design.less index 85d3067..44ac7ef 100755 --- a/css/base_design.less +++ b/css/base_design.less @@ -5,12 +5,13 @@ * @author Jana Deutschlaender */ + html, body { background-color: @color-site-bg; } a { - color: @ini_existing; + color: @color-link; } /* highlight selected tool */ @@ -125,7 +126,7 @@ h3 { } h4 { - font-size: .93rem; + font-size: .94rem; margin: 0 0 1.0em; } @@ -140,7 +141,7 @@ h6 { } p { - font-size: .83rem; + font-size: .88rem; line-height: 135%; a, @@ -151,7 +152,8 @@ p { } label, -legend { +legend, +button { font-size: .88rem; a, @@ -161,6 +163,14 @@ legend { } } +hr, +figure, +details, +address { + font-size: .88rem; + line-height: 140%; +} + p, ul, ol, @@ -173,8 +183,6 @@ figure, details, fieldset, address { - font-size: .88rem; - line-height: 140%; margin: 0 0 1.4em; /* bottom margin = line-height */ padding: 0; } @@ -200,6 +208,8 @@ small, ul, ol { + font-size: .88rem; + line-height: 140%; padding: 0 0 0 1.5em; } @@ -219,6 +229,11 @@ dd { margin: 0 1.5em 0 0; } +dl { + font-size: .88rem; + line-height: 140%; +} + dt { font-weight: bold; margin: 0; @@ -267,7 +282,9 @@ table { border-collapse: collapse; empty-cells: show; border-spacing: 0; - border: 1px solid @ini_border; + border: 1px solid @color-border; + font-size: .88rem; + line-height: 140%; } caption { @@ -284,7 +301,7 @@ td { padding: .3em .5em; margin: 0; vertical-align: top; - border: 1px solid @ini_border; + border: 1px solid @color-border; } th { @@ -304,7 +321,7 @@ a { a:link, a:visited { text-decoration: none; - color: @ini_link; + color: @color-link; } a:hover, @@ -337,7 +354,7 @@ button img { } hr { - border-top: solid @ini_border; + border-top: solid @color-border; border-bottom: solid @ini_background; border-width: 1px 0; height: 0; @@ -371,25 +388,29 @@ kbd { font-size: 1em; direction: ltr; text-align: left; - background-color: @ini_background_site; - color: @ini_text; - box-shadow: inset 0 0 .3em @ini_border; + background-color: @color-site-bg; + color: @color-text; + box-shadow: inset 0 0 .3em @color-border; border-radius: 2px; } pre { overflow: auto; word-wrap: normal; - border: 1px solid @ini_border; + border: 1px solid @color-border; border-radius: 2px; - box-shadow: inset 0 0 .5em @ini_border; + box-shadow: inset 0 0 .5em @color-border; + font-size: .88rem; + line-height: 140%; padding: .7em 1em; } blockquote { - padding: 0 .5em; - border: solid @ini_border; + border: solid @color-border; border-width: 0 0 0 .25em; + font-size: .88rem; + line-height: 140%; + padding: 0 .5em; } [dir=rtl] blockquote { @@ -431,8 +452,10 @@ form { } fieldset { - padding: .7rem 1rem; + font-size: .88rem; + line-height: 140%; border: 1px solid @ini_text_alt; + padding: .7rem 1rem; } fieldset > :last-child { @@ -473,6 +496,10 @@ select { max-width: 100%; } +textarea.edit { + font-size: .88em; +} + optgroup { font-style: italic; font-weight: bold; @@ -511,55 +538,79 @@ input[type=image] { box-shadow: none; } -/* all types of buttons */ -input[type=submit], -input[type=button], -input[type=reset], -input.button, -a.button, -button, -.qq-upload-button { - color: #333; + +/* + + + + + buttons + + + + + */ +button { background-color: #eee; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); border: 1px solid #ccc; border-radius: 2px; + color: #333; padding: .1em .5em; cursor: pointer; + transition: @transition background-color, @transition color; + + &:hover, + &:focus, + &:active { + background-color: #ddd; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); + background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); + border-color: #999; + } } -input[type=submit]:hover, -input[type=submit]:active, -input[type=submit]:focus, -input[type=button]:hover, -input[type=button]:active, -input[type=button]:hover, -input[type=reset]:hover, -input[type=reset]:active, -input[type=reset]:hover, -input.button:hover, -input.button:active, -input.button:focus, -a.button:hover, -a.button:active, -a.button:focus, -button:hover, -button:active, -button:focus, -.qq-upload-button:hover { - border-color: #999; - background-color: #ddd; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); - background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); + +/* + + + all types of submit-buttons + + + */ +a.button, +input[type=submit], +input[type=reset], +button[type=submit], +.qq-upload-button { + cursor: pointer; + background-image: none; + background-color: @button_background; + border: 1px solid @button_background; + border-radius: 2px; + color: @button_color; + padding: .3em @grid; + transition: @transition background-color, @transition color; + + &:hover, + &:active, + &:focus { + background-color: @button_color; + color: @button_background; + } } -input::-moz-focus-inner, -button::-moz-focus-inner { - border: 0; - padding: 0; + +/* + + + all types of buttons not being submit-buttons + + + */ +input.button, +input[type=button] { + cursor: pointer; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); + background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); + background-color: #eee; + border: 1px solid #ccc; + border-radius: 2px; + color: #333; + padding: .1em .5em; + transition: @transition background-color, @transition color; + + &:hover, + &:active, + &:focus { + background-color: #ddd; + border-color: #999; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); + background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); + } } + +/* + + + all disabled buttons + + + */ input[disabled], button[disabled], select[disabled], @@ -570,6 +621,30 @@ button[readonly], select[readonly], textarea[readonly] { cursor: auto; - opacity: .5; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); + background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); background-color: #eee; + opacity: .5; + border: 1px solid #ccc; + border-radius: 2px; + color: #333; + font-weight: normal; + padding: .3em @grid; + transition: @transition background-color, @transition color; + + &:hover, + &:active, + &:focus { + background-color: #ddd; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); + background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); + border-color: #999; + color: #333; + } +} + +input::-moz-focus-inner, +button::-moz-focus-inner { + border: 0; + padding: 0; } From 6ea8b72ee3aa3e6733e5b33d3c227830b40b4a91 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 6 Jan 2017 13:55:56 +0100 Subject: [PATCH 11/13] delete styles after changing base_design --- css/plugins/bureaucracy.less | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/css/plugins/bureaucracy.less b/css/plugins/bureaucracy.less index db94803..c16d453 100644 --- a/css/plugins/bureaucracy.less +++ b/css/plugins/bureaucracy.less @@ -90,21 +90,7 @@ } // label button[type="submit"] { - background-image: none; - background-color: @button_background; - border: solid 1px @button_background; - color: @button_color; - font-weight: bold; margin-top: (@grid * 2); - padding: .4em @grid; - transition: @transition background-color, @transition color; - - &:hover, - &:focus, - &:active { - background-color: @button_color; - color: @button_background; - } } } From f13c82a6a8b6b89b3f1f6562e0205096f52fe3f9 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Mon, 9 Jan 2017 11:09:34 +0100 Subject: [PATCH 12/13] trace in mac --- css/area_sidetools.less | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 38e4cf3..dd818ad 100644 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -250,7 +250,10 @@ } .bcsep { - display: inline-block; + float: left; + clear: both; + display: block; + width: 3%; vertical-align: top; color: @color-link; padding-top: .3em; @@ -263,10 +266,12 @@ } bdi { - display: inline-block; - width: 95%; + display: block; + float: left; + width: 94%; line-height: 125%; padding: .1rem 0; + margin-left: 2%; } a { From 754aa1ca303d584169ea5487e349bdcae4cf7971 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Mon, 9 Jan 2017 11:09:49 +0100 Subject: [PATCH 13/13] image position in jiralink --- css/plugins/magic-matcher.less | 37 ++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index faa51dd..02b9170 100755 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -11,13 +11,15 @@ top: 0; left: 0; width: 100%; - #mm__issueselect_chosen{ + + #mm__issueselect_chosen { max-width: 50%; } - button[name="toggleSuggestions"]{ + button[name="toggleSuggestions"] { position: absolute; - right: 0; top: 0; + right: 0; + top: 0; border: 0; border-bottom: 1px solid @color-border; border-left: 1px solid @color-border; @@ -25,26 +27,28 @@ background: #fff; border-radius: 0; border-bottom-left-radius: 5px; - &:hover, &:focus, &:active{ + + &:hover, + &:focus, + &:active { border-color: @button_background; color: @button_background; } } #magicmatcher__context { - box-sizing: border-box; - background-color: __nav_direct_background__; - box-shadow: __box_shadow__; - border-radius: 0 0 __default_border_radius__ __default_border_radius__; position: relative; z-index: 100; width: 100%; min-height: @height-context-bar; + box-sizing: border-box; + box-shadow: __box_shadow__; + background-color: __nav_direct_background__; + border-radius: 0 0 __default_border_radius__ __default_border_radius__; + font-size: .88rem; padding: .8em 1em .5em; margin-bottom: 0; - font-size: .88rem; - .chosen-container-single, .chosen-container-single *, #mm_issue_loading, @@ -54,14 +58,15 @@ } .chosen-container-single { - .chosen-single span { line-height: @line-height-bigger; } } + @media @screen_max-md { padding-top: 1.8rem; - .chosen-container{ + + .chosen-container { display: block; min-width: 100%; max-width: 100%; @@ -78,7 +83,7 @@ a.jiralink { img { float: left; display: inline-block; - margin-top: .3em; + margin-top: .13em; margin-right: 3px; } @@ -119,10 +124,12 @@ a.jiralink { @media @screen_max-md { #dokuwiki_magic-matcher { position: relative; - .container{ + + .container { margin: .8rem 0 -5px; } - #magicmatcher__context{ + + #magicmatcher__context { border-radius: 0; } }