jcbantuelle/dominion-meteor

@import '{}/node_modules/bootstrap/scss/bootstrap.scss';

$action: lightgrey;
$event: silver;
$landmark: #00b300;
$project: pink;
$victory: lightgreen;
$reaction: lightblue;
$way: lightcyan;
$treasure: gold;
$curse: violet;
$duration: orange;
$night: grey;
$shelter: salmon;
$state: peachpuff;
$artifact: bisque;
$ruins: burlywood;
$reserve: #cdb332;
$busy: grey;
$player_margin: 25px;

@mixin gradient($from, $to) {
  background-image: linear-gradient(bottom, $to 50%, $from 50%);
  background-image: -o-linear-gradient(bottom, $to 50%, $from 50%);
  background-image: -moz-linear-gradient(bottom, $to 50%, $from 50%);
  background-image: -webkit-linear-gradient(bottom, $to 50%, $from 50%);
  background-image: -ms-linear-gradient(bottom, $to 50%, $from 50%);
}

#lobby-container {
  margin-left: auto;
  margin-right: auto;
}

#propose-game {
  margin-top: 10px;
}

.busy {
  color: $busy;
  margin-right: $player_margin;
}

.lobby-card {
  padding: 3px;
  text-transform: capitalize;
}

.lobby-card.attack {
  color: #BB0000;
}

.lobby-card.attack.night {
  color: #880000;
}

.action {
  background-color: $action;
}

.reserve {
  background-color: $reserve;
}

.victory {
  background-color: $victory;
}

.reaction {
  background-color: $reaction;
}

.state {
  background-color: $state;
}

.artifact {
  background-color: $artifact;
}

.way {
  background-color: $way;
}

.duration {
  background-color: $duration;
}

.night {
  background-color: $night;
  color: white;
}

.treasure {
  background-color: $treasure;
}

.boon {
  background-color: $treasure;
}

.hex {
  background-color: $curse;
}

.curse {
  background-color: $curse;
}

.ruins {
  background-color: $ruins;
}

.event {
  background-color: $event;
}

.landmark {
  background-color: $landmark;
}

.project {
  background-color: $project;
}

.action.victory {
  @include gradient($action, $victory);
}

.ruins.treasure {
  @include gradient($ruins, $treasure);
}

.treasure.victory {
  @include gradient($treasure, $victory);
}

.action.treasure {
  @include gradient($action, $treasure);
}

.treasure.reserve {
  @include gradient($treasure, $reserve);
}

.victory.reserve {
  @include gradient($reserve, $victory);
}

.shelter.reaction {
  @include gradient($shelter, $reaction);
}

.treasure.reaction {
  @include gradient($treasure, $reaction);
}

.action.shelter {
  @include gradient($action, $shelter);
}

.shelter.victory {
  @include gradient($shelter, $victory);
}

.victory.reaction {
  @include gradient($victory, $reaction);
}

.duration.reaction {
  @include gradient($duration, $reaction);
}

.duration.night {
  @include gradient($duration, $night);
}

.action.night {
  @include gradient($action, $night);
}

#lobby-chat, #game-chat {
  height: 300px;
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: purple;
  padding: 9.5px;
}

#lobby #choose-sets {
  margin-bottom: 5px;
}

.choose-set-container {
  min-width: 112px;
}

#lobby label {
  padding-left: 2px;
}

.lobby-instructions {
  text-decoration: underline;
  margin-bottom: 5px;
}