card.css 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318
  1. /*!
  2. * # Fomantic-UI - Card
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Standard
  12. *******************************/
  13. /*--------------
  14. Card
  15. ---------------*/
  16. .ui.cards > .card,
  17. .ui.card {
  18. max-width: 100%;
  19. position: relative;
  20. display: -webkit-box;
  21. display: -ms-flexbox;
  22. display: flex;
  23. -webkit-box-orient: vertical;
  24. -webkit-box-direction: normal;
  25. -ms-flex-direction: column;
  26. flex-direction: column;
  27. width: 290px;
  28. min-height: 0;
  29. background: #FFFFFF;
  30. padding: 0;
  31. border: none;
  32. border-radius: 0.28571429rem;
  33. -webkit-box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
  34. box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
  35. -webkit-transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  36. transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  37. transition: box-shadow 0.1s ease, transform 0.1s ease;
  38. transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  39. z-index: '';
  40. word-wrap: break-word;
  41. }
  42. .ui.card {
  43. margin: 1em 0;
  44. }
  45. .ui.cards > .card a,
  46. .ui.card a {
  47. cursor: pointer;
  48. }
  49. .ui.card:first-child {
  50. margin-top: 0;
  51. }
  52. .ui.card:last-child {
  53. margin-bottom: 0;
  54. }
  55. /*--------------
  56. Cards
  57. ---------------*/
  58. .ui.cards {
  59. display: -webkit-box;
  60. display: -ms-flexbox;
  61. display: flex;
  62. margin: -0.875em -0.5em;
  63. -ms-flex-wrap: wrap;
  64. flex-wrap: wrap;
  65. }
  66. .ui.cards > .card {
  67. display: -webkit-box;
  68. display: -ms-flexbox;
  69. display: flex;
  70. margin: 0.875em 0.5em;
  71. float: none;
  72. }
  73. /* Clearing */
  74. .ui.cards:after,
  75. .ui.card:after {
  76. display: block;
  77. content: ' ';
  78. height: 0;
  79. clear: both;
  80. overflow: hidden;
  81. visibility: hidden;
  82. }
  83. /* Consecutive Card Groups Preserve Row Spacing */
  84. .ui.cards ~ .ui.cards {
  85. margin-top: 0.875em;
  86. }
  87. /*--------------
  88. Rounded Edges
  89. ---------------*/
  90. .ui.cards > .card > :first-child,
  91. .ui.card > :first-child {
  92. border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
  93. border-top: none !important;
  94. }
  95. .ui.cards > .card > :last-child,
  96. .ui.card > :last-child {
  97. border-radius: 0 0 0.28571429rem 0.28571429rem !important;
  98. }
  99. .ui.cards > .card > :only-child,
  100. .ui.card > :only-child {
  101. border-radius: 0.28571429rem !important;
  102. }
  103. /*--------------
  104. Images
  105. ---------------*/
  106. .ui.cards > .card > .image,
  107. .ui.card > .image {
  108. position: relative;
  109. display: block;
  110. -webkit-box-flex: 0;
  111. -ms-flex: 0 0 auto;
  112. flex: 0 0 auto;
  113. padding: 0;
  114. background: rgba(0, 0, 0, 0.05);
  115. }
  116. .ui.cards > .card > .image > img,
  117. .ui.card > .image > img {
  118. display: block;
  119. width: 100%;
  120. height: auto;
  121. border-radius: inherit;
  122. }
  123. .ui.cards > .card > .image:not(.ui) > img,
  124. .ui.card > .image:not(.ui) > img {
  125. border: none;
  126. }
  127. /*--------------
  128. Content
  129. ---------------*/
  130. .ui.cards > .card > .content,
  131. .ui.card > .content {
  132. -webkit-box-flex: 1;
  133. -ms-flex-positive: 1;
  134. flex-grow: 1;
  135. border: none;
  136. border-top: 1px solid rgba(34, 36, 38, 0.1);
  137. background: none;
  138. margin: 0;
  139. padding: 1em 1em;
  140. -webkit-box-shadow: none;
  141. box-shadow: none;
  142. font-size: 1em;
  143. border-radius: 0;
  144. }
  145. .ui.cards > .card > .content:after,
  146. .ui.card > .content:after {
  147. display: block;
  148. content: ' ';
  149. height: 0;
  150. clear: both;
  151. overflow: hidden;
  152. visibility: hidden;
  153. }
  154. .ui.cards > .card > .content > .header,
  155. .ui.card > .content > .header {
  156. display: block;
  157. margin: '';
  158. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  159. color: rgba(0, 0, 0, 0.85);
  160. }
  161. /* Default Header Size */
  162. .ui.cards > .card > .content > .header:not(.ui),
  163. .ui.card > .content > .header:not(.ui) {
  164. font-weight: bold;
  165. font-size: 1.28571429em;
  166. margin-top: -0.21425em;
  167. line-height: 1.28571429em;
  168. }
  169. .ui.cards > .card > .content > .meta + .description,
  170. .ui.cards > .card > .content > .header + .description,
  171. .ui.card > .content > .meta + .description,
  172. .ui.card > .content > .header + .description {
  173. margin-top: 0.5em;
  174. }
  175. /*----------------
  176. Floated Content
  177. -----------------*/
  178. .ui.cards > .card [class*="left floated"],
  179. .ui.card [class*="left floated"] {
  180. float: left;
  181. }
  182. .ui.cards > .card [class*="right floated"],
  183. .ui.card [class*="right floated"] {
  184. float: right;
  185. }
  186. /*--------------
  187. Aligned
  188. ---------------*/
  189. .ui.cards > .card [class*="left aligned"],
  190. .ui.card [class*="left aligned"] {
  191. text-align: left;
  192. }
  193. .ui.cards > .card [class*="center aligned"],
  194. .ui.card [class*="center aligned"] {
  195. text-align: center;
  196. }
  197. .ui.cards > .card [class*="right aligned"],
  198. .ui.card [class*="right aligned"] {
  199. text-align: right;
  200. }
  201. /*--------------
  202. Content Image
  203. ---------------*/
  204. .ui.cards > .card .content img,
  205. .ui.card .content img {
  206. display: inline-block;
  207. vertical-align: middle;
  208. width: '';
  209. }
  210. .ui.cards > .card img.avatar,
  211. .ui.cards > .card .avatar img,
  212. .ui.card img.avatar,
  213. .ui.card .avatar img {
  214. width: 2em;
  215. height: 2em;
  216. border-radius: 500rem;
  217. }
  218. /*--------------
  219. Description
  220. ---------------*/
  221. .ui.cards > .card > .content > .description,
  222. .ui.card > .content > .description {
  223. clear: both;
  224. color: rgba(0, 0, 0, 0.68);
  225. }
  226. /*--------------
  227. Paragraph
  228. ---------------*/
  229. .ui.cards > .card > .content p,
  230. .ui.card > .content p {
  231. margin: 0 0 0.5em;
  232. }
  233. .ui.cards > .card > .content p:last-child,
  234. .ui.card > .content p:last-child {
  235. margin-bottom: 0;
  236. }
  237. /*--------------
  238. Meta
  239. ---------------*/
  240. .ui.cards > .card .meta,
  241. .ui.card .meta {
  242. font-size: 1em;
  243. color: rgba(0, 0, 0, 0.4);
  244. }
  245. .ui.cards > .card .meta *,
  246. .ui.card .meta * {
  247. margin-right: 0.3em;
  248. }
  249. .ui.cards > .card .meta :last-child,
  250. .ui.card .meta :last-child {
  251. margin-right: 0;
  252. }
  253. .ui.cards > .card .meta [class*="right floated"],
  254. .ui.card .meta [class*="right floated"] {
  255. margin-right: 0;
  256. margin-left: 0.3em;
  257. }
  258. /*--------------
  259. Links
  260. ---------------*/
  261. /* Generic */
  262. .ui.cards > .card > .content a:not(.ui),
  263. .ui.card > .content a:not(.ui) {
  264. color: '';
  265. -webkit-transition: color 0.1s ease;
  266. transition: color 0.1s ease;
  267. }
  268. .ui.cards > .card > .content a:not(.ui):hover,
  269. .ui.card > .content a:not(.ui):hover {
  270. color: '';
  271. }
  272. /* Header */
  273. .ui.cards > .card > .content > a.header,
  274. .ui.card > .content > a.header {
  275. color: rgba(0, 0, 0, 0.85);
  276. }
  277. .ui.cards > .card > .content > a.header:hover,
  278. .ui.card > .content > a.header:hover {
  279. color: #1e70bf;
  280. }
  281. /* Meta */
  282. .ui.cards > .card .meta > a:not(.ui),
  283. .ui.card .meta > a:not(.ui) {
  284. color: rgba(0, 0, 0, 0.4);
  285. }
  286. .ui.cards > .card .meta > a:not(.ui):hover,
  287. .ui.card .meta > a:not(.ui):hover {
  288. color: rgba(0, 0, 0, 0.87);
  289. }
  290. /*--------------
  291. Buttons
  292. ---------------*/
  293. .ui.cards > .card > .buttons,
  294. .ui.card > .buttons,
  295. .ui.cards > .card > .button,
  296. .ui.card > .button {
  297. margin: 0 -1px;
  298. width: calc(100% + 2px);
  299. }
  300. .ui.cards > .card > .buttons:last-child,
  301. .ui.card > .buttons:last-child,
  302. .ui.cards > .card > .button:last-child,
  303. .ui.card > .button:last-child {
  304. margin-bottom: -1px;
  305. }
  306. /*--------------
  307. Dimmer
  308. ---------------*/
  309. .ui.cards > .card .dimmer,
  310. .ui.card .dimmer {
  311. background-color: '';
  312. z-index: 10;
  313. }
  314. /*--------------
  315. Labels
  316. ---------------*/
  317. /*-----Star----- */
  318. /* Icon */
  319. .ui.cards > .card > .content .star.icon,
  320. .ui.card > .content .star.icon {
  321. cursor: pointer;
  322. opacity: 0.75;
  323. -webkit-transition: color 0.1s ease;
  324. transition: color 0.1s ease;
  325. }
  326. .ui.cards > .card > .content .star.icon:hover,
  327. .ui.card > .content .star.icon:hover {
  328. opacity: 1;
  329. color: #FFB70A;
  330. }
  331. .ui.cards > .card > .content .active.star.icon,
  332. .ui.card > .content .active.star.icon {
  333. color: #FFE623;
  334. }
  335. /*-----Like----- */
  336. /* Icon */
  337. .ui.cards > .card > .content .like.icon,
  338. .ui.card > .content .like.icon {
  339. cursor: pointer;
  340. opacity: 0.75;
  341. -webkit-transition: color 0.1s ease;
  342. transition: color 0.1s ease;
  343. }
  344. .ui.cards > .card > .content .like.icon:hover,
  345. .ui.card > .content .like.icon:hover {
  346. opacity: 1;
  347. color: #FF2733;
  348. }
  349. .ui.cards > .card > .content .active.like.icon,
  350. .ui.card > .content .active.like.icon {
  351. color: #FF2733;
  352. }
  353. /*----------------
  354. Extra Content
  355. -----------------*/
  356. .ui.cards > .card > .extra,
  357. .ui.card > .extra {
  358. max-width: 100%;
  359. min-height: 0 !important;
  360. -webkit-box-flex: 0;
  361. -ms-flex-positive: 0;
  362. flex-grow: 0;
  363. border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  364. position: static;
  365. background: none;
  366. width: auto;
  367. margin: 0 0;
  368. padding: 0.75em 1em;
  369. top: 0;
  370. left: 0;
  371. color: rgba(0, 0, 0, 0.4);
  372. -webkit-box-shadow: none;
  373. box-shadow: none;
  374. -webkit-transition: color 0.1s ease;
  375. transition: color 0.1s ease;
  376. }
  377. .ui.cards > .card > .extra a:not(.ui),
  378. .ui.card > .extra a:not(.ui) {
  379. color: rgba(0, 0, 0, 0.4);
  380. }
  381. .ui.cards > .card > .extra a:not(.ui):hover,
  382. .ui.card > .extra a:not(.ui):hover {
  383. color: #1e70bf;
  384. }
  385. /*******************************
  386. Variations
  387. *******************************/
  388. /*-------------------
  389. Horizontal
  390. --------------------*/
  391. .ui.horizontal.cards > .card,
  392. .ui.card.horizontal {
  393. -webkit-box-orient: horizontal;
  394. -webkit-box-direction: normal;
  395. -ms-flex-direction: row;
  396. flex-direction: row;
  397. -ms-flex-wrap: wrap;
  398. flex-wrap: wrap;
  399. min-width: 270px;
  400. width: 400px;
  401. max-width: 100%;
  402. }
  403. .ui.horizontal.cards > .card > .image,
  404. .ui.card.horizontal > .image {
  405. border-radius: 0.28571429rem 0 0 0.28571429rem;
  406. width: 150px;
  407. }
  408. .ui.horizontal.cards > .card > .image > img,
  409. .ui.card.horizontal > .image > img {
  410. background-size: cover;
  411. background-repeat: no-repeat;
  412. background-position: center;
  413. -webkit-box-pack: center;
  414. -ms-flex-pack: center;
  415. justify-content: center;
  416. -webkit-box-align: center;
  417. -ms-flex-align: center;
  418. align-items: center;
  419. display: -webkit-box;
  420. display: -ms-flexbox;
  421. display: flex;
  422. width: 100%;
  423. height: 100%;
  424. border-radius: 0.28571429rem 0 0 0.28571429rem;
  425. }
  426. .ui.horizontal.cards > .card > .image:last-child > img,
  427. .ui.card.horizontal > .image:last-child > img {
  428. border-radius: 0 0.28571429rem 0.28571429rem 0;
  429. }
  430. .ui.horizontal.cards > .card > .content,
  431. .ui.horizontal.card > .content {
  432. -ms-flex-preferred-size: 1px;
  433. flex-basis: 1px;
  434. }
  435. .ui.horizontal.cards > .card > .extra,
  436. .ui.horizontal.card > .extra {
  437. -ms-flex-preferred-size: 100%;
  438. flex-basis: 100%;
  439. }
  440. /*-------------------
  441. Raised
  442. --------------------*/
  443. .ui.raised.cards > .card,
  444. .ui.raised.card {
  445. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  446. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  447. }
  448. .ui.raised.cards a.card:hover,
  449. .ui.link.cards .raised.card:hover,
  450. a.ui.raised.card:hover,
  451. .ui.link.raised.card:hover {
  452. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
  453. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
  454. }
  455. /*-------------------
  456. Centered
  457. --------------------*/
  458. .ui.centered.cards {
  459. -webkit-box-pack: center;
  460. -ms-flex-pack: center;
  461. justify-content: center;
  462. }
  463. .ui.centered.card {
  464. margin-left: auto;
  465. margin-right: auto;
  466. }
  467. /*-------------------
  468. Fluid
  469. --------------------*/
  470. .ui.fluid.card {
  471. width: 100%;
  472. max-width: 9999px;
  473. }
  474. /*-------------------
  475. Link
  476. --------------------*/
  477. .ui.cards a.card,
  478. .ui.link.cards .card,
  479. a.ui.card,
  480. .ui.link.card {
  481. -webkit-transform: none;
  482. transform: none;
  483. }
  484. .ui.cards a.card:hover,
  485. .ui.link.cards .card:not(.icon):hover,
  486. a.ui.card:hover,
  487. .ui.link.card:hover {
  488. cursor: pointer;
  489. z-index: 5;
  490. background: #FFFFFF;
  491. border: none;
  492. -webkit-box-shadow: 0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5;
  493. box-shadow: 0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5;
  494. -webkit-transform: translateY(-3px);
  495. transform: translateY(-3px);
  496. }
  497. /*-------------------
  498. Colors
  499. --------------------*/
  500. .ui.primary.cards > .card,
  501. .ui.cards > .primary.card,
  502. .ui.primary.card {
  503. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
  504. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
  505. }
  506. .ui.primary.cards > .card:hover,
  507. .ui.cards > .primary.card:hover,
  508. .ui.primary.card:hover {
  509. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
  510. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
  511. }
  512. .ui.inverted.primary.cards > .card,
  513. .ui.inverted.cards > .primary.card,
  514. .ui.inverted.primary.card {
  515. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
  516. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
  517. }
  518. .ui.inverted.primary.cards > .card:hover,
  519. .ui.inverted.cards > .primary.card:hover,
  520. .ui.inverted.primary.card:hover {
  521. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
  522. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
  523. }
  524. .ui.secondary.cards > .card,
  525. .ui.cards > .secondary.card,
  526. .ui.secondary.card {
  527. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
  528. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
  529. }
  530. .ui.secondary.cards > .card:hover,
  531. .ui.cards > .secondary.card:hover,
  532. .ui.secondary.card:hover {
  533. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
  534. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
  535. }
  536. .ui.inverted.secondary.cards > .card,
  537. .ui.inverted.cards > .secondary.card,
  538. .ui.inverted.secondary.card {
  539. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
  540. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
  541. }
  542. .ui.inverted.secondary.cards > .card:hover,
  543. .ui.inverted.cards > .secondary.card:hover,
  544. .ui.inverted.secondary.card:hover {
  545. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555555;
  546. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555555;
  547. }
  548. .ui.red.cards > .card,
  549. .ui.cards > .red.card,
  550. .ui.red.card {
  551. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, 0 1px 3px 0 #D4D4D5;
  552. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, 0 1px 3px 0 #D4D4D5;
  553. }
  554. .ui.red.cards > .card:hover,
  555. .ui.cards > .red.card:hover,
  556. .ui.red.card:hover {
  557. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD;
  558. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD;
  559. }
  560. .ui.inverted.red.cards > .card,
  561. .ui.inverted.cards > .red.card,
  562. .ui.inverted.red.card {
  563. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF695E, 0 0 0 1px #555555;
  564. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF695E, 0 0 0 1px #555555;
  565. }
  566. .ui.inverted.red.cards > .card:hover,
  567. .ui.inverted.cards > .red.card:hover,
  568. .ui.inverted.red.card:hover {
  569. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff392b, 0 0 0 1px #555555;
  570. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff392b, 0 0 0 1px #555555;
  571. }
  572. .ui.orange.cards > .card,
  573. .ui.cards > .orange.card,
  574. .ui.orange.card {
  575. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, 0 1px 3px 0 #D4D4D5;
  576. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, 0 1px 3px 0 #D4D4D5;
  577. }
  578. .ui.orange.cards > .card:hover,
  579. .ui.cards > .orange.card:hover,
  580. .ui.orange.card:hover {
  581. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD;
  582. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD;
  583. }
  584. .ui.inverted.orange.cards > .card,
  585. .ui.inverted.cards > .orange.card,
  586. .ui.inverted.orange.card {
  587. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF851B, 0 0 0 1px #555555;
  588. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF851B, 0 0 0 1px #555555;
  589. }
  590. .ui.inverted.orange.cards > .card:hover,
  591. .ui.inverted.cards > .orange.card:hover,
  592. .ui.inverted.orange.card:hover {
  593. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #e76b00, 0 0 0 1px #555555;
  594. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #e76b00, 0 0 0 1px #555555;
  595. }
  596. .ui.yellow.cards > .card,
  597. .ui.cards > .yellow.card,
  598. .ui.yellow.card {
  599. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, 0 1px 3px 0 #D4D4D5;
  600. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, 0 1px 3px 0 #D4D4D5;
  601. }
  602. .ui.yellow.cards > .card:hover,
  603. .ui.cards > .yellow.card:hover,
  604. .ui.yellow.card:hover {
  605. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD;
  606. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD;
  607. }
  608. .ui.inverted.yellow.cards > .card,
  609. .ui.inverted.cards > .yellow.card,
  610. .ui.inverted.yellow.card {
  611. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FFE21F, 0 0 0 1px #555555;
  612. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FFE21F, 0 0 0 1px #555555;
  613. }
  614. .ui.inverted.yellow.cards > .card:hover,
  615. .ui.inverted.cards > .yellow.card:hover,
  616. .ui.inverted.yellow.card:hover {
  617. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ebcd00, 0 0 0 1px #555555;
  618. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ebcd00, 0 0 0 1px #555555;
  619. }
  620. .ui.olive.cards > .card,
  621. .ui.cards > .olive.card,
  622. .ui.olive.card {
  623. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, 0 1px 3px 0 #D4D4D5;
  624. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, 0 1px 3px 0 #D4D4D5;
  625. }
  626. .ui.olive.cards > .card:hover,
  627. .ui.cards > .olive.card:hover,
  628. .ui.olive.card:hover {
  629. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD;
  630. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD;
  631. }
  632. .ui.inverted.olive.cards > .card,
  633. .ui.inverted.cards > .olive.card,
  634. .ui.inverted.olive.card {
  635. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D9E778, 0 0 0 1px #555555;
  636. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D9E778, 0 0 0 1px #555555;
  637. }
  638. .ui.inverted.olive.cards > .card:hover,
  639. .ui.inverted.cards > .olive.card:hover,
  640. .ui.inverted.olive.card:hover {
  641. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #d2e745, 0 0 0 1px #555555;
  642. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #d2e745, 0 0 0 1px #555555;
  643. }
  644. .ui.green.cards > .card,
  645. .ui.cards > .green.card,
  646. .ui.green.card {
  647. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, 0 1px 3px 0 #D4D4D5;
  648. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, 0 1px 3px 0 #D4D4D5;
  649. }
  650. .ui.green.cards > .card:hover,
  651. .ui.cards > .green.card:hover,
  652. .ui.green.card:hover {
  653. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD;
  654. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD;
  655. }
  656. .ui.inverted.green.cards > .card,
  657. .ui.inverted.cards > .green.card,
  658. .ui.inverted.green.card {
  659. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #2ECC40, 0 0 0 1px #555555;
  660. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #2ECC40, 0 0 0 1px #555555;
  661. }
  662. .ui.inverted.green.cards > .card:hover,
  663. .ui.inverted.cards > .green.card:hover,
  664. .ui.inverted.green.card:hover {
  665. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555555;
  666. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555555;
  667. }
  668. .ui.teal.cards > .card,
  669. .ui.cards > .teal.card,
  670. .ui.teal.card {
  671. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, 0 1px 3px 0 #D4D4D5;
  672. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, 0 1px 3px 0 #D4D4D5;
  673. }
  674. .ui.teal.cards > .card:hover,
  675. .ui.cards > .teal.card:hover,
  676. .ui.teal.card:hover {
  677. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD;
  678. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD;
  679. }
  680. .ui.inverted.teal.cards > .card,
  681. .ui.inverted.cards > .teal.card,
  682. .ui.inverted.teal.card {
  683. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6DFFFF, 0 0 0 1px #555555;
  684. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6DFFFF, 0 0 0 1px #555555;
  685. }
  686. .ui.inverted.teal.cards > .card:hover,
  687. .ui.inverted.cards > .teal.card:hover,
  688. .ui.inverted.teal.card:hover {
  689. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #3affff, 0 0 0 1px #555555;
  690. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #3affff, 0 0 0 1px #555555;
  691. }
  692. .ui.blue.cards > .card,
  693. .ui.cards > .blue.card,
  694. .ui.blue.card {
  695. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
  696. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5;
  697. }
  698. .ui.blue.cards > .card:hover,
  699. .ui.cards > .blue.card:hover,
  700. .ui.blue.card:hover {
  701. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
  702. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD;
  703. }
  704. .ui.inverted.blue.cards > .card,
  705. .ui.inverted.cards > .blue.card,
  706. .ui.inverted.blue.card {
  707. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
  708. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555;
  709. }
  710. .ui.inverted.blue.cards > .card:hover,
  711. .ui.inverted.cards > .blue.card:hover,
  712. .ui.inverted.blue.card:hover {
  713. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
  714. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555;
  715. }
  716. .ui.violet.cards > .card,
  717. .ui.cards > .violet.card,
  718. .ui.violet.card {
  719. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, 0 1px 3px 0 #D4D4D5;
  720. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, 0 1px 3px 0 #D4D4D5;
  721. }
  722. .ui.violet.cards > .card:hover,
  723. .ui.cards > .violet.card:hover,
  724. .ui.violet.card:hover {
  725. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD;
  726. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD;
  727. }
  728. .ui.inverted.violet.cards > .card,
  729. .ui.inverted.cards > .violet.card,
  730. .ui.inverted.violet.card {
  731. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #A291FB, 0 0 0 1px #555555;
  732. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #A291FB, 0 0 0 1px #555555;
  733. }
  734. .ui.inverted.violet.cards > .card:hover,
  735. .ui.inverted.cards > .violet.card:hover,
  736. .ui.inverted.violet.card:hover {
  737. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #745aff, 0 0 0 1px #555555;
  738. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #745aff, 0 0 0 1px #555555;
  739. }
  740. .ui.purple.cards > .card,
  741. .ui.cards > .purple.card,
  742. .ui.purple.card {
  743. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, 0 1px 3px 0 #D4D4D5;
  744. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, 0 1px 3px 0 #D4D4D5;
  745. }
  746. .ui.purple.cards > .card:hover,
  747. .ui.cards > .purple.card:hover,
  748. .ui.purple.card:hover {
  749. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD;
  750. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD;
  751. }
  752. .ui.inverted.purple.cards > .card,
  753. .ui.inverted.cards > .purple.card,
  754. .ui.inverted.purple.card {
  755. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DC73FF, 0 0 0 1px #555555;
  756. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DC73FF, 0 0 0 1px #555555;
  757. }
  758. .ui.inverted.purple.cards > .card:hover,
  759. .ui.inverted.cards > .purple.card:hover,
  760. .ui.inverted.purple.card:hover {
  761. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555555;
  762. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555555;
  763. }
  764. .ui.pink.cards > .card,
  765. .ui.cards > .pink.card,
  766. .ui.pink.card {
  767. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, 0 1px 3px 0 #D4D4D5;
  768. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, 0 1px 3px 0 #D4D4D5;
  769. }
  770. .ui.pink.cards > .card:hover,
  771. .ui.cards > .pink.card:hover,
  772. .ui.pink.card:hover {
  773. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD;
  774. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD;
  775. }
  776. .ui.inverted.pink.cards > .card,
  777. .ui.inverted.cards > .pink.card,
  778. .ui.inverted.pink.card {
  779. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF8EDF, 0 0 0 1px #555555;
  780. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF8EDF, 0 0 0 1px #555555;
  781. }
  782. .ui.inverted.pink.cards > .card:hover,
  783. .ui.inverted.cards > .pink.card:hover,
  784. .ui.inverted.pink.card:hover {
  785. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff5bd1, 0 0 0 1px #555555;
  786. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff5bd1, 0 0 0 1px #555555;
  787. }
  788. .ui.brown.cards > .card,
  789. .ui.cards > .brown.card,
  790. .ui.brown.card {
  791. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, 0 1px 3px 0 #D4D4D5;
  792. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, 0 1px 3px 0 #D4D4D5;
  793. }
  794. .ui.brown.cards > .card:hover,
  795. .ui.cards > .brown.card:hover,
  796. .ui.brown.card:hover {
  797. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD;
  798. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD;
  799. }
  800. .ui.inverted.brown.cards > .card,
  801. .ui.inverted.cards > .brown.card,
  802. .ui.inverted.brown.card {
  803. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D67C1C, 0 0 0 1px #555555;
  804. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D67C1C, 0 0 0 1px #555555;
  805. }
  806. .ui.inverted.brown.cards > .card:hover,
  807. .ui.inverted.cards > .brown.card:hover,
  808. .ui.inverted.brown.card:hover {
  809. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #b0620f, 0 0 0 1px #555555;
  810. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #b0620f, 0 0 0 1px #555555;
  811. }
  812. .ui.grey.cards > .card,
  813. .ui.cards > .grey.card,
  814. .ui.grey.card {
  815. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, 0 1px 3px 0 #D4D4D5;
  816. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, 0 1px 3px 0 #D4D4D5;
  817. }
  818. .ui.grey.cards > .card:hover,
  819. .ui.cards > .grey.card:hover,
  820. .ui.grey.card:hover {
  821. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD;
  822. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD;
  823. }
  824. .ui.inverted.grey.cards > .card,
  825. .ui.inverted.cards > .grey.card,
  826. .ui.inverted.grey.card {
  827. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DCDDDE, 0 0 0 1px #555555;
  828. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DCDDDE, 0 0 0 1px #555555;
  829. }
  830. .ui.inverted.grey.cards > .card:hover,
  831. .ui.inverted.cards > .grey.card:hover,
  832. .ui.inverted.grey.card:hover {
  833. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555555;
  834. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555555;
  835. }
  836. .ui.black.cards > .card,
  837. .ui.cards > .black.card,
  838. .ui.black.card {
  839. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
  840. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5;
  841. }
  842. .ui.black.cards > .card:hover,
  843. .ui.cards > .black.card:hover,
  844. .ui.black.card:hover {
  845. -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
  846. box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD;
  847. }
  848. .ui.inverted.black.cards > .card,
  849. .ui.inverted.cards > .black.card,
  850. .ui.inverted.black.card {
  851. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
  852. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555;
  853. }
  854. .ui.inverted.black.cards > .card:hover,
  855. .ui.inverted.cards > .black.card:hover,
  856. .ui.inverted.black.card:hover {
  857. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #000000, 0 0 0 1px #555555;
  858. box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #000000, 0 0 0 1px #555555;
  859. }
  860. /*--------------
  861. Card Count
  862. ---------------*/
  863. .ui.one.cards {
  864. margin-left: 0;
  865. margin-right: 0;
  866. }
  867. .ui.one.cards > .card {
  868. width: 100%;
  869. }
  870. .ui.two.cards {
  871. margin-left: -1em;
  872. margin-right: -1em;
  873. }
  874. .ui.two.cards > .card {
  875. width: calc(50% - 2em);
  876. margin-left: 1em;
  877. margin-right: 1em;
  878. }
  879. .ui.three.cards {
  880. margin-left: -1em;
  881. margin-right: -1em;
  882. }
  883. .ui.three.cards > .card {
  884. width: calc(33.33333333333333% - 2em);
  885. margin-left: 1em;
  886. margin-right: 1em;
  887. }
  888. .ui.four.cards {
  889. margin-left: -0.75em;
  890. margin-right: -0.75em;
  891. }
  892. .ui.four.cards > .card {
  893. width: calc(25% - 1.5em);
  894. margin-left: 0.75em;
  895. margin-right: 0.75em;
  896. }
  897. .ui.five.cards {
  898. margin-left: -0.75em;
  899. margin-right: -0.75em;
  900. }
  901. .ui.five.cards > .card {
  902. width: calc(20% - 1.5em);
  903. margin-left: 0.75em;
  904. margin-right: 0.75em;
  905. }
  906. .ui.six.cards {
  907. margin-left: -0.75em;
  908. margin-right: -0.75em;
  909. }
  910. .ui.six.cards > .card {
  911. width: calc(16.666666666666664% - 1.5em);
  912. margin-left: 0.75em;
  913. margin-right: 0.75em;
  914. }
  915. .ui.seven.cards {
  916. margin-left: -0.5em;
  917. margin-right: -0.5em;
  918. }
  919. .ui.seven.cards > .card {
  920. width: calc(14.285714285714285% - 1em);
  921. margin-left: 0.5em;
  922. margin-right: 0.5em;
  923. }
  924. .ui.eight.cards {
  925. margin-left: -0.5em;
  926. margin-right: -0.5em;
  927. }
  928. .ui.eight.cards > .card {
  929. width: calc(12.5% - 1em);
  930. margin-left: 0.5em;
  931. margin-right: 0.5em;
  932. font-size: 11px;
  933. }
  934. .ui.nine.cards {
  935. margin-left: -0.5em;
  936. margin-right: -0.5em;
  937. }
  938. .ui.nine.cards > .card {
  939. width: calc(11.11111111111111% - 1em);
  940. margin-left: 0.5em;
  941. margin-right: 0.5em;
  942. font-size: 10px;
  943. }
  944. .ui.ten.cards {
  945. margin-left: -0.5em;
  946. margin-right: -0.5em;
  947. }
  948. .ui.ten.cards > .card {
  949. width: calc(10% - 1em);
  950. margin-left: 0.5em;
  951. margin-right: 0.5em;
  952. }
  953. /*-------------------
  954. Doubling
  955. --------------------*/
  956. /* Mobile Only */
  957. @media only screen and (max-width: 767.98px) {
  958. .ui.two.doubling.cards {
  959. margin-left: 0;
  960. margin-right: 0;
  961. }
  962. .ui.two.doubling.cards > .card {
  963. width: 100%;
  964. margin-left: 0;
  965. margin-right: 0;
  966. }
  967. .ui.three.doubling.cards {
  968. margin-left: -1em;
  969. margin-right: -1em;
  970. }
  971. .ui.three.doubling.cards > .card {
  972. width: calc(50% - 2em);
  973. margin-left: 1em;
  974. margin-right: 1em;
  975. }
  976. .ui.four.doubling.cards {
  977. margin-left: -1em;
  978. margin-right: -1em;
  979. }
  980. .ui.four.doubling.cards > .card {
  981. width: calc(50% - 2em);
  982. margin-left: 1em;
  983. margin-right: 1em;
  984. }
  985. .ui.five.doubling.cards {
  986. margin-left: -1em;
  987. margin-right: -1em;
  988. }
  989. .ui.five.doubling.cards > .card {
  990. width: calc(50% - 2em);
  991. margin-left: 1em;
  992. margin-right: 1em;
  993. }
  994. .ui.six.doubling.cards {
  995. margin-left: -1em;
  996. margin-right: -1em;
  997. }
  998. .ui.six.doubling.cards > .card {
  999. width: calc(50% - 2em);
  1000. margin-left: 1em;
  1001. margin-right: 1em;
  1002. }
  1003. .ui.seven.doubling.cards {
  1004. margin-left: -1em;
  1005. margin-right: -1em;
  1006. }
  1007. .ui.seven.doubling.cards > .card {
  1008. width: calc(33.33333333333333% - 2em);
  1009. margin-left: 1em;
  1010. margin-right: 1em;
  1011. }
  1012. .ui.eight.doubling.cards {
  1013. margin-left: -1em;
  1014. margin-right: -1em;
  1015. }
  1016. .ui.eight.doubling.cards > .card {
  1017. width: calc(33.33333333333333% - 2em);
  1018. margin-left: 1em;
  1019. margin-right: 1em;
  1020. }
  1021. .ui.nine.doubling.cards {
  1022. margin-left: -1em;
  1023. margin-right: -1em;
  1024. }
  1025. .ui.nine.doubling.cards > .card {
  1026. width: calc(33.33333333333333% - 2em);
  1027. margin-left: 1em;
  1028. margin-right: 1em;
  1029. }
  1030. .ui.ten.doubling.cards {
  1031. margin-left: -1em;
  1032. margin-right: -1em;
  1033. }
  1034. .ui.ten.doubling.cards > .card {
  1035. width: calc(33.33333333333333% - 2em);
  1036. margin-left: 1em;
  1037. margin-right: 1em;
  1038. }
  1039. }
  1040. /* Tablet Only */
  1041. @media only screen and (min-width: 768px) and (max-width: 991.98px) {
  1042. .ui.two.doubling.cards {
  1043. margin-left: 0;
  1044. margin-right: 0;
  1045. }
  1046. .ui.two.doubling.cards > .card {
  1047. width: 100%;
  1048. margin-left: 0;
  1049. margin-right: 0;
  1050. }
  1051. .ui.three.doubling.cards {
  1052. margin-left: -1em;
  1053. margin-right: -1em;
  1054. }
  1055. .ui.three.doubling.cards > .card {
  1056. width: calc(50% - 2em);
  1057. margin-left: 1em;
  1058. margin-right: 1em;
  1059. }
  1060. .ui.four.doubling.cards {
  1061. margin-left: -1em;
  1062. margin-right: -1em;
  1063. }
  1064. .ui.four.doubling.cards > .card {
  1065. width: calc(50% - 2em);
  1066. margin-left: 1em;
  1067. margin-right: 1em;
  1068. }
  1069. .ui.five.doubling.cards {
  1070. margin-left: -1em;
  1071. margin-right: -1em;
  1072. }
  1073. .ui.five.doubling.cards > .card {
  1074. width: calc(33.33333333333333% - 2em);
  1075. margin-left: 1em;
  1076. margin-right: 1em;
  1077. }
  1078. .ui.six.doubling.cards {
  1079. margin-left: -1em;
  1080. margin-right: -1em;
  1081. }
  1082. .ui.six.doubling.cards > .card {
  1083. width: calc(33.33333333333333% - 2em);
  1084. margin-left: 1em;
  1085. margin-right: 1em;
  1086. }
  1087. .ui.eight.doubling.cards {
  1088. margin-left: -1em;
  1089. margin-right: -1em;
  1090. }
  1091. .ui.eight.doubling.cards > .card {
  1092. width: calc(33.33333333333333% - 2em);
  1093. margin-left: 1em;
  1094. margin-right: 1em;
  1095. }
  1096. .ui.eight.doubling.cards {
  1097. margin-left: -0.75em;
  1098. margin-right: -0.75em;
  1099. }
  1100. .ui.eight.doubling.cards > .card {
  1101. width: calc(25% - 1.5em);
  1102. margin-left: 0.75em;
  1103. margin-right: 0.75em;
  1104. }
  1105. .ui.nine.doubling.cards {
  1106. margin-left: -0.75em;
  1107. margin-right: -0.75em;
  1108. }
  1109. .ui.nine.doubling.cards > .card {
  1110. width: calc(25% - 1.5em);
  1111. margin-left: 0.75em;
  1112. margin-right: 0.75em;
  1113. }
  1114. .ui.ten.doubling.cards {
  1115. margin-left: -0.75em;
  1116. margin-right: -0.75em;
  1117. }
  1118. .ui.ten.doubling.cards > .card {
  1119. width: calc(20% - 1.5em);
  1120. margin-left: 0.75em;
  1121. margin-right: 0.75em;
  1122. }
  1123. }
  1124. /*-------------------
  1125. Stackable
  1126. --------------------*/
  1127. @media only screen and (max-width: 767.98px) {
  1128. .ui.stackable.cards {
  1129. display: block !important;
  1130. }
  1131. .ui.stackable.cards .card:first-child {
  1132. margin-top: 0 !important;
  1133. }
  1134. .ui.stackable.cards > .card {
  1135. display: block !important;
  1136. height: auto !important;
  1137. margin: 1em 1em;
  1138. padding: 0 !important;
  1139. width: calc(100% - 2em) !important;
  1140. }
  1141. }
  1142. /*--------------
  1143. Size
  1144. ---------------*/
  1145. .ui.cards > .card {
  1146. font-size: 1em;
  1147. }
  1148. .ui.mini.cards .card {
  1149. font-size: 0.78571429rem;
  1150. }
  1151. .ui.tiny.cards .card {
  1152. font-size: 0.85714286rem;
  1153. }
  1154. .ui.small.cards .card {
  1155. font-size: 0.92857143rem;
  1156. }
  1157. .ui.large.cards .card {
  1158. font-size: 1.14285714rem;
  1159. }
  1160. .ui.big.cards .card {
  1161. font-size: 1.28571429rem;
  1162. }
  1163. .ui.huge.cards .card {
  1164. font-size: 1.42857143rem;
  1165. }
  1166. .ui.massive.cards .card {
  1167. font-size: 1.71428571rem;
  1168. }
  1169. /*-----------------
  1170. Inverted
  1171. ------------------*/
  1172. .ui.inverted.cards > .card,
  1173. .ui.inverted.card {
  1174. background: #1B1C1D;
  1175. -webkit-box-shadow: 0 1px 3px 0 #555555, 0 0 0 1px #555555;
  1176. box-shadow: 0 1px 3px 0 #555555, 0 0 0 1px #555555;
  1177. }
  1178. /* Content */
  1179. .ui.inverted.cards > .card > .content,
  1180. .ui.inverted.card > .content {
  1181. border-top: 1px solid rgba(255, 255, 255, 0.15);
  1182. }
  1183. /* Header */
  1184. .ui.inverted.cards > .card > .content > .header,
  1185. .ui.inverted.card > .content > .header {
  1186. color: rgba(255, 255, 255, 0.9);
  1187. }
  1188. /* Description */
  1189. .ui.inverted.cards > .card > .content > .description,
  1190. .ui.inverted.card > .content > .description {
  1191. color: rgba(255, 255, 255, 0.8);
  1192. }
  1193. /* Meta */
  1194. .ui.inverted.cards > .card .meta,
  1195. .ui.inverted.card .meta {
  1196. color: rgba(255, 255, 255, 0.7);
  1197. }
  1198. .ui.inverted.cards > .card .meta > a:not(.ui),
  1199. .ui.inverted.card .meta > a:not(.ui) {
  1200. color: rgba(255, 255, 255, 0.7);
  1201. }
  1202. .ui.inverted.cards > .card .meta > a:not(.ui):hover,
  1203. .ui.inverted.card .meta > a:not(.ui):hover {
  1204. color: #ffffff;
  1205. }
  1206. /* Extra */
  1207. .ui.inverted.cards > .card > .extra,
  1208. .ui.inverted.card > .extra {
  1209. border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  1210. color: rgba(255, 255, 255, 0.7);
  1211. }
  1212. .ui.inverted.cards > .card > .extra a:not(.ui),
  1213. .ui.inverted.card > .extra a:not(.ui) {
  1214. color: rgba(255, 255, 255, 0.5);
  1215. }
  1216. .ui.inverted.cards > .card > .extra a:not(.ui):hover,
  1217. .ui.inverted.card > .extra a:not(.ui):hover {
  1218. color: #1e70bf;
  1219. }
  1220. /* Link card(s) */
  1221. .ui.inverted.cards a.card:hover,
  1222. .ui.inverted.link.cards .card:not(.icon):hover,
  1223. a.inverted.ui.card:hover,
  1224. .ui.inverted.link.card:hover {
  1225. background: #1B1C1D;
  1226. }
  1227. /*******************************
  1228. Theme Overrides
  1229. *******************************/
  1230. /*******************************
  1231. User Variable Overrides
  1232. *******************************/