fomantic-ui 2.9.0-beta.12 → 2.9.0-beta.123

package/dist/components/table.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.12 - Table
+ * # Fomantic-UI 2.9.0-beta.123 - Table
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -473,6 +473,167 @@
     -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
             box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset;
   }
+  .ui.scrolling.table.short > tbody {
+    max-height: 6.74983929em;
+  }
+  .ui.scrolling.table[class*="very short"] > tbody {
+    max-height: 4.49989286em;
+  }
+  .ui.scrolling.table > tbody {
+    max-height: 8.99978571em;
+  }
+  .ui.scrolling.table.long > tbody {
+    max-height: 17.99957143em;
+  }
+  .ui.scrolling.table[class*="very long"] > tbody {
+    max-height: 26.99935714em;
+  }
+}
+
+/*--------------
+    Scrolling
+  ---------------*/
+
+@media only screen and (min-width: 768px) {
+  .ui.scrolling.table.short > tbody {
+    max-height: 8.99978571em;
+  }
+  .ui.scrolling.table[class*="very short"] > tbody {
+    max-height: 5.99985714em;
+  }
+  .ui.scrolling.table > tbody {
+    max-height: 11.99971429em;
+  }
+  .ui.scrolling.table.long > tbody {
+    max-height: 23.99942857em;
+  }
+  .ui.scrolling.table[class*="very long"] > tbody {
+    max-height: 35.99914286em;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .ui.scrolling.table.short > tbody {
+    max-height: 13.49967857em;
+  }
+  .ui.scrolling.table[class*="very short"] > tbody {
+    max-height: 8.99978571em;
+  }
+  .ui.scrolling.table > tbody {
+    max-height: 17.99957143em;
+  }
+  .ui.scrolling.table.long > tbody {
+    max-height: 35.99914286em;
+  }
+  .ui.scrolling.table[class*="very long"] > tbody {
+    max-height: 53.99871429em;
+  }
+}
+@media only screen and (min-width: 1920px) {
+  .ui.scrolling.table.short > tbody {
+    max-height: 17.99957143em;
+  }
+  .ui.scrolling.table[class*="very short"] > tbody {
+    max-height: 11.99971429em;
+  }
+  .ui.scrolling.table > tbody {
+    max-height: 23.99942857em;
+  }
+  .ui.scrolling.table.long > tbody {
+    max-height: 47.99885714em;
+  }
+  .ui.scrolling.table[class*="very long"] > tbody {
+    max-height: 71.99828571em;
+  }
+}
+.ui.scrolling.table > thead,
+.ui.scrolling.table > tfoot,
+.ui.scrolling.table > tbody {
+  display: block;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  
+/* Firefox */
+}
+.ui.scrolling.table > thead > tr,
+.ui.scrolling.table > tfoot > tr,
+.ui.scrolling.table > tbody > tr {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+
+/* Camouflage scrollbars, we need them only to gain the same width as tbody */
+.ui.scrolling.table > thead {
+  background: #F9FAFB;
+  color: #F9FAFB;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.scrolling.table > tfoot {
+  background: #F9FAFB;
+  color: #F9FAFB;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+.ui.inverted.scrolling.table > thead {
+  background: rgba(0, 0, 0, 0.15);
+  color: rgba(0, 0, 0, 0.15);
+}
+.ui.inverted.scrolling.table > tfoot {
+  background: rgba(0, 0, 0, 0.15);
+  color: rgba(0, 0, 0, 0.15);
+}
+.ui.scrolling.table > thead::-webkit-scrollbar-track,
+.ui.scrolling.table > tfoot::-webkit-scrollbar-track {
+  background: inherit;
+  border-radius: 0.28571429rem;
+}
+
+/* Firefox & IE */
+.ui.scrolling.table > thead,
+.ui.scrolling.table > tfoot {
+  scrollbar-color: currentColor currentColor;
+  scrollbar-face-color: currentColor;
+  scrollbar-shadow-color: currentColor;
+  scrollbar-track-color: currentColor;
+  scrollbar-arrow-color: currentColor;
+}
+
+/* IE scrollbar color needs hex values */
+@media all and (-ms-high-contrast: none) {
+  .ui.scrolling.table > thead {
+    color: #F9FAFB;
+  }
+  .ui.scrolling.table > tfoot {
+    color: #F9FAFB;
+  }
+  .ui.inverted.scrolling.table > thead {
+    color: #252525;
+  }
+  .ui.inverted.scrolling.table > tfoot {
+    color: #252525;
+  }
+}
+.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.25);
+}
+.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(255, 255, 255, 0.15);
+}
+.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+.ui.inverted.scrolling.table > tbody {
+  
+/* IE11 */
+  scrollbar-face-color: #656565;
+  scrollbar-shadow-color: #656565;
+  scrollbar-track-color: #323232;
+  scrollbar-arrow-color: #323232;
+  
+/* firefox : first color thumb, second track */
+  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
 }
 
 
@@ -599,6 +760,11 @@
   background: #FCFFF5;
   color: #2C662D;
 }
+.ui.ui.ui.ui.inverted.table tr.positive,
+.ui.ui.inverted.table td.positive {
+  background: #A3C293;
+  color: #2C662D;
+}
 
 /*--------------
        Negative
@@ -611,6 +777,11 @@
   background: #FFF6F6;
   color: #9F3A38;
 }
+.ui.ui.ui.ui.inverted.table tr.negative,
+.ui.ui.inverted.table td.negative {
+  background: #E0B4B4;
+  color: #9F3A38;
+}
 
 /*--------------
         Error
@@ -623,6 +794,11 @@
   background: #FFF6F6;
   color: #9F3A38;
 }
+.ui.ui.ui.ui.inverted.table tr.error,
+.ui.ui.inverted.table td.error {
+  background: #E0B4B4;
+  color: #9F3A38;
+}
 
 /*--------------
        Warning
@@ -635,6 +811,11 @@
   background: #FFFAF3;
   color: #573A08;
 }
+.ui.ui.ui.ui.inverted.table tr.warning,
+.ui.ui.inverted.table td.warning {
+  background: #EEC97E;
+  color: #573A08;
+}
 
 /*--------------
        Active
@@ -647,13 +828,18 @@
   background: #E0E0E0;
   color: rgba(0, 0, 0, 0.87);
 }
+.ui.ui.ui.ui.inverted.table tr.active,
+.ui.ui.inverted.table td.active {
+  background: #A0A0A0;
+  color: rgba(0, 0, 0, 0.87);
+}
 
 /*--------------
        Disabled
   ---------------*/
 
-.ui.table tr.disabled td,
-.ui.table tr td.disabled,
+.ui.ui.ui.table tr.disabled td,
+.ui.ui.ui.table tr td.disabled,
 .ui.table tr.disabled:hover,
 .ui.table tr:hover td.disabled {
   pointer-events: none;
@@ -1047,6 +1233,8 @@
 .ui.table tbody tr td.selectable > a:not(.ui) {
   display: block;
   color: inherit;
+}
+.ui.table:not(.compact) tbody tr td.selectable > a:not(.ui) {
   padding: 0.78571429em 0.78571429em;
 }
 .ui.table > tr > td.selectable,
@@ -1175,20 +1363,71 @@
   border-top: 0.2em solid #2185D0;
 }
 .ui.inverted.primary.table {
-  background-color: #2185D0;
+  background: #2185D0;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.primary,
+.ui.scrolling.table > tfoot.primary {
+  background: #ddf4ff;
+  color: #ddf4ff;
+}
+.ui.scrolling.table > thead.primary > tr > th,
+.ui.scrolling.table > tfoot.primary > tr > th,
+.ui.scrolling.table > thead.primary > tr > td,
+.ui.scrolling.table > tfoot.primary > tr > td {
+  background: inherit;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.scrolling.table > thead.primary,
+.ui.inverted.scrolling.table > tfoot.primary {
+  background: #2185D0;
+  color: #2185D0;
+}
+.ui.inverted.scrolling.table > thead.primary > tr > th,
+.ui.inverted.scrolling.table > tfoot.primary > tr > th,
+.ui.inverted.scrolling.table > thead.primary > tr > td,
+.ui.inverted.scrolling.table > tfoot.primary > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.primary:not(.marked),
+.ui.ui.table th.primary:not(.marked),
 .ui.ui.table td.primary:not(.marked) {
   background: #ddf4ff;
   color: rgba(255, 255, 255, 0.9);
 }
+.ui.table > thead > tr.primary:not(.marked) > th,
+.ui.table > tfoot > tr.primary:not(.marked) > th,
+.ui.table > tfoot > tr.primary:not(.marked) > td {
+  background: inherit;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.ui.ui.ui.inverted.table tr.primary:not(.marked),
+.ui.ui.inverted.table th.primary:not(.marked),
+.ui.ui.inverted.table td.primary:not(.marked) {
+  background: #2185D0;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.primary:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.primary:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.primary:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.primary:not(.marked):hover,
 .ui.table tr td.selectable.primary:not(.marked):hover,
 .ui.selectable.table tr:hover td.primary:not(.marked) {
   background: #d3f1ff;
   color: rgba(255, 255, 255, 0.9);
 }
+.ui.ui.inverted.selectable.table tr.primary:not(.marked):hover,
+.ui.inverted.table tr td.selectable.primary:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.primary:not(.marked) {
+  background: #21b8ff;
+  color: #FFFFFF;
+}
 .ui.table td.marked.primary.left,
 .ui.table tr.marked.primary.left {
   -webkit-box-shadow: 0.2em 0 0 0 #2185D0 inset;
@@ -1213,20 +1452,71 @@
   border-top: 0.2em solid #1B1C1D;
 }
 .ui.inverted.secondary.table {
-  background-color: #1B1C1D;
+  background: #1B1C1D;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.secondary,
+.ui.scrolling.table > tfoot.secondary {
+  background: #dddddd;
+  color: #dddddd;
+}
+.ui.scrolling.table > thead.secondary > tr > th,
+.ui.scrolling.table > tfoot.secondary > tr > th,
+.ui.scrolling.table > thead.secondary > tr > td,
+.ui.scrolling.table > tfoot.secondary > tr > td {
+  background: inherit;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.scrolling.table > thead.secondary,
+.ui.inverted.scrolling.table > tfoot.secondary {
+  background: #1B1C1D;
+  color: #1B1C1D;
+}
+.ui.inverted.scrolling.table > thead.secondary > tr > th,
+.ui.inverted.scrolling.table > tfoot.secondary > tr > th,
+.ui.inverted.scrolling.table > thead.secondary > tr > td,
+.ui.inverted.scrolling.table > tfoot.secondary > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.secondary:not(.marked),
+.ui.ui.table th.secondary:not(.marked),
 .ui.ui.table td.secondary:not(.marked) {
   background: #dddddd;
   color: rgba(255, 255, 255, 0.9);
 }
+.ui.table > thead > tr.secondary:not(.marked) > th,
+.ui.table > tfoot > tr.secondary:not(.marked) > th,
+.ui.table > tfoot > tr.secondary:not(.marked) > td {
+  background: inherit;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.ui.ui.ui.inverted.table tr.secondary:not(.marked),
+.ui.ui.inverted.table th.secondary:not(.marked),
+.ui.ui.inverted.table td.secondary:not(.marked) {
+  background: #1B1C1D;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.secondary:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.secondary:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.secondary:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.secondary:not(.marked):hover,
 .ui.table tr td.selectable.secondary:not(.marked):hover,
 .ui.selectable.table tr:hover td.secondary:not(.marked) {
   background: #e2e2e2;
   color: rgba(255, 255, 255, 0.9);
 }
+.ui.ui.inverted.selectable.table tr.secondary:not(.marked):hover,
+.ui.inverted.table tr td.selectable.secondary:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.secondary:not(.marked) {
+  background: #6e6e6e;
+  color: #FFFFFF;
+}
 .ui.table td.marked.secondary.left,
 .ui.table tr.marked.secondary.left {
   -webkit-box-shadow: 0.2em 0 0 0 #1B1C1D inset;
@@ -1251,20 +1541,71 @@
   border-top: 0.2em solid #DB2828;
 }
 .ui.inverted.red.table {
-  background-color: #DB2828;
+  background: #DB2828;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.red,
+.ui.scrolling.table > tfoot.red {
+  background: #ffe1df;
+  color: #ffe1df;
+}
+.ui.scrolling.table > thead.red > tr > th,
+.ui.scrolling.table > tfoot.red > tr > th,
+.ui.scrolling.table > thead.red > tr > td,
+.ui.scrolling.table > tfoot.red > tr > td {
+  background: inherit;
+  color: #DB2828;
+}
+.ui.inverted.scrolling.table > thead.red,
+.ui.inverted.scrolling.table > tfoot.red {
+  background: #DB2828;
+  color: #DB2828;
+}
+.ui.inverted.scrolling.table > thead.red > tr > th,
+.ui.inverted.scrolling.table > tfoot.red > tr > th,
+.ui.inverted.scrolling.table > thead.red > tr > td,
+.ui.inverted.scrolling.table > tfoot.red > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.red:not(.marked),
+.ui.ui.table th.red:not(.marked),
 .ui.ui.table td.red:not(.marked) {
   background: #ffe1df;
   color: #DB2828;
 }
+.ui.table > thead > tr.red:not(.marked) > th,
+.ui.table > tfoot > tr.red:not(.marked) > th,
+.ui.table > tfoot > tr.red:not(.marked) > td {
+  background: inherit;
+  color: #DB2828;
+}
+.ui.ui.ui.ui.inverted.table tr.red:not(.marked),
+.ui.ui.inverted.table th.red:not(.marked),
+.ui.ui.inverted.table td.red:not(.marked) {
+  background: #DB2828;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.red:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.red:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.red:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.red:not(.marked):hover,
 .ui.table tr td.selectable.red:not(.marked):hover,
 .ui.selectable.table tr:hover td.red:not(.marked) {
   background: #ffd7d5;
   color: #DB2828;
 }
+.ui.ui.inverted.selectable.table tr.red:not(.marked):hover,
+.ui.inverted.table tr td.selectable.red:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.red:not(.marked) {
+  background: #ff392b;
+  color: #FFFFFF;
+}
 .ui.table td.marked.red.left,
 .ui.table tr.marked.red.left {
   -webkit-box-shadow: 0.2em 0 0 0 #DB2828 inset;
@@ -1289,20 +1630,71 @@
   border-top: 0.2em solid #F2711C;
 }
 .ui.inverted.orange.table {
-  background-color: #F2711C;
+  background: #F2711C;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.orange,
+.ui.scrolling.table > tfoot.orange {
+  background: #ffe7d1;
+  color: #ffe7d1;
+}
+.ui.scrolling.table > thead.orange > tr > th,
+.ui.scrolling.table > tfoot.orange > tr > th,
+.ui.scrolling.table > thead.orange > tr > td,
+.ui.scrolling.table > tfoot.orange > tr > td {
+  background: inherit;
+  color: #F2711C;
+}
+.ui.inverted.scrolling.table > thead.orange,
+.ui.inverted.scrolling.table > tfoot.orange {
+  background: #F2711C;
+  color: #F2711C;
+}
+.ui.inverted.scrolling.table > thead.orange > tr > th,
+.ui.inverted.scrolling.table > tfoot.orange > tr > th,
+.ui.inverted.scrolling.table > thead.orange > tr > td,
+.ui.inverted.scrolling.table > tfoot.orange > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.orange:not(.marked),
+.ui.ui.table th.orange:not(.marked),
 .ui.ui.table td.orange:not(.marked) {
   background: #ffe7d1;
   color: #F2711C;
 }
+.ui.table > thead > tr.orange:not(.marked) > th,
+.ui.table > tfoot > tr.orange:not(.marked) > th,
+.ui.table > tfoot > tr.orange:not(.marked) > td {
+  background: inherit;
+  color: #F2711C;
+}
+.ui.ui.ui.ui.inverted.table tr.orange:not(.marked),
+.ui.ui.inverted.table th.orange:not(.marked),
+.ui.ui.inverted.table td.orange:not(.marked) {
+  background: #F2711C;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.orange:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.orange:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.orange:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.orange:not(.marked):hover,
 .ui.table tr td.selectable.orange:not(.marked):hover,
 .ui.selectable.table tr:hover td.orange:not(.marked) {
   background: #fae1cc;
   color: #F2711C;
 }
+.ui.ui.inverted.selectable.table tr.orange:not(.marked):hover,
+.ui.inverted.table tr td.selectable.orange:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.orange:not(.marked) {
+  background: #e76b00;
+  color: #FFFFFF;
+}
 .ui.table td.marked.orange.left,
 .ui.table tr.marked.orange.left {
   -webkit-box-shadow: 0.2em 0 0 0 #F2711C inset;
@@ -1327,20 +1719,71 @@
   border-top: 0.2em solid #FBBD08;
 }
 .ui.inverted.yellow.table {
-  background-color: #FBBD08;
+  background: #FBBD08;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.yellow,
+.ui.scrolling.table > tfoot.yellow {
+  background: #fff9d2;
+  color: #fff9d2;
+}
+.ui.scrolling.table > thead.yellow > tr > th,
+.ui.scrolling.table > tfoot.yellow > tr > th,
+.ui.scrolling.table > thead.yellow > tr > td,
+.ui.scrolling.table > tfoot.yellow > tr > td {
+  background: inherit;
+  color: #B58105;
+}
+.ui.inverted.scrolling.table > thead.yellow,
+.ui.inverted.scrolling.table > tfoot.yellow {
+  background: #FBBD08;
+  color: #FBBD08;
+}
+.ui.inverted.scrolling.table > thead.yellow > tr > th,
+.ui.inverted.scrolling.table > tfoot.yellow > tr > th,
+.ui.inverted.scrolling.table > thead.yellow > tr > td,
+.ui.inverted.scrolling.table > tfoot.yellow > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.yellow:not(.marked),
+.ui.ui.table th.yellow:not(.marked),
 .ui.ui.table td.yellow:not(.marked) {
   background: #fff9d2;
   color: #B58105;
 }
+.ui.table > thead > tr.yellow:not(.marked) > th,
+.ui.table > tfoot > tr.yellow:not(.marked) > th,
+.ui.table > tfoot > tr.yellow:not(.marked) > td {
+  background: inherit;
+  color: #B58105;
+}
+.ui.ui.ui.ui.inverted.table tr.yellow:not(.marked),
+.ui.ui.inverted.table th.yellow:not(.marked),
+.ui.ui.inverted.table td.yellow:not(.marked) {
+  background: #FBBD08;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.yellow:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.yellow:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.yellow:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.yellow:not(.marked):hover,
 .ui.table tr td.selectable.yellow:not(.marked):hover,
 .ui.selectable.table tr:hover td.yellow:not(.marked) {
   background: #fbf5cc;
   color: #B58105;
 }
+.ui.ui.inverted.selectable.table tr.yellow:not(.marked):hover,
+.ui.inverted.table tr td.selectable.yellow:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.yellow:not(.marked) {
+  background: #ebcd00;
+  color: #FFFFFF;
+}
 .ui.table td.marked.yellow.left,
 .ui.table tr.marked.yellow.left {
   -webkit-box-shadow: 0.2em 0 0 0 #FBBD08 inset;
@@ -1365,20 +1808,71 @@
   border-top: 0.2em solid #B5CC18;
 }
 .ui.inverted.olive.table {
-  background-color: #B5CC18;
+  background: #B5CC18;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.olive,
+.ui.scrolling.table > tfoot.olive {
+  background: #f7fae4;
+  color: #f7fae4;
+}
+.ui.scrolling.table > thead.olive > tr > th,
+.ui.scrolling.table > tfoot.olive > tr > th,
+.ui.scrolling.table > thead.olive > tr > td,
+.ui.scrolling.table > tfoot.olive > tr > td {
+  background: inherit;
+  color: #8ABC1E;
+}
+.ui.inverted.scrolling.table > thead.olive,
+.ui.inverted.scrolling.table > tfoot.olive {
+  background: #B5CC18;
+  color: #B5CC18;
+}
+.ui.inverted.scrolling.table > thead.olive > tr > th,
+.ui.inverted.scrolling.table > tfoot.olive > tr > th,
+.ui.inverted.scrolling.table > thead.olive > tr > td,
+.ui.inverted.scrolling.table > tfoot.olive > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.olive:not(.marked),
+.ui.ui.table th.olive:not(.marked),
 .ui.ui.table td.olive:not(.marked) {
   background: #f7fae4;
   color: #8ABC1E;
 }
+.ui.table > thead > tr.olive:not(.marked) > th,
+.ui.table > tfoot > tr.olive:not(.marked) > th,
+.ui.table > tfoot > tr.olive:not(.marked) > td {
+  background: inherit;
+  color: #8ABC1E;
+}
+.ui.ui.ui.ui.inverted.table tr.olive:not(.marked),
+.ui.ui.inverted.table th.olive:not(.marked),
+.ui.ui.inverted.table td.olive:not(.marked) {
+  background: #B5CC18;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.olive:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.olive:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.olive:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.olive:not(.marked):hover,
 .ui.table tr td.selectable.olive:not(.marked):hover,
 .ui.selectable.table tr:hover td.olive:not(.marked) {
   background: #f6fada;
   color: #8ABC1E;
 }
+.ui.ui.inverted.selectable.table tr.olive:not(.marked):hover,
+.ui.inverted.table tr td.selectable.olive:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.olive:not(.marked) {
+  background: #d2e745;
+  color: #FFFFFF;
+}
 .ui.table td.marked.olive.left,
 .ui.table tr.marked.olive.left {
   -webkit-box-shadow: 0.2em 0 0 0 #B5CC18 inset;
@@ -1403,20 +1897,71 @@
   border-top: 0.2em solid #21BA45;
 }
 .ui.inverted.green.table {
-  background-color: #21BA45;
+  background: #21BA45;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.green,
+.ui.scrolling.table > tfoot.green {
+  background: #d5f5d9;
+  color: #d5f5d9;
+}
+.ui.scrolling.table > thead.green > tr > th,
+.ui.scrolling.table > tfoot.green > tr > th,
+.ui.scrolling.table > thead.green > tr > td,
+.ui.scrolling.table > tfoot.green > tr > td {
+  background: inherit;
+  color: #1EBC30;
+}
+.ui.inverted.scrolling.table > thead.green,
+.ui.inverted.scrolling.table > tfoot.green {
+  background: #21BA45;
+  color: #21BA45;
+}
+.ui.inverted.scrolling.table > thead.green > tr > th,
+.ui.inverted.scrolling.table > tfoot.green > tr > th,
+.ui.inverted.scrolling.table > thead.green > tr > td,
+.ui.inverted.scrolling.table > tfoot.green > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.green:not(.marked),
+.ui.ui.table th.green:not(.marked),
 .ui.ui.table td.green:not(.marked) {
   background: #d5f5d9;
   color: #1EBC30;
 }
+.ui.table > thead > tr.green:not(.marked) > th,
+.ui.table > tfoot > tr.green:not(.marked) > th,
+.ui.table > tfoot > tr.green:not(.marked) > td {
+  background: inherit;
+  color: #1EBC30;
+}
+.ui.ui.ui.ui.inverted.table tr.green:not(.marked),
+.ui.ui.inverted.table th.green:not(.marked),
+.ui.ui.inverted.table td.green:not(.marked) {
+  background: #21BA45;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.green:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.green:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.green:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.green:not(.marked):hover,
 .ui.table tr td.selectable.green:not(.marked):hover,
 .ui.selectable.table tr:hover td.green:not(.marked) {
   background: #d2eed5;
   color: #1EBC30;
 }
+.ui.ui.inverted.selectable.table tr.green:not(.marked):hover,
+.ui.inverted.table tr td.selectable.green:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.green:not(.marked) {
+  background: #1ea92e;
+  color: #FFFFFF;
+}
 .ui.table td.marked.green.left,
 .ui.table tr.marked.green.left {
   -webkit-box-shadow: 0.2em 0 0 0 #21BA45 inset;
@@ -1441,20 +1986,71 @@
   border-top: 0.2em solid #00B5AD;
 }
 .ui.inverted.teal.table {
-  background-color: #00B5AD;
+  background: #00B5AD;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.teal,
+.ui.scrolling.table > tfoot.teal {
+  background: #e2ffff;
+  color: #e2ffff;
+}
+.ui.scrolling.table > thead.teal > tr > th,
+.ui.scrolling.table > tfoot.teal > tr > th,
+.ui.scrolling.table > thead.teal > tr > td,
+.ui.scrolling.table > tfoot.teal > tr > td {
+  background: inherit;
+  color: #10A3A3;
+}
+.ui.inverted.scrolling.table > thead.teal,
+.ui.inverted.scrolling.table > tfoot.teal {
+  background: #00B5AD;
+  color: #00B5AD;
+}
+.ui.inverted.scrolling.table > thead.teal > tr > th,
+.ui.inverted.scrolling.table > tfoot.teal > tr > th,
+.ui.inverted.scrolling.table > thead.teal > tr > td,
+.ui.inverted.scrolling.table > tfoot.teal > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.teal:not(.marked),
+.ui.ui.table th.teal:not(.marked),
 .ui.ui.table td.teal:not(.marked) {
   background: #e2ffff;
   color: #10A3A3;
 }
+.ui.table > thead > tr.teal:not(.marked) > th,
+.ui.table > tfoot > tr.teal:not(.marked) > th,
+.ui.table > tfoot > tr.teal:not(.marked) > td {
+  background: inherit;
+  color: #10A3A3;
+}
+.ui.ui.ui.ui.inverted.table tr.teal:not(.marked),
+.ui.ui.inverted.table th.teal:not(.marked),
+.ui.ui.inverted.table td.teal:not(.marked) {
+  background: #00B5AD;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.teal:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.teal:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.teal:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.teal:not(.marked):hover,
 .ui.table tr td.selectable.teal:not(.marked):hover,
 .ui.selectable.table tr:hover td.teal:not(.marked) {
   background: #d8ffff;
   color: #10A3A3;
 }
+.ui.ui.inverted.selectable.table tr.teal:not(.marked):hover,
+.ui.inverted.table tr td.selectable.teal:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.teal:not(.marked) {
+  background: #3affff;
+  color: #FFFFFF;
+}
 .ui.table td.marked.teal.left,
 .ui.table tr.marked.teal.left {
   -webkit-box-shadow: 0.2em 0 0 0 #00B5AD inset;
@@ -1479,20 +2075,71 @@
   border-top: 0.2em solid #2185D0;
 }
 .ui.inverted.blue.table {
-  background-color: #2185D0;
+  background: #2185D0;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.blue,
+.ui.scrolling.table > tfoot.blue {
+  background: #ddf4ff;
+  color: #ddf4ff;
+}
+.ui.scrolling.table > thead.blue > tr > th,
+.ui.scrolling.table > tfoot.blue > tr > th,
+.ui.scrolling.table > thead.blue > tr > td,
+.ui.scrolling.table > tfoot.blue > tr > td {
+  background: inherit;
+  color: #2185D0;
+}
+.ui.inverted.scrolling.table > thead.blue,
+.ui.inverted.scrolling.table > tfoot.blue {
+  background: #2185D0;
+  color: #2185D0;
+}
+.ui.inverted.scrolling.table > thead.blue > tr > th,
+.ui.inverted.scrolling.table > tfoot.blue > tr > th,
+.ui.inverted.scrolling.table > thead.blue > tr > td,
+.ui.inverted.scrolling.table > tfoot.blue > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.blue:not(.marked),
+.ui.ui.table th.blue:not(.marked),
 .ui.ui.table td.blue:not(.marked) {
   background: #ddf4ff;
   color: #2185D0;
 }
+.ui.table > thead > tr.blue:not(.marked) > th,
+.ui.table > tfoot > tr.blue:not(.marked) > th,
+.ui.table > tfoot > tr.blue:not(.marked) > td {
+  background: inherit;
+  color: #2185D0;
+}
+.ui.ui.ui.ui.inverted.table tr.blue:not(.marked),
+.ui.ui.inverted.table th.blue:not(.marked),
+.ui.ui.inverted.table td.blue:not(.marked) {
+  background: #2185D0;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.blue:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.blue:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.blue:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.blue:not(.marked):hover,
 .ui.table tr td.selectable.blue:not(.marked):hover,
 .ui.selectable.table tr:hover td.blue:not(.marked) {
   background: #d3f1ff;
   color: #2185D0;
 }
+.ui.ui.inverted.selectable.table tr.blue:not(.marked):hover,
+.ui.inverted.table tr td.selectable.blue:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.blue:not(.marked) {
+  background: #21b8ff;
+  color: #FFFFFF;
+}
 .ui.table td.marked.blue.left,
 .ui.table tr.marked.blue.left {
   -webkit-box-shadow: 0.2em 0 0 0 #2185D0 inset;
@@ -1517,20 +2164,71 @@
   border-top: 0.2em solid #6435C9;
 }
 .ui.inverted.violet.table {
-  background-color: #6435C9;
+  background: #6435C9;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.violet,
+.ui.scrolling.table > tfoot.violet {
+  background: #ece9fe;
+  color: #ece9fe;
+}
+.ui.scrolling.table > thead.violet > tr > th,
+.ui.scrolling.table > tfoot.violet > tr > th,
+.ui.scrolling.table > thead.violet > tr > td,
+.ui.scrolling.table > tfoot.violet > tr > td {
+  background: inherit;
+  color: #6435C9;
+}
+.ui.inverted.scrolling.table > thead.violet,
+.ui.inverted.scrolling.table > tfoot.violet {
+  background: #6435C9;
+  color: #6435C9;
+}
+.ui.inverted.scrolling.table > thead.violet > tr > th,
+.ui.inverted.scrolling.table > tfoot.violet > tr > th,
+.ui.inverted.scrolling.table > thead.violet > tr > td,
+.ui.inverted.scrolling.table > tfoot.violet > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.violet:not(.marked),
+.ui.ui.table th.violet:not(.marked),
 .ui.ui.table td.violet:not(.marked) {
   background: #ece9fe;
   color: #6435C9;
 }
+.ui.table > thead > tr.violet:not(.marked) > th,
+.ui.table > tfoot > tr.violet:not(.marked) > th,
+.ui.table > tfoot > tr.violet:not(.marked) > td {
+  background: inherit;
+  color: #6435C9;
+}
+.ui.ui.ui.ui.inverted.table tr.violet:not(.marked),
+.ui.ui.inverted.table th.violet:not(.marked),
+.ui.ui.inverted.table td.violet:not(.marked) {
+  background: #6435C9;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.violet:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.violet:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.violet:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.violet:not(.marked):hover,
 .ui.table tr td.selectable.violet:not(.marked):hover,
 .ui.selectable.table tr:hover td.violet:not(.marked) {
   background: #e3deff;
   color: #6435C9;
 }
+.ui.ui.inverted.selectable.table tr.violet:not(.marked):hover,
+.ui.inverted.table tr td.selectable.violet:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.violet:not(.marked) {
+  background: #745aff;
+  color: #FFFFFF;
+}
 .ui.table td.marked.violet.left,
 .ui.table tr.marked.violet.left {
   -webkit-box-shadow: 0.2em 0 0 0 #6435C9 inset;
@@ -1555,20 +2253,71 @@
   border-top: 0.2em solid #A333C8;
 }
 .ui.inverted.purple.table {
-  background-color: #A333C8;
+  background: #A333C8;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.purple,
+.ui.scrolling.table > tfoot.purple {
+  background: #f8e3ff;
+  color: #f8e3ff;
+}
+.ui.scrolling.table > thead.purple > tr > th,
+.ui.scrolling.table > tfoot.purple > tr > th,
+.ui.scrolling.table > thead.purple > tr > td,
+.ui.scrolling.table > tfoot.purple > tr > td {
+  background: inherit;
+  color: #A333C8;
+}
+.ui.inverted.scrolling.table > thead.purple,
+.ui.inverted.scrolling.table > tfoot.purple {
+  background: #A333C8;
+  color: #A333C8;
+}
+.ui.inverted.scrolling.table > thead.purple > tr > th,
+.ui.inverted.scrolling.table > tfoot.purple > tr > th,
+.ui.inverted.scrolling.table > thead.purple > tr > td,
+.ui.inverted.scrolling.table > tfoot.purple > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.purple:not(.marked),
+.ui.ui.table th.purple:not(.marked),
 .ui.ui.table td.purple:not(.marked) {
   background: #f8e3ff;
   color: #A333C8;
 }
+.ui.table > thead > tr.purple:not(.marked) > th,
+.ui.table > tfoot > tr.purple:not(.marked) > th,
+.ui.table > tfoot > tr.purple:not(.marked) > td {
+  background: inherit;
+  color: #A333C8;
+}
+.ui.ui.ui.ui.inverted.table tr.purple:not(.marked),
+.ui.ui.inverted.table th.purple:not(.marked),
+.ui.ui.inverted.table td.purple:not(.marked) {
+  background: #A333C8;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.purple:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.purple:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.purple:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.purple:not(.marked):hover,
 .ui.table tr td.selectable.purple:not(.marked):hover,
 .ui.selectable.table tr:hover td.purple:not(.marked) {
   background: #f5d9ff;
   color: #A333C8;
 }
+.ui.ui.inverted.selectable.table tr.purple:not(.marked):hover,
+.ui.inverted.table tr td.selectable.purple:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.purple:not(.marked) {
+  background: #cf40ff;
+  color: #FFFFFF;
+}
 .ui.table td.marked.purple.left,
 .ui.table tr.marked.purple.left {
   -webkit-box-shadow: 0.2em 0 0 0 #A333C8 inset;
@@ -1593,20 +2342,71 @@
   border-top: 0.2em solid #E03997;
 }
 .ui.inverted.pink.table {
-  background-color: #E03997;
+  background: #E03997;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.pink,
+.ui.scrolling.table > tfoot.pink {
+  background: #ffe8f9;
+  color: #ffe8f9;
+}
+.ui.scrolling.table > thead.pink > tr > th,
+.ui.scrolling.table > tfoot.pink > tr > th,
+.ui.scrolling.table > thead.pink > tr > td,
+.ui.scrolling.table > tfoot.pink > tr > td {
+  background: inherit;
+  color: #E03997;
+}
+.ui.inverted.scrolling.table > thead.pink,
+.ui.inverted.scrolling.table > tfoot.pink {
+  background: #E03997;
+  color: #E03997;
+}
+.ui.inverted.scrolling.table > thead.pink > tr > th,
+.ui.inverted.scrolling.table > tfoot.pink > tr > th,
+.ui.inverted.scrolling.table > thead.pink > tr > td,
+.ui.inverted.scrolling.table > tfoot.pink > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.pink:not(.marked),
+.ui.ui.table th.pink:not(.marked),
 .ui.ui.table td.pink:not(.marked) {
   background: #ffe8f9;
   color: #E03997;
 }
+.ui.table > thead > tr.pink:not(.marked) > th,
+.ui.table > tfoot > tr.pink:not(.marked) > th,
+.ui.table > tfoot > tr.pink:not(.marked) > td {
+  background: inherit;
+  color: #E03997;
+}
+.ui.ui.ui.ui.inverted.table tr.pink:not(.marked),
+.ui.ui.inverted.table th.pink:not(.marked),
+.ui.ui.inverted.table td.pink:not(.marked) {
+  background: #E03997;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.pink:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.pink:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.pink:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.pink:not(.marked):hover,
 .ui.table tr td.selectable.pink:not(.marked):hover,
 .ui.selectable.table tr:hover td.pink:not(.marked) {
   background: #ffdef6;
   color: #E03997;
 }
+.ui.ui.inverted.selectable.table tr.pink:not(.marked):hover,
+.ui.inverted.table tr td.selectable.pink:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.pink:not(.marked) {
+  background: #ff5bd1;
+  color: #FFFFFF;
+}
 .ui.table td.marked.pink.left,
 .ui.table tr.marked.pink.left {
   -webkit-box-shadow: 0.2em 0 0 0 #E03997 inset;
@@ -1631,20 +2431,71 @@
   border-top: 0.2em solid #A5673F;
 }
 .ui.inverted.brown.table {
-  background-color: #A5673F;
+  background: #A5673F;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.brown,
+.ui.scrolling.table > tfoot.brown {
+  background: #f7e5d2;
+  color: #f7e5d2;
+}
+.ui.scrolling.table > thead.brown > tr > th,
+.ui.scrolling.table > tfoot.brown > tr > th,
+.ui.scrolling.table > thead.brown > tr > td,
+.ui.scrolling.table > tfoot.brown > tr > td {
+  background: inherit;
+  color: #A5673F;
+}
+.ui.inverted.scrolling.table > thead.brown,
+.ui.inverted.scrolling.table > tfoot.brown {
+  background: #A5673F;
+  color: #A5673F;
+}
+.ui.inverted.scrolling.table > thead.brown > tr > th,
+.ui.inverted.scrolling.table > tfoot.brown > tr > th,
+.ui.inverted.scrolling.table > thead.brown > tr > td,
+.ui.inverted.scrolling.table > tfoot.brown > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.brown:not(.marked),
+.ui.ui.table th.brown:not(.marked),
 .ui.ui.table td.brown:not(.marked) {
   background: #f7e5d2;
   color: #A5673F;
 }
+.ui.table > thead > tr.brown:not(.marked) > th,
+.ui.table > tfoot > tr.brown:not(.marked) > th,
+.ui.table > tfoot > tr.brown:not(.marked) > td {
+  background: inherit;
+  color: #A5673F;
+}
+.ui.ui.ui.ui.inverted.table tr.brown:not(.marked),
+.ui.ui.inverted.table th.brown:not(.marked),
+.ui.ui.inverted.table td.brown:not(.marked) {
+  background: #A5673F;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.brown:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.brown:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.brown:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.brown:not(.marked):hover,
 .ui.table tr td.selectable.brown:not(.marked):hover,
 .ui.selectable.table tr:hover td.brown:not(.marked) {
   background: #efe0cf;
   color: #A5673F;
 }
+.ui.ui.inverted.selectable.table tr.brown:not(.marked):hover,
+.ui.inverted.table tr td.selectable.brown:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.brown:not(.marked) {
+  background: #b0620f;
+  color: #FFFFFF;
+}
 .ui.table td.marked.brown.left,
 .ui.table tr.marked.brown.left {
   -webkit-box-shadow: 0.2em 0 0 0 #A5673F inset;
@@ -1669,20 +2520,71 @@
   border-top: 0.2em solid #767676;
 }
 .ui.inverted.grey.table {
-  background-color: #767676;
+  background: #767676;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.grey,
+.ui.scrolling.table > tfoot.grey {
+  background: #DCDDDE;
+  color: #DCDDDE;
+}
+.ui.scrolling.table > thead.grey > tr > th,
+.ui.scrolling.table > tfoot.grey > tr > th,
+.ui.scrolling.table > thead.grey > tr > td,
+.ui.scrolling.table > tfoot.grey > tr > td {
+  background: inherit;
+  color: #767676;
+}
+.ui.inverted.scrolling.table > thead.grey,
+.ui.inverted.scrolling.table > tfoot.grey {
+  background: #767676;
+  color: #767676;
+}
+.ui.inverted.scrolling.table > thead.grey > tr > th,
+.ui.inverted.scrolling.table > tfoot.grey > tr > th,
+.ui.inverted.scrolling.table > thead.grey > tr > td,
+.ui.inverted.scrolling.table > tfoot.grey > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.grey:not(.marked),
+.ui.ui.table th.grey:not(.marked),
 .ui.ui.table td.grey:not(.marked) {
   background: #DCDDDE;
   color: #767676;
 }
+.ui.table > thead > tr.grey:not(.marked) > th,
+.ui.table > tfoot > tr.grey:not(.marked) > th,
+.ui.table > tfoot > tr.grey:not(.marked) > td {
+  background: inherit;
+  color: #767676;
+}
+.ui.ui.ui.ui.inverted.table tr.grey:not(.marked),
+.ui.ui.inverted.table th.grey:not(.marked),
+.ui.ui.inverted.table td.grey:not(.marked) {
+  background: #767676;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.grey:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.grey:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.grey:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.grey:not(.marked):hover,
 .ui.table tr td.selectable.grey:not(.marked):hover,
 .ui.selectable.table tr:hover td.grey:not(.marked) {
   background: #c2c4c5;
   color: #767676;
 }
+.ui.ui.inverted.selectable.table tr.grey:not(.marked):hover,
+.ui.inverted.table tr td.selectable.grey:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.grey:not(.marked) {
+  background: #c2c4c5;
+  color: #FFFFFF;
+}
 .ui.table td.marked.grey.left,
 .ui.table tr.marked.grey.left {
   -webkit-box-shadow: 0.2em 0 0 0 #767676 inset;
@@ -1707,20 +2609,71 @@
   border-top: 0.2em solid #1B1C1D;
 }
 .ui.inverted.black.table {
-  background-color: #1B1C1D;
+  background: #1B1C1D;
+  color: #FFFFFF;
+}
+
+/* Same color for background and color to camouflage the scrollbar */
+.ui.scrolling.table > thead.black,
+.ui.scrolling.table > tfoot.black {
+  background: #545454;
+  color: #545454;
+}
+.ui.scrolling.table > thead.black > tr > th,
+.ui.scrolling.table > tfoot.black > tr > th,
+.ui.scrolling.table > thead.black > tr > td,
+.ui.scrolling.table > tfoot.black > tr > td {
+  background: inherit;
+  color: #FFFFFF;
+}
+.ui.inverted.scrolling.table > thead.black,
+.ui.inverted.scrolling.table > tfoot.black {
+  background: #1B1C1D;
+  color: #1B1C1D;
+}
+.ui.inverted.scrolling.table > thead.black > tr > th,
+.ui.inverted.scrolling.table > tfoot.black > tr > th,
+.ui.inverted.scrolling.table > thead.black > tr > td,
+.ui.inverted.scrolling.table > tfoot.black > tr > td {
+  background: inherit;
   color: #FFFFFF;
 }
 .ui.ui.ui.ui.table tr.black:not(.marked),
+.ui.ui.table th.black:not(.marked),
 .ui.ui.table td.black:not(.marked) {
   background: #545454;
   color: #FFFFFF;
 }
+.ui.table > thead > tr.black:not(.marked) > th,
+.ui.table > tfoot > tr.black:not(.marked) > th,
+.ui.table > tfoot > tr.black:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
+.ui.ui.ui.ui.inverted.table tr.black:not(.marked),
+.ui.ui.inverted.table th.black:not(.marked),
+.ui.ui.inverted.table td.black:not(.marked) {
+  background: #1B1C1D;
+  color: #FFFFFF;
+}
+.ui.inverted.table > thead > tr.black:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.black:not(.marked) > th,
+.ui.inverted.table > tfoot > tr.black:not(.marked) > td {
+  background: inherit;
+  color: #FFFFFF;
+}
 .ui.ui.selectable.table tr.black:not(.marked):hover,
 .ui.table tr td.selectable.black:not(.marked):hover,
 .ui.selectable.table tr:hover td.black:not(.marked) {
   background: #000000;
   color: #FFFFFF;
 }
+.ui.ui.inverted.selectable.table tr.black:not(.marked):hover,
+.ui.inverted.table tr td.selectable.black:not(.marked):hover,
+.ui.inverted.selectable.table tr:hover td.black:not(.marked) {
+  background: #000000;
+  color: #1B1C1D;
+}
 .ui.table td.marked.black.left,
 .ui.table tr.marked.black.left {
   -webkit-box-shadow: 0.2em 0 0 0 #1B1C1D inset;
@@ -1743,8 +2696,8 @@
 }
 
 /*--------------
-  Column Count
----------------*/
+    Column Count
+  ---------------*/
 
 
 /* Grid Based */
@@ -1968,13 +2921,17 @@
 }
 .ui.ui.inverted.table > thead > tr > th,
 .ui.ui.inverted.table > tbody > tr > th,
-.ui.ui.inverted.table > tfoot > tr > th,
-.ui.ui.inverted.table > tfoot > tr > td,
 .ui.ui.inverted.table > tr > th {
   background-color: rgba(0, 0, 0, 0.15);
   border-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.9);
 }
+.ui.ui.inverted.table > tfoot > tr > th,
+.ui.ui.inverted.table > tfoot > tr > td {
+  background-color: rgba(0, 0, 0, 0.15);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+}
 .ui.inverted.table > tbody > tr > td,
 .ui.inverted.table > tfoot > tr > td,
 .ui.inverted.table > tr > td {
@@ -1987,7 +2944,7 @@
   pointer-events: none;
   color: rgba(225, 225, 225, 0.3);
 }
-.ui.inverted.table tr td.disabled:not([class="disabled"]),
+.ui.ui.ui.inverted.table tr td.disabled:not([class="disabled"]),
 .ui.inverted.table tr.disabled:not([class="disabled"]) td,
 .ui.inverted.table tr.disabled td[class]:not(.disabled),
 .ui.inverted.table tr:hover td.disabled:not([class="disabled"]) {