header.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792
  1. /*!
  2. * # Fomantic-UI - Header
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Header
  12. *******************************/
  13. /* Standard */
  14. .ui.header {
  15. border: none;
  16. margin: calc(2rem - 0.1428571428571429em) 0 1rem;
  17. padding: 0 0;
  18. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  19. font-weight: bold;
  20. line-height: 1.28571429em;
  21. text-transform: none;
  22. color: rgba(0, 0, 0, 0.87);
  23. }
  24. .ui.header:first-child {
  25. margin-top: -0.14285714em;
  26. }
  27. .ui.header:last-child {
  28. margin-bottom: 0;
  29. }
  30. /*--------------
  31. Sub Header
  32. ---------------*/
  33. .ui.header .sub.header {
  34. display: block;
  35. font-weight: normal;
  36. padding: 0;
  37. margin: 0;
  38. font-size: 1rem;
  39. line-height: 1.2em;
  40. color: rgba(0, 0, 0, 0.6);
  41. }
  42. /*--------------
  43. Icon
  44. ---------------*/
  45. .ui.header > .icon {
  46. display: table-cell;
  47. opacity: 1;
  48. font-size: 1.5em;
  49. padding-top: 0;
  50. vertical-align: middle;
  51. }
  52. /* With Text Node */
  53. .ui.header .icon:only-child {
  54. display: inline-block;
  55. padding: 0;
  56. margin-right: 0.75rem;
  57. }
  58. /*-------------------
  59. Image
  60. --------------------*/
  61. .ui.header > .image:not(.icon),
  62. .ui.header > img {
  63. display: inline-block;
  64. margin-top: 0.14285714em;
  65. width: 2.5em;
  66. height: auto;
  67. vertical-align: middle;
  68. }
  69. .ui.header > .image:not(.icon):only-child,
  70. .ui.header > img:only-child {
  71. margin-right: 0.75rem;
  72. }
  73. /*--------------
  74. Content
  75. ---------------*/
  76. .ui.header .content {
  77. display: inline-block;
  78. vertical-align: top;
  79. }
  80. /* After Image */
  81. .ui.header > img + .content,
  82. .ui.header > .image + .content {
  83. padding-left: 0.75rem;
  84. vertical-align: middle;
  85. }
  86. /* After Icon */
  87. .ui.header > .icon + .content {
  88. padding-left: 0.75rem;
  89. display: table-cell;
  90. vertical-align: middle;
  91. }
  92. /*--------------
  93. Loose Coupling
  94. ---------------*/
  95. .ui.header .ui.label {
  96. font-size: '';
  97. margin-left: 0.5rem;
  98. vertical-align: middle;
  99. }
  100. /* Positioning */
  101. .ui.header + p {
  102. margin-top: 0;
  103. }
  104. /*******************************
  105. Types
  106. *******************************/
  107. /*--------------
  108. Page
  109. ---------------*/
  110. h1.ui.header {
  111. font-size: 2rem;
  112. }
  113. h1.ui.header .sub.header {
  114. font-size: 1.14285714rem;
  115. }
  116. h2.ui.header {
  117. font-size: 1.71428571rem;
  118. }
  119. h2.ui.header .sub.header {
  120. font-size: 1.14285714rem;
  121. }
  122. h3.ui.header {
  123. font-size: 1.28571429rem;
  124. }
  125. h3.ui.header .sub.header {
  126. font-size: 1rem;
  127. }
  128. h4.ui.header {
  129. font-size: 1.07142857rem;
  130. }
  131. h4.ui.header .sub.header {
  132. font-size: 1rem;
  133. }
  134. h5.ui.header {
  135. font-size: 1rem;
  136. }
  137. h5.ui.header .sub.header {
  138. font-size: 0.92857143rem;
  139. }
  140. h6.ui.header {
  141. font-size: 0.85714286rem;
  142. }
  143. h6.ui.header .sub.header {
  144. font-size: 0.92857143rem;
  145. }
  146. /*--------------
  147. Content Heading
  148. ---------------*/
  149. .ui.mini.header {
  150. font-size: 0.85714286em;
  151. }
  152. .ui.mini.header .sub.header {
  153. font-size: 0.92857143rem;
  154. }
  155. .ui.mini.sub.header {
  156. font-size: 0.78571429em;
  157. }
  158. .ui.tiny.header {
  159. font-size: 1em;
  160. }
  161. .ui.tiny.header .sub.header {
  162. font-size: 0.92857143rem;
  163. }
  164. .ui.tiny.sub.header {
  165. font-size: 0.78571429em;
  166. }
  167. .ui.small.header {
  168. font-size: 1.07142857em;
  169. }
  170. .ui.small.header .sub.header {
  171. font-size: 1rem;
  172. }
  173. .ui.small.sub.header {
  174. font-size: 0.78571429em;
  175. }
  176. .ui.large.header {
  177. font-size: 1.71428571em;
  178. }
  179. .ui.large.header .sub.header {
  180. font-size: 1.14285714rem;
  181. }
  182. .ui.large.sub.header {
  183. font-size: 0.92857143em;
  184. }
  185. .ui.big.header {
  186. font-size: 1.85714286em;
  187. }
  188. .ui.big.header .sub.header {
  189. font-size: 1.14285714rem;
  190. }
  191. .ui.big.sub.header {
  192. font-size: 1em;
  193. }
  194. .ui.huge.header {
  195. font-size: 2em;
  196. min-height: 1em;
  197. }
  198. .ui.huge.header .sub.header {
  199. font-size: 1.14285714rem;
  200. }
  201. .ui.huge.sub.header {
  202. font-size: 1em;
  203. }
  204. .ui.massive.header {
  205. font-size: 2.28571429em;
  206. min-height: 1em;
  207. }
  208. .ui.massive.header .sub.header {
  209. font-size: 1.42857143rem;
  210. }
  211. .ui.massive.sub.header {
  212. font-size: 1.14285714em;
  213. }
  214. /*--------------
  215. Sub Heading
  216. ---------------*/
  217. .ui.sub.header {
  218. padding: 0;
  219. margin-bottom: 0.14285714rem;
  220. font-weight: bold;
  221. font-size: 0.85714286em;
  222. text-transform: uppercase;
  223. color: '';
  224. }
  225. /*-------------------
  226. Icon
  227. --------------------*/
  228. .ui.icon.header {
  229. display: inline-block;
  230. text-align: center;
  231. margin: 2rem 0 1rem;
  232. }
  233. .ui.icon.header:after {
  234. content: '';
  235. display: block;
  236. height: 0;
  237. clear: both;
  238. visibility: hidden;
  239. }
  240. .ui.icon.header:first-child {
  241. margin-top: 0;
  242. }
  243. .ui.icon.header .icon {
  244. float: none;
  245. display: block;
  246. width: auto;
  247. height: auto;
  248. line-height: 1;
  249. padding: 0;
  250. font-size: 3em;
  251. margin: 0 auto 0.5rem;
  252. opacity: 1;
  253. }
  254. .ui.icon.header .corner.icon {
  255. font-size: calc(3em * 0.45);
  256. }
  257. .ui.icon.header .content {
  258. display: block;
  259. padding: 0;
  260. }
  261. .ui.icon.header .circular.icon {
  262. font-size: 2em;
  263. }
  264. .ui.icon.header .square.icon {
  265. font-size: 2em;
  266. }
  267. .ui.block.icon.header .icon {
  268. margin-bottom: 0;
  269. }
  270. .ui.icon.header.aligned {
  271. margin-left: auto;
  272. margin-right: auto;
  273. display: block;
  274. }
  275. /*******************************
  276. States
  277. *******************************/
  278. .ui.disabled.header {
  279. opacity: 0.45;
  280. }
  281. /*******************************
  282. Variations
  283. *******************************/
  284. /*-------------------
  285. Inverted
  286. --------------------*/
  287. .ui.inverted.header {
  288. color: #FFFFFF;
  289. }
  290. .ui.inverted.header .sub.header {
  291. color: rgba(255, 255, 255, 0.8);
  292. }
  293. .ui.inverted.attached.header {
  294. background: #1B1C1D;
  295. -webkit-box-shadow: none;
  296. box-shadow: none;
  297. border-color: transparent;
  298. }
  299. .ui.inverted.block.header {
  300. background: #545454 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  301. background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  302. background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  303. -webkit-box-shadow: none;
  304. box-shadow: none;
  305. border-bottom: none;
  306. }
  307. /*-------------------
  308. Colors
  309. --------------------*/
  310. .ui.primary.header {
  311. color: #2185D0;
  312. }
  313. a.ui.primary.header:hover {
  314. color: #1678c2;
  315. }
  316. .ui.primary.dividing.header {
  317. border-bottom: 2px solid #2185D0;
  318. }
  319. .ui.inverted.primary.header.header.header {
  320. color: #54C8FF;
  321. }
  322. a.ui.inverted.primary.header.header.header:hover {
  323. color: #21b8ff;
  324. }
  325. .ui.inverted.primary.dividing.header {
  326. border-bottom: 2px solid #54C8FF;
  327. }
  328. .ui.secondary.header {
  329. color: #1B1C1D;
  330. }
  331. a.ui.secondary.header:hover {
  332. color: #27292a;
  333. }
  334. .ui.secondary.dividing.header {
  335. border-bottom: 2px solid #1B1C1D;
  336. }
  337. .ui.inverted.secondary.header.header.header {
  338. color: #545454;
  339. }
  340. a.ui.inverted.secondary.header.header.header:hover {
  341. color: #6e6e6e;
  342. }
  343. .ui.inverted.secondary.dividing.header {
  344. border-bottom: 2px solid #545454;
  345. }
  346. .ui.red.header {
  347. color: #DB2828;
  348. }
  349. a.ui.red.header:hover {
  350. color: #d01919;
  351. }
  352. .ui.red.dividing.header {
  353. border-bottom: 2px solid #DB2828;
  354. }
  355. .ui.inverted.red.header.header.header {
  356. color: #FF695E;
  357. }
  358. a.ui.inverted.red.header.header.header:hover {
  359. color: #ff392b;
  360. }
  361. .ui.inverted.red.dividing.header {
  362. border-bottom: 2px solid #FF695E;
  363. }
  364. .ui.orange.header {
  365. color: #F2711C;
  366. }
  367. a.ui.orange.header:hover {
  368. color: #f26202;
  369. }
  370. .ui.orange.dividing.header {
  371. border-bottom: 2px solid #F2711C;
  372. }
  373. .ui.inverted.orange.header.header.header {
  374. color: #FF851B;
  375. }
  376. a.ui.inverted.orange.header.header.header:hover {
  377. color: #e76b00;
  378. }
  379. .ui.inverted.orange.dividing.header {
  380. border-bottom: 2px solid #FF851B;
  381. }
  382. .ui.yellow.header {
  383. color: #FBBD08;
  384. }
  385. a.ui.yellow.header:hover {
  386. color: #eaae00;
  387. }
  388. .ui.yellow.dividing.header {
  389. border-bottom: 2px solid #FBBD08;
  390. }
  391. .ui.inverted.yellow.header.header.header {
  392. color: #FFE21F;
  393. }
  394. a.ui.inverted.yellow.header.header.header:hover {
  395. color: #ebcd00;
  396. }
  397. .ui.inverted.yellow.dividing.header {
  398. border-bottom: 2px solid #FFE21F;
  399. }
  400. .ui.olive.header {
  401. color: #B5CC18;
  402. }
  403. a.ui.olive.header:hover {
  404. color: #a7bd0d;
  405. }
  406. .ui.olive.dividing.header {
  407. border-bottom: 2px solid #B5CC18;
  408. }
  409. .ui.inverted.olive.header.header.header {
  410. color: #D9E778;
  411. }
  412. a.ui.inverted.olive.header.header.header:hover {
  413. color: #d2e745;
  414. }
  415. .ui.inverted.olive.dividing.header {
  416. border-bottom: 2px solid #D9E778;
  417. }
  418. .ui.green.header {
  419. color: #21BA45;
  420. }
  421. a.ui.green.header:hover {
  422. color: #16ab39;
  423. }
  424. .ui.green.dividing.header {
  425. border-bottom: 2px solid #21BA45;
  426. }
  427. .ui.inverted.green.header.header.header {
  428. color: #2ECC40;
  429. }
  430. a.ui.inverted.green.header.header.header:hover {
  431. color: #1ea92e;
  432. }
  433. .ui.inverted.green.dividing.header {
  434. border-bottom: 2px solid #2ECC40;
  435. }
  436. .ui.teal.header {
  437. color: #00B5AD;
  438. }
  439. a.ui.teal.header:hover {
  440. color: #009c95;
  441. }
  442. .ui.teal.dividing.header {
  443. border-bottom: 2px solid #00B5AD;
  444. }
  445. .ui.inverted.teal.header.header.header {
  446. color: #6DFFFF;
  447. }
  448. a.ui.inverted.teal.header.header.header:hover {
  449. color: #3affff;
  450. }
  451. .ui.inverted.teal.dividing.header {
  452. border-bottom: 2px solid #6DFFFF;
  453. }
  454. .ui.blue.header {
  455. color: #2185D0;
  456. }
  457. a.ui.blue.header:hover {
  458. color: #1678c2;
  459. }
  460. .ui.blue.dividing.header {
  461. border-bottom: 2px solid #2185D0;
  462. }
  463. .ui.inverted.blue.header.header.header {
  464. color: #54C8FF;
  465. }
  466. a.ui.inverted.blue.header.header.header:hover {
  467. color: #21b8ff;
  468. }
  469. .ui.inverted.blue.dividing.header {
  470. border-bottom: 2px solid #54C8FF;
  471. }
  472. .ui.violet.header {
  473. color: #6435C9;
  474. }
  475. a.ui.violet.header:hover {
  476. color: #5829bb;
  477. }
  478. .ui.violet.dividing.header {
  479. border-bottom: 2px solid #6435C9;
  480. }
  481. .ui.inverted.violet.header.header.header {
  482. color: #A291FB;
  483. }
  484. a.ui.inverted.violet.header.header.header:hover {
  485. color: #745aff;
  486. }
  487. .ui.inverted.violet.dividing.header {
  488. border-bottom: 2px solid #A291FB;
  489. }
  490. .ui.purple.header {
  491. color: #A333C8;
  492. }
  493. a.ui.purple.header:hover {
  494. color: #9627ba;
  495. }
  496. .ui.purple.dividing.header {
  497. border-bottom: 2px solid #A333C8;
  498. }
  499. .ui.inverted.purple.header.header.header {
  500. color: #DC73FF;
  501. }
  502. a.ui.inverted.purple.header.header.header:hover {
  503. color: #cf40ff;
  504. }
  505. .ui.inverted.purple.dividing.header {
  506. border-bottom: 2px solid #DC73FF;
  507. }
  508. .ui.pink.header {
  509. color: #E03997;
  510. }
  511. a.ui.pink.header:hover {
  512. color: #e61a8d;
  513. }
  514. .ui.pink.dividing.header {
  515. border-bottom: 2px solid #E03997;
  516. }
  517. .ui.inverted.pink.header.header.header {
  518. color: #FF8EDF;
  519. }
  520. a.ui.inverted.pink.header.header.header:hover {
  521. color: #ff5bd1;
  522. }
  523. .ui.inverted.pink.dividing.header {
  524. border-bottom: 2px solid #FF8EDF;
  525. }
  526. .ui.brown.header {
  527. color: #A5673F;
  528. }
  529. a.ui.brown.header:hover {
  530. color: #975b33;
  531. }
  532. .ui.brown.dividing.header {
  533. border-bottom: 2px solid #A5673F;
  534. }
  535. .ui.inverted.brown.header.header.header {
  536. color: #D67C1C;
  537. }
  538. a.ui.inverted.brown.header.header.header:hover {
  539. color: #b0620f;
  540. }
  541. .ui.inverted.brown.dividing.header {
  542. border-bottom: 2px solid #D67C1C;
  543. }
  544. .ui.grey.header {
  545. color: #767676;
  546. }
  547. a.ui.grey.header:hover {
  548. color: #838383;
  549. }
  550. .ui.grey.dividing.header {
  551. border-bottom: 2px solid #767676;
  552. }
  553. .ui.inverted.grey.header.header.header {
  554. color: #DCDDDE;
  555. }
  556. a.ui.inverted.grey.header.header.header:hover {
  557. color: #c2c4c5;
  558. }
  559. .ui.inverted.grey.dividing.header {
  560. border-bottom: 2px solid #DCDDDE;
  561. }
  562. .ui.black.header {
  563. color: #1B1C1D;
  564. }
  565. a.ui.black.header:hover {
  566. color: #27292a;
  567. }
  568. .ui.black.dividing.header {
  569. border-bottom: 2px solid #1B1C1D;
  570. }
  571. .ui.inverted.black.header.header.header {
  572. color: #545454;
  573. }
  574. a.ui.inverted.black.header.header.header:hover {
  575. color: #000000;
  576. }
  577. .ui.inverted.black.dividing.header {
  578. border-bottom: 2px solid #545454;
  579. }
  580. /*-------------------
  581. Aligned
  582. --------------------*/
  583. .ui.left.aligned.header {
  584. text-align: left;
  585. }
  586. .ui.right.aligned.header {
  587. text-align: right;
  588. }
  589. .ui.centered.header,
  590. .ui.center.aligned.header {
  591. text-align: center;
  592. }
  593. .ui.justified.header {
  594. text-align: justify;
  595. }
  596. .ui.justified.header:after {
  597. display: inline-block;
  598. content: '';
  599. width: 100%;
  600. }
  601. /*-------------------
  602. Floated
  603. --------------------*/
  604. .ui.floated.header,
  605. .ui[class*="left floated"].header {
  606. float: left;
  607. margin-top: 0;
  608. margin-right: 0.5em;
  609. }
  610. .ui[class*="right floated"].header {
  611. float: right;
  612. margin-top: 0;
  613. margin-left: 0.5em;
  614. }
  615. /*-------------------
  616. Fitted
  617. --------------------*/
  618. .ui.fitted.header {
  619. padding: 0;
  620. }
  621. /*-------------------
  622. Dividing
  623. --------------------*/
  624. .ui.dividing.header {
  625. padding-bottom: 0.21428571rem;
  626. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  627. }
  628. .ui.dividing.header .sub.header {
  629. padding-bottom: 0.21428571rem;
  630. }
  631. .ui.dividing.header .icon {
  632. margin-bottom: 0;
  633. }
  634. .ui.inverted.dividing.header {
  635. border-bottom-color: rgba(255, 255, 255, 0.1);
  636. }
  637. /*-------------------
  638. Block
  639. --------------------*/
  640. .ui.block.header {
  641. background: #F3F4F5;
  642. padding: 0.78571429rem 1rem;
  643. -webkit-box-shadow: none;
  644. box-shadow: none;
  645. border: 1px solid #D4D4D5;
  646. border-radius: 0.28571429rem;
  647. }
  648. .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  649. font-size: 1rem;
  650. }
  651. .ui.mini.block.header {
  652. font-size: 0.78571429rem;
  653. }
  654. .ui.tiny.block.header {
  655. font-size: 0.85714286rem;
  656. }
  657. .ui.small.block.header {
  658. font-size: 0.92857143rem;
  659. }
  660. .ui.large.block.header {
  661. font-size: 1.14285714rem;
  662. }
  663. .ui.big.block.header {
  664. font-size: 1.28571429rem;
  665. }
  666. .ui.huge.block.header {
  667. font-size: 1.42857143rem;
  668. }
  669. .ui.massive.block.header {
  670. font-size: 1.71428571rem;
  671. }
  672. /*-------------------
  673. Attached
  674. --------------------*/
  675. .ui.attached.header {
  676. background: #FFFFFF;
  677. padding: 0.78571429rem 1rem;
  678. margin: 0 -1px 0 -1px;
  679. -webkit-box-shadow: none;
  680. box-shadow: none;
  681. border: 1px solid #D4D4D5;
  682. border-radius: 0;
  683. }
  684. .ui.attached.block.header {
  685. background: #F3F4F5;
  686. }
  687. .ui.attached:not(.top).header {
  688. border-top: none;
  689. }
  690. .ui.top.attached.header {
  691. border-radius: 0.28571429rem 0.28571429rem 0 0;
  692. }
  693. .ui.bottom.attached.header {
  694. border-radius: 0 0 0.28571429rem 0.28571429rem;
  695. }
  696. /* Attached Sizes */
  697. .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  698. font-size: 1em;
  699. }
  700. .ui.mini.attached.header {
  701. font-size: 0.78571429em;
  702. }
  703. .ui.tiny.attached.header {
  704. font-size: 0.85714286em;
  705. }
  706. .ui.small.attached.header {
  707. font-size: 0.92857143em;
  708. }
  709. .ui.large.attached.header {
  710. font-size: 1.14285714em;
  711. }
  712. .ui.big.attached.header {
  713. font-size: 1.28571429em;
  714. }
  715. .ui.huge.attached.header {
  716. font-size: 1.42857143em;
  717. }
  718. .ui.massive.attached.header {
  719. font-size: 1.71428571em;
  720. }
  721. /*-------------------
  722. Sizing
  723. --------------------*/
  724. .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  725. font-size: 1.28571429em;
  726. }
  727. /*******************************
  728. Theme Overrides
  729. *******************************/
  730. /*******************************
  731. Site Overrides
  732. *******************************/