From fda6466f1a0bef2b5b9e9c65d98b6d435838ad4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= Date: Wed, 11 Jan 2017 14:40:43 +0100 Subject: [PATCH] font-size des root reduziert, damit default font size 1rem entspricht --- css/area_content.less | 22 +- css/area_footer.less | 5 +- css/area_main-sidebar.less | 24 +- css/area_msg.less | 2 +- css/area_nav-breadcrumb.less | 14 +- css/area_nav-metabox.less | 33 +- css/area_nav-pagetools.less | 18 +- css/area_nav-usertools.less | 310 ++++---- css/area_sidetools.less | 30 +- css/area_togglelink.less | 4 +- css/base.less | 24 +- css/base_design.less | 1303 ++++++++++++++++---------------- css/base_mixins.less | 14 +- css/base_structure.less | 17 +- css/plugins/bureaucracy.less | 258 +++---- css/plugins/magic-matcher.less | 298 ++++---- css/plugins/move.less | 4 +- css/plugins/popupviewer.less | 6 +- css/plugins/qc.less | 6 + css/plugins/struct.less | 51 +- css/template_admin.less | 8 +- style.ini | 1 + tpl/nav-meta-box.php | 2 +- tpl/nav-page-tools.php | 42 +- tpl/nav-sitetools.php | 28 +- 25 files changed, 1279 insertions(+), 1245 deletions(-) create mode 100644 css/plugins/qc.less diff --git a/css/area_content.less b/css/area_content.less index e231ee1..e2144bc 100755 --- a/css/area_content.less +++ b/css/area_content.less @@ -35,27 +35,26 @@ } .structaggregation{ - font-size: .88rem; + td, th{ - font-size: .88rem; + line-height: 125%; a{ - font-size: .88rem; + line-height: 125%; } } > a.export{ - font-size: .88rem; + line-height: 135%; padding-top: .5em; } ~ ul li .li{ - font-size: .88rem; + } } .dokuwiki .structaggregation a.export{ padding-top: .3em; - font-size: .88rem; } .main-content > .level2, @@ -64,13 +63,20 @@ .main-content > .level4, .main-content > .level5, .main-content > .level6{ - font-size: .88rem; padding-bottom: 1rem; > p, > ul > li .li{ - font-size: .88rem; a{ font-size: inherit; } } } + +.level1, .level2, .level3, .level4, .level5, .level6{ + line-height: 125%; + div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, th, td, textarea{ + line-height: 125%; + } +} + + diff --git a/css/area_footer.less b/css/area_footer.less index a217bf0..ec50151 100755 --- a/css/area_footer.less +++ b/css/area_footer.less @@ -22,9 +22,12 @@ } #dokuwiki__footer { + .main-footer { position: relative; + z-index: 10; box-sizing: border-box; + background-color: @color-site-bg; } p { @@ -67,7 +70,7 @@ &.showSidebar{ #dokuwiki__footer { .col-xs-12 { - margin-left: 2.5rem; + margin-left: @margin-big; } } } diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less index fbb3cea..abb4a9f 100755 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -12,9 +12,9 @@ /* + + + + + nav main + + + + + */ .nav-main { > ul { - @icon-size: 2rem; + @icon-size: @margin-default; - margin: 0 0 1.8rem; + margin: 0 0 @margin-default; padding: 0; ul { @@ -72,7 +72,7 @@ position: relative; z-index: 1; margin-top: -1px; - padding: .5em 0 .5em (@icon-size + 1); + padding: .5em 0 .5em (@margin-big + 1); &[class="li"] { border-bottom: solid 1px @color-border; @@ -88,7 +88,7 @@ top: 0; left: 0; height: 100%; - width: 2.5rem; + width: @margin-big; overflow: hidden; color: @color-nav; text-align: center; @@ -102,7 +102,7 @@ top: 15%; bottom: 15%; width: 1px; - left: (@icon-size + .5); + left: (@margin-big + .5); background-color: @color-border; } @@ -121,7 +121,7 @@ border: 1px solid transparent; border-radius: 2px; margin-bottom: -.3rem; - padding: .6em 0 .6em (@icon-size + 1); + padding: .7em 0 .7em (@margin-big + 1); transition: @transition color, @transition background-color, @transition border-color; &::before { @@ -135,7 +135,7 @@ bottom: 1px; left: 0; height: 100%; - width: 2.5rem; + width: @margin-big; overflow: hidden; color: @color-nav; text-align: center; @@ -150,7 +150,7 @@ top: 15%; bottom: 15%; width: 1px; - left: (@icon-size + .5); + left: @margin-big; background-color: @color-border; transition: @transition background-color; } @@ -235,7 +235,7 @@ #dokuwiki__aside.main-sidebar { .nav-main { .li { - font-size: .8rem; + font-size: @font-size-default; padding: .1em 0; * { @@ -245,7 +245,7 @@ } > ul > li > .li { - font-size: .9rem; + font-size: @font-size-default; * { font-size: inherit; @@ -263,7 +263,7 @@ #dokuwiki__aside.main-sidebar { .nav-main { .li { - font-size: .9rem; + font-size: @font-size-default; padding: .15em 0 .15em .25rem; * { @@ -273,7 +273,7 @@ } > ul > li > .li { - font-size: 1rem; + font-size: @font-size-default; > * { font-size: inherit; diff --git a/css/area_msg.less b/css/area_msg.less index 17a7430..21a47d7 100644 --- a/css/area_msg.less +++ b/css/area_msg.less @@ -2,7 +2,7 @@ clear: both; padding-top: 1.6rem; div{ - font-size: .88rem; + //font-size: .88rem; line-height: 135%; } &:empty{ diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 59b679f..933daad 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -7,14 +7,14 @@ .breadcrumbs { position: relative; border-bottom: 1px solid @color-border; - padding: .8rem 1.8rem .4rem; + padding: .8rem @margin-default @very-small-spacing; > p { - font-size: .83rem; + font-size: @font-size-small; margin: 0; * { - font-size: .83rem; + font-size: @font-size-small; } .bchead { @@ -38,7 +38,7 @@ transition: @transition border-color; &:before { - font-size: 1rem; + font-size: @font-size-default + (@font-scale-factor*2); margin-top: .17rem; } @@ -140,11 +140,11 @@ #plugin__qc__out{ h1{ - font-size: 1.2rem; + font-size: @font-size-head3; } h2{ margin-top: 1.6em; - font-size: .93rem; + font-size: @font-size-head5; } > h1, > h2, > p, >dl, >div{ padding-left: 1rem; @@ -172,7 +172,7 @@ .icon-emo-happy(); width: 100%; - font-size: .9rem; + font-size: @font-size-default; &::before { width: 100%; diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less index b8d70a7..3094c97 100755 --- a/css/area_nav-metabox.less +++ b/css/area_nav-metabox.less @@ -9,7 +9,6 @@ } ul.meta-tabs { - border-bottom: 1px solid @color-border; background-color: @background_page-header; margin: 0; padding: 0; @@ -26,21 +25,22 @@ } } > li { - margin: 0 -1px -1px; + margin: 1px -1px -1px; position: relative; display: inline-block; > a { - font-size: .78rem; margin-left: 4px; line-height: 1.42857143; position: relative; display: block; - padding: .56em 2em; + padding: .38em 2em .12em; border: 1px solid @color-border; + border-bottom: 0 none; background-color: @color-site-bg; border-radius: 4px 4px 0 0; color: @color-nav; cursor: pointer; + text-decoration: none; transition: @transition color, @transition background-color, @transition border-color; * { @@ -48,24 +48,12 @@ } .prefix { - font-size: .78rem; color: @color-nav; position: relative; transition: @transition color; + font-size: @font-size-small; } .num { - position: absolute; - right: -.8rem; - top: -.4rem; - background-color: @color-border; - border-radius: 2px; - color: @color-nav; - font-size: .56rem; - font-weight: 400; - text-align: center; - line-height: 1; - padding: .2em .2rem .1em; - transition: @transition color, @transition background-color; } &:hover, @@ -90,8 +78,7 @@ cursor: default; tab-index: -1; color: #555; - background-color: @background_page-header; - border-color: transparent; + background-color: #fff; } } } @@ -108,6 +95,10 @@ } > div { padding: .8rem .5rem .5rem; + font-size: @font-size-small; + *{ + font-size: inherit; + } p{ padding-left: 1em; } @@ -134,10 +125,10 @@ padding: 0; } > div ul.toc { - font-size: .78rem; + font-size: @font-size-small; padding-left: .5em; a { - font-size: .78rem; + font-size: @font-size-small; display: inline-block; padding-left: 10px; position: relative; diff --git a/css/area_nav-pagetools.less b/css/area_nav-pagetools.less index f09bbbf..659fd4e 100755 --- a/css/area_nav-pagetools.less +++ b/css/area_nav-pagetools.less @@ -22,16 +22,14 @@ nav#dokuwiki__pagetools{ - right: -2rem; + right: -(@margin-default); top: 3.05rem; z-index: 100; ul { li { - &:nth-child(3n+3){ - margin-bottom: 1rem; - } + *{ - font-size: .8rem; + font-size: @font-size-default; } &.plugin_move_page{ a{ @@ -42,7 +40,7 @@ nav#dokuwiki__pagetools{ } background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9InJnYigxMDUsMTA1LDEwNSkiIGQ9Ik05NDYuNCAyMTQuM3EyMi40IDAgMzggMTUuNnQxNS42IDM4djY3OC41cTAgMjIuMyAtMTUuNiAzOHQtMzggMTUuNkg0MTAuN3EtMjIuMyAwIC0zNy45IC0xNS42dC0xNS43IC0zOFY3ODUuN0g1My42cS0yMi40IDAgLTM4IC0xNS42VDAgNzMyLjF2LTM3NVEwIDMzNC44IDExLjIgMzA4dDI2LjcgLTQyLjRMMjY1LjYgMzcuOVEyODEuMyAyMi4zIDMwOCAxMS4yVDM1Ny4xIDBoMjMyLjJxMjIuMyAwIDM3LjkgMTUuNnQxNS43IDM4djE4M3EzNy45IC0yMi4zIDcxLjQgLTIyLjNoMjMyLjF6TTY0Mi45IDMzMy4xTDQ3NiA1MDBoMTY2LjlWMzMzLjF6TTI4NS43IDExOC45TDExOC45IDI4NS43aDE2Ni44VjExOC45em0xMDkuNCAzNjFMNTcxLjQgMzAzLjZWNzEuNEgzNTcuMXYyMzIuMnEwIDIyLjMgLTE1LjYgMzcuOXQtMzcuOSAxNS42SDcxLjR2MzU3LjJoMjg1LjdWNTcxLjRxMCAtMjIuMyAxMS4yIC00OS4xdDI2LjggLTQyLjR6bTUzMy41IDQ0OC43VjI4NS43SDcxNC4zdjIzMi4ycTAgMjIuMyAtMTUuNiAzNy45dC0zOCAxNS42SDQyOC42djM1Ny4yaDUwMHoiLz48L3N2Zz4=) 95% center no-repeat; - background-size: 1rem auto; + background-size: @font-size-head2 auto; &:before{ visibility: hidden; } @@ -65,7 +63,7 @@ nav#dokuwiki__pagetools{ } a{ - font-size: .8rem; + font-size: @font-size-default; &.source, &.revs, &.backlink, &.plugin_bookcreator_addtobook, &.export_pdf, &.top, &.edit, &.show{ opacity: .6; color: @color-nav; @@ -73,7 +71,7 @@ nav#dokuwiki__pagetools{ color: @color-nav; } background-position: 95% center; - background-size: 1rem auto; + background-size: @font-size-head2 auto; &:before{ visibility: hidden; } @@ -118,7 +116,7 @@ nav#dokuwiki__pagetools{ &.top{ margin-top: 1em; position: relative; - background-size: .9rem; + background-size: @font-size-default; background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4MzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDEwNSwxMDUsMTA1KSIgZD0iTTQxNi4yNSAxMDAxcS02NSAwIC0xMTAuNjI1IC00NS42MjV0LTQ1LjYyNSAtMTEwLjYyNWwwIC0yNDcuNXEtNDUgNDAgLTEwOC4xMjUgMzguMTI1dC0xMDUuNjI1IC00NC4zNzVxLTQ2LjI1IC00Ni4yNSAtNDYuMjUgLTExMC42MjV0NDYuMjUgLTExMC42MjVsMzcwIC0zNzEuMjUgMzcxLjI1IDM3MS4yNXE0Ni4yNSA0Ni4yNSA0Ni4yNSAxMTAuNjI1dC00Ni4yNSAxMTAuNjI1cS00Mi41IDQyLjUgLTEwNi4yNSA0NC4zNzV0LTEwOC43NSAtMzguMTI1bDAgMjQ3LjVxMCA2NSAtNDUuNjI1IDExMC42MjV0LTExMC42MjUgNDUuNjI1em0tNTEuMjUgLTY1NWwwIDQ5OC43NXEwIDIxLjI1IDE1IDM2Ljg3NXQzNi4yNSAxNS42MjUgMzYuODc1IC0xNS42MjUgMTUuNjI1IC0zNi44NzVsMCAtNDk4Ljc1bDE3MS4yNSAxNzEuMjVxMTUgMTUgMzYuODc1IDE1dDM2Ljg3NSAtMTUgMTUgLTM2Ljg3NSAtMTUgLTM2Ljg3NWwtMjk3LjUgLTI5Ny41IC0yOTcuNSAyOTcuNXEtMTUgMTUgLTE1IDM2Ljg3NXQxNSAzNi44NzUgMzYuODc1IDE1IDM2Ljg3NSAtMTV6Ii8+PC9zdmc+); &:hover, &:focus, &:active{ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4MzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDQwLDEwOSwxNjgpIiBkPSJNNDE2LjI1IDEwMDFxLTY1IDAgLTExMC42MjUgLTQ1LjYyNXQtNDUuNjI1IC0xMTAuNjI1bDAgLTI0Ny41cS00NSA0MCAtMTA4LjEyNSAzOC4xMjV0LTEwNS42MjUgLTQ0LjM3NXEtNDYuMjUgLTQ2LjI1IC00Ni4yNSAtMTEwLjYyNXQ0Ni4yNSAtMTEwLjYyNWwzNzAgLTM3MS4yNSAzNzEuMjUgMzcxLjI1cTQ2LjI1IDQ2LjI1IDQ2LjI1IDExMC42MjV0LTQ2LjI1IDExMC42MjVxLTQyLjUgNDIuNSAtMTA2LjI1IDQ0LjM3NXQtMTA4Ljc1IC0zOC4xMjVsMCAyNDcuNXEwIDY1IC00NS42MjUgMTEwLjYyNXQtMTEwLjYyNSA0NS42MjV6bS01MS4yNSAtNjU1bDAgNDk4Ljc1cTAgMjEuMjUgMTUgMzYuODc1dDM2LjI1IDE1LjYyNSAzNi44NzUgLTE1LjYyNSAxNS42MjUgLTM2Ljg3NWwwIC00OTguNzVsMTcxLjI1IDE3MS4yNXExNSAxNSAzNi44NzUgMTV0MzYuODc1IC0xNSAxNSAtMzYuODc1IC0xNSAtMzYuODc1bC0yOTcuNSAtMjk3LjUgLTI5Ny41IDI5Ny41cS0xNSAxNSAtMTUgMzYuODc1dDE1IDM2Ljg3NSAzNi44NzUgMTUgMzYuODc1IC0xNXoiLz48L3N2Zz4=); @@ -131,7 +129,7 @@ nav#dokuwiki__pagetools{ } } &.export_pdf{ - background-size: .9rem auto; + background-size: @font-size-default auto; background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoMTA1LDEwNSwxMDUpIiBkPSJNODE5LjIgMjEyLjFxMTUuNiAxNS42IDI2LjggNDIuNHQxMS4xIDQ5LjF2NjQyLjhxMCAyMi40IC0xNS42IDM4dC0zNy45IDE1LjZoLTc1MHEtMjIuMyAwIC0zOCAtMTUuNlQwIDk0Ni40VjUzLjZxMCAtMjIuNCAxNS42IC0zOFQ1My42IDBoNTAwcTIyLjMgMCA0OS4xIDExLjJ0NDIuNCAyNi43ek01NzEuNCA3NS45djIwOS44aDIwOS45UTc3NS43IDI2OS41IDc2OSAyNjIuOEw1OTQuMyA4OC4ycS02LjcgLTYuNyAtMjIuOSAtMTIuM3ptMjE0LjMgODUyLjdWMzU3LjFINTUzLjZxLTIyLjMgMCAtMzggLTE1LjZUNTAwIDMwMy42VjcxLjRINzEuNHY4NTcuMmg3MTQuM3pNNDk4LjkgNTk3LjdxMTguNCAxNC41IDQ2LjkgMzEuMlE1NzguNyA2MjUgNjExIDYyNXE4Mi4xIDAgOTguOCAyNy4zIDkgMTIuMyAxLjEgMjkuMSAwIC41IC0uNSAxLjFsLTEuMSAxLjF2LjZxLTMuNCAyMS4yIC0zOS43IDIxLjIgLTI2LjcgMCAtNjQuMSAtMTEuMnQtNzIuNiAtMjkuNlE0MDkuNiA2NzggMzE0LjIgNzEwLjkgMjI4LjggODU3LjEgMTc5LjEgODU3LjFxLTguMyAwIC0xNS42IC0zLjlsLTEzLjQgLTYuN3EtLjUgLS41IC0zLjMgLTIuOCAtNS42IC01LjUgLTMuNCAtMjAgNSAtMjIuNCAzMS4zIC01MS4xdDczLjYgLTUzLjlxNy44IC01IDEyLjkgMy40IDEuMSAxLjEgMS4xIDIuMiAyOSAtNDcuNCA1OS43IC0xMDkuOSAzNy45IC03NS45IDU4IC0xNDYuMiAtMTMuNCAtNDUuOCAtMTcgLTg5dDMuNiAtNzEuMnE2LjIgLTIyLjMgMjMuNSAtMjIuM2gxMi4ycTEyLjkgMCAxOS42IDguNCAxMCAxMS43IDUgMzcuOSAtMS4xIDMuNCAtMi4yIDQuNSAuNSAxLjcgLjUgNC41djE2LjdxLTEuMSA2OC42IC03LjggMTA3LjEgMzAuNyA5MS42IDgxLjUgMTMyLjl6TTE3Ny41IDgyN3EyOSAtMTMuNCA3Ni40IC04OC4yIC0yOC41IDIyLjQgLTQ4LjggNDYuOVQxNzcuNSA4Mjd6TTM5OS42IDMxMy42cS04LjQgMjMuNSAtMS4yIDczLjcgLjYgLTMuOSAzLjkgLTI0LjYgMCAtMS43IDQgLTI0IC41IC0yLjIgMi4yIC00LjQgLS42IC0uNiAtLjYgLTEuMiAtLjUgLTEuMSAtLjUgLTEuNiAtLjYgLTEyLjMgLTcuMyAtMjAuMSAwIC41IC0uNSAxLjF2MS4xem0tNjkuMiAzNjguOXE3NS4zIC0zMC4yIDE1OC40IC00NS4yIC0xLjEgLS42IC03LjIgLTUuM3QtOC45IC03LjZxLTQyLjUgLTM3LjMgLTcwLjkgLTk4LjIgLTE1LjEgNDggLTQ2LjMgMTEwIC0xNi44IDMxLjIgLTI1LjEgNDYuM3ptMzYwLjQgLTlxLTEzLjMgLTEzLjMgLTc4LjEgLTEzLjMgNDIuNCAxNS42IDY5LjIgMTUuNiA3LjggMCAxMC4xIC0uNiAwIC0uNSAtMS4yIC0xLjd6Ii8+PC9zdmc+); &:hover, &:focus, &:active{ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoNDAsMTA5LDE2OCkiIGQ9Ik04MTkuMiAyMTIuMXExNS42IDE1LjYgMjYuOCA0Mi40dDExLjEgNDkuMXY2NDIuOHEwIDIyLjQgLTE1LjYgMzh0LTM3LjkgMTUuNmgtNzUwcS0yMi4zIDAgLTM4IC0xNS42VDAgOTQ2LjRWNTMuNnEwIC0yMi40IDE1LjYgLTM4VDUzLjYgMGg1MDBxMjIuMyAwIDQ5LjEgMTEuMnQ0Mi40IDI2Ljd6TTU3MS40IDc1Ljl2MjA5LjhoMjA5LjlRNzc1LjcgMjY5LjUgNzY5IDI2Mi44TDU5NC4zIDg4LjJxLTYuNyAtNi43IC0yMi45IC0xMi4zem0yMTQuMyA4NTIuN1YzNTcuMUg1NTMuNnEtMjIuMyAwIC0zOCAtMTUuNlQ1MDAgMzAzLjZWNzEuNEg3MS40djg1Ny4yaDcxNC4zek00OTguOSA1OTcuN3ExOC40IDE0LjUgNDYuOSAzMS4yUTU3OC43IDYyNSA2MTEgNjI1cTgyLjEgMCA5OC44IDI3LjMgOSAxMi4zIDEuMSAyOS4xIDAgLjUgLS41IDEuMWwtMS4xIDEuMXYuNnEtMy40IDIxLjIgLTM5LjcgMjEuMiAtMjYuNyAwIC02NC4xIC0xMS4ydC03Mi42IC0yOS42UTQwOS42IDY3OCAzMTQuMiA3MTAuOSAyMjguOCA4NTcuMSAxNzkuMSA4NTcuMXEtOC4zIDAgLTE1LjYgLTMuOWwtMTMuNCAtNi43cS0uNSAtLjUgLTMuMyAtMi44IC01LjYgLTUuNSAtMy40IC0yMCA1IC0yMi40IDMxLjMgLTUxLjF0NzMuNiAtNTMuOXE3LjggLTUgMTIuOSAzLjQgMS4xIDEuMSAxLjEgMi4yIDI5IC00Ny40IDU5LjcgLTEwOS45IDM3LjkgLTc1LjkgNTggLTE0Ni4yIC0xMy40IC00NS44IC0xNyAtODl0My42IC03MS4ycTYuMiAtMjIuMyAyMy41IC0yMi4zaDEyLjJxMTIuOSAwIDE5LjYgOC40IDEwIDExLjcgNSAzNy45IC0xLjEgMy40IC0yLjIgNC41IC41IDEuNyAuNSA0LjV2MTYuN3EtMS4xIDY4LjYgLTcuOCAxMDcuMSAzMC43IDkxLjYgODEuNSAxMzIuOXpNMTc3LjUgODI3cTI5IC0xMy40IDc2LjQgLTg4LjIgLTI4LjUgMjIuNCAtNDguOCA0Ni45VDE3Ny41IDgyN3pNMzk5LjYgMzEzLjZxLTguNCAyMy41IC0xLjIgNzMuNyAuNiAtMy45IDMuOSAtMjQuNiAwIC0xLjcgNCAtMjQgLjUgLTIuMiAyLjIgLTQuNCAtLjYgLS42IC0uNiAtMS4yIC0uNSAtMS4xIC0uNSAtMS42IC0uNiAtMTIuMyAtNy4zIC0yMC4xIDAgLjUgLS41IDEuMXYxLjF6bS02OS4yIDM2OC45cTc1LjMgLTMwLjIgMTU4LjQgLTQ1LjIgLTEuMSAtLjYgLTcuMiAtNS4zdC04LjkgLTcuNnEtNDIuNSAtMzcuMyAtNzAuOSAtOTguMiAtMTUuMSA0OCAtNDYuMyAxMTAgLTE2LjggMzEuMiAtMjUuMSA0Ni4zem0zNjAuNCAtOXEtMTMuMyAtMTMuMyAtNzguMSAtMTMuMyA0Mi40IDE1LjYgNjkuMiAxNS42IDcuOCAwIDEwLjEgLS42IDAgLS41IC0xLjIgLTEuN3oiLz48L3N2Zz4=); diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 9b7dbb6..1ad7c5a 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -1,155 +1,155 @@ -/** - * This file provides the design styles for the direct / menu jump links. - * - * @author Jana Deutschlaender - */ - - -.nav-usertools { - &.has-bar { - margin-top: @height-context-bar; - padding-top: .5em; - } - - -/* + + + + + icon list + + + + + */ - ul { - float: right; - padding: 0; - margin: .2em -.2rem 0 0; - - li { - .btn-usertools-wrapper(); // uniform li - .btn-usertools-num(); - - float: right; - - > strong, - > a { - display: block; - width: auto; - min-height: 2em; - border: 1px solid @color-border; - border-radius: @border-radius; - color: @color-nav; - text-align: center; - margin: 0; - } - - &.noopentasks { - strong { - background-color: @color-site-bg; - } - - .num { - background-color: @color-border; - color: @color-nav; - } - } - - &.user { - border: 1px solid @color-border; - border-radius: @border-radius; - padding: .3em .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: .6rem; - margin: -2px 6px -2px 0; - } - } - } // user - - &.user-task { - position: relative; - - a { - position: relative; - overflow: visible; - white-space: normal; - text-indent: 0; - - &::before { - content: ''; - position: absolute; - } - } - - .prefix { - .btn-prefix(); - .icon-clipboard(); - } - } // user-task - } // li - - -/* + + + icons + + + */ - a { - .fontello(); - .hide-text-show-before(); - - cursor: pointer; - background-color: #fff; - text-decoration: none; - 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); - color: @button_background; - } - - &::before { - content: "?"; - display: block; - width: 100%; - box-sizing: border-box; - font-size: 1.4em; - cursor: pointer; - margin: .2em 0 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(); - - &::before { - margin-top: .18rem; - } - } - } // a - } // ul -} // nav-usertools +/** + * This file provides the design styles for the direct / menu jump links. + * + * @author Jana Deutschlaender + */ + + +.nav-usertools { + &.has-bar { + margin-top: @height-context-bar; + padding-top: .5em; + } + + +/* + + + + + icon list + + + + + */ + ul { + float: right; + padding: 0; + margin: @very-small-spacing -(@very-small-spacing) 0 0; + + li { + .btn-usertools-wrapper(); // uniform li + .btn-usertools-num(); + + float: right; + + > strong, + > a { + display: block; + width: auto; + min-height: 2em; + border: 1px solid @color-border; + border-radius: @border-radius; + color: @color-nav; + text-align: center; + margin: 0; + } + + &.noopentasks { + strong { + background-color: @color-site-bg; + } + + .num { + background-color: @color-border; + color: @color-nav; + } + } + + &.user { + border: 1px solid @color-border; + border-radius: @border-radius; + padding: .3em .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: @font-size-small; + margin: -2px 6px -2px 0; + } + } + } // user + + &.user-task { + position: relative; + + a { + position: relative; + overflow: visible; + white-space: normal; + text-indent: 0; + + &::before { + content: ''; + position: absolute; + } + } + + .prefix { + .btn-prefix(); + .icon-clipboard(); + } + } // user-task + } // li + + +/* + + + icons + + + */ + a { + .fontello(); + .hide-text-show-before(); + + cursor: pointer; + background-color: #fff; + text-decoration: none; + 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); + color: @button_background; + } + + &::before { + content: "?"; + display: block; + width: 100%; + box-sizing: border-box; + font-size: @font-size-default + (@font-scale-factor * 4); + cursor: pointer; + margin: .2em 0 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(); + + &::before { + margin-top: .18rem; + } + } + } // a + } // ul +} // nav-usertools diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 25fdd19..ba5652a 100755 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -6,13 +6,13 @@ .side-tools.main-sidebar { - @icon-size: 2rem; + @icon-size: @margin-default; counter-increment: bar-counter; ul, .trace { - padding-left: (@icon-size + .5); + padding-left: (@margin-big + .5); } ul { @@ -45,7 +45,7 @@ > nav { > ul { margin: 0; - padding: 0 0 0 (@icon-size + .5); + padding: 0 0 0 (@margin-big + .5); li { list-style-type: none; @@ -66,7 +66,7 @@ height: auto; color: @color-nav; font-weight: normal; - padding: .5em 0 .5em (@icon-size + 1.1); + padding: .7em 0 .7em (@margin-big + 1.1); &[class="sr-only"] { border-bottom: solid 1px @color-border; @@ -88,7 +88,7 @@ top: 0; left: 0; height: 100%; - width: 2.5rem; + width: @margin-big; overflow: hidden; text-align: center; margin-top: auto; @@ -103,7 +103,7 @@ top: 15%; bottom: 15%; width: 1px; - left: (@icon-size + .6); + left: (@margin-big + .6); background-color: @color-border; transition: @transition background-color; } @@ -130,7 +130,7 @@ display: block; border: 1px solid transparent; border-radius: 2px; - padding: .6em 0 .6em (@icon-size + 1); + padding: .6em 0 .6em (@margin-big + 1); transition: @transition color, @transition background-color, @transition border-color; &::before { @@ -144,7 +144,7 @@ bottom: 1px; left: 0; height: 100%; - width: 2.5rem; + width: @margin-big; overflow: hidden; color: @color-nav; text-align: center; @@ -159,7 +159,7 @@ top: 15%; bottom: 15%; width: 1px; - left: (@icon-size + .5); + left: @margin-big; background-color: @color-border; transition: @transition background-color; } @@ -244,7 +244,7 @@ background-color: @color-content-bg; border: 1px solid @button_background; border-radius: 2px; - font-size: .8rem; + font-size: @font-size-small; margin-top: .1rem; padding: .3rem .6em; @@ -294,7 +294,7 @@ @media @screen_min-xlg { .side-tools.main-sidebar { h6 { - font-size: .9rem; + font-size: @font-size-default; * { font-size: inherit; @@ -302,7 +302,7 @@ } li { - font-size: .8rem; + font-size: @font-size-small; padding: .1em 0 .1em .1rem; > * { @@ -319,11 +319,11 @@ @media @screen_max-xlg { .side-tools.main-sidebar { h6 { - font-size: 1rem; + font-size: @font-size-default; } li { - font-size: .9rem; + font-size: @font-size-small; padding: .15em 0 .15em .23rem; > * { @@ -332,7 +332,7 @@ } p { - font-size: .9rem; + font-size: @font-size-small; } } } diff --git a/css/area_togglelink.less b/css/area_togglelink.less index a344f70..cc37018 100644 --- a/css/area_togglelink.less +++ b/css/area_togglelink.less @@ -10,7 +10,7 @@ position: absolute; top: -1px; bottom: -1px; - left: -2rem; + left: -(@margin-default); z-index: 1; a { @@ -18,7 +18,7 @@ .flex-direction(); .justify-content(); - width: 2rem; + width: (@margin-default); height: 100%; background-color: @button_background; border: solid 1px @button_background; diff --git a/css/base.less b/css/base.less index d5c26de..bb8be28 100755 --- a/css/base.less +++ b/css/base.less @@ -42,8 +42,11 @@ @height-context-bar: 50px; @margin-small: 1rem; -@margin-default: 1.5rem; -@margin-big: 2.5rem; +@margin-default: 2rem; +@margin-big: 3.07rem; + +@small-spacing: .3rem; +@very-small-spacing: .2rem; @grid: @margin-small; @@ -53,8 +56,9 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* fonts */ -@font-size-small: .75rem; -@font-size-default: .88rem; +@font-size-very-small: .73rem; +@font-size-small: .88rem; +@font-size-default: 1rem; @font-size-big: 1.5rem; @font-size-bigger: 1.75rem; @@ -62,6 +66,17 @@ @line-height-big: 135%; @line-height-bigger: 140%; +@font-weight-bold: 800; +@font-weight-normal: 400; + +@font-scale-factor: .0769; + +@font-size-head6: @font-size-default; +@font-size-head5: @font-size-default + @font-scale-factor; +@font-size-head4: @font-size-default + (@font-scale-factor * 2); +@font-size-head3: @font-size-default + (@font-scale-factor * 3); +@font-size-head2: @font-size-default + (@font-scale-factor * 4); +@font-size-head1: @font-size-default + (@font-scale-factor * 5); /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* breakpoints */ @@ -140,7 +155,6 @@ html, body { .reset(); - font-size: 100.1%; } diff --git a/css/base_design.less b/css/base_design.less index 37ae4c0..144ccf7 100755 --- a/css/base_design.less +++ b/css/base_design.less @@ -1,651 +1,652 @@ -/** - * This file provides the main design styles - * across all template elements (typo, colors etc.) - * - * @author Jana Deutschlaender - */ - - -html, body { - background-color: @color-site-bg; -} - -a { - color: @color-link; -} - -/* highlight selected tool */ -.mode_admin a.action.admin, -.mode_login a.action.login, -.mode_register a.action.register, -.mode_profile a.action.profile, -.mode_recent a.action.recent, -.mode_index a.action.index, -.mode_media a.action.media, -.mode_revisions a.action.revs, -.mode_backlink a.action.backlink, -.mode_subscribe a.action.subscribe { - font-weight: bold; -} - -.dokuwiki .pageId { - float: right; - margin-right: -1em; - margin-bottom: -1px; - margin-top: -1.5em; - overflow: hidden; - padding: 0.5em 1em 0; - - span { - font-size: 0.875em; - border: solid @ini_background_alt; - border-width: 1px 1px 0; - background-color: @ini_background; - color: @ini_text_alt; - padding: .1em .35em; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - box-shadow: 0 0 .5em @ini_text_alt; - display: block; - } -} - -.dokuwiki div.page { - clear: both; - background: @color-content-bg; - color: inherit; - padding: 1rem 2rem 2rem; - // margin-bottom: .5rem; // no margin: if there is another bg-color, then there is an #fff border - overflow: hidden; - word-wrap: break-word; -} - -.dokuwiki .docInfo { - font-size: 0.5rem; - text-align: right; -} - -/* license note under edit window */ -.dokuwiki div.license { - font-size: 93.75%; -} - -[dir=rtl] .dokuwiki .docInfo { - text-align: left; -} - -[dir=rtl] .dokuwiki .pageId { - float: left; - margin-left: -1em; - margin-right: 0; -} - -caption, -figcaption, -summary, -legend { - padding: 0; - margin: 0 0 .35em; - line-height: 1.2; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: bold; - padding: 0; - line-height: 1.2; - clear: both; -} - -[dir=rtl] h1, -[dir=rtl] h2, -[dir=rtl] h3, -[dir=rtl] h4, -[dir=rtl] h5, -[dir=rtl] h6 { - clear: right; -} - -h1 { - font-size: 1.4rem; - margin: 0 0 0.444em; - padding-top: 1em; -} - -h2 { - font-size: 1.12rem; - margin: 0 0 0.666em; -} - -h3 { - font-size: 1rem; - margin: 0 0 0.888em; -} - -h4 { - font-size: .94rem; - margin: 0 0 1.0em; -} - -h5 { - font-size: .88rem; - margin: 0 0 1.1428em; -} - -h6 { - font-size: .83rem; - margin: 0 0 1.333em; -} - -p { - font-size: .88rem; - line-height: 135%; - - a, - span, - strong { - font-size: inherit; - } -} - -label, -legend, -button { - font-size: .88rem; - - a, - span, - strong { - font-size: inherit; - } -} - -hr, -figure, -details, -address { - font-size: .88rem; - line-height: 140%; -} - -p, -ul, -ol, -dl, -pre, -table, -hr, -blockquote, -figure, -details, -fieldset, -address { - margin: 0 0 1.4em; /* bottom margin = line-height */ - padding: 0; -} - -div, -video, -audio { - margin: 0; - padding: 0; -} - -small, -.code { - font-size: .75rem; -} - -.code { - margin-top: @grid; -} - - -/*____________ lists ____________*/ - -ul, -ol { - font-size: .88rem; - line-height: 140%; - padding: 0 0 0 1.5em; -} - -[dir=rtl] ul, -[dir=rtl] ol { - padding: 0 1.5em 0 0; -} - -li, -dd { - padding: 0; - margin: 0 0 0 1.5em; -} - -[dir=rtl] li, -[dir=rtl] dd { - margin: 0 1.5em 0 0; -} - -dl { - font-size: .88rem; - line-height: 140%; -} - -dt { - font-weight: bold; - margin: 0; - padding: 0; -} - -li ul, -li ol, -li dl, -dl ul, -dl ol, -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; -} - -table { - border-collapse: collapse; - empty-cells: show; - border-spacing: 0; - border: 1px solid @color-border; - font-size: .88rem; - line-height: 140%; -} - -caption { - caption-side: top; - text-align: left; -} - -[dir=rtl] caption { - text-align: right; -} - -th, -td { - padding: .3em .5em; - margin: 0; - vertical-align: top; - border: 1px solid @color-border; -} - -th { - font-weight: bold; - background-color: @ini_background_alt; - text-align: left; -} - -[dir=rtl] th { - text-align: right; -} - -a { - outline: none; -} - -a:link, -a:visited { - text-decoration: none; - color: @color-link; -} - -a:hover, -a:focus, -a:active { - text-decoration: underline; -} - -img { - display: inline-block; - border-width: 0; - vertical-align: middle; - color: #666; - background-color: transparent; - font-style: italic; - height: auto; -} - -img, -object, -embed, -iframe, -video, -audio { - max-width: 100%; -} - -button img { - max-width: none; -} - -hr { - border-top: solid @color-border; - border-bottom: solid @ini_background; - border-width: 1px 0; - height: 0; - text-align: center; - clear: both; -} - -acronym, -abbr { - cursor: help; - border-bottom: 1px dotted; - font-style: normal; -} - -em acronym, -em abbr { - font-style: italic; -} - -mark { - background-color: @ini_highlight; - color: inherit; -} - -pre, -code, -samp, -kbd { - font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; - /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */ - font-size: 1em; - direction: ltr; - text-align: left; - 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 @color-border; - border-radius: 2px; - box-shadow: inset 0 0 .5em @color-border; - font-size: .88rem; - line-height: 140%; - padding: .7em 1em; -} - -blockquote { - border: solid @color-border; - border-width: 0 0 0 .25em; - font-size: .88rem; - line-height: 140%; - padding: 0 .5em; -} - -[dir=rtl] blockquote { - border-width: 0 .25em 0 0; -} - -q:before, -q:after { - content: ''; -} - -sub, -sup { - font-size: .8em; - line-height: 1; -} - -sub { - vertical-align: sub; -} - -sup { - vertical-align: super; -} - -small { - font-size: .9em; -} - - -/*____________ forms ____________*/ - -/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ - -form { - display: inline; - margin: 0; - padding: 0; -} - -fieldset { - font-size: .88rem; - line-height: 140%; - border: 1px solid @ini_text_alt; - padding: .7rem 1rem; -} - -fieldset > :last-child { - margin-bottom: 0; -} - -legend { - margin: 0; - padding: 0 .1em; -} - -label { - vertical-align: middle; - cursor: pointer; -} - -input, -textarea, -button, -select, -optgroup, -option, -keygen, -output, -meter, -progress { - font: inherit; - font-weight: normal; - color: #333; - background-color: #fff; - line-height: normal; - margin: 0; - vertical-align: middle; - box-sizing: border-box; -} - -select { - max-width: 100%; -} - -textarea.edit { - font-size: .88em; -} - -optgroup { - font-style: italic; - font-weight: bold; -} - -option { - font-style: normal; - font-weight: normal; -} - -input, -textarea, -select, -keygen { - border: 1px solid #ccc; - box-shadow: inset 0 0 1px #eee; - border-radius: 2px; -} - -input:active, -input:focus, -textarea:active, -textarea:focus, -select:active, -select:focus, -keygen:active, -keygen:focus { - border-color: #999; -} - -input[type=radio], -input[type=checkbox], -input[type=image] { - padding: 0; - border-style: none; - box-shadow: none; -} - - -/* + + + + + 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; - } -} - - -/* + + + 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; - } -} - - -/* + + + 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], -textarea[disabled], -option[disabled], -input[readonly], -button[readonly], -select[readonly], -textarea[readonly] { - cursor: auto; - 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; -} +/** + * This file provides the main design styles + * across all template elements (typo, colors etc.) + * + * @author Jana Deutschlaender + */ + + +html, body { + background-color: @color-site-bg; +} + +a { + color: @color-link; +} + +/* highlight selected tool */ +.mode_admin a.action.admin, +.mode_login a.action.login, +.mode_register a.action.register, +.mode_profile a.action.profile, +.mode_recent a.action.recent, +.mode_index a.action.index, +.mode_media a.action.media, +.mode_revisions a.action.revs, +.mode_backlink a.action.backlink, +.mode_subscribe a.action.subscribe { + font-weight: bold; +} + +.dokuwiki .pageId { + float: right; + margin-right: -1em; + margin-bottom: -1px; + margin-top: -1.5em; + overflow: hidden; + padding: 0.5em 1em 0; + + span { + font-size: @font-size-small; + border: solid @ini_background_alt; + border-width: 1px 1px 0; + background-color: @ini_background; + color: @ini_text_alt; + padding: .1em .35em; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + box-shadow: 0 0 .5em @ini_text_alt; + display: block; + } +} + +.dokuwiki div.page { + clear: both; + background: @color-content-bg; + color: inherit; + padding: (@margin-default / 2) @margin-default @margin-default; + // margin-bottom: .5rem; // no margin: if there is another bg-color, then there is an #fff border + overflow: hidden; + word-wrap: break-word; +} + +.dokuwiki .docInfo { + font-size: @font-size-small; + text-align: right; +} + +/* license note under edit window */ +.dokuwiki div.license { + font-size: @font-size-small; +} + +[dir=rtl] .dokuwiki .docInfo { + text-align: left; +} + +[dir=rtl] .dokuwiki .pageId { + float: left; + margin-left: -1em; + margin-right: 0; +} + +caption, +figcaption, +summary, +legend { + padding: 0; + margin: 0 0 .35em; + line-height: 1.2; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + padding: 0; + line-height: 1.2; + clear: both; +} + +[dir=rtl] h1, +[dir=rtl] h2, +[dir=rtl] h3, +[dir=rtl] h4, +[dir=rtl] h5, +[dir=rtl] h6 { + clear: right; +} + +h1 { + font-size: @font-size-head1; + margin: 0 0 0.444em; + padding-top: 1em; +} + +h2 { + font-size: @font-size-head2; + margin: 0 0 0.666em; +} + +h3 { + font-size: @font-size-head3; + margin: 0 0 0.888em; +} + +h4 { + font-size: @font-size-head4; + margin: 0 0 1.0em; +} + +h5 { + font-size: @font-size-head5; + margin: 0 0 1.1428em; +} + +h6 { + font-size: @font-size-head6; + font-weight: @font-weight-bold; + margin: 0 0 1.333em; +} + +p { + font-size: @font-size-default; + line-height: 135%; + + a, + span, + strong { + font-size: inherit; + } +} + +label, +legend, +button { + font-size: @font-size-default; + + a, + span, + strong { + font-size: inherit; + } +} + +hr, +figure, +details, +address { + font-size: @font-size-default; + line-height: 140%; +} + +p, +ul, +ol, +dl, +pre, +table, +hr, +blockquote, +figure, +details, +fieldset, +address { + margin: 0 0 1.4em; /* bottom margin = line-height */ + padding: 0; +} + +div, +video, +audio { + margin: 0; + padding: 0; +} + +small, +.code { + font-size: @font-size-small; +} + +.code { + margin-top: @grid; +} + + +/*____________ lists ____________*/ + +ul, +ol { + font-size: @font-size-default; + line-height: 140%; + padding: 0 0 0 1.5em; +} + +[dir=rtl] ul, +[dir=rtl] ol { + padding: 0 1.5em 0 0; +} + +li, +dd { + padding: 0; + margin: 0 0 0 1.5em; +} + +[dir=rtl] li, +[dir=rtl] dd { + margin: 0 1.5em 0 0; +} + +dl { + font-size: @font-size-default; + line-height: 140%; +} + +dt { + font-weight: bold; + margin: 0; + padding: 0; +} + +li ul, +li ol, +li dl, +dl ul, +dl ol, +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; +} + +table { + border-collapse: collapse; + empty-cells: show; + border-spacing: 0; + border: 1px solid @color-border; + font-size: @font-size-default; + line-height: 140%; +} + +caption { + caption-side: top; + text-align: left; +} + +[dir=rtl] caption { + text-align: right; +} + +th, +td { + padding: .3em .5em; + margin: 0; + vertical-align: top; + border: 1px solid @color-border; +} + +th { + font-weight: bold; + background-color: @ini_background_alt; + text-align: left; +} + +[dir=rtl] th { + text-align: right; +} + +a { + outline: none; +} + +a:link, +a:visited { + text-decoration: none; + color: @color-link; +} + +a:hover, +a:focus, +a:active { + text-decoration: underline; +} + +img { + display: inline-block; + border-width: 0; + vertical-align: middle; + color: #666; + background-color: transparent; + font-style: italic; + height: auto; +} + +img, +object, +embed, +iframe, +video, +audio { + max-width: 100%; +} + +button img { + max-width: none; +} + +hr { + border-top: solid @color-border; + border-bottom: solid @ini_background; + border-width: 1px 0; + height: 0; + text-align: center; + clear: both; +} + +acronym, +abbr { + cursor: help; + border-bottom: 1px dotted; + font-style: normal; +} + +em acronym, +em abbr { + font-style: italic; +} + +mark { + background-color: @ini_highlight; + color: inherit; +} + +pre, +code, +samp, +kbd { + font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; + /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */ + font-size: @font-size-default; + direction: ltr; + text-align: left; + 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 @color-border; + border-radius: 2px; + box-shadow: inset 0 0 .5em @color-border; + font-size: @font-size-default; + line-height: 140%; + padding: .7em 1em; +} + +blockquote { + border: solid @color-border; + border-width: 0 0 0 .25em; + font-size: @font-size-default; + line-height: 140%; + padding: 0 .5em; +} + +[dir=rtl] blockquote { + border-width: 0 .25em 0 0; +} + +q:before, +q:after { + content: ''; +} + +sub, +sup { + font-size: .8em; + line-height: 1; +} + +sub { + vertical-align: sub; +} + +sup { + vertical-align: super; +} + +small { + font-size: .9em; +} + + +/*____________ forms ____________*/ + +/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ + +form { + display: inline; + margin: 0; + padding: 0; +} + +fieldset { + font-size: @font-size-default; + line-height: 140%; + border: 1px solid @ini_text_alt; + padding: .7rem 1rem; +} + +fieldset > :last-child { + margin-bottom: 0; +} + +legend { + margin: 0; + padding: 0 .1em; +} + +label { + vertical-align: middle; + cursor: pointer; +} + +input, +textarea, +button, +select, +optgroup, +option, +keygen, +output, +meter, +progress { + font: inherit; + font-weight: normal; + color: #333; + background-color: #fff; + line-height: normal; + margin: 0; + vertical-align: middle; + box-sizing: border-box; +} + +select { + max-width: 100%; +} + +textarea.edit { + font-size: @font-size-default; +} + +optgroup { + font-style: italic; + font-weight: bold; +} + +option { + font-style: normal; + font-weight: normal; +} + +input, +textarea, +select, +keygen { + border: 1px solid #ccc; + box-shadow: inset 0 0 1px #eee; + border-radius: 2px; +} + +input:active, +input:focus, +textarea:active, +textarea:focus, +select:active, +select:focus, +keygen:active, +keygen:focus { + border-color: #999; +} + +input[type=radio], +input[type=checkbox], +input[type=image] { + padding: 0; + border-style: none; + box-shadow: none; +} + + +/* + + + + + 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; + } +} + + +/* + + + 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; + } +} + + +/* + + + 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], +textarea[disabled], +option[disabled], +input[readonly], +button[readonly], +select[readonly], +textarea[readonly] { + cursor: auto; + 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; +} diff --git a/css/base_mixins.less b/css/base_mixins.less index 456ff9d..83a12bd 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -148,12 +148,12 @@ min-width: @elem; box-sizing: border-box; color: @color-nav; - font-size: .8rem; + font-size: @font-size-small; padding: 0; - margin: 0 .2rem; + margin: 0 @very-small-spacing; * { - font-size: .8rem; + font-size: @font-size-small; } } @@ -165,11 +165,11 @@ background-color: @button_background; border-radius: 2px; color: @button_color; - font-size: .6rem; + font-size: @font-size-very-small; font-weight: 400; text-align: center; line-height: 1; - padding: .2em .2rem .1em; + padding: @very-small-spacing @very-small-spacing .1em; transition: @transition color, @transition background-color; } @@ -190,8 +190,8 @@ .hide-text-show-before(); color: inherit; - font-size: 1rem; - margin-top: .2rem; + font-size: @font-size-default; + margin-top: @very-small-spacing; } diff --git a/css/base_structure.less b/css/base_structure.less index 0b99418..4465db6 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -25,25 +25,34 @@ @media @screen_min-sm { .make-grid(sm); + html { + font-size: 100%; //16px + } } @media @screen_min-md { .make-grid(md); + html { + font-size: 81.25%; //13px + } } @media @screen_min-lg { .make-grid(lg); + html { + font-size: 87.5%; //14px + } } @media @screen_min-xlg { html { - font-size: 120%; + font-size: 93.75%; //15px } } @media @screen_min-xxlg { html { - //font-size: 135%; + font-size: 106.25%; //17px } } @@ -173,7 +182,7 @@ &.showSidebar{ .content { .row > .col-xs-12 { - margin-left: 2.5rem; + margin-left: @margin-big; } } } @@ -192,7 +201,7 @@ @media @screen_max-md { .container { - margin: 0 2.5rem 0 1.25rem; + margin: 0 @margin-big 0 1.25rem; } #dokuwiki__usertools { diff --git a/css/plugins/bureaucracy.less b/css/plugins/bureaucracy.less index 6eabdc9..3b705c8 100755 --- a/css/plugins/bureaucracy.less +++ b/css/plugins/bureaucracy.less @@ -1,129 +1,129 @@ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* 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"] { - margin-top: (@grid * 2); - } -} - - - - -#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; - } - } -} - +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* 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: @font-size-small; + 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"] { + margin-top: (@grid * 2); + } +} + + + + +#icke__page .content ul.autocompletion {} + +ul.autocompletion li {} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + .dokuwiki form.bureaucracy__plugin { + p { + font-size: @font-size-default; + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1439px */ + +@media @screen_max-xlg { + .dokuwiki form.bureaucracy__plugin { + p, + label, + button[type="submit"] { + font-size: @font-size-default; + } + } +} + diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index 9f2a528..b16bd6e 100755 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -1,149 +1,149 @@ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* all media */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - - -/* + + + + + + + + + + + + + + + + + + + + + + + */ -/* magic matcher bar with form on top of page */ - -#dokuwiki_magic-matcher { - position: fixed; - top: 0; - left: 0; - width: 100%; - - #mm__issueselect_chosen { - max-width: 50%; - } - - button[name="toggleSuggestions"] { - position: absolute; - right: 0; - top: 0; - border: 0; - border-bottom: 1px solid @color-border; - border-left: 1px solid @color-border; - color: @color-nav; - background: #fff; - border-radius: 0; - border-bottom-left-radius: 5px; - - &:hover, - &:focus, - &:active { - border-color: @button_background; - color: @button_background; - } - } - - #magicmatcher__context { - 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; - - .chosen-container-single, - .chosen-container-single *, - #mm_issue_loading, - .mm__status, - .toggleSuggestions { - font-size: .88rem; - } - - .chosen-container-single { - .chosen-single span { - line-height: @line-height-bigger; - } - } - - @media @screen_max-md { - padding-top: 1.8rem; - - .chosen-container { - display: block; - min-width: 100%; - max-width: 100%; - margin-bottom: .5rem; - } - } - } -} - -/* + + + + + in content + + + + + */ -a.jiralink { - font-size: @font-size-default; - - img { - float: left; - display: inline-block; - margin-top: .13em; - margin-right: 3px; - } - - span.mm__status { - display: inline-block; - font-size: @font-size-default; - margin-left: 5px; - padding: 1px 4px; - } -} - - -/* + + + + + no js version + + + + + */ -.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; - } - } - } - } -} - -@media @screen_max-md { - #dokuwiki_magic-matcher { - position: relative; - - .container { - margin: .8rem 0 -5px; - } - - #magicmatcher__context { - border-radius: 0; - } - } -} - - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* print */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -@media print { - #dokuwiki_magic-matcher { - display: none; - } -} - +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* all media */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + + +/* + + + + + + + + + + + + + + + + + + + + + + + */ +/* magic matcher bar with form on top of page */ + +#dokuwiki_magic-matcher { + position: fixed; + top: 0; + left: 0; + width: 100%; + + #mm__issueselect_chosen { + max-width: 50%; + } + + button[name="toggleSuggestions"] { + position: absolute; + right: 0; + top: 0; + border: 0; + border-bottom: 1px solid @color-border; + border-left: 1px solid @color-border; + color: @color-nav; + background: #fff; + border-radius: 0; + border-bottom-left-radius: 5px; + + &:hover, + &:focus, + &:active { + border-color: @button_background; + color: @button_background; + } + } + + #magicmatcher__context { + 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: @font-size-default; + padding: .8em 1em .5em; + margin-bottom: 0; + + .chosen-container-single, + .chosen-container-single *, + #mm_issue_loading, + .mm__status, + .toggleSuggestions { + font-size: @font-size-default; + } + + .chosen-container-single { + .chosen-single span { + line-height: @line-height-bigger; + } + } + + @media @screen_max-md { + padding-top: @margin-default; + + .chosen-container { + display: block; + min-width: 100%; + max-width: 100%; + margin-bottom: .5rem; + } + } + } +} + +/* + + + + + in content + + + + + */ +a.jiralink { + font-size: @font-size-default; + + img { + float: left; + display: inline-block; + margin-top: .13em; + margin-right: 3px; + } + + span.mm__status { + display: inline-block; + font-size: @font-size-default; + margin-left: 5px; + padding: 1px 4px; + } +} + + +/* + + + + + no js version + + + + + */ +.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; + } + } + } + } +} + +@media @screen_max-md { + #dokuwiki_magic-matcher { + position: relative; + + .container { + margin: .8rem 0 -5px; + } + + #magicmatcher__context { + border-radius: 0; + } + } +} + + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* print */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +@media print { + #dokuwiki_magic-matcher { + display: none; + } +} + diff --git a/css/plugins/move.less b/css/plugins/move.less index 5f6224a..885f1b4 100644 --- a/css/plugins/move.less +++ b/css/plugins/move.less @@ -1,6 +1,6 @@ #dokuwiki__site > .plugin_move_dialog{ - font-size: .88rem; + font-size: @font-size-default; *{ - font-size: .88rem; + font-size: @font-size-default; } } diff --git a/css/plugins/popupviewer.less b/css/plugins/popupviewer.less index a5638dc..865ad22 100755 --- a/css/plugins/popupviewer.less +++ b/css/plugins/popupviewer.less @@ -4,15 +4,15 @@ > .controls > .content{ padding: 1.5rem 1rem 1rem; td, th{ - font-size: .88rem; + font-size: @font-size-default; line-height: 125%; a{ - font-size: .88rem; + font-size: @font-size-default; line-height: 125%; } } .li, li{ - font-size: .88rem; + font-size: @font-size-default; line-height: 125%; } } diff --git a/css/plugins/qc.less b/css/plugins/qc.less new file mode 100644 index 0000000..dff5a32 --- /dev/null +++ b/css/plugins/qc.less @@ -0,0 +1,6 @@ +#plugin__qc__wrapper{ + font-size: @font-size-default; + p{ + font-size: @font-size-default; + } +} diff --git a/css/plugins/struct.less b/css/plugins/struct.less index 783e6d4..e0611d1 100755 --- a/css/plugins/struct.less +++ b/css/plugins/struct.less @@ -1,24 +1,27 @@ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* all media */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -#dokuwiki__content { - .structaggregation { - @link-height: 1.5rem; - - position: relative; - padding-bottom: @link-height; - margin-bottom: @grid; - - .table { - margin-bottom: 0; - } - - > a { - position: absolute; - bottom: 0; - height: @link-height; - margin-bottom: 0; - } - } -} +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* all media */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +#dokuwiki__content { + .structaggregation { + @link-height: 1.5rem; + + position: relative; + padding-bottom: @link-height; + margin-bottom: @grid; + + .table { + margin-bottom: 0; + } + + > a { + position: absolute; + bottom: 0; + height: @link-height; + margin-bottom: 0; + } + } + #plugin__struct_output{ + margin-right: 0; + } +} diff --git a/css/template_admin.less b/css/template_admin.less index aa2391e..5072f2b 100644 --- a/css/template_admin.less +++ b/css/template_admin.less @@ -1,14 +1,14 @@ .do-admin{ #admin__version{ - font-size: .88rem; + font-size: @font-size-default; } .main-content ul{ > li{ - font-size: .88rem; + font-size: @font-size-default; div.li{ - font-size: .88rem; + font-size: @font-size-default; a{ - font-size: .88rem; + font-size: @font-size-default; line-height: 125%; cursor: pointer; } diff --git a/style.ini b/style.ini index 4a5f687..3c34ba5 100755 --- a/style.ini +++ b/style.ini @@ -84,6 +84,7 @@ css/template_admin.less = all css/plugins/popupviewer.less = all css/plugins/magic-matcher.less = all css/plugins/do_tasks.less = all +css/plugins/qc.less = all css/plugins/struct.less = all css/plugins/bureaucracy.less = all diff --git a/tpl/nav-meta-box.php b/tpl/nav-meta-box.php index 7df5b72..312f06d 100755 --- a/tpl/nav-meta-box.php +++ b/tpl/nav-meta-box.php @@ -5,7 +5,7 @@
    -
    • +
    • diff --git a/tpl/nav-page-tools.php b/tpl/nav-page-tools.php index 177b3e7..fbf4f0c 100755 --- a/tpl/nav-page-tools.php +++ b/tpl/nav-page-tools.php @@ -1,20 +1,22 @@ - - - - - + + + + + diff --git a/tpl/nav-sitetools.php b/tpl/nav-sitetools.php index 3e929f6..cb57c7e 100755 --- a/tpl/nav-sitetools.php +++ b/tpl/nav-sitetools.php @@ -1,14 +1,14 @@ - - - - + + + +