/*! * # Fomantic-UI 2.9.2 - Table * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Table *******************************/ /* Prototype */ .ui.table { width: 100%; background: #fff; margin: 1em 0; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; border-radius: 0.28571429rem; text-align: left; vertical-align: middle; color: rgba(0, 0, 0, 0.87); border-collapse: separate; border-spacing: 0; } .ui.table:first-child { margin-top: 0; } .ui.table:last-child { margin-bottom: 0; } .ui.table > thead, .ui.table > tbody { text-align: inherit; vertical-align: inherit; } /******************************* Parts *******************************/ /* Table Content */ .ui.table th, .ui.table td { transition: background 0.1s ease, color 0.1s ease; } /* Rowspan helper class */ .ui.table th.rowspanned, .ui.table td.rowspanned { display: none; } /* Headers */ .ui.table > thead { box-shadow: none; } .ui.table > thead > tr > th { cursor: auto; background: #f9fafb; text-align: inherit; color: rgba(0, 0, 0, 0.87); padding: 0.92857143em 0.78571429em; vertical-align: inherit; font-style: none; font-weight: bold; text-transform: none; border-bottom: 1px solid rgba(34, 36, 38, 0.1); border-left: none; } .ui.table > thead > tr > th:first-child { border-left: none; } .ui.table > thead > tr:first-child > th:first-child { border-radius: 0.28571429rem 0 0 0; } .ui.table > thead > tr:first-child > th:last-child { border-radius: 0 0.28571429rem 0 0; } .ui.table > thead > tr:first-child > th:only-child { border-radius: 0.28571429rem 0.28571429rem 0 0; } /* Footer */ .ui.table > tfoot { box-shadow: none; } .ui.table > tfoot > tr > th, .ui.table > tfoot > tr > td { cursor: auto; border-top: 1px solid rgba(34, 36, 38, 0.15); background: #f9fafb; text-align: inherit; color: rgba(0, 0, 0, 0.87); padding: 0.78571429em 0.78571429em; vertical-align: inherit; font-style: normal; font-weight: normal; text-transform: none; } .ui.table > tfoot > tr > th:first-child, .ui.table > tfoot > tr > td:first-child { border-left: none; } .ui.table > tfoot > tr:first-child > th:first-child, .ui.table > tfoot > tr:first-child > td:first-child { border-radius: 0 0 0 0.28571429rem; } .ui.table > tfoot > tr:first-child > th:last-child, .ui.table > tfoot > tr:first-child > td:last-child { border-radius: 0 0 0.28571429rem 0; } .ui.table > tfoot > tr:first-child > th:only-child, .ui.table > tfoot > tr:first-child > td:only-child { border-radius: 0 0 0.28571429rem 0.28571429rem; } /* Table Row */ .ui.table > tr > td, .ui.table > tbody > tr > td { border-top: 1px solid rgba(34, 36, 38, 0.1); } .ui.table > tr:first-child > td, .ui.table > tbody > tr:first-child > td { border-top: none; } /* Repeated tbody */ .ui.table > tbody + tbody tr:first-child > td { border-top: 1px solid rgba(34, 36, 38, 0.1); } /* Table Cells */ .ui.table > tbody > tr > td, .ui.table > tr > td { padding: 0.78571429em 0.78571429em; text-align: inherit; } /* Icons */ .ui.table > i.icon { vertical-align: baseline; } .ui.table > i.icon:only-child { margin: 0; } /* Table Segment */ .ui.table.segment { padding: 0; } .ui.table.segment::after { display: none; } .ui.table.segment.stacked::after { display: block; } /* Responsive */ @media only screen and (max-width: 767.98px) { .ui.table:not(.unstackable) { width: 100%; padding: 0; } .ui.table:not(.unstackable) > thead, .ui.table:not(.unstackable) > thead > tr, .ui.table:not(.unstackable) > tfoot, .ui.table:not(.unstackable) > tfoot > tr, .ui.table:not(.unstackable) > tbody, .ui.table:not(.unstackable) > tr, .ui.table:not(.unstackable) > tbody > tr, .ui.table:not(.unstackable) > tr > th:not(.rowspanned), .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned), .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned), .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned), .ui.table:not(.unstackable) > tr > td:not(.rowspanned), .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned), .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) { display: block !important; width: auto !important; } .ui.table:not(.unstackable) > thead { display: block; } .ui.table:not(.unstackable) > tfoot { display: block; } .ui.ui.ui.ui.table:not(.unstackable) > tr, .ui.ui.ui.ui.table:not(.unstackable) > thead > tr, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr, .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; } .ui.ui.ui.ui.table:not(.unstackable) > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tr > td, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td, .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td { background: none; border: none; padding: 0.25em 0.75em; box-shadow: none; } .ui.table:not(.unstackable) > tr > th:first-child, .ui.table:not(.unstackable) > thead > tr > th:first-child, .ui.table:not(.unstackable) > tbody > tr > th:first-child, .ui.table:not(.unstackable) > tfoot > tr > th:first-child, .ui.table:not(.unstackable) > tr > td:first-child, .ui.table:not(.unstackable) > tbody > tr > td:first-child, .ui.table:not(.unstackable) > tfoot > tr > td:first-child { font-weight: bold; } /* Definition Table */ .ui.definition.table:not(.unstackable) > thead > tr > th:first-child { box-shadow: none !important; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="orange marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #f2711c inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="orange marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #f2711c inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="orange marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff851b inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="orange marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff851b inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="yellow marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #fbbd08 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="yellow marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #fbbd08 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="yellow marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ffe21f inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="yellow marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ffe21f inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="olive marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #b5cc18 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="olive marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #b5cc18 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="olive marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #d9e778 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="olive marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #d9e778 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21ba45 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21ba45 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="violet marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435c9 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="violet marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435c9 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="violet marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a291fb inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="violet marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a291fb inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="pink marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #e03997 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="pink marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #e03997 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="pink marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff8edf inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="pink marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff8edf inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="brown marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a5673f inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="brown marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a5673f inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="brown marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #d67c1c inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="brown marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #d67c1c inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="black marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="black marked"].right { 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; } .ui.overflowing.table.short { max-height: 11.24973214em; } .ui.overflowing.table[class*="very short"] { max-height: 7.49982143em; } .ui.overflowing.table { max-height: 14.99964286em; } .ui.overflowing.table.long { max-height: 29.99928571em; } .ui.overflowing.table[class*="very long"] { max-height: 44.99892857em; } } /* -------------- 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; -ms-scroll-chaining: none; overscroll-behavior: none; 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); } /* -------------- Overflowing --------------- */ .ui.overflowing.table { display: block; overflow: auto; -ms-scroll-chaining: none; overscroll-behavior: none; } @media only screen and (min-width: 768px) { .ui.overflowing.table.short { max-height: 13.49967857em; } .ui.overflowing.table[class*="very short"] { max-height: 8.99978571em; } .ui.overflowing.table { max-height: 17.99957143em; } .ui.overflowing.table.long { max-height: 35.99914286em; } .ui.overflowing.table[class*="very long"] { max-height: 53.99871429em; } } @media only screen and (min-width: 992px) { .ui.overflowing.table.short { max-height: 17.99957143em; } .ui.overflowing.table[class*="very short"] { max-height: 11.99971429em; } .ui.overflowing.table { max-height: 23.99942857em; } .ui.overflowing.table.long { max-height: 47.99885714em; } .ui.overflowing.table[class*="very long"] { max-height: 71.99828571em; } } @media only screen and (min-width: 1920px) { .ui.overflowing.table.short { max-height: 22.49946429em; } .ui.overflowing.table[class*="very short"] { max-height: 14.99964286em; } .ui.overflowing.table { max-height: 29.99928571em; } .ui.overflowing.table.long { max-height: 59.99857143em; } .ui.overflowing.table[class*="very long"] { max-height: 89.99785714em; } } /******************************* Coupling *******************************/ /* UI Image */ .ui.table .collapsing .image, .ui.table .collapsing .image img { max-width: none; } /******************************* Types *******************************/ /* -------------- Complex --------------- */ .ui.structured.table { border-collapse: collapse; } .ui.structured.table > thead > tr > th { border-left: none; border-right: none; } .ui.structured.sortable.table > thead > tr > th { border-left: 1px solid rgba(34, 36, 38, 0.15); border-right: 1px solid rgba(34, 36, 38, 0.15); } .ui.structured.basic.table > tr > th, .ui.structured.basic.table > thead > tr > th, .ui.structured.basic.table > tbody > tr > th, .ui.structured.basic.table > tfoot > tr > th { border-left: none; border-right: none; } .ui.structured.celled.table > tr > th, .ui.structured.celled.table > thead > tr > th, .ui.structured.celled.table > tbody > tr > th, .ui.structured.celled.table > tfoot > tr > th, .ui.structured.celled.table > tr > td, .ui.structured.celled.table > tbody > tr > td, .ui.structured.celled.table > tfoot > tr > td { border-left: 1px solid rgba(34, 36, 38, 0.1); border-right: 1px solid rgba(34, 36, 38, 0.1); } /* -------------- Definition --------------- */ .ui.definition.table > thead:not(.full-width) > tr > th:first-child { pointer-events: none; background: #fff; font-weight: normal; color: rgba(0, 0, 0, 0.4); box-shadow: -0.1em -0.2em 0 0.1em #fff; -moz-transform: scale(1); } .ui.definition.table > thead:not(.full-width) > tr > th:first-child:not(:empty) { pointer-events: auto; } .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child { pointer-events: none; background: #fff; font-weight: normal; color: rgba(0, 0, 0, 0.4); box-shadow: -0.1em 0.2em 0 0.1em #fff; -moz-transform: scale(1); } /* Highlight Defining Column */ .ui.definition.table > tr > td:first-child:not(.ignored), .ui.definition.table > tbody > tr > td:first-child:not(.ignored), .ui.definition.table > tfoot > tr > td:first-child:not(.ignored), .ui.definition.table tr td.definition { background: rgba(0, 0, 0, 0.03); font-weight: bold; color: rgba(0, 0, 0, 0.95); text-transform: ""; box-shadow: ""; text-align: ""; font-size: 1em; padding-left: ""; padding-right: ""; } /* Fix 2nd Column */ .ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2), .ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.definition.table > tr > td:nth-child(2), .ui.definition.table > tbody > tr > td:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } /******************************* States *******************************/ /* -------------- Positive --------------- */ .ui.ui.ui.ui.table tr.positive, .ui.ui.table td.positive { box-shadow: 0 0 0 #a3c293 inset; background: #fcfff5; color: #2c662d; } .ui.ui.ui.ui.inverted.table tr.positive, .ui.ui.inverted.table td.positive { background: #a3c293; color: #2c662d; } /* -------------- Negative --------------- */ .ui.ui.ui.ui.table tr.negative, .ui.ui.table td.negative { box-shadow: 0 0 0 #e0b4b4 inset; background: #fff6f6; color: #9f3a38; } .ui.ui.ui.ui.inverted.table tr.negative, .ui.ui.inverted.table td.negative { background: #e0b4b4; color: #9f3a38; } /* -------------- Error --------------- */ .ui.ui.ui.ui.table tr.error, .ui.ui.table td.error { box-shadow: 0 0 0 #e0b4b4 inset; background: #fff6f6; color: #9f3a38; } .ui.ui.ui.ui.inverted.table tr.error, .ui.ui.inverted.table td.error { background: #e0b4b4; color: #9f3a38; } /* -------------- Warning --------------- */ .ui.ui.ui.ui.table tr.warning, .ui.ui.table td.warning { box-shadow: 0 0 0 #c9ba9b inset; background: #fffaf3; color: #573a08; } .ui.ui.ui.ui.inverted.table tr.warning, .ui.ui.inverted.table td.warning { background: #eec97e; color: #573a08; } /* -------------- Active --------------- */ .ui.ui.ui.ui.table tr.active, .ui.ui.table td.active { box-shadow: 0 0 0 rgba(0, 0, 0, 0.87) inset; 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.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; color: rgba(40, 40, 40, 0.3); } /******************************* Variations *******************************/ /* -------------- Stackable --------------- */ @media only screen and (max-width: 991.98px) { .ui[class*="tablet stackable"].table, .ui[class*="tablet stackable"].table > thead, .ui[class*="tablet stackable"].table > thead > tr, .ui[class*="tablet stackable"].table > tfoot, .ui[class*="tablet stackable"].table > tfoot > tr, .ui[class*="tablet stackable"].table > tbody, .ui[class*="tablet stackable"].table > tbody > tr, .ui[class*="tablet stackable"].table > tr, .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned), .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned), .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned), .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned), .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned), .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned), .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) { display: block !important; width: 100% !important; } .ui[class*="tablet stackable"].table { padding: 0; } .ui[class*="tablet stackable"].table > thead { display: block; } .ui[class*="tablet stackable"].table > tfoot { display: block; } .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; } .ui[class*="tablet stackable"].table > thead > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > th, .ui[class*="tablet stackable"].table > tfoot > tr > th, .ui[class*="tablet stackable"].table > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > td, .ui[class*="tablet stackable"].table > tfoot > tr > td, .ui[class*="tablet stackable"].table > tr > td { background: none; border: none !important; padding: 0.25em 0.75em; box-shadow: none; } /* Definition Table */ .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child { box-shadow: none !important; } } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="orange marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #f2711c inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="orange marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #f2711c inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="orange marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff851b inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="orange marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff851b inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="yellow marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #fbbd08 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="yellow marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #fbbd08 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="yellow marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ffe21f inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="yellow marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ffe21f inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="olive marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #b5cc18 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="olive marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #b5cc18 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="olive marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #d9e778 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="olive marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #d9e778 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21ba45 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21ba45 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="violet marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435c9 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="violet marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435c9 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="violet marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a291fb inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="violet marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a291fb inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="pink marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #e03997 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="pink marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #e03997 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="pink marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff8edf inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="pink marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff8edf inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="brown marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a5673f inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="brown marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a5673f inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="brown marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #d67c1c inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="brown marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #d67c1c inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="black marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="black marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } /* -------------- Text Alignment --------------- */ .ui.table[class*="left aligned"], .ui.table [class*="left aligned"] { text-align: left; } .ui.table[class*="center aligned"], .ui.table [class*="center aligned"] { text-align: center; } .ui.table[class*="right aligned"], .ui.table [class*="right aligned"] { text-align: right; } /* ------------------ Vertical Alignment ------------------ */ .ui.table[class*="top aligned"], .ui.table [class*="top aligned"] { vertical-align: top; } .ui.table[class*="middle aligned"], .ui.table [class*="middle aligned"] { vertical-align: middle; } .ui.table[class*="bottom aligned"], .ui.table [class*="bottom aligned"] { vertical-align: bottom; } /* -------------- Collapsing --------------- */ .ui.table th.collapsing, .ui.table td.collapsing { width: 1px; white-space: nowrap; } /* -------------- Fixed --------------- */ .ui.fixed.table { table-layout: fixed; } .ui.fixed.table th, .ui.fixed.table td { overflow: hidden; text-overflow: ellipsis; } /* -------------- Selectable --------------- */ .ui.ui.selectable.table > tbody > tr:hover, .ui.table tbody tr td.selectable:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } .ui.ui.selectable.inverted.table > tbody > tr:hover, .ui.inverted.table tbody tr td.selectable:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* Selectable Cell Link */ .ui.table tbody tr td.selectable { padding: 0; } .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, .ui.table > tbody > tr > td.selectable, .ui.selectable.table > tbody > tr, .ui.selectable.table > tr { cursor: pointer; } /* Other States */ .ui.ui.selectable.table tr.error:hover, .ui.table tr td.selectable.error:hover, .ui.selectable.table tr:hover td.error { background: #ffe7e7; color: #943634; } .ui.ui.selectable.table tr.warning:hover, .ui.table tr td.selectable.warning:hover, .ui.selectable.table tr:hover td.warning { background: #fff4e4; color: #493107; } .ui.ui.selectable.table tr.active:hover, .ui.table tr td.selectable.active:hover, .ui.selectable.table tr:hover td.active { background: #e0e0e0; color: rgba(0, 0, 0, 0.87); } .ui.ui.selectable.table tr.positive:hover, .ui.table tr td.selectable.positive:hover, .ui.selectable.table tr:hover td.positive { background: #f7ffe6; color: #275b28; } .ui.ui.selectable.table tr.negative:hover, .ui.table tr td.selectable.negative:hover, .ui.selectable.table tr:hover td.negative { background: #ffe7e7; color: #943634; } /* ------------------- Attached -------------------- */ /* Middle */ .ui.attached.table { top: 0; bottom: 0; border-radius: 0; margin: 0 -1px; width: calc(100% + 2px); max-width: calc(100% + 2px); box-shadow: none; border: 1px solid #d4d4d5; } .ui.attached + .ui.attached.table:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].table { bottom: 0; margin-bottom: 0; top: 0; margin-top: 1em; border-radius: 0.28571429rem 0.28571429rem 0 0; } .ui.table[class*="top attached"]:first-child { margin-top: 0; } /* Bottom */ .ui[class*="bottom attached"].table { bottom: 0; margin-top: 0; top: 0; margin-bottom: 1em; box-shadow: none; border-radius: 0 0 0.28571429rem 0.28571429rem; } .ui[class*="bottom attached"].table:last-child { margin-bottom: 0; } /* -------------- Striped --------------- */ /* Table Striping */ .ui.striped.table > tr:nth-child(2n), .ui.striped.table > tbody > tr:nth-child(2n) { background-color: rgba(0, 0, 50, 0.02); } /* Stripes */ .ui.inverted.striped.table > tr:nth-child(2n), .ui.inverted.striped.table > tbody > tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.05); } /* Allow striped active hover */ .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { background: #efefef; color: rgba(0, 0, 0, 0.95); } /* -------------- Single Line --------------- */ .ui.table[class*="single line"], .ui.table [class*="single line"] { white-space: nowrap; } /* ------------------- Colors -------------------- */ .ui.primary.table { border-top: 0.2em solid #2185d0; } .ui.inverted.primary.table { background: #2185d0; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="primary colored"], .ui.ui.table th[class*="primary colored"], .ui.ui.table td[class*="primary colored"], .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[class*="primary colored"] > th, .ui.table > tfoot > tr[class*="primary colored"] > th, .ui.table > tfoot > tr[class*="primary colored"] > td, .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[class*="primary colored"], .ui.ui.inverted.table th[class*="primary colored"], .ui.ui.inverted.table td[class*="primary colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="primary colored"] > th, .ui.inverted.table > tfoot > tr[class*="primary colored"] > th, .ui.inverted.table > tfoot > tr[class*="primary colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="primary colored"]:hover, .ui.table tr td.selectable[class*="primary colored"]:hover, .ui.selectable.table tr:hover td[class*="primary colored"], .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[class*="primary colored"]:hover, .ui.inverted.table tr td.selectable[class*="primary colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="primary colored"], .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: #fff; } .ui.table td[class*="primary marked"].left, .ui.table tr[class*="primary marked"].left { box-shadow: 0.2em 0 0 0 #2185d0 inset; } .ui.table td[class*="primary marked"].right, .ui.table tr[class*="primary marked"].right { box-shadow: -0.2em 0 0 0 #2185d0 inset; } .ui.inverted.table td[class*="primary marked"].left, .ui.inverted.table tr[class*="primary marked"].left { box-shadow: 0.2em 0 0 0 #54c8ff inset; } .ui.inverted.table td[class*="primary marked"].right, .ui.inverted.table tr[class*="primary marked"].right { box-shadow: -0.2em 0 0 0 #54c8ff inset; } .ui.secondary.table { border-top: 0.2em solid #1b1c1d; } .ui.inverted.secondary.table { background: #1b1c1d; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="secondary colored"], .ui.ui.table th[class*="secondary colored"], .ui.ui.table td[class*="secondary colored"], .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[class*="secondary colored"] > th, .ui.table > tfoot > tr[class*="secondary colored"] > th, .ui.table > tfoot > tr[class*="secondary colored"] > td, .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[class*="secondary colored"], .ui.ui.inverted.table th[class*="secondary colored"], .ui.ui.inverted.table td[class*="secondary colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="secondary colored"] > th, .ui.inverted.table > tfoot > tr[class*="secondary colored"] > th, .ui.inverted.table > tfoot > tr[class*="secondary colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="secondary colored"]:hover, .ui.table tr td.selectable[class*="secondary colored"]:hover, .ui.selectable.table tr:hover td[class*="secondary colored"], .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[class*="secondary colored"]:hover, .ui.inverted.table tr td.selectable[class*="secondary colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="secondary colored"], .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: #fff; } .ui.table td[class*="secondary marked"].left, .ui.table tr[class*="secondary marked"].left { box-shadow: 0.2em 0 0 0 #1b1c1d inset; } .ui.table td[class*="secondary marked"].right, .ui.table tr[class*="secondary marked"].right { box-shadow: -0.2em 0 0 0 #1b1c1d inset; } .ui.inverted.table td[class*="secondary marked"].left, .ui.inverted.table tr[class*="secondary marked"].left { box-shadow: 0.2em 0 0 0 #545454 inset; } .ui.inverted.table td[class*="secondary marked"].right, .ui.inverted.table tr[class*="secondary marked"].right { box-shadow: -0.2em 0 0 0 #545454 inset; } .ui.red.table { border-top: 0.2em solid #db2828; } .ui.inverted.red.table { background: #db2828; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="red colored"], .ui.ui.table th[class*="red colored"], .ui.ui.table td[class*="red colored"], .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[class*="red colored"] > th, .ui.table > tfoot > tr[class*="red colored"] > th, .ui.table > tfoot > tr[class*="red colored"] > td, .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[class*="red colored"], .ui.ui.inverted.table th[class*="red colored"], .ui.ui.inverted.table td[class*="red colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="red colored"] > th, .ui.inverted.table > tfoot > tr[class*="red colored"] > th, .ui.inverted.table > tfoot > tr[class*="red colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="red colored"]:hover, .ui.table tr td.selectable[class*="red colored"]:hover, .ui.selectable.table tr:hover td[class*="red colored"], .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[class*="red colored"]:hover, .ui.inverted.table tr td.selectable[class*="red colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="red colored"], .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: #fff; } .ui.table td[class*="red marked"].left, .ui.table tr[class*="red marked"].left { box-shadow: 0.2em 0 0 0 #db2828 inset; } .ui.table td[class*="red marked"].right, .ui.table tr[class*="red marked"].right { box-shadow: -0.2em 0 0 0 #db2828 inset; } .ui.inverted.table td[class*="red marked"].left, .ui.inverted.table tr[class*="red marked"].left { box-shadow: 0.2em 0 0 0 #ff695e inset; } .ui.inverted.table td[class*="red marked"].right, .ui.inverted.table tr[class*="red marked"].right { box-shadow: -0.2em 0 0 0 #ff695e inset; } .ui.orange.table { border-top: 0.2em solid #f2711c; } .ui.inverted.orange.table { background: #f2711c; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="orange colored"], .ui.ui.table th[class*="orange colored"], .ui.ui.table td[class*="orange colored"], .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[class*="orange colored"] > th, .ui.table > tfoot > tr[class*="orange colored"] > th, .ui.table > tfoot > tr[class*="orange colored"] > td, .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[class*="orange colored"], .ui.ui.inverted.table th[class*="orange colored"], .ui.ui.inverted.table td[class*="orange colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="orange colored"] > th, .ui.inverted.table > tfoot > tr[class*="orange colored"] > th, .ui.inverted.table > tfoot > tr[class*="orange colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="orange colored"]:hover, .ui.table tr td.selectable[class*="orange colored"]:hover, .ui.selectable.table tr:hover td[class*="orange colored"], .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[class*="orange colored"]:hover, .ui.inverted.table tr td.selectable[class*="orange colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="orange colored"], .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: #fff; } .ui.table td[class*="orange marked"].left, .ui.table tr[class*="orange marked"].left { box-shadow: 0.2em 0 0 0 #f2711c inset; } .ui.table td[class*="orange marked"].right, .ui.table tr[class*="orange marked"].right { box-shadow: -0.2em 0 0 0 #f2711c inset; } .ui.inverted.table td[class*="orange marked"].left, .ui.inverted.table tr[class*="orange marked"].left { box-shadow: 0.2em 0 0 0 #ff851b inset; } .ui.inverted.table td[class*="orange marked"].right, .ui.inverted.table tr[class*="orange marked"].right { box-shadow: -0.2em 0 0 0 #ff851b inset; } .ui.yellow.table { border-top: 0.2em solid #fbbd08; } .ui.inverted.yellow.table { background: #fbbd08; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="yellow colored"], .ui.ui.table th[class*="yellow colored"], .ui.ui.table td[class*="yellow colored"], .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[class*="yellow colored"] > th, .ui.table > tfoot > tr[class*="yellow colored"] > th, .ui.table > tfoot > tr[class*="yellow colored"] > td, .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[class*="yellow colored"], .ui.ui.inverted.table th[class*="yellow colored"], .ui.ui.inverted.table td[class*="yellow colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="yellow colored"] > th, .ui.inverted.table > tfoot > tr[class*="yellow colored"] > th, .ui.inverted.table > tfoot > tr[class*="yellow colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="yellow colored"]:hover, .ui.table tr td.selectable[class*="yellow colored"]:hover, .ui.selectable.table tr:hover td[class*="yellow colored"], .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[class*="yellow colored"]:hover, .ui.inverted.table tr td.selectable[class*="yellow colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="yellow colored"], .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: #fff; } .ui.table td[class*="yellow marked"].left, .ui.table tr[class*="yellow marked"].left { box-shadow: 0.2em 0 0 0 #fbbd08 inset; } .ui.table td[class*="yellow marked"].right, .ui.table tr[class*="yellow marked"].right { box-shadow: -0.2em 0 0 0 #fbbd08 inset; } .ui.inverted.table td[class*="yellow marked"].left, .ui.inverted.table tr[class*="yellow marked"].left { box-shadow: 0.2em 0 0 0 #ffe21f inset; } .ui.inverted.table td[class*="yellow marked"].right, .ui.inverted.table tr[class*="yellow marked"].right { box-shadow: -0.2em 0 0 0 #ffe21f inset; } .ui.olive.table { border-top: 0.2em solid #b5cc18; } .ui.inverted.olive.table { background: #b5cc18; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="olive colored"], .ui.ui.table th[class*="olive colored"], .ui.ui.table td[class*="olive colored"], .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[class*="olive colored"] > th, .ui.table > tfoot > tr[class*="olive colored"] > th, .ui.table > tfoot > tr[class*="olive colored"] > td, .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[class*="olive colored"], .ui.ui.inverted.table th[class*="olive colored"], .ui.ui.inverted.table td[class*="olive colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="olive colored"] > th, .ui.inverted.table > tfoot > tr[class*="olive colored"] > th, .ui.inverted.table > tfoot > tr[class*="olive colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="olive colored"]:hover, .ui.table tr td.selectable[class*="olive colored"]:hover, .ui.selectable.table tr:hover td[class*="olive colored"], .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[class*="olive colored"]:hover, .ui.inverted.table tr td.selectable[class*="olive colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="olive colored"], .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: #fff; } .ui.table td[class*="olive marked"].left, .ui.table tr[class*="olive marked"].left { box-shadow: 0.2em 0 0 0 #b5cc18 inset; } .ui.table td[class*="olive marked"].right, .ui.table tr[class*="olive marked"].right { box-shadow: -0.2em 0 0 0 #b5cc18 inset; } .ui.inverted.table td[class*="olive marked"].left, .ui.inverted.table tr[class*="olive marked"].left { box-shadow: 0.2em 0 0 0 #d9e778 inset; } .ui.inverted.table td[class*="olive marked"].right, .ui.inverted.table tr[class*="olive marked"].right { box-shadow: -0.2em 0 0 0 #d9e778 inset; } .ui.green.table { border-top: 0.2em solid #21ba45; } .ui.inverted.green.table { background: #21ba45; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="green colored"], .ui.ui.table th[class*="green colored"], .ui.ui.table td[class*="green colored"], .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[class*="green colored"] > th, .ui.table > tfoot > tr[class*="green colored"] > th, .ui.table > tfoot > tr[class*="green colored"] > td, .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[class*="green colored"], .ui.ui.inverted.table th[class*="green colored"], .ui.ui.inverted.table td[class*="green colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="green colored"] > th, .ui.inverted.table > tfoot > tr[class*="green colored"] > th, .ui.inverted.table > tfoot > tr[class*="green colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="green colored"]:hover, .ui.table tr td.selectable[class*="green colored"]:hover, .ui.selectable.table tr:hover td[class*="green colored"], .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[class*="green colored"]:hover, .ui.inverted.table tr td.selectable[class*="green colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="green colored"], .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: #fff; } .ui.table td[class*="green marked"].left, .ui.table tr[class*="green marked"].left { box-shadow: 0.2em 0 0 0 #21ba45 inset; } .ui.table td[class*="green marked"].right, .ui.table tr[class*="green marked"].right { box-shadow: -0.2em 0 0 0 #21ba45 inset; } .ui.inverted.table td[class*="green marked"].left, .ui.inverted.table tr[class*="green marked"].left { box-shadow: 0.2em 0 0 0 #2ecc40 inset; } .ui.inverted.table td[class*="green marked"].right, .ui.inverted.table tr[class*="green marked"].right { box-shadow: -0.2em 0 0 0 #2ecc40 inset; } .ui.teal.table { border-top: 0.2em solid #00b5ad; } .ui.inverted.teal.table { background: #00b5ad; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="teal colored"], .ui.ui.table th[class*="teal colored"], .ui.ui.table td[class*="teal colored"], .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[class*="teal colored"] > th, .ui.table > tfoot > tr[class*="teal colored"] > th, .ui.table > tfoot > tr[class*="teal colored"] > td, .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[class*="teal colored"], .ui.ui.inverted.table th[class*="teal colored"], .ui.ui.inverted.table td[class*="teal colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="teal colored"] > th, .ui.inverted.table > tfoot > tr[class*="teal colored"] > th, .ui.inverted.table > tfoot > tr[class*="teal colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="teal colored"]:hover, .ui.table tr td.selectable[class*="teal colored"]:hover, .ui.selectable.table tr:hover td[class*="teal colored"], .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[class*="teal colored"]:hover, .ui.inverted.table tr td.selectable[class*="teal colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="teal colored"], .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: #fff; } .ui.table td[class*="teal marked"].left, .ui.table tr[class*="teal marked"].left { box-shadow: 0.2em 0 0 0 #00b5ad inset; } .ui.table td[class*="teal marked"].right, .ui.table tr[class*="teal marked"].right { box-shadow: -0.2em 0 0 0 #00b5ad inset; } .ui.inverted.table td[class*="teal marked"].left, .ui.inverted.table tr[class*="teal marked"].left { box-shadow: 0.2em 0 0 0 #6dffff inset; } .ui.inverted.table td[class*="teal marked"].right, .ui.inverted.table tr[class*="teal marked"].right { box-shadow: -0.2em 0 0 0 #6dffff inset; } .ui.blue.table { border-top: 0.2em solid #2185d0; } .ui.inverted.blue.table { background: #2185d0; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="blue colored"], .ui.ui.table th[class*="blue colored"], .ui.ui.table td[class*="blue colored"], .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[class*="blue colored"] > th, .ui.table > tfoot > tr[class*="blue colored"] > th, .ui.table > tfoot > tr[class*="blue colored"] > td, .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[class*="blue colored"], .ui.ui.inverted.table th[class*="blue colored"], .ui.ui.inverted.table td[class*="blue colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="blue colored"] > th, .ui.inverted.table > tfoot > tr[class*="blue colored"] > th, .ui.inverted.table > tfoot > tr[class*="blue colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="blue colored"]:hover, .ui.table tr td.selectable[class*="blue colored"]:hover, .ui.selectable.table tr:hover td[class*="blue colored"], .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[class*="blue colored"]:hover, .ui.inverted.table tr td.selectable[class*="blue colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="blue colored"], .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: #fff; } .ui.table td[class*="blue marked"].left, .ui.table tr[class*="blue marked"].left { box-shadow: 0.2em 0 0 0 #2185d0 inset; } .ui.table td[class*="blue marked"].right, .ui.table tr[class*="blue marked"].right { box-shadow: -0.2em 0 0 0 #2185d0 inset; } .ui.inverted.table td[class*="blue marked"].left, .ui.inverted.table tr[class*="blue marked"].left { box-shadow: 0.2em 0 0 0 #54c8ff inset; } .ui.inverted.table td[class*="blue marked"].right, .ui.inverted.table tr[class*="blue marked"].right { box-shadow: -0.2em 0 0 0 #54c8ff inset; } .ui.violet.table { border-top: 0.2em solid #6435c9; } .ui.inverted.violet.table { background: #6435c9; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="violet colored"], .ui.ui.table th[class*="violet colored"], .ui.ui.table td[class*="violet colored"], .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[class*="violet colored"] > th, .ui.table > tfoot > tr[class*="violet colored"] > th, .ui.table > tfoot > tr[class*="violet colored"] > td, .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[class*="violet colored"], .ui.ui.inverted.table th[class*="violet colored"], .ui.ui.inverted.table td[class*="violet colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="violet colored"] > th, .ui.inverted.table > tfoot > tr[class*="violet colored"] > th, .ui.inverted.table > tfoot > tr[class*="violet colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="violet colored"]:hover, .ui.table tr td.selectable[class*="violet colored"]:hover, .ui.selectable.table tr:hover td[class*="violet colored"], .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[class*="violet colored"]:hover, .ui.inverted.table tr td.selectable[class*="violet colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="violet colored"], .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: #fff; } .ui.table td[class*="violet marked"].left, .ui.table tr[class*="violet marked"].left { box-shadow: 0.2em 0 0 0 #6435c9 inset; } .ui.table td[class*="violet marked"].right, .ui.table tr[class*="violet marked"].right { box-shadow: -0.2em 0 0 0 #6435c9 inset; } .ui.inverted.table td[class*="violet marked"].left, .ui.inverted.table tr[class*="violet marked"].left { box-shadow: 0.2em 0 0 0 #a291fb inset; } .ui.inverted.table td[class*="violet marked"].right, .ui.inverted.table tr[class*="violet marked"].right { box-shadow: -0.2em 0 0 0 #a291fb inset; } .ui.purple.table { border-top: 0.2em solid #a333c8; } .ui.inverted.purple.table { background: #a333c8; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="purple colored"], .ui.ui.table th[class*="purple colored"], .ui.ui.table td[class*="purple colored"], .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[class*="purple colored"] > th, .ui.table > tfoot > tr[class*="purple colored"] > th, .ui.table > tfoot > tr[class*="purple colored"] > td, .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[class*="purple colored"], .ui.ui.inverted.table th[class*="purple colored"], .ui.ui.inverted.table td[class*="purple colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="purple colored"] > th, .ui.inverted.table > tfoot > tr[class*="purple colored"] > th, .ui.inverted.table > tfoot > tr[class*="purple colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="purple colored"]:hover, .ui.table tr td.selectable[class*="purple colored"]:hover, .ui.selectable.table tr:hover td[class*="purple colored"], .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[class*="purple colored"]:hover, .ui.inverted.table tr td.selectable[class*="purple colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="purple colored"], .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: #fff; } .ui.table td[class*="purple marked"].left, .ui.table tr[class*="purple marked"].left { box-shadow: 0.2em 0 0 0 #a333c8 inset; } .ui.table td[class*="purple marked"].right, .ui.table tr[class*="purple marked"].right { box-shadow: -0.2em 0 0 0 #a333c8 inset; } .ui.inverted.table td[class*="purple marked"].left, .ui.inverted.table tr[class*="purple marked"].left { box-shadow: 0.2em 0 0 0 #dc73ff inset; } .ui.inverted.table td[class*="purple marked"].right, .ui.inverted.table tr[class*="purple marked"].right { box-shadow: -0.2em 0 0 0 #dc73ff inset; } .ui.pink.table { border-top: 0.2em solid #e03997; } .ui.inverted.pink.table { background: #e03997; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="pink colored"], .ui.ui.table th[class*="pink colored"], .ui.ui.table td[class*="pink colored"], .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[class*="pink colored"] > th, .ui.table > tfoot > tr[class*="pink colored"] > th, .ui.table > tfoot > tr[class*="pink colored"] > td, .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[class*="pink colored"], .ui.ui.inverted.table th[class*="pink colored"], .ui.ui.inverted.table td[class*="pink colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="pink colored"] > th, .ui.inverted.table > tfoot > tr[class*="pink colored"] > th, .ui.inverted.table > tfoot > tr[class*="pink colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="pink colored"]:hover, .ui.table tr td.selectable[class*="pink colored"]:hover, .ui.selectable.table tr:hover td[class*="pink colored"], .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[class*="pink colored"]:hover, .ui.inverted.table tr td.selectable[class*="pink colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="pink colored"], .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: #fff; } .ui.table td[class*="pink marked"].left, .ui.table tr[class*="pink marked"].left { box-shadow: 0.2em 0 0 0 #e03997 inset; } .ui.table td[class*="pink marked"].right, .ui.table tr[class*="pink marked"].right { box-shadow: -0.2em 0 0 0 #e03997 inset; } .ui.inverted.table td[class*="pink marked"].left, .ui.inverted.table tr[class*="pink marked"].left { box-shadow: 0.2em 0 0 0 #ff8edf inset; } .ui.inverted.table td[class*="pink marked"].right, .ui.inverted.table tr[class*="pink marked"].right { box-shadow: -0.2em 0 0 0 #ff8edf inset; } .ui.brown.table { border-top: 0.2em solid #a5673f; } .ui.inverted.brown.table { background: #a5673f; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="brown colored"], .ui.ui.table th[class*="brown colored"], .ui.ui.table td[class*="brown colored"], .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[class*="brown colored"] > th, .ui.table > tfoot > tr[class*="brown colored"] > th, .ui.table > tfoot > tr[class*="brown colored"] > td, .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[class*="brown colored"], .ui.ui.inverted.table th[class*="brown colored"], .ui.ui.inverted.table td[class*="brown colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="brown colored"] > th, .ui.inverted.table > tfoot > tr[class*="brown colored"] > th, .ui.inverted.table > tfoot > tr[class*="brown colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="brown colored"]:hover, .ui.table tr td.selectable[class*="brown colored"]:hover, .ui.selectable.table tr:hover td[class*="brown colored"], .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[class*="brown colored"]:hover, .ui.inverted.table tr td.selectable[class*="brown colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="brown colored"], .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: #fff; } .ui.table td[class*="brown marked"].left, .ui.table tr[class*="brown marked"].left { box-shadow: 0.2em 0 0 0 #a5673f inset; } .ui.table td[class*="brown marked"].right, .ui.table tr[class*="brown marked"].right { box-shadow: -0.2em 0 0 0 #a5673f inset; } .ui.inverted.table td[class*="brown marked"].left, .ui.inverted.table tr[class*="brown marked"].left { box-shadow: 0.2em 0 0 0 #d67c1c inset; } .ui.inverted.table td[class*="brown marked"].right, .ui.inverted.table tr[class*="brown marked"].right { box-shadow: -0.2em 0 0 0 #d67c1c inset; } .ui.grey.table { border-top: 0.2em solid #767676; } .ui.inverted.grey.table { background: #767676; color: #fff; } /* 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: #fff; } .ui.ui.ui.ui.table tr[class*="grey colored"], .ui.ui.table th[class*="grey colored"], .ui.ui.table td[class*="grey colored"], .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[class*="grey colored"] > th, .ui.table > tfoot > tr[class*="grey colored"] > th, .ui.table > tfoot > tr[class*="grey colored"] > td, .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[class*="grey colored"], .ui.ui.inverted.table th[class*="grey colored"], .ui.ui.inverted.table td[class*="grey colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="grey colored"] > th, .ui.inverted.table > tfoot > tr[class*="grey colored"] > th, .ui.inverted.table > tfoot > tr[class*="grey colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="grey colored"]:hover, .ui.table tr td.selectable[class*="grey colored"]:hover, .ui.selectable.table tr:hover td[class*="grey colored"], .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[class*="grey colored"]:hover, .ui.inverted.table tr td.selectable[class*="grey colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="grey colored"], .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: #fff; } .ui.table td[class*="grey marked"].left, .ui.table tr[class*="grey marked"].left { box-shadow: 0.2em 0 0 0 #767676 inset; } .ui.table td[class*="grey marked"].right, .ui.table tr[class*="grey marked"].right { box-shadow: -0.2em 0 0 0 #767676 inset; } .ui.inverted.table td[class*="grey marked"].left, .ui.inverted.table tr[class*="grey marked"].left { box-shadow: 0.2em 0 0 0 #dcddde inset; } .ui.inverted.table td[class*="grey marked"].right, .ui.inverted.table tr[class*="grey marked"].right { box-shadow: -0.2em 0 0 0 #dcddde inset; } .ui.black.table { border-top: 0.2em solid #1b1c1d; } .ui.inverted.black.table { background: #1b1c1d; color: #fff; } /* 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: #fff; } .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: #fff; } .ui.ui.ui.ui.table tr[class*="black colored"], .ui.ui.table th[class*="black colored"], .ui.ui.table td[class*="black colored"], .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: #fff; } .ui.table > thead > tr[class*="black colored"] > th, .ui.table > tfoot > tr[class*="black colored"] > th, .ui.table > tfoot > tr[class*="black colored"] > td, .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: #fff; } .ui.ui.ui.ui.inverted.table tr[class*="black colored"], .ui.ui.inverted.table th[class*="black colored"], .ui.ui.inverted.table td[class*="black colored"], .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: #fff; } .ui.inverted.table > thead > tr[class*="black colored"] > th, .ui.inverted.table > tfoot > tr[class*="black colored"] > th, .ui.inverted.table > tfoot > tr[class*="black colored"] > td, .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: #fff; } .ui.ui.selectable.table tr[class*="black colored"]:hover, .ui.table tr td.selectable[class*="black colored"]:hover, .ui.selectable.table tr:hover td[class*="black colored"], .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: #fff; } .ui.ui.inverted.selectable.table tr[class*="black colored"]:hover, .ui.inverted.table tr td.selectable[class*="black colored"]:hover, .ui.inverted.selectable.table tr:hover td[class*="black colored"], .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[class*="black marked"].left, .ui.table tr[class*="black marked"].left { box-shadow: 0.2em 0 0 0 #1b1c1d inset; } .ui.table td[class*="black marked"].right, .ui.table tr[class*="black marked"].right { box-shadow: -0.2em 0 0 0 #1b1c1d inset; } .ui.inverted.table td[class*="black marked"].left, .ui.inverted.table tr[class*="black marked"].left { box-shadow: 0.2em 0 0 0 #545454 inset; } .ui.inverted.table td[class*="black marked"].right, .ui.inverted.table tr[class*="black marked"].right { box-shadow: -0.2em 0 0 0 #545454 inset; } /* -------------- Column Count --------------- */ /* Grid Based */ .ui.one.column.table td { width: 100%; } .ui.two.column.table td { width: 50%; } .ui.three.column.table td { width: 33.33333333%; } .ui.four.column.table td { width: 25%; } .ui.five.column.table td { width: 20%; } .ui.six.column.table td { width: 16.66666667%; } .ui.seven.column.table td { width: 14.28571429%; } .ui.eight.column.table td { width: 12.5%; } .ui.nine.column.table td { width: 11.11111111%; } .ui.ten.column.table td { width: 10%; } .ui.eleven.column.table td { width: 9.09090909%; } .ui.twelve.column.table td { width: 8.33333333%; } .ui.thirteen.column.table td { width: 7.69230769%; } .ui.fourteen.column.table td { width: 7.14285714%; } .ui.fifteen.column.table td { width: 6.66666667%; } .ui.sixteen.column.table td { width: 6.25%; } /* Column Width */ .ui.table th.one.wide, .ui.table td.one.wide { width: 6.25%; } .ui.table th.two.wide, .ui.table td.two.wide { width: 12.5%; } .ui.table th.three.wide, .ui.table td.three.wide { width: 18.75%; } .ui.table th.four.wide, .ui.table td.four.wide { width: 25%; } .ui.table th.five.wide, .ui.table td.five.wide { width: 31.25%; } .ui.table th.six.wide, .ui.table td.six.wide { width: 37.5%; } .ui.table th.seven.wide, .ui.table td.seven.wide { width: 43.75%; } .ui.table th.eight.wide, .ui.table td.eight.wide { width: 50%; } .ui.table th.nine.wide, .ui.table td.nine.wide { width: 56.25%; } .ui.table th.ten.wide, .ui.table td.ten.wide { width: 62.5%; } .ui.table th.eleven.wide, .ui.table td.eleven.wide { width: 68.75%; } .ui.table th.twelve.wide, .ui.table td.twelve.wide { width: 75%; } .ui.table th.thirteen.wide, .ui.table td.thirteen.wide { width: 81.25%; } .ui.table th.fourteen.wide, .ui.table td.fourteen.wide { width: 87.5%; } .ui.table th.fifteen.wide, .ui.table td.fifteen.wide { width: 93.75%; } .ui.table th.sixteen.wide, .ui.table td.sixteen.wide { width: 100%; } /* -------------- Sortable --------------- */ .ui.sortable.table > thead > tr > th { cursor: pointer; white-space: nowrap; color: rgba(0, 0, 0, 0.87); } .ui.celled.sortable.table > thead > tr > th:not(:first-child) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.sortable.table thead th.sorted, .ui.sortable.table thead th.sorted:hover { -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui.sortable.table > thead > tr > th::after { display: none; font-style: normal; font-weight: normal; text-decoration: inherit; content: ""; height: 1em; width: auto; opacity: 0.8; margin: 0 0 0 0.5em; font-family: "Icons"; } .ui.sortable.table thead th.ascending::after { content: "\f0d8"; } .ui.sortable.table thead th.descending::after { content: "\f0d7"; } /* Hover */ .ui.sortable.table th.disabled:hover { cursor: auto; color: rgba(40, 40, 40, 0.3); } .ui.sortable.table > thead > tr > th:hover { color: rgba(0, 0, 0, 0.8); } .ui.sortable.table:not(.basic) > thead > tr > th:hover { background: rgba(0, 0, 0, 0.05); } /* Sorted */ .ui.sortable.table thead th.sorted { color: rgba(0, 0, 0, 0.95); } .ui.sortable.table:not(.basic) thead th.sorted { background: rgba(0, 0, 0, 0.05); } .ui.sortable.table thead th.sorted::after { display: inline-block; } /* Sorted Hover */ .ui.sortable.table thead th.sorted:hover { color: rgba(0, 0, 0, 0.95); } .ui.sortable.table:not(.basic) thead th.sorted:hover { background: rgba(0, 0, 0, 0.05); } /* Inverted */ .ui.inverted.sortable.table thead th.sorted { color: #ffffff; } .ui.inverted.sortable.table:not(.basic) thead th.sorted { background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); } .ui.inverted.sortable.table > thead > tr > th:hover { color: #ffffff; } .ui.inverted.sortable.table:not(.basic) > thead > tr > th:hover { background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); } .ui.inverted.sortable.table:not(.basic) > thead > tr > th { border-left-color: transparent; border-right-color: transparent; } /* -------------- Inverted --------------- */ /* Text Color */ .ui.inverted.table { background: #333; color: rgba(255, 255, 255, 0.9); border: none; } .ui.ui.inverted.table > thead > tr > th, .ui.ui.inverted.table > tbody > tr > th, .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 { border-color: rgba(255, 255, 255, 0.1); } .ui.ui.ui.inverted.table tr.disabled td, .ui.ui.ui.inverted.table tr td.disabled, .ui.inverted.table tr.disabled:hover td, .ui.inverted.table tr:hover td.disabled { pointer-events: none; color: rgba(225, 225, 225, 0.3); } .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"]) { color: rgba(40, 40, 40, 0.3); } /* Definition */ .ui.inverted.definition.table > tfoot:not(.full-width) > tr > th:first-child, .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child { background: #fff; } .ui.inverted.definition.table > tbody > tr > td:first-child, .ui.inverted.definition.table > tfoot > tr > td:first-child, .ui.inverted.definition.table > tr > td:first-child { background: rgba(255, 255, 255, 0.02); color: #ffffff; } /* -------------- Collapsing --------------- */ .ui.collapsing.table { width: auto; } /* -------------- Basic --------------- */ .ui.basic.table { background: transparent; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.table > thead, .ui.basic.table > tfoot { box-shadow: none; } .ui.basic.table > thead > tr > th, .ui.basic.table > tbody > tr > th, .ui.basic.table > tfoot > tr > th, .ui.basic.table > tr > th { background: transparent; border-left: none; } .ui.basic.table > tbody > tr { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .ui.basic.table > tbody > tr > td, .ui.basic.table > tfoot > tr > td, .ui.basic.table > tr > td { background: transparent; } .ui.basic.striped.table > tbody > tr:nth-child(2n) { background-color: rgba(0, 0, 0, 0.05); } /* Very Basic */ .ui[class*="very basic"].table { border: none; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td { padding: ""; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child { padding-left: 0; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:last-child { padding-right: 0; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th { padding-top: 0; } /* -------------- Celled --------------- */ .ui.celled.table > tr > th, .ui.celled.table > thead > tr > th, .ui.celled.table > tbody > tr > th, .ui.celled.table > tfoot > tr > th, .ui.celled.table > tr > td, .ui.celled.table > tbody > tr > td, .ui.celled.table > tfoot > tr > td { border-left: 1px solid rgba(34, 36, 38, 0.1); } .ui.inverted.celled.table > tbody > tr > td, .ui.inverted.celled.table > tr > td { border-left: 1px solid rgba(255, 255, 255, 0.1); } .ui.celled.table > tr > th:first-child, .ui.celled.table > thead > tr > th:first-child, .ui.celled.table > tbody > tr > th:first-child, .ui.celled.table > tfoot > tr > th:first-child, .ui.celled.table > tr > td:first-child, .ui.celled.table > tbody > tr > td:first-child, .ui.celled.table > tfoot > tr > td:first-child { border-left: none; } /* -------------- Padded --------------- */ .ui.padded.table > tr > th, .ui.padded.table > thead > tr > th, .ui.padded.table > tbody > tr > th, .ui.padded.table > tfoot > tr > th { padding-left: 1em; padding-right: 1em; } .ui.padded.table > tr > th, .ui.padded.table > thead > tr > th, .ui.padded.table > tbody > tr > th, .ui.padded.table > tfoot > tr > th, .ui.padded.table > tr > td, .ui.padded.table > tbody > tr > td, .ui.padded.table > tfoot > tr > td { padding: 1em 1em; } /* Very */ .ui[class*="very padded"].table > tr > th, .ui[class*="very padded"].table > thead > tr > th, .ui[class*="very padded"].table > tbody > tr > th, .ui[class*="very padded"].table > tfoot > tr > th { padding-left: 1.5em; padding-right: 1.5em; } .ui[class*="very padded"].table > tr > td, .ui[class*="very padded"].table > tbody > tr > td, .ui[class*="very padded"].table > tfoot > tr > td { padding: 1.5em 1.5em; } /* -------------- Compact --------------- */ .ui.compact.table > tr > th, .ui.compact.table > thead > tr > th, .ui.compact.table > tbody > tr > th, .ui.compact.table > tfoot > tr > th { padding-left: 0.7em; padding-right: 0.7em; } .ui.compact.table > tr > td, .ui.compact.table > tbody > tr > td, .ui.compact.table > tfoot > tr > td { padding: 0.5em 0.7em; } /* Very */ .ui[class*="very compact"].table > tr > th, .ui[class*="very compact"].table > thead > tr > th, .ui[class*="very compact"].table > tbody > tr > th, .ui[class*="very compact"].table > tfoot > tr > th { padding-left: 0.6em; padding-right: 0.6em; } .ui[class*="very compact"].table > tr > td, .ui[class*="very compact"].table > tbody > tr > td, .ui[class*="very compact"].table > tfoot > tr > td { padding: 0.4em 0.6em; } /* -------------- Stuck --------------- */ .ui.stuck.table:not(.inverted) { background: #fff; } .ui.stuck.table:not(.inverted) > thead > tr { background: #f9fafb; } .ui.stuck.table:not(.inverted) > tbody > tr { background: #fff; } .ui.stuck.table:not(.inverted) > tfoot > tr { background: #f9fafb; } .ui.stuck.table:not(.inverted).basic > thead > tr, .ui.stuck.table:not(.inverted).basic > tfoot > tr { background: #fff; } .ui.inverted.stuck.table > thead > tr { background: #252525; } .ui.inverted.stuck.table > tbody > tr { background: #333; } .ui.inverted.stuck.table > tfoot > tr { background: #252525; } .ui.inverted.stuck.table.basic > thead > tr, .ui.inverted.stuck.table.basic > tfoot > tr { background: #333; } .ui.head.stuck.table > thead, .ui.foot.stuck.table > tfoot { position: sticky; z-index: 800; } .ui.head.stuck.table { border-top: 0; } .ui.head.stuck.table > thead { top: 0; bottom: auto; } .ui.head.stuck.table > thead > tr:first-child > th { border-top: 1px solid rgba(34, 36, 38, 0.1); } .ui.head.stuck.table.inverted > thead > tr:first-child > th { border-top: 1px solid rgba(255, 255, 255, 0.1); } .ui.foot.stuck.table { border-bottom: 0; } .ui.foot.stuck.table > tfoot { top: auto; bottom: 0; } .ui.foot.stuck.table > tfoot > tr:last-child > td, .ui.foot.stuck.table > tfoot > tr:last-child > th { border-bottom: 1px solid rgba(34, 36, 38, 0.1); } .ui.foot.stuck.table.inverted > tfoot > tr:first-child > td, .ui.foot.stuck.table.inverted > tfoot > tr:first-child > th { border-top: 1px solid rgba(255, 255, 255, 0.1); } .ui.first.stuck.table { border-left: 0; } .ui.first.stuck.table th:first-child, .ui.first.stuck.table td:first-child { position: sticky; left: 0; border-left: 1px solid rgba(34, 36, 38, 0.1); background: inherit; } .ui.first.stuck.table.inverted th:first-child, .ui.first.stuck.table.inverted td:first-child { border-left: 1px solid rgba(255, 255, 255, 0.1); } .ui.last.stuck.table { border-right: 0; } .ui.last.stuck.table th:last-child, .ui.last.stuck.table td:last-child { position: sticky; right: 0; border-right: 1px solid rgba(34, 36, 38, 0.1); background: inherit; } .ui.last.stuck.table.inverted th:last-child, .ui.last.stuck.table.inverted td:last-child { border-right: 1px solid rgba(255, 255, 255, 0.1); } .ui.celled.first.stuck.table th:first-child, .ui.celled.first.stuck.table td:first-child { border-right: 1px solid rgba(34, 36, 38, 0.1); } .ui.celled.last.stuck.table th:last-child, .ui.celled.last.stuck.table td:last-child { border-left: 1px solid rgba(34, 36, 38, 0.1); } .ui.inverted.celled.first.stuck.table th:first-child, .ui.inverted.celled.first.stuck.table td:first-child { border-right: 1px solid rgba(255, 255, 255, 0.1); } .ui.inverted.celled.last.stuck.table th:last-child, .ui.inverted.celled.last.stuck.table td:last-child { border-left: 1px solid rgba(255, 255, 255, 0.1); } /* -------------- Sizes --------------- */ /* Standard */ .ui.table { font-size: 1em; } .ui.mini.table { font-size: 0.78571429rem; } .ui.tiny.table { font-size: 0.85714286rem; } .ui.small.table { font-size: 0.9em; } .ui.large.table { font-size: 1.1em; } .ui.big.table { font-size: 1.28571429rem; } .ui.huge.table { font-size: 1.42857143rem; } .ui.massive.table { font-size: 1.71428571rem; } /******************************* Overrides *******************************/ /******************************* Site Overrides *******************************/