+// style.less
+// Copyright (C) 2011 Jason Woofenden
+// Lincensed under CC0 (ie public domain).
+// Note that most of Peach CGT is AGPLv3
+
+@table-width: 1000px;
+@table-height: 800px;
+
@card-width: 100px;
@card-height: 140px;
+@pile-width: @card-width * 1.3;
+@hand-height: @card-height * 1.3;
+
+@area-lightness: 44%;
+@area-border-color: #ccc;
+@your-side-color: #ffe2e2;
+@my-side-color: #e2ffe2;
+
+#loading_card {
+ top: (@table-height - @card-height) / 2 - 4px;
+ left: (@table-width - @card-width) / 2 - 4px;
+}
+
+
.shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @val;
-moz-box-shadow: @val;
}
-body {
+body, #other_player_url {
color: black;
background: #ccc;
font-size: 11px;
+ font-weight: normal;
margin: 0;
padding: 10px;
}
}
#table {
- height: 700px;
- width: 960px;
+ width: @table-width;
+ height: @table-height;
background: #eee;
position: relative;
.shadow(2px, 2px, 10px, 0.4);
border: 2px solid #468;
}
-.card {
+.card, .blank_card {
width: @card-width;
height: @card-height;
padding: 2px;
position: absolute;
+ border-radius: 4px;
+}
+
+.blank_card {
+ border: 1px solid #777;
+}
+
+.card {
background: #fff;
border: 2px solid #fff;
+ overflow: hidden;
.shadow(1px, 1px, 8px, 0.4);
- border-radius: 4px;
+
+ &:hover {
+ height: auto;
+ min-height: @card-height;
+ z-index: 9999 !important;
+ }
+ .button {
+ display: none;
+ border: 1px solid #aaa;
+ border-radius: 2px;
+ background-color: #fff;
+ }
+ .button:hover {
+ background: #eee;
+ cursor: pointer;
+ }
+ &:hover .button {
+ display: block;
+ }
+}
+
+.your_card {
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ transform: rotate(180deg);
+ &:hover {
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ -o-transform: none;
+ transform: none;
+ }
+}
+
+.marked {
+ border-color: black;
+}
+
+.flipped, .your_hand {
+ .cardtext {
+ display: none;
+ }
+ background-color: #ddd;
+}
+
+#my_side, #your_side {
+ position: absolute;
+ width: @table-width;
+ height: @hand-height;
+ left: 0;
+}
+
+#your_side {
+ background: @your-side-color;
+ border-bottom: 2px solid @area-border-color;
+ top: 0;
+}
+
+#my_side {
+ background: @my-side-color;
+ border-top: 2px solid @area-border-color;
+ top: @table-height - @hand-height - 2px;
+}
+
+.discard_area, .deck_area, .hand_area {
+ position: absolute;
+ height: @hand-height;
+}
+.discard_area, .deck_area {
+ border-right: 2px solid @area-border-color;
+ width: @pile-width;
+}
+.hand_area {
+ width: @table-width - (@pile-width + 2px) * 2;
+}
+.discard_area {
+ left: 0px;
+}
+.deck_area {
+ left: @pile-width + 2px;
+}
+.hand_area {
+ left: (@pile-width + 2px) * 2;
+}
+
+#your_side div {
+ top: 0px;
+}
+
+#my_side div {
+ top: 0; // @table-height - @hand-height;
+}
+
+#deck_designer {
+ position: absolute;
+ top: 40px;
+ left: 10px;
+ background: white;
+ z-index: 10000;
+ width: @table-width + 10;
+ height: @table-height + 20;
+ overflow: scroll;
+ .shadow(3px, 3px, 16px, 0.8);
+
+ li, div {
+ cursor: pointer;
+ }
+
+ .in_deck {
+ color: #080;
+ }
+}
+
+#copyright {
+ padding-top: 4px;
}