Advertisement
Guest User

Untitled

a guest
Dec 6th, 2016
58
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 26.68 KB | None | 0 0
  1. *, *:before, *:after {
  2.   box-sizing: border-box;
  3. }
  4.  
  5. ::-moz-selection {
  6.   background: black;
  7.   color: white;
  8.   text-shadow: none;
  9. }
  10.  
  11. ::selection {
  12.   background: black;
  13.   color: white;
  14.   text-shadow: none;
  15. }
  16.  
  17. hr {
  18.   display: block;
  19.   height: 1px;
  20.   border: 0;
  21.   border-top: 1px solid #ccc;
  22.   margin: 1em 0;
  23.   padding: 0;
  24. }
  25.  
  26. img {
  27.   max-width: 100%;
  28.   height: auto;
  29.   vertical-align: middle;
  30. }
  31.  
  32. .chromeframe {
  33.   margin: 0.2em 0;
  34.   background: #ccc;
  35.   color: #000;
  36.   padding: 0.2em 0;
  37. }
  38.  
  39. .grp {
  40.   zoom: 1;
  41. }
  42. .grp:before,
  43. .grp:after {
  44.   content: "";
  45.   display: table;
  46. }
  47. .grp:after {
  48.   clear: both;
  49. }
  50.  
  51. .image-replace {
  52.   text-indent: 100%;
  53.   white-space: nowrap;
  54.   overflow: hidden;
  55. }
  56.  
  57. .vh {
  58.   border: 0;
  59.   clip: rect(0 0 0 0);
  60.   height: 1px;
  61.   margin: -1px;
  62.   overflow: hidden;
  63.   padding: 0;
  64.   position: absolute;
  65.   width: 1px;
  66. }
  67. .vh.focusable:active,
  68. .vh.focusable:focus {
  69.   clip: auto;
  70.   height: auto;
  71.   margin: 0;
  72.   overflow: visible;
  73.   position: static;
  74.   width: auto;
  75. }
  76.  
  77. .hidden {
  78.   display: none !important;
  79.   visibility: hidden;
  80. }
  81.  
  82. .invisible {
  83.   visibility: hidden;
  84. }
  85.  
  86. .hide-mobile {
  87.   display: block;
  88. }
  89. @media (max-width: 46.24em) {
  90.   .hide-mobile {
  91.     display: none !important;
  92.   }
  93. }
  94.  
  95. .hide-tablet {
  96.   display: block;
  97. }
  98. @media (min-width: 46.25em) and (max-width: 61.24em) {
  99.   .hide-tablet {
  100.     display: none !important;
  101.   }
  102. }
  103.  
  104. .hide-desktop {
  105.   display: block;
  106. }
  107. @media (min-width: 61.25em) {
  108.   .hide-desktop {
  109.     display: none !important;
  110.   }
  111. }
  112.  
  113. .browsehappy {
  114.   margin: 0.2em 0;
  115.   background: #ccc;
  116.   color: #000;
  117.   padding: 0.2em 0;
  118. }
  119.  
  120. .party-color {
  121.   &.Conservative {
  122.       background: lightblue;
  123.   }
  124.   &.Labour {
  125.       background: Salmon;
  126.   }
  127.   &.Liberal {
  128.       background: gold;
  129.   }
  130.   &.Scottish {
  131.       background: lightyellow;
  132.   }
  133.   &.Unionist {
  134.       background: darksalmon;
  135.   }
  136.   &.Plaid {
  137.       background: lightgreen;
  138.   }
  139. }
  140.  
  141. h1 {
  142.   font-family: 'Pacifico', cursive;
  143.   color: #000;
  144.   font-weight: normal;
  145.   margin: 0;
  146.   transition: all 3s ease;
  147.   font-size: 5em;
  148.   font-size: 5vw;
  149.   text-align: center;
  150.   padding-top: 10px;
  151. }
  152.  
  153. @media (max-width: 30em) {
  154.   h1 {
  155.     font-size: 1.5em;
  156.   }
  157. }
  158. @media (min-width: 100em) {
  159.   h1 {
  160.     font-size: 5em;
  161.   }
  162. }
  163.  
  164. p {
  165.   font-family: 'Source Sans Pro', sans-serif;
  166.   margin: -0.5em 0 0;
  167.   transition: all 3s ease;
  168.   font-size: 1.5em;
  169.   font-size: 3vw;
  170. }
  171. @media (max-width: 33.33333em) {
  172.   p {
  173.     font-size: 1em;
  174.   }
  175. }
  176. @media (min-width: 50em) {
  177.   p {
  178.     font-size: 1.5em;
  179.   }
  180. }
  181.  
  182. .site-header {
  183.   text-align: center;
  184.   height: 100vh;
  185.   display: flex;
  186.   flex-direction: column;
  187.   align-items: center;
  188.   justify-content: center;
  189.   background-color: white;
  190.   position: absolute;
  191.   top: 0;
  192.   width: 100%;
  193.   will-change: transform;
  194.   transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  195. }
  196. .site-header.is-fixed {
  197.   height: 150px;
  198. }
  199. .site-header.is-fixed .l-constrain {
  200.   will-change: transform;
  201.   transform: scale(0.6);
  202.   transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  203. }
  204.  
  205. .site-main {
  206.   margin-top: 150px;
  207.   transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  208. }
  209.  
  210. .l-constrain {
  211.   max-width: 1200px;
  212.   margin: 0 auto;
  213. }
  214.  
  215. .l-center {
  216.   text-align: center;
  217.   height: 100vh;
  218.   display: flex;
  219.   flex-direction: column;
  220.   align-items: center;
  221.   justify-content: center;
  222. }
  223.  
  224. /*!
  225. * # Semantic UI 2.2.2 - Table
  226. * http://github.com/semantic-org/semantic-ui/
  227. *
  228. *
  229. * Released under the MIT license
  230. * http://opensource.org/licenses/MIT
  231. *
  232. */
  233. /*******************************
  234. Table
  235. *******************************/
  236. /* Prototype */
  237. .ui.table {
  238.   width: 100%;
  239.   background: #FFFFFF;
  240.   margin: 1em 0em;
  241.   border: 1px solid rgba(34, 36, 38, 0.15);
  242.   box-shadow: none;
  243.   border-radius: 0.28571429rem;
  244.   text-align: left;
  245.   color: rgba(0, 0, 0, 0.87);
  246.   border-collapse: separate;
  247.   border-spacing: 0px;
  248. }
  249.  
  250. .ui.table:first-child {
  251.   margin-top: 0em;
  252. }
  253.  
  254. .ui.table:last-child {
  255.   margin-bottom: 0em;
  256. }
  257.  
  258. /*******************************
  259. Parts
  260. *******************************/
  261. /* Table Content */
  262. .ui.table th,
  263. .ui.table td {
  264.   -webkit-transition: background 0.1s ease, color 0.1s ease;
  265.   transition: background 0.1s ease, color 0.1s ease;
  266. }
  267.  
  268. /* Headers */
  269. .ui.table thead {
  270.   box-shadow: none;
  271. }
  272.  
  273. .ui.table thead th {
  274.   cursor: auto;
  275.   background: #F9FAFB;
  276.   text-align: inherit;
  277.   color: rgba(0, 0, 0, 0.87);
  278.   padding: 0.92857143em 0.78571429em;
  279.   vertical-align: inherit;
  280.   font-style: none;
  281.   font-weight: bold;
  282.   text-transform: none;
  283.   border-bottom: 1px solid rgba(34, 36, 38, 0.1);
  284.   border-left: none;
  285. }
  286.  
  287. .ui.table thead tr > th:first-child {
  288.   border-left: none;
  289. }
  290.  
  291. .ui.table thead tr:first-child > th:first-child {
  292.   border-radius: 0.28571429rem 0em 0em 0em;
  293. }
  294.  
  295. .ui.table thead tr:first-child > th:last-child {
  296.   border-radius: 0em 0.28571429rem 0em 0em;
  297. }
  298.  
  299. .ui.table thead tr:first-child > th:only-child {
  300.   border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  301. }
  302.  
  303. /* Footer */
  304. .ui.table tfoot {
  305.   box-shadow: none;
  306. }
  307.  
  308. .ui.table tfoot th {
  309.   cursor: auto;
  310.   border-top: 1px solid rgba(34, 36, 38, 0.15);
  311.   background: #F9FAFB;
  312.   text-align: inherit;
  313.   color: rgba(0, 0, 0, 0.87);
  314.   padding: 0.78571429em 0.78571429em;
  315.   vertical-align: middle;
  316.   font-style: normal;
  317.   font-weight: normal;
  318.   text-transform: none;
  319. }
  320.  
  321. .ui.table tfoot tr > th:first-child {
  322.   border-left: none;
  323. }
  324.  
  325. .ui.table tfoot tr:first-child > th:first-child {
  326.   border-radius: 0em 0em 0em 0.28571429rem;
  327. }
  328.  
  329. .ui.table tfoot tr:first-child > th:last-child {
  330.   border-radius: 0em 0em 0.28571429rem 0em;
  331. }
  332.  
  333. .ui.table tfoot tr:first-child > th:only-child {
  334.   border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  335. }
  336.  
  337. /* Table Row */
  338. .ui.table tr td {
  339.   border-top: 1px solid rgba(34, 36, 38, 0.1);
  340. }
  341.  
  342. .ui.table tr:first-child td {
  343.   border-top: none;
  344. }
  345.  
  346. /* Table Cells */
  347. .ui.table td {
  348.   padding: 0.78571429em 0.78571429em;
  349.   text-align: inherit;
  350. }
  351.  
  352. /* Icons */
  353. .ui.table > .icon {
  354.   vertical-align: baseline;
  355. }
  356.  
  357. .ui.table > .icon:only-child {
  358.   margin: 0em;
  359. }
  360.  
  361. /* Table Segment */
  362. .ui.table.segment {
  363.   padding: 0em;
  364. }
  365.  
  366. .ui.table.segment:after {
  367.   display: none;
  368. }
  369.  
  370. .ui.table.segment.stacked:after {
  371.   display: block;
  372. }
  373.  
  374. /* Responsive */
  375. @media only screen and (max-width: 767px) {
  376.   .ui.table:not(.unstackable) {
  377.     width: 100%;
  378.   }
  379.  
  380.   .ui.table:not(.unstackable) tbody,
  381.   .ui.table:not(.unstackable) tr,
  382.   .ui.table:not(.unstackable) tr > th,
  383.   .ui.table:not(.unstackable) tr > td {
  384.     width: auto !important;
  385.     display: block !important;
  386.   }
  387.  
  388.   .ui.table:not(.unstackable) {
  389.     padding: 0em;
  390.   }
  391.  
  392.   .ui.table:not(.unstackable) thead {
  393.     display: block;
  394.   }
  395.  
  396.   .ui.table:not(.unstackable) tfoot {
  397.     display: block;
  398.   }
  399.  
  400.   .ui.table:not(.unstackable) tr {
  401.     padding-top: 1em;
  402.     padding-bottom: 1em;
  403.     box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  404.   }
  405.  
  406.   .ui.table:not(.unstackable) tr > th,
  407.   .ui.table:not(.unstackable) tr > td {
  408.     background: none;
  409.     border: none !important;
  410.     padding: 0.25em 0.75em !important;
  411.     box-shadow: none !important;
  412.   }
  413.  
  414.   .ui.table:not(.unstackable) th:first-child,
  415.   .ui.table:not(.unstackable) td:first-child {
  416.     font-weight: bold;
  417.   }
  418.  
  419.   /* Definition Table */
  420.   .ui.definition.table:not(.unstackable) thead th:first-child {
  421.     box-shadow: none !important;
  422.   }
  423. }
  424. /*******************************
  425. Coupling
  426. *******************************/
  427. /* UI Image */
  428. .ui.table th .image,
  429. .ui.table th .image img,
  430. .ui.table td .image,
  431. .ui.table td .image img {
  432.   max-width: none;
  433. }
  434.  
  435. /*******************************
  436. Types
  437. *******************************/
  438. /*--------------
  439. Complex
  440. ---------------*/
  441. .ui.structured.table {
  442.   border-collapse: collapse;
  443. }
  444.  
  445. .ui.structured.table thead th {
  446.   border-left: none;
  447.   border-right: none;
  448. }
  449.  
  450. .ui.structured.sortable.table thead th {
  451.   border-left: 1px solid rgba(34, 36, 38, 0.15);
  452.   border-right: 1px solid rgba(34, 36, 38, 0.15);
  453. }
  454.  
  455. .ui.structured.basic.table th {
  456.   border-left: none;
  457.   border-right: none;
  458. }
  459.  
  460. .ui.structured.celled.table tr th,
  461. .ui.structured.celled.table tr td {
  462.   border-left: 1px solid rgba(34, 36, 38, 0.1);
  463.   border-right: 1px solid rgba(34, 36, 38, 0.1);
  464. }
  465.  
  466. /*--------------
  467. Definition
  468. ---------------*/
  469. .ui.definition.table thead:not(.full-width) th:first-child {
  470.   pointer-events: none;
  471.   background: transparent;
  472.   font-weight: normal;
  473.   color: rgba(0, 0, 0, 0.4);
  474.   box-shadow: -1px -1px 0px 1px #FFFFFF;
  475. }
  476.  
  477. .ui.definition.table tfoot:not(.full-width) th:first-child {
  478.   pointer-events: none;
  479.   background: transparent;
  480.   font-weight: rgba(0, 0, 0, 0.4);
  481.   color: normal;
  482.   box-shadow: 1px 1px 0px 1px #FFFFFF;
  483. }
  484.  
  485. /* Remove Border */
  486. .ui.celled.definition.table thead:not(.full-width) th:first-child {
  487.   box-shadow: 0px -1px 0px 1px #FFFFFF;
  488. }
  489.  
  490. .ui.celled.definition.table tfoot:not(.full-width) th:first-child {
  491.   box-shadow: 0px 1px 0px 1px #FFFFFF;
  492. }
  493.  
  494. /* Highlight Defining Column */
  495. .ui.definition.table tr td:first-child:not(.ignored),
  496. .ui.definition.table tr td.definition {
  497.   background: rgba(0, 0, 0, 0.03);
  498.   font-weight: bold;
  499.   color: rgba(0, 0, 0, 0.95);
  500.   text-transform: '';
  501.   box-shadow: '';
  502.   text-align: '';
  503.   font-size: 1em;
  504.   padding-left: '';
  505.   padding-right: '';
  506. }
  507.  
  508. /* Fix 2nd Column */
  509. .ui.definition.table thead:not(.full-width) th:nth-child(2) {
  510.   border-left: 1px solid rgba(34, 36, 38, 0.15);
  511. }
  512.  
  513. .ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
  514.   border-left: 1px solid rgba(34, 36, 38, 0.15);
  515. }
  516.  
  517. .ui.definition.table td:nth-child(2) {
  518.   border-left: 1px solid rgba(34, 36, 38, 0.15);
  519. }
  520.  
  521. /*******************************
  522. States
  523. *******************************/
  524. /*--------------
  525. Positive
  526. ---------------*/
  527. .ui.table tr.positive,
  528. .ui.table td.positive {
  529.   box-shadow: 0px 0px 0px #A3C293 inset;
  530. }
  531.  
  532. .ui.table tr.positive,
  533. .ui.table td.positive {
  534.   background: #FCFFF5 !important;
  535.   color: #2C662D !important;
  536. }
  537.  
  538. /*--------------
  539. Negative
  540. ---------------*/
  541. .ui.table tr.negative,
  542. .ui.table td.negative {
  543.   box-shadow: 0px 0px 0px #E0B4B4 inset;
  544. }
  545.  
  546. .ui.table tr.negative,
  547. .ui.table td.negative {
  548.   background: #FFF6F6 !important;
  549.   color: #9F3A38 !important;
  550. }
  551.  
  552. /*--------------
  553. Error
  554. ---------------*/
  555. .ui.table tr.error,
  556. .ui.table td.error {
  557.   box-shadow: 0px 0px 0px #E0B4B4 inset;
  558. }
  559.  
  560. .ui.table tr.error,
  561. .ui.table td.error {
  562.   background: #FFF6F6 !important;
  563.   color: #9F3A38 !important;
  564. }
  565.  
  566. /*--------------
  567. Warning
  568. ---------------*/
  569. .ui.table tr.warning,
  570. .ui.table td.warning {
  571.   box-shadow: 0px 0px 0px #C9BA9B inset;
  572. }
  573.  
  574. .ui.table tr.warning,
  575. .ui.table td.warning {
  576.   background: #FFFAF3 !important;
  577.   color: #573A08 !important;
  578. }
  579.  
  580. /*--------------
  581. Active
  582. ---------------*/
  583. .ui.table tr.active,
  584. .ui.table td.active {
  585.   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset;
  586. }
  587.  
  588. .ui.table tr.active,
  589. .ui.table td.active {
  590.   background: #E0E0E0 !important;
  591.   color: rgba(0, 0, 0, 0.87) !important;
  592. }
  593.  
  594. /*--------------
  595. Disabled
  596. ---------------*/
  597. .ui.table tr.disabled td,
  598. .ui.table tr td.disabled,
  599. .ui.table tr.disabled:hover,
  600. .ui.table tr:hover td.disabled {
  601.   pointer-events: none;
  602.   color: rgba(40, 40, 40, 0.3);
  603. }
  604.  
  605. /*******************************
  606. Variations
  607. *******************************/
  608. /*--------------
  609. Stackable
  610. ---------------*/
  611. @media only screen and (max-width: 991px) {
  612.   .ui[class*="tablet stackable"].table,
  613.   .ui[class*="tablet stackable"].table tbody,
  614.   .ui[class*="tablet stackable"].table tr,
  615.   .ui[class*="tablet stackable"].table tr > th,
  616.   .ui[class*="tablet stackable"].table tr > td {
  617.     width: 100% !important;
  618.     display: block !important;
  619.   }
  620.  
  621.   .ui[class*="tablet stackable"].table {
  622.     padding: 0em;
  623.   }
  624.  
  625.   .ui[class*="tablet stackable"].table thead {
  626.     display: block;
  627.   }
  628.  
  629.   .ui[class*="tablet stackable"].table tfoot {
  630.     display: block;
  631.   }
  632.  
  633.   .ui[class*="tablet stackable"].table tr {
  634.     padding-top: 1em;
  635.     padding-bottom: 1em;
  636.     box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  637.   }
  638.  
  639.   .ui[class*="tablet stackable"].table tr > th,
  640.   .ui[class*="tablet stackable"].table tr > td {
  641.     background: none;
  642.     border: none !important;
  643.     padding: 0.25em 0.75em;
  644.     box-shadow: none !important;
  645.   }
  646.  
  647.   /* Definition Table */
  648.   .ui.definition[class*="tablet stackable"].table thead th:first-child {
  649.     box-shadow: none !important;
  650.   }
  651. }
  652. /*--------------
  653. Text Alignment
  654. ---------------*/
  655. .ui.table[class*="left aligned"],
  656. .ui.table [class*="left aligned"] {
  657.   text-align: left;
  658. }
  659.  
  660. .ui.table[class*="center aligned"],
  661. .ui.table [class*="center aligned"] {
  662.   text-align: center;
  663. }
  664.  
  665. .ui.table[class*="right aligned"],
  666. .ui.table [class*="right aligned"] {
  667.   text-align: right;
  668. }
  669.  
  670. /*------------------
  671. Vertical Alignment
  672. ------------------*/
  673. .ui.table[class*="top aligned"],
  674. .ui.table [class*="top aligned"] {
  675.   vertical-align: top;
  676. }
  677.  
  678. .ui.table[class*="middle aligned"],
  679. .ui.table [class*="middle aligned"] {
  680.   vertical-align: middle;
  681. }
  682.  
  683. .ui.table[class*="bottom aligned"],
  684. .ui.table [class*="bottom aligned"] {
  685.   vertical-align: bottom;
  686. }
  687.  
  688. /*--------------
  689. Collapsing
  690. ---------------*/
  691. .ui.table th.collapsing,
  692. .ui.table td.collapsing {
  693.   width: 1px;
  694.   white-space: nowrap;
  695. }
  696.  
  697. /*--------------
  698. Fixed
  699. ---------------*/
  700. .ui.fixed.table {
  701.   table-layout: fixed;
  702. }
  703.  
  704. .ui.fixed.table th,
  705. .ui.fixed.table td {
  706.   overflow: hidden;
  707.   text-overflow: ellipsis;
  708. }
  709.  
  710. /*--------------
  711. Selectable
  712. ---------------*/
  713. .ui.selectable.table tbody tr:hover,
  714. .ui.table tbody tr td.selectable:hover {
  715.   background: rgba(0, 0, 0, 0.05) !important;
  716.   color: rgba(0, 0, 0, 0.95) !important;
  717. }
  718.  
  719. .ui.selectable.inverted.table tbody tr:hover,
  720. .ui.inverted.table tbody tr td.selectable:hover {
  721.   background: rgba(255, 255, 255, 0.08) !important;
  722.   color: #ffffff !important;
  723. }
  724.  
  725. /* Selectable Cell Link */
  726. .ui.table tbody tr td.selectable {
  727.   padding: 0em;
  728. }
  729.  
  730. .ui.table tbody tr td.selectable > a:not(.ui) {
  731.   display: block;
  732.   color: inherit;
  733.   padding: 0.78571429em 0.78571429em;
  734. }
  735.  
  736. /* Other States */
  737. .ui.selectable.table tr.error:hover,
  738. .ui.table tr td.selectable.error:hover,
  739. .ui.selectable.table tr:hover td.error {
  740.   background: #ffe7e7 !important;
  741.   color: #943634 !important;
  742. }
  743.  
  744. .ui.selectable.table tr.warning:hover,
  745. .ui.table tr td.selectable.warning:hover,
  746. .ui.selectable.table tr:hover td.warning {
  747.   background: #fff4e4 !important;
  748.   color: #493107 !important;
  749. }
  750.  
  751. .ui.selectable.table tr.active:hover,
  752. .ui.table tr td.selectable.active:hover,
  753. .ui.selectable.table tr:hover td.active {
  754.   background: #E0E0E0 !important;
  755.   color: rgba(0, 0, 0, 0.87) !important;
  756. }
  757.  
  758. .ui.selectable.table tr.positive:hover,
  759. .ui.table tr td.selectable.positive:hover,
  760. .ui.selectable.table tr:hover td.positive {
  761.   background: #f7ffe6 !important;
  762.   color: #275b28 !important;
  763. }
  764.  
  765. .ui.selectable.table tr.negative:hover,
  766. .ui.table tr td.selectable.negative:hover,
  767. .ui.selectable.table tr:hover td.negative {
  768.   background: #ffe7e7 !important;
  769.   color: #943634 !important;
  770. }
  771.  
  772. /*-------------------
  773. Attached
  774. --------------------*/
  775. /* Middle */
  776. .ui.attached.table {
  777.   top: 0px;
  778.   bottom: 0px;
  779.   border-radius: 0px;
  780.   margin: 0em -1px;
  781.   width: calc(100% +  2px );
  782.   max-width: calc(100% +  2px );
  783.   box-shadow: none;
  784.   border: 1px solid #D4D4D5;
  785. }
  786.  
  787. .ui.attached + .ui.attached.table:not(.top) {
  788.   border-top: none;
  789. }
  790.  
  791. /* Top */
  792. .ui[class*="top attached"].table {
  793.   bottom: 0px;
  794.   margin-bottom: 0em;
  795.   top: 0px;
  796.   margin-top: 1em;
  797.   border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  798. }
  799.  
  800. .ui.table[class*="top attached"]:first-child {
  801.   margin-top: 0em;
  802. }
  803.  
  804. /* Bottom */
  805. .ui[class*="bottom attached"].table {
  806.   bottom: 0px;
  807.   margin-top: 0em;
  808.   top: 0px;
  809.   margin-bottom: 1em;
  810.   box-shadow: none, none;
  811.   border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  812. }
  813.  
  814. .ui[class*="bottom attached"].table:last-child {
  815.   margin-bottom: 0em;
  816. }
  817.  
  818. /*--------------
  819. Striped
  820. ---------------*/
  821. /* Table Striping */
  822. .ui.striped.table > tr:nth-child(2n),
  823. .ui.striped.table tbody tr:nth-child(2n) {
  824.   background-color: rgba(0, 0, 50, 0.02);
  825. }
  826.  
  827. /* Stripes */
  828. .ui.inverted.striped.table > tr:nth-child(2n),
  829. .ui.inverted.striped.table tbody tr:nth-child(2n) {
  830.   background-color: rgba(255, 255, 255, 0.05);
  831. }
  832.  
  833. /* Allow striped active hover */
  834. .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
  835.   background: #EFEFEF !important;
  836.   color: rgba(0, 0, 0, 0.95) !important;
  837. }
  838.  
  839. /*--------------
  840. Single Line
  841. ---------------*/
  842. .ui.table[class*="single line"],
  843. .ui.table [class*="single line"] {
  844.   white-space: nowrap;
  845. }
  846.  
  847. .ui.table[class*="single line"],
  848. .ui.table [class*="single line"] {
  849.   white-space: nowrap;
  850. }
  851.  
  852. /*-------------------
  853. Colors
  854. --------------------*/
  855. /* Red */
  856. .ui.red.table {
  857.   border-top: 0.2em solid #DB2828;
  858. }
  859.  
  860. .ui.inverted.red.table {
  861.   background-color: #DB2828 !important;
  862.   color: #FFFFFF !important;
  863. }
  864.  
  865. /* Orange */
  866. .ui.orange.table {
  867.   border-top: 0.2em solid #F2711C;
  868. }
  869.  
  870. .ui.inverted.orange.table {
  871.   background-color: #F2711C !important;
  872.   color: #FFFFFF !important;
  873. }
  874.  
  875. /* Yellow */
  876. .ui.yellow.table {
  877.   border-top: 0.2em solid #FBBD08;
  878. }
  879.  
  880. .ui.inverted.yellow.table {
  881.   background-color: #FBBD08 !important;
  882.   color: #FFFFFF !important;
  883. }
  884.  
  885. /* Olive */
  886. .ui.olive.table {
  887.   border-top: 0.2em solid #B5CC18;
  888. }
  889.  
  890. .ui.inverted.olive.table {
  891.   background-color: #B5CC18 !important;
  892.   color: #FFFFFF !important;
  893. }
  894.  
  895. /* Green */
  896. .ui.green.table {
  897.   border-top: 0.2em solid #21BA45;
  898. }
  899.  
  900. .ui.inverted.green.table {
  901.   background-color: #21BA45 !important;
  902.   color: #FFFFFF !important;
  903. }
  904.  
  905. /* Teal */
  906. .ui.teal.table {
  907.   border-top: 0.2em solid #00B5AD;
  908. }
  909.  
  910. .ui.inverted.teal.table {
  911.   background-color: #00B5AD !important;
  912.   color: #FFFFFF !important;
  913. }
  914.  
  915. /* Blue */
  916. .ui.blue.table {
  917.   border-top: 0.2em solid #2185D0;
  918. }
  919.  
  920. .ui.inverted.blue.table {
  921.   background-color: #2185D0 !important;
  922.   color: #FFFFFF !important;
  923. }
  924.  
  925. /* Violet */
  926. .ui.violet.table {
  927.   border-top: 0.2em solid #6435C9;
  928. }
  929.  
  930. .ui.inverted.violet.table {
  931.   background-color: #6435C9 !important;
  932.   color: #FFFFFF !important;
  933. }
  934.  
  935. /* Purple */
  936. .ui.purple.table {
  937.   border-top: 0.2em solid #A333C8;
  938. }
  939.  
  940. .ui.inverted.purple.table {
  941.   background-color: #A333C8 !important;
  942.   color: #FFFFFF !important;
  943. }
  944.  
  945. /* Pink */
  946. .ui.pink.table {
  947.   border-top: 0.2em solid #E03997;
  948. }
  949.  
  950. .ui.inverted.pink.table {
  951.   background-color: #E03997 !important;
  952.   color: #FFFFFF !important;
  953. }
  954.  
  955. /* Brown */
  956. .ui.brown.table {
  957.   border-top: 0.2em solid #A5673F;
  958. }
  959.  
  960. .ui.inverted.brown.table {
  961.   background-color: #A5673F !important;
  962.   color: #FFFFFF !important;
  963. }
  964.  
  965. /* Grey */
  966. .ui.grey.table {
  967.   border-top: 0.2em solid #767676;
  968. }
  969.  
  970. .ui.inverted.grey.table {
  971.   background-color: #767676 !important;
  972.   color: #FFFFFF !important;
  973. }
  974.  
  975. /* Black */
  976. .ui.black.table {
  977.   border-top: 0.2em solid #1B1C1D;
  978. }
  979.  
  980. .ui.inverted.black.table {
  981.   background-color: #1B1C1D !important;
  982.   color: #FFFFFF !important;
  983. }
  984.  
  985. /*--------------
  986. Column Count
  987. ---------------*/
  988. /* Grid Based */
  989. .ui.one.column.table td {
  990.   width: 100%;
  991. }
  992.  
  993. .ui.two.column.table td {
  994.   width: 50%;
  995. }
  996.  
  997. .ui.three.column.table td {
  998.   width: 33.33333333%;
  999. }
  1000.  
  1001. .ui.four.column.table td {
  1002.   width: 25%;
  1003. }
  1004.  
  1005. .ui.five.column.table td {
  1006.   width: 20%;
  1007. }
  1008.  
  1009. .ui.six.column.table td {
  1010.   width: 16.66666667%;
  1011. }
  1012.  
  1013. .ui.seven.column.table td {
  1014.   width: 14.28571429%;
  1015. }
  1016.  
  1017. .ui.eight.column.table td {
  1018.   width: 12.5%;
  1019. }
  1020.  
  1021. .ui.nine.column.table td {
  1022.   width: 11.11111111%;
  1023. }
  1024.  
  1025. .ui.ten.column.table td {
  1026.   width: 10%;
  1027. }
  1028.  
  1029. .ui.eleven.column.table td {
  1030.   width: 9.09090909%;
  1031. }
  1032.  
  1033. .ui.twelve.column.table td {
  1034.   width: 8.33333333%;
  1035. }
  1036.  
  1037. .ui.thirteen.column.table td {
  1038.   width: 7.69230769%;
  1039. }
  1040.  
  1041. .ui.fourteen.column.table td {
  1042.   width: 7.14285714%;
  1043. }
  1044.  
  1045. .ui.fifteen.column.table td {
  1046.   width: 6.66666667%;
  1047. }
  1048.  
  1049. .ui.sixteen.column.table td {
  1050.   width: 6.25%;
  1051. }
  1052.  
  1053. /* Column Width */
  1054. .ui.table th.one.wide,
  1055. .ui.table td.one.wide {
  1056.   width: 6.25%;
  1057. }
  1058.  
  1059. .ui.table th.two.wide,
  1060. .ui.table td.two.wide {
  1061.   width: 12.5%;
  1062. }
  1063.  
  1064. .ui.table th.three.wide,
  1065. .ui.table td.three.wide {
  1066.   width: 18.75%;
  1067. }
  1068.  
  1069. .ui.table th.four.wide,
  1070. .ui.table td.four.wide {
  1071.   width: 25%;
  1072. }
  1073.  
  1074. .ui.table th.five.wide,
  1075. .ui.table td.five.wide {
  1076.   width: 31.25%;
  1077. }
  1078.  
  1079. .ui.table th.six.wide,
  1080. .ui.table td.six.wide {
  1081.   width: 37.5%;
  1082. }
  1083.  
  1084. .ui.table th.seven.wide,
  1085. .ui.table td.seven.wide {
  1086.   width: 43.75%;
  1087. }
  1088.  
  1089. .ui.table th.eight.wide,
  1090. .ui.table td.eight.wide {
  1091.   width: 50%;
  1092. }
  1093.  
  1094. .ui.table th.nine.wide,
  1095. .ui.table td.nine.wide {
  1096.   width: 56.25%;
  1097. }
  1098.  
  1099. .ui.table th.ten.wide,
  1100. .ui.table td.ten.wide {
  1101.   width: 62.5%;
  1102. }
  1103.  
  1104. .ui.table th.eleven.wide,
  1105. .ui.table td.eleven.wide {
  1106.   width: 68.75%;
  1107. }
  1108.  
  1109. .ui.table th.twelve.wide,
  1110. .ui.table td.twelve.wide {
  1111.   width: 75%;
  1112. }
  1113.  
  1114. .ui.table th.thirteen.wide,
  1115. .ui.table td.thirteen.wide {
  1116.   width: 81.25%;
  1117. }
  1118.  
  1119. .ui.table th.fourteen.wide,
  1120. .ui.table td.fourteen.wide {
  1121.   width: 87.5%;
  1122. }
  1123.  
  1124. .ui.table th.fifteen.wide,
  1125. .ui.table td.fifteen.wide {
  1126.   width: 93.75%;
  1127. }
  1128.  
  1129. .ui.table th.sixteen.wide,
  1130. .ui.table td.sixteen.wide {
  1131.   width: 100%;
  1132. }
  1133.  
  1134. /*--------------
  1135. Sortable
  1136. ---------------*/
  1137. .ui.sortable.table thead th {
  1138.   cursor: pointer;
  1139.   white-space: nowrap;
  1140.   border-left: 1px solid rgba(34, 36, 38, 0.15);
  1141.   color: rgba(0, 0, 0, 0.87);
  1142. }
  1143.  
  1144. .ui.sortable.table thead th:first-child {
  1145.   border-left: none;
  1146. }
  1147.  
  1148. .ui.sortable.table thead th.sorted,
  1149. .ui.sortable.table thead th.sorted:hover {
  1150.   -webkit-user-select: none;
  1151.   -moz-user-select: none;
  1152.   -ms-user-select: none;
  1153.   user-select: none;
  1154. }
  1155.  
  1156. .ui.sortable.table thead th:after {
  1157.   display: none;
  1158.   font-style: normal;
  1159.   font-weight: normal;
  1160.   text-decoration: inherit;
  1161.   content: '';
  1162.   height: 1em;
  1163.   width: auto;
  1164.   opacity: 0.8;
  1165.   margin: 0em 0em 0em 0.5em;
  1166.   font-family: 'Icons';
  1167. }
  1168.  
  1169. .ui.sortable.table thead th.ascending:after {
  1170.   content: '\f0d8';
  1171. }
  1172.  
  1173. .ui.sortable.table thead th.descending:after {
  1174.   content: '\f0d7';
  1175. }
  1176.  
  1177. /* Hover */
  1178. .ui.sortable.table th.disabled:hover {
  1179.   cursor: auto;
  1180.   color: rgba(40, 40, 40, 0.3);
  1181. }
  1182.  
  1183. .ui.sortable.table thead th:hover {
  1184.   background: rgba(0, 0, 0, 0.05);
  1185.   color: rgba(0, 0, 0, 0.8);
  1186. }
  1187.  
  1188. /* Sorted */
  1189. .ui.sortable.table thead th.sorted {
  1190.   background: rgba(0, 0, 0, 0.05);
  1191.   color: rgba(0, 0, 0, 0.95);
  1192. }
  1193.  
  1194. .ui.sortable.table thead th.sorted:after {
  1195.   display: inline-block;
  1196. }
  1197.  
  1198. /* Sorted Hover */
  1199. .ui.sortable.table thead th.sorted:hover {
  1200.   background: rgba(0, 0, 0, 0.05);
  1201.   color: rgba(0, 0, 0, 0.95);
  1202. }
  1203.  
  1204. /* Inverted */
  1205. .ui.inverted.sortable.table thead th.sorted {
  1206.   background: rgba(255, 255, 255, 0.15) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  1207.   background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  1208.   color: #ffffff;
  1209. }
  1210.  
  1211. .ui.inverted.sortable.table thead th:hover {
  1212.   background: rgba(255, 255, 255, 0.08) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  1213.   background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  1214.   color: #ffffff;
  1215. }
  1216.  
  1217. .ui.inverted.sortable.table thead th {
  1218.   border-left-color: transparent;
  1219.   border-right-color: transparent;
  1220. }
  1221.  
  1222. /*--------------
  1223. Inverted
  1224. ---------------*/
  1225. /* Text Color */
  1226. .ui.inverted.table {
  1227.   background: #333333;
  1228.   color: rgba(255, 255, 255, 0.9);
  1229.   border: none;
  1230. }
  1231.  
  1232. .ui.inverted.table th {
  1233.   background-color: rgba(0, 0, 0, 0.15);
  1234.   border-color: rgba(255, 255, 255, 0.1) !important;
  1235.   color: rgba(255, 255, 255, 0.9);
  1236. }
  1237.  
  1238. .ui.inverted.table tr td {
  1239.   border-color: rgba(255, 255, 255, 0.1) !important;
  1240. }
  1241.  
  1242. .ui.inverted.table tr.disabled td,
  1243. .ui.inverted.table tr td.disabled,
  1244. .ui.inverted.table tr.disabled:hover td,
  1245. .ui.inverted.table tr:hover td.disabled {
  1246.   pointer-events: none;
  1247.   color: rgba(225, 225, 225, 0.3);
  1248. }
  1249.  
  1250. /* Definition */
  1251. .ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
  1252. .ui.inverted.definition.table thead:not(.full-width) th:first-child {
  1253.   background: #FFFFFF;
  1254. }
  1255.  
  1256. .ui.inverted.definition.table tr td:first-child {
  1257.   background: rgba(255, 255, 255, 0.02);
  1258.   color: #ffffff;
  1259. }
  1260.  
  1261. /*--------------
  1262. Collapsing
  1263. ---------------*/
  1264. .ui.collapsing.table {
  1265.   width: auto;
  1266. }
  1267.  
  1268. /*--------------
  1269. Basic
  1270. ---------------*/
  1271. .ui.basic.table {
  1272.   background: transparent;
  1273.   border: 1px solid rgba(34, 36, 38, 0.15);
  1274.   box-shadow: none;
  1275. }
  1276.  
  1277. .ui.basic.table thead,
  1278. .ui.basic.table tfoot {
  1279.   box-shadow: none;
  1280. }
  1281.  
  1282. .ui.basic.table th {
  1283.   background: transparent;
  1284.   border-left: none;
  1285. }
  1286.  
  1287. .ui.basic.table tbody tr {
  1288.   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  1289. }
  1290.  
  1291. .ui.basic.table td {
  1292.   background: transparent;
  1293. }
  1294.  
  1295. .ui.basic.striped.table tbody tr:nth-child(2n) {
  1296.   background-color: rgba(0, 0, 0, 0.05) !important;
  1297. }
  1298.  
  1299. /* Very Basic */
  1300. .ui[class*="very basic"].table {
  1301.   border: none;
  1302. }
  1303.  
  1304. .ui[class*="very basic"].table:not(.sortable):not(.striped) th,
  1305. .ui[class*="very basic"].table:not(.sortable):not(.striped) td {
  1306.   padding: '';
  1307. }
  1308.  
  1309. .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
  1310. .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
  1311.   padding-left: 0em;
  1312. }
  1313.  
  1314. .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
  1315. .ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
  1316.   padding-right: 0em;
  1317. }
  1318.  
  1319. .ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
  1320.   padding-top: 0em;
  1321. }
  1322.  
  1323. /*--------------
  1324. Celled
  1325. ---------------*/
  1326. .ui.celled.table tr th,
  1327. .ui.celled.table tr td {
  1328.   border-left: 1px solid rgba(34, 36, 38, 0.1);
  1329. }
  1330.  
  1331. .ui.celled.table tr th:first-child,
  1332. .ui.celled.table tr td:first-child {
  1333.   border-left: none;
  1334. }
  1335.  
  1336. /*--------------
  1337. Padded
  1338. ---------------*/
  1339. .ui.padded.table th {
  1340.   padding-left: 1em;
  1341.   padding-right: 1em;
  1342. }
  1343.  
  1344. .ui.padded.table th,
  1345. .ui.padded.table td {
  1346.   padding: 1em 1em;
  1347. }
  1348.  
  1349. /* Very */
  1350. .ui[class*="very padded"].table th {
  1351.   padding-left: 1.5em;
  1352.   padding-right: 1.5em;
  1353. }
  1354.  
  1355. .ui[class*="very padded"].table td {
  1356.   padding: 1.5em 1.5em;
  1357. }
  1358.  
  1359. /*--------------
  1360. Compact
  1361. ---------------*/
  1362. .ui.compact.table th {
  1363.   padding-left: 0.7em;
  1364.   padding-right: 0.7em;
  1365. }
  1366.  
  1367. .ui.compact.table td {
  1368.   padding: 0.5em 0.7em;
  1369. }
  1370.  
  1371. /* Very */
  1372. .ui[class*="very compact"].table th {
  1373.   padding-left: 0.6em;
  1374.   padding-right: 0.6em;
  1375. }
  1376.  
  1377. .ui[class*="very compact"].table td {
  1378.   padding: 0.4em 0.6em;
  1379. }
  1380.  
  1381. /*--------------
  1382. Sizes
  1383. ---------------*/
  1384. /* Small */
  1385. .ui.small.table {
  1386.   font-size: 0.9em;
  1387. }
  1388.  
  1389. /* Standard */
  1390. .ui.table {
  1391.   font-size: 1em;
  1392. }
  1393.  
  1394. /* Large */
  1395. .ui.large.table {
  1396.   font-size: 1.1em;
  1397. }
  1398.  
  1399. /*******************************
  1400. Site Overrides
  1401. *******************************/
  1402. .table a {
  1403.   color: black;
  1404. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement