SemanSemantic-UItic-UI/node/src/files/overrides/views/card.css

/*
 * # Quirky Card
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 17 2013
 */

/*******************************
             Card
*******************************/

.ui.cards .card,
.ui.card {
  position: relative;
  display: block;
  
  margin: 1em 0em;
  background-color: #FFFFFF;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  
  -webkit-box-shadow: 0px 0px 0px 1px #DCDDDE;
  -moz-box-shadow: 0px 0px 0px 1px #DCDDDE;
  box-shadow: 0px 0px 0px 1px #DCDDDE;
}
.ui.card:first-child {
  margin-top: 0em;
}
.ui.card:last-child {
  margin-bottom: 0em;
}

/*--------------
     Overlay
---------------*/

.ui.cards .card .dimmer,
.ui.card .dimmer {
  background-color: rgba(80, 80, 80, 0.6);
  
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  z-index: 100;
}
.ui.cards .card .dimmer .close,
.ui.card .dimmer .close {    
  position: absolute;
  top: 0.5em;
  right: 0.5em;

  margin: 0em;
  width: auto;
  height: auto;
  
  font-size: 2em;
  color: #FFFFFF;
}
.ui.cards .card .dimmer .buttons,
.ui.card .dimmer .buttons {
  display: inline-block;
  background-color: #FFFFFF;
  width: 80%;
  padding: 0.6em;
  border-radius: 4px;
}
.ui.cards .card .dimmer .buttons > *,
.ui.card .dimmer .buttons > * {
  display: inline-block;
  margin-left: 2%;
  width: 48%;
}
.ui.cards .card .dimmer .buttons > :first-child,
.ui.card .dimmer .buttons > :first-child {
  margin-left: 0em;
}

/*--------------
      Meta
---------------*/

.ui.cards .card > .meta,
.ui.card > .meta {
  clear: both;
  border-top: 1px solid #EDEEEE;
  padding: 0.875em;
  color: #9DA6AB;
}
.ui.cards .card > .meta:after,
.ui.card > .meta:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*--------------
    Progress
---------------*/

.ui.cards .card > .progress,
.ui.card > .progress {
  background-color: transparent;
  height: 5px;
  top: 0px;
  z-index: 2;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
}
.ui.cards .card > .progress .bar,
.ui.card > .progress .bar {
  width: 0%;
  height: 5px;

  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  -o-transition: background 0.2s ease;
  -ms-transition: background 0.2s ease;
  transition: background 0.2s ease;
}


/*******************************
            Plural
*******************************/

.ui.cards {
  display: block;
  margin: 0em -0.5em -1em;
}
.ui.cards:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.ui.cards .card {
  display: inline-block;
  margin: 0em 0.5em 1em;
}


/*******************************
            Variations
*******************************/


/*--------------
     Fluid
---------------*/

.ui.fluid.card {
  display: block;
  width: 100% !important;
}

/* Two */
.two.ui.cards {
  margin: 0% !important;
  padding: 0% !important;
}
.two.ui.cards .card {
  float: left !important;
  margin: 0% 1% 2% !important;
  width: 49% !important;
}
.two.ui.cards .card:nth-child(2n+1) {
  clear: left;
  margin-left: 0% !important;
}
.two.ui.cards .card:nth-child(2n) {
  margin-right: 0% !important;
}

@media only screen and (max-width: 800px) {
  .two.ui.cards {
    margin: 0% auto;
  }
  .two.ui.cards .card {
    width: 100% !important;
    margin: 0% 0% 2% !important;
  }
}

/* Three */
.three.ui.cards {
  margin: 0% !important;
  padding: 0% !important;
}
.three.ui.cards .card {
  float: left !important;
  margin: 0% 1% 2% !important;
  width: 32% !important;
}
.three.ui.cards .card:nth-child(3n+1) {
  clear: left;
  margin-left: 0% !important;
}
.three.ui.cards .card:nth-child(3n) {
  margin-right: 0% !important;
}



/*--------------
    Categories
---------------*/

.ui.cards .card .progress .bar,
.ui.card .progress .bar,
.ui.cards .card .progress .bar {
  background-color: #D9499A;
}

.ui.cards .kitchen.card .progress .bar,
.ui.kitchen.card .progress .bar,
.ui.kitchen.cards .card .progress .bar {
  background-color: #BED733;
}

.ui.cards .health.card .progress .bar,
.ui.health.card .progress .bar,
.ui.health.cards .card .progress .bar {
  background-color: #F36525;
}

.ui.cards .home.card .progress .bar,
.ui.home.card .progress .bar,
.ui.home.cards .card .progress .bar {
  background-color: #F7D81F;
}

.ui.cards .electronics.card .progress .bar,
.ui.electronics.card .progress .bar,
.ui.electronics.cards .card .progress .bar {
  background-color: #00B1DB;
}

.ui.cards .travel.card .progress .bar,
.ui.travel.card .progress .bar,
.ui.travel.cards .card .progress .bar {
  background-color: #D2232A;
}

.ui.cards .parenting.card .progress .bar,
.ui.parenting.card .progress .bar,
.ui.parenting.cards .card .progress .bar {
  background-color: #94297B;
}

.ui.cards .pets.card .progress .bar,
.ui.pets.card .progress .bar,
.ui.pets.cards .card .progress .bar {
  background-color: #01B5AA;
}

.ui.cards .play.card .progress .bar,
.ui.play.card .progress .bar,
.ui.play.cards .card .progress .bar {
  background-color: #ED3897;
}

.ui.cards .wildcard.card .progress .bar,
.ui.wildcard.card .progress .bar,
.ui.wildcard.cards .card .progress .bar {
  background-color: #9DA6AB;
}