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.

323 lines
5.3 KiB

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