wp-admin/css/customize-controls.css

   1 body {
   2         overflow: hidden;
   3 }
   4
   5 #customize-controls a {
   6         text-decoration: none;
   7 }
   8
   9 .customize-section {
  10         border-top: 1px solid #fff;
  11         border-bottom: 1px solid #dfdfdf;
  12         margin: 0;
  13 }
  14
  15 .control-section.customize-section:hover,
  16 .control-section.customize-section.open {
  17         border-top-color: #808080;
  18 }
  19
  20 .control-section.customize-section:hover {
  21         border-bottom-color: #6d6d6d;
  22 }
  23
  24 .customize-section.open:hover {
  25         border-bottom-color: #dfdfdf;
  26 }
  27
  28 .customize-section:last-child {
  29         box-shadow: 0 1px 0 0px #fff;
  30 }
  31
  32 .customize-section-title {
  33         margin: 0;
  34         padding: 15px 20px;
  35         position: relative;
  36
  37         cursor: pointer;
  38
  39         -webkit-user-select: none;
  40         -moz-user-select: none;
  41         user-select: none;
  42 }
  43
  44 .customize-section-title:focus {
  45         outline: none;
  46 }
  47
  48 .cannot-expand .customize-section-title {
  49         cursor: auto;
  50 }
  51
  52 .customize-section-content {
  53         display: none;
  54         padding: 10px 20px 15px;
  55         overflow: hidden;
  56 }
  57
  58 .control-section .customize-section-title {
  59         padding: 10px 20px;
  60         font-size: 15px;
  61         font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
  62         font-weight: normal;
  63         text-shadow: 0 1px 0 #fff;
  64         background: #f5f5f5;
  65         background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#f5f5f5));
  66         background-image: -webkit-linear-gradient(bottom, #eee, #f5f5f5);
  67         background-image:    -moz-linear-gradient(bottom, #eee, #f5f5f5);
  68         background-image:      -o-linear-gradient(bottom, #eee, #f5f5f5);
  69         background-image: linear-gradient(to top, #eee, #f5f5f5);
  70 }
  71
  72 .control-section:hover .customize-section-title,
  73 .control-section .customize-section-title:hover,
  74 .control-section.open .customize-section-title,
  75 .control-section .customize-section-title:focus {
  76         color: #fff;
  77         text-shadow: 0 -1px 0 #333;
  78         background: #808080;
  79         background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
  80         background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
  81         background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080);
  82         background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080);
  83         background-image: linear-gradient(to top, #6d6d6d, #808080);
  84 }
  85
  86 .control-section.open .customize-section-title {
  87         border-bottom: 1px solid #6d6d6d;
  88 }
  89
  90 .customize-section.open .customize-section-content {
  91         display: block;
  92         background: #fdfdfd;
  93 }
  94
  95 .customize-section-title:after {
  96         content: '';
  97         width: 0;
  98         height: 0;
  99         border-color: #ccc transparent;
 100         border-style: solid;
 101         border-width: 6px 6px 0;
 102         position: absolute;
 103         top: 25px;
 104         right: 20px;
 105         z-index: 1;
 106 }
 107
 108 .cannot-expand .customize-section-title:after {
 109         display: none;
 110 }
 111
 112 .customize-section-title:hover:after,
 113 .customize-section-title:focus:after {
 114         border-color: #aaa transparent;
 115 }
 116
 117 .control-section .customize-section-title:hover:after,
 118 .control-section .customize-section-title:focus:after {
 119         border-color: #eee transparent;
 120 }
 121
 122 .control-section .customize-section-title:after {
 123         top: 15px;
 124 }
 125
 126 #customize-info .customize-section-content {
 127         background: transparent;
 128 }
 129
 130 #customize-info .preview-notice {
 131         font-size: 13px;
 132         line-height: 24px;
 133         color: #999;
 134 }
 135
 136 #customize-info .theme-name {
 137         font-size: 20px;
 138         font-weight: 200;
 139         line-height: 24px;
 140         color: #333;
 141         display: block;
 142         text-shadow: 0 1px 0 #fff;
 143 }
 144
 145 #customize-info .theme-screenshot {
 146         width: 258px;
 147         border: 1px solid #ccc;
 148 }
 149
 150 #customize-info .theme-description {
 151         margin-top: 1em;
 152         color: #777;
 153         line-height: 20px;
 154 }
 155
 156 #customize-controls .submit {
 157         text-align: center;
 158 }
 159
 160 #customize-theme-controls > ul,
 161 #customize-theme-controls .customize-section-content {
 162         margin: 0;
 163 }
 164
 165 #customize-header-actions .button-primary {
 166         float: right;
 167         margin-top: 10px;
 168 }
 169
 170 #customize-header-actions .spinner {
 171         margin-top: 16px;
 172         margin-right: 4px;
 173 }
 174
 175 .saving #customize-header-actions .spinner {
 176         display: block;
 177 }
 178
 179 .customize-control {
 180         width: 100%;
 181         float: left;
 182         clear: both;
 183         margin-bottom: 8px;
 184 }
 185
 186 .customize-control-title {
 187         display: block;
 188         line-height: 24px;
 189         font-weight: bold;
 190 }
 191
 192 .customize-control select,
 193 .customize-control input[type="text"],
 194 .customize-control input[type="radio"],
 195 .customize-control input[type="checkbox"],
 196 .customize-control-color .color-picker,
 197 .customize-control-checkbox label,
 198 .customize-control-upload div {
 199         line-height: 28px;
 200 }
 201
 202 .customize-control input[type="text"] {
 203         width: 98%;
 204         line-height: 18px;
 205         margin: 0;
 206 }
 207
 208 .customize-control select {
 209         min-width: 50%;
 210         max-width: 100%;
 211         height: 28px;
 212         line-height: 28px;
 213 }
 214
 215 .customize-control-checkbox input {
 216         margin-right: 5px;
 217 }
 218
 219 .customize-control-radio {
 220         padding: 5px 0 10px;
 221 }
 222
 223 .customize-control-radio .customize-control-title {
 224         margin-bottom: 0;
 225         line-height: 22px;
 226 }
 227
 228 .customize-control-radio label {
 229         line-height: 20px;
 230 }
 231
 232 .customize-control-radio input {
 233         margin-right: 5px;
 234 }
 235
 236 #customize-preview iframe {
 237         width: 100%;
 238         height: 100%;
 239 }
 240
 241 /*
 242  * Style for custom settings
 243  */
 244
 245 /*
 246  * Dropdowns
 247  */
 248 .customize-section .dropdown {
 249         float: left;
 250         display: block;
 251         position: relative;
 252         cursor: pointer;
 253
 254         -webkit-border-radius: 3px;
 255         border-radius: 3px;
 256 }
 257
 258 .customize-section .dropdown-content {
 259         overflow: hidden;
 260         float: left;
 261         min-width: 30px;
 262         height: 16px;
 263         line-height: 16px;
 264         margin-right: 16px;
 265         padding: 4px 5px;
 266         background-color: #eee;
 267         border: 1px solid #ccc;
 268         -webkit-border-radius: 3px 0 0 3px;
 269         border-radius: 3px 0 0 3px;
 270
 271         -webkit-user-select: none;
 272         -moz-user-select: none;
 273         user-select: none;
 274 }
 275
 276 .customize-control .dropdown-arrow {
 277         position: absolute;
 278         top: 0;
 279         bottom: 0;
 280         right: 0;
 281         width: 15px;
 282
 283         border-color: #ccc;
 284         border-style: solid;
 285         border-width: 1px 1px 1px 0;
 286         -webkit-border-radius: 0 3px 3px 0;
 287         border-radius: 0 3px 3px 0;
 288 }
 289
 290 .customize-control .dropdown-arrow:after {
 291         content: '';
 292         width: 0;
 293         height: 0;
 294         border-color: #ccc transparent;
 295         border-style: solid;
 296         border-width: 4px 4px 0 4px;
 297         position: absolute;
 298         top: 50%;
 299         margin-top: -1px;
 300         right: 4px;
 301         z-index: 1;
 302 }
 303
 304 .customize-section .dropdown:hover .dropdown-content,
 305 .customize-control .dropdown:hover .dropdown-arrow {
 306         border-color: #aaa;
 307 }
 308
 309 .customize-section .dropdown:hover .dropdown-arrow:after {
 310         border-color: #aaa transparent;
 311 }
 312
 313 .customize-control .dropdown-status {
 314         display: none;
 315         max-width: 112px;
 316         color: #777;
 317 }
 318
 319 /*
 320  * Color Picker
 321  */
 322 .customize-control-color .color-picker-hex {
 323         display: none;
 324 }
 325
 326 .customize-control-color.open .color-picker-hex {
 327         display: block;
 328 }
 329
 330 .customize-control-color .dropdown {
 331         margin-right: 5px;
 332         margin-bottom: 5px;
 333 }
 334
 335 .customize-control-color .dropdown .dropdown-content {
 336         background-color: #fff;
 337         border: 1px solid rgba( 0, 0, 0, 0.15 );
 338 }
 339
 340 .customize-control-color .dropdown:hover .dropdown-content {
 341         border-color: rgba( 0, 0, 0, 0.25 );
 342 }
 343
 344 .customize-section input[type="text"].color-picker-hex {
 345         width: 65px;
 346         font-family: monospace;
 347         text-align: center;
 348         line-height: 16px;
 349 }
 350
 351 /* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */
 352 .customize-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
 353         color: transparent;
 354 }
 355 .customize-section input[type="text"].color-picker-hex:-moz-placeholder {
 356         color: #999;
 357 }
 358
 359 /*
 360  * Image Picker
 361  */
 362 .customize-control-image .library,
 363 .customize-control-image .actions {
 364         display: none;
 365         float: left;
 366         width: 100%;
 367 }
 368
 369 .customize-control-image.open .library,
 370 .customize-control-image.open .actions {
 371         display: block;
 372 }
 373
 374 .customize-section .customize-control-image .dropdown-content {
 375         height: auto;
 376         min-height: 24px;
 377         min-width: 40px;
 378         padding: 0;
 379 }
 380
 381 .customize-section .customize-control-image .dropdown-status {
 382         padding: 4px 5px;
 383 }
 384
 385 .customize-section .customize-control-image .preview-thumbnail img {
 386         display: block;
 387         width: 100%;
 388         max-width: 122px;
 389         max-height: 98px;
 390         margin: 0 auto;
 391 }
 392
 393 .customize-section .customize-control-image .actions {
 394         text-align: right;
 395 }
 396
 397 .customize-section .customize-control-image .library ul {
 398         border-bottom: 1px solid #dfdfdf;
 399         float: left;
 400         width: 100%;
 401         margin: 10px 0 0;
 402 }
 403
 404 .customize-section .customize-control-image .library li {
 405         color: #999;
 406         float: left;
 407         padding: 3px 5px;
 408         margin: 0;
 409         border-style: solid;
 410         border-color: transparent;
 411         border-width: 1px 1px 0 1px;
 412 }
 413
 414 .customize-section .customize-control-image .library li.library-selected {
 415         margin-bottom: -1px;
 416         padding-bottom: 4px;
 417
 418         color: #777;
 419         background: #fdfdfd;
 420         border-color: #dfdfdf;
 421         -webkit-border-radius: 3px 3px 0 0;
 422         border-radius: 3px 3px 0 0 ;
 423 }
 424
 425 .customize-section .customize-control-image .library-content {
 426         display: none;
 427         width: 100%;
 428         float: left;
 429         padding: 10px 0;
 430 }
 431
 432 .customize-section .customize-control-image .library-content.library-selected {
 433         display: block;
 434 }
 435
 436 .customize-section .customize-control-image .library .thumbnail {
 437         display: block;
 438         width: 100%;
 439 }
 440
 441 .customize-section .customize-control-image .library .thumbnail:hover img {
 442         border-color: #21759b;
 443 }
 444
 445 .customize-section .customize-control-image .library .thumbnail img {
 446         display: block;
 447         max-width: 90%;
 448         max-height: 80px;
 449
 450         margin: 5px auto;
 451         padding: 4px;
 452         background: #fff;
 453         border: 1px solid #dfdfdf;
 454 }
 455
 456 .customize-section .customize-control-upload .upload-fallback,
 457 .customize-section .customize-control-image .upload-fallback {
 458         display: none;
 459 }
 460
 461 .customize-section .customize-control-upload .upload-dropzone,
 462 .customize-section .customize-control-image .upload-dropzone {
 463         display: none;
 464         padding: 15px 10px;
 465         border: 3px dashed #dfdfdf;
 466         margin: 5px auto;
 467         text-align: center;
 468         color: #777;
 469         position: relative;
 470         cursor: default;
 471 }
 472
 473 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
 474 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
 475         display: block;
 476         -webkit-transition: border-color 0.1s;
 477         -moz-transition:    border-color 0.1s;
 478         -ms-transition:     border-color 0.1s;
 479         -o-transition:      border-color 0.1s;
 480         transition:         border-color 0.1s;
 481 }
 482
 483 .customize-section .customize-control-upload .library ul li,
 484 .customize-section .customize-control-image .library ul li {
 485         cursor: pointer;
 486 }
 487
 488 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
 489 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
 490         border-color: #83b4d8;
 491 }
 492
 493 /**
 494  * iOS can't scroll iframes,
 495  * instead it expands the iframe size to match the size of the content
 496  */
 497 .ios .wp-full-overlay {
 498         position: relative;
 499 }
 500
 501 .ios #customize-preview {
 502         position: relative;
 503 }
 504
 505 .ios #customize-controls .wp-full-overlay-sidebar-content {
 506         -webkit-overflow-scrolling: touch;
 507 }
 508
 509 /**
 510  * Handle cheaters.
 511  */
 512 body.cheatin {
 513         min-width: 0;
 514         background: #f9f9f9;
 515         padding: 50px;
 516 }
 517
 518 body.cheatin p {
 519         max-width: 700px;
 520         margin: 0 auto;
 521         padding: 2em;
 522         font-size: 14px;
 523         background: #fff;
 524         border: 1px solid #dfdfdf;
 525         -webkit-border-radius: 3px;
 526         border-radius:         3px;
 527 }