You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1096 lines
22 KiB

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