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: no-repeat 10px 10px;
 128     padding: 10px 10px 10px 25px;
 129
 130     -moz-border-radius: 5px;
 131     -webkit-border-radius: 5px;
 132     border-radius: 5px;
 133
 134     -moz-box-shadow: 0 1px 1px #fff inset;
 135     -webkit-box-shadow: 0 1px 1px #fff inset;
 136     box-shadow: 0 1px 1px #fff inset;
 137 }
 138
 139 .success a,
 140 .notice a,
 141 .error a {
 142     text-decoration: underline;
 143 }
 144
 145 .success {
 146     color: #000;
 147     background-color: #ebf8a4;
 148 }
 149
 150 h1.success,
 151 div.success {
 152     border-color: #a2d246;
 153     background: url(../themes/pmahomme/img/s_success.png) no-repeat 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: 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: #ff0000;
 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
 201 /* form tabs */
 202
 203 ul.tabs {
 204     margin: 1.1em 2px 0;
 205     padding: 0 0 3px 0;
 206     list-style: none;
 207     font-weight: bold;
 208 }
 209
 210 ul.tabs li {
 211     float: left;
 212     margin-bottom: -1px;
 213 }
 214
 215 ul.tabs li a {
 216     display: block;
 217     margin: 1px .2em 0;
 218     white-space: nowrap;
 219     text-decoration: none;
 220     border: 1px solid #D5D5D5;
 221     border-bottom: 1px solid #aaa;
 222 }
 223
 224 ul.tabs li a {
 225     padding: 7px 10px;
 226     -webkit-border-radius: 5px 5px 0 0;
 227     -moz-border-radius: 5px 5px 0 0;
 228     border-radius: 5px 5px 0 0;
 229     background: #f2f2f2;
 230     color: #555;
 231     text-shadow: 0 1px 0 #fff;
 232 }
 233
 234 ul.tabs li a:hover,
 235 ul.tabs li a:active {
 236     background: #e5e5e5;
 237 }
 238
 239 ul.tabs li.active a {
 240     background-color: #fff;
 241     margin-top: 1px;
 242     color: #000;
 243     text-shadow: none;
 244     border-color: #aaa;
 245     border-bottom: 1px solid #fff;
 246 }
 247
 248 .tabs_contents {
 249     margin-top: 13px;
 250 }
 251
 252 .tabs_contents fieldset {
 253     margin-top: 0;
 254 }
 255
 256 .tabs_contents legend {
 257     display: none;
 258 }
 259
 260 /* "restore default value" and "set value: foo" buttons */
 261
 262 .restore-default img, .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 fieldset fieldset {
 292     margin: .8em;
 293     border: 1px solid #aaa;
 294     background: #E8E8E8;
 295 }
 296
 297 fieldset legend {
 298     font-weight: bold;
 299     color: #444;
 300     padding: 5px 10px;
 301     border-radius: 2px;
 302     -moz-border-radius: 2px;
 303     -webkit-border-radius: 2px;
 304     border: 1px solid #aaa;
 305     background-color: #fff;
 306     -moz-box-shadow: 3px 3px 15px #bbb;
 307     -webkit-box-shadow: 3px 3px 15px #bbb;
 308     box-shadow: 3px 3px 15px #bbb;
 309 }
 310
 311 .form {
 312     border: 2px #DEE1FF solid;
 313 }
 314
 315 fieldset p {
 316     margin: 0;
 317     padding: .5em;
 318     background: #fff;
 319     border-top: 0;
 320 }
 321
 322 fieldset .errors { /* form error list */
 323     margin: 0 -2px 1em -2px;
 324     padding: 0.5em 1.5em;
 325     background: #FBEAD9;
 326     border: 1px #C83838 solid;
 327     border-width: 1px 0;
 328     list-style: none;
 329     font-family: sans-serif;
 330     font-size: small;
 331 }
 332
 333 fieldset .inline_errors { /* field error list */
 334     margin: 0.3em 0.3em 0.3em 0;
 335     padding: 0;
 336     list-style: none;
 337     color: #9A0000;
 338     font-size: small;
 339 }
 340
 341 table caption, table th, table td {
 342     text-shadow: 0 1px 0 #FFFFFF;
 343 }
 344
 345 fieldset th {
 346     width: 40%;
 347     min-width: 350px;
 348     padding: 0.3em 0.3em 0.3em 0.5em;
 349     text-align: left;
 350     font-weight: bold;
 351     vertical-align: top;
 352 }
 353
 354 fieldset.simple th {
 355     width: auto;
 356     min-width: 0;
 357 }
 358
 359 fieldset .doc {
 360     margin-left: 1em;
 361 }
 362
 363 fieldset td {
 364     padding-top: 0.3em;
 365     vertical-align: top;
 366 }
 367
 368 fieldset td.userprefs-allow {
 369     padding: 0;
 370     vertical-align: middle;
 371     text-align: center;
 372     width: 3em;
 373 }
 374
 375 fieldset td.userprefs-allow:hover {
 376     cursor: pointer;
 377     background-color: #EEE;
 378 }
 379
 380 fieldset th small {
 381     display: block;
 382     font-weight: normal;
 383     font-family: sans-serif;
 384     font-size: x-small;
 385     color: #666;
 386 }
 387
 388 fieldset th, fieldset td, .form .lastrow {
 389     border-top: 1px solid #D5D5D5;
 390 }
 391
 392 fieldset .group-header th {
 393     background: #EAEDFF;
 394     border: none;
 395 }
 396
 397 fieldset .group-field-1 th, fieldset .group-header-2 th {
 398     padding-left: 1em;
 399 }
 400
 401 fieldset .group-field-2 th, fieldset .group-header-3 th {
 402     padding-left: 2em;
 403 }
 404
 405 fieldset .group-field-3 th {
 406     padding-left: 3em;
 407 }
 408
 409 fieldset .lastrow, .form .lastrow {
 410     border-top: 1px #000 solid;
 411     background: #D3DCE3;
 412     padding: .5em;
 413     text-align: center;
 414 }
 415
 416 input[type=text],
 417 input[type=password],
 418 input[type=number] {
 419     border-radius: 2px;
 420     -moz-border-radius: 2px;
 421     -webkit-border-radius: 2px;
 422
 423     box-shadow: 0 1px 2px #ddd;
 424     -moz-box-shadow: 0 1px 2px #ddd;
 425     -webkit-box-shadow: 0 1px 2px #ddd;
 426
 427     background: white;
 428     border: 1px solid #aaa;
 429     color: #555;
 430     padding: 4px;
 431     margin: 6px;
 432 }
 433
 434 input[type=submit],
 435 button[type=submit]:not(.mult_submit) {
 436     font-weight: bold !important;
 437 }
 438
 439 input[type=submit],
 440 button[type=submit]:not(.mult_submit),
 441 input[type=reset],
 442 input[name=submit_reset],
 443 input.button {
 444     margin-left: 14px;
 445     border: 1px solid #aaa;
 446     padding: 3px 7px;
 447     color: #111;
 448     text-decoration: none;
 449     background: #ddd;
 450
 451     border-radius: 12px;
 452     -webkit-border-radius: 12px;
 453     -moz-border-radius: 12px;
 454
 455     text-shadow: 0 1px 0 #fff;
 456
 457     background-image: url(../themes/svg_gradient.php?from=ffffff&to=cccccc);
 458     background-size: 100% 100%;
 459     background: -webkit-linear-gradient(top, #ffffff, #cccccc);
 460     background: -moz-linear-gradient(top, #ffffff, #cccccc);
 461     background: -ms-linear-gradient(top, #ffffff, #cccccc);
 462     background: -o-linear-gradient(top, #ffffff, #cccccc);
 463 }
 464
 465 input[type=submit]:hover,
 466 button[type=submit]:not(.mult_submit):hover,
 467 input[type=reset]:hover,
 468 input[name=submit_reset]:hover,
 469 input.button:hover {
 470     position: relative;
 471     background-image: url(../themes/svg_gradient.php?from=cccccc&to=dddddd);
 472     background-size: 100% 100%;
 473     background: -webkit-linear-gradient(top, #cccccc, #dddddd);
 474     background: -moz-linear-gradient(top, #cccccc, #dddddd);
 475     background: -ms-linear-gradient(top, #cccccc, #dddddd);
 476     background: -o-linear-gradient(top, #cccccc, #dddddd);
 477     cursor: pointer;
 478 }
 479
 480 input[type=submit]:active,
 481 button[type=submit]:not(.mult_submit):active,
 482 input[type=reset]:active,
 483 input[name=submit_reset]:active,
 484 input.button:active {
 485     position: relative;
 486     top: 1px;
 487     left: 1px;
 488 }
 489
 490 input[type="checkbox"],
 491 input[type="radio"] {
 492     vertical-align: -11%;
 493 }
 494
 495
 496 select {
 497     -moz-border-radius: 2px;
 498     -webkit-border-radius: 2px;
 499     border-radius: 2px;
 500
 501     -moz-box-shadow: 0 1px 2px #ddd;
 502     -webkit-box-shadow: 0 1px 2px #ddd;
 503     box-shadow: 0 1px 2px #ddd;
 504
 505     border: 1px solid #aaa;
 506     color: #333;
 507     padding: 3px;
 508     background: white;
 509     margin: 6px;
 510 }
 511
 512 fieldset.simple th, fieldset.simple td {
 513     border-top: none;
 514     border-bottom: 1px #555 dotted;
 515 }
 516
 517 fieldset.simple .lastrow {
 518     border: 0;
 519 }
 520
 521 /* form elements */
 522
 523 span.checkbox {
 524     padding: 2px;
 525     display: inline-block;
 526 }
 527
 528 .custom { /* customized field */
 529     background: #FFC;
 530 }
 531
 532 .checkbox.custom {
 533     padding: 1px;
 534     border: 1px #EDEC90 solid;
 535 }
 536
 537 .field-error {
 538     border-color: #C11 !important;
 539 }
 540
 541 .field-comment {
 542
 543     position: relative;
 544 }
 545
 546 .field-comment-mark {
 547     cursor: help;
 548     padding: 0 0.2em;
 549     font-weight: bold;
 550     font-style: italic;
 551 }
 552
 553 .field-comment-warning {
 554     color: #A00;
 555 }
 556
 557 .green { /* default form button */
 558     color: #080 !important;
 559 }
 560
 561 table.datatable {
 562     margin: 0.5em 0 1em;
 563 }
 564
 565 table.datatable th {
 566     padding: 0 1em 0 0.5em;
 567     border-bottom: 1px #999 solid;
 568     text-align: left;
 569 }
 570
 571 table.datatable td {
 572     padding: 1px 0.5em;
 573     border-bottom: 1px #DEE1FF solid;
 574 }
 575
 576 /* textarea with config file's contents */
 577
 578 #textconfig {
 579     width: 100%;
 580     border: 0;
 581 }
 582
 583 /* error list */
 584
 585 dd {
 586     margin-left: 0.5em;
 587 }
 588
 589 dd:before {
 590     content: "\25B8  ";
 591 }
 592
 593 /* links on failed validation page, when saving a form */
 594
 595 a.btn {
 596     padding: 1px 5px;
 597     text-decoration: none;
 598     background: #E2E8FF;
 599     border: 1px #A6C8FF solid;
 600     border-top-color: #AFD0FF;
 601     border-left-color: #AFD0FF;
 602     font-weight: bold;
 603 }
 604
 605 a.btn:hover, a.btn:active {
 606     background: #E6F5FF;
 607     color: #004C96;
 608 }