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.

572 lines
10 KiB

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