Merge branch 'master' of gitlab.cosmocode.de:deutschlaender/sprintdoc-template

css/area_main-sidebar.less

@@ -52,13 +52,13 @@
 
 /* + + +  first level  + + + */
             > li {
+                counter-increment: nav-counter;
                 position: relative;
                 list-style-type: none;
                 margin: 0;
                 padding: 0 0 .3em;
-                counter-increment: nav-counter;
 
-                &::after {
+                &:not(:last-of-type)::after {
                     content: '';
                     position: absolute;
                     left: 0;
@@ -228,23 +228,23 @@
 @media @screen_min-xlg {
     #dokuwiki__aside.main-sidebar {
         .nav-main {
-            > ul > li > .li {
-                font-size: .9rem;
-
-                * {
-                    font-size: inherit;
-                }
-            }
-
             .li {
                 font-size: .8rem;
                 padding: .1em 0;
 
                 * {
-                    font-size: .8rem;
+                    font-size: inherit;
                     font-weight: inherit;
                 }
             }
+
+            > ul > li > .li {
+                font-size: .9rem;
+
+                * {
+                    font-size: inherit;
+                }
+            }
         }
     }
 }
@@ -257,8 +257,17 @@
     #dokuwiki__aside.main-sidebar {
         .nav-main {
             .li {
+                font-size: .9rem;
+                padding: .15em 0 .15em .25rem;
+
+                * {
+                    font-size: inherit;
+                    font-weight: inherit;
+                }
+            }
+
+            > ul > li > .li {
                 font-size: 1rem;
-                padding: .15em .25rem;
 
                 > * {
                     font-size: inherit;

css/area_nav-breadcrumb.less

@@ -109,7 +109,7 @@
         } // li
 
         a {
-            transition: @transition color, @transition border-color;
+            transition: @transition color, @transition background-color, @transition border-color;
 
             &[aria-expanded="false"] + #plugin__qc__wrapper {
                 display: none;
@@ -118,6 +118,7 @@
             &:hover,
             &:active,
             &:focus {
+                background-color: @button_color;
                 border-color: @button_background;
                 color: @button_background;
 

css/area_nav-usertools.less

@@ -105,11 +105,12 @@
             cursor: pointer;
             background-color: #fff;
             text-decoration: none;
-            transition: @transition color, @transition border-color;
+            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);

css/area_sidebar-search.less

@@ -41,11 +41,12 @@
             color: @color-nav;
             margin-left: -(@icon-size);
             padding: 0;
-            transition: @transition color, @transition border-color;
+            transition: @transition color, @transition background-color, @transition border-color;
 
             &:hover,
             &:focus,
             &:active {
+                background-color: @button_color;
                 border: solid 1px @button_background;
                 color: @button_background;
 

css/area_sidetools.less

@@ -10,78 +10,6 @@
 
     counter-increment: bar-counter;
 
-    > nav {
-        > ul {
-            padding-bottom: .4rem;
-            margin-bottom: 0;
-        }
-    }
-
-    h6 {
-        position: relative;
-        width: auto;
-        height: auto;
-        color: @color-nav;
-        font-weight: normal;
-        padding: .5em 0 .5em (@icon-size + 1.1);
-
-        &::before {
-            content: counter(bar-counter, lower-alpha);
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            display: -webkit-flex;
-            flex-direction: column;
-            -webkit-flex-direction: column;
-            justify-content: center;
-            -webkit-justify-content: center;
-            height: 100%;
-            width: @icon-size;
-            overflow: hidden;
-            text-align: center;
-            margin-top: auto;
-            margin-bottom: auto;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 15%;
-            bottom: 15%;
-            width: 1px;
-            left: (@icon-size + .6);
-            background-color: @color-border;
-            transition: @transition background-color;
-        }
-
-        + ul,+ div {
-            height: auto;
-            overflow: hidden;
-        }
-
-        &.opened {
-            + ul, + div {
-                height: auto;
-                overflow: hidden;
-            }
-            + ul {
-                margin-top: .5em;
-                margin-bottom: .25em;
-            }
-        }
-
-        &.closed {
-            + ul, + div {
-                height: 0;
-                padding: 0;
-            }
-        }
-
-    }
-
-
-/* + + +  linklist  + + + */
     ul,
     .trace {
         padding-left: (@icon-size + .5);
@@ -91,38 +19,6 @@
         border-bottom: 1px solid @color-border;
     }
 
-    p {
-        max-height: 6rem;
-        overflow-y: auto;
-        background-color: @background_page-header;
-        border: 1px solid @color-border;
-        padding: .4rem;
-        font-size: .8rem;
-        *{
-            font-size: inherit;
-        }
-
-        .bchead,
-        .bcsep {
-            display: none;
-        }
-
-        .breadcrumbs {
-            padding: 0;
-            margin: 0;
-        }
-
-        bdi {
-            display: block;
-            line-height: 125%;
-            padding: .1rem 0;
-        }
-
-        a {
-            cursor: pointer;
-        }
-    }
-
     li {
         list-style-type: none;
 
@@ -145,6 +41,243 @@
             padding-top: .3em;
         }
     }
+
+    > nav {
+        > ul {
+            margin: 0;
+            padding: 0 0 0 (@icon-size + .5);
+
+            li {
+                list-style-type: none;
+                color: @color-nav;
+
+                &:first-of-type {
+                    padding-top: .3em;
+                }
+            }
+        }
+    }
+
+
+/* + + + + +  headlines for linklists  + + + + + */
+    h6 {
+        position: relative;
+        width: auto;
+        height: auto;
+        color: @color-nav;
+        font-weight: normal;
+        padding: .5em 0 .5em (@icon-size + 1.1);
+
+        &[class="sr-only"] {
+            border-bottom: solid 1px @color-border;
+        }
+
+        * {
+            color: inherit;
+        }
+
+
+/* + + +  icon  + + + */
+        &::before {
+            content: counter(bar-counter, lower-alpha);
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            display: -webkit-flex;
+            flex-direction: column;
+            -webkit-flex-direction: column;
+            justify-content: center;
+            -webkit-justify-content: center;
+            height: 100%;
+            width: @icon-size;
+            overflow: hidden;
+            text-align: center;
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+
+
+/* + + +  line bottom  + + + */
+        &::after {
+            content: '';
+            position: absolute;
+            top: 15%;
+            bottom: 15%;
+            width: 1px;
+            left: (@icon-size + .6);
+            background-color: @color-border;
+            transition: @transition background-color;
+        }
+
+        + ul,
+        + div {
+            height: auto;
+            overflow: hidden;
+        }
+
+
+/* + + +  toggle  + + + */
+        &.opened,
+        &.closed {
+            padding: 0;
+
+            &::before,
+            &::after {
+                display: none;
+            }
+
+            a {
+                position: relative;
+                display: block;
+                border: 1px solid transparent;
+                border-radius: 2px;
+                padding: .6em 0 .6em (@icon-size + 1);
+                transition: @transition color, @transition background-color, @transition border-color;
+
+                &::before {
+                    content: counter(bar-counter, lower-alpha);
+                    position: absolute;
+                    top: -.1em;
+                    left: 0;
+                    display: flex;
+                    display: -webkit-flex;
+                    flex-direction: column;
+                    -webkit-flex-direction: column;
+                    justify-content: center;
+                    -webkit-justify-content: center;
+                    height: 100%;
+                    width: @icon-size;
+                    overflow: hidden;
+                    color: @color-nav;
+                    text-align: center;
+                    margin-top: auto;
+                    margin-bottom: auto;
+                    transition: @transition color;
+                }
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 15%;
+                    bottom: 15%;
+                    width: 1px;
+                    left: (@icon-size + .5);
+                    background-color: @color-border;
+                    transition: @transition background-color;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @button_color;
+                    border-color: @button_background;
+                    color: @button_background;
+                    text-decoration: none;
+
+                    &::before {
+                        color: @button_background;
+                    }
+
+                    &::after {
+                        background-color: @button_background;
+                    }
+                }
+            }
+        }
+
+        &.opened {
+            a {
+                background-color: @button_background;
+                color: @button_color;
+
+                &::before {
+                    color: @button_color;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @button_color;
+                    border-color: @button_background;
+                    color: @button_background;
+                    text-decoration: none;
+
+                    &::before {
+                        color: @button_background;
+                    }
+                }
+            }
+
+            + ul,
+            + div {
+                height: auto;
+                overflow: hidden;
+            }
+
+            + ul {
+                margin-top: .5em;
+                padding-bottom: .4rem;
+            }
+        }
+
+        &.closed {
+            + ul,
+            + div {
+                height: 0;
+            }
+        }
+    }
+
+
+/* + + + + +  f.i. trace  + + + + + */
+    p {
+        max-height: 6rem;
+        overflow-y: auto;
+        background-color: @color-content-bg;
+        border: 1px solid @button_background;
+        border-radius: 2px;
+        font-size: .8rem;
+        margin-top: .1rem;
+        padding: .3rem .6em;
+
+        * {
+            font-size: inherit;
+        }
+
+        .bchead {
+            display: none;
+        }
+
+        .bcsep {
+            float: left;
+            clear: both;
+            display: block;
+            width: 3%;
+            vertical-align: top;
+            color: @color-link;
+            padding-top: .3em;
+        }
+
+        .breadcrumbs {
+            border: 0 none;
+            padding: 0;
+            margin: 0;
+        }
+
+        bdi {
+            display: block;
+            float: left;
+            width: 94%;
+            line-height: 125%;
+            padding: .1rem 0;
+            margin-left: 2%;
+        }
+
+        a {
+            cursor: pointer;
+        }
+    }
 }
 
 
@@ -162,12 +295,11 @@
         }
 
         li {
-            font-size: 100%;
+            font-size: .8rem;
-            padding-top: .1em;
+            padding: .1em 0 .1em .1rem;
-            padding-bottom: .1em;
 
             > * {
-                font-size: .8rem;
+                font-size: inherit;
             }
         }
     }
@@ -184,12 +316,16 @@
         }
 
         li {
-            font-size: 1rem;
+            font-size: .9rem;
-            padding: .15em .25rem;
+            padding: .15em 0 .15em .23rem;
 
             > * {
-                font-size: 1rem;
+                font-size: inherit;
             }
         }
+
+        p {
+            font-size: .9rem;
+        }
     }
 }

css/base_design.less

@@ -5,12 +5,13 @@
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
+
 html, body {
     background-color: @color-site-bg;
 }
 
 a {
-    color: @ini_existing;
+    color: @color-link;
 }
 
 /* highlight selected tool */
@@ -54,7 +55,7 @@ a {
     background: @color-content-bg;
     color: inherit;
     padding: 1rem 2rem 2rem;
-    margin-bottom: .5rem;
+    // margin-bottom: .5rem; // no margin: if there is another bg-color, then there is an #fff border
     overflow: hidden;
     word-wrap: break-word;
 }
@@ -126,7 +127,7 @@ h3 {
 }
 
 h4 {
-    font-size: .93rem;
+    font-size: .94rem;
     margin: 0 0 1.0em;
 }
 
@@ -141,7 +142,7 @@ h6 {
 }
 
 p {
-    font-size: .83rem;
+    font-size: .88rem;
     line-height: 135%;
 
     a,
@@ -152,7 +153,8 @@ p {
 }
 
 label,
-legend {
+legend,
+button {
     font-size: .88rem;
 
     a,
@@ -162,6 +164,14 @@ legend {
     }
 }
 
+hr,
+figure,
+details,
+address {
+    font-size: .88rem;
+    line-height: 140%;
+}
+
 p,
 ul,
 ol,
@@ -174,8 +184,6 @@ figure,
 details,
 fieldset,
 address {
-    font-size: .88rem;
-    line-height: 140%;
     margin: 0 0 1.4em; /* bottom margin = line-height */
     padding: 0;
 }
@@ -201,6 +209,8 @@ small,
 
 ul,
 ol {
+    font-size: .88rem;
+    line-height: 140%;
     padding: 0 0 0 1.5em;
 }
 
@@ -220,6 +230,11 @@ dd {
     margin: 0 1.5em 0 0;
 }
 
+dl {
+    font-size: .88rem;
+    line-height: 140%;
+}
+
 dt {
     font-weight: bold;
     margin: 0;
@@ -268,7 +283,9 @@ table {
     border-collapse: collapse;
     empty-cells: show;
     border-spacing: 0;
-    border: 1px solid @ini_border;
+    border: 1px solid @color-border;
+    font-size: .88rem;
+    line-height: 140%;
 }
 
 caption {
@@ -285,7 +302,7 @@ td {
     padding: .3em .5em;
     margin: 0;
     vertical-align: top;
-    border: 1px solid @ini_border;
+    border: 1px solid @color-border;
 }
 
 th {
@@ -305,7 +322,7 @@ a {
 a:link,
 a:visited {
     text-decoration: none;
-    color: @ini_link;
+    color: @color-link;
 }
 
 a:hover,
@@ -338,7 +355,7 @@ button img {
 }
 
 hr {
-    border-top: solid @ini_border;
+    border-top: solid @color-border;
     border-bottom: solid @ini_background;
     border-width: 1px 0;
     height: 0;
@@ -372,25 +389,29 @@ kbd {
     font-size: 1em;
     direction: ltr;
     text-align: left;
-    background-color: @ini_background_site;
+    background-color: @color-site-bg;
-    color: @ini_text;
+    color: @color-text;
-    box-shadow: inset 0 0 .3em @ini_border;
+    box-shadow: inset 0 0 .3em @color-border;
     border-radius: 2px;
 }
 
 pre {
     overflow: auto;
     word-wrap: normal;
-    border: 1px solid @ini_border;
+    border: 1px solid @color-border;
     border-radius: 2px;
-    box-shadow: inset 0 0 .5em @ini_border;
+    box-shadow: inset 0 0 .5em @color-border;
+    font-size: .88rem;
+    line-height: 140%;
     padding: .7em 1em;
 }
 
 blockquote {
-    padding: 0 .5em;
+    border: solid @color-border;
-    border: solid @ini_border;
     border-width: 0 0 0 .25em;
+    font-size: .88rem;
+    line-height: 140%;
+    padding: 0 .5em;
 }
 
 [dir=rtl] blockquote {
@@ -432,8 +453,10 @@ form {
 }
 
 fieldset {
-    padding: .7rem 1rem;
+    font-size: .88rem;
+    line-height: 140%;
     border: 1px solid @ini_text_alt;
+    padding: .7rem 1rem;
 }
 
 fieldset > :last-child {
@@ -474,6 +497,10 @@ select {
     max-width: 100%;
 }
 
+textarea.edit {
+    font-size: .88em;
+}
+
 optgroup {
     font-style: italic;
     font-weight: bold;
@@ -512,55 +539,79 @@ input[type=image] {
     box-shadow: none;
 }
 
-/* all types of buttons */
+
-input[type=submit],
+/* + + + + +  buttons  + + + + + */
-input[type=button],
+button {
-input[type=reset],
-input.button,
-a.button,
-button,
-.qq-upload-button {
-    color: #333;
     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;
+    }
 }
 
-input[type=submit]:hover,
+
-input[type=submit]:active,
+/* + + +  all types of submit-buttons  + + + */
-input[type=submit]:focus,
+a.button,
-input[type=button]:hover,
+input[type=submit],
-input[type=button]:active,
+input[type=reset],
-input[type=button]:hover,
+button[type=submit],
-input[type=reset]:hover,
+.qq-upload-button {
-input[type=reset]:active,
+    cursor: pointer;
-input[type=reset]:hover,
+    background-image: none;
-input.button:hover,
+    background-color: @button_background;
-input.button:active,
+    border: 1px solid @button_background;
-input.button:focus,
+    border-radius: 2px;
-a.button:hover,
+    color: @button_color;
-a.button:active,
+    padding: .3em @grid;
-a.button:focus,
+    transition: @transition background-color, @transition color;
-button:hover,
+
-button:active,
+    &:hover,
-button:focus,
+    &:active,
-.qq-upload-button:hover {
+    &:focus {
-    border-color: #999;
+        background-color: @button_color;
-    background-color: #ddd;
+        color: @button_background;
-    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%);
 }
 
-input::-moz-focus-inner,
+
-button::-moz-focus-inner {
+/* + + +  all types of buttons not being submit-buttons  + + + */
-    border: 0;
+input.button,
-    padding: 0;
+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],
@@ -571,6 +622,30 @@ button[readonly],
 select[readonly],
 textarea[readonly] {
     cursor: auto;
-    opacity: .5;
+    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;
 }

css/base_structure.less

@@ -18,38 +18,20 @@
 }
 
 @media @screen_min-xxs {
-    .container {
-        //border: 1px solid deeppink;
-    }
 }
 
 @media @screen_min-xs {
-    .container {
-        //border: 1px solid orangered;
-    }
 }
 
 @media @screen_min-sm {
-    .container {
-        //border: 1px solid green;
-    }
-
     .make-grid(sm);
 }
 
 @media @screen_min-md {
-    .container {
-        //border: 1px solid blue;
-    }
-
     .make-grid(md);
 }
 
 @media @screen_min-lg {
-    .container {
-        //border: 1px solid blue;
-    }
-
     .make-grid(lg);
 }
 
@@ -57,25 +39,16 @@
     html {
         font-size: 120%;
     }
-
-    .container {
-        //border: 1px solid red;
-    }
 }
 
 @media @screen_min-xxlg {
     html {
         //font-size: 135%;
     }
-
-    .container {
-        //border: 1px solid red;
-    }
 }
 
+/* + + + + +  z-indeces  + + + + + */
 @media @screen_min-md {
-
-    // z-indeces
     .nav-direct p {
         z-index: 1000;
     }
@@ -103,9 +76,11 @@
         width: 100%;
     }
 
-    .header, .tools {
+    .header,
+    .tools {
         .row {
             position: relative;
+
             > .col-xs-12 {
                 width: 23%;
                 box-sizing: border-box;
@@ -129,12 +104,36 @@
 
     .content {
         .row > .col-xs-12 {
-            width: 100%;
             position: relative;
+            width: 100%;
             background-color: #fff;
         }
     }
 
+    .claim {
+        .logo {
+            position: absolute;
+            bottom: 1em;
+            overflow: visible;
+
+            img {
+                height: 60px;
+                width: auto;
+                border-style: solid;
+                border-color: transparent;
+                border-width: 0 2px;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                img {
+                    border-width: 0;
+                }
+            }
+        }
+    }
+
     .showSidebar {
         .content {
             .row > .col-xs-12 {
@@ -142,32 +141,7 @@
                 float: right;
             }
         }
-    }
 
-    .claim {
-        .logo {
-            position: absolute;
-            bottom: 1em;
-            overflow: visible;
-        }
-
-        .logo img {
-            height: 60px;
-            width: auto;
-            border-style: solid;
-            border-color: transparent;
-            border-width: 0 3px;
-        }
-        .logo {
-            a:hover, a:focus, a:active{
-                img {
-                    border: 0 none;
-                }
-            }
-        }
-    }
-
-    .showSidebar {
         .claim {
             .logo {
                 position: absolute;
@@ -176,6 +150,7 @@
                 width: 100%; // fo IE
                 overflow: visible;
             }
+
             .logo img {
                 max-width: 100%;
                 height: auto;
@@ -193,9 +168,7 @@
     }
 }
 
-
 @media @screen_max-md {
-
     .container {
         margin: 0 2.5rem 0 1.25rem;
     }
@@ -209,11 +182,12 @@
 
     .content {
         position: relative;
-        #dokuwiki__pagetools{
-            top: 0;
 
+        #dokuwiki__pagetools {
+            top: 0;
         }
-        .row > .col-xs-12 #dokuwiki__content::before{
+
+        .row > .col-xs-12 #dokuwiki__content::before {
             display: none;
         }
     }
@@ -231,6 +205,4 @@
             display: none;
         }
     }
-
 }
-

css/plugins/bureaucracy.less

@@ -90,21 +90,7 @@
     } // label
 
     button[type="submit"] {
-        background-image: none;
-        background-color: @button_background;
-        border: solid 1px @button_background;
-        color: @button_color;
-        font-weight: bold;
         margin-top: (@grid * 2);
-        padding: .4em @grid;
-        transition: @transition background-color, @transition color;
-
-        &:hover,
-        &:focus,
-        &:active {
-            background-color: @button_color;
-            color: @button_background;
-        }
     }
 }
 

css/plugins/magic-matcher.less

@@ -11,13 +11,15 @@
     top: 0;
     left: 0;
     width: 100%;
-    #mm__issueselect_chosen{
+
+    #mm__issueselect_chosen {
         max-width: 50%;
     }
 
-    button[name="toggleSuggestions"]{
+    button[name="toggleSuggestions"] {
         position: absolute;
-        right: 0; top: 0;
+        right: 0;
+        top: 0;
         border: 0;
         border-bottom: 1px solid @color-border;
         border-left: 1px solid @color-border;
@@ -25,26 +27,28 @@
         background: #fff;
         border-radius: 0;
         border-bottom-left-radius: 5px;
-        &:hover, &:focus, &:active{
+
+        &:hover,
+        &:focus,
+        &:active {
             border-color: @button_background;
             color: @button_background;
         }
     }
 
     #magicmatcher__context {
-        box-sizing: border-box;
-        background-color: __nav_direct_background__;
-        box-shadow: __box_shadow__;
-        border-radius: 0 0 __default_border_radius__ __default_border_radius__;
         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;
 
-        font-size: .88rem;
-
         .chosen-container-single,
         .chosen-container-single *,
         #mm_issue_loading,
@@ -54,14 +58,15 @@
         }
 
         .chosen-container-single {
-
             .chosen-single span {
                 line-height: @line-height-bigger;
             }
         }
+
         @media @screen_max-md {
             padding-top: 1.8rem;
-            .chosen-container{
+
+            .chosen-container {
                 display: block;
                 min-width: 100%;
                 max-width: 100%;
@@ -78,7 +83,7 @@ a.jiralink {
     img {
         float: left;
         display: inline-block;
-        margin-top: .3em;
+        margin-top: .13em;
         margin-right: 3px;
     }
 
@@ -119,10 +124,12 @@ a.jiralink {
 @media @screen_max-md {
     #dokuwiki_magic-matcher {
         position: relative;
-        .container{
+
+        .container {
             margin: .8rem 0 -5px;
         }
-        #magicmatcher__context{
+
+        #magicmatcher__context {
             border-radius: 0;
         }
     }

style.ini

@@ -128,6 +128,7 @@ __highlight__           = "#efefef"              ; @ini_highlight
 ; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 
 ; these are used for links
+__link__                    = "#286DA8"                                                 ; @ini_link
 __existing__                = "#286DA8"                                                 ; @ini_existing
 __missing__                 = "#CD5360"                                                 ; @ini_missing