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.

1049 lines
21 KiB

  1. /*!
  2. * # Semantic UI 2.0.0 - 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. Hoverable
  400. ---------------*/
  401. .ui.selectable.table tbody tr:hover {
  402. background: rgba(0, 0, 0, 0.05) !important;
  403. color: rgba(0, 0, 0, 0.95) !important;
  404. }
  405. .ui.selectable.inverted.table tbody tr:hover {
  406. background: rgba(255, 255, 255, 0.08) !important;
  407. color: #ffffff !important;
  408. }
  409. /* Other States */
  410. .ui.selectable.table tr.error:hover,
  411. .ui.selectable.table tr:hover td.error {
  412. background: #ffe7e7 !important;
  413. color: #943634 !important;
  414. }
  415. .ui.selectable.table tr.warning:hover,
  416. .ui.selectable.table tr:hover td.warning {
  417. background: #fff4e4 !important;
  418. color: #493107 !important;
  419. }
  420. .ui.selectable.table tr.active:hover,
  421. .ui.selectable.table tr:hover td.active {
  422. background: #e0e0e0 !important;
  423. color: rgba(0, 0, 0, 0.87) !important;
  424. }
  425. .ui.selectable.table tr.positive:hover,
  426. .ui.selectable.table tr:hover td.positive {
  427. background: #f7ffe6 !important;
  428. color: #275b28 !important;
  429. }
  430. .ui.selectable.table tr.negative:hover,
  431. .ui.selectable.table tr:hover td.negative {
  432. background: #ffe7e7 !important;
  433. color: #943634 !important;
  434. }
  435. /*--------------
  436. Attached
  437. ---------------*/
  438. /* All */
  439. .ui.attached.table {
  440. width: calc(100% + 2px );
  441. margin: 0em -1px;
  442. border-radius: 0px;
  443. box-shadow: none;
  444. }
  445. /* Top */
  446. .ui[class*="top attached"].table {
  447. margin-top: 1em;
  448. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  449. }
  450. .ui.table[class*="top attached"]:first-child {
  451. margin-top: 0em;
  452. }
  453. /* Bottom */
  454. .ui.table[class*="bottom attached"] {
  455. margin-top: 0em;
  456. margin-bottom: 1em;
  457. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  458. }
  459. .ui.table[class*="bottom attached"]:last-child {
  460. margin-bottom: 0em;
  461. }
  462. /*--------------
  463. Striped
  464. ---------------*/
  465. /* Table Striping */
  466. .ui.striped.table > tr:nth-child(2n),
  467. .ui.striped.table tbody tr:nth-child(2n) {
  468. background-color: rgba(0, 0, 50, 0.02);
  469. }
  470. /* Stripes */
  471. .ui.inverted.striped.table > tr:nth-child(2n),
  472. .ui.inverted.striped.table tbody tr:nth-child(2n) {
  473. background-color: rgba(255, 255, 255, 0.05);
  474. }
  475. /*--------------
  476. Single Line
  477. ---------------*/
  478. .ui.table[class*="single line"],
  479. .ui.table [class*="single line"] {
  480. white-space: nowrap;
  481. }
  482. /*-------------------
  483. Colors
  484. --------------------*/
  485. /* Red */
  486. .ui.red.table {
  487. border-top: 0.2em solid #db2828;
  488. }
  489. .ui.inverted.red.table {
  490. background-color: #db2828 !important;
  491. color: #ffffff !important;
  492. }
  493. /* Orange */
  494. .ui.orange.table {
  495. border-top: 0.2em solid #f2711c;
  496. }
  497. .ui.inverted.orange.table {
  498. background-color: #f2711c !important;
  499. color: #ffffff !important;
  500. }
  501. /* Yellow */
  502. .ui.yellow.table {
  503. border-top: 0.2em solid #fbbd08;
  504. }
  505. .ui.inverted.yellow.table {
  506. background-color: #fbbd08 !important;
  507. color: #ffffff !important;
  508. }
  509. /* Olive */
  510. .ui.olive.table {
  511. border-top: 0.2em solid #b5cc18;
  512. }
  513. .ui.inverted.olive.table {
  514. background-color: #b5cc18 !important;
  515. color: #ffffff !important;
  516. }
  517. /* Green */
  518. .ui.green.table {
  519. border-top: 0.2em solid #21ba45;
  520. }
  521. .ui.inverted.green.table {
  522. background-color: #21ba45 !important;
  523. color: #ffffff !important;
  524. }
  525. /* Teal */
  526. .ui.teal.table {
  527. border-top: 0.2em solid #00b5ad;
  528. }
  529. .ui.inverted.teal.table {
  530. background-color: #00b5ad !important;
  531. color: #ffffff !important;
  532. }
  533. /* Blue */
  534. .ui.blue.table {
  535. border-top: 0.2em solid #2185d0;
  536. }
  537. .ui.inverted.blue.table {
  538. background-color: #2185d0 !important;
  539. color: #ffffff !important;
  540. }
  541. /* Violet */
  542. .ui.violet.table {
  543. border-top: 0.2em solid #6435c9;
  544. }
  545. .ui.inverted.violet.table {
  546. background-color: #6435c9 !important;
  547. color: #ffffff !important;
  548. }
  549. /* Purple */
  550. .ui.purple.table {
  551. border-top: 0.2em solid #a333c8;
  552. }
  553. .ui.inverted.purple.table {
  554. background-color: #a333c8 !important;
  555. color: #ffffff !important;
  556. }
  557. /* Pink */
  558. .ui.pink.table {
  559. border-top: 0.2em solid #e03997;
  560. }
  561. .ui.inverted.pink.table {
  562. background-color: #e03997 !important;
  563. color: #ffffff !important;
  564. }
  565. /* Brown */
  566. .ui.brown.table {
  567. border-top: 0.2em solid #a5673f;
  568. }
  569. .ui.inverted.brown.table {
  570. background-color: #a5673f !important;
  571. color: #ffffff !important;
  572. }
  573. /* Grey */
  574. .ui.grey.table {
  575. border-top: 0.2em solid #767676;
  576. }
  577. .ui.inverted.grey.table {
  578. background-color: #767676 !important;
  579. color: #ffffff !important;
  580. }
  581. /* Black */
  582. .ui.black.table {
  583. border-top: 0.2em solid #1b1c1d;
  584. }
  585. .ui.inverted.black.table {
  586. background-color: #1b1c1d !important;
  587. color: #ffffff !important;
  588. }
  589. /*--------------
  590. Column Count
  591. ---------------*/
  592. /* Grid Based */
  593. .ui.one.column.table td {
  594. width: 100%;
  595. }
  596. .ui.two.column.table td {
  597. width: 50%;
  598. }
  599. .ui.three.column.table td {
  600. width: 33.33333333%;
  601. }
  602. .ui.four.column.table td {
  603. width: 25%;
  604. }
  605. .ui.five.column.table td {
  606. width: 20%;
  607. }
  608. .ui.six.column.table td {
  609. width: 16.66666667%;
  610. }
  611. .ui.seven.column.table td {
  612. width: 14.28571429%;
  613. }
  614. .ui.eight.column.table td {
  615. width: 12.5%;
  616. }
  617. .ui.nine.column.table td {
  618. width: 11.11111111%;
  619. }
  620. .ui.ten.column.table td {
  621. width: 10%;
  622. }
  623. .ui.eleven.column.table td {
  624. width: 9.09090909%;
  625. }
  626. .ui.twelve.column.table td {
  627. width: 8.33333333%;
  628. }
  629. .ui.thirteen.column.table td {
  630. width: 7.69230769%;
  631. }
  632. .ui.fourteen.column.table td {
  633. width: 7.14285714%;
  634. }
  635. .ui.fifteen.column.table td {
  636. width: 6.66666667%;
  637. }
  638. .ui.sixteen.column.table td {
  639. width: 6.25%;
  640. }
  641. /* Column Width */
  642. .ui.table th.one.wide,
  643. .ui.table td.one.wide {
  644. width: 6.25%;
  645. }
  646. .ui.table th.two.wide,
  647. .ui.table td.two.wide {
  648. width: 12.5%;
  649. }
  650. .ui.table th.three.wide,
  651. .ui.table td.three.wide {
  652. width: 18.75%;
  653. }
  654. .ui.table th.four.wide,
  655. .ui.table td.four.wide {
  656. width: 25%;
  657. }
  658. .ui.table th.five.wide,
  659. .ui.table td.five.wide {
  660. width: 31.25%;
  661. }
  662. .ui.table th.six.wide,
  663. .ui.table td.six.wide {
  664. width: 37.5%;
  665. }
  666. .ui.table th.seven.wide,
  667. .ui.table td.seven.wide {
  668. width: 43.75%;
  669. }
  670. .ui.table th.eight.wide,
  671. .ui.table td.eight.wide {
  672. width: 50%;
  673. }
  674. .ui.table th.nine.wide,
  675. .ui.table td.nine.wide {
  676. width: 56.25%;
  677. }
  678. .ui.table th.ten.wide,
  679. .ui.table td.ten.wide {
  680. width: 62.5%;
  681. }
  682. .ui.table th.eleven.wide,
  683. .ui.table td.eleven.wide {
  684. width: 68.75%;
  685. }
  686. .ui.table th.twelve.wide,
  687. .ui.table td.twelve.wide {
  688. width: 75%;
  689. }
  690. .ui.table th.thirteen.wide,
  691. .ui.table td.thirteen.wide {
  692. width: 81.25%;
  693. }
  694. .ui.table th.fourteen.wide,
  695. .ui.table td.fourteen.wide {
  696. width: 87.5%;
  697. }
  698. .ui.table th.fifteen.wide,
  699. .ui.table td.fifteen.wide {
  700. width: 93.75%;
  701. }
  702. .ui.table th.sixteen.wide,
  703. .ui.table td.sixteen.wide {
  704. width: 100%;
  705. }
  706. /*--------------
  707. Sortable
  708. ---------------*/
  709. .ui.sortable.table thead th {
  710. cursor: pointer;
  711. white-space: nowrap;
  712. border-left: 1px solid rgba(34, 36, 38, 0.15);
  713. color: rgba(0, 0, 0, 0.87);
  714. }
  715. .ui.sortable.table thead th:first-child {
  716. border-left: none;
  717. }
  718. .ui.sortable.table thead th.sorted,
  719. .ui.sortable.table thead th.sorted:hover {
  720. -webkit-user-select: none;
  721. -moz-user-select: none;
  722. -ms-user-select: none;
  723. user-select: none;
  724. }
  725. .ui.sortable.table thead th:after {
  726. display: none;
  727. font-style: normal;
  728. font-weight: normal;
  729. text-decoration: inherit;
  730. content: '';
  731. height: 1em;
  732. width: auto;
  733. opacity: 0.8;
  734. margin: 0em 0em 0em 0.5em;
  735. font-family: 'Icons';
  736. }
  737. .ui.sortable.table thead th.ascending:after {
  738. content: '\f0d8';
  739. }
  740. .ui.sortable.table thead th.descending:after {
  741. content: '\f0d7';
  742. }
  743. /* Hover */
  744. .ui.sortable.table th.disabled:hover {
  745. cursor: auto;
  746. color: rgba(40, 40, 40, 0.3);
  747. }
  748. .ui.sortable.table thead th:hover {
  749. background: rgba(0, 0, 0, 0.05);
  750. color: rgba(0, 0, 0, 0.8);
  751. }
  752. /* Sorted */
  753. .ui.sortable.table thead th.sorted {
  754. background: rgba(0, 0, 0, 0.05);
  755. color: rgba(0, 0, 0, 0.95);
  756. }
  757. .ui.sortable.table thead th.sorted:after {
  758. display: inline-block;
  759. }
  760. /* Sorted Hover */
  761. .ui.sortable.table thead th.sorted:hover {
  762. background: rgba(0, 0, 0, 0.05);
  763. color: rgba(0, 0, 0, 0.95);
  764. }
  765. /* Inverted */
  766. .ui.inverted.sortable.table thead th.sorted {
  767. background: rgba(255, 255, 255, 0.15) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  768. background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  769. color: #ffffff;
  770. }
  771. .ui.inverted.sortable.table thead th:hover {
  772. background: rgba(255, 255, 255, 0.08) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  773. background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  774. color: #ffffff;
  775. }
  776. .ui.inverted.sortable.table thead th {
  777. border-left-color: transparent;
  778. border-right-color: transparent;
  779. }
  780. /*--------------
  781. Inverted
  782. ---------------*/
  783. /* Text Color */
  784. .ui.inverted.table {
  785. background: #333333;
  786. color: rgba(255, 255, 255, 0.9);
  787. border: none;
  788. }
  789. .ui.inverted.table th {
  790. background-color: rgba(0, 0, 0, 0.15);
  791. border-color: rgba(255, 255, 255, 0.1) !important;
  792. color: rgba(255, 255, 255, 0.9);
  793. }
  794. .ui.inverted.table tr td {
  795. border-color: rgba(255, 255, 255, 0.1) !important;
  796. }
  797. .ui.inverted.table tr.disabled td,
  798. .ui.inverted.table tr td.disabled,
  799. .ui.inverted.table tr.disabled:hover td,
  800. .ui.inverted.table tr:hover td.disabled {
  801. pointer-events: none;
  802. color: rgba(225, 225, 225, 0.3);
  803. }
  804. /* Definition */
  805. .ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
  806. .ui.inverted.definition.table thead:not(.full-width) th:first-child {
  807. background: #ffffff;
  808. }
  809. .ui.inverted.definition.table tr td:first-child {
  810. background: rgba(255, 255, 255, 0.02);
  811. color: #ffffff;
  812. }
  813. /*--------------
  814. Collapsing
  815. ---------------*/
  816. .ui.collapsing.table {
  817. width: auto;
  818. }
  819. /*--------------
  820. Basic
  821. ---------------*/
  822. .ui.basic.table {
  823. background: transparent;
  824. border: 1px solid rgba(34, 36, 38, 0.15);
  825. box-shadow: none;
  826. }
  827. .ui.basic.table thead,
  828. .ui.basic.table tfoot {
  829. box-shadow: none;
  830. }
  831. .ui.basic.table th {
  832. background: transparent;
  833. border-left: none;
  834. }
  835. .ui.basic.table tbody tr {
  836. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  837. }
  838. .ui.basic.table td {
  839. background: transparent;
  840. }
  841. .ui.basic.striped.table tbody tr:nth-child(2n) {
  842. background-color: rgba(0, 0, 0, 0.05) !important;
  843. }
  844. /* Very Basic */
  845. .ui[class*="very basic"].table {
  846. border: none;
  847. }
  848. .ui[class*="very basic"].table:not(.sortable):not(.striped) th,
  849. .ui[class*="very basic"].table:not(.sortable):not(.striped) td {
  850. padding: '';
  851. }
  852. .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
  853. .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
  854. padding-left: 0em;
  855. }
  856. .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
  857. .ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
  858. padding-right: 0em;
  859. }
  860. .ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
  861. padding-top: 0em;
  862. }
  863. /*--------------
  864. Celled
  865. ---------------*/
  866. .ui.celled.table tr th,
  867. .ui.celled.table tr td {
  868. border-left: 1px solid rgba(34, 36, 38, 0.1);
  869. }
  870. .ui.celled.table tr th:first-child,
  871. .ui.celled.table tr td:first-child {
  872. border-left: none;
  873. }
  874. /*--------------
  875. Padded
  876. ---------------*/
  877. .ui.padded.table th {
  878. padding-left: 1em;
  879. padding-right: 1em;
  880. }
  881. .ui.padded.table th,
  882. .ui.padded.table td {
  883. padding: 1em 1em;
  884. }
  885. /* Very */
  886. .ui[class*="very padded"].table th {
  887. padding-left: 1.5em;
  888. padding-right: 1.5em;
  889. }
  890. .ui[class*="very padded"].table td {
  891. padding: 1.5em 1.5em;
  892. }
  893. /*--------------
  894. Compact
  895. ---------------*/
  896. .ui.compact.table th {
  897. padding-left: 0.7em;
  898. padding-right: 0.7em;
  899. }
  900. .ui.compact.table td {
  901. padding: 0.5em 0.7em;
  902. }
  903. /* Very */
  904. .ui[class*="very compact"].table th {
  905. padding-left: 0.6em;
  906. padding-right: 0.6em;
  907. }
  908. .ui[class*="very compact"].table td {
  909. padding: 0.4em 0.6em;
  910. }
  911. /*--------------
  912. Sizes
  913. ---------------*/
  914. /* Small */
  915. .ui.small.table {
  916. font-size: 0.9em;
  917. }
  918. /* Standard */
  919. .ui.table {
  920. font-size: 1em;
  921. }
  922. /* Large */
  923. .ui.large.table {
  924. font-size: 1.1em;
  925. }
  926. /*******************************
  927. Site Overrides
  928. *******************************/