phpmyadmin/setup/styles.css

   1 /* global styles */
   2
   3 body {
   4     padding-bottom: 1em;
   5     color: #444;
   6     font: .8em sans-serif;
   7     background: url(../themes/pmahomme/img/left_nav_bg.png) repeat-y 80px 0 #f3f3f3;
   8 }
   9
  10 input,
  11 button,
  12 select,
  13 textarea,
  14 th,
  15 td {
  16     font: 1em sans-serif;
  17 }
  18
  19 img {
  20     border: 0;
  21 }
  22
  23 a,
  24 a:link,
  25 a:visited,
  26 a:active {
  27     text-decoration: none;
  28     color: #235a81;
  29     cursor: pointer;
  30     outline: none;
  31
  32 }
  33
  34 a:hover {
  35     text-decoration: underline;
  36     color: #235a81;
  37 }
  38
  39 h1 {
  40     font-size: 1.5em;
  41 }
  42
  43 /* language selection box */
  44
  45 #select_lang {
  46     position: absolute;
  47     right: 1em;
  48     top: 1em;
  49 }
  50
  51 /* menu */
  52
  53 #menu {
  54     float: left;
  55     width: 220px;
  56     font-size: 1.1em;
  57 }
  58
  59 #menu ul {
  60     margin: 1em 1em 1em .5em;
  61     padding: 0;
  62     list-style: none;
  63 }
  64
  65 #menu li a {
  66     padding: .5em .6em;
  67     margin-right: .6em;
  68     display: block;
  69     color: #333;
  70     text-decoration: none;
  71     zoom: 1; /* IE fix */
  72 }
  73
  74 #menu li a:hover, #menu li a:active {
  75     background-color: #e4e4e4;
  76 }
  77
  78 /* page contents and footer layout */
  79
  80 #page {
  81     margin-left: 220px;
  82 }
  83
  84 #footer {
  85     margin-top: 1em;
  86 }
  87
  88 #footer a {
  89     margin-right: 0.5em;
  90     text-decoration: none;
  91     font-size: small;
  92 }
  93
  94 /* phpMyAdmin logo colors */
  95
  96 .blue {
  97     color: #7584B3;
  98 }
  99
 100 .orange {
 101     color: #FFAD17;
 102 }
 103
 104 .red {
 105     color: #C00;
 106 }
 107
 108 /* main page messages */
 109
 110 /* message boxes: error, confirmation */
 111 .success h4,
 112 .notice h4,
 113 div.error h4 {
 114     border-bottom: 1px solid;
 115     font-weight: bold;
 116     margin: 0 0 .2em 0;
 117 }
 118
 119 div.success,
 120 div.notice,
 121 div.error {
 122     margin: .5em 0 1.3em 0;
 123     border: 1px solid;
 124     background-repeat: no-repeat;
 125     background-position: 10px 10px;
 126     padding: 10px 10px 10px 25px;
 127
 128     -moz-border-radius: 5px;
 129     -webkit-border-radius: 5px;
 130     border-radius: 5px;
 131
 132     -moz-box-shadow: 0 1px 1px #fff inset;
 133     -webkit-box-shadow: 0 1px 1px #fff inset;
 134     box-shadow: 0 1px 1px #fff inset;
 135 }
 136
 137 .success a,
 138 .notice a,
 139 .error a {
 140     text-decoration: underline;
 141 }
 142
 143 .success {
 144     color: #000;
 145     background-color: #ebf8a4;
 146 }
 147
 148 h1.success,
 149 div.success {
 150     border-color: #a2d246;
 151     background-image: url(../themes/pmahomme/img/s_success.png);
 152     background-repeat: no-repeat;
 153     background-position: 5px 10px;
 154 }
 155 .success h4 {
 156     border-color: #00FF00;
 157 }
 158
 159 .notice {
 160     color: #000;
 161     background-color: #e8eef1;
 162 }
 163
 164 h1.notice,
 165 div.notice {
 166     border-color: #3a6c7e;
 167     background-image: url(../themes/pmahomme/img/s_notice.png);
 168     background-repeat: no-repeat;
 169     background-position: 5px 10px;
 170 }
 171
 172 .notice h4 {
 173     border-color: #ffb10a;
 174 }
 175
 176 .error {
 177     border: 1px solid maroon !important;
 178     color: #000;
 179     background: pink;
 180 }
 181
 182 h1.error,
 183 div.error {
 184     border-color: #333;
 185     background-image: url(../themes/pmahomme/img/s_error.png);
 186     background-repeat: no-repeat;
 187     background-position: 5px 10px;
 188 }
 189
 190 div.error h4 {
 191     border-color: #ff0000;
 192 }
 193
 194 div.notice[id^=version_check] {
 195     border-color: #002DFF;
 196     background-color: #EEF;
 197 }
 198
 199 div.notice[id^=version_check] h4 {
 200     border-color: #002DFF;
 201 }
 202
 203
 204
 205 /* form tabs */
 206
 207 ul.tabs {
 208     margin: 1.1em .2em 0;
 209     padding: 0 0 .3em 0;
 210     list-style: none;
 211     font-weight: bold;
 212 }
 213
 214 ul.tabs li {
 215     float: left;
 216     margin-bottom: -1px;
 217 }
 218
 219 ul.tabs li a {
 220     display: block;
 221     margin: .1em .2em 0;
 222     white-space: nowrap;
 223     text-decoration: none;
 224     border: 1px solid #D5D5D5;
 225     border-bottom: 1px solid #aaa;
 226 }
 227
 228 ul.tabs li a {
 229     padding: 7px 10px;
 230     -webkit-border-radius: 5px 5px 0 0;
 231     -moz-border-radius: 5px 5px 0 0;
 232     border-radius: 5px 5px 0 0;
 233     background: #f2f2f2;
 234     color: #555;
 235     text-shadow: 0 1px 0 #fff;
 236 }
 237
 238 ul.tabs li a:hover,
 239 ul.tabs li a:active {
 240     background: #e5e5e5;
 241 }
 242
 243 ul.tabs li.active a {
 244     background-color: #fff;
 245     margin-top: 1px;
 246     color: #000;
 247     text-shadow: none;
 248     border-color: #aaa;
 249     border-bottom: 1px solid #fff;
 250 }
 251
 252 .tabs_contents {
 253     margin-top: 1em;
 254 }
 255
 256 .tabs_contents fieldset {
 257     margin-top: 0;
 258 }
 259
 260 .tabs_contents legend {
 261     display: none;
 262 }
 263
 264 /* "restore default value" and "set value: foo" buttons */
 265
 266 .restore-default img, .set-value img {
 267     margin-bottom: -3px;
 268 }
 269
 270 .userprefs-comment {
 271     cursor: help;
 272     float: right;
 273 }
 274
 275 /* forms */
 276
 277 fieldset {
 278     margin-top: 1em;
 279     border-radius: 4px 4px 0 0;
 280     -moz-border-radius: 4px 4px 0 0;
 281     -webkit-border-radius: 4px 4px 0 0;
 282     border: #aaa solid 1px;
 283     padding: 1.5em;
 284     background: #eee;
 285     text-shadow: 0 1px 0 #fff;
 286     -moz-box-shadow: 1px 1px 2px #fff inset;
 287     -webkit-box-shadow: 1px 1px 2px #fff inset;
 288     box-shadow: 1px 1px 2px #fff inset;
 289 }
 290
 291 fieldset.optbox {
 292     padding: 0;
 293 }
 294
 295 fieldset fieldset {
 296     margin: .8em;
 297     background: #fff;
 298     border: 1px solid #aaa;
 299     background: #E8E8E8;
 300
 301 }
 302
 303 fieldset legend {
 304     font-weight: bold;
 305     color: #444;
 306     padding: 5px 10px;
 307     border-radius: 2px;
 308     -moz-border-radius: 2px;
 309     -webkit-border-radius: 2px;
 310     border: 1px solid #aaa;
 311     background-color: #fff;
 312     -moz-box-shadow: 3px 3px 15px #bbb;
 313     -webkit-box-shadow: 3px 3px 15px #bbb;
 314     box-shadow: 3px 3px 15px #bbb;
 315 }
 316
 317 .form {
 318     border: 2px #DEE1FF solid;
 319 }
 320
 321 fieldset p {
 322     margin: 0;
 323     padding: .5em;
 324     background: #fff;
 325     border-top: 0;
 326 }
 327
 328 fieldset .errors { /* form error list */
 329     margin: 0 -2px 1em -2px;
 330     padding: 0.5em 1.5em;
 331     background: #FBEAD9;
 332     border: 1px #C83838 solid;
 333     border-width: 1px 0;
 334     list-style: none;
 335     font-family: sans-serif;
 336     font-size: small;
 337 }
 338
 339 fieldset .inline_errors { /* field error list */
 340     margin: 0.3em 0.3em 0.3em 0;
 341     padding: 0;
 342     list-style: none;
 343     color: #9A0000;
 344     font-size: small;
 345 }
 346
 347 table caption, table th, table td {
 348     text-shadow: 0 1px 0 #FFFFFF;
 349 }
 350
 351 fieldset th {
 352     width: 40%;
 353     min-width: 350px;
 354     padding: 0.3em 0.3em 0.3em 0.5em;
 355     text-align: left;
 356     font-weight: bold;
 357     vertical-align: top;
 358 }
 359
 360 fieldset.simple th {
 361     width: auto;
 362     min-width: 0;
 363 }
 364
 365 fieldset .doc {
 366     margin-left: 1em;
 367 }
 368
 369 fieldset td {
 370     padding-top: 0.3em;
 371     vertical-align: top;
 372 }
 373
 374 fieldset td.userprefs-allow {
 375     padding: 0;
 376     vertical-align: middle;
 377     text-align: center;
 378     width: 3em;
 379 }
 380
 381 fieldset td.userprefs-allow:hover {
 382     cursor: pointer;
 383     background-color: #EEE;
 384 }
 385
 386 fieldset th small {
 387     display: block;
 388     font-weight: normal;
 389     font-family: sans-serif;
 390     font-size: x-small;
 391     color: #666;
 392 }
 393
 394 fieldset th, fieldset td, .form .lastrow {
 395     border-top: 1px solid #D5D5D5;
 396 }
 397
 398 fieldset .group-header th {
 399     background: #EAEDFF;
 400     border: none;
 401 }
 402
 403 fieldset .group-field-1 th, fieldset .group-header-2 th {
 404     padding-left: 1em;
 405 }
 406
 407 fieldset .group-field-2 th, fieldset .group-header-3 th {
 408     padding-left: 2em;
 409 }
 410
 411 fieldset .group-field-3 th {
 412     padding-left: 3em;
 413 }
 414
 415 fieldset .lastrow, .form .lastrow {
 416     border-top: 1px #000 solid;
 417     background: #D3DCE3;
 418     padding: .5em;
 419     text-align: center;
 420 }
 421
 422 input[type=text] {
 423     border-radius: 2px;
 424     -moz-border-radius: 2px;
 425     -webkit-border-radius: 2px;
 426
 427     box-shadow: 0 1px 2px #ddd;
 428     -moz-box-shadow: 0 1px 2px #ddd;
 429     -webkit-box-shadow: 0 1px 2px #ddd;
 430
 431     background: white;
 432     border: 1px solid #aaa;
 433     color: #555;
 434     padding: 4px;
 435     margin: 6px;
 436
 437 }
 438
 439 input[type=password] {
 440     border-radius: 2px;
 441     -moz-border-radius: 2px;
 442     -webkit-border-radius: 2px;
 443
 444     box-shadow: 0 1px 2px #ddd;
 445     -moz-box-shadow: 0 1px 2px #ddd;
 446     -webkit-box-shadow: 0 1px 2px #ddd;
 447
 448     background: white;
 449     border: 1px solid #aaa;
 450     color: #555;
 451     padding: 4px;
 452     margin: 6px;
 453
 454 }
 455
 456 input[type=submit],
 457 button[type=submit]:not(.mult_submit) {
 458     font-weight: bold !important;
 459 }
 460
 461 input[type=submit],
 462 button[type=submit]:not(.mult_submit),
 463 input[type=reset],
 464 input[name=submit_reset],
 465 input.button {
 466     margin-left: 14px;
 467     border: 1px solid #aaa;
 468     padding: 3px 7px;
 469     color: #111;
 470     text-decoration: none;
 471     background: #ddd;
 472
 473     border-radius: 12px;
 474     -webkit-border-radius: 12px;
 475     -moz-border-radius: 12px;
 476
 477     text-shadow: 0 1px 0 #fff;
 478
 479     background-image: url(../themes/svg_gradient.php?from=ffffff&to=cccccc);
 480     background-size: 100% 100%;
 481     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
 482     background: -webkit-linear-gradient(top, #ffffff, #cccccc);
 483     background: -moz-linear-gradient(top, #ffffff, #cccccc);
 484     background: -ms-linear-gradient(top, #ffffff, #cccccc);
 485     background: -o-linear-gradient(top, #ffffff, #cccccc);
 486 }
 487
 488 input[type=submit]:hover,
 489 button[type=submit]:not(.mult_submit):hover,
 490 input[type=reset]:hover,
 491 input[name=submit_reset]:hover,
 492 input.button:hover {
 493     position: relative;
 494     background-image: url(../themes/svg_gradient.php?from=cccccc&to=dddddd);
 495     background-size: 100% 100%;
 496     background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd));
 497     background: -webkit-linear-gradient(top, #cccccc, #dddddd);
 498     background: -moz-linear-gradient(top, #cccccc, #dddddd);
 499     background: -ms-linear-gradient(top, #cccccc, #dddddd);
 500     background: -o-linear-gradient(top, #cccccc, #dddddd);
 501     cursor: pointer;
 502 }
 503
 504 input[type=submit]:active,
 505 button[type=submit]:not(.mult_submit):active,
 506 input[type=reset]:active,
 507 input[name=submit_reset]:active,
 508 input.button:active {
 509     position: relative;
 510     top: 1px;
 511     left: 1px;
 512 }
 513
 514 input[type="checkbox"],
 515 input[type="radio"] {
 516     vertical-align: -11%;
 517 }
 518
 519
 520 select {
 521     -moz-border-radius: 2px;
 522     -webkit-border-radius: 2px;
 523     border-radius: 2px;
 524
 525     -moz-box-shadow: 0 1px 2px #ddd;
 526     -webkit-box-shadow: 0 1px 2px #ddd;
 527     box-shadow: 0 1px 2px #ddd;
 528
 529     border: 1px solid #aaa;
 530     color: #333;
 531     padding: 3px;
 532     background: white;
 533 }
 534
 535 fieldset.simple th, fieldset.simple td {
 536     border-top: none;
 537     border-bottom: 1px #555 dotted;
 538 }
 539
 540 fieldset.simple .lastrow {
 541     border: 0;
 542 }
 543
 544 /* form elements */
 545
 546 span.checkbox {
 547     padding: 2px;
 548     display: inline-block;
 549 }
 550
 551 .custom { /* customized field */
 552     background: #FFC;
 553 }
 554
 555 .checkbox.custom {
 556     padding: 1px;
 557     border: 1px #EDEC90 solid;
 558 }
 559
 560 .field-error {
 561     border-color: #C11 !important;
 562 }
 563
 564 .field-comment {
 565
 566     position: relative;
 567 }
 568
 569 .field-comment-mark {
 570     cursor: help;
 571     padding: 0 0.2em;
 572     font-weight: bold;
 573     font-style: italic;
 574 }
 575
 576 .field-comment-warning {
 577     color: #A00;
 578 }
 579
 580 .green { /* default form button */
 581     color: #080 !important;
 582 }
 583
 584 table.datatable {
 585     margin: 0.5em 0 1em;
 586 }
 587
 588 table.datatable th {
 589     padding: 0 1em 0 0.5em;
 590     border-bottom: 1px #999 solid;
 591     text-align: left;
 592 }
 593
 594 table.datatable td {
 595     padding: 1px 0.5em;
 596     border-bottom: 1px #DEE1FF solid;
 597 }
 598
 599 /* textarea with config file's contents */
 600
 601 #textconfig {
 602     width: 100%;
 603     border: 0;
 604 }
 605
 606 /* error list */
 607
 608 dd {
 609     margin-left: 0.5em;
 610 }
 611
 612 dd:before {
 613     content: "\25B8  ";
 614 }
 615
 616 /* links on failed validation page, when saving a form */
 617
 618 a.btn {
 619     padding: 1px 5px;
 620     text-decoration: none;
 621     background: #E2E8FF;
 622     border: 1px #A6C8FF solid;
 623     border-top-color: #AFD0FF;
 624     border-left-color: #AFD0FF;
 625     font-weight: bold;
 626 }
 627
 628 a.btn:hover, a.btn:active {
 629     background: #E6F5FF;
 630     color: #004C96;
 631 }