| 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 |