header.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727
  1. /*!
  2. * # Semantic UI 2.4.2 - 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.14285714em ) 0em 1rem;
  17. padding: 0em 0em;
  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: 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: 0em;
  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: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: 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.71428571rem;
  115. }
  116. h3.ui.header {
  117. font-size: 1.28571429rem;
  118. }
  119. h4.ui.header {
  120. font-size: 1.07142857rem;
  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.71428571em;
  150. }
  151. .ui.medium.header {
  152. font-size: 1.28571429em;
  153. }
  154. .ui.small.header {
  155. font-size: 1.07142857em;
  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-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  266. background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  267. background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  268. -webkit-box-shadow: none;
  269. box-shadow: none;
  270. border-color: transparent;
  271. }
  272. .ui.inverted.block.header {
  273. background: #545454 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  274. background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  275. background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  276. -webkit-box-shadow: none;
  277. box-shadow: none;
  278. }
  279. .ui.inverted.block.header {
  280. border-bottom: none;
  281. }
  282. /*-------------------
  283. Colors
  284. --------------------*/
  285. /*--- Red ---*/
  286. .ui.red.header {
  287. color: #DB2828 !important;
  288. }
  289. a.ui.red.header:hover {
  290. color: #d01919 !important;
  291. }
  292. .ui.red.dividing.header {
  293. border-bottom: 2px solid #DB2828;
  294. }
  295. /* Inverted */
  296. .ui.inverted.red.header {
  297. color: #FF695E !important;
  298. }
  299. a.ui.inverted.red.header:hover {
  300. color: #ff5144 !important;
  301. }
  302. /*--- Orange ---*/
  303. .ui.orange.header {
  304. color: #F2711C !important;
  305. }
  306. a.ui.orange.header:hover {
  307. color: #f26202 !important;
  308. }
  309. .ui.orange.dividing.header {
  310. border-bottom: 2px solid #F2711C;
  311. }
  312. /* Inverted */
  313. .ui.inverted.orange.header {
  314. color: #FF851B !important;
  315. }
  316. a.ui.inverted.orange.header:hover {
  317. color: #ff7701 !important;
  318. }
  319. /*--- Olive ---*/
  320. .ui.olive.header {
  321. color: #B5CC18 !important;
  322. }
  323. a.ui.olive.header:hover {
  324. color: #a7bd0d !important;
  325. }
  326. .ui.olive.dividing.header {
  327. border-bottom: 2px solid #B5CC18;
  328. }
  329. /* Inverted */
  330. .ui.inverted.olive.header {
  331. color: #D9E778 !important;
  332. }
  333. a.ui.inverted.olive.header:hover {
  334. color: #d8ea5c !important;
  335. }
  336. /*--- Yellow ---*/
  337. .ui.yellow.header {
  338. color: #FBBD08 !important;
  339. }
  340. a.ui.yellow.header:hover {
  341. color: #eaae00 !important;
  342. }
  343. .ui.yellow.dividing.header {
  344. border-bottom: 2px solid #FBBD08;
  345. }
  346. /* Inverted */
  347. .ui.inverted.yellow.header {
  348. color: #FFE21F !important;
  349. }
  350. a.ui.inverted.yellow.header:hover {
  351. color: #ffdf05 !important;
  352. }
  353. /*--- Green ---*/
  354. .ui.green.header {
  355. color: #21BA45 !important;
  356. }
  357. a.ui.green.header:hover {
  358. color: #16ab39 !important;
  359. }
  360. .ui.green.dividing.header {
  361. border-bottom: 2px solid #21BA45;
  362. }
  363. /* Inverted */
  364. .ui.inverted.green.header {
  365. color: #2ECC40 !important;
  366. }
  367. a.ui.inverted.green.header:hover {
  368. color: #22be34 !important;
  369. }
  370. /*--- Teal ---*/
  371. .ui.teal.header {
  372. color: #00B5AD !important;
  373. }
  374. a.ui.teal.header:hover {
  375. color: #009c95 !important;
  376. }
  377. .ui.teal.dividing.header {
  378. border-bottom: 2px solid #00B5AD;
  379. }
  380. /* Inverted */
  381. .ui.inverted.teal.header {
  382. color: #6DFFFF !important;
  383. }
  384. a.ui.inverted.teal.header:hover {
  385. color: #54ffff !important;
  386. }
  387. /*--- Blue ---*/
  388. .ui.blue.header {
  389. color: #2185D0 !important;
  390. }
  391. a.ui.blue.header:hover {
  392. color: #1678c2 !important;
  393. }
  394. .ui.blue.dividing.header {
  395. border-bottom: 2px solid #2185D0;
  396. }
  397. /* Inverted */
  398. .ui.inverted.blue.header {
  399. color: #54C8FF !important;
  400. }
  401. a.ui.inverted.blue.header:hover {
  402. color: #3ac0ff !important;
  403. }
  404. /*--- Violet ---*/
  405. .ui.violet.header {
  406. color: #6435C9 !important;
  407. }
  408. a.ui.violet.header:hover {
  409. color: #5829bb !important;
  410. }
  411. .ui.violet.dividing.header {
  412. border-bottom: 2px solid #6435C9;
  413. }
  414. /* Inverted */
  415. .ui.inverted.violet.header {
  416. color: #A291FB !important;
  417. }
  418. a.ui.inverted.violet.header:hover {
  419. color: #8a73ff !important;
  420. }
  421. /*--- Purple ---*/
  422. .ui.purple.header {
  423. color: #A333C8 !important;
  424. }
  425. a.ui.purple.header:hover {
  426. color: #9627ba !important;
  427. }
  428. .ui.purple.dividing.header {
  429. border-bottom: 2px solid #A333C8;
  430. }
  431. /* Inverted */
  432. .ui.inverted.purple.header {
  433. color: #DC73FF !important;
  434. }
  435. a.ui.inverted.purple.header:hover {
  436. color: #d65aff !important;
  437. }
  438. /*--- Pink ---*/
  439. .ui.pink.header {
  440. color: #E03997 !important;
  441. }
  442. a.ui.pink.header:hover {
  443. color: #e61a8d !important;
  444. }
  445. .ui.pink.dividing.header {
  446. border-bottom: 2px solid #E03997;
  447. }
  448. /* Inverted */
  449. .ui.inverted.pink.header {
  450. color: #FF8EDF !important;
  451. }
  452. a.ui.inverted.pink.header:hover {
  453. color: #ff74d8 !important;
  454. }
  455. /*--- Brown ---*/
  456. .ui.brown.header {
  457. color: #A5673F !important;
  458. }
  459. a.ui.brown.header:hover {
  460. color: #975b33 !important;
  461. }
  462. .ui.brown.dividing.header {
  463. border-bottom: 2px solid #A5673F;
  464. }
  465. /* Inverted */
  466. .ui.inverted.brown.header {
  467. color: #D67C1C !important;
  468. }
  469. a.ui.inverted.brown.header:hover {
  470. color: #c86f11 !important;
  471. }
  472. /*--- Grey ---*/
  473. .ui.grey.header {
  474. color: #767676 !important;
  475. }
  476. a.ui.grey.header:hover {
  477. color: #838383 !important;
  478. }
  479. .ui.grey.dividing.header {
  480. border-bottom: 2px solid #767676;
  481. }
  482. /* Inverted */
  483. .ui.inverted.grey.header {
  484. color: #DCDDDE !important;
  485. }
  486. a.ui.inverted.grey.header:hover {
  487. color: #cfd0d2 !important;
  488. }
  489. /*-------------------
  490. Aligned
  491. --------------------*/
  492. .ui.left.aligned.header {
  493. text-align: left;
  494. }
  495. .ui.right.aligned.header {
  496. text-align: right;
  497. }
  498. .ui.centered.header,
  499. .ui.center.aligned.header {
  500. text-align: center;
  501. }
  502. .ui.justified.header {
  503. text-align: justify;
  504. }
  505. .ui.justified.header:after {
  506. display: inline-block;
  507. content: '';
  508. width: 100%;
  509. }
  510. /*-------------------
  511. Floated
  512. --------------------*/
  513. .ui.floated.header,
  514. .ui[class*="left floated"].header {
  515. float: left;
  516. margin-top: 0em;
  517. margin-right: 0.5em;
  518. }
  519. .ui[class*="right floated"].header {
  520. float: right;
  521. margin-top: 0em;
  522. margin-left: 0.5em;
  523. }
  524. /*-------------------
  525. Fitted
  526. --------------------*/
  527. .ui.fitted.header {
  528. padding: 0em;
  529. }
  530. /*-------------------
  531. Dividing
  532. --------------------*/
  533. .ui.dividing.header {
  534. padding-bottom: 0.21428571rem;
  535. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  536. }
  537. .ui.dividing.header .sub.header {
  538. padding-bottom: 0.21428571rem;
  539. }
  540. .ui.dividing.header .icon {
  541. margin-bottom: 0em;
  542. }
  543. .ui.inverted.dividing.header {
  544. border-bottom-color: rgba(255, 255, 255, 0.1);
  545. }
  546. /*-------------------
  547. Block
  548. --------------------*/
  549. .ui.block.header {
  550. background: #F3F4F5;
  551. padding: 0.78571429rem 1rem;
  552. -webkit-box-shadow: none;
  553. box-shadow: none;
  554. border: 1px solid #D4D4D5;
  555. border-radius: 0.28571429rem;
  556. }
  557. .ui.tiny.block.header {
  558. font-size: 0.85714286rem;
  559. }
  560. .ui.small.block.header {
  561. font-size: 0.92857143rem;
  562. }
  563. .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  564. font-size: 1rem;
  565. }
  566. .ui.large.block.header {
  567. font-size: 1.14285714rem;
  568. }
  569. .ui.huge.block.header {
  570. font-size: 1.42857143rem;
  571. }
  572. /*-------------------
  573. Attached
  574. --------------------*/
  575. .ui.attached.header {
  576. background: #FFFFFF;
  577. padding: 0.78571429rem 1rem;
  578. margin-left: -1px;
  579. margin-right: -1px;
  580. -webkit-box-shadow: none;
  581. box-shadow: none;
  582. border: 1px solid #D4D4D5;
  583. }
  584. .ui.attached.block.header {
  585. background: #F3F4F5;
  586. }
  587. .ui.attached:not(.top):not(.bottom).header {
  588. margin-top: 0em;
  589. margin-bottom: 0em;
  590. border-top: none;
  591. border-radius: 0em;
  592. }
  593. .ui.top.attached.header {
  594. margin-bottom: 0em;
  595. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  596. }
  597. .ui.bottom.attached.header {
  598. margin-top: 0em;
  599. border-top: none;
  600. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  601. }
  602. /* Attached Sizes */
  603. .ui.tiny.attached.header {
  604. font-size: 0.85714286em;
  605. }
  606. .ui.small.attached.header {
  607. font-size: 0.92857143em;
  608. }
  609. .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  610. font-size: 1em;
  611. }
  612. .ui.large.attached.header {
  613. font-size: 1.14285714em;
  614. }
  615. .ui.huge.attached.header {
  616. font-size: 1.42857143em;
  617. }
  618. /*-------------------
  619. Sizing
  620. --------------------*/
  621. .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  622. font-size: 1.28571429em;
  623. }
  624. /*******************************
  625. Theme Overrides
  626. *******************************/
  627. /*******************************
  628. Site Overrides
  629. *******************************/