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