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.

521 lines
9.1 KiB

10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * git://github.com/Semantic-Org/Semantic-UI.git#1.0
  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. 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.1rem;
  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: block;
  124. text-align: center;
  125. margin: 2rem 0em 1rem;
  126. }
  127. .ui.icon.header:first-child {
  128. margin-top: 0em;
  129. }
  130. .ui.icon.header .icon {
  131. float: none;
  132. display: block;
  133. width: auto;
  134. height: auto;
  135. padding: 0em;
  136. font-size: 3em;
  137. margin: 0em auto 0.25rem;
  138. opacity: 1;
  139. }
  140. .ui.icon.header .content {
  141. display: block;
  142. }
  143. .ui.icon.header .circular.icon {
  144. font-size: 2em;
  145. }
  146. .ui.icon.header .square.icon {
  147. font-size: 2em;
  148. }
  149. .ui.block.icon.header .icon {
  150. margin-bottom: 0em;
  151. }
  152. .ui.icon.header.aligned {
  153. margin-left: auto;
  154. margin-right: auto;
  155. display: block;
  156. }
  157. /*******************************
  158. States
  159. *******************************/
  160. .ui.disabled.header {
  161. opacity: 0.3;
  162. }
  163. /*******************************
  164. Variations
  165. *******************************/
  166. /*-------------------
  167. Colors
  168. --------------------*/
  169. .ui.black.header {
  170. color: #1b1c1d !important;
  171. }
  172. a.ui.black.header:hover {
  173. color: #222425 !important;
  174. }
  175. .ui.blue.header {
  176. color: #3b83c0 !important;
  177. }
  178. a.ui.blue.header:hover {
  179. color: #458ac6 !important;
  180. }
  181. .ui.green.header {
  182. color: #5bbd72 !important;
  183. }
  184. a.ui.green.header:hover {
  185. color: #66c17b !important;
  186. }
  187. .ui.orange.header {
  188. color: #e07b53 !important;
  189. }
  190. a.ui.orange.header:hover {
  191. color: #e28560 !important;
  192. }
  193. .ui.pink.header {
  194. color: #d9499a !important;
  195. }
  196. a.ui.pink.header:hover {
  197. color: #dc56a1 !important;
  198. }
  199. .ui.purple.header {
  200. color: #564f8a !important;
  201. }
  202. a.ui.purple.header:hover {
  203. color: #5c5594 !important;
  204. }
  205. .ui.red.header {
  206. color: #d95c5c !important;
  207. }
  208. a.ui.red.header:hover {
  209. color: #dc6868 !important;
  210. }
  211. .ui.teal.header {
  212. color: #00b5ad !important;
  213. }
  214. a.ui.teal.header:hover {
  215. color: #00c4bc !important;
  216. }
  217. .ui.yellow.header {
  218. color: #f2c61f !important;
  219. }
  220. a.ui.yellow.header:hover {
  221. color: #f3ca2d !important;
  222. }
  223. .ui.black.dividing.header {
  224. border-bottom: 2px solid #1b1c1d;
  225. }
  226. .ui.blue.dividing.header {
  227. border-bottom: 2px solid #3b83c0;
  228. }
  229. .ui.green.dividing.header {
  230. border-bottom: 2px solid #5bbd72;
  231. }
  232. .ui.orange.dividing.header {
  233. border-bottom: 2px solid #e07b53;
  234. }
  235. .ui.pink.dividing.header {
  236. border-bottom: 2px solid #d9499a;
  237. }
  238. .ui.purple.dividing.header {
  239. border-bottom: 2px solid #564f8a;
  240. }
  241. .ui.red.dividing.header {
  242. border-bottom: 2px solid #d95c5c;
  243. }
  244. .ui.teal.dividing.header {
  245. border-bottom: 2px solid #00b5ad;
  246. }
  247. .ui.yellow.dividing.header {
  248. border-bottom: 2px solid #f2c61f;
  249. }
  250. /*-------------------
  251. Inverted
  252. --------------------*/
  253. .ui.inverted.header {
  254. color: #ffffff;
  255. }
  256. .ui.inverted.header .sub.header {
  257. color: rgba(255, 255, 255, 0.85);
  258. }
  259. .ui.inverted.attached.header {
  260. background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  261. background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  262. box-shadow: none;
  263. }
  264. .ui.inverted.block.header {
  265. background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  266. background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  267. box-shadow: none;
  268. }
  269. /*-------------------
  270. Inverted Colors
  271. --------------------*/
  272. .ui.inverted.black.header {
  273. color: #aaaaaa !important;
  274. }
  275. a.ui.inverted.black.header:hover {
  276. color: #b2b2b2 !important;
  277. }
  278. .ui.inverted.blue.header {
  279. color: #54c8ff !important;
  280. }
  281. a.ui.inverted.blue.header:hover {
  282. color: #63cdff !important;
  283. }
  284. .ui.inverted.green.header {
  285. color: #2ecc40 !important;
  286. }
  287. a.ui.inverted.green.header:hover {
  288. color: #37d249 !important;
  289. }
  290. .ui.inverted.orange.header {
  291. color: #ff851b !important;
  292. }
  293. a.ui.inverted.orange.header:hover {
  294. color: #ff8d2a !important;
  295. }
  296. .ui.inverted.pink.header {
  297. color: #ff8edf !important;
  298. }
  299. a.ui.inverted.pink.header:hover {
  300. color: #ff9de3 !important;
  301. }
  302. .ui.inverted.purple.header {
  303. color: #cdc6ff !important;
  304. }
  305. a.ui.inverted.purple.header:hover {
  306. color: #dad5ff !important;
  307. }
  308. .ui.inverted.red.header {
  309. color: #ff695e !important;
  310. }
  311. a.ui.inverted.red.header:hover {
  312. color: #ff776d !important;
  313. }
  314. .ui.inverted.teal.header {
  315. color: #6dffff !important;
  316. }
  317. a.ui.inverted.teal.header:hover {
  318. color: #7cffff !important;
  319. }
  320. .ui.inverted.yellow.header {
  321. color: #ffe21f !important;
  322. }
  323. a.ui.inverted.yellow.header:hover {
  324. color: #ffe42e !important;
  325. }
  326. .ui.inverted.block.header {
  327. border-bottom: none;
  328. }
  329. /*-------------------
  330. Aligned
  331. --------------------*/
  332. .ui.left.aligned.header {
  333. text-align: left;
  334. }
  335. .ui.right.aligned.header {
  336. text-align: right;
  337. }
  338. .ui.centered.header,
  339. .ui.center.aligned.header {
  340. text-align: center;
  341. }
  342. .ui.justified.header {
  343. text-align: justify;
  344. }
  345. .ui.justified.header:after {
  346. display: inline-block;
  347. content: '';
  348. width: 100%;
  349. }
  350. /*-------------------
  351. Floated
  352. --------------------*/
  353. .ui.floated.header,
  354. .ui.left.floated.header {
  355. float: left;
  356. margin-top: 0em;
  357. margin-right: 0.5em;
  358. }
  359. .ui.right.floated.header {
  360. float: right;
  361. margin-top: 0em;
  362. margin-left: 0.5em;
  363. }
  364. /*-------------------
  365. Fittted
  366. --------------------*/
  367. .ui.fitted.header {
  368. padding: 0em;
  369. }
  370. /*-------------------
  371. Dividing
  372. --------------------*/
  373. .ui.dividing.header {
  374. padding-bottom: 0.5rem;
  375. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  376. }
  377. .ui.dividing.header .sub.header {
  378. padding-bottom: 0.5rem;
  379. }
  380. .ui.dividing.header .icon {
  381. margin-bottom: 0.2em;
  382. }
  383. .ui.inverted.dividing.header {
  384. border-bottom-color: rgba(255, 255, 255, 0.2);
  385. }
  386. /*-------------------
  387. Block
  388. --------------------*/
  389. .ui.block.header {
  390. background: #f0f0f0;
  391. padding: 0.75rem 1rem;
  392. box-shadow: none;
  393. border: 1px solid #d4d4d5;
  394. border-radius: 0.3125rem;
  395. }
  396. .ui.tiny.block.header {
  397. font-size: 1em;
  398. }
  399. .ui.small.block.header {
  400. font-size: 1.071em;
  401. }
  402. .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  403. font-size: 1.285em;
  404. }
  405. .ui.large.block.header {
  406. font-size: 1.714em;
  407. }
  408. .ui.huge.block.header {
  409. font-size: 2em;
  410. }
  411. /*-------------------
  412. Attached
  413. --------------------*/
  414. .ui.attached.header {
  415. background: #ffffff;
  416. padding: 0.75rem 1rem;
  417. margin-left: -1px;
  418. margin-right: -1px;
  419. box-shadow: none;
  420. border: 1px solid #d4d4d5;
  421. }
  422. .ui.attached.block.header {
  423. background: #f0f0f0;
  424. }
  425. .ui.attached:not(.top):not(.bottom).header {
  426. margin-top: 0em;
  427. margin-bottom: 0em;
  428. border-top: none;
  429. border-bottom: none;
  430. border-radius: 0em;
  431. }
  432. .ui.top.attached.header {
  433. margin-bottom: 0em;
  434. border-bottom: none;
  435. border-radius: 0.3125rem 0.3125rem 0em 0em;
  436. }
  437. .ui.bottom.attached.header {
  438. margin-top: 0em;
  439. border-top: none;
  440. border-radius: 0em 0em 0.3125rem 0.3125rem;
  441. }
  442. /* Attached Sizes */
  443. .ui.tiny.attached.header {
  444. font-size: 0.875em;
  445. }
  446. .ui.small.attached.header {
  447. font-size: 0.9em;
  448. }
  449. .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  450. font-size: 1em;
  451. }
  452. .ui.large.attached.header {
  453. font-size: 1.1em;
  454. }
  455. .ui.huge.attached.header {
  456. font-size: 1.2em;
  457. }
  458. /*-------------------
  459. Sizing
  460. --------------------*/
  461. .ui.header {
  462. font-size: 1.285em;
  463. }
  464. /*******************************
  465. Theme Overrides
  466. *******************************/
  467. /*******************************
  468. Site Overrides
  469. *******************************/