card.css 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973
  1. /*!
  2. * # Semantic UI 2.2.6 - Item
  3. * http://github.com/semantic-org/semantic-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: -webkit-flex;
  22. display: -ms-flexbox;
  23. display: flex;
  24. -webkit-box-orient: vertical;
  25. -webkit-box-direction: normal;
  26. -webkit-flex-direction: column;
  27. -ms-flex-direction: column;
  28. flex-direction: column;
  29. width: 290px;
  30. min-height: 0px;
  31. background: #FFFFFF;
  32. padding: 0em;
  33. border: none;
  34. border-radius: 0.28571429rem;
  35. box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
  36. -webkit-transition: box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  37. transition: box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  38. transition: box-shadow 0.1s ease, transform 0.1s ease;
  39. transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-transform 0.1s ease;
  40. z-index: '';
  41. }
  42. .ui.card {
  43. margin: 1em 0em;
  44. }
  45. .ui.cards > .card a,
  46. .ui.card a {
  47. cursor: pointer;
  48. }
  49. .ui.card:first-child {
  50. margin-top: 0em;
  51. }
  52. .ui.card:last-child {
  53. margin-bottom: 0em;
  54. }
  55. /*--------------
  56. Cards
  57. ---------------*/
  58. .ui.cards {
  59. display: -webkit-box;
  60. display: -webkit-flex;
  61. display: -ms-flexbox;
  62. display: flex;
  63. margin: -0.875em -0.5em;
  64. -webkit-flex-wrap: wrap;
  65. -ms-flex-wrap: wrap;
  66. flex-wrap: wrap;
  67. }
  68. .ui.cards > .card {
  69. display: -webkit-box;
  70. display: -webkit-flex;
  71. display: -ms-flexbox;
  72. display: flex;
  73. margin: 0.875em 0.5em;
  74. float: none;
  75. }
  76. /* Clearing */
  77. .ui.cards:after,
  78. .ui.card:after {
  79. display: block;
  80. content: ' ';
  81. height: 0px;
  82. clear: both;
  83. overflow: hidden;
  84. visibility: hidden;
  85. }
  86. /* Consecutive Card Groups Preserve Row Spacing */
  87. .ui.cards ~ .ui.cards {
  88. margin-top: 0.875em;
  89. }
  90. /*--------------
  91. Rounded Edges
  92. ---------------*/
  93. .ui.cards > .card > :first-child,
  94. .ui.card > :first-child {
  95. border-radius: 0.28571429rem 0.28571429rem 0em 0em !important;
  96. border-top: none !important;
  97. }
  98. .ui.cards > .card > :last-child,
  99. .ui.card > :last-child {
  100. border-radius: 0em 0em 0.28571429rem 0.28571429rem !important;
  101. }
  102. .ui.cards > .card > :only-child,
  103. .ui.card > :only-child {
  104. border-radius: 0.28571429rem !important;
  105. }
  106. /*--------------
  107. Images
  108. ---------------*/
  109. .ui.cards > .card > .image,
  110. .ui.card > .image {
  111. position: relative;
  112. display: block;
  113. -webkit-box-flex: 0;
  114. -webkit-flex: 0 0 auto;
  115. -ms-flex: 0 0 auto;
  116. flex: 0 0 auto;
  117. padding: 0em;
  118. background: rgba(0, 0, 0, 0.05);
  119. }
  120. .ui.cards > .card > .image > img,
  121. .ui.card > .image > img {
  122. display: block;
  123. width: 100%;
  124. height: auto;
  125. border-radius: inherit;
  126. }
  127. .ui.cards > .card > .image:not(.ui) > img,
  128. .ui.card > .image:not(.ui) > img {
  129. border: none;
  130. }
  131. /*--------------
  132. Content
  133. ---------------*/
  134. .ui.cards > .card > .content,
  135. .ui.card > .content {
  136. -webkit-box-flex: 1;
  137. -webkit-flex-grow: 1;
  138. -ms-flex-positive: 1;
  139. flex-grow: 1;
  140. border: none;
  141. border-top: 1px solid rgba(34, 36, 38, 0.1);
  142. background: none;
  143. margin: 0em;
  144. padding: 1em 1em;
  145. box-shadow: none;
  146. font-size: 1em;
  147. border-radius: 0em;
  148. }
  149. .ui.cards > .card > .content:after,
  150. .ui.card > .content:after {
  151. display: block;
  152. content: ' ';
  153. height: 0px;
  154. clear: both;
  155. overflow: hidden;
  156. visibility: hidden;
  157. }
  158. .ui.cards > .card > .content > .header,
  159. .ui.card > .content > .header {
  160. display: block;
  161. margin: '';
  162. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  163. color: rgba(0, 0, 0, 0.85);
  164. }
  165. /* Default Header Size */
  166. .ui.cards > .card > .content > .header:not(.ui),
  167. .ui.card > .content > .header:not(.ui) {
  168. font-weight: bold;
  169. font-size: 1.28571429em;
  170. margin-top: -0.21425em;
  171. line-height: 1.2857em;
  172. }
  173. .ui.cards > .card > .content > .meta + .description,
  174. .ui.cards > .card > .content > .header + .description,
  175. .ui.card > .content > .meta + .description,
  176. .ui.card > .content > .header + .description {
  177. margin-top: 0.5em;
  178. }
  179. /*----------------
  180. Floated Content
  181. -----------------*/
  182. .ui.cards > .card [class*="left floated"],
  183. .ui.card [class*="left floated"] {
  184. float: left;
  185. }
  186. .ui.cards > .card [class*="right floated"],
  187. .ui.card [class*="right floated"] {
  188. float: right;
  189. }
  190. /*--------------
  191. Aligned
  192. ---------------*/
  193. .ui.cards > .card [class*="left aligned"],
  194. .ui.card [class*="left aligned"] {
  195. text-align: left;
  196. }
  197. .ui.cards > .card [class*="center aligned"],
  198. .ui.card [class*="center aligned"] {
  199. text-align: center;
  200. }
  201. .ui.cards > .card [class*="right aligned"],
  202. .ui.card [class*="right aligned"] {
  203. text-align: right;
  204. }
  205. /*--------------
  206. Content Image
  207. ---------------*/
  208. .ui.cards > .card .content img,
  209. .ui.card .content img {
  210. display: inline-block;
  211. vertical-align: middle;
  212. width: '';
  213. }
  214. .ui.cards > .card img.avatar,
  215. .ui.cards > .card .avatar img,
  216. .ui.card img.avatar,
  217. .ui.card .avatar img {
  218. width: 2em;
  219. height: 2em;
  220. border-radius: 500rem;
  221. }
  222. /*--------------
  223. Description
  224. ---------------*/
  225. .ui.cards > .card > .content > .description,
  226. .ui.card > .content > .description {
  227. clear: both;
  228. color: rgba(0, 0, 0, 0.68);
  229. }
  230. /*--------------
  231. Paragraph
  232. ---------------*/
  233. .ui.cards > .card > .content p,
  234. .ui.card > .content p {
  235. margin: 0em 0em 0.5em;
  236. }
  237. .ui.cards > .card > .content p:last-child,
  238. .ui.card > .content p:last-child {
  239. margin-bottom: 0em;
  240. }
  241. /*--------------
  242. Meta
  243. ---------------*/
  244. .ui.cards > .card .meta,
  245. .ui.card .meta {
  246. font-size: 1em;
  247. color: rgba(0, 0, 0, 0.4);
  248. }
  249. .ui.cards > .card .meta *,
  250. .ui.card .meta * {
  251. margin-right: 0.3em;
  252. }
  253. .ui.cards > .card .meta :last-child,
  254. .ui.card .meta :last-child {
  255. margin-right: 0em;
  256. }
  257. .ui.cards > .card .meta [class*="right floated"],
  258. .ui.card .meta [class*="right floated"] {
  259. margin-right: 0em;
  260. margin-left: 0.3em;
  261. }
  262. /*--------------
  263. Links
  264. ---------------*/
  265. /* Generic */
  266. .ui.cards > .card > .content a:not(.ui),
  267. .ui.card > .content a:not(.ui) {
  268. color: '';
  269. -webkit-transition: color 0.1s ease;
  270. transition: color 0.1s ease;
  271. }
  272. .ui.cards > .card > .content a:not(.ui):hover,
  273. .ui.card > .content a:not(.ui):hover {
  274. color: '';
  275. }
  276. /* Header */
  277. .ui.cards > .card > .content > a.header,
  278. .ui.card > .content > a.header {
  279. color: rgba(0, 0, 0, 0.85);
  280. }
  281. .ui.cards > .card > .content > a.header:hover,
  282. .ui.card > .content > a.header:hover {
  283. color: #1e70bf;
  284. }
  285. /* Meta */
  286. .ui.cards > .card .meta > a:not(.ui),
  287. .ui.card .meta > a:not(.ui) {
  288. color: rgba(0, 0, 0, 0.4);
  289. }
  290. .ui.cards > .card .meta > a:not(.ui):hover,
  291. .ui.card .meta > a:not(.ui):hover {
  292. color: rgba(0, 0, 0, 0.87);
  293. }
  294. /*--------------
  295. Buttons
  296. ---------------*/
  297. .ui.cards > .card > .buttons,
  298. .ui.card > .buttons,
  299. .ui.cards > .card > .button,
  300. .ui.card > .button {
  301. margin: 0px -1px;
  302. width: calc(100% + 2px );
  303. }
  304. /*--------------
  305. Dimmer
  306. ---------------*/
  307. .ui.cards > .card .dimmer,
  308. .ui.card .dimmer {
  309. background-color: '';
  310. z-index: 10;
  311. }
  312. /*--------------
  313. Labels
  314. ---------------*/
  315. /*-----Star----- */
  316. /* Icon */
  317. .ui.cards > .card > .content .star.icon,
  318. .ui.card > .content .star.icon {
  319. cursor: pointer;
  320. opacity: 0.75;
  321. -webkit-transition: color 0.1s ease;
  322. transition: color 0.1s ease;
  323. }
  324. .ui.cards > .card > .content .star.icon:hover,
  325. .ui.card > .content .star.icon:hover {
  326. opacity: 1;
  327. color: #FFB70A;
  328. }
  329. .ui.cards > .card > .content .active.star.icon,
  330. .ui.card > .content .active.star.icon {
  331. color: #FFE623;
  332. }
  333. /*-----Like----- */
  334. /* Icon */
  335. .ui.cards > .card > .content .like.icon,
  336. .ui.card > .content .like.icon {
  337. cursor: pointer;
  338. opacity: 0.75;
  339. -webkit-transition: color 0.1s ease;
  340. transition: color 0.1s ease;
  341. }
  342. .ui.cards > .card > .content .like.icon:hover,
  343. .ui.card > .content .like.icon:hover {
  344. opacity: 1;
  345. color: #FF2733;
  346. }
  347. .ui.cards > .card > .content .active.like.icon,
  348. .ui.card > .content .active.like.icon {
  349. color: #FF2733;
  350. }
  351. /*----------------
  352. Extra Content
  353. -----------------*/
  354. .ui.cards > .card > .extra,
  355. .ui.card > .extra {
  356. max-width: 100%;
  357. min-height: 0em !important;
  358. -webkit-box-flex: 0;
  359. -webkit-flex-grow: 0;
  360. -ms-flex-positive: 0;
  361. flex-grow: 0;
  362. border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  363. position: static;
  364. background: none;
  365. width: auto;
  366. margin: 0em 0em;
  367. padding: 0.75em 1em;
  368. top: 0em;
  369. left: 0em;
  370. color: rgba(0, 0, 0, 0.4);
  371. box-shadow: none;
  372. -webkit-transition: color 0.1s ease;
  373. transition: color 0.1s ease;
  374. }
  375. .ui.cards > .card > .extra a:not(.ui),
  376. .ui.card > .extra a:not(.ui) {
  377. color: rgba(0, 0, 0, 0.4);
  378. }
  379. .ui.cards > .card > .extra a:not(.ui):hover,
  380. .ui.card > .extra a:not(.ui):hover {
  381. color: #1e70bf;
  382. }
  383. /*******************************
  384. Variations
  385. *******************************/
  386. /*-------------------
  387. Raised
  388. --------------------*/
  389. .ui.raised.cards > .card,
  390. .ui.raised.card {
  391. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
  392. }
  393. .ui.raised.cards a.card:hover,
  394. .ui.link.cards .raised.card:hover,
  395. a.ui.raised.card:hover,
  396. .ui.link.raised.card:hover {
  397. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25);
  398. }
  399. .ui.raised.cards > .card,
  400. .ui.raised.card {
  401. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
  402. }
  403. /*-------------------
  404. Centered
  405. --------------------*/
  406. .ui.centered.cards {
  407. -webkit-box-pack: center;
  408. -webkit-justify-content: center;
  409. -ms-flex-pack: center;
  410. justify-content: center;
  411. }
  412. .ui.centered.card {
  413. margin-left: auto;
  414. margin-right: auto;
  415. }
  416. /*-------------------
  417. Fluid
  418. --------------------*/
  419. .ui.fluid.card {
  420. width: 100%;
  421. max-width: 9999px;
  422. }
  423. /*-------------------
  424. Link
  425. --------------------*/
  426. .ui.cards a.card,
  427. .ui.link.cards .card,
  428. a.ui.card,
  429. .ui.link.card {
  430. -webkit-transform: none;
  431. transform: none;
  432. }
  433. .ui.cards a.card:hover,
  434. .ui.link.cards .card:hover,
  435. a.ui.card:hover,
  436. .ui.link.card:hover {
  437. cursor: pointer;
  438. z-index: 5;
  439. background: #FFFFFF;
  440. border: none;
  441. box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5;
  442. -webkit-transform: translateY(-3px);
  443. transform: translateY(-3px);
  444. }
  445. /*-------------------
  446. Colors
  447. --------------------*/
  448. /* Red */
  449. .ui.red.cards > .card,
  450. .ui.cards > .red.card,
  451. .ui.red.card {
  452. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5;
  453. }
  454. .ui.red.cards > .card:hover,
  455. .ui.cards > .red.card:hover,
  456. .ui.red.card:hover {
  457. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD;
  458. }
  459. /* Orange */
  460. .ui.orange.cards > .card,
  461. .ui.cards > .orange.card,
  462. .ui.orange.card {
  463. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5;
  464. }
  465. .ui.orange.cards > .card:hover,
  466. .ui.cards > .orange.card:hover,
  467. .ui.orange.card:hover {
  468. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD;
  469. }
  470. /* Yellow */
  471. .ui.yellow.cards > .card,
  472. .ui.cards > .yellow.card,
  473. .ui.yellow.card {
  474. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5;
  475. }
  476. .ui.yellow.cards > .card:hover,
  477. .ui.cards > .yellow.card:hover,
  478. .ui.yellow.card:hover {
  479. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD;
  480. }
  481. /* Olive */
  482. .ui.olive.cards > .card,
  483. .ui.cards > .olive.card,
  484. .ui.olive.card {
  485. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5;
  486. }
  487. .ui.olive.cards > .card:hover,
  488. .ui.cards > .olive.card:hover,
  489. .ui.olive.card:hover {
  490. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD;
  491. }
  492. /* Green */
  493. .ui.green.cards > .card,
  494. .ui.cards > .green.card,
  495. .ui.green.card {
  496. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5;
  497. }
  498. .ui.green.cards > .card:hover,
  499. .ui.cards > .green.card:hover,
  500. .ui.green.card:hover {
  501. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD;
  502. }
  503. /* Teal */
  504. .ui.teal.cards > .card,
  505. .ui.cards > .teal.card,
  506. .ui.teal.card {
  507. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5;
  508. }
  509. .ui.teal.cards > .card:hover,
  510. .ui.cards > .teal.card:hover,
  511. .ui.teal.card:hover {
  512. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD;
  513. }
  514. /* Blue */
  515. .ui.blue.cards > .card,
  516. .ui.cards > .blue.card,
  517. .ui.blue.card {
  518. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5;
  519. }
  520. .ui.blue.cards > .card:hover,
  521. .ui.cards > .blue.card:hover,
  522. .ui.blue.card:hover {
  523. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD;
  524. }
  525. /* Violet */
  526. .ui.violet.cards > .card,
  527. .ui.cards > .violet.card,
  528. .ui.violet.card {
  529. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5;
  530. }
  531. .ui.violet.cards > .card:hover,
  532. .ui.cards > .violet.card:hover,
  533. .ui.violet.card:hover {
  534. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD;
  535. }
  536. /* Purple */
  537. .ui.purple.cards > .card,
  538. .ui.cards > .purple.card,
  539. .ui.purple.card {
  540. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5;
  541. }
  542. .ui.purple.cards > .card:hover,
  543. .ui.cards > .purple.card:hover,
  544. .ui.purple.card:hover {
  545. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD;
  546. }
  547. /* Pink */
  548. .ui.pink.cards > .card,
  549. .ui.cards > .pink.card,
  550. .ui.pink.card {
  551. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5;
  552. }
  553. .ui.pink.cards > .card:hover,
  554. .ui.cards > .pink.card:hover,
  555. .ui.pink.card:hover {
  556. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD;
  557. }
  558. /* Brown */
  559. .ui.brown.cards > .card,
  560. .ui.cards > .brown.card,
  561. .ui.brown.card {
  562. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5;
  563. }
  564. .ui.brown.cards > .card:hover,
  565. .ui.cards > .brown.card:hover,
  566. .ui.brown.card:hover {
  567. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD;
  568. }
  569. /* Grey */
  570. .ui.grey.cards > .card,
  571. .ui.cards > .grey.card,
  572. .ui.grey.card {
  573. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5;
  574. }
  575. .ui.grey.cards > .card:hover,
  576. .ui.cards > .grey.card:hover,
  577. .ui.grey.card:hover {
  578. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD;
  579. }
  580. /* Black */
  581. .ui.black.cards > .card,
  582. .ui.cards > .black.card,
  583. .ui.black.card {
  584. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5;
  585. }
  586. .ui.black.cards > .card:hover,
  587. .ui.cards > .black.card:hover,
  588. .ui.black.card:hover {
  589. box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD;
  590. }
  591. /*--------------
  592. Card Count
  593. ---------------*/
  594. .ui.one.cards {
  595. margin-left: 0em;
  596. margin-right: 0em;
  597. }
  598. .ui.one.cards > .card {
  599. width: 100%;
  600. }
  601. .ui.two.cards {
  602. margin-left: -1em;
  603. margin-right: -1em;
  604. }
  605. .ui.two.cards > .card {
  606. width: calc( 50% - 2em );
  607. margin-left: 1em;
  608. margin-right: 1em;
  609. }
  610. .ui.three.cards {
  611. margin-left: -1em;
  612. margin-right: -1em;
  613. }
  614. .ui.three.cards > .card {
  615. width: calc( 33.33333333% - 2em );
  616. margin-left: 1em;
  617. margin-right: 1em;
  618. }
  619. .ui.four.cards {
  620. margin-left: -0.75em;
  621. margin-right: -0.75em;
  622. }
  623. .ui.four.cards > .card {
  624. width: calc( 25% - 1.5em );
  625. margin-left: 0.75em;
  626. margin-right: 0.75em;
  627. }
  628. .ui.five.cards {
  629. margin-left: -0.75em;
  630. margin-right: -0.75em;
  631. }
  632. .ui.five.cards > .card {
  633. width: calc( 20% - 1.5em );
  634. margin-left: 0.75em;
  635. margin-right: 0.75em;
  636. }
  637. .ui.six.cards {
  638. margin-left: -0.75em;
  639. margin-right: -0.75em;
  640. }
  641. .ui.six.cards > .card {
  642. width: calc( 16.66666667% - 1.5em );
  643. margin-left: 0.75em;
  644. margin-right: 0.75em;
  645. }
  646. .ui.seven.cards {
  647. margin-left: -0.5em;
  648. margin-right: -0.5em;
  649. }
  650. .ui.seven.cards > .card {
  651. width: calc( 14.28571429% - 1em );
  652. margin-left: 0.5em;
  653. margin-right: 0.5em;
  654. }
  655. .ui.eight.cards {
  656. margin-left: -0.5em;
  657. margin-right: -0.5em;
  658. }
  659. .ui.eight.cards > .card {
  660. width: calc( 12.5% - 1em );
  661. margin-left: 0.5em;
  662. margin-right: 0.5em;
  663. font-size: 11px;
  664. }
  665. .ui.nine.cards {
  666. margin-left: -0.5em;
  667. margin-right: -0.5em;
  668. }
  669. .ui.nine.cards > .card {
  670. width: calc( 11.11111111% - 1em );
  671. margin-left: 0.5em;
  672. margin-right: 0.5em;
  673. font-size: 10px;
  674. }
  675. .ui.ten.cards {
  676. margin-left: -0.5em;
  677. margin-right: -0.5em;
  678. }
  679. .ui.ten.cards > .card {
  680. width: calc( 10% - 1em );
  681. margin-left: 0.5em;
  682. margin-right: 0.5em;
  683. }
  684. /*-------------------
  685. Doubling
  686. --------------------*/
  687. /* Mobile Only */
  688. @media only screen and (max-width: 767px) {
  689. .ui.two.doubling.cards {
  690. margin-left: 0em;
  691. margin-right: 0em;
  692. }
  693. .ui.two.doubling.cards .card {
  694. width: 100%;
  695. margin-left: 0em;
  696. margin-right: 0em;
  697. }
  698. .ui.three.doubling.cards {
  699. margin-left: -1em;
  700. margin-right: -1em;
  701. }
  702. .ui.three.doubling.cards .card {
  703. width: calc( 50% - 2em );
  704. margin-left: 1em;
  705. margin-right: 1em;
  706. }
  707. .ui.four.doubling.cards {
  708. margin-left: -1em;
  709. margin-right: -1em;
  710. }
  711. .ui.four.doubling.cards .card {
  712. width: calc( 50% - 2em );
  713. margin-left: 1em;
  714. margin-right: 1em;
  715. }
  716. .ui.five.doubling.cards {
  717. margin-left: -1em;
  718. margin-right: -1em;
  719. }
  720. .ui.five.doubling.cards .card {
  721. width: calc( 50% - 2em );
  722. margin-left: 1em;
  723. margin-right: 1em;
  724. }
  725. .ui.six.doubling.cards {
  726. margin-left: -1em;
  727. margin-right: -1em;
  728. }
  729. .ui.six.doubling.cards .card {
  730. width: calc( 50% - 2em );
  731. margin-left: 1em;
  732. margin-right: 1em;
  733. }
  734. .ui.seven.doubling.cards {
  735. margin-left: -1em;
  736. margin-right: -1em;
  737. }
  738. .ui.seven.doubling.cards .card {
  739. width: calc( 33.33333333% - 2em );
  740. margin-left: 1em;
  741. margin-right: 1em;
  742. }
  743. .ui.eight.doubling.cards {
  744. margin-left: -1em;
  745. margin-right: -1em;
  746. }
  747. .ui.eight.doubling.cards .card {
  748. width: calc( 33.33333333% - 2em );
  749. margin-left: 1em;
  750. margin-right: 1em;
  751. }
  752. .ui.nine.doubling.cards {
  753. margin-left: -1em;
  754. margin-right: -1em;
  755. }
  756. .ui.nine.doubling.cards .card {
  757. width: calc( 33.33333333% - 2em );
  758. margin-left: 1em;
  759. margin-right: 1em;
  760. }
  761. .ui.ten.doubling.cards {
  762. margin-left: -1em;
  763. margin-right: -1em;
  764. }
  765. .ui.ten.doubling.cards .card {
  766. width: calc( 33.33333333% - 2em );
  767. margin-left: 1em;
  768. margin-right: 1em;
  769. }
  770. }
  771. /* Tablet Only */
  772. @media only screen and (min-width: 768px) and (max-width: 991px) {
  773. .ui.two.doubling.cards {
  774. margin-left: 0em;
  775. margin-right: 0em;
  776. }
  777. .ui.two.doubling.cards .card {
  778. width: 100%;
  779. margin-left: 0em;
  780. margin-right: 0em;
  781. }
  782. .ui.three.doubling.cards {
  783. margin-left: -1em;
  784. margin-right: -1em;
  785. }
  786. .ui.three.doubling.cards .card {
  787. width: calc( 50% - 2em );
  788. margin-left: 1em;
  789. margin-right: 1em;
  790. }
  791. .ui.four.doubling.cards {
  792. margin-left: -1em;
  793. margin-right: -1em;
  794. }
  795. .ui.four.doubling.cards .card {
  796. width: calc( 50% - 2em );
  797. margin-left: 1em;
  798. margin-right: 1em;
  799. }
  800. .ui.five.doubling.cards {
  801. margin-left: -1em;
  802. margin-right: -1em;
  803. }
  804. .ui.five.doubling.cards .card {
  805. width: calc( 33.33333333% - 2em );
  806. margin-left: 1em;
  807. margin-right: 1em;
  808. }
  809. .ui.six.doubling.cards {
  810. margin-left: -1em;
  811. margin-right: -1em;
  812. }
  813. .ui.six.doubling.cards .card {
  814. width: calc( 33.33333333% - 2em );
  815. margin-left: 1em;
  816. margin-right: 1em;
  817. }
  818. .ui.eight.doubling.cards {
  819. margin-left: -1em;
  820. margin-right: -1em;
  821. }
  822. .ui.eight.doubling.cards .card {
  823. width: calc( 33.33333333% - 2em );
  824. margin-left: 1em;
  825. margin-right: 1em;
  826. }
  827. .ui.eight.doubling.cards {
  828. margin-left: -0.75em;
  829. margin-right: -0.75em;
  830. }
  831. .ui.eight.doubling.cards .card {
  832. width: calc( 25% - 1.5em );
  833. margin-left: 0.75em;
  834. margin-right: 0.75em;
  835. }
  836. .ui.nine.doubling.cards {
  837. margin-left: -0.75em;
  838. margin-right: -0.75em;
  839. }
  840. .ui.nine.doubling.cards .card {
  841. width: calc( 25% - 1.5em );
  842. margin-left: 0.75em;
  843. margin-right: 0.75em;
  844. }
  845. .ui.ten.doubling.cards {
  846. margin-left: -0.75em;
  847. margin-right: -0.75em;
  848. }
  849. .ui.ten.doubling.cards .card {
  850. width: calc( 20% - 1.5em );
  851. margin-left: 0.75em;
  852. margin-right: 0.75em;
  853. }
  854. }
  855. /*-------------------
  856. Stackable
  857. --------------------*/
  858. @media only screen and (max-width: 767px) {
  859. .ui.stackable.cards {
  860. display: block !important;
  861. }
  862. .ui.stackable.cards .card:first-child {
  863. margin-top: 0em !important;
  864. }
  865. .ui.stackable.cards > .card {
  866. display: block !important;
  867. height: auto !important;
  868. margin: 1em 1em;
  869. padding: 0 !important;
  870. width: calc( 100% - 2em ) !important;
  871. }
  872. }
  873. /*--------------
  874. Size
  875. ---------------*/
  876. .ui.cards > .card {
  877. font-size: 1em;
  878. }
  879. /*******************************
  880. Theme Overrides
  881. *******************************/
  882. /*******************************
  883. User Variable Overrides
  884. *******************************/