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