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 #table {
  49         width: @table-width;
  50         height: @table-height;
  51         background: #eee;
  52         position: relative;
  53         .shadow(2px, 2px, 10px, 0.4);
  54         border: 2px solid #468;
  55 }
  56
  57 .card, .blank_card {
  58         width: @card-width;
  59         height: @card-height;
  60         padding: 2px;
  61         position: absolute;
  62         border-radius: 4px;
  63 }
  64
  65 .blank_card {
  66         border: 1px solid #777;
  67 }
  68
  69 .card {
  70         background: #fff;
  71         border: 2px solid #fff;
  72         overflow: hidden;
  73         .shadow(1px, 1px, 8px, 0.4);
  74
  75         &:hover {
  76                 height: auto;
  77                 min-height: @card-height;
  78                 z-index: 9999 !important;
  79         }
  80         .button {
  81                 display: none;
  82                 border: 1px solid #aaa;
  83                 border-radius: 2px;
  84                 background-color: #fff;
  85         }
  86         .button:hover {
  87                 background: #eee;
  88                 cursor: pointer;
  89         }
  90         &:hover .button {
  91                 display: block;
  92         }
  93 }
  94
  95 .your_card {
  96         -webkit-transform: rotate(180deg);
  97         -moz-transform: rotate(180deg);
  98         -ms-transform: rotate(180deg);
  99         -o-transform: rotate(180deg);
 100         transform: rotate(180deg);
 101         &:hover {
 102                 -webkit-transform: none;
 103                 -moz-transform: none;
 104                 -ms-transform: none;
 105                 -o-transform: none;
 106                 transform: none;
 107         }
 108 }
 109
 110 .marked {
 111         border-color: black;
 112 }
 113
 114 .flipped, .your_hand {
 115         .cardtext {
 116                 display: none;
 117         }
 118         background-color: #ddd;
 119 }
 120
 121 #my_side, #your_side {
 122         position: absolute;
 123         width: @table-width;
 124         height: @hand-height;
 125         left: 0;
 126 }
 127
 128 #your_side {
 129         background: @your-side-color;
 130         border-bottom: 2px solid @area-border-color;
 131         top: 0;
 132 }
 133
 134 #my_side {
 135         background: @my-side-color;
 136         border-top: 2px solid @area-border-color;
 137         top: @table-height - @hand-height - 2px;
 138 }
 139
 140 .discard_area, .deck_area, .hand_area {
 141         position: absolute;
 142         height: @hand-height;
 143 }
 144 .discard_area, .deck_area {
 145         border-right: 2px solid @area-border-color;
 146         width: @pile-width;
 147 }
 148 .hand_area {
 149         width: @table-width - (@pile-width + 2px) * 2;
 150 }
 151 .discard_area {
 152         left: 0px;
 153 }
 154 .deck_area {
 155         left: @pile-width + 2px;
 156 }
 157 .hand_area {
 158         left: (@pile-width + 2px) * 2;
 159 }
 160
 161 #your_side div {
 162         top: 0px;
 163 }
 164
 165 #my_side div {
 166         top: 0; // @table-height - @hand-height;
 167 }
 168
 169 #deck_designer {
 170         position: absolute;
 171         top: 40px;
 172         left: 10px;
 173         background: white;
 174         z-index: 10000;
 175         width: @table-width + 10;
 176         height: @table-height + 20;
 177         overflow: scroll;
 178         .shadow(3px, 3px, 16px, 0.8);
 179
 180         li, div {
 181                 cursor: pointer;
 182         }
 183
 184         .in_deck {
 185                 color: #080;
 186         }
 187 }
 188
 189 #copyright {
 190         padding-top: 4px;
 191 }