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.

210 lines
4.1 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. line-height: 1.33;
  18. font-size: 1.33em;
  19. font-weight: bold;
  20. padding: 0em;
  21. border: none;
  22. }
  23. /* Positioning */
  24. .ui.header:first-child {
  25. margin-top: 0em;
  26. }
  27. .ui.header + p {
  28. margin-top: 0em;
  29. }
  30. /*--------------
  31. Page Heading
  32. ---------------*/
  33. h1.ui.header {
  34. min-height: 1rem;
  35. margin: 2rem 0rem 1.5rem;
  36. line-height: 1.33rem;
  37. font-size: 2rem;
  38. }
  39. h2.ui.header {
  40. margin: 1.5rem 0rem 1rem;
  41. line-height: 1.33rem;
  42. font-size: 1.5rem;
  43. }
  44. h3.ui.header {
  45. margin: 1.3rem 0rem 1rem;
  46. line-height: 1.33rem;
  47. font-size: 1.33rem;
  48. }
  49. h4.ui.header {
  50. margin: 0.75rem 0rem 0.3rem;
  51. line-height: 1.33rem;
  52. font-size: 1.1rem;
  53. }
  54. h5.ui.header {
  55. margin: 0rem 0rem 0.2rem;
  56. line-height: 1.2rem;
  57. font-size: 1rem;
  58. }
  59. /*--------------
  60. Content Heading
  61. ---------------*/
  62. .huge.ui.header {
  63. min-height: 1em;
  64. line-height: 1.33em;
  65. font-size: 2em;
  66. }
  67. .large.ui.header {
  68. line-height: 1.33em;
  69. font-size: 1.5em;
  70. }
  71. .medium.ui.header {
  72. margin-bottom: 0.25em;
  73. line-height: 1.33em;
  74. font-size: 1.25em;
  75. }
  76. .small.ui.header {
  77. margin-bottom: 0.25em;
  78. line-height: 1.33em;
  79. font-size: 1.1em;
  80. }
  81. .tiny.ui.header {
  82. margin-bottom: 0em;
  83. line-height: 1.2em;
  84. font-size: 1em;
  85. }
  86. /*******************************
  87. States
  88. *******************************/
  89. .ui.header.disabled {
  90. opacity: 0.5;
  91. }
  92. /*******************************
  93. Variations
  94. *******************************/
  95. /*-------------------
  96. Inverted
  97. --------------------*/
  98. .ui.inverted.header {
  99. background-color: #222222;
  100. padding: 0.7em 1em;
  101. color: #FFFFFF;
  102. }
  103. /*-------------------
  104. Colors
  105. --------------------*/
  106. .ui.blue.header {
  107. color: #6ECFF5 !important;
  108. }
  109. .ui.black.header {
  110. color: #5C6166 !important;
  111. }
  112. .ui.green.header {
  113. color: #A1CF64 !important;
  114. }
  115. .ui.red.header {
  116. color: #EF4D6D !important;
  117. }
  118. .ui.purple.header {
  119. color: #564F8A !important;
  120. }
  121. .ui.teal.header {
  122. color: #00B5AD !important;
  123. }
  124. /*-------------------
  125. Inverted Colors
  126. --------------------*/
  127. .ui.inverted.black.header {
  128. background-color: #5C6166 !important;
  129. color: #FFFFFF !important;
  130. }
  131. .ui.inverted.blue.header {
  132. background-color: #6ECFF5 !important;
  133. color: #FFFFFF !important;
  134. }
  135. .ui.inverted.green.header {
  136. background-color: #A1CF64 !important;
  137. color: #FFFFFF !important;
  138. }
  139. .ui.inverted.red.header {
  140. background-color: #EF4D6D !important;
  141. color: #FFFFFF !important;
  142. }
  143. .ui.inverted.purple.header {
  144. background-color: #564F8A !important;
  145. color: #FFFFFF !important;
  146. }
  147. .ui.inverted.teal.header {
  148. background-color: #00B5AD !important;
  149. color: #FFFFFF !important;
  150. }
  151. /*-------------------
  152. Aligned
  153. --------------------*/
  154. .ui.left.aligned.header {
  155. text-align: left;
  156. }
  157. .ui.right.aligned.header {
  158. text-align: right;
  159. }
  160. .ui.center.aligned.header {
  161. text-align: center;
  162. }
  163. /*-------------------
  164. Floated
  165. --------------------*/
  166. .ui.floated.header,
  167. .ui.left.floated.header {
  168. float: left;
  169. }
  170. .ui.right.floated.header {
  171. float: right;
  172. }
  173. /*-------------------
  174. Dividing
  175. --------------------*/
  176. /*-------------------
  177. Attached
  178. --------------------*/
  179. .ui.attached.header {
  180. padding: 0.7em 1rem;
  181. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  182. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  183. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  184. }
  185. .ui.top.attached.header {
  186. margin-bottom: 0em;
  187. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  188. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  189. border-radius: 0.3125em 0.3125em 0em 0em;
  190. }
  191. .ui.bottom.attached.header {
  192. margin-top: 0em;
  193. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  194. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  195. border-radius: 0em 0em 0.3125em 0.3125em;
  196. }
  197. /*-------------------
  198. Icon
  199. --------------------*/
  200. .ui.header.icon {
  201. display: inline-block;
  202. text-align: center;
  203. }
  204. .ui.header.icon .icon {
  205. display: block;
  206. font-size: 4em;
  207. width: auto;
  208. margin: 0rem auto 2rem;
  209. padding: 0em;
  210. }