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.

518 lines
9.1 KiB

10 years ago
  1. /*
  2. * # Semantic UI
  3. * git://github.com/Semantic-Org/Semantic-UI.git
  4. *
  5. *
  6. * Copyright 2014 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. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  18. margin: -webkit-calc(2rem - 0.165em ) 0em 1rem;
  19. margin: calc(2rem - 0.165em ) 0em 1rem;
  20. padding: 0em 0em;
  21. font-weight: bold;
  22. line-height: 1.33em;
  23. text-transform: none;
  24. color: rgba(0, 0, 0, 0.8);
  25. }
  26. .ui.header .sub.header {
  27. font-size: 1.1rem;
  28. font-weight: normal;
  29. margin: 0em;
  30. padding: 0em;
  31. line-height: 1.2em;
  32. color: rgba(0, 0, 0, 0.5);
  33. }
  34. /* Icon and Content Together */
  35. .ui.header > .icon {
  36. display: table-cell;
  37. opacity: 1;
  38. font-size: 1.5em;
  39. padding-top: 0.165em;
  40. vertical-align: middle;
  41. padding-right: 0.5rem;
  42. }
  43. .ui.header > .icon + .content {
  44. padding-left: 0.5rem;
  45. display: table-cell;
  46. }
  47. /* Only One */
  48. .ui.header .icon:only-child {
  49. display: inline-block;
  50. padding: 0em;
  51. margin-right: 0.5rem;
  52. vertical-align: baseline;
  53. }
  54. .ui.header .content {
  55. display: inline-block;
  56. vertical-align: top;
  57. }
  58. /* Positioning */
  59. .ui.header:first-child {
  60. margin-top: -0.165em;
  61. }
  62. .ui.header:last-child {
  63. margin-bottom: 0em;
  64. }
  65. .ui.header + p {
  66. margin-top: 0em;
  67. }
  68. /*--------------
  69. Page Heading
  70. ---------------*/
  71. h1.ui.header {
  72. min-height: 1rem;
  73. font-size: 2rem;
  74. }
  75. h2.ui.header {
  76. font-size: 1.714rem;
  77. }
  78. h3.ui.header {
  79. font-size: 1.28rem;
  80. }
  81. h4.ui.header {
  82. font-size: 1.071rem;
  83. }
  84. h5.ui.header {
  85. font-size: 1rem;
  86. }
  87. /*--------------
  88. Content Heading
  89. ---------------*/
  90. .ui.tiny.header {
  91. font-size: 1em;
  92. }
  93. .ui.small.header {
  94. font-size: 1.071em;
  95. }
  96. .ui.medium.header {
  97. font-size: 1.285em;
  98. }
  99. .ui.large.header {
  100. font-size: 1.714em;
  101. }
  102. .ui.huge.header {
  103. min-height: 1em;
  104. font-size: 2em;
  105. }
  106. /*--------------
  107. Loose Coupling
  108. ---------------*/
  109. .ui.header .ui.label {
  110. margin: 0em 0em 0em 0.5rem;
  111. vertical-align: middle;
  112. }
  113. /*******************************
  114. Types
  115. *******************************/
  116. /*-------------------
  117. Icon
  118. --------------------*/
  119. .ui.icon.header {
  120. display: block;
  121. text-align: center;
  122. margin: 2rem 0em 1rem;
  123. }
  124. .ui.icon.header:first-child {
  125. margin-top: 0em;
  126. }
  127. .ui.icon.header .icon {
  128. float: none;
  129. display: block;
  130. width: auto;
  131. height: auto;
  132. padding: 0em;
  133. font-size: 3em;
  134. margin: 0em auto 0.25rem;
  135. opacity: 1;
  136. }
  137. .ui.icon.header .content {
  138. display: block;
  139. }
  140. .ui.icon.header .circular.icon {
  141. font-size: 2em;
  142. }
  143. .ui.icon.header .square.icon {
  144. font-size: 2em;
  145. }
  146. .ui.block.icon.header .icon {
  147. margin-bottom: 0em;
  148. }
  149. .ui.icon.header.aligned {
  150. margin-left: auto;
  151. margin-right: auto;
  152. display: block;
  153. }
  154. /*******************************
  155. States
  156. *******************************/
  157. .ui.disabled.header {
  158. opacity: 0.3;
  159. }
  160. /*******************************
  161. Variations
  162. *******************************/
  163. /*-------------------
  164. Colors
  165. --------------------*/
  166. .ui.black.header {
  167. color: #1b1c1d !important;
  168. }
  169. a.ui.black.header:hover {
  170. color: #222425 !important;
  171. }
  172. .ui.blue.header {
  173. color: #3b83c0 !important;
  174. }
  175. a.ui.blue.header:hover {
  176. color: #458ac6 !important;
  177. }
  178. .ui.green.header {
  179. color: #5bbd72 !important;
  180. }
  181. a.ui.green.header:hover {
  182. color: #66c17b !important;
  183. }
  184. .ui.orange.header {
  185. color: #e07b53 !important;
  186. }
  187. a.ui.orange.header:hover {
  188. color: #e28560 !important;
  189. }
  190. .ui.pink.header {
  191. color: #d9499a !important;
  192. }
  193. a.ui.pink.header:hover {
  194. color: #dc56a1 !important;
  195. }
  196. .ui.purple.header {
  197. color: #564f8a !important;
  198. }
  199. a.ui.purple.header:hover {
  200. color: #5c5594 !important;
  201. }
  202. .ui.red.header {
  203. color: #d95c5c !important;
  204. }
  205. a.ui.red.header:hover {
  206. color: #dc6868 !important;
  207. }
  208. .ui.teal.header {
  209. color: #00b5ad !important;
  210. }
  211. a.ui.teal.header:hover {
  212. color: #00c4bc !important;
  213. }
  214. .ui.yellow.header {
  215. color: #f2c61f !important;
  216. }
  217. a.ui.yellow.header:hover {
  218. color: #f3ca2d !important;
  219. }
  220. .ui.black.dividing.header {
  221. border-bottom: 2px solid #1b1c1d;
  222. }
  223. .ui.blue.dividing.header {
  224. border-bottom: 2px solid #3b83c0;
  225. }
  226. .ui.green.dividing.header {
  227. border-bottom: 2px solid #5bbd72;
  228. }
  229. .ui.orange.dividing.header {
  230. border-bottom: 2px solid #e07b53;
  231. }
  232. .ui.pink.dividing.header {
  233. border-bottom: 2px solid #d9499a;
  234. }
  235. .ui.purple.dividing.header {
  236. border-bottom: 2px solid #564f8a;
  237. }
  238. .ui.red.dividing.header {
  239. border-bottom: 2px solid #d95c5c;
  240. }
  241. .ui.teal.dividing.header {
  242. border-bottom: 2px solid #00b5ad;
  243. }
  244. .ui.yellow.dividing.header {
  245. border-bottom: 2px solid #f2c61f;
  246. }
  247. /*-------------------
  248. Inverted
  249. --------------------*/
  250. .ui.inverted.header {
  251. color: #ffffff;
  252. }
  253. .ui.inverted.header .sub.header {
  254. color: rgba(255, 255, 255, 0.85);
  255. }
  256. .ui.inverted.attached.header {
  257. background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  258. background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  259. box-shadow: none;
  260. }
  261. .ui.inverted.block.header {
  262. background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  263. background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  264. box-shadow: none;
  265. }
  266. /*-------------------
  267. Inverted Colors
  268. --------------------*/
  269. .ui.inverted.black.header {
  270. color: #aaaaaa !important;
  271. }
  272. a.ui.inverted.black.header:hover {
  273. color: #b2b2b2 !important;
  274. }
  275. .ui.inverted.blue.header {
  276. color: #54c8ff !important;
  277. }
  278. a.ui.inverted.blue.header:hover {
  279. color: #63cdff !important;
  280. }
  281. .ui.inverted.green.header {
  282. color: #2ecc40 !important;
  283. }
  284. a.ui.inverted.green.header:hover {
  285. color: #37d249 !important;
  286. }
  287. .ui.inverted.orange.header {
  288. color: #ff851b !important;
  289. }
  290. a.ui.inverted.orange.header:hover {
  291. color: #ff8d2a !important;
  292. }
  293. .ui.inverted.pink.header {
  294. color: #ff8edf !important;
  295. }
  296. a.ui.inverted.pink.header:hover {
  297. color: #ff9de3 !important;
  298. }
  299. .ui.inverted.purple.header {
  300. color: #cdc6ff !important;
  301. }
  302. a.ui.inverted.purple.header:hover {
  303. color: #dad5ff !important;
  304. }
  305. .ui.inverted.red.header {
  306. color: #ff695e !important;
  307. }
  308. a.ui.inverted.red.header:hover {
  309. color: #ff776d !important;
  310. }
  311. .ui.inverted.teal.header {
  312. color: #6dffff !important;
  313. }
  314. a.ui.inverted.teal.header:hover {
  315. color: #7cffff !important;
  316. }
  317. .ui.inverted.yellow.header {
  318. color: #ffe21f !important;
  319. }
  320. a.ui.inverted.yellow.header:hover {
  321. color: #ffe42e !important;
  322. }
  323. .ui.inverted.block.header {
  324. border-bottom: none;
  325. }
  326. /*-------------------
  327. Aligned
  328. --------------------*/
  329. .ui.left.aligned.header {
  330. text-align: left;
  331. }
  332. .ui.right.aligned.header {
  333. text-align: right;
  334. }
  335. .ui.centered.header,
  336. .ui.center.aligned.header {
  337. text-align: center;
  338. }
  339. .ui.justified.header {
  340. text-align: justify;
  341. }
  342. .ui.justified.header:after {
  343. display: inline-block;
  344. content: '';
  345. width: 100%;
  346. }
  347. /*-------------------
  348. Floated
  349. --------------------*/
  350. .ui.floated.header,
  351. .ui.left.floated.header {
  352. float: left;
  353. margin-top: 0em;
  354. margin-right: 0.5em;
  355. }
  356. .ui.right.floated.header {
  357. float: right;
  358. margin-top: 0em;
  359. margin-left: 0.5em;
  360. }
  361. /*-------------------
  362. Fittted
  363. --------------------*/
  364. .ui.fitted.header {
  365. padding: 0em;
  366. }
  367. /*-------------------
  368. Dividing
  369. --------------------*/
  370. .ui.dividing.header {
  371. padding-bottom: 0.5rem;
  372. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  373. }
  374. .ui.dividing.header .sub.header {
  375. padding-bottom: 0.5rem;
  376. }
  377. .ui.dividing.header .icon {
  378. margin-bottom: 0.2em;
  379. }
  380. .ui.inverted.dividing.header {
  381. border-bottom-color: rgba(255, 255, 255, 0.2);
  382. }
  383. /*-------------------
  384. Block
  385. --------------------*/
  386. .ui.block.header {
  387. background: #f0f0f0;
  388. padding: 0.75rem 1rem;
  389. box-shadow: none;
  390. border: 1px solid #d4d4d5;
  391. border-radius: 0.3125rem;
  392. }
  393. .ui.tiny.block.header {
  394. font-size: 1em;
  395. }
  396. .ui.small.block.header {
  397. font-size: 1.071em;
  398. }
  399. .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  400. font-size: 1.285em;
  401. }
  402. .ui.large.block.header {
  403. font-size: 1.714em;
  404. }
  405. .ui.huge.block.header {
  406. font-size: 2em;
  407. }
  408. /*-------------------
  409. Attached
  410. --------------------*/
  411. .ui.attached.header {
  412. background: #ffffff;
  413. padding: 0.75rem 1rem;
  414. margin-left: -1px;
  415. margin-right: -1px;
  416. box-shadow: none;
  417. border: 1px solid #d4d4d5;
  418. }
  419. .ui.attached.block.header {
  420. background: #f0f0f0;
  421. }
  422. .ui.attached:not(.top):not(.bottom).header {
  423. margin-top: 0em;
  424. margin-bottom: 0em;
  425. border-top: none;
  426. border-bottom: none;
  427. border-radius: 0em;
  428. }
  429. .ui.top.attached.header {
  430. margin-bottom: 0em;
  431. border-bottom: none;
  432. border-radius: 0.3125rem 0.3125rem 0em 0em;
  433. }
  434. .ui.bottom.attached.header {
  435. margin-top: 0em;
  436. border-top: none;
  437. border-radius: 0em 0em 0.3125rem 0.3125rem;
  438. }
  439. /* Attached Sizes */
  440. .ui.tiny.attached.header {
  441. font-size: 0.875em;
  442. }
  443. .ui.small.attached.header {
  444. font-size: 0.9em;
  445. }
  446. .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  447. font-size: 1em;
  448. }
  449. .ui.large.attached.header {
  450. font-size: 1.1em;
  451. }
  452. .ui.huge.attached.header {
  453. font-size: 1.2em;
  454. }
  455. /*-------------------
  456. Sizing
  457. --------------------*/
  458. .ui.header {
  459. font-size: 1.285em;
  460. }
  461. /*******************************
  462. Theme Overrides
  463. *******************************/
  464. /*******************************
  465. Site Overrides
  466. *******************************/