UNPKG

fomantic-ui

Version:

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

1,255 lines (1,176 loc) • 77 kB
/*! * # Fomantic-UI 2.8.8 - Table * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Table *******************************/ /* Prototype */ .ui.table { width: 100%; background: #FFFFFF; margin: 1em 0; border: 1px solid rgba(34, 36, 38, 0.15); -webkit-box-shadow: none; 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 { -webkit-transition: background 0.1s ease, color 0.1s ease; 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 { -webkit-box-shadow: none; 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 { -webkit-box-shadow: none; 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; -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; 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; -webkit-box-shadow: none; 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 { -webkit-box-shadow: none !important; box-shadow: none !important; } .ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 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.marked.primary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 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.marked.primary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset; 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.marked.primary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset; 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.marked.secondary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 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.marked.secondary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 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.marked.secondary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.secondary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset; 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.marked.red.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset; 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.marked.red.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF695E inset; 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.marked.red.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF695E inset; 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.marked.orange.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset; 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.marked.orange.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset; 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.marked.orange.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF851B inset; 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.marked.orange.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF851B inset; 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.marked.yellow.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset; 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.marked.yellow.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset; 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.marked.yellow.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FFE21F inset; 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.marked.yellow.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FFE21F inset; 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.marked.olive.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset; 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.marked.olive.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset; 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.marked.olive.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D9E778 inset; 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.marked.olive.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D9E778 inset; 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.marked.green.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset; 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.marked.green.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset; 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.marked.green.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ECC40 inset; 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.marked.green.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ECC40 inset; 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.marked.teal.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset; 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.marked.teal.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset; 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.marked.teal.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6DFFFF inset; 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.marked.teal.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6DFFFF inset; 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.marked.blue.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 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.marked.blue.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 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.marked.blue.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset; 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.marked.blue.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset; 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.marked.violet.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset; 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.marked.violet.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset; 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.marked.violet.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A291FB inset; 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.marked.violet.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A291FB inset; 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.marked.purple.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset; 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.marked.purple.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset; 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.marked.purple.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DC73FF inset; 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.marked.purple.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DC73FF inset; 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.marked.pink.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset; 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.marked.pink.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset; 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.marked.pink.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF8EDF inset; 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.marked.pink.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF8EDF inset; 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.marked.brown.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset; 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.marked.brown.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset; 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.marked.brown.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D67C1C inset; 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.marked.brown.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D67C1C inset; 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.marked.grey.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; 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.marked.grey.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; 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.marked.grey.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DCDDDE inset; 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.marked.grey.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DCDDDE inset; 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.marked.black.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 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.marked.black.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 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.marked.black.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.black.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } } /******************************* 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: #FFFFFF; font-weight: normal; color: rgba(0, 0, 0, 0.4); -webkit-box-shadow: -0.1em -0.2em 0 0.1em #FFFFFF; box-shadow: -0.1em -0.2em 0 0.1em #FFFFFF; -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: #FFFFFF; font-weight: normal; color: rgba(0, 0, 0, 0.4); -webkit-box-shadow: -0.1em 0.2em 0 0.1em #FFFFFF; box-shadow: -0.1em 0.2em 0 0.1em #FFFFFF; -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: ''; -webkit-box-shadow: ''; 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 { -webkit-box-shadow: 0 0 0 #A3C293 inset; box-shadow: 0 0 0 #A3C293 inset; background: #FCFFF5; color: #2C662D; } /*-------------- Negative ---------------*/ .ui.ui.ui.ui.table tr.negative, .ui.ui.table td.negative { -webkit-box-shadow: 0 0 0 #E0B4B4 inset; box-shadow: 0 0 0 #E0B4B4 inset; background: #FFF6F6; color: #9F3A38; } /*-------------- Error ---------------*/ .ui.ui.ui.ui.table tr.error, .ui.ui.table td.error { -webkit-box-shadow: 0 0 0 #E0B4B4 inset; box-shadow: 0 0 0 #E0B4B4 inset; background: #FFF6F6; color: #9F3A38; } /*-------------- Warning ---------------*/ .ui.ui.ui.ui.table tr.warning, .ui.ui.table td.warning { -webkit-box-shadow: 0 0 0 #C9BA9B inset; box-shadow: 0 0 0 #C9BA9B inset; background: #FFFAF3; color: #573A08; } /*-------------- Active ---------------*/ .ui.ui.ui.ui.table tr.active, .ui.ui.table td.active { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.87) inset; box-shadow: 0 0 0 rgba(0, 0, 0, 0.87) inset; background: #E0E0E0; color: rgba(0, 0, 0, 0.87); } /*-------------- Disabled ---------------*/ .ui.table tr.disabled td, .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; -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; 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; -webkit-box-shadow: none; box-shadow: none; } /* Definition Table */ .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child { -webkit-box-shadow: none !important; box-shadow: none !important; } } .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 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.marked.primary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 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.marked.primary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset; 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.marked.primary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset; 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.marked.secondary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 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.marked.secondary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 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.marked.secondary.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.secondary.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset; 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.marked.red.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset; 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.marked.red.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF695E inset; 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.marked.red.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF695E inset; 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.marked.orange.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset; 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.marked.orange.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset; 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.marked.orange.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF851B inset; 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.marked.orange.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF851B inset; 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.marked.yellow.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset; 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.marked.yellow.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset; 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.marked.yellow.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FFE21F inset; 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.marked.yellow.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FFE21F inset; 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.marked.olive.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset; 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.marked.olive.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset; 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.marked.olive.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D9E778 inset; 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.marked.olive.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D9E778 inset; 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.marked.green.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset; 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.marked.green.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset; 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.marked.green.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ECC40 inset; 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.marked.green.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ECC40 inset; 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.marked.teal.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset; 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.marked.teal.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset; 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.marked.teal.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6DFFFF inset; 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.marked.teal.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6DFFFF inset; 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.marked.blue.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 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.marked.blue.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 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.marked.blue.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54C8FF inset; 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.marked.blue.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54C8FF inset; 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.marked.violet.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset; 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.marked.violet.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset; 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.marked.violet.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A291FB inset; 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.marked.violet.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A291FB inset; 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.marked.purple.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset; 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.marked.purple.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset; 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.marked.purple.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DC73FF inset; 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.marked.purple.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DC73FF inset; 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.marked.pink.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset; 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.marked.pink.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset; 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.marked.pink.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FF8EDF inset; 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.marked.pink.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FF8EDF inset; 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.marked.brown.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset; 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.marked.brown.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset; 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.marked.brown.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #D67C1C inset; 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.marked.brown.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #D67C1C inset; 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.marked.grey.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; 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.marked.grey.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; 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.marked.grey.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DCDDDE inset; 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.marked.grey.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DCDDDE inset; 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.marked.black.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 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.marked.black.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 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.marked.black.left { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.black.right { -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } /*-------------- 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; 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); -webkit-box-shadow: none; 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; -webkit-box-shadow: none, none; box-shadow: none, 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-color: #2185D0; color: #FFFFFF; } .ui.ui.ui.ui.table tr.primary:not(.marked), .ui.ui.table td.primary:not(.marked) { background: #ddf4ff; color: rgba(255, 255, 255, 0.9); } .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.table td.marked.primary.left, .ui.table tr.marked.primary.left { -webkit-box-shadow: 0.2em 0 0 0 #2185D0 inset; box-shadow: 0.2em 0 0 0 #2185D0 inset; } .ui.table td.marked.primary.right, .ui.table tr.marked.primary.right { -webkit-box-shadow: -0.2em 0 0 0 #2185D0 inset; box-shadow: -0.2em 0 0 0 #2185D0 inset; } .ui.inverted.table td.marked.primary.left, .ui.inverted.table tr.marked.primary.left { -webkit-box-shadow: 0.2em 0 0 0 #54C8FF inset; box-shadow: 0.2em 0 0 0 #54C8FF inset; } .ui.inverted.table td.marked.primary.right, .ui.inverted.table tr.marked.primary.right { -webkit-box-shadow: -0.2em 0 0 0 #54C8FF inset; box-shadow: -0.2em 0 0 0 #54C8FF inset; } .ui.secondary.table { border-top: 0.2em solid #1B1C1D; } .ui.inverted.secondary.table { background-color: #1B1C1D; color: #FFFFFF; } .ui.ui.ui.ui.table tr.secondary:not(.marked), .ui.ui.table td.secondary:not(.marked) { background: #dddddd; color: rgba(255, 255, 255, 0.9); } .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.table td.marked.secondary.left, .ui.table tr.marked.secondary.left { -webkit-box-shadow: 0.2em 0 0 0 #1B1C1D inset; box-shadow: 0.2em 0 0 0 #1B1C1D inset; } .ui.table td.marked.secondary.right, .ui.table tr.marked.secondary.right { -webkit-box-shadow: -0.2em 0 0 0 #1B1C1D inset; box-shadow: -0.2em 0 0 0 #1B1C1D inset; } .ui.inverted.table td.marked.secondary.left, .ui.inverted.table tr.marked.secondary.left { -webkit-box-shadow: 0.2em 0 0 0 #545454 inset; box-shadow: 0.2em 0 0 0 #545454 inset; } .ui.inverted.table td.marked.secondary.right, .ui.inverted.table tr.marked.secondary.right { -webkit-box-shadow: -0.2em 0 0 0 #545454 inset; box-shadow: -0.2em 0 0 0 #545454 inset; } .ui.red.table { border-top: 0.2em solid #DB2828; } .ui.inverted.red.table { background-color: #DB2828;