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.

285 lines
6.1 KiB

  1. /*
  2. * # Semantic Table - Flat
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 24 2013
  11. */
  12. /*******************************
  13. Table
  14. *******************************/
  15. /* Prototype */
  16. .ui.table {
  17. width: 100%;
  18. border-collapse: collapse;
  19. }
  20. .ui.table thead {
  21. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  22. }
  23. .ui.table tr,
  24. .ui.table td {
  25. border-collapse: collapse;
  26. -webkit-box-sizing: border-box;
  27. -moz-box-sizing: border-box;
  28. -ms-box-sizing: border-box;
  29. box-sizing: border-box;
  30. -webkit-transition: all 0.1s ease-out;
  31. -moz-transition: all 0.1s ease-out;
  32. -o-transition: all 0.1s ease-out;
  33. -ms-transition: all 0.1s ease-out;
  34. transition: all 0.1s ease-out;
  35. }
  36. .ui.table th {
  37. cursor: auto;
  38. text-align: left;
  39. font-weight: bold;
  40. padding: 0.5em 0.7em;
  41. vertical-align: middle;
  42. }
  43. .ui.table tfoot th {
  44. font-weight: normal;
  45. font-style: italic;
  46. }
  47. .ui.table td {
  48. padding: 0.40em 0.7em;
  49. vertical-align: middle;
  50. }
  51. .ui.table tfoot {
  52. border-top: 1px solid rgba(0, 0, 0, 0.1);
  53. }
  54. /* Table Striping */
  55. .ui.table tbody tr:nth-child(2n) {
  56. background-color: rgba(0, 0, 0, 0.03);
  57. }
  58. /* Icons */
  59. .ui.table > .icon {
  60. vertical-align: baseline;
  61. }
  62. .ui.table > .icon:only-child {
  63. margin: 0em;
  64. }
  65. /* table segment */
  66. .ui.table.segment:after {
  67. display: none;
  68. }
  69. .ui.table.segment.stacked:after {
  70. display: block;
  71. }
  72. /*******************************
  73. States
  74. *******************************/
  75. /*--------------
  76. Hover
  77. ---------------*/
  78. /* Celled */
  79. .ui.celled.table tr:hover td {
  80. background-color: rgba(0, 0, 0, 0.02);
  81. color: #000000;
  82. }
  83. /* Sortable */
  84. .ui.sortable.table thead th:hover {
  85. background-image: none;
  86. background-color: rgba(0, 0, 0, 0.04);
  87. color: #333333;
  88. }
  89. .ui.sortable.table th.disabled:hover {
  90. cursor: auto;
  91. background-color: rgba(0, 0, 0, 0.1);
  92. text-align: left;
  93. font-weight: bold;
  94. color: #333333;
  95. color: rgba(0, 0, 0, 0.8);
  96. }
  97. /*--------------
  98. Positive
  99. ---------------*/
  100. .ui.table tr.positive td,
  101. .ui.table td.positive {
  102. background-color: #F2F8F0 !important;
  103. color: #119000;
  104. -moz-box-shadow: 0px 0px 1px 0px #3FF63B inset;
  105. -webkit-box-shadow: 0px 0px 1px 0px #3FF63B inset;
  106. box-shadow: 0px 0px 1px 0px #3FF63B inset;
  107. /* border-color: #2FCB05 !important; */
  108. }
  109. .ui.celled.table tr.positive:hover td,
  110. .ui.celled.table tr:hover td.positive,
  111. .ui.table tr.positive:hover td,
  112. .ui.table td:hover.positive,
  113. .ui.table th:hover.positive {
  114. background-color: #ECF5E9 !important;
  115. color: #119000;
  116. }
  117. /*--------------
  118. Negative
  119. ---------------*/
  120. .ui.table tr.negative td,
  121. .ui.table td.negative {
  122. background-color: #F9F4F4;
  123. color: #CD2929;
  124. }
  125. .ui.celled.table tr.negative:hover td,
  126. .ui.celled.table tr:hover td.negative,
  127. .ui.table tr.negative:hover td,
  128. .ui.table td:hover.negative,
  129. .ui.table th:hover.negative {
  130. background-color: #F2E8E8 !important;
  131. color: #CD2929;
  132. }
  133. /*--------------
  134. Error
  135. ---------------*/
  136. .ui.table tr.error td,
  137. .ui.table td.error,
  138. .ui.table th.error {
  139. background-color: #F9F4F4 !important;
  140. color: #CD2929;
  141. -moz-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
  142. -webkit-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
  143. box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
  144. }
  145. .ui.celled.table tr.error:hover td,
  146. .ui.celled.table tr:hover td.error,
  147. .ui.table tr.error:hover td,
  148. .ui.table td:hover.error,
  149. .ui.table th:hover.error {
  150. background-color: #F2E8E8 !important;
  151. color: #CD2929;
  152. }
  153. /*--------------
  154. Warning
  155. ---------------*/
  156. .ui.table tr.warning td,
  157. .ui.table td.warning,
  158. .ui.table th.warning {
  159. background-color: #FBF6E9;
  160. /* border-color: #CBB105 !important; */
  161. color: #7D6C00;
  162. -moz-box-shadow: 0px 0px 1px 0px #FFE569 inset;
  163. -webkit-box-shadow: 0px 0px 1px 0px #FFE569 inset;
  164. box-shadow: 0px 0px 1px 0px #FFE569 inset;
  165. }
  166. .ui.celled.table tr.warning:hover td,
  167. .ui.celled.table tr:hover td.warning,
  168. .ui.table tr.warning:hover td,
  169. .ui.table td:hover.warning,
  170. .ui.table th:hover.warning {
  171. background-color: #F3EDDC !important;
  172. color: #7D6C00;
  173. }
  174. /*--------------
  175. Active
  176. ---------------*/
  177. .ui.table tr.active td,
  178. .ui.table tr td.active {
  179. background-color: #F0F0F0 !important;
  180. color: rgba(50, 50, 50, 0.9);
  181. /* border-color: rgba(0, 0, 0, 0.15) !important; */
  182. }
  183. /*--------------
  184. Disabled
  185. ---------------*/
  186. .ui.table tr.disabled td,
  187. .ui.table tr td.disabled,
  188. .ui.table tr.disabled:hover td,
  189. .ui.table tr:hover td.disabled {
  190. color: rgba(150, 150, 150, 0.3);
  191. }
  192. /*******************************
  193. Variations
  194. *******************************/
  195. /*--------------
  196. Celled
  197. ---------------*/
  198. .ui.celled.table {
  199. color: rgba(25, 25, 25, 0.9);
  200. }
  201. .ui.celled.table tbody tr,
  202. .ui.celled.table tfoot tr {
  203. border: none;
  204. }
  205. .ui.celled.table th {
  206. border: 1px solid #E0E0E0;
  207. }
  208. .ui.celled.table tbody td {
  209. border: 1px solid #E0E0E0;
  210. }
  211. /* Sortable Table */
  212. .ui.sortable.table thead th {
  213. cursor: pointer;
  214. color: #555555;
  215. vertical-align: top;
  216. }
  217. .ui.sortable.table thead th.sorted,
  218. .ui.sortable.table thead th.sorted:hover {
  219. background-color: rgba(0, 0, 0, 0.8);
  220. color: #EEEEEE;
  221. }
  222. .ui.sortable.table thead th:after {
  223. display: inline-block;
  224. content: '';
  225. width: 1em;
  226. opacity: 0.5;
  227. margin: 0px 0px 0px 8px;
  228. font-size: 18px;
  229. line-height: 12px;
  230. font-family: 'Icons';
  231. font-style: normal;
  232. font-weight: normal;
  233. text-decoration: inherit;
  234. vertical-align: middle;
  235. vertical-align: calc();
  236. }
  237. .ui.sortable.table thead th.ascending:after {
  238. content: '\25b4';
  239. }
  240. .ui.sortable.table thead th.descending:after {
  241. content: '\25be';
  242. }
  243. /*--------------
  244. Inverted
  245. ---------------*/
  246. .ui.inverted.table tbody tr:nth-child(2n) {
  247. background-color: rgba(255, 255, 255, 0.06);
  248. }
  249. /*--------------
  250. Collapsing
  251. ---------------*/
  252. .ui.collapsing.table {
  253. width: auto;
  254. }
  255. /*--------------
  256. Padded
  257. ---------------*/
  258. .ui.padded.table th,
  259. .ui.padded.table td {
  260. padding: 0.8em 1em;
  261. }
  262. .ui.compact.table th {
  263. padding: 0.3em 0.5em;
  264. }
  265. .ui.compact.table td {
  266. padding: 0.2em 0.5em;
  267. }
  268. /*--------------
  269. Sizes
  270. ---------------*/
  271. /* Small */
  272. .ui.small.table {
  273. font-size: 14px;
  274. }
  275. /* Standard */
  276. .ui.table {
  277. font-size: 16px;
  278. }
  279. /* Large */
  280. .ui.large.table {
  281. font-size: 18px;
  282. }