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.

721 lines
12 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Header
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 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: calc(2rem - 0.14285em ) 0em 1rem;
  18. padding: 0em 0em;
  19. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  20. font-weight: bold;
  21. line-height: 1.2857em;
  22. text-transform: none;
  23. color: rgba(0, 0, 0, 0.87);
  24. }
  25. .ui.header:first-child {
  26. margin-top: -0.14285em;
  27. }
  28. .ui.header:last-child {
  29. margin-bottom: 0em;
  30. }
  31. /*--------------
  32. Sub Header
  33. ---------------*/
  34. .ui.header .sub.header {
  35. display: block;
  36. font-weight: normal;
  37. padding: 0em;
  38. margin: 0em;
  39. font-size: 1rem;
  40. line-height: 1.2em;
  41. color: rgba(0, 0, 0, 0.6);
  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.14285em;
  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.14285em;
  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. font-size: '';
  98. margin-left: 0.5rem;
  99. vertical-align: middle;
  100. }
  101. /* Positioning */
  102. .ui.header + p {
  103. margin-top: 0em;
  104. }
  105. /*******************************
  106. Types
  107. *******************************/
  108. /*--------------
  109. Page
  110. ---------------*/
  111. h1.ui.header {
  112. font-size: 2rem;
  113. }
  114. h2.ui.header {
  115. font-size: 1.714rem;
  116. }
  117. h3.ui.header {
  118. font-size: 1.28rem;
  119. }
  120. h4.ui.header {
  121. font-size: 1.071rem;
  122. }
  123. h5.ui.header {
  124. font-size: 1rem;
  125. }
  126. /* Sub Header */
  127. h1.ui.header .sub.header {
  128. font-size: 1.14285714rem;
  129. }
  130. h2.ui.header .sub.header {
  131. font-size: 1.14285714rem;
  132. }
  133. h3.ui.header .sub.header {
  134. font-size: 1rem;
  135. }
  136. h4.ui.header .sub.header {
  137. font-size: 1rem;
  138. }
  139. h5.ui.header .sub.header {
  140. font-size: 0.92857143rem;
  141. }
  142. /*--------------
  143. Content Heading
  144. ---------------*/
  145. .ui.huge.header {
  146. min-height: 1em;
  147. font-size: 2em;
  148. }
  149. .ui.large.header {
  150. font-size: 1.714em;
  151. }
  152. .ui.medium.header {
  153. font-size: 1.28em;
  154. }
  155. .ui.small.header {
  156. font-size: 1.071em;
  157. }
  158. .ui.tiny.header {
  159. font-size: 1em;
  160. }
  161. /* Sub Header */
  162. .ui.huge.header .sub.header {
  163. font-size: 1.14285714rem;
  164. }
  165. .ui.large.header .sub.header {
  166. font-size: 1.14285714rem;
  167. }
  168. .ui.header .sub.header {
  169. font-size: 1rem;
  170. }
  171. .ui.small.header .sub.header {
  172. font-size: 1rem;
  173. }
  174. .ui.tiny.header .sub.header {
  175. font-size: 0.92857143rem;
  176. }
  177. /*--------------
  178. Sub Heading
  179. ---------------*/
  180. .ui.sub.header {
  181. padding: 0em;
  182. margin-bottom: 0.14285714rem;
  183. font-weight: bold;
  184. font-size: 0.85714286em;
  185. text-transform: uppercase;
  186. color: '';
  187. }
  188. .ui.small.sub.header {
  189. font-size: 0.71428571em;
  190. }
  191. .ui.sub.header {
  192. font-size: 0.85714286em;
  193. }
  194. .ui.large.sub.header {
  195. font-size: 0.92857143em;
  196. }
  197. .ui.huge.sub.header {
  198. font-size: 1em;
  199. }
  200. /*-------------------
  201. Icon
  202. --------------------*/
  203. .ui.icon.header {
  204. display: inline-block;
  205. text-align: center;
  206. margin: 2rem 0em 1rem;
  207. }
  208. .ui.icon.header:after {
  209. content: '';
  210. display: block;
  211. height: 0px;
  212. clear: both;
  213. visibility: hidden;
  214. }
  215. .ui.icon.header:first-child {
  216. margin-top: 0em;
  217. }
  218. .ui.icon.header .icon {
  219. float: none;
  220. display: block;
  221. width: auto;
  222. height: auto;
  223. line-height: 1;
  224. padding: 0em;
  225. font-size: 3em;
  226. margin: 0em auto 0.5rem;
  227. opacity: 1;
  228. }
  229. .ui.icon.header .content {
  230. display: block;
  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. Fittted
  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.71428571rem 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.71428571rem 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. *******************************/