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

9 years ago
8 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
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
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
  1. /*!
  2. * # Semantic UI 2.2.0 - 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.78571429em;
  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.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. *******************************/