table.css 24 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138
  1. /*!
  2. * # Semantic UI 2.3.3 - Table
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Table
  12. *******************************/
  13. /* Prototype */
  14. .ui.table {
  15. width: 100%;
  16. background: #FFFFFF;
  17. margin: 1em 0em;
  18. border: 1px solid rgba(34, 36, 38, 0.15);
  19. -webkit-box-shadow: none;
  20. box-shadow: none;
  21. border-radius: 0.28571429rem;
  22. text-align: left;
  23. color: rgba(0, 0, 0, 0.87);
  24. border-collapse: separate;
  25. border-spacing: 0px;
  26. }
  27. .ui.table:first-child {
  28. margin-top: 0em;
  29. }
  30. .ui.table:last-child {
  31. margin-bottom: 0em;
  32. }
  33. /*******************************
  34. Parts
  35. *******************************/
  36. /* Table Content */
  37. .ui.table th,
  38. .ui.table td {
  39. -webkit-transition: background 0.1s ease, color 0.1s ease;
  40. transition: background 0.1s ease, color 0.1s ease;
  41. }
  42. /* Headers */
  43. .ui.table thead {
  44. -webkit-box-shadow: none;
  45. box-shadow: none;
  46. }
  47. .ui.table thead th {
  48. cursor: auto;
  49. background: #F9FAFB;
  50. text-align: inherit;
  51. color: rgba(0, 0, 0, 0.87);
  52. padding: 0.92857143em 0.78571429em;
  53. vertical-align: inherit;
  54. font-style: none;
  55. font-weight: bold;
  56. text-transform: none;
  57. border-bottom: 1px solid rgba(34, 36, 38, 0.1);
  58. border-left: none;
  59. }
  60. .ui.table thead tr > th:first-child {
  61. border-left: none;
  62. }
  63. .ui.table thead tr:first-child > th:first-child {
  64. border-radius: 0.28571429rem 0em 0em 0em;
  65. }
  66. .ui.table thead tr:first-child > th:last-child {
  67. border-radius: 0em 0.28571429rem 0em 0em;
  68. }
  69. .ui.table thead tr:first-child > th:only-child {
  70. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  71. }
  72. /* Footer */
  73. .ui.table tfoot {
  74. -webkit-box-shadow: none;
  75. box-shadow: none;
  76. }
  77. .ui.table tfoot th {
  78. cursor: auto;
  79. border-top: 1px solid rgba(34, 36, 38, 0.15);
  80. background: #F9FAFB;
  81. text-align: inherit;
  82. color: rgba(0, 0, 0, 0.87);
  83. padding: 0.78571429em 0.78571429em;
  84. vertical-align: middle;
  85. font-style: normal;
  86. font-weight: normal;
  87. text-transform: none;
  88. }
  89. .ui.table tfoot tr > th:first-child {
  90. border-left: none;
  91. }
  92. .ui.table tfoot tr:first-child > th:first-child {
  93. border-radius: 0em 0em 0em 0.28571429rem;
  94. }
  95. .ui.table tfoot tr:first-child > th:last-child {
  96. border-radius: 0em 0em 0.28571429rem 0em;
  97. }
  98. .ui.table tfoot tr:first-child > th:only-child {
  99. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  100. }
  101. /* Table Row */
  102. .ui.table tr td {
  103. border-top: 1px solid rgba(34, 36, 38, 0.1);
  104. }
  105. .ui.table tr:first-child td {
  106. border-top: none;
  107. }
  108. /* Repeated tbody */
  109. .ui.table tbody + tbody tr:first-child td {
  110. border-top: 1px solid rgba(34, 36, 38, 0.1);
  111. }
  112. /* Table Cells */
  113. .ui.table td {
  114. padding: 0.78571429em 0.78571429em;
  115. text-align: inherit;
  116. }
  117. /* Icons */
  118. .ui.table > .icon {
  119. vertical-align: baseline;
  120. }
  121. .ui.table > .icon:only-child {
  122. margin: 0em;
  123. }
  124. /* Table Segment */
  125. .ui.table.segment {
  126. padding: 0em;
  127. }
  128. .ui.table.segment:after {
  129. display: none;
  130. }
  131. .ui.table.segment.stacked:after {
  132. display: block;
  133. }
  134. /* Responsive */
  135. @media only screen and (max-width: 767px) {
  136. .ui.table:not(.unstackable) {
  137. width: 100%;
  138. }
  139. .ui.table:not(.unstackable) tbody,
  140. .ui.table:not(.unstackable) tr,
  141. .ui.table:not(.unstackable) tr > th,
  142. .ui.table:not(.unstackable) tr > td {
  143. width: auto !important;
  144. display: block !important;
  145. }
  146. .ui.table:not(.unstackable) {
  147. padding: 0em;
  148. }
  149. .ui.table:not(.unstackable) thead {
  150. display: block;
  151. }
  152. .ui.table:not(.unstackable) tfoot {
  153. display: block;
  154. }
  155. .ui.table:not(.unstackable) tr {
  156. padding-top: 1em;
  157. padding-bottom: 1em;
  158. -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  159. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  160. }
  161. .ui.table:not(.unstackable) tr > th,
  162. .ui.table:not(.unstackable) tr > td {
  163. background: none;
  164. border: none !important;
  165. padding: 0.25em 0.75em !important;
  166. -webkit-box-shadow: none !important;
  167. box-shadow: none !important;
  168. }
  169. .ui.table:not(.unstackable) th:first-child,
  170. .ui.table:not(.unstackable) td:first-child {
  171. font-weight: bold;
  172. }
  173. /* Definition Table */
  174. .ui.definition.table:not(.unstackable) thead th:first-child {
  175. -webkit-box-shadow: none !important;
  176. box-shadow: none !important;
  177. }
  178. }
  179. /*******************************
  180. Coupling
  181. *******************************/
  182. /* UI Image */
  183. .ui.table th .image,
  184. .ui.table th .image img,
  185. .ui.table td .image,
  186. .ui.table td .image img {
  187. max-width: none;
  188. }
  189. /*******************************
  190. Types
  191. *******************************/
  192. /*--------------
  193. Complex
  194. ---------------*/
  195. .ui.structured.table {
  196. border-collapse: collapse;
  197. }
  198. .ui.structured.table thead th {
  199. border-left: none;
  200. border-right: none;
  201. }
  202. .ui.structured.sortable.table thead th {
  203. border-left: 1px solid rgba(34, 36, 38, 0.15);
  204. border-right: 1px solid rgba(34, 36, 38, 0.15);
  205. }
  206. .ui.structured.basic.table th {
  207. border-left: none;
  208. border-right: none;
  209. }
  210. .ui.structured.celled.table tr th,
  211. .ui.structured.celled.table tr td {
  212. border-left: 1px solid rgba(34, 36, 38, 0.1);
  213. border-right: 1px solid rgba(34, 36, 38, 0.1);
  214. }
  215. /*--------------
  216. Definition
  217. ---------------*/
  218. .ui.definition.table thead:not(.full-width) th:first-child {
  219. pointer-events: none;
  220. background: transparent;
  221. font-weight: normal;
  222. color: rgba(0, 0, 0, 0.4);
  223. -webkit-box-shadow: -1px -1px 0px 1px #FFFFFF;
  224. box-shadow: -1px -1px 0px 1px #FFFFFF;
  225. }
  226. .ui.definition.table tfoot:not(.full-width) th:first-child {
  227. pointer-events: none;
  228. background: transparent;
  229. font-weight: rgba(0, 0, 0, 0.4);
  230. color: normal;
  231. -webkit-box-shadow: 1px 1px 0px 1px #FFFFFF;
  232. box-shadow: 1px 1px 0px 1px #FFFFFF;
  233. }
  234. /* Remove Border */
  235. .ui.celled.definition.table thead:not(.full-width) th:first-child {
  236. -webkit-box-shadow: 0px -1px 0px 1px #FFFFFF;
  237. box-shadow: 0px -1px 0px 1px #FFFFFF;
  238. }
  239. .ui.celled.definition.table tfoot:not(.full-width) th:first-child {
  240. -webkit-box-shadow: 0px 1px 0px 1px #FFFFFF;
  241. box-shadow: 0px 1px 0px 1px #FFFFFF;
  242. }
  243. /* Highlight Defining Column */
  244. .ui.definition.table tr td:first-child:not(.ignored),
  245. .ui.definition.table tr td.definition {
  246. background: rgba(0, 0, 0, 0.03);
  247. font-weight: bold;
  248. color: rgba(0, 0, 0, 0.95);
  249. text-transform: '';
  250. -webkit-box-shadow: '';
  251. box-shadow: '';
  252. text-align: '';
  253. font-size: 1em;
  254. padding-left: '';
  255. padding-right: '';
  256. }
  257. /* Fix 2nd Column */
  258. .ui.definition.table thead:not(.full-width) th:nth-child(2) {
  259. border-left: 1px solid rgba(34, 36, 38, 0.15);
  260. }
  261. .ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
  262. border-left: 1px solid rgba(34, 36, 38, 0.15);
  263. }
  264. .ui.definition.table td:nth-child(2) {
  265. border-left: 1px solid rgba(34, 36, 38, 0.15);
  266. }
  267. /*******************************
  268. States
  269. *******************************/
  270. /*--------------
  271. Positive
  272. ---------------*/
  273. .ui.table tr.positive,
  274. .ui.table td.positive {
  275. -webkit-box-shadow: 0px 0px 0px #A3C293 inset;
  276. box-shadow: 0px 0px 0px #A3C293 inset;
  277. }
  278. .ui.table tr.positive,
  279. .ui.table td.positive {
  280. background: #FCFFF5 !important;
  281. color: #2C662D !important;
  282. }
  283. /*--------------
  284. Negative
  285. ---------------*/
  286. .ui.table tr.negative,
  287. .ui.table td.negative {
  288. -webkit-box-shadow: 0px 0px 0px #E0B4B4 inset;
  289. box-shadow: 0px 0px 0px #E0B4B4 inset;
  290. }
  291. .ui.table tr.negative,
  292. .ui.table td.negative {
  293. background: #FFF6F6 !important;
  294. color: #9F3A38 !important;
  295. }
  296. /*--------------
  297. Error
  298. ---------------*/
  299. .ui.table tr.error,
  300. .ui.table td.error {
  301. -webkit-box-shadow: 0px 0px 0px #E0B4B4 inset;
  302. box-shadow: 0px 0px 0px #E0B4B4 inset;
  303. }
  304. .ui.table tr.error,
  305. .ui.table td.error {
  306. background: #FFF6F6 !important;
  307. color: #9F3A38 !important;
  308. }
  309. /*--------------
  310. Warning
  311. ---------------*/
  312. .ui.table tr.warning,
  313. .ui.table td.warning {
  314. -webkit-box-shadow: 0px 0px 0px #C9BA9B inset;
  315. box-shadow: 0px 0px 0px #C9BA9B inset;
  316. }
  317. .ui.table tr.warning,
  318. .ui.table td.warning {
  319. background: #FFFAF3 !important;
  320. color: #573A08 !important;
  321. }
  322. /*--------------
  323. Active
  324. ---------------*/
  325. .ui.table tr.active,
  326. .ui.table td.active {
  327. -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset;
  328. box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset;
  329. }
  330. .ui.table tr.active,
  331. .ui.table td.active {
  332. background: #E0E0E0 !important;
  333. color: rgba(0, 0, 0, 0.87) !important;
  334. }
  335. /*--------------
  336. Disabled
  337. ---------------*/
  338. .ui.table tr.disabled td,
  339. .ui.table tr td.disabled,
  340. .ui.table tr.disabled:hover,
  341. .ui.table tr:hover td.disabled {
  342. pointer-events: none;
  343. color: rgba(40, 40, 40, 0.3);
  344. }
  345. /*******************************
  346. Variations
  347. *******************************/
  348. /*--------------
  349. Stackable
  350. ---------------*/
  351. @media only screen and (max-width: 991px) {
  352. .ui[class*="tablet stackable"].table,
  353. .ui[class*="tablet stackable"].table tbody,
  354. .ui[class*="tablet stackable"].table tr,
  355. .ui[class*="tablet stackable"].table tr > th,
  356. .ui[class*="tablet stackable"].table tr > td {
  357. width: 100% !important;
  358. display: block !important;
  359. }
  360. .ui[class*="tablet stackable"].table {
  361. padding: 0em;
  362. }
  363. .ui[class*="tablet stackable"].table thead {
  364. display: block;
  365. }
  366. .ui[class*="tablet stackable"].table tfoot {
  367. display: block;
  368. }
  369. .ui[class*="tablet stackable"].table tr {
  370. padding-top: 1em;
  371. padding-bottom: 1em;
  372. -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  373. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  374. }
  375. .ui[class*="tablet stackable"].table tr > th,
  376. .ui[class*="tablet stackable"].table tr > td {
  377. background: none;
  378. border: none !important;
  379. padding: 0.25em 0.75em;
  380. -webkit-box-shadow: none !important;
  381. box-shadow: none !important;
  382. }
  383. /* Definition Table */
  384. .ui.definition[class*="tablet stackable"].table thead th:first-child {
  385. -webkit-box-shadow: none !important;
  386. box-shadow: none !important;
  387. }
  388. }
  389. /*--------------
  390. Text Alignment
  391. ---------------*/
  392. .ui.table[class*="left aligned"],
  393. .ui.table [class*="left aligned"] {
  394. text-align: left;
  395. }
  396. .ui.table[class*="center aligned"],
  397. .ui.table [class*="center aligned"] {
  398. text-align: center;
  399. }
  400. .ui.table[class*="right aligned"],
  401. .ui.table [class*="right aligned"] {
  402. text-align: right;
  403. }
  404. /*------------------
  405. Vertical Alignment
  406. ------------------*/
  407. .ui.table[class*="top aligned"],
  408. .ui.table [class*="top aligned"] {
  409. vertical-align: top;
  410. }
  411. .ui.table[class*="middle aligned"],
  412. .ui.table [class*="middle aligned"] {
  413. vertical-align: middle;
  414. }
  415. .ui.table[class*="bottom aligned"],
  416. .ui.table [class*="bottom aligned"] {
  417. vertical-align: bottom;
  418. }
  419. /*--------------
  420. Collapsing
  421. ---------------*/
  422. .ui.table th.collapsing,
  423. .ui.table td.collapsing {
  424. width: 1px;
  425. white-space: nowrap;
  426. }
  427. /*--------------
  428. Fixed
  429. ---------------*/
  430. .ui.fixed.table {
  431. table-layout: fixed;
  432. }
  433. .ui.fixed.table th,
  434. .ui.fixed.table td {
  435. overflow: hidden;
  436. text-overflow: ellipsis;
  437. }
  438. /*--------------
  439. Selectable
  440. ---------------*/
  441. .ui.selectable.table tbody tr:hover,
  442. .ui.table tbody tr td.selectable:hover {
  443. background: rgba(0, 0, 0, 0.05) !important;
  444. color: rgba(0, 0, 0, 0.95) !important;
  445. }
  446. .ui.selectable.inverted.table tbody tr:hover,
  447. .ui.inverted.table tbody tr td.selectable:hover {
  448. background: rgba(255, 255, 255, 0.08) !important;
  449. color: #ffffff !important;
  450. }
  451. /* Selectable Cell Link */
  452. .ui.table tbody tr td.selectable {
  453. padding: 0em;
  454. }
  455. .ui.table tbody tr td.selectable > a:not(.ui) {
  456. display: block;
  457. color: inherit;
  458. padding: 0.78571429em 0.78571429em;
  459. }
  460. /* Other States */
  461. .ui.selectable.table tr.error:hover,
  462. .ui.table tr td.selectable.error:hover,
  463. .ui.selectable.table tr:hover td.error {
  464. background: #ffe7e7 !important;
  465. color: #943634 !important;
  466. }
  467. .ui.selectable.table tr.warning:hover,
  468. .ui.table tr td.selectable.warning:hover,
  469. .ui.selectable.table tr:hover td.warning {
  470. background: #fff4e4 !important;
  471. color: #493107 !important;
  472. }
  473. .ui.selectable.table tr.active:hover,
  474. .ui.table tr td.selectable.active:hover,
  475. .ui.selectable.table tr:hover td.active {
  476. background: #E0E0E0 !important;
  477. color: rgba(0, 0, 0, 0.87) !important;
  478. }
  479. .ui.selectable.table tr.positive:hover,
  480. .ui.table tr td.selectable.positive:hover,
  481. .ui.selectable.table tr:hover td.positive {
  482. background: #f7ffe6 !important;
  483. color: #275b28 !important;
  484. }
  485. .ui.selectable.table tr.negative:hover,
  486. .ui.table tr td.selectable.negative:hover,
  487. .ui.selectable.table tr:hover td.negative {
  488. background: #ffe7e7 !important;
  489. color: #943634 !important;
  490. }
  491. /*-------------------
  492. Attached
  493. --------------------*/
  494. /* Middle */
  495. .ui.attached.table {
  496. top: 0px;
  497. bottom: 0px;
  498. border-radius: 0px;
  499. margin: 0em -1px;
  500. width: calc(100% + 2px );
  501. max-width: calc(100% + 2px );
  502. -webkit-box-shadow: none;
  503. box-shadow: none;
  504. border: 1px solid #D4D4D5;
  505. }
  506. .ui.attached + .ui.attached.table:not(.top) {
  507. border-top: none;
  508. }
  509. /* Top */
  510. .ui[class*="top attached"].table {
  511. bottom: 0px;
  512. margin-bottom: 0em;
  513. top: 0px;
  514. margin-top: 1em;
  515. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  516. }
  517. .ui.table[class*="top attached"]:first-child {
  518. margin-top: 0em;
  519. }
  520. /* Bottom */
  521. .ui[class*="bottom attached"].table {
  522. bottom: 0px;
  523. margin-top: 0em;
  524. top: 0px;
  525. margin-bottom: 1em;
  526. -webkit-box-shadow: none, none;
  527. box-shadow: none, none;
  528. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  529. }
  530. .ui[class*="bottom attached"].table:last-child {
  531. margin-bottom: 0em;
  532. }
  533. /*--------------
  534. Striped
  535. ---------------*/
  536. /* Table Striping */
  537. .ui.striped.table > tr:nth-child(2n),
  538. .ui.striped.table tbody tr:nth-child(2n) {
  539. background-color: rgba(0, 0, 50, 0.02);
  540. }
  541. /* Stripes */
  542. .ui.inverted.striped.table > tr:nth-child(2n),
  543. .ui.inverted.striped.table tbody tr:nth-child(2n) {
  544. background-color: rgba(255, 255, 255, 0.05);
  545. }
  546. /* Allow striped active hover */
  547. .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
  548. background: #EFEFEF !important;
  549. color: rgba(0, 0, 0, 0.95) !important;
  550. }
  551. /*--------------
  552. Single Line
  553. ---------------*/
  554. .ui.table[class*="single line"],
  555. .ui.table [class*="single line"] {
  556. white-space: nowrap;
  557. }
  558. .ui.table[class*="single line"],
  559. .ui.table [class*="single line"] {
  560. white-space: nowrap;
  561. }
  562. /*-------------------
  563. Colors
  564. --------------------*/
  565. /* Red */
  566. .ui.red.table {
  567. border-top: 0.2em solid #DB2828;
  568. }
  569. .ui.inverted.red.table {
  570. background-color: #DB2828 !important;
  571. color: #FFFFFF !important;
  572. }
  573. /* Orange */
  574. .ui.orange.table {
  575. border-top: 0.2em solid #F2711C;
  576. }
  577. .ui.inverted.orange.table {
  578. background-color: #F2711C !important;
  579. color: #FFFFFF !important;
  580. }
  581. /* Yellow */
  582. .ui.yellow.table {
  583. border-top: 0.2em solid #FBBD08;
  584. }
  585. .ui.inverted.yellow.table {
  586. background-color: #FBBD08 !important;
  587. color: #FFFFFF !important;
  588. }
  589. /* Olive */
  590. .ui.olive.table {
  591. border-top: 0.2em solid #B5CC18;
  592. }
  593. .ui.inverted.olive.table {
  594. background-color: #B5CC18 !important;
  595. color: #FFFFFF !important;
  596. }
  597. /* Green */
  598. .ui.green.table {
  599. border-top: 0.2em solid #21BA45;
  600. }
  601. .ui.inverted.green.table {
  602. background-color: #21BA45 !important;
  603. color: #FFFFFF !important;
  604. }
  605. /* Teal */
  606. .ui.teal.table {
  607. border-top: 0.2em solid #00B5AD;
  608. }
  609. .ui.inverted.teal.table {
  610. background-color: #00B5AD !important;
  611. color: #FFFFFF !important;
  612. }
  613. /* Blue */
  614. .ui.blue.table {
  615. border-top: 0.2em solid #2185D0;
  616. }
  617. .ui.inverted.blue.table {
  618. background-color: #2185D0 !important;
  619. color: #FFFFFF !important;
  620. }
  621. /* Violet */
  622. .ui.violet.table {
  623. border-top: 0.2em solid #6435C9;
  624. }
  625. .ui.inverted.violet.table {
  626. background-color: #6435C9 !important;
  627. color: #FFFFFF !important;
  628. }
  629. /* Purple */
  630. .ui.purple.table {
  631. border-top: 0.2em solid #A333C8;
  632. }
  633. .ui.inverted.purple.table {
  634. background-color: #A333C8 !important;
  635. color: #FFFFFF !important;
  636. }
  637. /* Pink */
  638. .ui.pink.table {
  639. border-top: 0.2em solid #E03997;
  640. }
  641. .ui.inverted.pink.table {
  642. background-color: #E03997 !important;
  643. color: #FFFFFF !important;
  644. }
  645. /* Brown */
  646. .ui.brown.table {
  647. border-top: 0.2em solid #A5673F;
  648. }
  649. .ui.inverted.brown.table {
  650. background-color: #A5673F !important;
  651. color: #FFFFFF !important;
  652. }
  653. /* Grey */
  654. .ui.grey.table {
  655. border-top: 0.2em solid #767676;
  656. }
  657. .ui.inverted.grey.table {
  658. background-color: #767676 !important;
  659. color: #FFFFFF !important;
  660. }
  661. /* Black */
  662. .ui.black.table {
  663. border-top: 0.2em solid #1B1C1D;
  664. }
  665. .ui.inverted.black.table {
  666. background-color: #1B1C1D !important;
  667. color: #FFFFFF !important;
  668. }
  669. /*--------------
  670. Column Count
  671. ---------------*/
  672. /* Grid Based */
  673. .ui.one.column.table td {
  674. width: 100%;
  675. }
  676. .ui.two.column.table td {
  677. width: 50%;
  678. }
  679. .ui.three.column.table td {
  680. width: 33.33333333%;
  681. }
  682. .ui.four.column.table td {
  683. width: 25%;
  684. }
  685. .ui.five.column.table td {
  686. width: 20%;
  687. }
  688. .ui.six.column.table td {
  689. width: 16.66666667%;
  690. }
  691. .ui.seven.column.table td {
  692. width: 14.28571429%;
  693. }
  694. .ui.eight.column.table td {
  695. width: 12.5%;
  696. }
  697. .ui.nine.column.table td {
  698. width: 11.11111111%;
  699. }
  700. .ui.ten.column.table td {
  701. width: 10%;
  702. }
  703. .ui.eleven.column.table td {
  704. width: 9.09090909%;
  705. }
  706. .ui.twelve.column.table td {
  707. width: 8.33333333%;
  708. }
  709. .ui.thirteen.column.table td {
  710. width: 7.69230769%;
  711. }
  712. .ui.fourteen.column.table td {
  713. width: 7.14285714%;
  714. }
  715. .ui.fifteen.column.table td {
  716. width: 6.66666667%;
  717. }
  718. .ui.sixteen.column.table td {
  719. width: 6.25%;
  720. }
  721. /* Column Width */
  722. .ui.table th.one.wide,
  723. .ui.table td.one.wide {
  724. width: 6.25%;
  725. }
  726. .ui.table th.two.wide,
  727. .ui.table td.two.wide {
  728. width: 12.5%;
  729. }
  730. .ui.table th.three.wide,
  731. .ui.table td.three.wide {
  732. width: 18.75%;
  733. }
  734. .ui.table th.four.wide,
  735. .ui.table td.four.wide {
  736. width: 25%;
  737. }
  738. .ui.table th.five.wide,
  739. .ui.table td.five.wide {
  740. width: 31.25%;
  741. }
  742. .ui.table th.six.wide,
  743. .ui.table td.six.wide {
  744. width: 37.5%;
  745. }
  746. .ui.table th.seven.wide,
  747. .ui.table td.seven.wide {
  748. width: 43.75%;
  749. }
  750. .ui.table th.eight.wide,
  751. .ui.table td.eight.wide {
  752. width: 50%;
  753. }
  754. .ui.table th.nine.wide,
  755. .ui.table td.nine.wide {
  756. width: 56.25%;
  757. }
  758. .ui.table th.ten.wide,
  759. .ui.table td.ten.wide {
  760. width: 62.5%;
  761. }
  762. .ui.table th.eleven.wide,
  763. .ui.table td.eleven.wide {
  764. width: 68.75%;
  765. }
  766. .ui.table th.twelve.wide,
  767. .ui.table td.twelve.wide {
  768. width: 75%;
  769. }
  770. .ui.table th.thirteen.wide,
  771. .ui.table td.thirteen.wide {
  772. width: 81.25%;
  773. }
  774. .ui.table th.fourteen.wide,
  775. .ui.table td.fourteen.wide {
  776. width: 87.5%;
  777. }
  778. .ui.table th.fifteen.wide,
  779. .ui.table td.fifteen.wide {
  780. width: 93.75%;
  781. }
  782. .ui.table th.sixteen.wide,
  783. .ui.table td.sixteen.wide {
  784. width: 100%;
  785. }
  786. /*--------------
  787. Sortable
  788. ---------------*/
  789. .ui.sortable.table thead th {
  790. cursor: pointer;
  791. white-space: nowrap;
  792. border-left: 1px solid rgba(34, 36, 38, 0.15);
  793. color: rgba(0, 0, 0, 0.87);
  794. }
  795. .ui.sortable.table thead th:first-child {
  796. border-left: none;
  797. }
  798. .ui.sortable.table thead th.sorted,
  799. .ui.sortable.table thead th.sorted:hover {
  800. -webkit-user-select: none;
  801. -moz-user-select: none;
  802. -ms-user-select: none;
  803. user-select: none;
  804. }
  805. .ui.sortable.table thead th:after {
  806. display: none;
  807. font-style: normal;
  808. font-weight: normal;
  809. text-decoration: inherit;
  810. content: '';
  811. height: 1em;
  812. width: auto;
  813. opacity: 0.8;
  814. margin: 0em 0em 0em 0.5em;
  815. font-family: 'Icons';
  816. }
  817. .ui.sortable.table thead th.ascending:after {
  818. content: '\f0d8';
  819. }
  820. .ui.sortable.table thead th.descending:after {
  821. content: '\f0d7';
  822. }
  823. /* Hover */
  824. .ui.sortable.table th.disabled:hover {
  825. cursor: auto;
  826. color: rgba(40, 40, 40, 0.3);
  827. }
  828. .ui.sortable.table thead th:hover {
  829. background: rgba(0, 0, 0, 0.05);
  830. color: rgba(0, 0, 0, 0.8);
  831. }
  832. /* Sorted */
  833. .ui.sortable.table thead th.sorted {
  834. background: rgba(0, 0, 0, 0.05);
  835. color: rgba(0, 0, 0, 0.95);
  836. }
  837. .ui.sortable.table thead th.sorted:after {
  838. display: inline-block;
  839. }
  840. /* Sorted Hover */
  841. .ui.sortable.table thead th.sorted:hover {
  842. background: rgba(0, 0, 0, 0.05);
  843. color: rgba(0, 0, 0, 0.95);
  844. }
  845. /* Inverted */
  846. .ui.inverted.sortable.table thead th.sorted {
  847. background: rgba(255, 255, 255, 0.15) -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  848. background: rgba(255, 255, 255, 0.15) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  849. background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  850. color: #ffffff;
  851. }
  852. .ui.inverted.sortable.table thead th:hover {
  853. background: rgba(255, 255, 255, 0.08) -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  854. background: rgba(255, 255, 255, 0.08) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  855. background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  856. color: #ffffff;
  857. }
  858. .ui.inverted.sortable.table thead th {
  859. border-left-color: transparent;
  860. border-right-color: transparent;
  861. }
  862. /*--------------
  863. Inverted
  864. ---------------*/
  865. /* Text Color */
  866. .ui.inverted.table {
  867. background: #333333;
  868. color: rgba(255, 255, 255, 0.9);
  869. border: none;
  870. }
  871. .ui.inverted.table th {
  872. background-color: rgba(0, 0, 0, 0.15);
  873. border-color: rgba(255, 255, 255, 0.1) !important;
  874. color: rgba(255, 255, 255, 0.9) !important;
  875. }
  876. .ui.inverted.table tr td {
  877. border-color: rgba(255, 255, 255, 0.1) !important;
  878. }
  879. .ui.inverted.table tr.disabled td,
  880. .ui.inverted.table tr td.disabled,
  881. .ui.inverted.table tr.disabled:hover td,
  882. .ui.inverted.table tr:hover td.disabled {
  883. pointer-events: none;
  884. color: rgba(225, 225, 225, 0.3);
  885. }
  886. /* Definition */
  887. .ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
  888. .ui.inverted.definition.table thead:not(.full-width) th:first-child {
  889. background: #FFFFFF;
  890. }
  891. .ui.inverted.definition.table tr td:first-child {
  892. background: rgba(255, 255, 255, 0.02);
  893. color: #ffffff;
  894. }
  895. /*--------------
  896. Collapsing
  897. ---------------*/
  898. .ui.collapsing.table {
  899. width: auto;
  900. }
  901. /*--------------
  902. Basic
  903. ---------------*/
  904. .ui.basic.table {
  905. background: transparent;
  906. border: 1px solid rgba(34, 36, 38, 0.15);
  907. -webkit-box-shadow: none;
  908. box-shadow: none;
  909. }
  910. .ui.basic.table thead,
  911. .ui.basic.table tfoot {
  912. -webkit-box-shadow: none;
  913. box-shadow: none;
  914. }
  915. .ui.basic.table th {
  916. background: transparent;
  917. border-left: none;
  918. }
  919. .ui.basic.table tbody tr {
  920. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  921. }
  922. .ui.basic.table td {
  923. background: transparent;
  924. }
  925. .ui.basic.striped.table tbody tr:nth-child(2n) {
  926. background-color: rgba(0, 0, 0, 0.05) !important;
  927. }
  928. /* Very Basic */
  929. .ui[class*="very basic"].table {
  930. border: none;
  931. }
  932. .ui[class*="very basic"].table:not(.sortable):not(.striped) th,
  933. .ui[class*="very basic"].table:not(.sortable):not(.striped) td {
  934. padding: '';
  935. }
  936. .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
  937. .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
  938. padding-left: 0em;
  939. }
  940. .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
  941. .ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
  942. padding-right: 0em;
  943. }
  944. .ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
  945. padding-top: 0em;
  946. }
  947. /*--------------
  948. Celled
  949. ---------------*/
  950. .ui.celled.table tr th,
  951. .ui.celled.table tr td {
  952. border-left: 1px solid rgba(34, 36, 38, 0.1);
  953. }
  954. .ui.celled.table tr th:first-child,
  955. .ui.celled.table tr td:first-child {
  956. border-left: none;
  957. }
  958. /*--------------
  959. Padded
  960. ---------------*/
  961. .ui.padded.table th {
  962. padding-left: 1em;
  963. padding-right: 1em;
  964. }
  965. .ui.padded.table th,
  966. .ui.padded.table td {
  967. padding: 1em 1em;
  968. }
  969. /* Very */
  970. .ui[class*="very padded"].table th {
  971. padding-left: 1.5em;
  972. padding-right: 1.5em;
  973. }
  974. .ui[class*="very padded"].table td {
  975. padding: 1.5em 1.5em;
  976. }
  977. /*--------------
  978. Compact
  979. ---------------*/
  980. .ui.compact.table th {
  981. padding-left: 0.7em;
  982. padding-right: 0.7em;
  983. }
  984. .ui.compact.table td {
  985. padding: 0.5em 0.7em;
  986. }
  987. /* Very */
  988. .ui[class*="very compact"].table th {
  989. padding-left: 0.6em;
  990. padding-right: 0.6em;
  991. }
  992. .ui[class*="very compact"].table td {
  993. padding: 0.4em 0.6em;
  994. }
  995. /*--------------
  996. Sizes
  997. ---------------*/
  998. /* Small */
  999. .ui.small.table {
  1000. font-size: 0.9em;
  1001. }
  1002. /* Standard */
  1003. .ui.table {
  1004. font-size: 1em;
  1005. }
  1006. /* Large */
  1007. .ui.large.table {
  1008. font-size: 1.1em;
  1009. }
  1010. /*******************************
  1011. Site Overrides
  1012. *******************************/