[BUGFIX] FormEngine & DynTab styling and contrast 22/34822/2
authorFelix Kopp <felix-source@phorax.com>
Sun, 30 Nov 2014 17:24:59 +0000 (18:24 +0100)
committerFrank Nägler <typo3@naegler.net>
Sun, 30 Nov 2014 17:49:32 +0000 (18:49 +0100)
Fixes DynTabs where background and tab body content
lack on necessary contrast - especially FormEngine.

Resolves: #62002
Releases: master
Change-Id: Ib762306c0d825a77cdbb4255f51de1c30d7d6e76
Reviewed-on: http://review.typo3.org/34822
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tab.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tceforms.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 3a091d6..55954ab 100644 (file)
@@ -16,7 +16,28 @@ Tab menu
 - - - - - - - - - - - - - - - - - - - - - */
 
 .nav-tabs {
-       background-color: @gray-light;
+       background-color: darken(@nav-tabs-active-link-bg, 5%);
+
+       > li {
+               > a {
+                       margin-right: 3px;
+
+                       &:hover {
+                               background: @nav-tabs-link-hover-bg;
+                       }
+               }
+
+               &.active > a {
+                       &,
+                       &:focus {
+                               background: @nav-tabs-active-link-bg;
+                       }
+
+                       &:hover {
+                               background: @nav-tabs-active-link-hover-bg;
+                       }
+               }
+       }
 }
 
 
@@ -24,9 +45,10 @@ div.typo3-dyntabmenu-divs {
        padding: floor(@line-height-computed * 1.5) @line-height-computed;
        margin-bottom: 1em;
 
-       border-right: 1px solid @gray-light;
-       border-bottom: 1px solid @gray-light;
-       border-left: 1px solid @gray-light;
+       background: @nav-tabs-active-link-bg;
+       border-right: 1px solid @nav-tabs-border-color;
+       border-bottom: 1px solid @nav-tabs-border-color;
+       border-left: 1px solid @nav-tabs-border-color;
 
        p.c-descr {
                background: #e7dba8;
@@ -83,4 +105,4 @@ div.typo3-dyntabmenu-divs-foldout div.disabled:hover {
 .c-tablayer {
        margin: 0;
        padding: 0;
-}
\ No newline at end of file
+}
index 60cc70e..d752239 100644 (file)
@@ -39,7 +39,7 @@ TCEforms
                                                background: none;
 
                                                &.palette-header {
-                                                       border-top: 1px solid @gray-light;
+                                                       border-top: 1px solid @nav-tabs-border-color;
                                                        padding: ceil(@line-height-computed * 1.5) @line-height-computed floor(@line-height-computed * 0.25) @line-height-computed;
 
                                                        h3 {
index e117bf5..7ab9ec4 100644 (file)
 @nav-open-link-hover-color:                 #fff;
 
 //== Tabs
-@nav-tabs-border-color:                     @gray-light;
+@nav-tabs-border-color:                     #ccc;
 
+@nav-tabs-link-hover-bg:                    darken(@nav-tabs-active-link-bg, 10%);
 @nav-tabs-link-hover-border-color:          @gray-light;
 
+@nav-tabs-active-link-bg:                   #fafafa;
+
 @nav-tabs-active-link-hover-bg:             @body-bg;
 @nav-tabs-active-link-hover-color:          #000;
-@nav-tabs-active-link-hover-border-color:   #ddd;
 
-@nav-tabs-justified-link-border-color:            #ddd;
-@nav-tabs-justified-active-link-border-color:     @body-bg;
+@nav-tabs-active-link-hover-border-color:   #ccc;
+@nav-tabs-active-link-hover-bg:             darken(@nav-tabs-active-link-bg, 5%);
 
+@nav-tabs-justified-link-border-color:            #ccc;
+@nav-tabs-justified-active-link-border-color:     @nav-tabs-border-color;
 //== Pills
 @nav-pills-border-radius:                   @border-radius-base;
 @nav-pills-active-link-hover-bg:            @component-active-bg;
 @nav-pills-active-link-hover-color:         @component-active-color;
 
 
+
 //== Pagination
 //
 //##
index ff84f74..3568483 100644 (file)
@@ -2800,7 +2800,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   max-width: none;
 }
 .nav-tabs {
-  border-bottom: 1px solid #d7d7d7;
+  border-bottom: 1px solid #cccccc;
 }
 .nav-tabs > li {
   float: left;
@@ -2813,14 +2813,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-radius: 2px 2px 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #d7d7d7 #d7d7d7 #d7d7d7;
+  border-color: #d7d7d7 #d7d7d7 #cccccc;
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #000000;
-  background-color: #ffffff;
-  border: 1px solid #dddddd;
+  background-color: #ededed;
+  border: 1px solid #cccccc;
   border-bottom-color: transparent;
   cursor: default;
 }
@@ -2855,17 +2855,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #dddddd;
+  border: 1px solid #cccccc;
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #dddddd;
+    border-bottom: 1px solid #cccccc;
     border-radius: 2px 2px 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
   .nav-tabs.nav-justified > .active > a:hover,
   .nav-tabs.nav-justified > .active > a:focus {
-    border-bottom-color: #ffffff;
+    border-bottom-color: #cccccc;
   }
 }
 .nav-pills > li {
@@ -2923,17 +2923,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #dddddd;
+  border: 1px solid #cccccc;
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #dddddd;
+    border-bottom: 1px solid #cccccc;
     border-radius: 2px 2px 0 0;
   }
   .nav-tabs-justified > .active > a,
   .nav-tabs-justified > .active > a:hover,
   .nav-tabs-justified > .active > a:focus {
-    border-bottom-color: #ffffff;
+    border-bottom-color: #cccccc;
   }
 }
 .tab-content > .tab-pane {
@@ -7863,14 +7863,28 @@ span.spinner {
 Tab menu
 - - - - - - - - - - - - - - - - - - - - - */
 .nav-tabs {
-  background-color: #d7d7d7;
+  background-color: #ededed;
+}
+.nav-tabs > li > a {
+  margin-right: 3px;
+}
+.nav-tabs > li > a:hover {
+  background: #e1e1e1;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:focus {
+  background: #fafafa;
+}
+.nav-tabs > li.active > a:hover {
+  background: #ededed;
 }
 div.typo3-dyntabmenu-divs {
   padding: 27px 18px;
   margin-bottom: 1em;
-  border-right: 1px solid #d7d7d7;
-  border-bottom: 1px solid #d7d7d7;
-  border-left: 1px solid #d7d7d7;
+  background: #fafafa;
+  border-right: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  border-left: 1px solid #cccccc;
 }
 div.typo3-dyntabmenu-divs p.c-descr {
   background: #e7dba8;
@@ -9245,7 +9259,7 @@ TCEforms
   background: none;
 }
 .typo3-TCEforms .c-tablayer > table > tbody > tr > td.palette-header {
-  border-top: 1px solid #d7d7d7;
+  border-top: 1px solid #cccccc;
   padding: 27px 18px 4px 18px;
 }
 .typo3-TCEforms .c-tablayer > table > tbody > tr > td.palette-header h3 {