style.less

   1 // style.less
   2 // Copyright (C) 2011  Jason Woofenden
   3 // Lincensed under CC0 (ie public domain).
   4 // Note that most of Peach CGT is AGPLv3
   5
   6 @table-width: 1000px;
   7 @table-height: 800px;
   8
   9 @card-width: 100px;
  10 @card-height: 140px;
  11
  12 @pile-width: @card-width * 1.3;
  13 @hand-height: @card-height * 1.3;
  14
  15 @area-lightness: 44%;
  16 @area-border-color: #ccc;
  17 @your-side-color: #ffe2e2;
  18 @my-side-color: #e2ffe2;
  19
  20 #loading_card {
  21         top: (@table-height - @card-height) / 2 - 4px;
  22         left: (@table-width - @card-width) / 2 - 4px;
  23 }
  24
  25
  26 .shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  27         @val: @x @y @blur rgba(0, 0, 0, @alpha);
  28         box-shadow:         @val;
  29         -webkit-box-shadow: @val;
  30         -moz-box-shadow:    @val;
  31 }
  32
  33 body, #other_player_url {
  34         color: black;
  35         background: #ccc;
  36         font-size: 11px;
  37         font-weight: normal;
  38         margin: 0;
  39         padding: 10px;
  40 }
  41
  42 h1 {
  43         margin-top: 0;
  44         font: bold 20px 'Verdana';
  45         color: blue;
  46 }
  47
  48 #main_header {
  49         margin-bottom: 0px; // no decenders, big font
  50 }
  51
  52 #main_warning {
  53         color: red;
  54         font-weight: bold;
  55         margin-top: 0px;
  56 }
  57
  58 #table {
  59         width: @table-width;
  60         height: @table-height;
  61         background: #eee;
  62         position: relative;
  63         .shadow(2px, 2px, 10px, 0.4);
  64         border: 2px solid #468;
  65 }
  66
  67 .card, .blank_card {
  68         width: @card-width;
  69         height: @card-height;
  70         padding: 2px;
  71         position: absolute;
  72         border-radius: 4px;
  73 }
  74
  75 .blank_card {
  76         border: 1px solid #777;
  77 }
  78
  79 .card {
  80         background: #fff;
  81         border: 2px solid #fff;
  82         overflow: hidden;
  83         .shadow(1px, 1px, 8px, 0.4);
  84
  85         &:hover {
  86                 height: auto;
  87                 min-height: @card-height;
  88                 z-index: 9999 !important;
  89         }
  90         .button {
  91                 display: none;
  92                 border: 1px solid #aaa;
  93                 border-radius: 2px;
  94                 background-color: #fff;
  95         }
  96         .button:hover {
  97                 background: #eee;
  98                 cursor: pointer;
  99         }
 100         &:hover .button {
 101                 display: block;
 102         }
 103 }
 104
 105 .your_card {
 106         -webkit-transform: rotate(180deg);
 107         -moz-transform: rotate(180deg);
 108         -ms-transform: rotate(180deg);
 109         -o-transform: rotate(180deg);
 110         transform: rotate(180deg);
 111         &:hover {
 112                 -webkit-transform: none;
 113                 -moz-transform: none;
 114                 -ms-transform: none;
 115                 -o-transform: none;
 116                 transform: none;
 117         }
 118 }
 119
 120 .marked {
 121         border-color: black;
 122 }
 123
 124 .flipped, .your_hand {
 125         .cardtext {
 126                 display: none;
 127         }
 128         background-color: #ddd;
 129 }
 130
 131 #my_side, #your_side {
 132         position: absolute;
 133         width: @table-width;
 134         height: @hand-height;
 135         left: 0;
 136 }
 137
 138 #your_side {
 139         background: @your-side-color;
 140         border-bottom: 2px solid @area-border-color;
 141         top: 0;
 142 }
 143
 144 #my_side {
 145         background: @my-side-color;
 146         border-top: 2px solid @area-border-color;
 147         top: @table-height - @hand-height - 2px;
 148 }
 149
 150 .discard_area, .deck_area, .hand_area {
 151         position: absolute;
 152         height: @hand-height;
 153 }
 154 .discard_area, .deck_area {
 155         border-right: 2px solid @area-border-color;
 156         width: @pile-width;
 157 }
 158 .hand_area {
 159         width: @table-width - (@pile-width + 2px) * 2;
 160 }
 161 .discard_area {
 162         left: 0px;
 163 }
 164 .deck_area {
 165         left: @pile-width + 2px;
 166 }
 167 .hand_area {
 168         left: (@pile-width + 2px) * 2;
 169 }
 170
 171 #your_side div {
 172         top: 0px;
 173 }
 174
 175 #my_side div {
 176         top: 0; // @table-height - @hand-height;
 177 }
 178
 179 #deck_designer {
 180         position: absolute;
 181         top: 40px;
 182         left: 10px;
 183         background: white;
 184         z-index: 10000;
 185         width: @table-width + 10;
 186         height: @table-height + 20;
 187         overflow: scroll;
 188         .shadow(3px, 3px, 16px, 0.8);
 189
 190         li, div {
 191                 cursor: pointer;
 192         }
 193
 194         .in_deck {
 195                 color: #080;
 196         }
 197 }
 198
 199 #copyright {
 200         padding-top: 4px;
 201 }