+@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;
}
#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;
.shadow(1px, 1px, 8px, 0.4);
- border-radius: 4px;
+ &:hover {
+ z-index: 9999 !important;
+ }
.button {
display: none;
border: 1px solid #aaa;
}
}
+.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 {
+.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;
+}