EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

em --> rem + font-size in responsive

Browse source
This commit is contained in:
Silke Pisulla 2017-01-05 15:26:31 +01:00
commit b6b228b16d
7 changed files with 142 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

2
css/area_footer.less
View file

@ -57,8 +57,6 @@
} }
} }
} }
} }

36
css/area_main-sidebar.less
View file

@ -25,7 +25,7 @@
color: @color-nav; color: @color-nav;
&:first-of-type { &:first-of-type {
padding-top: .3rem; padding-top: .3em;
} }
} }
@ -34,8 +34,8 @@
display: list-item; display: list-item;
list-style-type: square; list-style-type: square;
color: @color-nav; color: @color-nav;
padding-top: .1rem; padding-top: .1em;
padding-bottom: .1rem; padding-bottom: .1em;
transition: @transition color; transition: @transition color;
&:hover, &:hover,
@ -52,7 +52,7 @@
position: relative; position: relative;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0 0 .3rem 0; padding: 0 0 .3em;
counter-increment: nav-counter; counter-increment: nav-counter;
&::after { &::after {
@ -70,7 +70,7 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: -1px; margin-top: -1px;
padding: .5rem 0 .5rem (@icon-size + 1); padding: .5em 0 .5em (@icon-size + 1);
&::before { &::before {
content: counter(nav-counter); content: counter(nav-counter);
@ -117,13 +117,13 @@
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
margin-bottom: -.3rem; 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; transition: @transition color, @transition background-color, @transition border-color;
&::before { &::before {
content: counter(nav-counter); content: counter(nav-counter);
position: absolute; position: absolute;
top: -.1rem; top: -.1em;
left: 0; left: 0;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
@ -193,6 +193,11 @@
} }
} }
} }
+ ul {
margin-top: .5em;
margin-bottom: .25em;
}
} }
+ ul { + ul {
@ -216,12 +221,17 @@
@media @screen_min-xlg { @media @screen_min-xlg {
#dokuwiki__aside.main-sidebar { #dokuwiki__aside.main-sidebar {
.nav-main { .nav-main {
.li { > ul > li > .li * {
font-size: .88rem; font-size: .9rem;
padding: .1rem 0; }
> * { .li {
font-size: .88rem; font-size: .8rem;
padding: .1em 0;
* {
font-size: inherit;
font-weight: inherit;
} }
} }
} }
@ -237,7 +247,7 @@
.nav-main { .nav-main {
.li { .li {
font-size: 1rem; font-size: 1rem;
padding: .15rem .25rem; padding: .15em .25rem;
> * { > * {
font-size: 1rem; font-size: 1rem;

8
css/area_nav-usertools.less
View file

@ -8,7 +8,7 @@
.nav-usertools { .nav-usertools {
&.has-bar { &.has-bar {
margin-top: @height-context-bar; margin-top: @height-context-bar;
padding-top: .5rem; padding-top: .5em;
} }
@ -16,7 +16,7 @@
ul { ul {
float: right; float: right;
padding: 0; padding: 0;
margin: .2rem -.2rem 0 0; margin: .2em -.2rem 0 0;
li { li {
.btn-usertools-wrapper(); // uniform li .btn-usertools-wrapper(); // uniform li
@ -50,7 +50,7 @@
&.user { &.user {
border: 1px solid @color-border; border: 1px solid @color-border;
border-radius: @border-radius; border-radius: @border-radius;
padding: .3rem .25rem; padding: .3em .25rem;
bdi { bdi {
color: @color-nav; color: @color-nav;
@ -123,7 +123,7 @@
box-sizing: border-box; box-sizing: border-box;
font-size: 1.4em; font-size: 1.4em;
cursor: pointer; cursor: pointer;
margin: .2rem 0 0; margin: .2em 0 0;
} }
/* icon register new user */ /* icon register new user */

47
css/area_sidetools.less
View file

@ -8,24 +8,23 @@
.side-tools.main-sidebar { .side-tools.main-sidebar {
@icon-size: 2rem; @icon-size: 2rem;
> nav{ > nav {
margin-top: 1rem; margin-top: 1em;
> ul{
> ul {
margin-bottom: 0; margin-bottom: 0;
} }
} }
h6 { //background-color: pink;// hier activ !!! h6 {
position: relative; position: relative;
width: auto; width: auto;
height: auto; height: auto;
color: @color-nav; color: @color-nav;
font-size: .88rem;
font-weight: normal; font-weight: normal;
padding: .5rem 0 .5rem (@icon-size + 1); padding: .5em 0 .5em (@icon-size + 1.1);
&::before { &::before {
//background-color: gold;
content: 'A'; content: 'A';
position: absolute; position: absolute;
top: 0; top: 0;
@ -50,10 +49,15 @@
top: 15%; top: 15%;
bottom: 15%; bottom: 15%;
width: 1px; width: 1px;
left: (@icon-size + .5); left: (@icon-size + .6);
background-color: @color-border; background-color: @color-border;
transition: @transition background-color; transition: @transition background-color;
} }
+ ul {
margin-top: .5em;
margin-bottom: .25em;
}
} }
@ -69,8 +73,8 @@
display: list-item; display: list-item;
list-style-type: square; list-style-type: square;
color: @color-nav; color: @color-nav;
padding-top: .1rem; padding-top: .1em;
padding-bottom: .1rem; padding-bottom: .1em;
transition: @transition color; transition: @transition color;
&:hover, &:hover,
@ -81,7 +85,7 @@
} }
&:first-of-type { &:first-of-type {
padding-top: .3rem; padding-top: .3em;
} }
} }
} }
@ -92,13 +96,21 @@
@media @screen_min-xlg { @media @screen_min-xlg {
.side-tools.main-sidebar { .side-tools.main-sidebar {
h6 {
font-size: .9rem;
* {
font-size: inherit;
}
}
li { li {
font-size: 100%; font-size: 100%;
padding-top: .1rem; padding-top: .1em;
padding-bottom: .1rem; padding-bottom: .1em;
> * { > * {
font-size: .88rem; font-size: .8rem;
} }
} }
} }
@ -106,18 +118,17 @@
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1199px */ /* max-width: 1439px */
@media @screen_max-xlg { @media @screen_max-xlg {
.site-tools.main-sidebar { .side-tools.main-sidebar {
h6 { h6 {
font-size: 1rem; font-size: 1rem;
} }
li { li {
font-size: 1rem; font-size: 1rem;
padding-top: .15rem; padding: .15em .25rem;
padding-bottom: .15rem;
> * { > * {
font-size: 1rem; font-size: 1rem;

70
css/base_design.less
View file

@ -5,12 +5,11 @@
* @author Jana Deutschlaender <deutschlaender@cosmocode.de> * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/ */
html, body {
html, body{
background-color: @color-site-bg; background-color: @color-site-bg;
} }
a{ a {
color: @ini_existing; color: @ini_existing;
} }
@ -80,7 +79,6 @@ a{
margin-right: 0; margin-right: 0;
} }
caption, caption,
figcaption, figcaption,
summary, summary,
@ -89,6 +87,7 @@ legend {
margin: 0 0 .35em; margin: 0 0 .35em;
line-height: 1.2; line-height: 1.2;
} }
h1, h1,
h2, h2,
h3, h3,
@ -100,6 +99,7 @@ h6 {
line-height: 1.2; line-height: 1.2;
clear: both; clear: both;
} }
[dir=rtl] h1, [dir=rtl] h1,
[dir=rtl] h2, [dir=rtl] h2,
[dir=rtl] h3, [dir=rtl] h3,
@ -113,41 +113,53 @@ h1 {
font-size: 1.4rem; font-size: 1.4rem;
margin: 0 0 0.444em; margin: 0 0 0.444em;
} }
h2 { h2 {
font-size: 1.12rem; font-size: 1.12rem;
margin: 0 0 0.666em; margin: 0 0 0.666em;
} }
h3 { h3 {
font-size: 1rem; font-size: 1rem;
margin: 0 0 0.888em; margin: 0 0 0.888em;
} }
h4 { h4 {
font-size: .93rem; font-size: .93rem;
margin: 0 0 1.0em; margin: 0 0 1.0em;
} }
h5 { h5 {
font-size: .88rem; font-size: .88rem;
margin: 0 0 1.1428em; margin: 0 0 1.1428em;
} }
h6 { h6 {
font-size: .83rem; font-size: .83rem;
margin: 0 0 1.333em; margin: 0 0 1.333em;
} }
p{ p {
font-size: .83rem; font-size: .83rem;
line-height: 135%; line-height: 135%;
a, span, strong{
font-size: inherit; a,
} span,
} strong {
label, legend{
font-size: .83rem;
a, span, strong{
font-size: inherit; font-size: inherit;
} }
} }
label,
legend {
font-size: .88rem;
a,
span,
strong {
font-size: inherit;
}
}
p, p,
ul, ul,
@ -163,7 +175,7 @@ fieldset,
address { address {
font-size: .88rem; font-size: .88rem;
line-height: 140%; line-height: 140%;
margin: 0 0 1.4em 0; /* bottom margin = line-height */ margin: 0 0 1.4em; /* bottom margin = line-height */
padding: 0; padding: 0;
} }
@ -227,13 +239,29 @@ li li {
font-size: 100%; font-size: 100%;
} }
ul { list-style: square outside; } ul {
ol { list-style: decimal outside; } list-style: square 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; }
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 { table {
border-collapse: collapse; border-collapse: collapse;
@ -388,7 +416,7 @@ sup {
} }
small { small {
font-size: .8em; font-size: .9em;
} }
@ -522,7 +550,7 @@ button:focus,
.qq-upload-button:hover { .qq-upload-button:hover {
border-color: #999; border-color: #999;
background-color: #ddd; 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%); background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
} }

8
css/base_mixins.less
View file

@ -150,7 +150,7 @@
color: @color-nav; color: @color-nav;
font-size: .8rem; font-size: .8rem;
padding: 0; padding: 0;
margin: 0 .2rem 0 .1rem; margin: 0 .2rem;
* { * {
font-size: .8rem; font-size: .8rem;
@ -160,7 +160,7 @@
.btn-usertools-num () { .btn-usertools-num () {
.num { .num {
position: absolute; position: absolute;
right: -.5em; right: -.4rem;
top: -.4em; top: -.4em;
background-color: @button_background; background-color: @button_background;
border-radius: 2px; border-radius: 2px;
@ -169,7 +169,7 @@
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
padding: .2em .3em .1em; padding: .2em .2rem .1em;
transition: @transition color, @transition background-color; transition: @transition color, @transition background-color;
} }
@ -190,7 +190,7 @@
.hide-text-show-before(); .hide-text-show-before();
color: inherit; color: inherit;
font-size: 1.3em; font-size: 1rem;
margin-top: .2rem; margin-top: .2rem;
} }

40
css/plugins/bureaucracy.less
View file

@ -35,6 +35,7 @@
sup { sup {
float: right; float: right;
font-size: 1em;
} }
input, input,
@ -47,6 +48,8 @@
} }
input[type="checkbox"] { input[type="checkbox"] {
width: 1.5rem;
height: 1.5rem;
background-image: none; background-image: none;
} }
@ -54,12 +57,13 @@
float: left; float: left;
width: 50%; width: 50%;
text-align: right; text-align: right;
line-height: @line-height-default;
padding-top: .2em; padding-top: .2em;
padding-right: @grid; padding-right: @grid;
&:not([class]) { &:not([class]) {
font-weight: bold; font-weight: bold;
margin-top: .4em; margin-top: .5em;
+ input, + input,
+ select { + select {
@ -106,12 +110,34 @@
/* neutralize #icke__page .content ul, #icke__page .content ol */
#icke__page .content ul.autocompletion { #icke__page .content ul.autocompletion {}
//margin: 0;
//padding: 0.3em; 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;
}
}
} }