minesweeper/src/main/webapp/pages/mines.css
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Thu, 14 Aug 2014 07:50:10 +0200
branchAppStore
changeset 197 197472ca59d4
parent 178 87d475e1cf75
child 199 b3c1d99205d6
permissions -rw-r--r--
Adressing comments from the first AppStore review: 1. don't mention android, 2. don't use word 'demo', replace it with 'showcase'.
     1 /**
     2  * The MIT License (MIT)
     3  *
     4  * Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
     5  *
     6  * Permission is hereby granted, free of charge, to any person obtaining a copy
     7  * of this software and associated documentation files (the "Software"), to deal
     8  * in the Software without restriction, including without limitation the rights
     9  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    10  * copies of the Software, and to permit persons to whom the Software is
    11  * furnished to do so, subject to the following conditions:
    12  *
    13  * The above copyright notice and this permission notice shall be included in
    14  * all copies or substantial portions of the Software.
    15  *
    16  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    17  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    18  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    19  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    20  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    21  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    22  * THE SOFTWARE.
    23  */
    24 /** main chess style **/
    25 #apptitle {
    26     font-size: 20px;
    27 }
    28 .log {
    29     margin-bottom: 10px;
    30 }
    31 
    32 .jumbotron {
    33     background-color: #fafafa;
    34 }
    35 
    36 table.field {
    37 }
    38 table.field td {
    39     border: 1px solid black;
    40     padding:10px;
    41     width: 56px;
    42     height: 56px;
    43     vertical-align: middle;
    44     text-align: center;
    45     font-size:4em;
    46 }
    47 
    48 table.field td div {
    49     position: relative;
    50     left: 0;
    51     top: 0;
    52 }
    53 
    54 @-moz-keyframes blinker {  
    55     0% { opacity: 0.9; }
    56     50% { opacity: 0.1; }
    57     100% { opacity: 0.9; }
    58 }
    59 
    60 @-webkit-keyframes blinker {  
    61     0% { opacity: 0.9; }
    62     50% { opacity: 0.1; }
    63     100% { opacity: 0.9; }
    64 }
    65 
    66 @keyframes blinker {  
    67     0% { opacity: 0.9; }
    68     50% { opacity: 0.1; }
    69     100% { opacity: 0.9; }
    70 } 
    71 table.MARKING td.UNKNOWN div:before {
    72     content: "\0026a0";
    73     color: #802420;
    74     
    75     -webkit-animation-name: blinker;
    76     -webkit-animation-duration: 3s;
    77     -webkit-animation-timing-function: linear;
    78     -webkit-animation-iteration-count: infinite;
    79 
    80     -moz-animation-name: blinker;
    81     -moz-animation-duration: 3s;
    82     -moz-animation-timing-function: linear;
    83     -moz-animation-iteration-count: infinite;
    84 
    85     animation-name: blinker;
    86     animation-duration: 3s;
    87     animation-timing-function: linear;
    88     animation-iteration-count: infinite;
    89 }
    90 
    91 table.field td.UNKNOWN {
    92     background-color: #D6E4E1;
    93     color: #D6E4E1;
    94     cursor: pointer;
    95 }
    96 table.field td.MARKED {
    97     background-color: #D6E4E1;
    98     cursor: pointer;
    99 }
   100 table.field td.EXPLOSION {
   101     background-color: #A31E39;
   102 }
   103 table.field td.DISCOVERED {
   104     background-color: #9DB2B1;
   105 }
   106 
   107 table.PLAYING td.UNKNOWN div::after {
   108     content: "\0026a0";
   109 }
   110 table.field td.EXPLOSION div::after {
   111     content: "\002717";
   112 }
   113 table.field td.DISCOVERED div::after {
   114     content: "\002714";
   115 }
   116 table.field td.MARKED div::after {
   117     content: "\0026a0";
   118 }
   119 table.field td.N_0 div::after {
   120     content: "\0026a0";
   121     background-color: white;
   122     color: white;
   123 }
   124 table.field td.N_1 div::after {
   125     content: "\002780";
   126 }
   127 table.field td.N_2 div::after {
   128     content: "\002781";
   129 }
   130 table.field td.N_3 div::after {
   131     content: "\002782";
   132 }
   133 table.field td.N_4 div::after {
   134     content: "\002783";
   135 }
   136 table.field td.N_5 div::after {
   137     content: "\002784";
   138 }
   139 table.field td.N_6 div::after {
   140     content: "\002785";
   141 }
   142 table.field td.N_7 div::after {
   143     content: "\002786";
   144 }
   145 table.field td.N_8 div::after {
   146     content: "\002787";
   147 }
   148 .but-orientation {
   149     margin-top:20px;
   150 }
   151 h3.log-h {
   152     border-top:1px solid silver;
   153 }
   154 .badge-status {
   155     display:inline-block;
   156     margin-left:20px;
   157     padding:5px;
   158     font-size:1em;
   159     text-shadow: none;
   160 }
   161 .btn {text-shadow: none;}
   162 .select {line-height: inherit;}
   163 .uneditable-input {
   164     margin-left: 0;
   165     color: black;
   166 }
   167 span.myturn {
   168     display: inline-block;
   169     position:relative;
   170     left:23px;
   171     padding:3px;
   172 }
   173 .whitePiece {
   174     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
   175     color: white;
   176 }