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.

289 lines
5.6 KiB

11 years ago
  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-right: 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-left: 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 .circular.icon,
  118. .ui.icon.header .square.icon {
  119. font-size: 2em;
  120. }
  121. .ui.block.icon.header .icon {
  122. margin-bottom: 0em;
  123. }
  124. .ui.icon.header.aligned {
  125. margin-left: auto;
  126. margin-right: auto;
  127. display: block;
  128. }
  129. /*******************************
  130. States
  131. *******************************/
  132. .ui.disabled.header {
  133. opacity: 0.5;
  134. }
  135. /*******************************
  136. Variations
  137. *******************************/
  138. /*-------------------
  139. Colors
  140. --------------------*/
  141. .ui.blue.header {
  142. color: #6ECFF5 !important;
  143. }
  144. .ui.black.header {
  145. color: #5C6166 !important;
  146. }
  147. .ui.green.header {
  148. color: #A1CF64 !important;
  149. }
  150. .ui.red.header {
  151. color: #D95C5C !important;
  152. }
  153. .ui.purple.header {
  154. color: #564F8A !important;
  155. }
  156. .ui.teal.header {
  157. color: #00B5AD !important;
  158. }
  159. .ui.blue.dividing.header {
  160. border-bottom: 3px solid #6ECFF5;
  161. }
  162. .ui.black.dividing.header {
  163. border-bottom: 3px solid #5C6166;
  164. }
  165. .ui.green.dividing.header {
  166. border-bottom: 3px solid #A1CF64;
  167. }
  168. .ui.red.dividing.header {
  169. border-bottom: 3px solid #D95C5C;
  170. }
  171. .ui.purple.dividing.header {
  172. border-bottom: 3px solid #564F8A;
  173. }
  174. .ui.teal.dividing.header {
  175. border-bottom: 3px solid #00B5AD;
  176. }
  177. /*-------------------
  178. Inverted
  179. --------------------*/
  180. .ui.inverted.header {
  181. color: #FFFFFF;
  182. }
  183. .ui.inverted.header .sub.header {
  184. color: rgba(255, 255, 255, 0.85);
  185. }
  186. /*-------------------
  187. Inverted Colors
  188. --------------------*/
  189. .ui.inverted.black.header {
  190. background-color: #5C6166 !important;
  191. color: #FFFFFF !important;
  192. }
  193. .ui.inverted.blue.header {
  194. background-color: #6ECFF5 !important;
  195. color: #FFFFFF !important;
  196. }
  197. .ui.inverted.green.header {
  198. background-color: #A1CF64 !important;
  199. color: #FFFFFF !important;
  200. }
  201. .ui.inverted.red.header {
  202. background-color: #D95C5C !important;
  203. color: #FFFFFF !important;
  204. }
  205. .ui.inverted.purple.header {
  206. background-color: #564F8A !important;
  207. color: #FFFFFF !important;
  208. }
  209. .ui.inverted.teal.header {
  210. background-color: #00B5AD !important;
  211. color: #FFFFFF !important;
  212. }
  213. .ui.inverted.block.header {
  214. border-bottom: none;
  215. }
  216. /*-------------------
  217. Aligned
  218. --------------------*/
  219. .ui.left.aligned.header {
  220. text-align: left;
  221. }
  222. .ui.right.aligned.header {
  223. text-align: right;
  224. }
  225. .ui.center.aligned.header {
  226. text-align: center;
  227. }
  228. /*-------------------
  229. Floated
  230. --------------------*/
  231. .ui.floated.header,
  232. .ui.left.floated.header {
  233. float: left;
  234. margin-top: 0em;
  235. margin-right: 0.5em;
  236. }
  237. .ui.right.floated.header {
  238. float: right;
  239. margin-top: 0em;
  240. margin-left: 0.5em;
  241. }
  242. /*-------------------
  243. Fittted
  244. --------------------*/
  245. .ui.fitted.header {
  246. padding: 0em;
  247. }
  248. /*-------------------
  249. Dividing
  250. --------------------*/
  251. .ui.dividing.header {
  252. padding-bottom: 0.2rem;
  253. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  254. }
  255. .ui.dividing.header .sub.header {
  256. padding-bottom: 0.5em;
  257. }
  258. .ui.dividing.header .icon {
  259. margin-bottom: 0.2em;
  260. }
  261. /*-------------------
  262. Block
  263. --------------------*/
  264. .ui.block.header {
  265. background-color: #F5F5F5;
  266. padding: 0.5em 1em;
  267. }
  268. /*-------------------
  269. Attached
  270. --------------------*/
  271. .ui.attached.header {
  272. background-color: #E0E0E0;
  273. padding: 0.5em 1rem;
  274. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  275. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  276. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  277. }
  278. .ui.top.attached.header {
  279. margin-bottom: 0em;
  280. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  281. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  282. border-radius: 0.3125em 0.3125em 0em 0em;
  283. }
  284. .ui.bottom.attached.header {
  285. margin-top: 0em;
  286. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  287. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  288. border-radius: 0em 0em 0.3125em 0.3125em;
  289. }