UNPKG

fomantic-ui

Version:

Fomantic empowers designers and developers by creating a shared vocabulary for UI.

1,494 lines (1,424 loc) • 114 kB
/*! * # Fomantic-UI 2.9.3 - 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; } .resizable.ui.scrolling.table.short > tbody { height: 6.74983929em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 4.49989286em; } .resizable.ui.scrolling.table[class*="very short"] > tbody { height: 4.49989286em; } .ui.scrolling.table > tbody { max-height: 8.99978571em; } .resizable.ui.scrolling.table > tbody { height: 8.99978571em; } .ui.scrolling.table.long > tbody { max-height: 17.99957143em; } .resizable.ui.scrolling.table.long > tbody { height: 17.99957143em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 26.99935714em; } .resizable.ui.scrolling.table[class*="very long"] > tbody { 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; } .resizable.ui.scrolling.table.short > tbody { height: 8.99978571em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 5.99985714em; } .resizable.ui.scrolling.table[class*="very short"] > tbody { height: 5.99985714em; } .ui.scrolling.table > tbody { max-height: 11.99971429em; } .resizable.ui.scrolling.table > tbody { height: 11.99971429em; } .ui.scrolling.table.long > tbody { max-height: 23.99942857em; } .resizable.ui.scrolling.table.long > tbody { height: 23.99942857em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 35.99914286em; } .resizable.ui.scrolling.table[class*="very long"] > tbody { height: 35.99914286em; } } @media only screen and (min-width: 992px) { .ui.scrolling.table.short > tbody { max-height: 13.49967857em; } .resizable.ui.scrolling.table.short > tbody { height: 13.49967857em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 8.99978571em; } .resizable.ui.scrolling.table[class*="very short"] > tbody { height: 8.99978571em; } .ui.scrolling.table > tbody { max-height: 17.99957143em; } .resizable.ui.scrolling.table > tbody { height: 17.99957143em; } .ui.scrolling.table.long > tbody { max-height: 35.99914286em; } .resizable.ui.scrolling.table.long > tbody { height: 35.99914286em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 53.99871429em; } .resizable.ui.scrolling.table[class*="very long"] > tbody { height: 53.99871429em; } } @media only screen and (min-width: 1920px) { .ui.scrolling.table.short > tbody { max-height: 17.99957143em; } .resizable.ui.scrolling.table.short > tbody { height: 17.99957143em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 11.99971429em; } .resizable.ui.scrolling.table[class*="very short"] > tbody { height: 11.99971429em; } .ui.scrolling.table > tbody { max-height: 23.99942857em; } .resizable.ui.scrolling.table > tbody { height: 23.99942857em; } .ui.scrolling.table.long > tbody { max-height: 47.99885714em; } .resizable.ui.scrolling.table.long > tbody { height: 47.99885714em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 71.99828571em; } .resizable.ui.scrolling.table[class*="very long"] > tbody { 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); } .ui.resizable.scrolling.table > tbody { resize: vertical; max-height: none; } /* -------------- 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.tabl