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.

758 lines
15 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
  1. /*
  2. * # Semantic UI - 1.7.3
  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. Standard
  13. *******************************/
  14. /*--------------
  15. Cards
  16. ---------------*/
  17. .ui.cards {
  18. margin: 1em -0.5em 0em;
  19. }
  20. .ui.cards > .card {
  21. display: block;
  22. margin: 0em 0.5em 1.5em;
  23. float: left;
  24. }
  25. .ui.cards:first-child,
  26. .ui.card:first-child {
  27. margin-top: 0em;
  28. }
  29. .ui.cards:last-child,
  30. .ui.card:last-child {
  31. margin-bottom: 0em;
  32. }
  33. /* Clearing */
  34. .ui.cards:after,
  35. .ui.card:after {
  36. display: block;
  37. content: ' ';
  38. height: 0px;
  39. clear: both;
  40. overflow: hidden;
  41. visibility: hidden;
  42. }
  43. /*--------------
  44. Card
  45. ---------------*/
  46. .ui.cards > .card,
  47. .ui.card {
  48. max-width: 100%;
  49. position: relative;
  50. display: block;
  51. width: 290px;
  52. min-height: 0px;
  53. background: #ffffff;
  54. padding: 0em;
  55. border: none;
  56. border-radius: 0.2857rem;
  57. box-shadow: 0px 0.2em 0px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5;
  58. -webkit-transition: box-shadow 0.2s ease;
  59. transition: box-shadow 0.2s ease;
  60. z-index: '';
  61. }
  62. .ui.card {
  63. margin: 1em 0em;
  64. }
  65. .ui.cards > .card a,
  66. .ui.card a {
  67. cursor: pointer;
  68. }
  69. /*--------------
  70. Rounded Edges
  71. ---------------*/
  72. .ui.cards > .card > :first-child,
  73. .ui.card > :first-child {
  74. border-radius: 0.2857rem 0.2857rem 0em 0em !important;
  75. }
  76. .ui.cards > .card > :last-child,
  77. .ui.card > :last-child {
  78. border-radius: 0em 0em 0.2857rem 0.2857rem !important;
  79. }
  80. /*--------------
  81. Images
  82. ---------------*/
  83. .ui.cards > .card > .image,
  84. .ui.card > .image {
  85. display: block;
  86. position: relative;
  87. padding: 0em;
  88. background: rgba(0, 0, 0, 0.05);
  89. }
  90. .ui.cards > .card > .image > img,
  91. .ui.card > .image > img {
  92. display: block;
  93. width: 100%;
  94. height: auto;
  95. border-radius: 0.2857rem 0.2857rem 0em 0em;
  96. border: none;
  97. }
  98. .ui.cards > .card > .image:only-child > img,
  99. .ui.card > .image:only-child > img {
  100. border-radius: 0.2857rem;
  101. }
  102. /*--------------
  103. Content
  104. ---------------*/
  105. .ui.cards > .card > .content,
  106. .ui.card > .content {
  107. background: none;
  108. margin: 0em;
  109. padding: 1em 1em;
  110. box-shadow: none;
  111. font-size: 1em;
  112. border: none;
  113. border-radius: 0em;
  114. }
  115. .ui.cards > .card > .content:after,
  116. .ui.card > .content:after {
  117. display: block;
  118. content: ' ';
  119. height: 0px;
  120. clear: both;
  121. overflow: hidden;
  122. visibility: hidden;
  123. }
  124. .ui.cards > .card > .content > .header,
  125. .ui.card > .content > .header {
  126. display: block;
  127. margin: 0em;
  128. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  129. color: rgba(0, 0, 0, 0.85);
  130. }
  131. /* Default Header Size */
  132. .ui.cards > .card > .content > .header:not(.ui),
  133. .ui.card > .content > .header:not(.ui) {
  134. font-weight: bold;
  135. font-size: 1.2em;
  136. margin-top: -0.165em;
  137. line-height: 1.33em;
  138. }
  139. .ui.cards > .card > .content > .meta + .description,
  140. .ui.cards > .card > .content > .header + .description,
  141. .ui.card > .content > .meta + .description,
  142. .ui.card > .content > .header + .description {
  143. margin-top: 0.5em;
  144. }
  145. /*--------------
  146. Floated
  147. ---------------*/
  148. .ui.cards > .card [class*="left floated"],
  149. .ui.card [class*="left floated"] {
  150. float: left;
  151. }
  152. .ui.cards > .card [class*="right floated"],
  153. .ui.card [class*="right floated"] {
  154. float: right;
  155. }
  156. /*--------------
  157. Content Image
  158. ---------------*/
  159. .ui.cards > .card .content img,
  160. .ui.card .content img {
  161. display: inline-block;
  162. vertical-align: middle;
  163. width: 2em;
  164. }
  165. .ui.cards > .card img.avatar,
  166. .ui.cards > .card .avatar img,
  167. .ui.card img.avatar,
  168. .ui.card .avatar img {
  169. width: 2em;
  170. height: 2em;
  171. border-radius: 500rem;
  172. }
  173. /*--------------
  174. Description
  175. ---------------*/
  176. .ui.cards > .card > .content > .description,
  177. .ui.card > .content > .description {
  178. clear: both;
  179. color: rgba(0, 0, 0, 0.5);
  180. }
  181. /*--------------
  182. Paragraph
  183. ---------------*/
  184. .ui.cards > .card > .content p,
  185. .ui.card > .content p {
  186. margin: 0em 0em 0.5em;
  187. }
  188. .ui.cards > .card > .content p:last-child,
  189. .ui.card > .content p:last-child {
  190. margin-bottom: 0em;
  191. }
  192. /*--------------
  193. Meta
  194. ---------------*/
  195. .ui.cards > .card .meta,
  196. .ui.card .meta {
  197. font-size: 0.9em;
  198. color: rgba(0, 0, 0, 0.4);
  199. }
  200. .ui.cards > .card .meta *,
  201. .ui.card .meta * {
  202. margin-right: 0.3em;
  203. }
  204. .ui.cards > .card .meta :last-child,
  205. .ui.card .meta :last-child {
  206. margin-right: 0em;
  207. }
  208. .ui.cards > .card .meta [class*="right floated"],
  209. .ui.card .meta [class*="right floated"] {
  210. margin-right: 0em;
  211. margin-left: 0.3em;
  212. }
  213. /*--------------
  214. Links
  215. ---------------*/
  216. /* Generic */
  217. .ui.cards > .card > .content a:not(.ui),
  218. .ui.card > .content a:not(.ui) {
  219. color: '';
  220. -webkit-transition: color 0.2s ease;
  221. transition: color 0.2s ease;
  222. }
  223. .ui.cards > .card > .content a:not(.ui):hover,
  224. .ui.card > .content a:not(.ui):hover {
  225. color: '';
  226. }
  227. /* Header */
  228. .ui.cards > .card > .content > a.header,
  229. .ui.card > .content > a.header {
  230. color: rgba(0, 0, 0, 0.85);
  231. }
  232. .ui.cards > .card > .content > a.header:hover,
  233. .ui.card > .content > a.header:hover {
  234. color: #00b2f3;
  235. }
  236. /* Meta */
  237. .ui.cards > .card .meta > a:not(.ui),
  238. .ui.card .meta > a:not(.ui) {
  239. color: rgba(0, 0, 0, 0.4);
  240. }
  241. .ui.cards > .card .meta > a:not(.ui):hover,
  242. .ui.card .meta > a:not(.ui):hover {
  243. color: rgba(0, 0, 0, 0.8);
  244. }
  245. /*--------------
  246. Buttons
  247. ---------------*/
  248. .ui.cards > .card > .buttons:last-child,
  249. .ui.card > .buttons:last-child,
  250. .ui.cards > .card > .button:last-child,
  251. .ui.card > .button:last-child {
  252. margin: 0em -1px -0.2em;
  253. width: -webkit-calc(100% + 2px );
  254. width: calc(100% + 2px );
  255. }
  256. /*--------------
  257. Labels
  258. ---------------*/
  259. /*-----Star----- */
  260. /* Icon */
  261. .ui.cards > .card > .content .star.icon,
  262. .ui.card > .content .star.icon {
  263. cursor: pointer;
  264. opacity: 0.75;
  265. -webkit-transition: color 0.2s ease;
  266. transition: color 0.2s ease;
  267. }
  268. .ui.cards > .card > .content .star.icon:hover,
  269. .ui.card > .content .star.icon:hover {
  270. opacity: 1;
  271. color: #ac9400;
  272. }
  273. .ui.cards > .card > .content .active.star.icon,
  274. .ui.card > .content .active.star.icon {
  275. color: #e9b539;
  276. }
  277. /*-----Like----- */
  278. /* Icon */
  279. .ui.cards > .card > .content .like.icon,
  280. .ui.card > .content .like.icon {
  281. cursor: pointer;
  282. opacity: 0.75;
  283. -webkit-transition: color 0.2s ease;
  284. transition: color 0.2s ease;
  285. }
  286. .ui.cards > .card > .content .like.icon:hover,
  287. .ui.card > .content .like.icon:hover {
  288. opacity: 1;
  289. color: #ffadae;
  290. }
  291. .ui.cards > .card > .content .active.like.icon,
  292. .ui.card > .content .active.like.icon {
  293. color: #ef404a;
  294. }
  295. /*----------------
  296. Extra Content
  297. -----------------*/
  298. .ui.cards > .card > .extra,
  299. .ui.card > .extra {
  300. max-width: 100%;
  301. min-height: 0em !important;
  302. position: static;
  303. background: none;
  304. width: auto;
  305. margin: 0em 0em;
  306. padding: 0.75em 1em;
  307. top: 0em;
  308. left: 0em;
  309. color: rgba(0, 0, 0, 0.4);
  310. box-shadow: none;
  311. -webkit-transition: color 0.2s ease;
  312. transition: color 0.2s ease;
  313. border-top: 1px solid rgba(0, 0, 0, 0.05);
  314. }
  315. .ui.cards > .card > .extra a:not(.ui),
  316. .ui.card > .extra a:not(.ui) {
  317. color: rgba(0, 0, 0, 0.4);
  318. }
  319. .ui.cards > .card > .extra a:not(.ui):hover,
  320. .ui.card > .extra a:not(.ui):hover {
  321. color: #00b2f3;
  322. }
  323. /*******************************
  324. Variations
  325. *******************************/
  326. /*-------------------
  327. Fluid
  328. --------------------*/
  329. .ui.fluid.card {
  330. width: 100%;
  331. max-width: 9999px;
  332. }
  333. /*-------------------
  334. Link
  335. --------------------*/
  336. .ui.cards a.card:hover,
  337. .ui.link.cards .card:hover,
  338. a.ui.card:hover,
  339. .ui.link.card:hover {
  340. cursor: pointer;
  341. z-index: 5;
  342. background: '';
  343. border: none;
  344. box-shadow: 0px 0.2em 0px 0px #bebebf, 0px 0px 0px 1px rgba(39, 41, 43, 0.3);
  345. }
  346. /*--------------
  347. Card Count
  348. ---------------*/
  349. .ui.one.cards {
  350. margin-left: 0em;
  351. margin-right: 0em;
  352. }
  353. .ui.one.cards > .card {
  354. width: 100%;
  355. }
  356. .ui.two.cards {
  357. margin-left: -1em;
  358. margin-right: -1em;
  359. }
  360. .ui.two.cards > .card {
  361. width: -webkit-calc( 50% - 2em );
  362. width: calc( 50% - 2em );
  363. margin-left: 1em;
  364. margin-right: 1em;
  365. }
  366. .ui.two.cards > .card:nth-child(2n+1) {
  367. clear: left;
  368. }
  369. .ui.three.cards {
  370. margin-left: -1em;
  371. margin-right: -1em;
  372. }
  373. .ui.three.cards > .card {
  374. width: -webkit-calc( 33.33333333% - 2em );
  375. width: calc( 33.33333333% - 2em );
  376. margin-left: 1em;
  377. margin-right: 1em;
  378. }
  379. .ui.three.cards > .card:nth-child(3n+1) {
  380. clear: left;
  381. }
  382. .ui.four.cards {
  383. margin-left: -0.75em;
  384. margin-right: -0.75em;
  385. }
  386. .ui.four.cards > .card {
  387. width: -webkit-calc( 25% - 1.5em );
  388. width: calc( 25% - 1.5em );
  389. margin-left: 0.75em;
  390. margin-right: 0.75em;
  391. }
  392. .ui.four.cards > .card:nth-child(4n+1) {
  393. clear: left;
  394. }
  395. .ui.five.cards {
  396. margin-left: -0.75em;
  397. margin-right: -0.75em;
  398. }
  399. .ui.five.cards > .card {
  400. width: -webkit-calc( 20% - 1.5em );
  401. width: calc( 20% - 1.5em );
  402. margin-left: 0.75em;
  403. margin-right: 0.75em;
  404. }
  405. .ui.five.cards > .card:nth-child(5n+1) {
  406. clear: left;
  407. }
  408. .ui.six.cards {
  409. margin-left: -0.75em;
  410. margin-right: -0.75em;
  411. }
  412. .ui.six.cards > .card {
  413. width: -webkit-calc( 16.66666667% - 1.5em );
  414. width: calc( 16.66666667% - 1.5em );
  415. margin-left: 0.75em;
  416. margin-right: 0.75em;
  417. }
  418. .ui.six.cards > .card:nth-child(6n+1) {
  419. clear: left;
  420. }
  421. .ui.seven.cards {
  422. margin-left: -0.5em;
  423. margin-right: -0.5em;
  424. }
  425. .ui.seven.cards > .card {
  426. width: -webkit-calc( 14.28571429% - 1em );
  427. width: calc( 14.28571429% - 1em );
  428. margin-left: 0.5em;
  429. margin-right: 0.5em;
  430. }
  431. .ui.seven.cards > .card:nth-child(7n+1) {
  432. clear: left;
  433. }
  434. .ui.eight.cards {
  435. margin-left: -0.5em;
  436. margin-right: -0.5em;
  437. }
  438. .ui.eight.cards > .card {
  439. width: -webkit-calc( 12.5% - 1em );
  440. width: calc( 12.5% - 1em );
  441. margin-left: 0.5em;
  442. margin-right: 0.5em;
  443. font-size: 11px;
  444. }
  445. .ui.eight.cards > .card:nth-child(8n+1) {
  446. clear: left;
  447. }
  448. .ui.nine.cards {
  449. margin-left: -0.5em;
  450. margin-right: -0.5em;
  451. }
  452. .ui.nine.cards > .card {
  453. width: -webkit-calc( 11.11111111% - 1em );
  454. width: calc( 11.11111111% - 1em );
  455. margin-left: 0.5em;
  456. margin-right: 0.5em;
  457. font-size: 10px;
  458. }
  459. .ui.nine.cards > .card:nth-child(9n+1) {
  460. clear: left;
  461. }
  462. .ui.ten.cards {
  463. margin-left: -0.5em;
  464. margin-right: -0.5em;
  465. }
  466. .ui.ten.cards > .card {
  467. width: -webkit-calc( 10% - 1em );
  468. width: calc( 10% - 1em );
  469. margin-left: 0.5em;
  470. margin-right: 0.5em;
  471. }
  472. .ui.ten.cards > .card:nth-child(10n+1) {
  473. clear: left;
  474. }
  475. /*-------------------
  476. Doubling
  477. --------------------*/
  478. /* Mobily Only */
  479. @media only screen and (max-width: 767px) {
  480. .ui.two.doubling.cards {
  481. margin-left: 0em;
  482. margin-right: 0em;
  483. }
  484. .ui.two.doubling.cards .card {
  485. width: 100%;
  486. margin-left: 0em;
  487. margin-right: 0em;
  488. }
  489. .ui.three.doubling.cards {
  490. margin-left: -1em;
  491. margin-right: -1em;
  492. }
  493. .ui.three.doubling.cards .card {
  494. width: -webkit-calc( 50% - 2em );
  495. width: calc( 50% - 2em );
  496. margin-left: 1em;
  497. margin-right: 1em;
  498. }
  499. .ui.four.doubling.cards {
  500. margin-left: -1em;
  501. margin-right: -1em;
  502. }
  503. .ui.four.doubling.cards .card {
  504. width: -webkit-calc( 50% - 2em );
  505. width: calc( 50% - 2em );
  506. margin-left: 1em;
  507. margin-right: 1em;
  508. }
  509. .ui.five.doubling.cards {
  510. margin-left: -1em;
  511. margin-right: -1em;
  512. }
  513. .ui.five.doubling.cards .card {
  514. width: -webkit-calc( 50% - 2em );
  515. width: calc( 50% - 2em );
  516. margin-left: 1em;
  517. margin-right: 1em;
  518. }
  519. .ui.six.doubling.cards {
  520. margin-left: -1em;
  521. margin-right: -1em;
  522. }
  523. .ui.six.doubling.cards .card {
  524. width: -webkit-calc( 50% - 2em );
  525. width: calc( 50% - 2em );
  526. margin-left: 1em;
  527. margin-right: 1em;
  528. }
  529. .ui.seven.doubling.cards {
  530. margin-left: -1em;
  531. margin-right: -1em;
  532. }
  533. .ui.seven.doubling.cards .card {
  534. width: -webkit-calc( 33.33333333% - 2em );
  535. width: calc( 33.33333333% - 2em );
  536. margin-left: 1em;
  537. margin-right: 1em;
  538. }
  539. .ui.eight.doubling.cards {
  540. margin-left: -1em;
  541. margin-right: -1em;
  542. }
  543. .ui.eight.doubling.cards .card {
  544. width: -webkit-calc( 33.33333333% - 2em );
  545. width: calc( 33.33333333% - 2em );
  546. margin-left: 1em;
  547. margin-right: 1em;
  548. }
  549. .ui.nine.doubling.cards {
  550. margin-left: -1em;
  551. margin-right: -1em;
  552. }
  553. .ui.nine.doubling.cards .card {
  554. width: -webkit-calc( 33.33333333% - 2em );
  555. width: calc( 33.33333333% - 2em );
  556. margin-left: 1em;
  557. margin-right: 1em;
  558. }
  559. .ui.ten.doubling.cards {
  560. margin-left: -1em;
  561. margin-right: -1em;
  562. }
  563. .ui.ten.doubling.cards .card {
  564. width: -webkit-calc( 33.33333333% - 2em );
  565. width: calc( 33.33333333% - 2em );
  566. margin-left: 1em;
  567. margin-right: 1em;
  568. }
  569. }
  570. /* Tablet Only */
  571. @media only screen and (min-width: 768px) and (max-width: 991px) {
  572. .ui.two.doubling.cards {
  573. margin-left: 0em;
  574. margin-right: 0em;
  575. }
  576. .ui.two.doubling.cards .card {
  577. width: 100%;
  578. margin-left: 0em;
  579. margin-right: 0em;
  580. }
  581. .ui.three.doubling.cards {
  582. margin-left: -1em;
  583. margin-right: -1em;
  584. }
  585. .ui.three.doubling.cards .card {
  586. width: -webkit-calc( 50% - 2em );
  587. width: calc( 50% - 2em );
  588. margin-left: 1em;
  589. margin-right: 1em;
  590. }
  591. .ui.four.doubling.cards {
  592. margin-left: -1em;
  593. margin-right: -1em;
  594. }
  595. .ui.four.doubling.cards .card {
  596. width: -webkit-calc( 50% - 2em );
  597. width: calc( 50% - 2em );
  598. margin-left: 1em;
  599. margin-right: 1em;
  600. }
  601. .ui.five.doubling.cards {
  602. margin-left: -1em;
  603. margin-right: -1em;
  604. }
  605. .ui.five.doubling.cards .card {
  606. width: -webkit-calc( 33.33333333% - 2em );
  607. width: calc( 33.33333333% - 2em );
  608. margin-left: 1em;
  609. margin-right: 1em;
  610. }
  611. .ui.six.doubling.cards {
  612. margin-left: -1em;
  613. margin-right: -1em;
  614. }
  615. .ui.six.doubling.cards .card {
  616. width: -webkit-calc( 33.33333333% - 2em );
  617. width: calc( 33.33333333% - 2em );
  618. margin-left: 1em;
  619. margin-right: 1em;
  620. }
  621. .ui.eight.doubling.cards {
  622. margin-left: -1em;
  623. margin-right: -1em;
  624. }
  625. .ui.eight.doubling.cards .card {
  626. width: -webkit-calc( 33.33333333% - 2em );
  627. width: calc( 33.33333333% - 2em );
  628. margin-left: 1em;
  629. margin-right: 1em;
  630. }
  631. .ui.eight.doubling.cards {
  632. margin-left: -0.75em;
  633. margin-right: -0.75em;
  634. }
  635. .ui.eight.doubling.cards .card {
  636. width: -webkit-calc( 25% - 1.5em );
  637. width: calc( 25% - 1.5em );
  638. margin-left: 0.75em;
  639. margin-right: 0.75em;
  640. }
  641. .ui.nine.doubling.cards {
  642. margin-left: -0.75em;
  643. margin-right: -0.75em;
  644. }
  645. .ui.nine.doubling.cards .card {
  646. width: -webkit-calc( 25% - 1.5em );
  647. width: calc( 25% - 1.5em );
  648. margin-left: 0.75em;
  649. margin-right: 0.75em;
  650. }
  651. .ui.ten.doubling.cards {
  652. margin-left: -0.75em;
  653. margin-right: -0.75em;
  654. }
  655. .ui.ten.doubling.cards .card {
  656. width: -webkit-calc( 20% - 1.5em );
  657. width: calc( 20% - 1.5em );
  658. margin-left: 0.75em;
  659. margin-right: 0.75em;
  660. }
  661. }
  662. /*-------------------
  663. Stackable
  664. --------------------*/
  665. @media only screen and (max-width: 767px) {
  666. .ui.stackable.cards {
  667. display: block !important;
  668. }
  669. .ui.stackable.cards .card:first-child {
  670. margin-top: 0em !important;
  671. }
  672. .ui.stackable.cards > .card {
  673. display: block !important;
  674. height: auto !important;
  675. margin: 1em 1em;
  676. padding: 0 !important;
  677. width: -webkit-calc( 100% - 2em ) !important;
  678. width: calc( 100% - 2em ) !important;
  679. }
  680. }
  681. /*--------------
  682. Size
  683. ---------------*/
  684. .ui.cards > .card {
  685. font-size: 1em;
  686. }
  687. /*******************************
  688. Theme Overrides
  689. *******************************/
  690. /*******************************
  691. User Variable Overrides
  692. *******************************/