Drop PHP requiremeent: use localStorage

[westcastle.git] / css / index.css

diff --git a/css/index.css b/css/index.css
index 54022f6..ece613b 100644 (file)
--- a/css/index.css
+++ b/css/index.css
@@ -4,9 +4,8 @@
 
 body {
        font-family: Ubuntu, Verdana, sans-serif;
-       margin: 0;
-       width: 800px;
        margin: 0 auto;
+       width: 800px;
        font-size: 1.1rem;
 }
 
@@ -39,6 +38,27 @@ body {
     color: #f1f1f1;
 }
 
+img.logo {
+       width: 200px;
+       position: fixed;
+       display: block;
+       left: 0;
+       overflow-x: hidden;
+       padding: 20px 0 0 0;
+       margin: 0;
+       top: 350px;
+       z-index: 10;
+}
+
+.hide {
+       display: none;
+}
+
+.clear {
+       clear: both;
+       overflow: auto;
+}
+
 .main {
        margin-left: 200px; /* Same as the width of the sidenav */
        padding: 0px 10px;
@@ -53,6 +73,7 @@ body {
   font-size: 20px;
   padding: 10px 20px 10px 20px;
   text-decoration: none;
+       cursor: pointer;
 }
 
 .btn:hover {
@@ -61,10 +82,52 @@ body {
   text-decoration: none;
 }
 
+button.block {
+       display: block;
+       margin: 25px auto;
+}
+
 table th {
        font-weight: bold;
 }
 
+.left, .right {
+       float: left;
+       width: 50%;
+}
+
+.button-container-horizontal, .button-container-vertical {
+       margin: 15px 0;
+       text-align: center;
+}
+.button-container-vertical {
+       float: left;
+}
+/* All children except first: margin: 30px */
+.button-container-horizontal .btn:not(:first-child) {
+       margin-left: 30px;
+}
+.button-container-vertical .btn {
+       display: block;
+       margin-left: 30px;
+}
+.button-container-vertical .btn:not(:first-child) {
+       margin-top: 30px;
+}
+
+button.validate {
+       background-image: linear-gradient(to bottom, #6fa162, #40992e);
+}
+button.validate:hover {
+       background-image: linear-gradient(to bottom, #37cc4e, #40c24f);
+}
+button.cancel {
+       background-image: linear-gradient(to bottom, #d93470, #b82b47);
+}
+button.cancel:hover {
+       background-image: linear-gradient(to bottom, #fc433c, #d93434);
+}
+
 /* players div */
 
 #players {
@@ -77,11 +140,6 @@ table th {
        text-align: center;
 }
 
-#active, #inactive {
-       float: left;
-       width: 50%;
-}
-
 #inactive table {
        opacity: 0.6;
 }
@@ -115,65 +173,16 @@ table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):ho
        background-color: lightyellow;
 }
 
-/* ranking div */
-
-#ranking {
-       margin-bottom: 15px;
-}
-
-table.ranking {
-       border-collapse: collapse;
-       width: 500px;
-       margin: 0 auto;
-       font-size: 1.1rem;
-}
-
-table.ranking td
-{
-       border: 1px solid #ddd;
-       padding: 10px;
-}
-table.ranking th {
-       padding: 1em 10px;
-       text-align: left;
-}
-
-table.ranking tr:not(.title) {
-       background-color: #aaa;
-}
-table.ranking tr:not(.title):nth-child(even){
-       background-color: #ccc;
-}
-table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
-       background-color: lightyellow;
-}
-
-table.ranking th.scoring {
-       cursor: pointer;
-}
-
-.active {
-       background-color: yellow;
-}
-
 /* pairings div */
 
-button.block {
-       display: block;
-       margin: 30px auto;
-}
-
-.button-container {
-       margin-top: 30px;
-       text-align: center;
+.warning {
+       color: red;
+       margin-top: 25px;
 }
 
-button.cancel {
-       margin-left: 30px;
-       background-image: linear-gradient(to bottom, #d93470, #b82b47);
-}
-button.cancel:hover {
-       background-image: linear-gradient(to bottom, #fc433c, #d93434);
+span.link {
+       color: darkblue;
+       cursor: pointer;
 }
 
 .toto {
@@ -202,9 +211,6 @@ td.score {
 .unpaired {
        cursor: default;
 }
-.scored {
-       cursor: default;
-}
 
 .pairing > table {
        font-size: 1.1rem;
@@ -237,3 +243,63 @@ td.score {
 #scoreInput table th {
        padding-bottom: 10px;
 }
+
+/* Timer (dimensions given in javascript) */
+
+#timer {
+       position: absolute;
+       z-index: 100;
+       left: 0;
+       top: 0;
+       background-color: white;
+       cursor: pointer;
+       text-align: center;
+}
+
+.timeout {
+       color: red;
+}
+
+img.close-cross {
+       display: block;
+       position: absolute;
+       top: 0;
+       right: 0;
+       width: 30px;
+}
+
+/* ranking div */
+
+#ranking {
+       margin-bottom: 15px;
+       overflow: auto;
+}
+
+table.ranking {
+       border-collapse: collapse;
+       width: 500px;
+       margin: 0 auto;
+       font-size: 1.1rem;
+       display: block;
+       float: left;
+}
+
+table.ranking td
+{
+       border: 1px solid #ddd;
+       padding: 10px;
+}
+table.ranking th {
+       padding: 1em 10px;
+       text-align: left;
+}
+
+table.ranking tr:not(.title) {
+       background-color: #aaa;
+}
+table.ranking tr:not(.title):nth-child(even){
+       background-color: #ccc;
+}
+table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover {
+       background-color: lightyellow;
+}