style.less

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