From cef85c91a12b6c09db918acaa326f666579e15f5 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 11 Jan 2017 15:16:40 +0100 Subject: [PATCH 1/5] SPR-768: Anpassungen - SprintMeeting 10.1.2017 - breadcrumb padding --- css/area_nav-breadcrumb.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 59b679f..529997c 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -7,7 +7,7 @@ .breadcrumbs { position: relative; border-bottom: 1px solid @color-border; - padding: .8rem 1.8rem .4rem; + padding: 1rem 1.8rem .2rem; > p { font-size: .83rem; @@ -31,7 +31,7 @@ width: auto; box-sizing: border-box; border: solid 1px transparent; - border-radius: 2px; + border-radius: @border-radius; vertical-align: middle; text-decoration: none; margin-top: -.2em; @@ -62,7 +62,7 @@ float: right; display: inline-block; max-width: 30%; - margin: -.4em 0 0; + margin: -.6em 0 0; padding: 0; > li { From bbf124abb273a417d374738b4b638548e7ebd73b Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 11 Jan 2017 15:17:39 +0100 Subject: [PATCH 2/5] SPR-768: Anpassungen - SprintMeeting 10.1.2017 - breadcrumb padding --- css/area_content.less | 41 +++++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/css/area_content.less b/css/area_content.less index e231ee1..9520f68 100755 --- a/css/area_content.less +++ b/css/area_content.less @@ -4,56 +4,61 @@ * @author Jana Deutschlaender */ - .content .row { > .col-xs-12 { box-shadow: @box-shadow; - #dokuwiki__content{ + + #dokuwiki__content { position: relative; z-index: 10; - &::before{ + + &::before { content: ""; + position: absolute; + top: 0; + left: 0; + z-index: -1; + height: 2.45rem; + width: 100%; background-color: @background_page-header; border-bottom: 1px solid @color-border; - position: absolute; - top: 0; left: 0; - height: 3rem; width: 100%; - z-index: -1; } - #meta-box{ + + #meta-box { display: inline-block; min-height: 1.95rem; max-width: 40%; float: right; } - #plugin__highlightparent{ + #plugin__highlightparent { display: block; } } } } -.structaggregation{ +.structaggregation { font-size: .88rem; - td, th{ + td, th { font-size: .88rem; line-height: 125%; - a{ + a { font-size: .88rem; line-height: 125%; } } - > a.export{ + > a.export { font-size: .88rem; line-height: 135%; padding-top: .5em; } - ~ ul li .li{ + ~ ul li .li { font-size: .88rem; } } -.dokuwiki .structaggregation a.export{ + +.dokuwiki .structaggregation a.export { padding-top: .3em; font-size: .88rem; } @@ -63,12 +68,12 @@ .main-content > .level3, .main-content > .level4, .main-content > .level5, -.main-content > .level6{ +.main-content > .level6 { font-size: .88rem; padding-bottom: 1rem; - > p, > ul > li .li{ + > p, > ul > li .li { font-size: .88rem; - a{ + a { font-size: inherit; } } From 527e72e79a814c0723f3ff9d7c8bcb17350643ef Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 11 Jan 2017 15:18:39 +0100 Subject: [PATCH 3/5] SPR-768: Anpassungen - SprintMeeting 10.1.2017 - tabbox --- css/area_nav-metabox.less | 128 ++++++++++++++++++++++++++------------ 1 file changed, 87 insertions(+), 41 deletions(-) diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less index b8d70a7..de64db4 100755 --- a/css/area_nav-metabox.less +++ b/css/area_nav-metabox.less @@ -2,6 +2,7 @@ .tab-container { display: table; } + .box-content { position: relative; height: 0; @@ -9,38 +10,49 @@ } ul.meta-tabs { - border-bottom: 1px solid @color-border; - background-color: @background_page-header; + //border-bottom: 1px solid @color-border; + //background-color: @background_page-header; margin: 0; padding: 0; list-style: none; - &::before, &::after { + + &::before, + &::after { display: table; content: " "; box-sizing: border-box; clear: both; } - > li:first-child{ - > a{ + + > li:first-child { + > a { margin-left: 0; } } + + > li:last-child { + > a { + margin-right: -1px; + } + } + > li { - margin: 0 -1px -1px; + margin: 0 0 -1px; position: relative; display: inline-block; + > a { - font-size: .78rem; - margin-left: 4px; - line-height: 1.42857143; + cursor: pointer; position: relative; display: block; - padding: .56em 2em; - border: 1px solid @color-border; background-color: @color-site-bg; - border-radius: 4px 4px 0 0; + border: 1px solid @color-border; + border-radius: @fix_border-radius @fix_border-radius 0 0; color: @color-nav; - cursor: pointer; + font-size: .78rem; + line-height: 1.42857143; + padding: .3em 1rem .1em; + margin-left: 4px; transition: @transition color, @transition background-color, @transition border-color; * { @@ -53,12 +65,13 @@ position: relative; transition: @transition color; } + .num { position: absolute; right: -.8rem; - top: -.4rem; + top: -.2rem; background-color: @color-border; - border-radius: 2px; + border-radius: @fix_border-radius; color: @color-nav; font-size: .56rem; font-weight: 400; @@ -66,56 +79,80 @@ line-height: 1; padding: .2em .2rem .1em; transition: @transition color, @transition background-color; - } + &:hover, &:focus, &:active { - background-color: @background_page-header; - border-color: @color-border; - border-bottom-color: transparent; - color: @button_background; + background-color: @color-content-bg; + border-color: @color-link; + color: @color-link; + text-decoration: none; .prefix { - color: @button_background; + color: inherit; } .num { - background-color: @button_background; - color: @button_color; + color: inherit; } } } - &.active > a { - cursor: default; - tab-index: -1; - color: #555; - background-color: @background_page-header; - border-color: transparent; + + &.active { + z-index: 1; + + > a { + cursor: default; + tab-index: -1; + background-color: @color-content-bg; + border-color: @color-link; + border-bottom-color: @color-content-bg; + color: @color-link; + } } } } + .meta-content { .tab-pane { - border: 1px solid @color-border; - border-top-color: transparent; - background-color: @background_page-header; - display: none; position: absolute; + top: 0; + display: none; width: 100%; + background-color: @color-content-bg; + border: 1px solid @color-link; + border-top-color: transparent; + border-radius: 0 0 @fix_border-radius @fix_border-radius; + + &::before { + content: ''; + position: absolute; + top: -1px; + left: 0; + z-index: 0; + width: 100%; + height: 1px; + background-color: @color-link; + } + &.active { display: block; } + > div { padding: .8rem .5rem .5rem; - p{ + + p { padding-left: 1em; } - ul{ + ul { list-style: none; - padding-left:0; - li{ - margin-left: 0; padding-left: 1em; + padding-left: 0; + + li { + margin-left: 0; + padding-left: 1em; } } } @@ -127,26 +164,34 @@ padding: .6rem .5rem .5rem .8rem; background: transparent; border: 0 none; + h3 { display: none; } + > div { padding: 0; } + > div ul.toc { font-size: .78rem; padding-left: .5em; + a { font-size: .78rem; display: inline-block; padding-left: 10px; position: relative; } + li { } + div.li { position: relative; - ::before { + padding: .15em 0; + + &::before { position: absolute; top: .3em; content: ""; @@ -157,16 +202,17 @@ overflow: hidden; left: 0; } - padding: .15em 0; } } + > div > ul.toc { padding: 0; } } } } - + .msg-area + a{ + + + .msg-area + a { clear: right; margin-top: 20px; } From acc4acbcf1d485621fa1663cd34eee3e4a34e4dd Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 11 Jan 2017 15:20:15 +0100 Subject: [PATCH 4/5] new var @fix_border-radius for no custom border-radius --- css/area_main-sidebar.less | 3 ++- css/area_sidetools.less | 5 +++-- css/area_togglelink.less | 3 ++- css/base.less | 1 + 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less index fbb3cea..4728b1f 100755 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -119,7 +119,7 @@ position: relative; display: block; border: 1px solid transparent; - border-radius: 2px; + border-radius: @fix_border-radius; margin-bottom: -.3rem; padding: .6em 0 .6em (@icon-size + 1); transition: @transition color, @transition background-color, @transition border-color; @@ -181,6 +181,7 @@ &::before { background-color: @color-site-bg; + border-radius: @fix_border-radius 0 0 @fix_border-radius; } &::after { diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 25fdd19..63872f5 100755 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -129,7 +129,7 @@ position: relative; display: block; border: 1px solid transparent; - border-radius: 2px; + border-radius: @fix_border-radius; padding: .6em 0 .6em (@icon-size + 1); transition: @transition color, @transition background-color, @transition border-color; @@ -190,6 +190,7 @@ &::before { background-color: @color-site-bg; + border-radius: @fix_border-radius 0 0 @fix_border-radius; } &::after { @@ -243,7 +244,7 @@ overflow-y: auto; background-color: @color-content-bg; border: 1px solid @button_background; - border-radius: 2px; + border-radius: @fix_border-radius; font-size: .8rem; margin-top: .1rem; padding: .3rem .6em; diff --git a/css/area_togglelink.less b/css/area_togglelink.less index a344f70..9b10bc3 100644 --- a/css/area_togglelink.less +++ b/css/area_togglelink.less @@ -22,7 +22,7 @@ height: 100%; background-color: @button_background; border: solid 1px @button_background; - border-radius: 2px 0 0 2px; + border-radius: @fix_border-radius 0 0 @fix_border-radius; color: @button_color; text-decoration: none; text-align: center; @@ -51,6 +51,7 @@ a { background-color: @button_background; border-color: @button_background; + border-radius: 0 @fix_border-radius @fix_border-radius 0; &:hover, &:focus, diff --git a/css/base.less b/css/base.less index d5c26de..955cef8 100755 --- a/css/base.less +++ b/css/base.less @@ -12,6 +12,7 @@ @background_page-header: __background_page-header__; @border-radius: __default_border_radius__; +@fix_border-radius: 2px; @font_family_screen: __font_family_screen__; From 00c1ebdd538599613507ac32efd0518d311e600e Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Wed, 11 Jan 2017 15:21:29 +0100 Subject: [PATCH 5/5] new var @fix_border-radius for no custom border-radius --- css/base_design.less | 1302 +++++++++++++++++++++--------------------- 1 file changed, 651 insertions(+), 651 deletions(-) diff --git a/css/base_design.less b/css/base_design.less index 37ae4c0..ca52c10 100755 --- a/css/base_design.less +++ b/css/base_design.less @@ -1,651 +1,651 @@ -/** - * 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: 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: @fix_border-radius; +} + +pre { + overflow: auto; + word-wrap: normal; + border: 1px solid @color-border; + border-radius: @fix_border-radius; + 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: @fix_border-radius; +} + +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: @fix_border-radius; + 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: @fix_border-radius; + 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: @fix_border-radius; + 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: @fix_border-radius; + 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; +}