diff --git a/css/area_footer.less b/css/area_footer.less index 6ad4f7a..85ed12c 100755 --- a/css/area_footer.less +++ b/css/area_footer.less @@ -57,8 +57,6 @@ } } } - - } diff --git a/css/area_main-content.less b/css/area_main-content.less index d5d984f..bf5304c 100644 --- a/css/area_main-content.less +++ b/css/area_main-content.less @@ -6,14 +6,6 @@ #dokuwiki__content.main-content { - img { - display: inline-block; - } - -/* + + + source block + + + */ - .code { - margin-top: @grid; - } } @@ -21,25 +13,6 @@ /* 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; - } - } } @@ -47,23 +20,4 @@ /* 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 b1dde03..6a47f20 100644 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -11,6 +11,7 @@ /* + + + + + nav main + + + + + */ .nav-main { padding-bottom: 1.8rem; + > ul { @icon-size: 2rem; @@ -26,7 +27,7 @@ color: @color-nav; &:first-of-type { - padding-top: .3rem; + padding-top: .3em; } } @@ -35,14 +36,15 @@ display: list-item; list-style-type: square; color: @color-nav; - padding-top: .1rem; - padding-bottom: .1rem; + font-weight: normal; + padding-top: .1em; + padding-bottom: .1em; transition: @transition color; &:hover, &:focus, &:active { - color: @button_color; + color: @button_background; } } } @@ -53,7 +55,7 @@ position: relative; list-style-type: none; margin: 0; - padding: 0 0 .3rem 0; + padding: 0 0 .3em; counter-increment: nav-counter; &::after { @@ -71,7 +73,11 @@ position: relative; z-index: 1; margin-top: -1px; - padding: .5rem 0 .5rem (@icon-size + 1); + padding: .5em 0 .5em (@icon-size + 1); + + &[class="li"] { + border-bottom: solid 1px @color-border; + } &::before { content: counter(nav-counter); @@ -118,13 +124,13 @@ border: 1px solid transparent; border-radius: 2px; margin-bottom: -.3rem; - padding: .6rem 0 .7rem (@icon-size + 1); + padding: .6em 0 .6em (@icon-size + 1); transition: @transition color, @transition background-color, @transition border-color; &::before { content: counter(nav-counter); position: absolute; - top: -.1rem; + top: -.1em; left: 0; display: flex; display: -webkit-flex; @@ -156,17 +162,17 @@ &:hover, &:focus, &:active { - background-color: @button_background; - border-color: @button_color; - color: @button_color; + background-color: @button_color; + border-color: @button_background; + color: @button_background; text-decoration: none; &::before { - color: @button_color; + color: @button_background; } &::after { - background-color: @button_color; + background-color: @button_background; } } } @@ -174,26 +180,31 @@ &.opened { a { - background-color: @button_color; - color: @button_background; + background-color: @button_background; + color: @button_color; &::before { - color: @button_background; + color: @button_color; } &:hover, &:focus, &:active { - background-color: @button_background; - border-color: @button_color; - color: @button_color; + background-color: @button_color; + border-color: @button_background; + color: @button_background; text-decoration: none; &::before { - color: @button_color; + color: @button_background; } } } + + + ul { + margin-top: .5em; + margin-bottom: .25em; + } } + ul { @@ -217,12 +228,21 @@ @media @screen_min-xlg { #dokuwiki__aside.main-sidebar { .nav-main { - .li { - font-size: .88rem; - padding: .1rem 0; + > ul > li > .li { + font-size: .9rem; - > * { - font-size: .88rem; + * { + font-size: inherit; + } + } + + .li { + font-size: .8rem; + padding: .1em 0; + + * { + font-size: .8rem; + font-weight: inherit; } } } @@ -238,10 +258,10 @@ .nav-main { .li { font-size: 1rem; - padding: .15rem .25rem; + padding: .15em .25rem; > * { - font-size: 1rem; + font-size: inherit; } } } diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 38b861e..0a84098 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -5,7 +5,7 @@ */ .breadcrumbs { - padding: @margin-small 1.8rem; + padding: (@margin-small + .2) 1.8rem @margin-small; border-bottom: 1px solid @color-border; > p { @@ -20,24 +20,21 @@ .sr-only(); } - a { - &:hover, - &:focus, - &:active { - color: @color-nav; - } - } - span.home { a { .fontello(); .hide-text-show-before(); .icon-home(); - height: 1em; + min-height: 1.8em; width: auto; + box-sizing: border-box; + border: solid 1px transparent; + border-radius: 2px; + vertical-align: middle; text-decoration: none; - transition: @transition color; + margin-top: -.2em; + transition: @transition border-color; &:before { font-size: 1rem; @@ -47,21 +44,25 @@ &:hover, &:focus, &:active { - color: @color-link-hover; + border-color: @color-link; } } } + + bdi { + padding: .1em .1em 0; + } } /* + + + + + icon list + + + + + */ .page-attributes { + list-style: none; float: right; display: inline-block; - list-style: none; - margin: 0; - padding: 0; max-width: 30%; + margin: -.2em 0 0; + padding: 0; > li { .btn-usertools-wrapper(); // uniform li @@ -117,11 +118,11 @@ &:hover, &:active, &:focus { - border-color: @button_color; - color: @button_color; + border-color: @button_background; + color: @button_background; .prefix { - color: @button_color; + color: @button_background; } } } diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 0d1b134..c98f46e 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -8,7 +8,7 @@ .nav-usertools { &.has-bar { margin-top: @height-context-bar; - padding-top: .5rem; + padding-top: .5em; } @@ -16,7 +16,7 @@ ul { float: right; padding: 0; - margin: .2rem -.2rem 0 0; + margin: .2em -.2rem 0 0; li { .btn-usertools-wrapper(); // uniform li @@ -50,7 +50,7 @@ &.user { border: 1px solid @color-border; border-radius: @border-radius; - padding: .3rem .25rem; + padding: .3em .25rem; bdi { color: @color-nav; @@ -110,10 +110,10 @@ &:hover, &:active, &:focus { - border-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); - color: @button_color; + color: @button_background; } &::before { @@ -123,7 +123,7 @@ box-sizing: border-box; font-size: 1.4em; cursor: pointer; - margin: .2rem 0 0; + margin: .2em 0 0; } /* icon register new user */ diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less index ff96456..1006884 100755 --- a/css/area_sidebar-search.less +++ b/css/area_sidebar-search.less @@ -46,11 +46,11 @@ &:hover, &:focus, &:active { - border: solid 1px @button_color; - color: @button_color; + border: solid 1px @button_background; + color: @button_background; &::after { - background-color: @button_color; + background-color: @button_background; } } diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 0d70657..0bca9ac 100644 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -7,25 +7,25 @@ .side-tools.main-sidebar { @icon-size: 2rem; + counter-increment: bar-counter; - > nav{ - > ul{ - margin-bottom: 0; + > nav { + > ul { padding-bottom: .4rem; + margin-bottom: 0; } } - h6 { //background-color: pink;// hier activ !!! + h6 { position: relative; width: auto; height: auto; color: @color-nav; - font-size: .88rem; font-weight: normal; - padding: .5rem 0 .5rem (@icon-size + 1); + padding: .5em 0 .5em (@icon-size + 1.1); + &::before { - //background-color: gold; content: counter(bar-counter, lower-alpha); position: absolute; top: 0; @@ -50,19 +50,25 @@ top: 15%; bottom: 15%; width: 1px; - left: (@icon-size + .5); + left: (@icon-size + .6); background-color: @color-border; transition: @transition background-color; } + + + ul { + margin-top: .5em; + margin-bottom: .25em; + } } /* + + + linklist + + + */ - ul,.trace{ + ul, + .trace { padding-left: (@icon-size + .5); } - ul{ + ul { border-bottom: 1px solid @color-border; } @@ -72,14 +78,15 @@ background-color: @background_page-header; border: 1px solid @color-border; padding: .4rem; - + .bchead, .bcsep { display: none; } .breadcrumbs { - padding: 0; margin: 0; + padding: 0; + margin: 0; } bdi { @@ -100,19 +107,19 @@ display: list-item; list-style-type: square; color: @color-nav; - padding-top: .1rem; - padding-bottom: .1rem; + padding-top: .1em; + padding-bottom: .1em; transition: @transition color; &:hover, &:focus, &:active { - color: @button_color; + color: @button_background; } } &:first-of-type { - padding-top: .3rem; + padding-top: .3em; } } } @@ -123,13 +130,21 @@ @media @screen_min-xlg { .side-tools.main-sidebar { + h6 { + font-size: .9rem; + + * { + font-size: inherit; + } + } + li { font-size: 100%; - padding-top: .1rem; - padding-bottom: .1rem; + padding-top: .1em; + padding-bottom: .1em; > * { - font-size: .88rem; + font-size: .8rem; } } } @@ -137,22 +152,21 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1199px */ +/* max-width: 1439px */ @media @screen_max-xlg { - .site-tools.main-sidebar { + .side-tools.main-sidebar { h6 { font-size: 1rem; } li { font-size: 1rem; - padding-top: .15rem; - padding-bottom: .15rem; + padding: .15em .25rem; > * { font-size: 1rem; } } } -} +} \ No newline at end of file diff --git a/css/base_design.less b/css/base_design.less index 21a0d43..3eaa15c 100755 --- a/css/base_design.less +++ b/css/base_design.less @@ -5,12 +5,11 @@ * @author Jana Deutschlaender */ - -html, body{ +html, body { background-color: @color-site-bg; } -a{ +a { color: @ini_existing; } @@ -80,7 +79,6 @@ a{ margin-right: 0; } - caption, figcaption, summary, @@ -89,6 +87,7 @@ legend { margin: 0 0 .35em; line-height: 1.2; } + h1, h2, h3, @@ -100,6 +99,7 @@ h6 { line-height: 1.2; clear: both; } + [dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, @@ -113,41 +113,53 @@ h1 { font-size: 1.4rem; margin: 0 0 0.444em; } + h2 { font-size: 1.12rem; margin: 0 0 0.666em; } + h3 { font-size: 1rem; margin: 0 0 0.888em; } + h4 { font-size: .93rem; margin: 0 0 1.0em; } + h5 { font-size: .88rem; margin: 0 0 1.1428em; } + h6 { font-size: .83rem; margin: 0 0 1.333em; } -p{ +p { font-size: .83rem; line-height: 135%; - a, span, strong{ - font-size: inherit; - } -} -label, legend{ - font-size: .83rem; - a, span, strong{ + + a, + span, + strong { font-size: inherit; } } +label, +legend { + font-size: .88rem; + + a, + span, + strong { + font-size: inherit; + } +} p, ul, @@ -161,7 +173,9 @@ figure, details, fieldset, address { - margin: 0 0 1.4em 0; /* bottom margin = line-height */ + font-size: .88rem; + line-height: 140%; + margin: 0 0 1.4em; /* bottom margin = line-height */ padding: 0; } @@ -172,6 +186,15 @@ audio { padding: 0; } +small, +.code { + font-size: .75rem; +} + +.code { + margin-top: @grid; +} + /*____________ lists ____________*/ @@ -179,6 +202,7 @@ ul, ol { padding: 0 0 0 1.5em; } + [dir=rtl] ul, [dir=rtl] ol { padding: 0 1.5em 0 0; @@ -189,10 +213,12 @@ dd { padding: 0; margin: 0 0 0 1.5em; } + [dir=rtl] li, [dir=rtl] dd { margin: 0 1.5em 0 0; } + dt { font-weight: bold; margin: 0; @@ -208,17 +234,34 @@ dl dl { margin-bottom: 0; padding: 0; } + li li { font-size: 100%; } -ul { list-style: square outside; } -ol { list-style: decimal outside; } -ol ol { list-style-type: lower-alpha; } -ol ol ol { list-style-type: upper-roman; } -ol ol ol ol { list-style-type: upper-alpha; } -ol ol ol ol ol { list-style-type: lower-roman; } +ul { + list-style: square outside; +} +ol { + list-style: decimal outside; +} + +ol ol { + list-style-type: lower-alpha; +} + +ol ol ol { + list-style-type: upper-roman; +} + +ol ol ol ol { + list-style-type: upper-alpha; +} + +ol ol ol ol ol { + list-style-type: lower-roman; +} table { border-collapse: collapse; @@ -231,6 +274,7 @@ caption { caption-side: top; text-align: left; } + [dir=rtl] caption { text-align: right; } @@ -242,11 +286,13 @@ td { vertical-align: top; border: 1px solid @ini_border; } + th { font-weight: bold; background-color: @ini_background_alt; text-align: left; } + [dir=rtl] th { text-align: right; } @@ -254,11 +300,13 @@ th { a { outline: none; } + a:link, a:visited { text-decoration: none; color: @ini_link; } + a:hover, a:focus, a:active { @@ -266,6 +314,7 @@ a:active { } img { + display: inline-block; border-width: 0; vertical-align: middle; color: #666; @@ -273,6 +322,7 @@ img { font-style: italic; height: auto; } + img, object, embed, @@ -281,6 +331,7 @@ video, audio { max-width: 100%; } + button img { max-width: none; } @@ -300,6 +351,7 @@ abbr { border-bottom: 1px dotted; font-style: normal; } + em acronym, em abbr { font-style: italic; @@ -324,6 +376,7 @@ kbd { box-shadow: inset 0 0 .3em @ini_border; border-radius: 2px; } + pre { overflow: auto; word-wrap: normal; @@ -338,9 +391,11 @@ blockquote { border: solid @ini_border; border-width: 0 0 0 .25em; } + [dir=rtl] blockquote { border-width: 0 .25em 0 0; } + q:before, q:after { content: ''; @@ -351,17 +406,20 @@ sup { font-size: .8em; line-height: 1; } + sub { vertical-align: sub; } + sup { vertical-align: super; } small { - font-size: .8em; + font-size: .9em; } + /*____________ forms ____________*/ /* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ @@ -371,18 +429,21 @@ form { margin: 0; padding: 0; } + fieldset { - padding: .7em 1em 0; - padding: .7rem 1rem; /* for those browsers understanding :last-child */ + padding: .7rem 1rem; border: 1px solid @ini_text_alt; } + fieldset > :last-child { margin-bottom: 0; } + legend { margin: 0; padding: 0 .1em; } + label { vertical-align: middle; cursor: pointer; @@ -411,10 +472,12 @@ progress { select { max-width: 100%; } + optgroup { font-style: italic; font-weight: bold; } + option { font-style: normal; font-weight: normal; @@ -428,6 +491,7 @@ keygen { box-shadow: inset 0 0 1px #eee; border-radius: 2px; } + input:active, input:focus, textarea:active, @@ -438,6 +502,7 @@ keygen:active, keygen:focus { border-color: #999; } + input[type=radio], input[type=checkbox], input[type=image] { @@ -485,7 +550,7 @@ 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: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); } @@ -508,5 +573,3 @@ textarea[readonly] { opacity: .5; background-color: #eee; } - - diff --git a/css/base_mixins.less b/css/base_mixins.less index 9f75f95..51c539f 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -150,7 +150,7 @@ color: @color-nav; font-size: .8rem; padding: 0; - margin: 0 .2rem 0 .1rem; + margin: 0 .2rem; * { font-size: .8rem; @@ -160,16 +160,16 @@ .btn-usertools-num () { .num { position: absolute; - right: -.5em; + right: -.4rem; top: -.4em; - background-color: @button_color; + background-color: @button_background; border-radius: 2px; - color: @button_background; + color: @button_color; font-size: .6rem; font-weight: 400; text-align: center; line-height: 1; - padding: .2em .3em .1em; + padding: .2em .2rem .1em; transition: @transition color, @transition background-color; } @@ -178,8 +178,8 @@ &:active, &:focus { .num { - background-color: @button_color; - color: @button_background; + background-color: @button_background; + color: @button_color; } } } @@ -190,7 +190,7 @@ .hide-text-show-before(); color: inherit; - font-size: 1.3em; + font-size: 1rem; margin-top: .2rem; } diff --git a/css/plugins/bureaucracy.less b/css/plugins/bureaucracy.less new file mode 100644 index 0000000..db94803 --- /dev/null +++ b/css/plugins/bureaucracy.less @@ -0,0 +1,143 @@ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* all media */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +.dokuwiki form.bureaucracy__plugin { + fieldset { + width: 100%; + max-width: 800px; + box-sizing: border-box; + border: 0 none; + text-align: center; + margin-left: 0; + margin-bottom: (@grid * 2); + padding: @grid 0 0; + + > *:not(button) { + text-align: left; + } + } + + legend { + font-size: 1.12em; + font-weight: bold; + text-align: left; + } + + label { + clear: both; + padding-top: (@grid / 2); + + &::after { + content: ''; + clear: both; + } + + sup { + float: right; + font-size: 1em; + } + + input, + select { + float: left; + width: 50%; + min-height: 2em; + text-align: left; + padding: .1em .2em; + } + + input[type="checkbox"] { + width: 1.5rem; + height: 1.5rem; + background-image: none; + } + + span { + float: left; + width: 50%; + text-align: right; + line-height: @line-height-default; + padding-top: .2em; + padding-right: @grid; + + &:not([class]) { + font-weight: bold; + margin-top: .5em; + + + input, + + select { + margin-top: .3em; + } + + // checkboxes + + input + input { + margin-top: .3em; + } + } + + &.label { + text-align: right; + padding-top: .5em; + } + + &.input { + width: 49%; + text-align: left; + padding-left: 0; + } + } // span + } // 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; + } + } +} + + + + +#icke__page .content ul.autocompletion {} + +ul.autocompletion li {} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + .dokuwiki form.bureaucracy__plugin { + p { + font-size: .9rem; + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1439px */ + +@media @screen_max-xlg { + .dokuwiki form.bureaucracy__plugin { + p, + label, + button[type="submit"] { + font-size: 1rem; + } + } +} + diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index b0e0741..d1963b1 100755 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -39,7 +39,7 @@ a.jiralink { img { float: left; display: inline-block; - margin-top: 2px; + margin-top: .3em; margin-right: 3px; } diff --git a/style.ini b/style.ini index 03c3a06..e328b79 100755 --- a/style.ini +++ b/style.ini @@ -79,6 +79,7 @@ css/area_main-content.less = all css/plugins/magic-matcher.less = all css/plugins/do_tasks.less = all css/plugins/struct.less = all +css/plugins/bureaucracy.less = all ; _____________ print styles _____________ @@ -128,8 +129,8 @@ __highlight__ = "#efefef" ; @ini_highlight __existing__ = "#286DA8" ; @ini_existing __missing__ = "#CD5360" ; @ini_missing -__button_color__ = "#286DA8" -__button_background__ = "#FFF" +__button_color__ = "#FFF" +__button_background__ = "#286DA8" ; widths __site_width__ = "64em" ; @ini_site_width