setup/styles.css

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