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.

621 lines
11 KiB

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
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
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 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
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
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
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
10 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
  1. /*!
  2. * # Semantic UI 2.0.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.165em ) 0em 1rem;
  18. padding: 0em 0em;
  19. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  20. font-weight: bold;
  21. line-height: 1.33em;
  22. text-transform: none;
  23. color: rgba(0, 0, 0, 0.87);
  24. }
  25. .ui.header:first-child {
  26. margin-top: -0.165em;
  27. }
  28. .ui.header:last-child {
  29. margin-bottom: 0em;
  30. }
  31. /*--------------
  32. Sub Header
  33. ---------------*/
  34. .ui.header .sub.header {
  35. font-weight: normal;
  36. padding: 0em;
  37. margin: 0em;
  38. font-size: 1.1428rem;
  39. line-height: 1.2em;
  40. color: rgba(0, 0, 0, 0.5);
  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.165em;
  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.165em;
  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.4285rem;
  128. }
  129. h2.ui.header .sub.header {
  130. font-size: 1.1428rem;
  131. }
  132. h3.ui.header .sub.header {
  133. font-size: 1.1428rem;
  134. }
  135. h4.ui.header .sub.header {
  136. font-size: 1rem;
  137. }
  138. h5.ui.header .sub.header {
  139. font-size: 0.9285rem;
  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.4285rem;
  163. }
  164. .ui.large.header .sub.header {
  165. font-size: 1.4285rem;
  166. }
  167. .ui.header .sub.header {
  168. font-size: 1.1428rem;
  169. }
  170. .ui.small.header .sub.header {
  171. font-size: 1rem;
  172. }
  173. .ui.tiny.header .sub.header {
  174. font-size: 0.9285rem;
  175. }
  176. /*--------------
  177. Sub Heading
  178. ---------------*/
  179. .ui.sub.header {
  180. padding: 0em;
  181. margin: calc(2rem - 0.165em ) 0em 0.1428rem;
  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.71428571em;
  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. padding: 0em;
  223. font-size: 3em;
  224. margin: 0em auto 0.25rem;
  225. opacity: 1;
  226. }
  227. .ui.icon.header .content {
  228. display: block;
  229. }
  230. .ui.icon.header .circular.icon {
  231. font-size: 2em;
  232. }
  233. .ui.icon.header .square.icon {
  234. font-size: 2em;
  235. }
  236. .ui.block.icon.header .icon {
  237. margin-bottom: 0em;
  238. }
  239. .ui.icon.header.aligned {
  240. margin-left: auto;
  241. margin-right: auto;
  242. display: block;
  243. }
  244. /*******************************
  245. States
  246. *******************************/
  247. .ui.disabled.header {
  248. opacity: 0.3;
  249. }
  250. /*******************************
  251. Variations
  252. *******************************/
  253. /*-------------------
  254. Colors
  255. --------------------*/
  256. .ui.black.header {
  257. color: #1b1c1d !important;
  258. }
  259. a.ui.black.header:hover {
  260. color: #23292e !important;
  261. }
  262. .ui.blue.header {
  263. color: #2185d0 !important;
  264. }
  265. a.ui.blue.header:hover {
  266. color: #1378c5 !important;
  267. }
  268. .ui.green.header {
  269. color: #21ba45 !important;
  270. }
  271. a.ui.green.header:hover {
  272. color: #13ae38 !important;
  273. }
  274. .ui.orange.header {
  275. color: #f2711c !important;
  276. }
  277. a.ui.orange.header:hover {
  278. color: #f36101 !important;
  279. }
  280. .ui.pink.header {
  281. color: #e03997 !important;
  282. }
  283. a.ui.pink.header:hover {
  284. color: #e9168d !important;
  285. }
  286. .ui.purple.header {
  287. color: #6a33c8 !important;
  288. }
  289. a.ui.purple.header:hover {
  290. color: #5c23bf !important;
  291. }
  292. .ui.red.header {
  293. color: #db2828 !important;
  294. }
  295. a.ui.red.header:hover {
  296. color: #d41616 !important;
  297. }
  298. .ui.teal.header {
  299. color: #00b5ad !important;
  300. }
  301. a.ui.teal.header:hover {
  302. color: #009c95 !important;
  303. }
  304. .ui.yellow.header {
  305. color: #fbbd08 !important;
  306. }
  307. a.ui.yellow.header:hover {
  308. color: #eaae00 !important;
  309. }
  310. .ui.black.dividing.header {
  311. border-bottom: 2px solid #1b1c1d;
  312. }
  313. .ui.blue.dividing.header {
  314. border-bottom: 2px solid #2185d0;
  315. }
  316. .ui.green.dividing.header {
  317. border-bottom: 2px solid #21ba45;
  318. }
  319. .ui.orange.dividing.header {
  320. border-bottom: 2px solid #f2711c;
  321. }
  322. .ui.pink.dividing.header {
  323. border-bottom: 2px solid #e03997;
  324. }
  325. .ui.purple.dividing.header {
  326. border-bottom: 2px solid #6a33c8;
  327. }
  328. .ui.red.dividing.header {
  329. border-bottom: 2px solid #db2828;
  330. }
  331. .ui.teal.dividing.header {
  332. border-bottom: 2px solid #00b5ad;
  333. }
  334. .ui.yellow.dividing.header {
  335. border-bottom: 2px solid #fbbd08;
  336. }
  337. /*-------------------
  338. Inverted
  339. --------------------*/
  340. .ui.inverted.header {
  341. color: #ffffff;
  342. }
  343. .ui.inverted.header .sub.header {
  344. color: rgba(255, 255, 255, 0.85);
  345. }
  346. .ui.inverted.attached.header {
  347. background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  348. background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  349. box-shadow: none;
  350. border-color: transparent;
  351. }
  352. .ui.inverted.block.header {
  353. background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  354. background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  355. box-shadow: none;
  356. }
  357. /*-------------------
  358. Inverted Colors
  359. --------------------*/
  360. .ui.inverted.black.header {
  361. color: #aaaaaa !important;
  362. }
  363. a.ui.inverted.black.header:hover {
  364. color: #beb0b0 !important;
  365. }
  366. .ui.inverted.blue.header {
  367. color: #54c8ff !important;
  368. }
  369. a.ui.inverted.blue.header:hover {
  370. color: #3ac0ff !important;
  371. }
  372. .ui.inverted.green.header {
  373. color: #2ecc40 !important;
  374. }
  375. a.ui.inverted.green.header:hover {
  376. color: #1ec231 !important;
  377. }
  378. .ui.inverted.orange.header {
  379. color: #ff851b !important;
  380. }
  381. a.ui.inverted.orange.header:hover {
  382. color: #ff7701 !important;
  383. }
  384. .ui.inverted.pink.header {
  385. color: #ff8edf !important;
  386. }
  387. a.ui.inverted.pink.header:hover {
  388. color: #ff74d8 !important;
  389. }
  390. .ui.inverted.purple.header {
  391. color: #cdc6ff !important;
  392. }
  393. a.ui.inverted.purple.header:hover {
  394. color: #b7acff !important;
  395. }
  396. .ui.inverted.red.header {
  397. color: #ff695e !important;
  398. }
  399. a.ui.inverted.red.header:hover {
  400. color: #ff5144 !important;
  401. }
  402. .ui.inverted.teal.header {
  403. color: #6dffff !important;
  404. }
  405. a.ui.inverted.teal.header:hover {
  406. color: #54ffff !important;
  407. }
  408. .ui.inverted.yellow.header {
  409. color: #ffe21f !important;
  410. }
  411. a.ui.inverted.yellow.header:hover {
  412. color: #ffdf05 !important;
  413. }
  414. .ui.inverted.block.header {
  415. border-bottom: none;
  416. }
  417. /*-------------------
  418. Aligned
  419. --------------------*/
  420. .ui.left.aligned.header {
  421. text-align: left;
  422. }
  423. .ui.right.aligned.header {
  424. text-align: right;
  425. }
  426. .ui.centered.header,
  427. .ui.center.aligned.header {
  428. text-align: center;
  429. }
  430. .ui.justified.header {
  431. text-align: justify;
  432. }
  433. .ui.justified.header:after {
  434. display: inline-block;
  435. content: '';
  436. width: 100%;
  437. }
  438. /*-------------------
  439. Floated
  440. --------------------*/
  441. .ui.floated.header,
  442. .ui[class*="left floated"].header {
  443. float: left;
  444. margin-top: 0em;
  445. margin-right: 0.5em;
  446. }
  447. .ui[class*="right floated"].header {
  448. float: right;
  449. margin-top: 0em;
  450. margin-left: 0.5em;
  451. }
  452. /*-------------------
  453. Fittted
  454. --------------------*/
  455. .ui.fitted.header {
  456. padding: 0em;
  457. }
  458. /*-------------------
  459. Dividing
  460. --------------------*/
  461. .ui.dividing.header {
  462. padding-bottom: 0.25rem;
  463. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  464. }
  465. .ui.dividing.header .sub.header {
  466. padding-bottom: 0.25rem;
  467. }
  468. .ui.dividing.header .icon {
  469. margin-bottom: 0em;
  470. }
  471. .ui.inverted.dividing.header {
  472. border-bottom-color: rgba(255, 255, 255, 0.1);
  473. }
  474. /*-------------------
  475. Block
  476. --------------------*/
  477. .ui.block.header {
  478. background: #f0f0f0;
  479. padding: 0.75rem 1rem;
  480. box-shadow: none;
  481. border: 1px solid #d4d4d5;
  482. border-radius: 0.3125rem;
  483. }
  484. .ui.tiny.block.header {
  485. font-size: 1em;
  486. }
  487. .ui.small.block.header {
  488. font-size: 1.071em;
  489. }
  490. .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  491. font-size: 1.28em;
  492. }
  493. .ui.large.block.header {
  494. font-size: 1.714em;
  495. }
  496. .ui.huge.block.header {
  497. font-size: 2em;
  498. }
  499. /*-------------------
  500. Attached
  501. --------------------*/
  502. .ui.attached.header {
  503. background: #ffffff;
  504. padding: 0.75rem 1rem;
  505. margin-left: -1px;
  506. margin-right: -1px;
  507. box-shadow: none;
  508. border: 1px solid #d4d4d5;
  509. }
  510. .ui.attached.block.header {
  511. background: #f0f0f0;
  512. }
  513. .ui.attached:not(.top):not(.bottom).header {
  514. margin-top: 0em;
  515. margin-bottom: 0em;
  516. border-top: none;
  517. border-bottom: none;
  518. border-radius: 0em;
  519. }
  520. .ui.top.attached.header {
  521. margin-bottom: 0em;
  522. border-bottom: none;
  523. border-radius: 0.3125rem 0.3125rem 0em 0em;
  524. }
  525. .ui.bottom.attached.header {
  526. margin-top: 0em;
  527. border-top: none;
  528. border-radius: 0em 0em 0.3125rem 0.3125rem;
  529. }
  530. /* Attached Sizes */
  531. .ui.tiny.attached.header {
  532. font-size: 0.8571em;
  533. }
  534. .ui.small.attached.header {
  535. font-size: 0.9285em;
  536. }
  537. .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  538. font-size: 1em;
  539. }
  540. .ui.large.attached.header {
  541. font-size: 1.0714em;
  542. }
  543. .ui.huge.attached.header {
  544. font-size: 1.1428em;
  545. }
  546. /*-------------------
  547. Sizing
  548. --------------------*/
  549. .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  550. font-size: 1.28em;
  551. }
  552. /*******************************
  553. Theme Overrides
  554. *******************************/
  555. /*******************************
  556. Site Overrides
  557. *******************************/