default-style-ref.html (7915B)
1 <!DOCTYPE html> 2 <html> 3 <link rel='stylesheet' type='text/css' href='style.css'> 4 <style> 5 /* optimum = 0.0 */ 6 div:nth-child(1) > .meter-optimum { width: 0%; } 7 div:nth-child(2) > .meter-optimum { width: 10%; } 8 div:nth-child(3) > .meter-sub-optimum { width: 30%; } 9 div:nth-child(4) > .meter-sub-optimum { width: 50%; } 10 div:nth-child(5) > .meter-sub-optimum { width: 70%; } 11 div:nth-child(6) > .meter-sub-sub-optimum { width: 80%; } 12 div:nth-child(7) > .meter-sub-sub-optimum { width: 100%; } 13 14 /* optimum = 0.1 */ 15 div:nth-child(8) > .meter-optimum { width: 0%; } 16 div:nth-child(9) > .meter-optimum { width: 10%; } 17 div:nth-child(10) > .meter-sub-optimum { width: 30%; } 18 div:nth-child(11) > .meter-sub-optimum { width: 50%; } 19 div:nth-child(12) > .meter-sub-optimum { width: 70%; } 20 div:nth-child(13) > .meter-sub-sub-optimum { width: 80%; } 21 div:nth-child(14) > .meter-sub-sub-optimum { width: 100%; } 22 23 /* optimum = 0.3 */ 24 div:nth-child(15) > .meter-sub-optimum { width: 0%; } 25 div:nth-child(16) > .meter-sub-optimum { width: 10%; } 26 div:nth-child(17) > .meter-optimum { width: 30%; } 27 div:nth-child(18) > .meter-optimum { width: 50%; } 28 div:nth-child(19) > .meter-optimum { width: 70%; } 29 div:nth-child(20) > .meter-sub-optimum { width: 80%; } 30 div:nth-child(21) > .meter-sub-optimum { width: 100%; } 31 32 /* optimum = 0.5 */ 33 div:nth-child(22) > .meter-sub-optimum { width: 0%; } 34 div:nth-child(23) > .meter-sub-optimum { width: 10%; } 35 div:nth-child(24) > .meter-optimum { width: 30%; } 36 div:nth-child(25) > .meter-optimum { width: 50%; } 37 div:nth-child(26) > .meter-optimum { width: 70%; } 38 div:nth-child(27) > .meter-sub-optimum { width: 80%; } 39 div:nth-child(28) > .meter-sub-optimum { width: 100%; } 40 41 /* optimum = 0.7 */ 42 div:nth-child(29) > .meter-sub-optimum { width: 0%; } 43 div:nth-child(30) > .meter-sub-optimum { width: 10%; } 44 div:nth-child(31) > .meter-optimum { width: 30%; } 45 div:nth-child(32) > .meter-optimum { width: 50%; } 46 div:nth-child(33) > .meter-optimum { width: 70%; } 47 div:nth-child(34) > .meter-sub-optimum { width: 80%; } 48 div:nth-child(35) > .meter-sub-optimum { width: 100%; } 49 50 /* optimum = 0.8 */ 51 div:nth-child(36) > .meter-sub-sub-optimum { width: 0%; } 52 div:nth-child(37) > .meter-sub-sub-optimum { width: 10%; } 53 div:nth-child(38) > .meter-sub-optimum { width: 30%; } 54 div:nth-child(39) > .meter-sub-optimum { width: 50%; } 55 div:nth-child(40) > .meter-sub-optimum { width: 70%; } 56 div:nth-child(41) > .meter-optimum { width: 80%; } 57 div:nth-child(42) > .meter-optimum { width: 100%; } 58 59 /* optimum = 1.0 */ 60 div:nth-child(43) > .meter-sub-sub-optimum { width: 0%; } 61 div:nth-child(44) > .meter-sub-sub-optimum { width: 10%; } 62 div:nth-child(45) > .meter-sub-optimum { width: 30%; } 63 div:nth-child(46) > .meter-sub-optimum { width: 50%; } 64 div:nth-child(47) > .meter-sub-optimum { width: 70%; } 65 div:nth-child(48) > .meter-optimum { width: 80%; } 66 div:nth-child(49) > .meter-optimum { width: 100%; } 67 </style> 68 <body> 69 <!-- optimum = 0.0 --> 70 <div class="meter-element"> 71 <div class="meter-optimum"> 72 </div> 73 </div> 74 <div class="meter-element"> 75 <div class="meter-optimum"> 76 </div> 77 </div> 78 <div class="meter-element"> 79 <div class="meter-sub-optimum"> 80 </div> 81 </div> 82 <div class="meter-element"> 83 <div class="meter-sub-optimum"> 84 </div> 85 </div> 86 <div class="meter-element"> 87 <div class="meter-sub-optimum"> 88 </div> 89 </div> 90 <div class="meter-element"> 91 <div class="meter-sub-sub-optimum"> 92 </div> 93 </div> 94 <div class="meter-element"> 95 <div class="meter-sub-sub-optimum"> 96 </div> 97 </div> 98 99 <!-- optimum = 0.1 --> 100 <div class="meter-element"> 101 <div class="meter-optimum"> 102 </div> 103 </div> 104 <div class="meter-element"> 105 <div class="meter-optimum"> 106 </div> 107 </div> 108 <div class="meter-element"> 109 <div class="meter-sub-optimum"> 110 </div> 111 </div> 112 <div class="meter-element"> 113 <div class="meter-sub-optimum"> 114 </div> 115 </div> 116 <div class="meter-element"> 117 <div class="meter-sub-optimum"> 118 </div> 119 </div> 120 <div class="meter-element"> 121 <div class="meter-sub-sub-optimum"> 122 </div> 123 </div> 124 <div class="meter-element"> 125 <div class="meter-sub-sub-optimum"> 126 </div> 127 </div> 128 129 <!-- optimum = 0.3 --> 130 <div class="meter-element"> 131 <div class="meter-sub-optimum"> 132 </div> 133 </div> 134 <div class="meter-element"> 135 <div class="meter-sub-optimum"> 136 </div> 137 </div> 138 <div class="meter-element"> 139 <div class="meter-optimum"> 140 </div> 141 </div> 142 <div class="meter-element"> 143 <div class="meter-optimum"> 144 </div> 145 </div> 146 <div class="meter-element"> 147 <div class="meter-optimum"> 148 </div> 149 </div> 150 <div class="meter-element"> 151 <div class="meter-sub-optimum"> 152 </div> 153 </div> 154 <div class="meter-element"> 155 <div class="meter-sub-optimum"> 156 </div> 157 </div> 158 159 <!-- optimum = 0.5 --> 160 <div class="meter-element"> 161 <div class="meter-sub-optimum"> 162 </div> 163 </div> 164 <div class="meter-element"> 165 <div class="meter-sub-optimum"> 166 </div> 167 </div> 168 <div class="meter-element"> 169 <div class="meter-optimum"> 170 </div> 171 </div> 172 <div class="meter-element"> 173 <div class="meter-optimum"> 174 </div> 175 </div> 176 <div class="meter-element"> 177 <div class="meter-optimum"> 178 </div> 179 </div> 180 <div class="meter-element"> 181 <div class="meter-sub-optimum"> 182 </div> 183 </div> 184 <div class="meter-element"> 185 <div class="meter-sub-optimum"> 186 </div> 187 </div> 188 189 <!-- optimum = 0.7 --> 190 <div class="meter-element"> 191 <div class="meter-sub-optimum"> 192 </div> 193 </div> 194 <div class="meter-element"> 195 <div class="meter-sub-optimum"> 196 </div> 197 </div> 198 <div class="meter-element"> 199 <div class="meter-optimum"> 200 </div> 201 </div> 202 <div class="meter-element"> 203 <div class="meter-optimum"> 204 </div> 205 </div> 206 <div class="meter-element"> 207 <div class="meter-optimum"> 208 </div> 209 </div> 210 <div class="meter-element"> 211 <div class="meter-sub-optimum"> 212 </div> 213 </div> 214 <div class="meter-element"> 215 <div class="meter-sub-optimum"> 216 </div> 217 </div> 218 219 <!-- optimum = 0.8 --> 220 <div class="meter-element"> 221 <div class="meter-sub-sub-optimum"> 222 </div> 223 </div> 224 <div class="meter-element"> 225 <div class="meter-sub-sub-optimum"> 226 </div> 227 </div> 228 <div class="meter-element"> 229 <div class="meter-sub-optimum"> 230 </div> 231 </div> 232 <div class="meter-element"> 233 <div class="meter-sub-optimum"> 234 </div> 235 </div> 236 <div class="meter-element"> 237 <div class="meter-sub-optimum"> 238 </div> 239 </div> 240 <div class="meter-element"> 241 <div class="meter-optimum"> 242 </div> 243 </div> 244 <div class="meter-element"> 245 <div class="meter-optimum"> 246 </div> 247 </div> 248 249 <!-- optimum = 1.0 --> 250 <div class="meter-element"> 251 <div class="meter-sub-sub-optimum"> 252 </div> 253 </div> 254 <div class="meter-element"> 255 <div class="meter-sub-sub-optimum"> 256 </div> 257 </div> 258 <div class="meter-element"> 259 <div class="meter-sub-optimum"> 260 </div> 261 </div> 262 <div class="meter-element"> 263 <div class="meter-sub-optimum"> 264 </div> 265 </div> 266 <div class="meter-element"> 267 <div class="meter-sub-optimum"> 268 </div> 269 </div> 270 <div class="meter-element"> 271 <div class="meter-optimum"> 272 </div> 273 </div> 274 <div class="meter-element"> 275 <div class="meter-optimum"> 276 </div> 277 </div> 278 </body> 279 </html>