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