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.

595 lines
10 KiB

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