From 2d623f4b2e20ce31c0d368a026d4d38885e0fb66 Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Tue, 28 Mar 2017 15:10:27 +0200
Subject: [PATCH] SPR-742: Konfigurierbarkeit check, neuzuordnung

---
 css/area_content.less              |   2 +-
 css/area_footer.less               |  16 ++-
 css/area_header.less               |   8 +-
 css/area_main-content-secedit.less |  10 +-
 css/area_main-content.less         |   2 +-
 css/area_msg.less                  |  19 +++-
 css/area_nav-breadcrumb.less       |  44 ++++----
 css/area_nav-direct.less           |   2 +-
 css/area_nav-metabox.less          |  73 +++++--------
 css/area_nav-pagetools.less        |  59 +++++++----
 css/area_nav-usertools.less        |  57 +++++-----
 css/area_sidebar-search.less       |  26 ++++-
 css/base.less                      |  41 ++++++--
 css/base_design.less               | 161 ++++++++++++++++-------------
 css/base_mixins.less               |  22 +++-
 css/plugins/tabinclude.less        |  44 +++++---
 16 files changed, 353 insertions(+), 233 deletions(-)

diff --git a/css/area_content.less b/css/area_content.less
index 2b3fd9c..bda9ea6 100755
--- a/css/area_content.less
+++ b/css/area_content.less
@@ -21,7 +21,7 @@
                 height: @page-header_height;
                 box-sizing: border-box;
                 width: 100%;
-                background-color: @ini_background_page-header;
+                background-color: @ini_background_page_header;
                 border-bottom: 1px solid @ini_border_light;
             }
 
diff --git a/css/area_footer.less b/css/area_footer.less
index 369b690..39b068e 100755
--- a/css/area_footer.less
+++ b/css/area_footer.less
@@ -11,13 +11,20 @@
 @media screen {
     .page-footer {
         min-height: @page-header_height;
-        background-color: @ini_background_page-header;
+        background-color: @ini_background_page_header;
         border-top: 1px solid @ini_border_light;
         border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+        color: @ini_background_page_footer;
         font-size: @font-size-default;
         text-align: right;
         padding: @margin-small @margin-default;
 
+        *,
+        a:link,
+        a:visited {
+            color: inherit;
+        }
+
         bdi {
             font-weight: bold;
         }
@@ -28,13 +35,18 @@
             position: relative;
             z-index: 2;
             box-sizing: border-box;
-            background-color: @ini_background_site;
+            background-color: @ini_background;
         }
 
         p {
+            color: @ini_text_webframe;
             font-size: @font-size-default;
             margin: 0;
         }
+
+        a {
+            color: @ini_nav_menu_color;
+        }
     }
 }
 
diff --git a/css/area_header.less b/css/area_header.less
index 608fe41..e02bf1a 100755
--- a/css/area_header.less
+++ b/css/area_header.less
@@ -6,7 +6,7 @@
 
 
 #dokuwiki__header {
-    @header-font-opacity: .7;
+    @header-font-opacity: 1;
 
 /* + + +  wiki logo  + + + */
     @media @screen_min-md {
@@ -83,8 +83,9 @@
 
 /* + + +  wiki title  + + + */
     p.title {
-        background-color: @ini_background_site;
+        background-color: @ini_background;
         opacity: @header-font-opacity;
+        color: @ini_text_webframe;
         line-height: @line-height-default;
         margin-bottom: .5rem;
 
@@ -103,8 +104,9 @@
 /* + + +  wiki claim  + + + */
     p.claim {
         opacity: @header-font-opacity;
-        margin-bottom: 0;
+        color: @ini_text_webframe;
         font-size: @font-size-default;
+        margin-bottom: 0;
 
         @media @screen_max-md {
             padding-top: .5rem;
diff --git a/css/area_main-content-secedit.less b/css/area_main-content-secedit.less
index 88955f7..03aba7e 100644
--- a/css/area_main-content-secedit.less
+++ b/css/area_main-content-secedit.less
@@ -8,10 +8,10 @@
         clear: right; // FIXME why?
         background: repeating-linear-gradient(
             -45deg,
-            transparent,
-            transparent 10px,
-            @ini_background_alt 10px,
-            @ini_background_alt 20px,
+            @highlight-odd-ini_text,
+            @highlight-odd-ini_text 10px,
+            @highlight-even-ini_text 10px,
+            @highlight-even-ini_text 20px,
         );
     }
 
@@ -37,7 +37,7 @@
             &::after {
                 content: '';
                 display: inline-block;
-                background: transparent url("svg.php?svg=pencil.svg&f=nav_menu_color") center center no-repeat;
+                background: transparent url("svg.php?svg=pencil.svg&f=existing") center center no-repeat;
                 height: 1em;
                 width: 1em;
                 background-size: contain;
diff --git a/css/area_main-content.less b/css/area_main-content.less
index 3ed2fd5..9af0b54 100755
--- a/css/area_main-content.less
+++ b/css/area_main-content.less
@@ -9,7 +9,7 @@
     .level2 {
         p a.media {
             img {
-                border: 1px dotted @ini_background_site;
+                border: 1px dotted @ini_background;
 
             }
             &:hover,
diff --git a/css/area_msg.less b/css/area_msg.less
index e248b7f..0367bd7 100644
--- a/css/area_msg.less
+++ b/css/area_msg.less
@@ -1,10 +1,12 @@
-.msg-area{
+.msg-area {
     clear: both;
     padding-top: 1.6rem;
-    div{
+
+    div {
         line-height: 135%;
     }
-    &:empty{
+
+    &:empty {
         display: none;
     }
 }
@@ -20,4 +22,15 @@ div.success, div.error, div.info, div.notify {
     padding-left: 32px;
     overflow: hidden;
     border-radius: 5px;
+
+    a {
+        color: inherit;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus,
+        &:active {
+            text-decoration: none;
+        }
+    }
 }
diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less
index 07a93d0..e81b45e 100755
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@@ -7,13 +7,14 @@
 
 .breadcrumbs {
     position: relative;
-    border-bottom: 1px solid @ini_border_light;
-    padding: 1rem 1.8rem .2rem;
     min-height: @page-header_height;
     box-sizing: border-box;
+    background-color: @ini_background_content;
+    border-bottom: 1px solid @ini_border_light;
+    padding: 1rem 1.8rem .2rem;
 
     @media @screen_max-md {
-        background-color: @ini_background_page-header;
+        background-color: @ini_background_page_header;
     }
 
     @media @screen_max-xs {
@@ -21,6 +22,10 @@
         padding-right: .75rem;
     }
 
+    @media @screen_xs-lg {
+        background-color: @ini_background_content;
+    }
+
     > p {
         font-size: @font-size-small;
         margin: 0;
@@ -108,7 +113,6 @@
                 min-height: @toggle-size;
                 border: 1px solid @ini_border_light;
                 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-                color: @ini_nav_menu_color;
                 text-align: center;
                 margin: 0;
             }
@@ -125,13 +129,18 @@
 /* check !!! */
             &.do_none {
                 position: relative;
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
 
                 strong {
-                    background-color: @ini_background_site;
+                    overflow: hidden;
+                    background-color: @ini_background;
+                    border-color: @noopentasks-border;
+                    color: @ini_text_webframe;
                 }
 
                 .num {
-                    background-color: @noopentasks-background; // fix
+                    margin-top: 1px;
+                    background-color: @noopentasks-border; // fix
                     color: @noopentasks-color; // fix
                 }
             }
@@ -145,24 +154,11 @@
         } // li
 
         a {
-            background-color: #FFF;
-            transition: @transition color, @transition background-color, @transition border-color;
+            .btn-hover();
 
             &[aria-expanded="false"] + #plugin__qc__wrapper {
                 display: none;
             }
-
-            &:hover,
-            &:active,
-            &:focus {
-                background-color: @ini_nav_menu_hover_bg;
-                border-color: @ini_nav_menu_hover_color;
-                color: @ini_nav_menu_hover_color;
-
-                .prefix {
-                    color: inherit;
-                }
-            }
         }
 
         #plugin__qc__wrapper {
@@ -170,13 +166,13 @@
             right: 0;
             width: auto;
             border: 0 none;
-            background: @ini_background_page-header;
-            background: -webkit-linear-gradient(top, @ini_background_page-header, @ini_background_content);
-            background: linear-gradient(top, @ini_background_page-header, @ini_background_content);
+            background: @ini_background_page_header;
+            background: -webkit-linear-gradient(top, @ini_background_page_header, @ini_background_content);
+            background: linear-gradient(top, @ini_background_page_header, @ini_background_content);
             box-shadow: @box-shadow-bottom;
             z-index: 2000;
 
-            #plugin__qc__out{
+            #plugin__qc__out {
                 h1 {
                     font-size: @font-size-head3;
                 }
diff --git a/css/area_nav-direct.less b/css/area_nav-direct.less
index f1b5a4d..5defc3b 100755
--- a/css/area_nav-direct.less
+++ b/css/area_nav-direct.less
@@ -26,7 +26,7 @@
             display: block;
             width: 100%;
             background-color: @nav_direct_background;
-            border-bottom: 1px solid __shadow_color__;
+            border-bottom: 1px solid @ini_border_light;
             color: @nav_direct_color;
             line-height: @line-height-default;
             text-decoration: none;
diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less
index eff79f0..35b35e9 100755
--- a/css/area_nav-metabox.less
+++ b/css/area_nav-metabox.less
@@ -19,19 +19,13 @@
     // < 1024
     @media @screen_max-md {
         position: relative;
-        top: -1px;
+        top: .2rem;
         right: auto;
         float: none;
         display: block;
         max-width: 100%;
         min-height: @page-header_height;
         height: auto;
-    }
-
-    // < 992
-    @media @screen_max-sm {
-        position: relative;
-        top: .2rem;
         border: 0 none;
     }
 
@@ -86,10 +80,6 @@
             }
 
             @media @screen_max-md {
-                margin-right: .5rem;
-            }
-
-            @media @screen_max-sm {
                 margin-right: .4rem;
                 margin-bottom: .2rem;
             }
@@ -98,32 +88,26 @@
                 cursor: pointer;
                 position: relative;
                 display: block;
-                background-color: @ini_background_site;
-                border: 1px solid @ini_border_light;
-                color: @ini_existing;
                 font-size: @font-size-small;
                 line-height: 1.42857143;
-                padding: .3em 1rem .1em;
-                margin-left: 4px;
-                transition: @transition color, @transition background-color, @transition border-color;
+                transition: @transition background-color, @transition border-color, @transition color;
 
                 @media @screen_min-md {
+                    background-color: @ini_background;
+                    border: 1px solid @noopentasks-border;
                     border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
+                    color: @ini_nav_menu_color;
+                    margin-left: 4px;
+                    padding: .3em 1rem .1em;
                 }
 
                 @media @screen_max-md {
-                    top: -1px;
-                    background-color: @ini_background_page-header;
-                    border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-                    margin-left: 0;
-                    padding: .2em .3rem .1em;
-                }
-
-                @media @screen_max-sm {
                     top: 0;
-                    border-radius: 0;
+                    border: 1px solid @ini_existing;
+                    color: @ini_existing;
                     margin-top: .2rem;
-                    padding-bottom: .2em;
+                    margin-left: 0;
+                    padding: .2em .3rem;
                 }
 
                 * {
@@ -135,15 +119,24 @@
                     position: relative;
                     color: inherit;
                     font-size: @font-size-small;
-                    transition: @transition color;
                 }
 
                 &:hover,
                 &:focus,
                 &:active {
-                    background-color: @ini_background_content;
-                    border-color: @ini_existing;
                     text-decoration: none;
+
+                    @media @screen_min-md {
+                        background-color: @ini_background_content;
+                        border-color: @ini_existing;
+                        color: @ini_existing;
+                    }
+
+                    @media @screen_max-md {
+                        background-color: @ini_existing;
+                        border-color: @ini_background_content;
+                        color: @ini_background_content;
+                    }
                 }
             }
 
@@ -158,12 +151,9 @@
                     color: @ini_existing;
 
                     @media @screen_max-md {
-                        border-radius: 0;
-                    }
-
-                    @media @screen_max-sm {
                         background-color: @ini_existing;
                         border-bottom-color: @ini_existing;
+                        border-radius: 0;
                         color: @ini_background_content;
                     }
                 }
@@ -176,13 +166,6 @@
 
         @media @screen_max-md {
             clear: both;
-        }
-
-        @media @screen_max-md {
-            margin-top: -2px;
-        }
-
-        @media @screen_max-sm {
             margin-top: 2px;
         }
 
@@ -199,7 +182,7 @@
                 min-width: 20em;
             }
 
-            @media @screen_min-sm {
+            @media @screen_min-md {
                 border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
             }
 
@@ -277,15 +260,15 @@
                         padding: .15em 0;
 
                         &::before {
+                            content: '';
                             position: absolute;
                             top: .6em;
-                            content: "";
+                            left: 0;
                             display: inline-block;
                             width: 4px;
                             height: 4px;
-                            background-color: #ccc;
                             overflow: hidden;
-                            left: 0;
+                            background-color: @ini_existing;
                         }
                     }
                 }
diff --git a/css/area_nav-pagetools.less b/css/area_nav-pagetools.less
index 1cc873f..b340a3b 100755
--- a/css/area_nav-pagetools.less
+++ b/css/area_nav-pagetools.less
@@ -21,7 +21,7 @@
 .pagetools-item(img_backto, 12);
 */
 
-#dokuwiki__aside{
+#dokuwiki__aside {
     @media @screen_max-md {
         display: none !important;
     }
@@ -57,11 +57,18 @@ nav#dokuwiki__pagetools {
                 height: auto;
                 min-height: @toolbox-size; // for nav:hover
                 width: @toolbox-size; // for nav:hover
-                opacity: .6;
-                color: @ini_nav_menu_color;
+                //opacity: .6;
                 font-size: @font-size-default;
                 padding: 2px @toolbox-size 2px 2px;
 
+                @media @screen_min-md {
+                    color: @ini_nav_menu_color;
+                }
+
+                @media @screen_max-md {
+                    color: @ini_existing;
+                }
+
                 * {
                     color: inherit;
                 }
@@ -73,9 +80,9 @@ nav#dokuwiki__pagetools {
                 &:hover,
                 &:focus,
                 &:active {
-                    opacity: 1;
-                    color: @ini_nav_menu_hover_color;
-                    background-color: #FFF;
+                    //opacity: 1;
+                    //color: @ini_nav_menu_hover_color;
+                    background-color: transparent;
                 }
 
                 span {
@@ -90,8 +97,15 @@ nav#dokuwiki__pagetools {
                     width: @page-tools_svg-size;
                     height: @page-tools_svg-size;
                     vertical-align: middle;
-                    fill: @ini_nav_menu_color;
                     margin: @page-tools_svg-space;
+
+                    @media @screen_min-md {
+                        fill: @ini_nav_menu_color;
+                    }
+
+                    @media @screen_max-md {
+                        fill: @ini_existing;
+                    }
                 }
 
                 &.top {
@@ -101,20 +115,14 @@ nav#dokuwiki__pagetools {
 
             &.plugin_move_page {
                 a {
-                    opacity: .6;
+                    .btn-hover();
+
+                    //opacity: .6;
                     color: @ini_nav_menu_color;
 
                     * {
                         color: inherit;
                     }
-
-                    &:hover,
-                    &:focus,
-                    &:active {
-                        color: @ini_nav_menu_hover_color;
-                        background-color: #fff;
-                        opacity: 1;
-                    }
                 }
             }
         }
@@ -122,24 +130,35 @@ nav#dokuwiki__pagetools {
 
     &:hover {
         ul {
-            background-color: #fff;
             box-shadow: @box-shadow-offset;
+            background-color: @ini_background_content;
+            border-color: @ini_border_light;
 
             li {
+                color: @ini_existing;
+
                 a {
                     box-shadow: none;
                     background-image: none;
-                    opacity: .8;
+                    //opacity: .8;
                     border-color: transparent;
+                    color: inherit;
                     padding: 2px 0 2px 2px;
 
+                    svg {
+                        border-radius: @ini_default_border_radius;
+                        fill: @ini_existing;
+                    }
+
                     &:hover,
                     &:focus,
                     &:active {
-                        opacity: 1;
+                        //opacity: 1;
 
                         svg {
-                            fill: @ini_nav_menu_hover_color;
+                            background-color: @ini_existing;
+                            border: solid 2px @ini_existing;
+                            fill: @ini_background_content;
                         }
                     }
 
diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less
index 13b67d6..855a99f 100755
--- a/css/area_nav-usertools.less
+++ b/css/area_nav-usertools.less
@@ -33,10 +33,13 @@
                 overflow: hidden;
                 border: 1px solid @ini_border_light;
                 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-                color: @ini_nav_menu_color;
                 text-align: center;
                 margin: 0;
 
+                @media @screen_only-lg {
+                    padding-top: .14rem;
+                }
+
                 @media @screen_max-xxlg {
                     min-height: 28px;
                 }
@@ -54,8 +57,10 @@
 
                 position: relative;
                 display: table-cell;
-                border: solid 1px @ini_border_light;
+                background-color: @ini_background;
+                border: solid 1px @noopentasks-border;//@ini_border_light;
                 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                color: @ini_text_webframe;
                 padding-right: .3rem;
 
                 @media @screen_min-xxlg {
@@ -82,10 +87,10 @@
                     position: relative;
                     min-height: 26px;
                     overflow: visible;
-                    background: #FFF; // for removing bg-image
+                    background: @ini_nav_menu_hover_bg; // for removing bg-image
                     border: 0 none;
+                    color: @ini_nav_menu_hover_color;
                     text-indent: 0;
-                    color: @ini_nav_menu_color;
                     font-size: inherit;
                     margin-right: -.3rem;
                     padding: 0 .2em 0 0;
@@ -117,16 +122,17 @@
                         opacity: 0;
                         border: solid 1px @ini_nav_menu_hover_color;
                         border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                        color: inherit;
                         transform: none;
-                        transition: @transition opacity;
+                        //transition: @transition opacity;
                     }
 
                     &:hover,
                     &:focus,
                     &:active {
-                        background-color: @ini_nav_menu_hover_bg;
+                        background-color: @ini_nav_menu_hover_color;
                         border-color: @ini_nav_menu_hover_color;
-                        color: @ini_nav_menu_hover_color;
+                        color: @ini_nav_menu_hover_bg;
 
                         &::before {
                             opacity: 1;
@@ -134,18 +140,18 @@
 
                         bdi,
                         bdi:first-of-type {
-                            color: @ini_nav_menu_hover_color;
+                            color: @ini_nav_menu_hover_bg;
 
-                            &::before {
-                                color: inherit;
-                            }
+                            //&::before {
+                            //    color: inherit;
+                            //}
                         }
                     }
                 }
 
                 bdi {
-                    color: inherit;
                     display: inline-block;
+                    color: inherit;
                     transition: @transition color;
                 }
 
@@ -161,7 +167,6 @@
                         position: absolute;
                         left: -2px;
                         font-size: 1.4rem;
-                        color: @ini_nav_menu_color;
                         margin: 0;
                         transition: @transition color;
 
@@ -190,10 +195,6 @@
                     white-space: normal;
                     text-indent: 0;
 
-                    @media @screen_only-lg {
-                        padding-top: .14rem;
-                    }
-
                     &::before {
                         content: '';
                         position: absolute;
@@ -213,12 +214,15 @@
 
             &.noopentasks {
                 strong {
-                    background-color: @ini_background_site;
+                    background-color: @ini_background;
+                    border-color: @noopentasks-border;
+                    color: @ini_text_webframe;
                 }
 
                 .num {
-                    background-color: @noopentasks-background; // fix
+                    background-color: @noopentasks-border; // fix
                     color: @noopentasks-color; // fix
+                    margin-top: 1px;
                 }
             }
         } // li
@@ -228,36 +232,27 @@
         a {
             .fontello();
             .hide-text-show-before();
+            .btn-hover();
 
             cursor: pointer;
             position: relative;
-            background-color: #fff;
             line-height: 1;
             text-decoration: none;
-            transition: @transition color, @transition background-color, @transition border-color;
 
             @media @screen_only-lg {
                 min-width: 2rem;
             }
 
-            &::before {//background-color: deeppink !important;
+            &::before {
                 .center-middle();
 
                 content: "?";
+                cursor: pointer;
                 display: block;
                 width: 100%;
                 box-sizing: border-box;
                 font-size: @font-size-default + (@font-scale-factor * 4);
                 line-height: 1;
-                cursor: pointer;
-            }
-
-            &:hover,
-            &:active,
-            &:focus {
-                background-color: @ini_nav_menu_hover_bg;
-                border-color: @ini_nav_menu_hover_color;
-                color: @ini_nav_menu_hover_color;
             }
 
             /* icon register new user */
diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less
index c007ee4..dc7eedc 100755
--- a/css/area_sidebar-search.less
+++ b/css/area_sidebar-search.less
@@ -22,7 +22,6 @@
         background-image: none;
         background-color: transparent; // fix
         border: solid 1px transparent;
-        color: @ini_nav_menu_color;
         padding: 0;
         transition: @transition color, @transition background-color, @transition border-color;
 
@@ -32,7 +31,6 @@
             min-height: @icon-size;
             background-color: @ini_button_color;
             border: solid 1px @ini_button_background;
-            color: @ini_button_background;
 
             &::after {
                 background-color: @ini_button_background;
@@ -61,6 +59,7 @@
             min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
             width: @main-ico-dummy;
             border-radius: @fix_border-radius;
+            color: @ini_nav_menu_color;
             text-decoration: none;
             box-sizing: border-box;
 
@@ -90,6 +89,7 @@
         right: 0;
         height: auto;
         min-height: (@icon-size - .2);
+        color: @quicksearch-button-color;
 
         &:hover,
         &:focus,
@@ -141,6 +141,28 @@
                 transition: @transition background-color;
             }
         }
+
+        div.ajax_qsearch {
+            box-shadow: none;
+            background-color: #FFF;
+            padding: 0;
+
+            strong,
+            ul li {
+                color: @quicksearch-button-color;
+                padding: .25rem .5rem;
+
+                * {
+                    color: inherit;
+                }
+            }
+
+            ul li {
+                &:nth-child(odd) {
+                    background-color: @suggestion-zebra;
+                }
+            }
+        }
     }
 
     #qsearch__out {
diff --git a/css/base.less b/css/base.less
index d419826..a47c954 100755
--- a/css/base.less
+++ b/css/base.less
@@ -63,25 +63,47 @@
 
 @transition:               ease-out .30s;
 
-@box-shadow-offset:        .1em .1em .1em rgb(153,153,153,.5);
+@box-shadow-offset:        .1em .1em .1em rgb(153,153,153,.5); // pagetools, tabinclude
 @box-shadow:               0 0 .5em rgb(153,153,153,.5);
 @box-shadow-colored:       0 0 .5em rgba(40,109,168,.5);
 @box-shadow-right-bottom:  0.1em 0.3rem 0.5em rgb(153,153,153,.5);
-@box-shadow-bottom:        0 0.1em 0.5em rgb(153,153,153,.5);
+@box-shadow-bottom:        0 .1em .5em rgb(153,153,153,.5); // qc-wrapper - breadcrumb
 
 
 /* + + +  for programmers customizing  + + + */
 
 @fix_border-radius:        3px;
+
 @toggle-showsidebar_width: 3.07rem;       // shown sidebar after toggle
+
 @page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
 @page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
 @meta-box_height:          (@page-header_height - @page_padding-top);
 @breadcrumb_height:        @page-header_height;
+
 @formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
 
-@noopentasks-background:   #BBB;
-@noopentasks-color:        #696969;
+//@metanav-ini_background:   rgba(0, 0, 0, .1);
+
+
+/* icons */
+@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude */
+@noopentasks-border:       #BBB; /* metabox tabs + num in icons */
+@noopentasks-color:        #666; /* metabox tabs + num in icons */
+
+
+/* navigation left */
+@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
+@suggestion-zebra:         #EEE;
+
+
+/* edit mode */
+@highlight-odd-ini_text:  fade(@ini_background_content, 95%);
+@highlight-even-ini_text: fade(@ini_text, 5%);
+
+
+//@nolinkedicon-ini_background: fade(@ini_background, 10%);
+//@opacity-ini_nav_menu_color:  fade(@ini_nav_menu_color, 40%);
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -149,11 +171,9 @@
 
 @screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
 @screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
-@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
 
 @screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
 @screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
-@screen_only-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
 
 @screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
 @screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
@@ -161,6 +181,10 @@
 @screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
 @screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
 
+@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
+@screen_only-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
+@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* col width */
@@ -220,7 +244,7 @@ q {
 
 acronym {
     cursor: help;
-    border-bottom: dotted 1px #333;
+    border-bottom: dotted 1px @ini_text;
 }
 
 *:focus {
@@ -263,7 +287,7 @@ nav > ul {
     &::before,
     &::after {
         display: table;
-        content: "  ";
+        content: ' ';
         clear: both;
     }
 }
@@ -292,6 +316,7 @@ nav > ul {
 
 .mobile-only {
     display: none;
+
     @media @screen_max-md {
         display: inline-block;
     }
diff --git a/css/base_design.less b/css/base_design.less
index 35fbe7b..aed6a52 100755
--- a/css/base_design.less
+++ b/css/base_design.less
@@ -7,7 +7,7 @@
 
 
 html, body {
-    background-color: @ini_background_site;
+    background-color: @ini_background;
 }
 
 
@@ -26,83 +26,90 @@ html, body {
     font-weight: bold;
 }
 
-.dokuwiki .pageId {
-    float: right;
-    margin-right: -1em;
-    margin-bottom: -1px;
-    margin-top: -1.5em;
-    overflow: hidden;
-    padding: 0.5em 1em 0;
+.dokuwiki {
+    .page ul li,
+    .aside ul li {
+        color: @ini_text;
+    }
 
-    span {
+    .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;
+        }
+    }
+
+    div.page {
+        clear: both;
+        overflow: hidden;
+        word-wrap: break-word;
+        background: @ini_background_content;
+        color: inherit;
+        padding: @page_padding-top @margin-default @margin-default;
+
+        @media @screen_max-md {
+            padding-right: (@margin-default * 1.6);
+        }
+
+        @media @screen_max-xs {
+            padding-left: @margin-small;
+        }
+    }
+
+    .content #dokuwiki__pagetools {
+        @media @screen_max-md {
+            top: 4rem;
+        }
+    }
+
+    .docInfo {
         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;
-    overflow: hidden;
-    word-wrap: break-word;
-    background: @ini_background_content;
-    color: inherit;
-    padding: @page_padding-top @margin-default @margin-default;
-
-    @media @screen_max-md {
-        padding-right: (@margin-default * 1.6);
+        text-align: right;
     }
 
-    @media @screen_max-xs {
-        padding-left: @margin-small;
-    }
-}
-
-.content #dokuwiki__pagetools {
-    @media @screen_max-md {
-        top: 4rem;
-    }
-}
-
-.dokuwiki .docInfo {
-    font-size: @font-size-small;
-    text-align: right;
-}
-
-/* license note under edit window */
-.dokuwiki div.license {
-    font-size: @font-size-small;
-    line-height: @line-height-default;
-    padding-top: 1rem;
-
-    @media @screen_max-lg {
-        font-size: @font-size-default;
-    }
-
-    @media @screen_max-md {
+    /* license note under edit window */
+    div.license {
         font-size: @font-size-small;
+        line-height: @line-height-default;
+        padding-top: 1rem;
+
+        @media @screen_max-lg {
+            font-size: @font-size-default;
+        }
+
+        @media @screen_max-md {
+            font-size: @font-size-small;
+        }
+
+        * {
+            font-size: inherit;
+        }
     }
 
-    * {
-        font-size: inherit;
+    [dir=rtl] & .docInfo {
+        text-align: left;
     }
-}
 
-[dir=rtl] .dokuwiki .docInfo {
-    text-align: left;
-}
-
-[dir=rtl] .dokuwiki .pageId {
-    float: left;
-    margin-left: -1em;
-    margin-right: 0;
+    [dir=rtl] & .pageId {
+        float: left;
+        margin-left: -1em;
+        margin-right: 0;
+    }
 }
 
 caption,
@@ -305,6 +312,17 @@ ol ol ol ol ol {
     list-style-type: lower-roman;
 }
 
+
+/*____________ tables ____________*/
+
+.dokuwiki table.inline tr:hover td {
+    color: @ini_text_alt;
+
+    * {
+        color: @ini_text_alt;
+    }
+}
+
 table {
     border-collapse: collapse;
     empty-cells: show;
@@ -334,6 +352,7 @@ td {
 th {
     font-weight: bold;
     background-color: @ini_background_alt;
+    color: @ini_text_alt;
     text-align: left;
 }
 
@@ -403,7 +422,7 @@ em abbr {
 
 mark {
     background-color: @ini_highlight;
-    color: inherit;
+    color: @ini_highlight_text;
 }
 
 pre,
@@ -415,7 +434,7 @@ kbd {
     font-size: @font-size-default;
     direction: ltr;
     text-align: left;
-    background-color: @ini_background_site;
+    background-color: @ini_background_content;
     color: @ini_text;
     box-shadow: inset 0 0 .3em @ini_border;
     border-radius: @fix_border-radius;
diff --git a/css/base_mixins.less b/css/base_mixins.less
index 6336b36..82a5291 100755
--- a/css/base_mixins.less
+++ b/css/base_mixins.less
@@ -142,12 +142,30 @@
 
 
 /* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */
+.btn-hover {
+    background-color: @ini_nav_menu_hover_bg;
+    color: @ini_nav_menu_hover_color;
+    transition: @transition color, @transition background-color, @transition border-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @ini_nav_menu_hover_color;
+        border-color: @ini_nav_menu_hover_color;
+        color: @ini_nav_menu_hover_bg;
+
+        .prefix {
+            color: inherit;
+        }
+    }
+}
+
 .btn-usertools-wrapper(@elem:@toggle-size) {
     display: inline-block;
     min-height: @elem;
     min-width: @elem;
     box-sizing: border-box;
-    color: @ini_nav_menu_color;
+    color: @ini_text_webframe;
     font-size: @font-size-small;
     padding: 0;
     margin: 0 .25rem;
@@ -161,7 +179,7 @@
     .num {
         position: absolute;
         right: -.4rem;
-        top: -.4em;
+        top: -.5em;
         background-color: @ini_nav_menu_hover_color;
         border-radius: 2px;
         color: @ini_nav_menu_hover_bg;
diff --git a/css/plugins/tabinclude.less b/css/plugins/tabinclude.less
index 86a1a43..06666ff 100644
--- a/css/plugins/tabinclude.less
+++ b/css/plugins/tabinclude.less
@@ -1,39 +1,57 @@
 /**
- * This file provides styles for the edit view (?do=edit), preview
- * and section edit buttons.
+ * This file provides styles for the tabinclude
  */
 
 
 /* + + + + +  plugin tabinclude  + + + + + */
 
 div#dwpl-ti-container {
-
-/* + + +  tabnav  + + + */
     li.dwpl-ti-tab {
         box-shadow: none;
-        border-color: @ini_background_site;
+        background-color: @ini_background_page_header;
+        border-color: @ini_border;
         border-radius: @fix_border-radius @fix_border-radius 0 0;
+        color: @ini_background_page_footer;
         padding: 0;
 
+        &:hover {
+            background-color: @ini_background_page_header;
+            text-decoration: none;
+
+            div {
+                text-decoration: underline;
+
+                &.selected {
+                    color: @ini_text;
+                }
+            }
+        }
+
         div {
-            background-color: @ini_background_page-header;
             border-radius: inherit;
+            color: inherit;
             padding: .1em .35em;
 
             &.selected {
-                background-color: @ini_background_site;
+                position: relative;
+                z-index: 1;
+                background-color: @ini_background_content;
+                color: @ini_text;
             }
         }
     }
 
 
-/* + + +  box  + + + */
+/* + + +  content box  + + + */
     div.dwpl-ti-content-box {
+        position: relative;
+        z-index: 0;
         overflow: auto;
-        box-shadow: none;
-        background-color: @ini_background_site;
-        border: solid 1px @ini_background_site;
+        box-shadow: @box-shadow-offset;
+        background-color: @ini_background_content;
+        border: solid 1px @ini_border;
         border-radius: 0;
+        margin-top: -1px;
     }
 }
 
@@ -42,7 +60,5 @@ div#dwpl-ti-container {
 /* media queries */
 
 @media @screen_max-md {
-    div#dwpl-ti-container {
-
-    }
+    div#dwpl-ti-container { }
 }