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.

254 lines
4.9 KiB

  1. /*
  2. * # Semantic Headers - 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 29 2013
  11. */
  12. /*******************************
  13. Header
  14. *******************************/
  15. /* Standard */
  16. .ui.header {
  17. border: none;
  18. margin: 1em 0em 1rem;
  19. padding: 0em;
  20. font-size: 1.33em;
  21. font-weight: bold;
  22. line-height: 1.33;
  23. }
  24. .ui.header .ui.sub.header,
  25. .ui.header .sub.header {
  26. font-size: 1rem;
  27. font-weight: normal;
  28. margin: 0em;
  29. padding: 0em;
  30. line-height: 1.2;
  31. color: rgba(0, 0, 0, 0.5);
  32. }
  33. /* Positioning */
  34. .ui.header:first-child {
  35. margin-top: 0em;
  36. }
  37. .ui.header + p {
  38. margin-top: 0em;
  39. }
  40. /*--------------
  41. Page Heading
  42. ---------------*/
  43. h1.ui.header {
  44. min-height: 1rem;
  45. line-height: 1.33;
  46. font-size: 2rem;
  47. }
  48. h2.ui.header {
  49. line-height: 1.33;
  50. font-size: 1.75rem;
  51. }
  52. h3.ui.header {
  53. line-height: 1.33;
  54. font-size: 1.33rem;
  55. }
  56. h4.ui.header {
  57. line-height: 1.33;
  58. font-size: 1.1rem;
  59. }
  60. h5.ui.header {
  61. line-height: 1.2;
  62. font-size: 1rem;
  63. }
  64. /*--------------
  65. Content Heading
  66. ---------------*/
  67. .ui.huge.header {
  68. min-height: 1em;
  69. font-size: 2em;
  70. }
  71. .ui.large.header {
  72. font-size: 1.75em;
  73. }
  74. .ui.medium.header {
  75. font-size: 1.33em;
  76. }
  77. .ui.small.header {
  78. font-size: 1.1em;
  79. }
  80. .ui.tiny.header {
  81. font-size: 1em;
  82. }
  83. /*******************************
  84. States
  85. *******************************/
  86. .ui.disabled.header {
  87. opacity: 0.5;
  88. }
  89. /*******************************
  90. Variations
  91. *******************************/
  92. /*-------------------
  93. Colors
  94. --------------------*/
  95. .ui.blue.header {
  96. color: #6ECFF5 !important;
  97. }
  98. .ui.black.header {
  99. color: #5C6166 !important;
  100. }
  101. .ui.green.header {
  102. color: #A1CF64 !important;
  103. }
  104. .ui.red.header {
  105. color: #EF4D6D !important;
  106. }
  107. .ui.purple.header {
  108. color: #564F8A !important;
  109. }
  110. .ui.teal.header {
  111. color: #00B5AD !important;
  112. }
  113. .ui.blue.block.header {
  114. /* background-color: #E6EEF1; */
  115. border-left: 0.2em solid #6ECFF5;
  116. }
  117. .ui.black.block.header {
  118. /* background-color: #EAEAEA; */
  119. border-left: 0.2em solid #5C6166;
  120. }
  121. .ui.green.block.header {
  122. /* background-color: #EFF8E4; */
  123. border-left: 0.2em solid #A1CF64;
  124. }
  125. .ui.red.block.header {
  126. /* background-color: #F6E5E8; */
  127. border-left: 0.2em solid #EF4D6D;
  128. }
  129. .ui.purple.block.header {
  130. /* background-color: #EFEDF8; */
  131. border-left: 0.2em solid #564F8A;
  132. }
  133. .ui.teal.block.header {
  134. /* background-color: #E9F7F6; */
  135. border-left: 0.2em solid #00B5AD;
  136. }
  137. /*-------------------
  138. Inverted
  139. --------------------*/
  140. .ui.inverted.header {
  141. background-color: #222222;
  142. color: #FFFFFF;
  143. }
  144. /*-------------------
  145. Inverted Colors
  146. --------------------*/
  147. .ui.inverted.black.header {
  148. background-color: #5C6166 !important;
  149. color: #FFFFFF !important;
  150. }
  151. .ui.inverted.blue.header {
  152. background-color: #6ECFF5 !important;
  153. color: #FFFFFF !important;
  154. }
  155. .ui.inverted.green.header {
  156. background-color: #A1CF64 !important;
  157. color: #FFFFFF !important;
  158. }
  159. .ui.inverted.red.header {
  160. background-color: #EF4D6D !important;
  161. color: #FFFFFF !important;
  162. }
  163. .ui.inverted.purple.header {
  164. background-color: #564F8A !important;
  165. color: #FFFFFF !important;
  166. }
  167. .ui.inverted.teal.header {
  168. background-color: #00B5AD !important;
  169. color: #FFFFFF !important;
  170. }
  171. .ui.inverted.block.header {
  172. border-left: none;
  173. }
  174. /*-------------------
  175. Aligned
  176. --------------------*/
  177. .ui.left.aligned.header {
  178. text-align: left;
  179. }
  180. .ui.right.aligned.header {
  181. text-align: right;
  182. }
  183. .ui.center.aligned.header {
  184. text-align: center;
  185. }
  186. /*-------------------
  187. Floated
  188. --------------------*/
  189. .ui.floated.header,
  190. .ui.left.floated.header {
  191. float: left;
  192. }
  193. .ui.right.floated.header {
  194. float: right;
  195. }
  196. /*-------------------
  197. Fittted
  198. --------------------*/
  199. .ui.fitted.header {
  200. padding: 0em;
  201. }
  202. /*-------------------
  203. Block
  204. --------------------*/
  205. .ui.block.header {
  206. background-color: #F5F5F5;
  207. padding: 0.5em 1em;
  208. }
  209. /*-------------------
  210. Dividing
  211. --------------------*/
  212. .ui.dividing.header {
  213. padding-bottom: 0.2rem;
  214. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  215. }
  216. /*-------------------
  217. Attached
  218. --------------------*/
  219. .ui.attached.header {
  220. padding: 0.5em 1rem;
  221. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  222. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  223. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  224. }
  225. .ui.top.attached.header {
  226. margin-bottom: 0em;
  227. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  228. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  229. border-radius: 0.3125em 0.3125em 0em 0em;
  230. }
  231. .ui.bottom.attached.header {
  232. margin-top: 0em;
  233. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  234. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  235. border-radius: 0em 0em 0.3125em 0.3125em;
  236. }
  237. /*-------------------
  238. Icon
  239. --------------------*/
  240. .ui.header.icon {
  241. display: inline-block;
  242. text-align: center;
  243. }
  244. .ui.header.icon .icon {
  245. display: block;
  246. font-size: 4em;
  247. margin: 0rem auto 2rem;
  248. }