web/style.less: Separate out .table-bordered from .table
authorTimothy Gu <timothygu99@gmail.com>
Sun, 16 Nov 2014 05:23:39 +0000 (21:23 -0800)
committerMichael Niedermayer <michaelni@gmx.at>
Tue, 18 Nov 2014 22:23:06 +0000 (23:23 +0100)
The only instance of .table in the web source is the download page for the
Git repos. I did not change that page because an unbordered table there is
prettier IMO.

I retained the .table-bordered style in case anyone want to use it in the
future.

Signed-off-by: Timothy Gu <timothygu99@gmail.com>
Reviewed-by: Clément Bœsch <u@pkh.me>
src/less/style.less

index c9ebdc8..433a78f 100644 (file)
@@ -30,7 +30,8 @@ SOFTWARE.
 @Cmaindarkdark:      darken(@Cmain,   10%);
 @Cborder:            darken(@Cmain,   13%);
 @Cmainlight:        lighten(@Cmain,    5%);
-@Cmainlightlight:   lighten(@Cmain,   55%);
+@Cmainlightlight:   lighten(@Cmain,   10%);
+@Cmainlightlightl:  lighten(@Cmain,   55%);
 
 // Complete invert of the main black theme.
 @Cinvert:               hsl(0, 0%,    90%);
@@ -89,7 +90,7 @@ h1, h2, h3, h4 {
 }
 
 h1, h2, h3 {
-    color: @Cmainlightlight;
+    color: @Cmainlightlightl;
     strong {
         color: @Cinvert;
     }
@@ -100,12 +101,12 @@ h4, h5, h6 {
 }
 
 h1 {
-  border-bottom: 4px @Cmainlightlight solid;
+  border-bottom: 4px @Cmainlightlightl solid;
   padding: 20px 2%;
 }
 
 h3 {
-  border-bottom: 2px @Cmainlightlight solid;
+  border-bottom: 2px @Cmainlightlightl solid;
   padding: 15px 1%;
 }
 
@@ -137,7 +138,7 @@ h4 {
 .well {
     background-color: @Cmaindark;
     border-color: black;
-    color: @Cmainlightlight;
+    color: @Cmainlightlightl;
     strong {
         color: @Cinvert;
     }
@@ -244,19 +245,70 @@ code {
 .table {
     margin: 20px 0;
     border-radius: 4px;
-    th, td, tr {
-        border: 1px solid @Cmaindarkdark;
+    // Stripes
+    > tbody > tr:nth-child(odd) {
+        > td {
+            background-color: @Cmaindark;
+        }
+        > th {
+            background-color: @Cmain;
+        }
     }
-    tr {
-        th {
+    > tbody > tr:nth-child(even) {
+        > td {
             background-color: @Cmainlight;
-            border-bottom: 2px solid @Cinvert;
         }
     }
-    tr:nth-child(odd) {
-        background-color: @Cmaindark;
+    // Cells
+    > thead,
+    > tbody,
+    > tfoot {
+        > tr {
+            > th,
+            > td {
+                border-top: none;
+            }
+            > th {
+                background-color: @Cmainlightlight;
+                // Bottom align for column headings
+                border-bottom: 2px solid @Cmainlightlightl;
+            }
+        }
+    }
+    // Account for multiple tbody instances
+    > tbody + tbody {
+        border-top: 2px solid @Cmaindarkdark;
+    }
+}
+
+// This adds borders to the table elements. Nothing is using it right now so
+// it is commented out.
+/*
+.table-bordered {
+    border: 1px solid @Cmaindarkdark;
+    > thead,
+    > tbody,
+    > tfoot {
+        > tr {
+            > th,
+            > td {
+                border: 1px solid @Cmaindarkdark;
+            }
+            > th {
+                background-color: @Cmainlightlight;
+                // Bottom align for column headings
+                border-bottom: 2px solid @Cmainlightlightl;
+            }
+        }
+    }
+    > thead > tr {
+        > th,
+        > td {
+            border-bottom-width: 2px;
+        }
     }
 }
+*/
 
 // ************************************************************************* //
 // Menu side bar nav