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.

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