release/src/router/www/tomato.css

   1 /*
   2         Tomato GUI
   3         Copyright (C) 2006-2010 Jonathan Zarate
   4         http://www.polarcloud.com/tomato/
   5
   6         For use with Tomato Firmware only.
   7         No part of this file may be used without permission.
   8 */
   9
  10 body {
  11         padding: 0;
  12         margin: 0 0;
  13         background: #f0f0f0;
  14         font: 12px sans-serif;
  15         color: #000;
  16 }
  17
  18 a {
  19         text-decoration: none;
  20         color: #af4141;
  21 }
  22 a:hover {
  23         background: #BF6060;
  24         color: #fff;
  25 }
  26
  27 table {
  28         empty-cells: show;
  29 }
  30 td {
  31         font: 12px sans-serif;
  32 }
  33
  34 form {
  35         padding: 0;
  36         margin: 0;
  37 }
  38
  39 input,
  40 select {
  41         font: 12px sans-serif;
  42 }
  43 input[type='checkbox'][disabled] {
  44         opacity: 0.3;
  45 }
  46 input[type='text'],
  47 input[type='password'] {
  48         padding: 0;
  49         margin: 1px;
  50 }
  51 input[type='checkbox'] {
  52         padding: 0;
  53         margin: 1px 0 2px 0;
  54 }
  55 input[type='radio'] {
  56         padding-left: 0;
  57         margin-left: 0;
  58 }
  59 select {
  60         margin: 0;
  61 }
  62
  63 input[type='button'] {
  64         color: #000;
  65         background: #f7f7f7;
  66         border-top: 1px solid #ddd;
  67         border-left: 1px solid #ddd;
  68         border-bottom: 1px solid #ccc;
  69         border-right: 1px solid #ccc;
  70 }
  71 input[type='button'][disabled] {
  72         color: #aaa;
  73 }
  74 input[type='button']:hover {
  75         background: #BF6060;
  76         color: #fff;
  77 }
  78
  79 .error {
  80         background: #ffffd0;
  81 }
  82 .error-focused {
  83         border: 1px dashed #f77;
  84 }
  85
  86 #container {
  87         background: #fff;
  88         border-spacing: 0;
  89         width: 900px;
  90         margin: 2px auto;
  91         margin-bottom: 50px;
  92 }
  93
  94 #header {
  95         background: #af4141;
  96         padding: 30px 10px 20px 10px;
  97         border-bottom: 2px dotted #ddd;
  98 }
  99 #header .title {
 100         font: 25px sans-serif;
 101         color: #fff;
 102         font-weight: bold;
 103 }
 104 #header .version {
 105         font: 15px sans-serif;
 106         color: #eee;
 107         font-weight: bold;
 108 }
 109
 110 #footer {
 111         height: 1px;
 112         border-top: 2px dotted #f0f0f0;
 113         text-align: right;
 114         padding: 4px;
 115 }
 116
 117 #footer input {
 118         width: 80px;
 119 }
 120
 121 #footer-msg {
 122         margin-right: 10px;
 123         padding: 2px 10px;
 124         color: #222;
 125         background: #ffd700;
 126         visibility: hidden;
 127 }
 128
 129 #navi {
 130         width: 130px;
 131         font-size: 12px;
 132         border-right: 1px solid #f0f0f0;
 133         padding: 20px 0;
 134         vertical-align: top;
 135 }
 136 #navi a {
 137         display: block;
 138         color: #af4141;
 139 }
 140 #navi a:hover {
 141         background: #BF6060;
 142         border: none;
 143         color: #fff;
 144 }
 145
 146 #navi a.indent1 {
 147         padding: 2px 0 2px 10px;
 148 }
 149 #navi a.indent2 {
 150         padding: 2px 0 2px 25px;
 151 }
 152
 153 #navi .active {
 154         font-weight: bold;
 155 }
 156
 157 #content {
 158         padding: 5px 4px 20px 4px;
 159         vertical-align: top;
 160         width: 770px;
 161 }
 162
 163 #ident {
 164         color: #aaa;
 165         text-align: right;
 166         padding-right: 5px;
 167         font-size: 11px;
 168 }
 169
 170 #tabs {
 171         padding: 0;
 172         margin: 0;
 173 }
 174 #tabs li {
 175         display: inline;
 176         list-style: none;
 177 }
 178 #tabs a {
 179         width: 90px;
 180         display: block;
 181         float: left;
 182         padding: 3px 0;
 183         margin: 0 3px 0 0;
 184         text-align: center;
 185         text-decoration: none;
 186         color: #888;
 187         height: 15px;
 188         background: #f3f3f3;
 189 }
 190 #tabs a.active {
 191         background: #af4141;
 192         color: #fff;
 193         font-weight: bold;
 194 }
 195 #tabs a:hover {
 196         background: #BF6060;
 197         color: #fff;
 198         font-weight: bold;
 199 }
 200 #tabs-bottom {
 201         clear:both;
 202         border-top: 1px solid #eee;
 203         padding: 0;
 204 }
 205
 206 .section-title {
 207         font-size: 14px;
 208         color: #444;
 209         margin: 0 0 10px 0;
 210         padding-bottom: 4px;
 211         border-bottom: 1px solid #f0f0f0;
 212 }
 213 .section {
 214         padding: 0 0 20px 5px;
 215 }
 216 .section ul {
 217         margin-left: 0px;
 218         padding-left: 15px;
 219 }
 220 table.fields {
 221 }
 222 .fields td {
 223         padding: 2px 0;
 224 }
 225 .fields td.title {
 226         width: 150px;
 227 }
 228 .fields td.title.indent1 {
 229         padding: 1px 15px 1px 0;
 230 }
 231 .fields td.title.indent2 {
 232         padding: 1px 5px 1px 10px;
 233 }
 234 .fields .spacer {
 235         height: 8px;
 236 }
 237 .fields td.content {
 238         width: 585px;                                   /* zzz  Opera likes this fixed px */
 239         vertical-align: top;
 240 }
 241
 242
 243 .tomato-grid {
 244         padding: 0;
 245         margin: 0 0 3px 0;
 246         border-spacing: 1px;
 247         border-collapse: separate;
 248         border: 1px solid #e0e0e0;
 249         background: #fff;
 250         width: 100%;
 251 }
 252 .tomato-grid td {
 253         padding: 2px;
 254         margin: 0px;
 255         font: 12px sans-serif;
 256 }
 257 .tomato-grid .header {
 258         background: #e7e7e7;
 259         cursor: pointer;
 260 }
 261 .tomato-grid .header td {
 262         font: 11px sans-serif;
 263         font-weight: bold;
 264 }
 265 .tomato-grid .footer {
 266         background: #f0f0f0;
 267 }
 268 .tomato-grid .odd {
 269         background: #f7f7f7;
 270         cursor: pointer;
 271 }
 272 .tomato-grid .even {
 273         background: #fff;
 274         cursor: pointer;
 275 }
 276 .tomato-grid .disabled {
 277         color: #999;
 278 }
 279 .tomato-grid .odd:hover,
 280 .tomato-grid .even:hover {
 281         background: #f7e0e0;
 282 }
 283 .tomato-grid input {
 284         margin: 0;
 285         padding: 0;
 286 }
 287 .tomato-grid .edit {
 288         padding: 0;
 289         margin: 0;
 290 }
 291 .tomato-grid .editor {
 292         background: #f0f0f0;
 293 }
 294 .tomato-grid .controls {
 295         background: #f0f0f0;
 296         text-align: right;
 297 }
 298 .tomato-grid .sortasc {
 299         background-image: url(up.gif);
 300         background-position: 97% 60%;
 301         background-repeat: no-repeat;
 302 }
 303 .tomato-grid .sortdes {
 304         background-image: url(dn.gif);
 305         background-position: 97% 80%;
 306         background-repeat: no-repeat;
 307 }
 308 .tomato-grid a {
 309         color: #407050;
 310 }
 311 .tomato-grid a:hover {
 312         color: #fff;
 313 }
 314 .tomato-grid input,
 315 .tomato-grid select {
 316         width: 98%;
 317 }
 318 .tomato-grid .controls input {
 319         font: 11px sans-serif;
 320         width: 60px;
 321 }
 322
 323 #tg-row-panel {
 324         position: absolute;
 325         margin: 0;
 326         padding: 0;
 327 }
 328 #tg-row-panel img {
 329         cursor: pointer;
 330         opacity: 0.6;
 331         margin: 0;
 332         padding: 0;
 333         background: #fff;
 334         border: 1px solid #fff;
 335 }
 336 #tg-row-panel img:hover {
 337         opacity: 1;
 338         border: 1px solid #eee;
 339 }
 340
 341 #refresh-button {
 342         width: 80px;
 343 }
 344 #refresh-time {
 345         width: 120px;
 346 }
 347 #refresh-spinner {
 348         visibility: hidden;
 349         vertical-align: middle;
 350 }
 351
 352 #notice1 {
 353         margin: auto;
 354         padding: 5px 5px;
 355         width: 400px;
 356         border: 1px solid #cbb;
 357         background: #ffc;
 358 }
 359
 360 .note-disabled,
 361 .note-disabledw,
 362 .note-warning {
 363         background: #f7f7f7;
 364         border: 1px solid #aaa;
 365         width: 10em;
 366         padding: 0.5em;
 367         margin: 1em;
 368         font-size: 0.9em
 369 }
 370 .note-disabledw,
 371 .note-warning {
 372         width: 20em;
 373 }
 374
 375 #ntpkiss {
 376         background: #f7f7f7;
 377         width: 50%;
 378         padding: 4px;
 379 }
 380 #ntpkiss div {
 381         border-top: 1px solid #e7e7e7;
 382         padding: 4px;
 383         margin-top: 4px;
 384         text-align: right;
 385 }
 386
 387 .bwmg {
 388         padding: 0;
 389         margin: 0 0 3px 0;
 390         border-spacing: 1px;
 391         border-collapse: separate;
 392         border: 1px solid #e0e0e0;
 393         background: #fff;
 394         width: 500px;
 395 }
 396 .bwmg td {
 397         padding: 2px;
 398         margin: 0px;
 399         font: 12px sans-serif;
 400 }
 401 .bwmg .header {
 402         background: #e7e7e7;
 403 }
 404 .bwmg .header td {
 405         font: 11px sans-serif;
 406         font-weight: bold;
 407 }
 408 .bwmg .footer {
 409         background: #f0f0f0;
 410 }
 411 .bwmg .odd {
 412         background: #f7f7f7;
 413 }
 414 .bwmg .even {
 415         background: #fff;
 416 }
 417 .bwmg .rtitle {
 418         width: 25%;
 419 }
 420 .bwmg .dl,
 421 .bwmg .ul,
 422 .bwmg .total {
 423         width: 25%;
 424         text-align: right;
 425 }
 426
 427 #bwm-controls .selected {
 428         padding: 0 0px 0 4px;
 429         font-weight: bold;
 430         text-decoration: underline;
 431 }
 432
 433 #trace-error {
 434         padding: 0.2em 1em 0.2em 1em;
 435         background: #fec;
 436 }