Mercurial > mbsePi-apps / file comparison
comparison: www-thermferm/css/style.css
www-thermferm/css/style.css
- changeset 709
- 5b6d7b640e52
- parent 708
- 13555c27b592
- child 710
- abe60578d695
equal
deleted
inserted
replaced
| 708:13555c27b592 | 709:5b6d7b640e52 |
|---|---|
| 1 /* | |
| 2 */ | |
| 3 | |
| 4 /* Reset default browser CSS. */ | |
| 5 html, body, div, span, applet, object, iframe, | |
| 6 h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| 7 a, abbr, acronym, address, big, cite, code, | |
| 8 del, dfn, em, font, img, ins, kbd, q, s, samp, | |
| 9 small, strike, strong, sub, sup, tt, var, | |
| 10 b, u, i, center, | |
| 11 dl, dt, dd, ol, ul, li, | |
| 12 fieldset, form, label, legend, | |
| 13 table, caption, tbody, tfoot, thead, tr, th, td { | |
| 14 background: transparent; | |
| 15 border: 0; | |
| 16 margin: 0; | |
| 17 padding: 0; | |
| 18 vertical-align: baseline; | |
| 19 } | |
| 20 | |
| 21 | |
| 22 body { | |
| 23 background: #fff; | |
| 24 color: #000; | |
| 25 font-family: Verdana, Arial, sans-serif; | |
| 26 width: 980px; | |
| 27 font-size: 12px; | |
| 28 margin: 0px; | |
| 29 } | |
| 30 | |
| 31 | |
| 32 #jqxWidget { | |
| 33 width: 980px; | |
| 34 height: 510px; | |
| 35 float: left; | |
| 36 } | |
| 37 | |
| 38 #header { | |
| 39 width: 978px; | |
| 40 height: 78px; | |
| 41 float: left; | |
| 42 border: 1px solid #4297d7; | |
| 43 border-radius: 5px 5px 5px 5px; | |
| 44 background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; | |
| 45 color: #ffffff; | |
| 46 font-weight: bold; | |
| 47 } | |
| 48 | |
| 49 #title { | |
| 50 width: 500px; | |
| 51 height: 50px; | |
| 52 float: left; | |
| 53 margin-top: 23px; | |
| 54 font-size: 1.8em; | |
| 55 color: #FFD700; | |
| 56 text-align: center; | |
| 57 font-family: comic sans ms; | |
| 58 } | |
| 59 | |
| 60 #room { | |
| 61 width: 100px; | |
| 62 height: 48px; | |
| 63 float: left; | |
| 64 border-radius: 5px 5px 5px 5px; | |
| 65 background-color: #222; | |
| 66 text-align: center; | |
| 67 margin-top: 15px; | |
| 68 } | |
| 69 | |
| 70 .rtemp { | |
| 71 font-weight: bold; | |
| 72 font-size: 1.2em; | |
| 73 color: yellow; | |
| 74 margin-top: 3px; | |
| 75 } | |
| 76 | |
| 77 #content { | |
| 78 width: 978px; | |
| 79 height: 428px; | |
| 80 float: left; | |
| 81 border: 1px solid; | |
| 82 border-color: #aaa; | |
| 83 border-radius: 5px 5px 5px 5px; | |
| 84 } | |
| 85 | |
| 86 #errors { | |
| 87 height: 35px; | |
| 88 width: 978px; | |
| 89 float: left; | |
| 90 text-align: center; | |
| 91 font-size: 1.5em; | |
| 92 margin-top: 10px; | |
| 93 color: #ff0000; | |
| 94 } | |
| 95 | |
| 96 #etable { | |
| 97 height: 320px; | |
| 98 width: 978px; | |
| 99 float: left; | |
| 100 overflow: auto; | |
| 101 } | |
| 102 | |
| 103 #atable { | |
| 104 height: 60px; | |
| 105 width: 978px; | |
| 106 float: left; | |
| 107 } | |
| 108 | |
| 109 table.setup { | |
| 110 margin-left: auto; | |
| 111 margin-right: auto; | |
| 112 border-collapse: collapse; | |
| 113 } | |
| 114 | |
| 115 .trhead { | |
| 116 font-weight: bold; | |
| 117 background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; | |
| 118 } | |
| 119 | |
| 120 tr.setup:nth-child(odd) { | |
| 121 background: #FFFFFF; | |
| 122 } | |
| 123 | |
| 124 tr.setup:nth-child(even) { | |
| 125 background: #CCFFFF; | |
| 126 } | |
| 127 | |
| 128 td.setup { | |
| 129 padding: 1px 3px 1px 3px; | |
| 130 } | |
| 131 | |
| 132 /* | |
| 133 * Editor screens | |
| 134 */ | |
| 135 table.editor { | |
| 136 margin-left: auto; | |
| 137 margin-right: auto; | |
| 138 border-collapse: collapse; | |
| 139 background-color: #eee; | |
| 140 } | |
| 141 | |
| 142 tr.editor { | |
| 143 height: 30px; | |
| 144 } | |
| 145 | |
| 146 td.editname { | |
| 147 width: 150px; | |
| 148 padding: 1px 3px 1px 3px; | |
| 149 } | |
| 150 | |
| 151 td.editfield { | |
| 152 width: 300px; | |
| 153 padding: 1px 3px 1px 3px; | |
| 154 } | |
| 155 | |
| 156 td.editsub { | |
| 157 width: 50px; | |
| 158 padding: 1px 3px 1px 3px; | |
| 159 } | |
| 160 | |
| 161 #jqxTabs { | |
| 162 width: 980px; | |
| 163 height: 440px; | |
| 164 float: left; | |
| 165 } | |
| 166 | |
| 167 #fermentor { | |
| 168 height: 382px; | |
| 169 width: 968px; | |
| 170 background: #fff; | |
| 171 margin: 5px; | |
| 172 float: left; | |
| 173 } | |
| 174 | |
| 175 /* | |
| 176 * +-------------panel_top--------------+ | |
| 177 * |+----------------++----------------+| | |
| 178 * || || powerled || | |
| 179 * || selector |+----------------+| | |
| 180 * || |+----------------+| | |
| 181 * || || mode_control || | |
| 182 * |+----------------++----------------+| | |
| 183 * +------------------------------------+ | |
| 184 * +-----------panel_display------------+ | |
| 185 * |+----------++----------++----------+| | |
| 186 * || display1 || display2 || display3 || | |
| 187 * |+----------++----------++----------+| | |
| 188 * +------------------------------------+ | |
| 189 * +-----------panel_control------------+ | |
| 190 * |+----------++----------++----------+| | |
| 191 * || led1 || led2 || led3 || | |
| 192 * |+----------++----------++----------+| | |
| 193 * |+----------++----------++----------+| | |
| 194 * || switch1 || switch2 || switch3 || | |
| 195 * |+----------++----------++----------+| | |
| 196 * | | | |
| 197 * +------------------------------------+ | |
| 198 */ | |
| 199 | |
| 200 #fermentor_panel_top { | |
| 201 width: 236px; | |
| 202 height: 170px; | |
| 203 float: right; | |
| 204 background-color: #eee; | |
| 205 border: 2px solid; | |
| 206 border-color: #888; | |
| 207 border-radius: 5px 5px 5px 5px; | |
| 208 margin-bottom: 3px; | |
| 209 } | |
| 210 | |
| 211 #fermentor_selector { | |
| 212 width: 88px; | |
| 213 height: 170px; | |
| 214 float: left; | |
| 215 } | |
| 216 | |
| 217 input.select { | |
| 218 margin-left: 10px; | |
| 219 margin-top: 13px; | |
| 220 } | |
| 221 | |
| 222 #fermentor_thermometers { | |
| 223 width: 720px; | |
| 224 height: 371px; | |
| 225 float: left; | |
| 226 background-color: #eee; | |
| 227 border: 2px solid; | |
| 228 border-color: #888; | |
| 229 border-radius: 5px 5px 5px 5px; | |
| 230 } | |
| 231 | |
| 232 #fermentor_alarmled { | |
| 233 width: 38px; | |
| 234 height: 30px; | |
| 235 float: left; | |
| 236 text-align: center; | |
| 237 margin-top: 10px; | |
| 238 margin-left: 10px; | |
| 239 } | |
| 240 | |
| 241 #fermentor_powerled { | |
| 242 width: 38px; | |
| 243 height: 30px; | |
| 244 float: left; | |
| 245 text-align: center; | |
| 246 margin-top: 10px; | |
| 247 margin-left: 42px; | |
| 248 } | |
| 249 | |
| 250 #fermentor_mode_control { | |
| 251 width: 148px; | |
| 252 height: 110px; | |
| 253 float: left; | |
| 254 margin-top: 10px; | |
| 255 background-color: #ddd; | |
| 256 } | |
| 257 | |
| 258 | |
| 259 #fermentor_panel_display { | |
| 260 width: 236px; | |
| 261 height: 50px; | |
| 262 float: right; | |
| 263 background-color: #eee; | |
| 264 border: 2px solid; | |
| 265 border-color: #888; | |
| 266 border-radius: 5px 5px 5px 5px; | |
| 267 margin-bottom: 3px; | |
| 268 } | |
| 269 | |
| 270 #fermentor_display1 { | |
| 271 width: 79px; | |
| 272 height: 46px; | |
| 273 float: left; | |
| 274 text-align: center; | |
| 275 margin-top: 7px; | |
| 276 } | |
| 277 | |
| 278 #fermentor_display2 { | |
| 279 width: 78px; | |
| 280 height: 46px; | |
| 281 float: left; | |
| 282 text-align: center; | |
| 283 margin-top: 7px; | |
| 284 } | |
| 285 | |
| 286 #fermentor_display3 { | |
| 287 width: 79px; | |
| 288 height: 46px; | |
| 289 float: left; | |
| 290 text-align: center; | |
| 291 margin-top: 7px; | |
| 292 } | |
| 293 | |
| 294 #fermentor_panel_control { | |
| 295 width: 236px; | |
| 296 height: 136px; | |
| 297 float: right; | |
| 298 background-color: #eee; | |
| 299 border: 2px solid; | |
| 300 border-color: #888; | |
| 301 border-radius: 5px 5px 5px 5px; | |
| 302 margin-bottom: 3px; | |
| 303 } | |
| 304 | |
| 305 #fermentor_led1 { | |
| 306 width: 79px; | |
| 307 height: 30px; | |
| 308 float: left; | |
| 309 text-align: center; | |
| 310 margin-top: 8px; | |
| 311 } | |
| 312 | |
| 313 #fermentor_led2 { | |
| 314 width: 78px; | |
| 315 height: 30px; | |
| 316 float: left; | |
| 317 text-align: center; | |
| 318 margin-top: 8px; | |
| 319 } | |
| 320 | |
| 321 #fermentor_led3 { | |
| 322 width: 79px; | |
| 323 height: 30px; | |
| 324 float: left; | |
| 325 text-align: center; | |
| 326 margin-top: 8px; | |
| 327 } | |
| 328 | |
| 329 .dtemp { | |
| 330 font-weight: bold; | |
| 331 font-size: 1.2em; | |
| 332 color: blue; | |
| 333 } | |
| 334 | |
| 335 .ltemp { | |
| 336 font-weight: bold; | |
| 337 font-size: 1.2em; | |
| 338 color: green; | |
| 339 } | |
| 340 | |
| 341 .htemp { | |
| 342 font-weight: bold; | |
| 343 font-size: 1.2em; | |
| 344 color: red; | |
| 345 } | |
| 346 | |
| 347 #fermentor_toggle1 { | |
| 348 width: 79px; | |
| 349 height: 70px; | |
| 350 float: left; | |
| 351 text-align: center; | |
| 352 margin-top: 10px; | |
| 353 } | |
| 354 | |
| 355 #fermentor_toggle2 { | |
| 356 width: 78px; | |
| 357 height: 70px; | |
| 358 float: left; | |
| 359 text-align: center; | |
| 360 margin-top: 10px; | |
| 361 } | |
| 362 | |
| 363 #fermentor_toggle3 { | |
| 364 width: 79px; | |
| 365 height: 70px; | |
| 366 float: left; | |
| 367 text-align: center; | |
| 368 margin-top: 10px; | |
| 369 } | |
| 370 | |
| 371 #menu { | |
| 372 width: 600px; | |
| 373 height: 300px; | |
| 374 margin-left: auto; | |
| 375 margin-right: auto; | |
| 376 border: 3px solid #5c9ccc; | |
| 377 border-radius: 5px 5px 5px 5px; | |
| 378 margin-top: 50px; | |
| 379 } | |
| 380 | |
| 381 #menu_header { | |
| 382 width: 600px; | |
| 383 height: 30px; | |
| 384 background-color: #5c9ccc; | |
| 385 text-align: center; | |
| 386 padding-top: 10px; | |
| 387 color: #fff; | |
| 388 font-family: Helvetica, Arial, sans-serif; | |
| 389 font-size: 16px; | |
| 390 font-weight: bold; | |
| 391 } | |
| 392 | |
| 393 #menu_left { | |
| 394 width: 300px; | |
| 395 height: 260px; | |
| 396 float: left; | |
| 397 } | |
| 398 | |
| 399 #menu_right { | |
| 400 width: 300px; | |
| 401 height: 260px; | |
| 402 float: right; | |
| 403 } | |
| 404 | |
| 405 .LEDred_on { | |
| 406 margin: 5px auto; | |
| 407 width: 12px; | |
| 408 height: 12px; | |
| 409 background-color: #F40; | |
| 410 border-radius: 50%; | |
| 411 box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px; | |
| 412 } | |
| 413 | |
| 414 .LEDred_off { | |
| 415 margin: 5px auto; | |
| 416 width: 12px; | |
| 417 height: 12px; | |
| 418 background-color: #820; | |
| 419 border-radius: 50%; | |
| 420 box-shadow: #400 0 0px 1px 1px; | |
| 421 } | |
| 422 | |
| 423 .LEDyellow_on { | |
| 424 margin: 5px auto; | |
| 425 width: 12px; | |
| 426 height: 12px; | |
| 427 background-color: #FF0; | |
| 428 border-radius: 50%; | |
| 429 box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px; | |
| 430 } | |
| 431 | |
| 432 .LEDyellow_off { | |
| 433 margin: 5px auto; | |
| 434 width: 12px; | |
| 435 height: 12px; | |
| 436 background-color: #A90; | |
| 437 border-radius: 50%; | |
| 438 box-shadow: #440 0 0px 1px 1px; | |
| 439 } | |
| 440 | |
| 441 .LEDgreen_on { | |
| 442 margin: 5px auto; | |
| 443 width: 12px; | |
| 444 height: 12px; | |
| 445 background-color: #5E0; | |
| 446 border-radius: 50%; | |
| 447 box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px; | |
| 448 } | |
| 449 | |
| 450 .LEDgreen_off { | |
| 451 margin: 5px auto; | |
| 452 width: 12px; | |
| 453 height: 12px; | |
| 454 background-color: #270; | |
| 455 border-radius: 50%; | |
| 456 box-shadow: #250 0 0px 1px 1px; | |
| 457 } | |
| 458 | |
| 459 .LEDblue_on { | |
| 460 margin: 5px auto; | |
| 461 width: 12px; | |
| 462 height: 12px; | |
| 463 background-color: #4AF; | |
| 464 border-radius: 50%; | |
| 465 box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px; | |
| 466 } | |
| 467 | |
| 468 .LEDblue_off { | |
| 469 margin: 5px auto; | |
| 470 width: 12px; | |
| 471 height: 12px; | |
| 472 background-color: #137; | |
| 473 border-radius: 50%; | |
| 474 box-shadow: #024 0 0px 1px 1px; | |
| 475 } | |
| 476 |
