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.

296 lines
5.5 KiB

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