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.

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