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.

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