From b6b228b16d3e618ad3eec47bc63240bdc8a8d87b Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Thu, 5 Jan 2017 15:26:31 +0100 Subject: [PATCH] em --> rem + font-size in responsive --- css/area_footer.less | 2 -- css/area_main-sidebar.less | 36 ++++++++++++------- css/area_nav-usertools.less | 8 ++--- css/area_sidetools.less | 47 ++++++++++++++---------- css/base_design.less | 70 +++++++++++++++++++++++++----------- css/base_mixins.less | 8 ++--- css/plugins/bureaucracy.less | 40 +++++++++++++++++---- 7 files changed, 142 insertions(+), 69 deletions(-) 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-sidebar.less b/css/area_main-sidebar.less index f13def7..8a842d1 100644 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -25,7 +25,7 @@ color: @color-nav; &:first-of-type { - padding-top: .3rem; + padding-top: .3em; } } @@ -34,8 +34,8 @@ 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, @@ -52,7 +52,7 @@ position: relative; list-style-type: none; margin: 0; - padding: 0 0 .3rem 0; + padding: 0 0 .3em; counter-increment: nav-counter; &::after { @@ -70,7 +70,7 @@ position: relative; z-index: 1; margin-top: -1px; - padding: .5rem 0 .5rem (@icon-size + 1); + padding: .5em 0 .5em (@icon-size + 1); &::before { content: counter(nav-counter); @@ -117,13 +117,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; @@ -193,6 +193,11 @@ } } } + + + ul { + margin-top: .5em; + margin-bottom: .25em; + } } + ul { @@ -216,12 +221,17 @@ @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; + .li { + font-size: .8rem; + padding: .1em 0; + + * { + font-size: inherit; + font-weight: inherit; } } } @@ -237,7 +247,7 @@ .nav-main { .li { font-size: 1rem; - padding: .15rem .25rem; + padding: .15em .25rem; > * { font-size: 1rem; diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index eba2f87..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; @@ -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_sidetools.less b/css/area_sidetools.less index 5c35194..0657fa9 100644 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -8,24 +8,23 @@ .side-tools.main-sidebar { @icon-size: 2rem; - > nav{ - margin-top: 1rem; - > ul{ + > nav { + margin-top: 1em; + + > ul { 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: 'A'; position: absolute; top: 0; @@ -50,10 +49,15 @@ 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; + } } @@ -69,8 +73,8 @@ 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, @@ -81,7 +85,7 @@ } &:first-of-type { - padding-top: .3rem; + padding-top: .3em; } } } @@ -92,13 +96,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; } } } @@ -106,18 +118,17 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* 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; diff --git a/css/base_design.less b/css/base_design.less index e965bb3..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, @@ -163,7 +175,7 @@ fieldset, address { font-size: .88rem; line-height: 140%; - margin: 0 0 1.4em 0; /* bottom margin = line-height */ + margin: 0 0 1.4em; /* bottom margin = line-height */ padding: 0; } @@ -227,13 +239,29 @@ 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; @@ -388,7 +416,7 @@ sup { } small { - font-size: .8em; + font-size: .9em; } @@ -522,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%); } diff --git a/css/base_mixins.less b/css/base_mixins.less index 242cd04..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,7 +160,7 @@ .btn-usertools-num () { .num { position: absolute; - right: -.5em; + right: -.4rem; top: -.4em; background-color: @button_background; border-radius: 2px; @@ -169,7 +169,7 @@ font-weight: 400; text-align: center; line-height: 1; - padding: .2em .3em .1em; + padding: .2em .2rem .1em; transition: @transition color, @transition background-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 index ebb32c9..db94803 100644 --- a/css/plugins/bureaucracy.less +++ b/css/plugins/bureaucracy.less @@ -35,6 +35,7 @@ sup { float: right; + font-size: 1em; } input, @@ -47,6 +48,8 @@ } input[type="checkbox"] { + width: 1.5rem; + height: 1.5rem; background-image: none; } @@ -54,12 +57,13 @@ 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: .4em; + margin-top: .5em; + input, + select { @@ -106,12 +110,34 @@ -/* neutralize #icke__page .content ul, #icke__page .content ol */ -#icke__page .content ul.autocompletion { - //margin: 0; - //padding: 0.3em; + +#icke__page .content ul.autocompletion {} + +ul.autocompletion li {} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + .dokuwiki form.bureaucracy__plugin { + p { + font-size: .9rem; + } + } } -ul.autocompletion li { - //list-style-type: none; + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1439px */ + +@media @screen_max-xlg { + .dokuwiki form.bureaucracy__plugin { + p, + label, + button[type="submit"] { + font-size: 1rem; + } + } } +