card.css 24 KB

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