X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=style.less;h=31bb99d9afcd2e528e8b6e44964071bcbf9eaea7;hb=bb72a635150495387543c86077ccfcec853a5f11;hp=e0899b0ac50152836194ec482a5ff3eb51fc4632;hpb=f46ce45eaf3db64e5d7bd9ea2c19ed3d4431c35a;p=peach-cgt.git

diff --git a/style.less b/style.less
index e0899b0..31bb99d 100644
--- a/style.less
+++ b/style.less
@@ -1,6 +1,23 @@
+@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;
@@ -23,21 +40,119 @@ h1 {
 }
 
 #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;
+		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;
 }