register coffeescript compiler

[peach-cgt.git] / style.less

diff --git a/style.less b/style.less
index 5df22bd..dba9329 100644 (file)
--- a/style.less
+++ b/style.less
@@ -1,6 +1,28 @@
+// 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;
@@ -8,10 +30,11 @@
        -moz-box-shadow:    @val;
 }
 
-body {
+body, #other_player_url {
        color: black;
        background: #ccc;
        font-size: 11px;
+       font-weight: normal;
        margin: 0;
        padding: 10px;
 }
@@ -22,25 +45,48 @@ h1 {
        color: blue;
 }
 
+#main_header {
+       margin-bottom: 0px; // no decenders, big font
+}
+
+#main_warning {
+       color: red;
+       font-weight: bold;
+       margin-top: 0px;
+}
+
 #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;
@@ -56,13 +102,100 @@ h1 {
        }
 }
 
+.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;
+}
+
+#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;
+}