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