improved tab styles

* added more selectors to allow different markup
* added border to make tabs more distinctive, especially in other templates

2 files changed, 57 insertions, 15 deletions

diff --git a/lib/tpl/dokuwiki/css/_media_fullscreen.css b/lib/tpl/dokuwiki/css/_media_fullscreen.css
index c67e16051..8d5e1e8ca 100644
--- a/lib/tpl/dokuwiki/css/_media_fullscreen.css
+++ b/lib/tpl/dokuwiki/css/_media_fullscreen.css
@@ -91,24 +91,35 @@
     text-align: right;
 }
 
+/* make it look like a tab (as in _tabs.css) */
 #mediamanager__page .namespaces h2 {
     font-size: 1em;
     display: inline-block;
-    border-width: 0;
     padding: .3em .8em;
-    margin: 0 .3em 0 0;
+    margin: 0 0 0 .3em;
     border-radius: .5em .5em 0 0;
     font-weight: normal;
     background-color: __background_alt__;
     color: __text__;
+    border: 1px solid __border__;
+    border-bottom-color: __background_alt__;
     line-height: 1.4em;
+    position: relative;
+    bottom: -1px;
+    z-index: 2;
 }
 * html #mediamanager__page .namespaces h2,
 *+html #mediamanager__page .namespaces h2 {
     display: inline;
 }
 [dir=rtl] #mediamanager__page .namespaces h2 {
-    margin-right: 10px;
+    margin: 0 .3em 0 0;
+    position: relative;
+    right: 10px;
+}
+#mediamanager__page .namespaces .panelHeader {
+    border-top: 1px solid __border__;
+    z-index: 1;
 }
 
 #mediamanager__page .namespaces ul {
@@ -165,10 +176,12 @@
 
 #mediamanager__page .panelHeader ul li.listType {
     padding-left: 30px;
+    margin: 0 0 0 5px;
     background: url('../../images/icon-list.png') 3px 1px no-repeat;
 }
 #mediamanager__page .panelHeader ul li.sortBy {
     padding-left: 30px;
+    margin: 0 0 0 5px;
     background: url('../../images/icon-sort.png') 3px 1px no-repeat;
 }
 
@@ -185,10 +198,10 @@
 
 #mediamanager__page .filelist ul {
     padding: 0;
-    margin: 0;
+    margin: 0 10px 0 0;
 }
-[dir=rtl] #mediamanager__page .filelist ul.tabs {
-    margin-right: 10px;
+[dir=rtl] #mediamanager__page .filelist ul {
+    margin: 0 10px 0 0;
 }
 
 #mediamanager__page .filelist .panelContent ul li:hover {
diff --git a/lib/tpl/dokuwiki/css/_tabs.css b/lib/tpl/dokuwiki/css/_tabs.css
index 1dffa8f7b..845ec9a57 100644
--- a/lib/tpl/dokuwiki/css/_tabs.css
+++ b/lib/tpl/dokuwiki/css/_tabs.css
@@ -2,40 +2,56 @@
  * This file provides the styles for general tabs.
  */
 
+.dokuwiki .tabs > ul,
 .dokuwiki ul.tabs {
     padding: 0;
     margin: 0;
     overflow: hidden;
+    position: relative;
 }
+/* border underneath */
+.dokuwiki .tabs > ul:after,
+.dokuwiki ul.tabs:after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    border-bottom: 1px solid __border__;
+    z-index: 1;
+}
+
+.dokuwiki .tabs > ul li,
 .dokuwiki ul.tabs li {
     float: left;
     padding: 0;
     margin: 0;
     list-style: none;
 }
+[dir=rtl] .dokuwiki .tabs > ul li,
 [dir=rtl] .dokuwiki ul.tabs li {
     float: right;
 }
 
+.dokuwiki .tabs > ul li a,
 .dokuwiki ul.tabs li strong,
 .dokuwiki ul.tabs li a {
-    float: left;
+    display: inline-block;
     padding: .3em .8em;
-    margin: 0 .3em 0 0;
+    margin: 0 0 0 .3em;
     background-color: __background_neu__;
     color: __text__;
+    border: 1px solid __border__;
     border-radius: .5em .5em 0 0;
+    position: relative;
+    z-index: 0;
 }
+[dir=rtl] .dokuwiki .tabs > ul li a,
 [dir=rtl] .dokuwiki ul.tabs li strong,
 [dir=rtl] .dokuwiki ul.tabs li a {
-    float: right;
-    margin: 0 0 0 .3em;
-}
-*+html[dir=rtl] .dokuwiki ul.tabs li strong,
-*+html[dir=rtl] .dokuwiki ul.tabs li a {
-    float: none;
-    display: inline-block;
+    margin: 0 .3em 0 0;
 }
+
 .dokuwiki ul.tabs li strong {
     font-weight: normal;
 }
@@ -43,6 +59,11 @@
 .dokuwiki ul.tabs li a:link,
 .dokuwiki ul.tabs li a:visited {
 }
+.dokuwiki .tabs > ul li a:hover,
+.dokuwiki .tabs > ul li a:active,
+.dokuwiki .tabs > ul li a:focus,
+.dokuwiki .tabs > ul li .curid a,
+.dokuwiki .tabs > ul .active a,
 .dokuwiki ul.tabs li a:hover,
 .dokuwiki ul.tabs li a:active,
 .dokuwiki ul.tabs li a:focus,
@@ -50,4 +71,12 @@
     background-color: __background_alt__;
     color: __text__;
     text-decoration: none;
+    font-weight: normal;
+}
+
+.dokuwiki .tabs > ul li .curid a,
+.dokuwiki .tabs > ul li .active a,
+.dokuwiki ul.tabs li strong {
+    z-index: 2;
+    border-bottom-color: __background_alt__;
 }