[FEATURE] Backend skin: Fresh table style 58/33258/2
authorFelix Kopp <felix-source@phorax.com>
Sat, 11 Oct 2014 00:01:09 +0000 (02:01 +0200)
committerGeorg Ringer <georg.ringer@gmail.com>
Mon, 13 Oct 2014 05:52:11 +0000 (07:52 +0200)
Ease the table layout and embrace striped zebra style.
Remove borders - soften the header.

Resolves: #62159
Releases: master
Change-Id: I8b2e47158a5f9be61f184b928363ba9c5f4110c0
Reviewed-on: http://review.typo3.org/33258
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_table.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

index 584599e..9a355f3 100644 (file)
        padding-left: 22px;
 }
 
        padding-left: 22px;
 }
 
+table {
+       background: transparent;
+}
+
 /**
  * Common style for tables
  *
 /**
  * Common style for tables
  *
@@ -48,9 +52,6 @@
  */
 
 .table {
  */
 
 .table {
-       border-right: 1px solid @table-border-color;
-       border-bottom: 1px solid @table-border-color;
-       border-left: 1px solid @table-border-color;
 
        > thead,
        > tbody {
 
        > thead,
        > tbody {
                > tr {
                        > th,
                        > td {
                > tr {
                        > th,
                        > td {
-                               background-color: #666;
-                               color: #fff;
-                               font-weight: normal;
-                               min-height: 16px;
-
-                               a,
-                               a {
-                                       color: #fff;
-                                       text-decoration: underline;
-                               }
+                               border-bottom: 1px solid #666;
                        }
                }
        }
 
        > tbody {
                        }
                }
        }
 
        > tbody {
+               > tr {
+                       > td {
+                               background-color: @table-bg;
+                       }
+               }
                > tr:hover {
                        > td {
                                transition: background-color 100ms linear;
                > tr:hover {
                        > td {
                                transition: background-color 100ms linear;
index 40e690f..b948f69 100644 (file)
 @table-condensed-cell-padding:  6px; /* Not supported yet in CMS */
 
 //** Default background color used for all tables.
 @table-condensed-cell-padding:  6px; /* Not supported yet in CMS */
 
 //** Default background color used for all tables.
-@table-bg:                      transparent;
+@table-bg:                      #f9f9f9;
 //** Background color used for `.table-striped`.
 //** Background color used for `.table-striped`.
-@table-bg-accent:               #f7f7f7;
+@table-bg-accent:               darken(@table-bg, 2%);
 //** Background color used for `.table-hover`.
 //** Background color used for `.table-hover`.
-@table-bg-hover:                #dedede;
+@table-bg-hover:                darken(@table-bg, 10%);
 @table-bg-active:               @table-bg-hover;
 
 //** Border color for table and cell borders.
 @table-bg-active:               @table-bg-hover;
 
 //** Border color for table and cell borders.
-@table-border-color:            #ddd;
+@table-border-color:            #fff;
 
 
 //== Buttons
 
 
 //== Buttons
index 13a41d8..8e1a126 100644 (file)
@@ -1876,7 +1876,7 @@ pre code {
   }
 }
 table {
   }
 }
 table {
-  background-color: transparent;
+  background-color: #f9f9f9;
 }
 th {
   text-align: left;
 }
 th {
   text-align: left;
@@ -1895,11 +1895,11 @@ th {
   padding: 6px;
   line-height: 1.5;
   vertical-align: top;
   padding: 6px;
   line-height: 1.5;
   vertical-align: top;
-  border-top: 1px solid #dddddd;
+  border-top: 1px solid #ffffff;
 }
 .table > thead > tr > th {
   vertical-align: bottom;
 }
 .table > thead > tr > th {
   vertical-align: bottom;
-  border-bottom: 2px solid #dddddd;
+  border-bottom: 2px solid #ffffff;
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
@@ -1910,7 +1910,7 @@ th {
   border-top: 0;
 }
 .table > tbody + tbody {
   border-top: 0;
 }
 .table > tbody + tbody {
-  border-top: 2px solid #dddddd;
+  border-top: 2px solid #ffffff;
 }
 .table .table {
   background-color: #ffffff;
 }
 .table .table {
   background-color: #ffffff;
@@ -1924,7 +1924,7 @@ th {
   padding: 6px;
 }
 .table-bordered {
   padding: 6px;
 }
 .table-bordered {
-  border: 1px solid #dddddd;
+  border: 1px solid #ffffff;
 }
 .table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
 }
 .table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
@@ -1932,7 +1932,7 @@ th {
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
-  border: 1px solid #dddddd;
+  border: 1px solid #ffffff;
 }
 .table-bordered > thead > tr > th,
 .table-bordered > thead > tr > td {
 }
 .table-bordered > thead > tr > th,
 .table-bordered > thead > tr > td {
@@ -1940,11 +1940,11 @@ th {
 }
 .table-striped > tbody > tr:nth-child(odd) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
 }
 .table-striped > tbody > tr:nth-child(odd) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
-  background-color: #f7f7f7;
+  background-color: #f4f4f4;
 }
 .table-hover > tbody > tr:hover > td,
 .table-hover > tbody > tr:hover > th {
 }
 .table-hover > tbody > tr:hover > td,
 .table-hover > tbody > tr:hover > th {
-  background-color: #dedede;
+  background-color: #e0e0e0;
 }
 table col[class*="col-"] {
   position: static;
 }
 table col[class*="col-"] {
   position: static;
@@ -1969,14 +1969,14 @@ table th[class*="col-"] {
 .table > thead > tr.active > th,
 .table > tbody > tr.active > th,
 .table > tfoot > tr.active > th {
 .table > thead > tr.active > th,
 .table > tbody > tr.active > th,
 .table > tfoot > tr.active > th {
-  background-color: #dedede;
+  background-color: #e0e0e0;
 }
 .table-hover > tbody > tr > td.active:hover,
 .table-hover > tbody > tr > th.active:hover,
 .table-hover > tbody > tr.active:hover > td,
 .table-hover > tbody > tr:hover > .active,
 .table-hover > tbody > tr.active:hover > th {
 }
 .table-hover > tbody > tr > td.active:hover,
 .table-hover > tbody > tr > th.active:hover,
 .table-hover > tbody > tr.active:hover > td,
 .table-hover > tbody > tr:hover > .active,
 .table-hover > tbody > tr.active:hover > th {
-  background-color: #d1d1d1;
+  background-color: #d3d3d3;
 }
 .table > thead > tr > td.success,
 .table > tbody > tr > td.success,
 }
 .table > thead > tr > td.success,
 .table > tbody > tr > td.success,
@@ -2069,7 +2069,7 @@ table th[class*="col-"] {
     overflow-y: hidden;
     overflow-x: auto;
     -ms-overflow-style: -ms-autohiding-scrollbar;
     overflow-y: hidden;
     overflow-x: auto;
     -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid #dddddd;
+    border: 1px solid #ffffff;
     -webkit-overflow-scrolling: touch;
   }
   .table-responsive > .table {
     -webkit-overflow-scrolling: touch;
   }
   .table-responsive > .table {
@@ -4913,7 +4913,7 @@ a.list-group-item-danger.active:focus {
 }
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive {
 }
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive {
-  border-top: 1px solid #dddddd;
+  border-top: 1px solid #ffffff;
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {
@@ -8472,6 +8472,9 @@ div.typo3-dyntabmenu-divs-foldout div.disabled:hover {
   margin: 2px 0 15px 20px;
   padding-left: 22px;
 }
   margin: 2px 0 15px 20px;
   padding-left: 22px;
 }
+table {
+  background: transparent;
+}
 /**
  * Common style for tables
  *
 /**
  * Common style for tables
  *
@@ -8492,11 +8495,6 @@ div.typo3-dyntabmenu-divs-foldout div.disabled:hover {
  *   </tbody>
  * </table>
  */
  *   </tbody>
  * </table>
  */
-.table {
-  border-right: 1px solid #dddddd;
-  border-bottom: 1px solid #dddddd;
-  border-left: 1px solid #dddddd;
-}
 .table > thead tr th:first-child,
 .table > tbody tr th:first-child,
 .table > thead tr th:last-child,
 .table > thead tr th:first-child,
 .table > tbody tr th:first-child,
 .table > thead tr th:last-child,
@@ -8509,17 +8507,10 @@ div.typo3-dyntabmenu-divs-foldout div.disabled:hover {
 }
 .table > thead > tr > th,
 .table > thead > tr > td {
 }
 .table > thead > tr > th,
 .table > thead > tr > td {
-  background-color: #666;
-  color: #fff;
-  font-weight: normal;
-  min-height: 16px;
+  border-bottom: 1px solid #666;
 }
 }
-.table > thead > tr > th a,
-.table > thead > tr > td a,
-.table > thead > tr > th a,
-.table > thead > tr > td a {
-  color: #fff;
-  text-decoration: underline;
+.table > tbody > tr > td {
+  background-color: #f9f9f9;
 }
 .table > tbody > tr:hover > td {
   transition: background-color 100ms linear;
 }
 .table > tbody > tr:hover > td {
   transition: background-color 100ms linear;
@@ -8531,9 +8522,6 @@ table.t3-table {
   width: 100%;
   max-width: 100%;
   margin-bottom: 18px;
   width: 100%;
   max-width: 100%;
   margin-bottom: 18px;
-  border-right: 1px solid #dddddd;
-  border-bottom: 1px solid #dddddd;
-  border-left: 1px solid #dddddd;
 }
 table.t3-table > thead > tr > th,
 table.t3-table > tbody > tr > th,
 }
 table.t3-table > thead > tr > th,
 table.t3-table > tbody > tr > th,
@@ -8544,11 +8532,11 @@ table.t3-table > tfoot > tr > td {
   padding: 6px;
   line-height: 1.5;
   vertical-align: top;
   padding: 6px;
   line-height: 1.5;
   vertical-align: top;
-  border-top: 1px solid #dddddd;
+  border-top: 1px solid #ffffff;
 }
 table.t3-table > thead > tr > th {
   vertical-align: bottom;
 }
 table.t3-table > thead > tr > th {
   vertical-align: bottom;
-  border-bottom: 2px solid #dddddd;
+  border-bottom: 2px solid #ffffff;
 }
 table.t3-table > caption + thead > tr:first-child > th,
 table.t3-table > colgroup + thead > tr:first-child > th,
 }
 table.t3-table > caption + thead > tr:first-child > th,
 table.t3-table > colgroup + thead > tr:first-child > th,
@@ -8559,7 +8547,7 @@ table.t3-table > thead:first-child > tr:first-child > td {
   border-top: 0;
 }
 table.t3-table > tbody + tbody {
   border-top: 0;
 }
 table.t3-table > tbody + tbody {
-  border-top: 2px solid #dddddd;
+  border-top: 2px solid #ffffff;
 }
 table.t3-table .table {
   background-color: #ffffff;
 }
 table.t3-table .table {
   background-color: #ffffff;
@@ -8576,17 +8564,10 @@ table.t3-table > tbody tr td:last-child {
 }
 table.t3-table > thead > tr > th,
 table.t3-table > thead > tr > td {
 }
 table.t3-table > thead > tr > th,
 table.t3-table > thead > tr > td {
-  background-color: #666;
-  color: #fff;
-  font-weight: normal;
-  min-height: 16px;
+  border-bottom: 1px solid #666;
 }
 }
-table.t3-table > thead > tr > th a,
-table.t3-table > thead > tr > td a,
-table.t3-table > thead > tr > th a,
-table.t3-table > thead > tr > td a {
-  color: #fff;
-  text-decoration: underline;
+table.t3-table > tbody > tr > td {
+  background-color: #f9f9f9;
 }
 table.t3-table > tbody > tr:hover > td {
   transition: background-color 100ms linear;
 }
 table.t3-table > tbody > tr:hover > td {
   transition: background-color 100ms linear;
@@ -8596,11 +8577,11 @@ table.t3-table > tbody > tr:hover > td a {
 }
 table.t3-table > tbody > tr:nth-child(odd) > td,
 table.t3-table > tbody > tr:nth-child(odd) > th {
 }
 table.t3-table > tbody > tr:nth-child(odd) > td,
 table.t3-table > tbody > tr:nth-child(odd) > th {
-  background-color: #f7f7f7;
+  background-color: #f4f4f4;
 }
 table.t3-table > tbody > tr:hover > td,
 table.t3-table > tbody > tr:hover > th {
 }
 table.t3-table > tbody > tr:hover > td,
 table.t3-table > tbody > tr:hover > th {
-  background-color: #dedede;
+  background-color: #e0e0e0;
 }
 /**
  * This file is part of the TYPO3 CMS project.
 }
 /**
  * This file is part of the TYPO3 CMS project.