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.

533 lines
9.4 KiB

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