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: 15px 10px 13px 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 ul.tabs,
 171 #tabs {
 172         padding: 0;
 173         margin: 0;
 174 }
 175 ul.tabs li,
 176 #tabs li {
 177         display: inline;
 178         list-style: none;
 179 }
 180 ul.tabs a,
 181 #tabs a {
 182         width: 115px;
 183         display: block;
 184         float: left;
 185         padding: 3px 0;
 186         margin: 0 3px 0 0;
 187         text-align: center;
 188         text-decoration: none;
 189         color: #888;
 190         height: 15px;
 191         background: #f3f3f3;
 192 }
 193 ul.tabs a.active,
 194 #tabs a.active {
 195         background: #af4141;
 196         color: #fff;
 197         font-weight: bold;
 198 }
 199 ul.tabs a:hover,
 200 #tabs a:hover {
 201         background: #BF6060;
 202         color: #fff;
 203         font-weight: bold;
 204 }
 205 div.tabs-bottom,
 206 #tabs-bottom {
 207         clear:both;
 208         border-top: 1px solid #eee;
 209         padding: 0;
 210 }
 211
 212 .section-title {
 213         font-size: 14px;
 214         color: #444;
 215         margin: 0 0 10px 0;
 216         padding-bottom: 4px;
 217         border-bottom: 1px solid #f0f0f0;
 218 }
 219 .section {
 220         padding: 0 0 20px 5px;
 221 }
 222 .section ul {
 223         margin-left: 0px;
 224         padding-left: 15px;
 225 }
 226 table.fields {
 227 }
 228 .fields td {
 229         padding: 2px 0;
 230 }
 231 .fields td.title {
 232         width: 150px;
 233 }
 234 .fields td.title.indent1 {
 235         padding: 1px 15px 1px 0;
 236 }
 237 .fields td.title.indent2 {
 238         padding: 1px 5px 1px 10px;
 239 }
 240 .fields .spacer {
 241         height: 8px;
 242 }
 243 .fields td.content {
 244         width: 585px;                                   /* zzz  Opera likes this fixed px */
 245         vertical-align: top;
 246 }
 247
 248
 249 .tomato-grid {
 250         padding: 0;
 251         margin: 0 0 3px 0;
 252         border-spacing: 1px;
 253         border-collapse: separate;
 254         border: 1px solid #e0e0e0;
 255         background: #fff;
 256         width: 100%;
 257 }
 258 .tomato-grid td {
 259         padding: 2px;
 260         margin: 0px;
 261         font: 12px sans-serif;
 262 }
 263 .tomato-grid .header {
 264         background: #e7e7e7;
 265         cursor: pointer;
 266 }
 267 .tomato-grid .header td {
 268         font: 11px sans-serif;
 269         font-weight: bold;
 270 }
 271 .tomato-grid .footer {
 272         background: #f0f0f0;
 273 }
 274 .tomato-grid .odd {
 275         background: #f7f7f7;
 276         cursor: pointer;
 277 }
 278 .tomato-grid .even {
 279         background: #fff;
 280         cursor: pointer;
 281 }
 282 .tomato-grid .disabled {
 283         color: #999;
 284 }
 285 .tomato-grid .odd:hover,
 286 .tomato-grid .even:hover {
 287         background: #f7e0e0;
 288 }
 289 .tomato-grid input {
 290         margin: 0;
 291         padding: 0;
 292 }
 293 .tomato-grid .edit {
 294         padding: 0;
 295         margin: 0;
 296 }
 297 .tomato-grid .editor {
 298         background: #f0f0f0;
 299 }
 300 .tomato-grid .controls {
 301         background: #f0f0f0;
 302         text-align: right;
 303 }
 304 .tomato-grid .sortasc:after {
 305         font-size: 90%;
 306         float: right;
 307         content: " \25B2";
 308 }
 309 .tomato-grid .sortdes:after {
 310         font-size: 90%;
 311         float: right;
 312         content: " \25BC";
 313 }
 314 .tomato-grid a {
 315         color: #407050;
 316 }
 317 .tomato-grid a:hover {
 318         color: #fff;
 319 }
 320 .tomato-grid input,
 321 .tomato-grid select {
 322         width: 98%;
 323 }
 324 .tomato-grid .controls input {
 325         font: 11px sans-serif;
 326         width: 60px;
 327 }
 328
 329 #tg-row-panel {
 330         position: absolute;
 331         margin: 0;
 332         padding: 0;
 333 }
 334 #tg-row-panel img {
 335         cursor: pointer;
 336         opacity: 0.6;
 337         margin: 0;
 338         padding: 0;
 339         background: #fff;
 340         border: 1px solid #fff;
 341 }
 342 #tg-row-panel img:hover {
 343         opacity: 1;
 344         border: 1px solid #eee;
 345 }
 346
 347 #refresh-button {
 348         width: 80px;
 349 }
 350 #refresh-time {
 351         width: 120px;
 352 }
 353 #refresh-spinner {
 354         visibility: hidden;
 355         vertical-align: middle;
 356 }
 357
 358 #notice1 {
 359         margin: auto;
 360         padding: 5px 5px;
 361         width: 400px;
 362         border: 1px solid #cbb;
 363         background: #ffc;
 364 }
 365
 366 .note-disabled,
 367 .note-disabledw,
 368 .note-warning {
 369         background: #f7f7f7;
 370         border: 1px solid #aaa;
 371         width: 10em;
 372         padding: 0.5em;
 373         margin: 1em;
 374         font-size: 0.9em
 375 }
 376 .note-disabledw,
 377 .note-warning {
 378         width: 20em;
 379 }
 380
 381 #ntpkiss {
 382         background: #f7f7f7;
 383         width: 50%;
 384         padding: 4px;
 385 }
 386 #ntpkiss div {
 387         border-top: 1px solid #e7e7e7;
 388         padding: 4px;
 389         margin-top: 4px;
 390         text-align: right;
 391 }
 392
 393 .bwmg {
 394         padding: 0;
 395         margin: 0 0 3px 0;
 396         border-spacing: 1px;
 397         border-collapse: separate;
 398         border: 1px solid #e0e0e0;
 399         background: #fff;
 400         width: 500px;
 401 }
 402 .bwmg td {
 403         padding: 2px;
 404         margin: 0px;
 405         font: 12px sans-serif;
 406 }
 407 .bwmg .header {
 408         background: #e7e7e7;
 409 }
 410 .bwmg .header td {
 411         font: 11px sans-serif;
 412         font-weight: bold;
 413 }
 414 .bwmg .footer {
 415         background: #f0f0f0;
 416 }
 417 .bwmg .odd {
 418         background: #f7f7f7;
 419 }
 420 .bwmg .even {
 421         background: #fff;
 422 }
 423 .bwmg .rtitle {
 424         width: 25%;
 425 }
 426 .bwmg .dl,
 427 .bwmg .ul,
 428 .bwmg .total {
 429         width: 25%;
 430         text-align: right;
 431 }
 432
 433 #bwm-controls .selected {
 434         padding: 0 0px 0 4px;
 435         font-weight: bold;
 436         text-decoration: underline;
 437 }
 438
 439 #trace-error {
 440         padding: 0.2em 1em 0.2em 1em;
 441         background: #fec;
 442 }