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.

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