.ui.table { width: 100%; border: 1px solid #F0F0F0; border: 1px solid rgba(0, 0, 0, 0.1); font-size: 12px; color: #555555; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9); } /* Standard Table Icons */ .ui.table i.icon { vertical-align: middle; margin: 0px; } .ui.table .star-empty, .ui.table .star-half, .ui.table .star { color: #D9B347; } .ui.table tr, .ui.table td { border-collapse: collapse; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.table thead { border-bottom: 1px solid #DADADA; } .ui.table thead tr { /* -webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); -moz-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); */ } .ui.table td, .ui.table th { padding: 6px 10px; vertical-align: middle; } .ui.table th, .ui.sortable.table th.disabled:hover { cursor: auto; background-color: #FAFAFA; font-weight: bold; color: #333333; background: -webkit-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); background: -moz-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); background: -o-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); background: -ms-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); background: linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); } /* Header & Footer Formatting */ .ui.table thead, .ui.table tfoot { border: 1px solid rgba(0, 0, 0, 0.1); font-size: 13px; } /* Table Striping */ .ui.table tbody tr:nth-child(2n) { background-color: rgba(0, 0, 0, 0.02); } /*-------------- Variations ---------------*/ /* Grid */ .ui.grid.table tbody tr, .ui.grid.table tfoot tr { border: none; } .ui.grid.table th { border: 1px solid #DADADA; border: 1px solid rgba(0, 0, 0, 0.1); border-bottom-color: #CCCCCC; border-bottom-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; } .ui.grid.table tbody td { border: 1px solid #E0E0E0; border-color: rgba(0, 0, 0, 0.1); } /* Special Row Types */ .ui.table tr.button td { padding: 0px; } .ui.table tr.button .button { border: none !important; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .ui.table tfoot tr td, .ui.table tr.emphasis td, .ui.table tr td.emphasis { background-color: #F0F0F0; border: 1px solid #DADADA; border: 1px solid rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; font-weight: bold; color: #333333; } /* Sortable Table */ .ui.sortable.table th { cursor: pointer; color: #555555; vertical-align: top; } .ui.sortable.table th:hover { background-image: none; background-color: #F4F4F4; } .ui.sortable.table th.sorted { background-image: none; background-color: #EEEEEE; border-color: #CACACA; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.4); border-bottom-width: 2px; color: #333333; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2); background: -webkit-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); background: -moz-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); background: -o-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); background: -ms-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); background: linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); } .ui.sortable.table th:after { display: inline-block; content: ''; width: 1em; opacity: 0.5; margin: 0px 0px 0px 8px; font-size: 18px; line-height: 12px; font-family: 'Icons'; font-style: normal; font-weight: normal; text-decoration: inherit; vertical-align: middle; vertical-align: calc(); } .ui.sortable.table th.ascending:after { content: '\25b4'; } .ui.sortable.table th.descending:after { content: '\25be'; } /* Icons */ .ui.sortable.table th .icon.info-circle { float: right; } /* Red Icons */ .ui.sortable.table td .icon.cancel-circle { color: #CC3333; } /* Green Icons */ .ui.sortable.table td .icon.check, .ui.sortable.table td .icon.dollar, .ui.sortable.table td .icon.money { color: #40D100; } /*-------------- Resizes ---------------*/ .ui.large.table { font-size: 13px; } .ui.large.table td, .ui.large.table th { padding: 10px 12px; }