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.

610 lines
11 KiB

9 years ago
9 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
10 years ago
10 years ago
10 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
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 2014 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: -webkit-calc(2rem - 0.165em ) 0em 1rem;
  18. margin: calc(2rem - 0.165em ) 0em 1rem;
  19. padding: 0em 0em;
  20. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  21. font-weight: bold;
  22. line-height: 1.33em;
  23. text-transform: none;
  24. color: rgba(0, 0, 0, 0.8);
  25. }
  26. .ui.header:first-child {
  27. margin-top: -0.165em;
  28. }
  29. .ui.header:last-child {
  30. margin-bottom: 0em;
  31. }
  32. /*--------------
  33. Sub Heading
  34. ---------------*/
  35. .ui.sub.header {
  36. margin: 0em;
  37. padding: 0em;
  38. font-weight: bold;
  39. font-size: 0.85714286em;
  40. text-transform: uppercase;
  41. color: '';
  42. }
  43. /*--------------
  44. Sub Header
  45. ---------------*/
  46. .ui.header .sub.header {
  47. font-weight: normal;
  48. margin: 0em;
  49. padding: 0em;
  50. font-size: 1.1428rem;
  51. line-height: 1.2em;
  52. color: rgba(0, 0, 0, 0.5);
  53. }
  54. /*--------------
  55. Icon
  56. ---------------*/
  57. .ui.header > .icon {
  58. display: table-cell;
  59. opacity: 1;
  60. font-size: 1.5em;
  61. padding-top: 0.165em;
  62. vertical-align: middle;
  63. }
  64. /* With Text Node */
  65. .ui.header .icon:only-child {
  66. display: inline-block;
  67. padding: 0em;
  68. margin-right: 0.75rem;
  69. }
  70. /*-------------------
  71. Image
  72. --------------------*/
  73. .ui.header > .image,
  74. .ui.header > img {
  75. display: inline-block;
  76. margin-top: 0.165em;
  77. width: 2.5em;
  78. height: auto;
  79. vertical-align: middle;
  80. }
  81. .ui.header > .image:only-child,
  82. .ui.header > img:only-child {
  83. margin-right: 0.75rem;
  84. }
  85. /*--------------
  86. Content
  87. ---------------*/
  88. .ui.header .content {
  89. display: inline-block;
  90. vertical-align: top;
  91. }
  92. /* After Image */
  93. .ui.header > img + .content,
  94. .ui.header > .image + .content {
  95. padding-left: 0.75rem;
  96. vertical-align: middle;
  97. }
  98. /* After Icon */
  99. .ui.header > .icon + .content {
  100. padding-left: 0.75rem;
  101. display: table-cell;
  102. vertical-align: middle;
  103. }
  104. /*--------------
  105. Loose Coupling
  106. ---------------*/
  107. .ui.header .ui.label {
  108. font-size: '';
  109. margin-left: 0.5rem;
  110. vertical-align: middle;
  111. }
  112. /* Positioning */
  113. .ui.header + p {
  114. margin-top: 0em;
  115. }
  116. /*******************************
  117. Types
  118. *******************************/
  119. /*--------------
  120. Page
  121. ---------------*/
  122. h1.ui.header {
  123. font-size: 2rem;
  124. }
  125. h2.ui.header {
  126. font-size: 1.714rem;
  127. }
  128. h3.ui.header {
  129. font-size: 1.28rem;
  130. }
  131. h4.ui.header {
  132. font-size: 1.071rem;
  133. }
  134. h5.ui.header {
  135. font-size: 1rem;
  136. }
  137. /* Sub Header */
  138. h1.ui.header .sub.header {
  139. font-size: 1.4285rem;
  140. }
  141. h2.ui.header .sub.header {
  142. font-size: 1.1428rem;
  143. }
  144. h3.ui.header .sub.header {
  145. font-size: 1.1428rem;
  146. }
  147. h4.ui.header .sub.header {
  148. font-size: 1rem;
  149. }
  150. h5.ui.header .sub.header {
  151. font-size: 0.9285rem;
  152. }
  153. /*--------------
  154. Content Heading
  155. ---------------*/
  156. .ui.huge.header {
  157. min-height: 1em;
  158. font-size: 2em;
  159. }
  160. .ui.large.header {
  161. font-size: 1.714em;
  162. }
  163. .ui.medium.header {
  164. font-size: 1.28em;
  165. }
  166. .ui.small.header {
  167. font-size: 1.071em;
  168. }
  169. .ui.tiny.header {
  170. font-size: 1em;
  171. }
  172. /* Sub Header */
  173. .ui.huge.header .sub.header {
  174. font-size: 1.4285rem;
  175. }
  176. .ui.large.header .sub.header {
  177. font-size: 1.4285rem;
  178. }
  179. .ui.header .sub.header {
  180. font-size: 1.1428rem;
  181. }
  182. .ui.small.header .sub.header {
  183. font-size: 1rem;
  184. }
  185. .ui.tiny.header .sub.header {
  186. font-size: 0.9285rem;
  187. }
  188. /*-------------------
  189. Icon
  190. --------------------*/
  191. .ui.icon.header {
  192. display: inline-block;
  193. text-align: center;
  194. margin: 2rem 0em 1rem;
  195. }
  196. .ui.icon.header:after {
  197. content: '';
  198. display: block;
  199. height: 0px;
  200. clear: both;
  201. visibility: hidden;
  202. }
  203. .ui.icon.header:first-child {
  204. margin-top: 0em;
  205. }
  206. .ui.icon.header .icon {
  207. float: none;
  208. display: block;
  209. width: auto;
  210. height: auto;
  211. padding: 0em;
  212. font-size: 3em;
  213. margin: 0em auto 0.25rem;
  214. opacity: 1;
  215. }
  216. .ui.icon.header .content {
  217. display: block;
  218. }
  219. .ui.icon.header .circular.icon {
  220. font-size: 2em;
  221. }
  222. .ui.icon.header .square.icon {
  223. font-size: 2em;
  224. }
  225. .ui.block.icon.header .icon {
  226. margin-bottom: 0em;
  227. }
  228. .ui.icon.header.aligned {
  229. margin-left: auto;
  230. margin-right: auto;
  231. display: block;
  232. }
  233. /*******************************
  234. States
  235. *******************************/
  236. .ui.disabled.header {
  237. opacity: 0.3;
  238. }
  239. /*******************************
  240. Variations
  241. *******************************/
  242. /*-------------------
  243. Colors
  244. --------------------*/
  245. .ui.black.header {
  246. color: #1b1c1d !important;
  247. }
  248. a.ui.black.header:hover {
  249. color: #23292e !important;
  250. }
  251. .ui.blue.header {
  252. color: #3b83c0 !important;
  253. }
  254. a.ui.blue.header:hover {
  255. color: #2a77b8 !important;
  256. }
  257. .ui.green.header {
  258. color: #5bbd72 !important;
  259. }
  260. a.ui.green.header:hover {
  261. color: #3cc25c !important;
  262. }
  263. .ui.orange.header {
  264. color: #e07b53 !important;
  265. }
  266. a.ui.orange.header:hover {
  267. color: #e86532 !important;
  268. }
  269. .ui.pink.header {
  270. color: #d9499a !important;
  271. }
  272. a.ui.pink.header:hover {
  273. color: #e12890 !important;
  274. }
  275. .ui.purple.header {
  276. color: #564f8a !important;
  277. }
  278. a.ui.purple.header:hover {
  279. color: #453c83 !important;
  280. }
  281. .ui.red.header {
  282. color: #d95c5c !important;
  283. }
  284. a.ui.red.header:hover {
  285. color: #e03c3c !important;
  286. }
  287. .ui.teal.header {
  288. color: #00b5ad !important;
  289. }
  290. a.ui.teal.header:hover {
  291. color: #009c95 !important;
  292. }
  293. .ui.yellow.header {
  294. color: #f2c61f !important;
  295. }
  296. a.ui.yellow.header:hover {
  297. color: #f6c301 !important;
  298. }
  299. .ui.black.dividing.header {
  300. border-bottom: 2px solid #1b1c1d;
  301. }
  302. .ui.blue.dividing.header {
  303. border-bottom: 2px solid #3b83c0;
  304. }
  305. .ui.green.dividing.header {
  306. border-bottom: 2px solid #5bbd72;
  307. }
  308. .ui.orange.dividing.header {
  309. border-bottom: 2px solid #e07b53;
  310. }
  311. .ui.pink.dividing.header {
  312. border-bottom: 2px solid #d9499a;
  313. }
  314. .ui.purple.dividing.header {
  315. border-bottom: 2px solid #564f8a;
  316. }
  317. .ui.red.dividing.header {
  318. border-bottom: 2px solid #d95c5c;
  319. }
  320. .ui.teal.dividing.header {
  321. border-bottom: 2px solid #00b5ad;
  322. }
  323. .ui.yellow.dividing.header {
  324. border-bottom: 2px solid #f2c61f;
  325. }
  326. /*-------------------
  327. Inverted
  328. --------------------*/
  329. .ui.inverted.header {
  330. color: #ffffff;
  331. }
  332. .ui.inverted.header .sub.header {
  333. color: rgba(255, 255, 255, 0.85);
  334. }
  335. .ui.inverted.attached.header {
  336. background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  337. background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  338. box-shadow: none;
  339. border-color: transparent;
  340. }
  341. .ui.inverted.block.header {
  342. background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  343. background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  344. box-shadow: none;
  345. }
  346. /*-------------------
  347. Inverted Colors
  348. --------------------*/
  349. .ui.inverted.black.header {
  350. color: #aaaaaa !important;
  351. }
  352. a.ui.inverted.black.header:hover {
  353. color: #beb0b0 !important;
  354. }
  355. .ui.inverted.blue.header {
  356. color: #54c8ff !important;
  357. }
  358. a.ui.inverted.blue.header:hover {
  359. color: #3ac0ff !important;
  360. }
  361. .ui.inverted.green.header {
  362. color: #2ecc40 !important;
  363. }
  364. a.ui.inverted.green.header:hover {
  365. color: #1ec231 !important;
  366. }
  367. .ui.inverted.orange.header {
  368. color: #ff851b !important;
  369. }
  370. a.ui.inverted.orange.header:hover {
  371. color: #ff7701 !important;
  372. }
  373. .ui.inverted.pink.header {
  374. color: #ff8edf !important;
  375. }
  376. a.ui.inverted.pink.header:hover {
  377. color: #ff74d8 !important;
  378. }
  379. .ui.inverted.purple.header {
  380. color: #cdc6ff !important;
  381. }
  382. a.ui.inverted.purple.header:hover {
  383. color: #b7acff !important;
  384. }
  385. .ui.inverted.red.header {
  386. color: #ff695e !important;
  387. }
  388. a.ui.inverted.red.header:hover {
  389. color: #ff5144 !important;
  390. }
  391. .ui.inverted.teal.header {
  392. color: #6dffff !important;
  393. }
  394. a.ui.inverted.teal.header:hover {
  395. color: #54ffff !important;
  396. }
  397. .ui.inverted.yellow.header {
  398. color: #ffe21f !important;
  399. }
  400. a.ui.inverted.yellow.header:hover {
  401. color: #ffdf05 !important;
  402. }
  403. .ui.inverted.block.header {
  404. border-bottom: none;
  405. }
  406. /*-------------------
  407. Aligned
  408. --------------------*/
  409. .ui.left.aligned.header {
  410. text-align: left;
  411. }
  412. .ui.right.aligned.header {
  413. text-align: right;
  414. }
  415. .ui.centered.header,
  416. .ui.center.aligned.header {
  417. text-align: center;
  418. }
  419. .ui.justified.header {
  420. text-align: justify;
  421. }
  422. .ui.justified.header:after {
  423. display: inline-block;
  424. content: '';
  425. width: 100%;
  426. }
  427. /*-------------------
  428. Floated
  429. --------------------*/
  430. .ui.floated.header,
  431. .ui[class*="left floated"].header {
  432. float: left;
  433. margin-top: 0em;
  434. margin-right: 0.5em;
  435. }
  436. .ui[class*="right floated"].header {
  437. float: right;
  438. margin-top: 0em;
  439. margin-left: 0.5em;
  440. }
  441. /*-------------------
  442. Fittted
  443. --------------------*/
  444. .ui.fitted.header {
  445. padding: 0em;
  446. }
  447. /*-------------------
  448. Dividing
  449. --------------------*/
  450. .ui.dividing.header {
  451. padding-bottom: 0.25rem;
  452. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  453. }
  454. .ui.dividing.header .sub.header {
  455. padding-bottom: 0.25rem;
  456. }
  457. .ui.dividing.header .icon {
  458. margin-bottom: 0em;
  459. }
  460. .ui.inverted.dividing.header {
  461. border-bottom-color: rgba(255, 255, 255, 0.1);
  462. }
  463. /*-------------------
  464. Block
  465. --------------------*/
  466. .ui.block.header {
  467. background: #f0f0f0;
  468. padding: 0.75rem 1rem;
  469. box-shadow: none;
  470. border: 1px solid #d4d4d5;
  471. border-radius: 0.3125rem;
  472. }
  473. .ui.tiny.block.header {
  474. font-size: 1em;
  475. }
  476. .ui.small.block.header {
  477. font-size: 1.071em;
  478. }
  479. .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  480. font-size: 1.28em;
  481. }
  482. .ui.large.block.header {
  483. font-size: 1.714em;
  484. }
  485. .ui.huge.block.header {
  486. font-size: 2em;
  487. }
  488. /*-------------------
  489. Attached
  490. --------------------*/
  491. .ui.attached.header {
  492. background: #ffffff;
  493. padding: 0.75rem 1rem;
  494. margin-left: -1px;
  495. margin-right: -1px;
  496. box-shadow: none;
  497. border: 1px solid #d4d4d5;
  498. }
  499. .ui.attached.block.header {
  500. background: #f0f0f0;
  501. }
  502. .ui.attached:not(.top):not(.bottom).header {
  503. margin-top: 0em;
  504. margin-bottom: 0em;
  505. border-top: none;
  506. border-bottom: none;
  507. border-radius: 0em;
  508. }
  509. .ui.top.attached.header {
  510. margin-bottom: 0em;
  511. border-bottom: none;
  512. border-radius: 0.3125rem 0.3125rem 0em 0em;
  513. }
  514. .ui.bottom.attached.header {
  515. margin-top: 0em;
  516. border-top: none;
  517. border-radius: 0em 0em 0.3125rem 0.3125rem;
  518. }
  519. /* Attached Sizes */
  520. .ui.tiny.attached.header {
  521. font-size: 0.8571em;
  522. }
  523. .ui.small.attached.header {
  524. font-size: 0.9285em;
  525. }
  526. .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  527. font-size: 1em;
  528. }
  529. .ui.large.attached.header {
  530. font-size: 1.0714em;
  531. }
  532. .ui.huge.attached.header {
  533. font-size: 1.1428em;
  534. }
  535. /*-------------------
  536. Sizing
  537. --------------------*/
  538. .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  539. font-size: 1.28em;
  540. }
  541. /*******************************
  542. Theme Overrides
  543. *******************************/
  544. /*******************************
  545. Site Overrides
  546. *******************************/