OLD | NEW |
| (Empty) |
1 body, img, div { | |
2 font-family: Verdana; | |
3 margin: 0; | |
4 padding: 0; | |
5 } | |
6 | |
7 table { | |
8 width: auto; | |
9 border-collapse: collapse; | |
10 border-spacing: 0; | |
11 padding: 8px; | |
12 } | |
13 | |
14 td { | |
15 border-top: 1px solid #DDD; | |
16 padding: 16px; | |
17 } | |
18 thead > tr > td { | |
19 border: none; | |
20 } | |
21 | |
22 button { | |
23 font-family: Verdana; | |
24 font-weight: 900; | |
25 } | |
26 | |
27 input[type="checkbox"] { | |
28 -webkit-appearance: none; | |
29 -moz-appearance: none; | |
30 width: 20px; | |
31 height:20px; | |
32 padding: 2px; | |
33 background: #EEE; | |
34 border-radius: 2px; | |
35 box-shadow: inset 0 0 8px -2px black; | |
36 } | |
37 | |
38 input[type="checkbox"]:checked { | |
39 background: #a9db80; | |
40 background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); | |
41 } | |
42 | |
43 input[type="checkbox"]:active { | |
44 background: #a9db80; | |
45 background: -webkit-linear-gradient(top, #009ec3 0%,#00b7ea 100%); | |
46 } | |
47 | |
48 input[type="checkbox"].lastselected { | |
49 padding: 0; | |
50 border: 2px solid #009ec3; | |
51 box-shadow: inset 0 0 8px -2px black, 0 0 6px black; | |
52 } | |
53 | |
54 .commit { | |
55 position: absolute; | |
56 top: 8px; | |
57 right: 8px; | |
58 } | |
59 | |
60 .commit > button { | |
61 border: 1px solid #00687F; | |
62 border-radius: 4px; | |
63 padding: 8px; | |
64 color: white; | |
65 text-shadow: 0 0 4px black; | |
66 box-shadow: 0 0 8px black; | |
67 background: #a9db80; | |
68 background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); | |
69 } | |
70 | |
71 .commit > button:active { | |
72 background: #96c56f; | |
73 background: -webkit-linear-gradient(top, #96c56f 0%,#a9db80 100%); | |
74 } | |
75 | |
76 .common-name { | |
77 vertical-align: top; | |
78 } | |
79 | |
80 | |
81 .gm-image { | |
82 border: 1px dotted black; | |
83 } | |
84 | |
85 .gm-image:hover { | |
86 border: 1px dashed black; | |
87 } | |
88 | |
89 .selected { | |
90 background: #ffff88; | |
91 } | |
92 | |
93 .left-image { | |
94 float: right; | |
95 } | |
96 | |
97 .right-image { | |
98 text-align: right; | |
99 } | |
100 | |
101 .success-flash { | |
102 -webkit-animation-duration: 0.5s; | |
103 -webkit-animation-name: greenflash; | |
104 } | |
105 | |
106 .failure-flash { | |
107 -webkit-animation-duration: 0.8s; | |
108 -webkit-animation-name: redflash; | |
109 } | |
110 | |
111 @-webkit-keyframes greenflash { | |
112 from { | |
113 background-color: #8F8; | |
114 } | |
115 | |
116 to { | |
117 background-color: #FFF | |
118 } | |
119 } | |
120 | |
121 @-webkit-keyframes redflash { | |
122 from { | |
123 background-color: #F88; | |
124 } | |
125 | |
126 to { | |
127 background-color: #FFF | |
128 } | |
129 } | |
130 | |
131 .result { | |
132 padding: 8px; | |
133 cursor: default; | |
134 -webkit-filter: grayscale(30%) | |
135 } | |
136 | |
137 .result:hover { | |
138 border: 2px dotted #DDD; | |
139 padding: 6px; | |
140 -webkit-filter: grayscale(0) | |
141 } | |
142 | |
143 .result-0 { | |
144 background-color: #268bd2; | |
145 } | |
146 | |
147 .result-1 { | |
148 background-color: #d33682; | |
149 } | |
150 | |
151 .result-2 { | |
152 background-color: #b58900; | |
153 } | |
154 | |
155 .result-3 { | |
156 background-color: #cb4b16; | |
157 } | |
158 | |
159 .result-4 { | |
160 background-color: #6c71c4; | |
161 } | |
162 | |
163 .result-5 { | |
164 background-color: #dc322f; | |
165 } | |
166 | |
167 .result-6 { | |
168 background-color: #2aa198; | |
169 } | |
170 | |
171 .result-7 { | |
172 background-color: #859900; | |
173 } | |
OLD | NEW |