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.

259 lines
5.0 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-bottom: 0.2em solid #6ECFF5;
  116. }
  117. .ui.black.block.header {
  118. /* background-color: #EAEAEA; */
  119. border-bottom: 0.2em solid #5C6166;
  120. }
  121. .ui.green.block.header {
  122. /* background-color: #EFF8E4; */
  123. border-bottom: 0.2em solid #A1CF64;
  124. }
  125. .ui.red.block.header {
  126. /* background-color: #F6E5E8; */
  127. border-bottom: 0.2em solid #EF4D6D;
  128. }
  129. .ui.purple.block.header {
  130. /* background-color: #EFEDF8; */
  131. border-bottom: 0.2em solid #564F8A;
  132. }
  133. .ui.teal.block.header {
  134. /* background-color: #E9F7F6; */
  135. border-bottom: 0.2em solid #00B5AD;
  136. }
  137. /*-------------------
  138. Inverted
  139. --------------------*/
  140. .ui.inverted.header {
  141. color: #FFFFFF;
  142. }
  143. .ui.inverted.header .sub.header {
  144. color: rgba(255, 255, 255, 0.85);
  145. }
  146. /*-------------------
  147. Inverted Colors
  148. --------------------*/
  149. .ui.inverted.black.header {
  150. background-color: #5C6166 !important;
  151. color: #FFFFFF !important;
  152. }
  153. .ui.inverted.blue.header {
  154. background-color: #6ECFF5 !important;
  155. color: #FFFFFF !important;
  156. }
  157. .ui.inverted.green.header {
  158. background-color: #A1CF64 !important;
  159. color: #FFFFFF !important;
  160. }
  161. .ui.inverted.red.header {
  162. background-color: #EF4D6D !important;
  163. color: #FFFFFF !important;
  164. }
  165. .ui.inverted.purple.header {
  166. background-color: #564F8A !important;
  167. color: #FFFFFF !important;
  168. }
  169. .ui.inverted.teal.header {
  170. background-color: #00B5AD !important;
  171. color: #FFFFFF !important;
  172. }
  173. .ui.inverted.block.header {
  174. border-bottom: none;
  175. }
  176. /*-------------------
  177. Aligned
  178. --------------------*/
  179. .ui.left.aligned.header {
  180. text-align: left;
  181. }
  182. .ui.right.aligned.header {
  183. text-align: right;
  184. }
  185. .ui.center.aligned.header {
  186. text-align: center;
  187. }
  188. /*-------------------
  189. Floated
  190. --------------------*/
  191. .ui.floated.header,
  192. .ui.left.floated.header {
  193. float: left;
  194. }
  195. .ui.right.floated.header {
  196. float: right;
  197. }
  198. /*-------------------
  199. Fittted
  200. --------------------*/
  201. .ui.fitted.header {
  202. padding: 0em;
  203. }
  204. /*-------------------
  205. Block
  206. --------------------*/
  207. .ui.block.header {
  208. background-color: #F5F5F5;
  209. padding: 0.5em 1em;
  210. }
  211. /*-------------------
  212. Dividing
  213. --------------------*/
  214. .ui.dividing.header {
  215. padding-bottom: 0.2rem;
  216. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  217. }
  218. /*-------------------
  219. Attached
  220. --------------------*/
  221. .ui.attached.header {
  222. padding: 0.5em 1rem;
  223. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  224. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  225. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  226. }
  227. .ui.top.attached.header {
  228. margin-bottom: 0em;
  229. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  230. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  231. border-radius: 0.3125em 0.3125em 0em 0em;
  232. }
  233. .ui.bottom.attached.header {
  234. margin-top: 0em;
  235. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  236. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  237. border-radius: 0em 0em 0.3125em 0.3125em;
  238. }
  239. /*-------------------
  240. Icon
  241. --------------------*/
  242. .ui.icon.header {
  243. display: inline-block;
  244. text-align: center;
  245. }
  246. .ui.icon.header .icon {
  247. display: block;
  248. font-size: 4em;
  249. margin: 0em auto 0.2em;
  250. }
  251. .ui.block.icon.header .icon {
  252. margin-bottom: 0em;
  253. }