header.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721
  1. /*!
  2. * # Semantic UI 2.2.6 - Header
  3. * http://github.com/semantic-org/semantic-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.14285em ) 0em 1rem;
  17. padding: 0em 0em;
  18. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  19. font-weight: bold;
  20. line-height: 1.2857em;
  21. text-transform: none;
  22. color: rgba(0, 0, 0, 0.87);
  23. }
  24. .ui.header:first-child {
  25. margin-top: -0.14285em;
  26. }
  27. .ui.header:last-child {
  28. margin-bottom: 0em;
  29. }
  30. /*--------------
  31. Sub Header
  32. ---------------*/
  33. .ui.header .sub.header {
  34. display: block;
  35. font-weight: normal;
  36. padding: 0em;
  37. margin: 0em;
  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.14285em;
  50. vertical-align: middle;
  51. }
  52. /* With Text Node */
  53. .ui.header .icon:only-child {
  54. display: inline-block;
  55. padding: 0em;
  56. margin-right: 0.75rem;
  57. }
  58. /*-------------------
  59. Image
  60. --------------------*/
  61. .ui.header > .image,
  62. .ui.header > img {
  63. display: inline-block;
  64. margin-top: 0.14285em;
  65. width: 2.5em;
  66. height: auto;
  67. vertical-align: middle;
  68. }
  69. .ui.header > .image: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: 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.14285714rem;
  128. }
  129. h2.ui.header .sub.header {
  130. font-size: 1.14285714rem;
  131. }
  132. h3.ui.header .sub.header {
  133. font-size: 1rem;
  134. }
  135. h4.ui.header .sub.header {
  136. font-size: 1rem;
  137. }
  138. h5.ui.header .sub.header {
  139. font-size: 0.92857143rem;
  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.14285714rem;
  163. }
  164. .ui.large.header .sub.header {
  165. font-size: 1.14285714rem;
  166. }
  167. .ui.header .sub.header {
  168. font-size: 1rem;
  169. }
  170. .ui.small.header .sub.header {
  171. font-size: 1rem;
  172. }
  173. .ui.tiny.header .sub.header {
  174. font-size: 0.92857143rem;
  175. }
  176. /*--------------
  177. Sub Heading
  178. ---------------*/
  179. .ui.sub.header {
  180. padding: 0em;
  181. margin-bottom: 0.14285714rem;
  182. font-weight: bold;
  183. font-size: 0.85714286em;
  184. text-transform: uppercase;
  185. color: '';
  186. }
  187. .ui.small.sub.header {
  188. font-size: 0.78571429em;
  189. }
  190. .ui.sub.header {
  191. font-size: 0.85714286em;
  192. }
  193. .ui.large.sub.header {
  194. font-size: 0.92857143em;
  195. }
  196. .ui.huge.sub.header {
  197. font-size: 1em;
  198. }
  199. /*-------------------
  200. Icon
  201. --------------------*/
  202. .ui.icon.header {
  203. display: inline-block;
  204. text-align: center;
  205. margin: 2rem 0em 1rem;
  206. }
  207. .ui.icon.header:after {
  208. content: '';
  209. display: block;
  210. height: 0px;
  211. clear: both;
  212. visibility: hidden;
  213. }
  214. .ui.icon.header:first-child {
  215. margin-top: 0em;
  216. }
  217. .ui.icon.header .icon {
  218. float: none;
  219. display: block;
  220. width: auto;
  221. height: auto;
  222. line-height: 1;
  223. padding: 0em;
  224. font-size: 3em;
  225. margin: 0em auto 0.5rem;
  226. opacity: 1;
  227. }
  228. .ui.icon.header .content {
  229. display: block;
  230. padding: 0em;
  231. }
  232. .ui.icon.header .circular.icon {
  233. font-size: 2em;
  234. }
  235. .ui.icon.header .square.icon {
  236. font-size: 2em;
  237. }
  238. .ui.block.icon.header .icon {
  239. margin-bottom: 0em;
  240. }
  241. .ui.icon.header.aligned {
  242. margin-left: auto;
  243. margin-right: auto;
  244. display: block;
  245. }
  246. /*******************************
  247. States
  248. *******************************/
  249. .ui.disabled.header {
  250. opacity: 0.45;
  251. }
  252. /*******************************
  253. Variations
  254. *******************************/
  255. /*-------------------
  256. Inverted
  257. --------------------*/
  258. .ui.inverted.header {
  259. color: #FFFFFF;
  260. }
  261. .ui.inverted.header .sub.header {
  262. color: rgba(255, 255, 255, 0.8);
  263. }
  264. .ui.inverted.attached.header {
  265. background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  266. background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  267. box-shadow: none;
  268. border-color: transparent;
  269. }
  270. .ui.inverted.block.header {
  271. background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  272. background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  273. box-shadow: none;
  274. }
  275. .ui.inverted.block.header {
  276. border-bottom: none;
  277. }
  278. /*-------------------
  279. Colors
  280. --------------------*/
  281. /*--- Red ---*/
  282. .ui.red.header {
  283. color: #DB2828 !important;
  284. }
  285. a.ui.red.header:hover {
  286. color: #d01919 !important;
  287. }
  288. .ui.red.dividing.header {
  289. border-bottom: 2px solid #DB2828;
  290. }
  291. /* Inverted */
  292. .ui.inverted.red.header {
  293. color: #FF695E !important;
  294. }
  295. a.ui.inverted.red.header:hover {
  296. color: #ff5144 !important;
  297. }
  298. /*--- Orange ---*/
  299. .ui.orange.header {
  300. color: #F2711C !important;
  301. }
  302. a.ui.orange.header:hover {
  303. color: #f26202 !important;
  304. }
  305. .ui.orange.dividing.header {
  306. border-bottom: 2px solid #F2711C;
  307. }
  308. /* Inverted */
  309. .ui.inverted.orange.header {
  310. color: #FF851B !important;
  311. }
  312. a.ui.inverted.orange.header:hover {
  313. color: #ff7701 !important;
  314. }
  315. /*--- Olive ---*/
  316. .ui.olive.header {
  317. color: #B5CC18 !important;
  318. }
  319. a.ui.olive.header:hover {
  320. color: #a7bd0d !important;
  321. }
  322. .ui.olive.dividing.header {
  323. border-bottom: 2px solid #B5CC18;
  324. }
  325. /* Inverted */
  326. .ui.inverted.olive.header {
  327. color: #D9E778 !important;
  328. }
  329. a.ui.inverted.olive.header:hover {
  330. color: #d8ea5c !important;
  331. }
  332. /*--- Yellow ---*/
  333. .ui.yellow.header {
  334. color: #FBBD08 !important;
  335. }
  336. a.ui.yellow.header:hover {
  337. color: #eaae00 !important;
  338. }
  339. .ui.yellow.dividing.header {
  340. border-bottom: 2px solid #FBBD08;
  341. }
  342. /* Inverted */
  343. .ui.inverted.yellow.header {
  344. color: #FFE21F !important;
  345. }
  346. a.ui.inverted.yellow.header:hover {
  347. color: #ffdf05 !important;
  348. }
  349. /*--- Green ---*/
  350. .ui.green.header {
  351. color: #21BA45 !important;
  352. }
  353. a.ui.green.header:hover {
  354. color: #16ab39 !important;
  355. }
  356. .ui.green.dividing.header {
  357. border-bottom: 2px solid #21BA45;
  358. }
  359. /* Inverted */
  360. .ui.inverted.green.header {
  361. color: #2ECC40 !important;
  362. }
  363. a.ui.inverted.green.header:hover {
  364. color: #22be34 !important;
  365. }
  366. /*--- Teal ---*/
  367. .ui.teal.header {
  368. color: #00B5AD !important;
  369. }
  370. a.ui.teal.header:hover {
  371. color: #009c95 !important;
  372. }
  373. .ui.teal.dividing.header {
  374. border-bottom: 2px solid #00B5AD;
  375. }
  376. /* Inverted */
  377. .ui.inverted.teal.header {
  378. color: #6DFFFF !important;
  379. }
  380. a.ui.inverted.teal.header:hover {
  381. color: #54ffff !important;
  382. }
  383. /*--- Blue ---*/
  384. .ui.blue.header {
  385. color: #2185D0 !important;
  386. }
  387. a.ui.blue.header:hover {
  388. color: #1678c2 !important;
  389. }
  390. .ui.blue.dividing.header {
  391. border-bottom: 2px solid #2185D0;
  392. }
  393. /* Inverted */
  394. .ui.inverted.blue.header {
  395. color: #54C8FF !important;
  396. }
  397. a.ui.inverted.blue.header:hover {
  398. color: #3ac0ff !important;
  399. }
  400. /*--- Violet ---*/
  401. .ui.violet.header {
  402. color: #6435C9 !important;
  403. }
  404. a.ui.violet.header:hover {
  405. color: #5829bb !important;
  406. }
  407. .ui.violet.dividing.header {
  408. border-bottom: 2px solid #6435C9;
  409. }
  410. /* Inverted */
  411. .ui.inverted.violet.header {
  412. color: #A291FB !important;
  413. }
  414. a.ui.inverted.violet.header:hover {
  415. color: #8a73ff !important;
  416. }
  417. /*--- Purple ---*/
  418. .ui.purple.header {
  419. color: #A333C8 !important;
  420. }
  421. a.ui.purple.header:hover {
  422. color: #9627ba !important;
  423. }
  424. .ui.purple.dividing.header {
  425. border-bottom: 2px solid #A333C8;
  426. }
  427. /* Inverted */
  428. .ui.inverted.purple.header {
  429. color: #DC73FF !important;
  430. }
  431. a.ui.inverted.purple.header:hover {
  432. color: #d65aff !important;
  433. }
  434. /*--- Pink ---*/
  435. .ui.pink.header {
  436. color: #E03997 !important;
  437. }
  438. a.ui.pink.header:hover {
  439. color: #e61a8d !important;
  440. }
  441. .ui.pink.dividing.header {
  442. border-bottom: 2px solid #E03997;
  443. }
  444. /* Inverted */
  445. .ui.inverted.pink.header {
  446. color: #FF8EDF !important;
  447. }
  448. a.ui.inverted.pink.header:hover {
  449. color: #ff74d8 !important;
  450. }
  451. /*--- Brown ---*/
  452. .ui.brown.header {
  453. color: #A5673F !important;
  454. }
  455. a.ui.brown.header:hover {
  456. color: #975b33 !important;
  457. }
  458. .ui.brown.dividing.header {
  459. border-bottom: 2px solid #A5673F;
  460. }
  461. /* Inverted */
  462. .ui.inverted.brown.header {
  463. color: #D67C1C !important;
  464. }
  465. a.ui.inverted.brown.header:hover {
  466. color: #c86f11 !important;
  467. }
  468. /*--- Grey ---*/
  469. .ui.grey.header {
  470. color: #767676 !important;
  471. }
  472. a.ui.grey.header:hover {
  473. color: #838383 !important;
  474. }
  475. .ui.grey.dividing.header {
  476. border-bottom: 2px solid #767676;
  477. }
  478. /* Inverted */
  479. .ui.inverted.grey.header {
  480. color: #DCDDDE !important;
  481. }
  482. a.ui.inverted.grey.header:hover {
  483. color: #cfd0d2 !important;
  484. }
  485. /*-------------------
  486. Aligned
  487. --------------------*/
  488. .ui.left.aligned.header {
  489. text-align: left;
  490. }
  491. .ui.right.aligned.header {
  492. text-align: right;
  493. }
  494. .ui.centered.header,
  495. .ui.center.aligned.header {
  496. text-align: center;
  497. }
  498. .ui.justified.header {
  499. text-align: justify;
  500. }
  501. .ui.justified.header:after {
  502. display: inline-block;
  503. content: '';
  504. width: 100%;
  505. }
  506. /*-------------------
  507. Floated
  508. --------------------*/
  509. .ui.floated.header,
  510. .ui[class*="left floated"].header {
  511. float: left;
  512. margin-top: 0em;
  513. margin-right: 0.5em;
  514. }
  515. .ui[class*="right floated"].header {
  516. float: right;
  517. margin-top: 0em;
  518. margin-left: 0.5em;
  519. }
  520. /*-------------------
  521. Fitted
  522. --------------------*/
  523. .ui.fitted.header {
  524. padding: 0em;
  525. }
  526. /*-------------------
  527. Dividing
  528. --------------------*/
  529. .ui.dividing.header {
  530. padding-bottom: 0.21428571rem;
  531. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  532. }
  533. .ui.dividing.header .sub.header {
  534. padding-bottom: 0.21428571rem;
  535. }
  536. .ui.dividing.header .icon {
  537. margin-bottom: 0em;
  538. }
  539. .ui.inverted.dividing.header {
  540. border-bottom-color: rgba(255, 255, 255, 0.1);
  541. }
  542. /*-------------------
  543. Block
  544. --------------------*/
  545. .ui.block.header {
  546. background: #F3F4F5;
  547. padding: 0.78571429rem 1rem;
  548. box-shadow: none;
  549. border: 1px solid #D4D4D5;
  550. border-radius: 0.28571429rem;
  551. }
  552. .ui.tiny.block.header {
  553. font-size: 0.85714286rem;
  554. }
  555. .ui.small.block.header {
  556. font-size: 0.92857143rem;
  557. }
  558. .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  559. font-size: 1rem;
  560. }
  561. .ui.large.block.header {
  562. font-size: 1.14285714rem;
  563. }
  564. .ui.huge.block.header {
  565. font-size: 1.42857143rem;
  566. }
  567. /*-------------------
  568. Attached
  569. --------------------*/
  570. .ui.attached.header {
  571. background: #FFFFFF;
  572. padding: 0.78571429rem 1rem;
  573. margin-left: -1px;
  574. margin-right: -1px;
  575. box-shadow: none;
  576. border: 1px solid #D4D4D5;
  577. }
  578. .ui.attached.block.header {
  579. background: #F3F4F5;
  580. }
  581. .ui.attached:not(.top):not(.bottom).header {
  582. margin-top: 0em;
  583. margin-bottom: 0em;
  584. border-top: none;
  585. border-radius: 0em;
  586. }
  587. .ui.top.attached.header {
  588. margin-bottom: 0em;
  589. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  590. }
  591. .ui.bottom.attached.header {
  592. margin-top: 0em;
  593. border-top: none;
  594. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  595. }
  596. /* Attached Sizes */
  597. .ui.tiny.attached.header {
  598. font-size: 0.85714286em;
  599. }
  600. .ui.small.attached.header {
  601. font-size: 0.92857143em;
  602. }
  603. .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  604. font-size: 1em;
  605. }
  606. .ui.large.attached.header {
  607. font-size: 1.14285714em;
  608. }
  609. .ui.huge.attached.header {
  610. font-size: 1.42857143em;
  611. }
  612. /*-------------------
  613. Sizing
  614. --------------------*/
  615. .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  616. font-size: 1.28em;
  617. }
  618. /*******************************
  619. Theme Overrides
  620. *******************************/
  621. /*******************************
  622. Site Overrides
  623. *******************************/