PageRenderTime 137ms CodeModel.GetById 11ms app.highlight 114ms RepoModel.GetById 1ms app.codeStats 1ms

/wp-admin/css/customize-controls.css

https://bitbucket.org/devbctph/futura_wp
CSS | 3032 lines | 2517 code | 453 blank | 62 comment | 0 complexity | 4ea233ee70cb4a4630b7f886d19c2274 MD5 | raw file

Large files files are truncated, but you can click here to view the full file

   1body {
   2	overflow: hidden;
   3	-webkit-text-size-adjust: 100%;
   4}
   5
   6.customize-controls-close,
   7.widget-control-actions a {
   8	text-decoration: none;
   9}
  10
  11#customize-controls h3 {
  12	font-size: 14px;
  13}
  14
  15#customize-controls img {
  16	max-width: 100%;
  17}
  18
  19#customize-controls .submit {
  20	text-align: center;
  21}
  22
  23#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked {
  24	background-color: rgba( 0, 0, 0, 0.7 );
  25	padding: 25px;
  26}
  27
  28#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message {
  29	margin-left: auto;
  30	margin-right: auto;
  31	max-width: 366px;
  32	min-height: 64px;
  33	width: auto;
  34	padding: 25px 25px 25px 109px;
  35	position: relative;
  36	background: #fff;
  37	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
  38	line-height: 1.5;
  39	overflow-y: auto;
  40	text-align: left;
  41	top: calc( 50% - 100px );
  42}
  43
  44#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing {
  45	margin-top: 0;
  46}
  47#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons {
  48	margin-bottom: 0;
  49}
  50
  51.customize-changeset-locked-avatar {
  52	width: 64px;
  53	position: absolute;
  54	left: 25px;
  55	top: 25px;
  56}
  57
  58.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button {
  59	margin-right: 10px;
  60	margin-top: 0;
  61}
  62
  63#customize-controls .description {
  64	color: #555d66;
  65}
  66
  67#customize-save-button-wrapper {
  68	float: right;
  69	margin-top: 9px;
  70}
  71
  72body:not(.ready) #customize-save-button-wrapper .save {
  73	visibility: hidden;
  74}
  75#customize-save-button-wrapper .save {
  76	float: left;
  77	border-radius: 3px;
  78	box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
  79	margin-top: 0;
  80}
  81
  82#customize-save-button-wrapper .save:focus, #publish-settings:focus {
  83	box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; /* This is default box shadow for focus */
  84}
  85
  86#customize-save-button-wrapper .save.has-next-sibling {
  87	border-radius: 3px 0 0 3px;
  88}
  89
  90#customize-sidebar-outer-content {
  91	position: absolute;
  92	top: 0;
  93	bottom: 0;
  94	left: 0;
  95	visibility: hidden;
  96	overflow-x: hidden;
  97	overflow-y: auto;
  98	width: 100%;
  99	margin: 0;
 100	z-index: -1;
 101	background: #eee;
 102	transition: left .18s;
 103	border-right: 1px solid #ddd;
 104	border-left: 1px solid #ddd;
 105	height: 100%;
 106}
 107
 108#customize-theme-controls .control-section-outer {
 109	display: none !important;
 110}
 111
 112#customize-outer-theme-controls .accordion-section-content {
 113	padding: 12px;
 114}
 115
 116#customize-outer-theme-controls .accordion-section-content.open {
 117	display: block;
 118}
 119
 120.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
 121	visibility: visible;
 122	left: 100%;
 123	transition: left .18s;
 124}
 125
 126.customize-outer-pane-parent {
 127	margin: 0;
 128}
 129
 130.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
 131	left: 300px;
 132	opacity: 0.4;
 133}
 134
 135.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
 136.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
 137.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
 138.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
 139.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
 140.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
 141	left: 64%;
 142}
 143
 144#customize-outer-theme-controls li.notice {
 145	padding-top: 8px;
 146	padding-bottom: 8px;
 147	margin-left: 0;
 148	margin-bottom: 10px;
 149}
 150
 151#publish-settings {
 152	text-indent: 0;
 153	border-radius: 0 3px 3px 0;
 154	padding-left: 0;
 155	padding-right: 0;
 156	box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
 157	font-size: 14px;
 158	width: 30px;
 159	float: left;
 160	-webkit-transform: none;
 161	transform: none;
 162	margin-top: 0;
 163}
 164
 165body:not(.ready) #publish-settings,
 166body.trashing #customize-save-button-wrapper .save,
 167body.trashing #publish-settings {
 168	display: none;
 169}
 170
 171#customize-header-actions .spinner {
 172	margin-top: 13px;
 173	margin-right: 4px;
 174}
 175
 176.saving #customize-header-actions .spinner,
 177.trashing #customize-header-actions .spinner {
 178	visibility: visible;
 179}
 180
 181#customize-header-actions {
 182	border-bottom: 1px solid #ddd;
 183}
 184
 185#customize-controls .wp-full-overlay-sidebar-content {
 186	overflow-y: auto;
 187	overflow-x: hidden;
 188}
 189
 190.outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
 191	background: #eee;
 192}
 193
 194#customize-controls .customize-info {
 195	border: none;
 196	border-bottom: 1px solid #ddd;
 197	margin-bottom: 15px;
 198}
 199
 200#customize-control-changeset_status .customize-inside-control-row,
 201#customize-control-changeset_preview_link input {
 202	background-color: #ffffff;
 203	border-bottom: 1px solid #ddd;
 204	box-sizing: content-box;
 205	width: 100%;
 206	margin-left: -12px;
 207	padding-left: 12px;
 208	padding-right: 12px;
 209}
 210
 211#customize-control-trash_changeset {
 212	margin-top: 20px;
 213}
 214#customize-control-trash_changeset .button-link {
 215	position: relative;
 216	padding-left: 24px;
 217	display: inline-block;
 218}
 219#customize-control-trash_changeset .button-link:before {
 220	content: "\f182";
 221	font: normal 22px dashicons;
 222	text-decoration: none;
 223	position: absolute;
 224	left: 0;
 225	top: -2px;
 226}
 227
 228#customize-controls .date-input:invalid {
 229	border-color: #dc3232;
 230}
 231
 232#customize-control-changeset_status .customize-inside-control-row {
 233	padding-top: 10px;
 234	padding-bottom: 10px;
 235	font-weight: 500;
 236}
 237
 238#customize-control-changeset_status .customize-inside-control-row:first-of-type {
 239	border-top: 1px solid #ddd;
 240}
 241
 242#customize-control-changeset_status .customize-control-title {
 243	margin-bottom: 6px;
 244}
 245
 246#customize-control-changeset_status input {
 247	margin-left: 0;
 248}
 249
 250#customize-control-changeset_preview_link {
 251	position: relative;
 252	display: block;
 253}
 254
 255.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
 256	margin: 0;
 257	position: absolute;
 258	bottom: 9px;
 259	right: 0;
 260}
 261
 262.preview-link-wrapper {
 263	position: relative;
 264}
 265
 266.customize-copy-preview-link:before,
 267.customize-copy-preview-link:after {
 268	content: "";
 269	height: 28px;
 270	position: absolute;
 271	background: #ffffff;
 272	top: -1px;
 273}
 274
 275.customize-copy-preview-link:before {
 276	left: -10px;
 277	width: 9px;
 278	opacity: 0.75;
 279}
 280
 281.customize-copy-preview-link:after {
 282	left: -5px;
 283	width: 4px;
 284	opacity: 0.8;
 285}
 286
 287#customize-control-changeset_preview_link input {
 288	line-height: 2.5;
 289	border-top: 1px solid #ddd;
 290	border-left: none;
 291	border-right: none;
 292	text-indent: -999px;
 293	color: #fff;
 294}
 295
 296#customize-control-changeset_preview_link label {
 297	position: relative;
 298	display: block;
 299}
 300
 301#customize-control-changeset_preview_link a {
 302	display: inline-block;
 303	position: absolute;
 304	white-space: nowrap;
 305	overflow: hidden;
 306	width: 90%;
 307	bottom: 14px;
 308	font-size: 14px;
 309	text-decoration: none;
 310}
 311
 312#customize-control-changeset_preview_link a.disabled,
 313#customize-control-changeset_preview_link a.disabled:active,
 314#customize-control-changeset_preview_link a.disabled:focus,
 315#customize-control-changeset_preview_link a.disabled:visited {
 316	color: black;
 317	opacity: 0.4;
 318	cursor: default;
 319	outline: none;
 320	box-shadow: none;
 321}
 322
 323#sub-accordion-section-publish_settings .customize-section-description-container {
 324	display: none;
 325}
 326
 327#customize-controls .customize-info.section-meta {
 328	margin-bottom: 15px;
 329}
 330
 331.customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
 332	margin-top: 10px;
 333}
 334
 335.customize-control.customize-control-date_time .date-time-fields .date-input.day {
 336	margin-right: 0;
 337}
 338
 339.date-time-fields .date-input.month {
 340	width: auto;
 341	margin: 0;
 342}
 343
 344.date-time-fields .date-input.day,
 345.date-time-fields .date-input.hour,
 346.date-time-fields .date-input.minute {
 347	width: 46px;
 348}
 349
 350.date-time-fields .date-input.year {
 351	width: 60px;
 352}
 353
 354.date-time-fields .date-input.meridian {
 355	width: auto;
 356	margin: 0;
 357}
 358
 359.date-time-fields .time-row {
 360	margin-top: 12px;
 361}
 362
 363.date-time-fields .date-timezone {
 364	line-height: 2.2;
 365	text-decoration: none;
 366}
 367
 368#customize-control-changeset_preview_link {
 369	margin-top: 6px;
 370}
 371
 372#customize-control-changeset_status {
 373	margin-bottom: 0;
 374	padding-bottom: 0;
 375}
 376
 377#customize-control-changeset_scheduled_date {
 378	box-sizing: content-box;
 379	width: 100%;
 380	margin-left: -12px;
 381	padding: 12px;
 382	background: #ffffff;
 383	border-bottom: 1px solid #ddd;
 384	margin-bottom: 0;
 385}
 386
 387#customize-control-changeset_scheduled_date .customize-control-description {
 388	font-style: normal;
 389}
 390
 391#customize-controls .customize-info.is-in-view,
 392#customize-controls .customize-section-title.is-in-view {
 393	position: absolute;
 394	z-index: 9;
 395	width: 100%;
 396	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
 397}
 398
 399#customize-controls .customize-section-title.is-in-view {
 400	margin-top: 0;
 401}
 402
 403#customize-controls .customize-info.is-in-view + .accordion-section {
 404	margin-top: 15px;
 405}
 406
 407#customize-controls .customize-info.is-sticky,
 408#customize-controls .customize-section-title.is-sticky {
 409	position: fixed;
 410	top: 46px;
 411}
 412
 413#customize-controls .customize-info .accordion-section-title {
 414	background: #fff;
 415	color: #555d66;
 416	border-left: none;
 417	border-right: none;
 418	border-bottom: none;
 419	cursor: default;
 420}
 421
 422#customize-controls .customize-info.open .accordion-section-title:after,
 423#customize-controls .customize-info .accordion-section-title:hover:after,
 424#customize-controls .customize-info .accordion-section-title:focus:after {
 425	color: #32373c;
 426}
 427
 428#customize-controls .customize-info .accordion-section-title:after {
 429	display: none;
 430}
 431
 432#customize-controls .customize-info .preview-notice {
 433	font-size: 13px;
 434	line-height: 24px;
 435}
 436
 437#customize-controls .customize-pane-child .customize-section-title h3,
 438#customize-controls .customize-pane-child h3.customize-section-title,
 439#customize-outer-theme-controls .customize-pane-child .customize-section-title h3,
 440#customize-outer-theme-controls .customize-pane-child h3.customize-section-title,
 441#customize-controls .customize-info .panel-title {
 442	font-size: 20px;
 443	font-weight: 200;
 444	line-height: 26px;
 445	display: block;
 446	overflow: hidden;
 447	white-space: nowrap;
 448	text-overflow: ellipsis;
 449}
 450
 451#customize-controls .customize-section-title span.customize-action {
 452	overflow: hidden;
 453	white-space: nowrap;
 454	text-overflow: ellipsis;
 455}
 456
 457#customize-controls .customize-info .customize-help-toggle {
 458	position: absolute;
 459	top: 4px;
 460	right: 1px;
 461	padding: 20px 20px 10px 10px;
 462	width: 20px;
 463	height: 20px;
 464	cursor: pointer;
 465	box-shadow: none;
 466	-webkit-appearance: none;
 467	background: transparent;
 468	color: #555d66;
 469	border: none;
 470}
 471
 472#customize-controls .customize-info .customize-help-toggle:before {
 473	position: absolute;
 474	top: 5px;
 475	left: 6px;
 476}
 477
 478#customize-controls .customize-info.open .customize-help-toggle,
 479#customize-controls .customize-info .customize-help-toggle:focus,
 480#customize-controls .customize-info .customize-help-toggle:hover {
 481	color: #0073aa;
 482}
 483
 484#customize-controls .customize-info .customize-panel-description,
 485#customize-controls .customize-info .customize-section-description,
 486#customize-outer-theme-controls .customize-info .customize-section-description,
 487#customize-controls .no-widget-areas-rendered-notice {
 488	color: #555d66;
 489	display: none;
 490	background: #fff;
 491	padding: 12px 15px;
 492	border-top: 1px solid #ddd;
 493}
 494
 495#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
 496	border-top: none;
 497}
 498.no-widget-areas-rendered-notice {
 499	font-style: italic;
 500}
 501.no-widget-areas-rendered-notice p:first-child {
 502	margin-top: 0;
 503}
 504.no-widget-areas-rendered-notice p:last-child {
 505	margin-bottom: 0;
 506}
 507
 508#customize-controls .customize-info .customize-section-description {
 509	margin-bottom: 15px;
 510}
 511
 512#customize-controls .customize-info .customize-panel-description p:first-child,
 513#customize-controls .customize-info .customize-section-description p:first-child {
 514	margin-top: 0;
 515}
 516
 517#customize-controls .customize-info .customize-panel-description p:last-child,
 518#customize-controls .customize-info .customize-section-description p:last-child {
 519	margin-bottom: 0;
 520}
 521
 522#customize-controls .current-panel .control-section > h3.accordion-section-title {
 523	padding-right: 30px;
 524}
 525
 526#customize-theme-controls .control-section,
 527#customize-outer-theme-controls .control-section {
 528	border: none;
 529}
 530
 531#customize-theme-controls .accordion-section-title,
 532#customize-outer-theme-controls .accordion-section-title {
 533	color: #555d66;
 534	background-color: #fff;
 535	border-bottom: 1px solid #ddd;
 536	border-left: 4px solid #fff;
 537	transition: .15s color ease-in-out,
 538	            .15s background-color ease-in-out,
 539	            .15s border-color ease-in-out;
 540}
 541
 542#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
 543	color: #555;
 544	background-color: #fff;
 545	border-left: 4px solid #fff;
 546}
 547
 548#customize-theme-controls .accordion-section-title:after,
 549#customize-outer-theme-controls .accordion-section-title:after {
 550	content: "\f345";
 551	color: #a0a5aa;
 552}
 553
 554#customize-theme-controls .accordion-section-content,
 555#customize-outer-theme-controls .accordion-section-content {
 556	color: #555d66;
 557	background: transparent;
 558}
 559
 560#customize-controls .control-section:hover > .accordion-section-title,
 561#customize-controls .control-section .accordion-section-title:hover,
 562#customize-controls .control-section.open .accordion-section-title,
 563#customize-controls .control-section .accordion-section-title:focus {
 564	color: #0073aa;
 565	background: #f3f3f5;
 566	border-left-color: #0073aa;
 567}
 568
 569#accordion-section-themes + .control-section {
 570	border-top: 1px solid #ddd;
 571}
 572
 573.js .control-section:hover .accordion-section-title,
 574.js .control-section .accordion-section-title:hover,
 575.js .control-section.open .accordion-section-title,
 576.js .control-section .accordion-section-title:focus {
 577	background: #f3f3f5;
 578}
 579
 580#customize-theme-controls .control-section:hover > .accordion-section-title:after,
 581#customize-theme-controls .control-section .accordion-section-title:hover:after,
 582#customize-theme-controls .control-section.open .accordion-section-title:after,
 583#customize-theme-controls .control-section .accordion-section-title:focus:after,
 584#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
 585#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
 586#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
 587#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
 588	color: #0073aa;
 589}
 590
 591#customize-theme-controls .control-section.open {
 592	border-bottom: 1px solid #eee;
 593}
 594
 595#customize-theme-controls .control-section.open .accordion-section-title,
 596#customize-outer-theme-controls .control-section.open .accordion-section-title {
 597	border-bottom-color: #eee !important;
 598}
 599
 600#customize-theme-controls .control-section:last-of-type.open,
 601#customize-theme-controls .control-section:last-of-type > .accordion-section-title {
 602	border-bottom-color: #ddd;
 603}
 604
 605#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
 606#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
 607#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
 608	border-top: 1px solid #ddd;
 609}
 610
 611#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
 612	border-top: none;
 613}
 614
 615#customize-theme-controls > ul {
 616	margin: 0;
 617}
 618
 619#customize-theme-controls .accordion-section-content {
 620	position: absolute;
 621	top: 0;
 622	left: 100%;
 623	width: 100%;
 624	margin: 0;
 625	padding: 12px;
 626	box-sizing: border-box;
 627}
 628
 629#customize-info,
 630#customize-theme-controls .customize-pane-parent,
 631#customize-theme-controls .customize-pane-child {
 632	overflow: visible;
 633	width: 100%;
 634	margin: 0;
 635	padding: 0;
 636	box-sizing: border-box;
 637	transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
 638	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
 639	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
 640}
 641
 642#customize-theme-controls .customize-pane-child.skip-transition {
 643	transition: none;
 644}
 645
 646#customize-info,
 647#customize-theme-controls .customize-pane-parent {
 648	position: relative;
 649	visibility: visible;
 650	height: auto;
 651	max-height: none;
 652	overflow: auto;
 653	-webkit-transform: none;
 654	transform: none;
 655}
 656
 657#customize-theme-controls .customize-pane-child {
 658	position: absolute;
 659	top: 0;
 660	left: 0;
 661	visibility: hidden;
 662	height: 0;
 663	max-height: none;
 664	overflow: hidden;
 665	-webkit-transform: translateX(100%);
 666	transform: translateX(100%);
 667}
 668
 669#customize-theme-controls .customize-pane-child.open,
 670#customize-theme-controls .customize-pane-child.current-panel {
 671	-webkit-transform: none;
 672	transform: none;
 673}
 674
 675.section-open #customize-theme-controls .customize-pane-parent,
 676.in-sub-panel #customize-theme-controls .customize-pane-parent,
 677.section-open #customize-info,
 678.in-sub-panel #customize-info,
 679.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
 680	visibility: hidden;
 681	height: 0;
 682	overflow: hidden;
 683	-webkit-transform: translateX(-100%);
 684	transform: translateX(-100%);
 685}
 686
 687.section-open #customize-theme-controls .customize-pane-parent.busy,
 688.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
 689.section-open #customize-info.busy,
 690.in-sub-panel #customize-info.busy,
 691.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
 692#customize-theme-controls .customize-pane-child.open,
 693#customize-theme-controls .customize-pane-child.current-panel,
 694#customize-theme-controls .customize-pane-child.busy {
 695	visibility: visible;
 696	height: auto;
 697	overflow: auto;
 698}
 699
 700#customize-theme-controls .customize-pane-child.accordion-section-content,
 701#customize-theme-controls .customize-pane-child.accordion-sub-container {
 702	display: block;
 703	overflow-x: hidden;
 704}
 705
 706#customize-theme-controls .customize-pane-child.accordion-section-content {
 707	padding: 12px;
 708}
 709
 710#customize-theme-controls .customize-pane-child.menu li {
 711	position: static;
 712}
 713
 714.customize-section-description-container,
 715.control-section-nav_menu .customize-section-description-container,
 716.control-section-new_menu .customize-section-description-container {
 717	margin-bottom: 15px;
 718}
 719
 720.control-section-nav_menu .customize-control,
 721.control-section-new_menu .customize-control {
 722	/* Override default `margin-bottom` for `.customize-control` */
 723	margin-bottom: 0;
 724}
 725
 726.customize-section-title {
 727	margin: -12px -12px 0 -12px;
 728	border-bottom: 1px solid #ddd;
 729	background: #fff;
 730}
 731
 732div.customize-section-description {
 733	margin-top: 22px;
 734}
 735
 736.customize-info div.customize-section-description {
 737	margin-top: 0;
 738}
 739
 740div.customize-section-description p:first-child {
 741	margin-top: 0;
 742}
 743
 744div.customize-section-description p:last-child {
 745	margin-bottom: 0;
 746}
 747
 748#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 749	border-bottom: 1px solid #ddd;
 750	padding: 12px 12px 12px 12px;
 751}
 752
 753.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 754	padding: 12px 12px 13px 12px;
 755}
 756
 757.customize-section-title h3,
 758h3.customize-section-title {
 759	padding: 10px 10px 12px 14px;
 760	margin: 0;
 761	line-height: 21px;
 762	color: #555d66;
 763}
 764
 765.accordion-sub-container.control-panel-content {
 766	display: none;
 767	position: absolute;
 768	top: 0;
 769	width: 100%;
 770}
 771
 772.accordion-sub-container.control-panel-content.busy {
 773	display: block;
 774}
 775
 776.current-panel .accordion-sub-container.control-panel-content {
 777	width: 100%;
 778}
 779
 780.customize-controls-close {
 781	display: block;
 782	position: absolute;
 783	top: 0;
 784	left: 0;
 785	width: 45px;
 786	height: 41px;
 787	padding: 0 2px 0 0;
 788	background: #eee;
 789	border: none;
 790	border-top: 4px solid #eee;
 791	border-right: 1px solid #ddd;
 792	color: #444;
 793	text-align: left;
 794	cursor: pointer;
 795	transition: color .15s ease-in-out,
 796	            border-color .15s ease-in-out,
 797	            background .15s ease-in-out;
 798	box-sizing: content-box;
 799}
 800
 801.customize-panel-back,
 802.customize-section-back {
 803	display: block;
 804	float: left;
 805	width: 48px;
 806	height: 71px;
 807	padding: 0 24px 0 0;
 808	margin: 0;
 809	background: #fff;
 810	border: none;
 811	border-right: 1px solid #ddd;
 812	border-left: 4px solid #fff;
 813	box-shadow: none;
 814	cursor: pointer;
 815	transition: color .15s ease-in-out,
 816	            border-color .15s ease-in-out,
 817	            background .15s ease-in-out;
 818}
 819
 820.customize-section-back {
 821	height: 74px;
 822}
 823
 824.ios .customize-panel-back {
 825	display: none;
 826}
 827
 828.ios .expanded.in-sub-panel .customize-panel-back {
 829	display: block;
 830}
 831
 832#customize-controls .panel-meta.customize-info .accordion-section-title {
 833	margin-left: 48px;
 834	border-left: none;
 835}
 836
 837#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
 838#customize-controls .cannot-expand:hover .accordion-section-title {
 839	background: #fff;
 840	color: #555d66;
 841	border-left-color: #fff;
 842}
 843
 844.customize-controls-close:focus,
 845.customize-controls-close:hover,
 846.customize-controls-preview-toggle:focus,
 847.customize-controls-preview-toggle:hover {
 848	background: #fff;
 849	color: #0073aa;
 850	border-top-color: #0073aa;
 851	outline: none;
 852	box-shadow: none;
 853}
 854
 855
 856.customize-panel-back:hover,
 857.customize-panel-back:focus,
 858.customize-section-back:hover,
 859.customize-section-back:focus {
 860	color: #0073aa;
 861	background: #f3f3f5;
 862	border-left-color: #0073aa;
 863	outline: none;
 864	box-shadow: none;
 865}
 866
 867.customize-controls-close:before {
 868	font: normal 22px/45px dashicons;
 869	content: "\f335";
 870	position: relative;
 871	top: -3px;
 872	left: 13px;
 873}
 874
 875.customize-panel-back:before,
 876.customize-section-back:before {
 877	font: normal 20px/72px dashicons;
 878	content: "\f341";
 879	position: relative;
 880	left: 9px;
 881}
 882
 883.wp-full-overlay-sidebar .wp-full-overlay-header {
 884	background-color: #eee;
 885	transition: padding ease-in-out .18s;
 886}
 887
 888.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
 889	padding-left: 62px;
 890}
 891
 892p.customize-section-description {
 893	font-style: normal;
 894	margin-top: 22px;
 895	margin-bottom: 0;
 896}
 897
 898.customize-section-description ul {
 899	margin-left: 1em;
 900}
 901
 902.customize-section-description ul > li {
 903	list-style: disc;
 904}
 905
 906.section-description-buttons {
 907	text-align: right;
 908}
 909
 910.section-description-buttons button.button-link {
 911	color: #0073aa;
 912	text-decoration: underline;
 913}
 914
 915.customize-control {
 916	width: 100%;
 917	float: left;
 918	clear: both;
 919	margin-bottom: 12px;
 920}
 921
 922.customize-control select,
 923.customize-control input[type="radio"],
 924.customize-control input[type="checkbox"] {
 925	line-height: 28px;
 926}
 927
 928.customize-control input[type="text"],
 929.customize-control input[type="password"],
 930.customize-control input[type="email"],
 931.customize-control input[type="number"],
 932.customize-control input[type="search"],
 933.customize-control input[type="tel"],
 934.customize-control input[type="url"] {
 935	width: 100%;
 936	line-height: 18px;
 937	margin: 0;
 938}
 939
 940.customize-control-hidden {
 941	margin: 0;
 942}
 943
 944.customize-control-textarea textarea {
 945	width: 100%;
 946	resize: vertical;
 947}
 948
 949.customize-control select {
 950	width: 100%;
 951	height: 28px;
 952	line-height: 28px;
 953}
 954
 955.customize-control select[multiple] {
 956	height: auto;
 957}
 958
 959.customize-control-title {
 960	display: block;
 961	font-size: 14px;
 962	line-height: 24px;
 963	font-weight: 600;
 964	margin-bottom: 4px;
 965}
 966
 967.customize-control-description {
 968	display: block;
 969	font-style: italic;
 970	line-height: 18px;
 971	margin-top: 0;
 972	margin-bottom: 5px;
 973}
 974
 975.customize-section-description a.external-link:after {
 976	font: 16px/11px dashicons;
 977	content: "\f310";
 978	top: 3px;
 979	position: relative;
 980	padding-left: 3px;
 981	display: inline-block;
 982	text-decoration: none;
 983}
 984
 985.customize-control-color .color-picker,
 986.customize-control-upload div {
 987	line-height: 28px;
 988}
 989
 990.customize-control .customize-inside-control-row {
 991	line-height: 20px;
 992	display: block;
 993	margin-left: 24px;
 994	padding-top: 6px;
 995	padding-bottom: 6px;
 996}
 997
 998.customize-control-radio input,
 999.customize-control-checkbox input,
1000.customize-control-nav_menu_auto_add input {
1001	margin-right: 4px;
1002	margin-left: -24px;
1003}
1004
1005.customize-control-radio {
1006	padding: 5px 0 10px;
1007}
1008
1009.customize-control-radio .customize-control-title {
1010	margin-bottom: 0;
1011	line-height: 22px;
1012}
1013
1014.customize-control-radio .customize-control-title + .customize-control-description {
1015	margin-top: 7px;
1016}
1017
1018.customize-control-radio label,
1019.customize-control-checkbox label {
1020	vertical-align: top;
1021}
1022
1023.customize-control .attachment-thumb.type-icon {
1024	float: left;
1025	margin: 10px;
1026	width: auto;
1027}
1028
1029.customize-control .attachment-title {
1030	font-weight: 600;
1031	margin: 0;
1032	padding: 5px 10px;
1033}
1034
1035.customize-control .attachment-meta {
1036	white-space: nowrap;
1037	overflow: hidden;
1038	text-overflow: ellipsis;
1039	margin: 0;
1040	padding: 0 10px;
1041}
1042
1043.customize-control .attachment-meta-title {
1044	padding-top: 7px;
1045}
1046
1047/* Remove descender space. */
1048.customize-control .thumbnail-image,
1049.customize-control-header .current,
1050.customize-control .wp-media-wrapper.wp-video {
1051	line-height: 0;
1052}
1053
1054/* Remove descender space. */
1055.customize-control-site_icon .favicon-preview .browser-preview {
1056	vertical-align: top;
1057}
1058
1059.customize-control .thumbnail-image img {
1060	cursor: pointer;
1061}
1062
1063#customize-controls .thumbnail-audio .thumbnail {
1064	max-width: 64px;
1065	max-height: 64px;
1066	margin: 10px;
1067	float: left;
1068}
1069
1070#available-menu-items .accordion-section-content .new-content-item,
1071.customize-control-dropdown-pages .new-content-item {
1072	width: calc(100% - 30px);
1073	padding: 8px 15px;
1074	position: absolute;
1075	bottom: 0;
1076	z-index: 10;
1077	background: #eee;
1078	display: -webkit-box;
1079	display: flex;
1080}
1081
1082.customize-control-dropdown-pages .new-content-item {
1083	width: 100%;
1084	padding: 5px 0 5px 1px;
1085	position: relative;
1086}
1087
1088#available-menu-items .new-content-item .create-item-input,
1089.customize-control-dropdown-pages .new-content-item .create-item-input {
1090	-webkit-box-flex: 10;
1091	flex-grow: 10;
1092}
1093
1094#available-menu-items .new-content-item .add-content,
1095.customize-control-dropdown-pages .new-content-item .add-content {
1096	margin: 2px 0 2px 6px;
1097	-webkit-box-flex: 10;
1098	flex-grow: 1;
1099}
1100
1101.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
1102	border: 1px solid #dc3232;
1103}
1104
1105.customize-control-dropdown-pages .add-new-toggle {
1106	margin-left: 1px;
1107	font-weight: 600;
1108	line-height: 28px;
1109}
1110
1111#customize-preview iframe {
1112	width: 100%;
1113	height: 100%;
1114	position: absolute;
1115}
1116#customize-preview iframe + iframe {
1117	visibility: hidden;
1118}
1119
1120.wp-full-overlay-sidebar {
1121	background: #eee;
1122	border-right: 1px solid #ddd;
1123}
1124
1125
1126/**
1127 * Notifications
1128 */
1129
1130#customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
1131	margin: 4px 0 8px 0;
1132	padding: 0;
1133	cursor: default;
1134}
1135
1136#customize-controls .customize-control-widget_form.has-error .widget .widget-top,
1137.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
1138	box-shadow: inset 0 0 0 2px #dc3232;
1139	transition: .15s box-shadow linear;
1140}
1141
1142#customize-controls .customize-control-notifications-container li.notice {
1143	list-style: none;
1144	margin: 0 0 6px 0;
1145	padding: 9px 14px;
1146	overflow: hidden;
1147}
1148#customize-controls .customize-control-notifications-container .notice.is-dismissible {
1149	padding-right: 38px;
1150}
1151
1152.customize-control-notifications-container li.notice:last-child {
1153	margin-bottom: 0;
1154}
1155
1156#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
1157	margin-top: 0;
1158}
1159
1160#customize-controls .customize-control-widget_form .customize-control-notifications-container {
1161	margin-top: 8px;
1162}
1163
1164.customize-control-text.has-error input {
1165	outline: 2px solid #dc3232;
1166}
1167
1168#customize-controls #customize-notifications-area {
1169	position: absolute;
1170	top: 46px;
1171	width: 100%;
1172	border-bottom: 1px solid #ddd;
1173	display: block;
1174	padding: 0;
1175	margin: 0;
1176}
1177
1178.wp-full-overlay.collapsed #customize-controls #customize-notifications-area {
1179	display: none !important;
1180}
1181
1182#customize-controls #customize-notifications-area:not(.has-overlay-notifications),
1183#customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications),
1184#customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) {
1185	max-height: 210px;
1186	overflow-x: hidden;
1187	overflow-y: auto;
1188}
1189
1190#customize-controls #customize-notifications-area > ul,
1191#customize-controls #customize-notifications-area .notice,
1192#customize-controls .panel-meta > .customize-control-notifications-container,
1193#customize-controls .panel-meta > .customize-control-notifications-container .notice,
1194#customize-controls .customize-section-title > .customize-control-notifications-container,
1195#customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1196	margin: 0;
1197}
1198#customize-controls .panel-meta > .customize-control-notifications-container,
1199#customize-controls .customize-section-title > .customize-control-notifications-container {
1200	border-top: 1px solid #ddd;
1201}
1202#customize-controls #customize-notifications-area .notice,
1203#customize-controls .panel-meta > .customize-control-notifications-container .notice,
1204#customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1205	padding: 9px 14px;
1206}
1207#customize-controls #customize-notifications-area .notice.is-dismissible,
1208#customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible,
1209#customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible {
1210	padding-right: 38px;
1211}
1212#customize-controls #customize-notifications-area .notice + .notice,
1213#customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
1214#customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice {
1215	margin-top: 1px;
1216}
1217
1218@-webkit-keyframes customize-fade-in {
1219	0%   { opacity: 0; }
1220	100% { opacity: 1; }
1221}
1222
1223@keyframes customize-fade-in {
1224	0%   { opacity: 0; }
1225	100% { opacity: 1; }
1226}
1227
1228#customize-controls .notice.notification-overlay,
1229#customize-controls #customize-notifications-area .notice.notification-overlay {
1230	margin: 0;
1231	border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
1232}
1233
1234#customize-controls .customize-control-notifications-container.has-overlay-notifications {
1235	-webkit-animation: customize-fade-in 0.5s;
1236	animation: customize-fade-in 0.5s;
1237	z-index: 30;
1238}
1239
1240/* Note: Styles for this are also defined in themes.css */
1241#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message {
1242	clear: both;
1243	color: #191e23;
1244	font-size: 18px;
1245	font-style: normal;
1246	margin: 0;
1247	padding: 2em 0;
1248	text-align: center;
1249	width: 100%;
1250	display: block;
1251	top: 50%;
1252	position: relative;
1253}
1254
1255/* Style for custom settings */
1256
1257/**
1258 * Static front page
1259 */
1260
1261#customize-control-show_on_front.has-error {
1262	margin-bottom: 0;
1263}
1264#customize-control-show_on_front.has-error .customize-control-notifications-container {
1265	margin-top: 12px;
1266}
1267
1268/**
1269 * Dropdowns
1270 */
1271
1272.accordion-section .dropdown {
1273	float: left;
1274	display: block;
1275	position: relative;
1276	cursor: pointer;
1277}
1278
1279.accordion-section .dropdown-content {
1280	overflow: hidden;
1281	float: left;
1282	min-width: 30px;
1283	height: 16px;
1284	line-height: 16px;
1285	margin-right: 16px;
1286	padding: 4px 5px;
1287	border: 2px solid #eee;
1288	-webkit-user-select: none;
1289	-moz-user-select: none;
1290	-ms-user-select: none;
1291	user-select: none;
1292}
1293
1294/* @todo maybe no more used? */
1295.customize-control .dropdown-arrow {
1296	position: absolute;
1297	top: 0;
1298	bottom: 0;
1299	right: 0;
1300	width: 20px;
1301	background: #eee;
1302}
1303
1304.customize-control .dropdown-arrow:after {
1305	content: "\f140";
1306	font: normal 20px/1 dashicons;
1307	speak: none;
1308	display: block;
1309	padding: 0;
1310	text-indent: 0;
1311	text-align: center;
1312	position: relative;
1313	-webkit-font-smoothing: antialiased;
1314	-moz-osx-font-smoothing: grayscale;
1315	text-decoration: none !important;
1316	color: #32373c;
1317}
1318
1319.customize-control .dropdown-status {
1320	color: #32373c;
1321	background: #eee;
1322	display: none;
1323	max-width: 112px;
1324}
1325
1326.customize-control-color .dropdown {
1327	margin-right: 5px;
1328	margin-bottom: 5px;
1329}
1330
1331.customize-control-color .dropdown .dropdown-content {
1332	background-color: #555d66;
1333	border: 1px solid rgba(0, 0, 0, 0.15);
1334}
1335
1336.customize-control-color .dropdown:hover .dropdown-content {
1337	border-color: rgba(0, 0, 0, 0.25);
1338}
1339
1340/**
1341 * iOS can't scroll iframes,
1342 * instead it expands the iframe size to match the size of the content
1343 */
1344
1345.ios .wp-full-overlay {
1346	position: relative;
1347}
1348
1349.ios #customize-controls .wp-full-overlay-sidebar-content {
1350	-webkit-overflow-scrolling: touch;
1351}
1352
1353/* Media controls */
1354
1355.customize-control .actions .button {
1356	margin-top: 12px;
1357}
1358
1359.customize-control-header .actions,
1360.customize-control-header .uploaded {
1361	margin-bottom: 18px;
1362}
1363
1364.customize-control-header .uploaded button:not(.random),
1365.customize-control-header .default button:not(.random) {
1366	width: 100%;
1367	padding: 0;
1368	margin: 0;
1369	background: none;
1370	border: none;
1371	color: inherit;
1372	cursor: pointer;
1373}
1374
1375.customize-control-header button img {
1376	display: block;
1377}
1378
1379.customize-control .attachment-media-view .remove-button,
1380.customize-control .attachment-media-view .default-button,
1381.customize-control .attachment-media-view .upload-button,
1382.customize-control-header button.new,
1383.customize-control-header button.remove {
1384	width: auto;
1385	height: auto;
1386	white-space: normal;
1387}
1388
1389.customize-control .attachment-media-view .thumbnail,
1390.customize-control-header .current .container {
1391	overflow: hidden;
1392}
1393
1394.customize-control .attachment-media-view .placeholder,
1395.customize-control-header .placeholder {
1396	width: 100%;
1397	position: relative;
1398	text-align: center;
1399	cursor: default;
1400	border: 1px dashed #b4b9be;
1401	box-sizing: border-box;
1402	padding: 9px 0;
1403	line-height: 20px;
1404}
1405
1406.customize-control-header .inner {
1407	display: none;
1408	position: absolute;
1409	width: 100%;
1410	color: #555d66;
1411	white-space: nowrap;
1412	text-overflow: ellipsis;
1413	overflow: hidden;
1414}
1415
1416.customize-control-header .inner,
1417.customize-control-header .inner .dashicons {
1418	line-height: 20px;
1419	top: 8px;
1420}
1421
1422.customize-control-header .list .inner,
1423.customize-control-header .list .inner .dashicons {
1424	top: 9px;
1425}
1426
1427.customize-control-header .header-view {
1428	position: relative;
1429	width: 100%;
1430	margin-bottom: 12px;
1431}
1432
1433.customize-control-header .header-view:last-child {
1434	margin-bottom: 0px;
1435}
1436
1437/* Convoluted, but 'outline' support isn't good enough yet */
1438.customize-control-header .header-view:after {
1439	border: 0;
1440}
1441
1442.customize-control-header .header-view.selected .choice:focus {
1443	outline: none;
1444}
1445
1446.customize-control-header .header-view.selected:after {
1447	content: '';
1448	position: absolute;
1449	height: auto;
1450	top: 0;
1451	left: 0;
1452	bottom: 0;
1453	right: 0;
1454	border: 4px solid #00a0d2;
1455	border-radius: 2px;
1456}
1457
1458.customize-control-header .header-view.button.selected {
1459	border: 0;
1460}
1461
1462/* Header control: overlay "close" button */
1463
1464.customize-control-header .uploaded .header-view .close {
1465	font-size: 20px;
1466	color: #fff;
1467	background: #555d66;
1468	background: rgba(0, 0, 0, 0.5);
1469	position: absolute;
1470	top: 10px;
1471	left: -999px;
1472	z-index: 1;
1473	width: 26px;
1474	height: 26px;
1475	cursor: pointer;
1476}
1477
1478.customize-control-header .header-view:hover .close,
1479.customize-control-header .header-view .close:focus {
1480	left: auto;
1481	right: 10px;
1482}
1483
1484.customize-control-header .header-view .close:focus {
1485	outline: 1px solid #5b9dd9;
1486}
1487
1488/* Header control: randomiz(s)er */
1489
1490.customize-control-header .random.placeholder {
1491	cursor: pointer;
1492	border-radius: 2px;
1493	height: 40px;
1494}
1495
1496.customize-control-header button.random {
1497	width: 100%;
1498	height: auto;
1499	min-height: 40px;
1500	white-space: normal;
1501}
1502
1503.customize-control-header button.random .dice {
1504	margin-top: 4px;
1505}
1506
1507.customize-control-header .placeholder:hover .dice,
1508.customize-control-header .header-view:hover > button.random .dice {
1509	-webkit-animation: dice-color-change 3s infinite;
1510	animation: dice-color-change 3s infinite;
1511}
1512
1513.button-see-me {
1514	-webkit-animation: bounce .7s 1;
1515	animation: bounce .7s 1;
1516	-webkit-transform-origin: center bottom;
1517	transform-origin: center bottom;
1518}
1519
1520@-webkit-keyframes bounce {
1521	from, 20%, 53%, 80%, to {
1522		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1523		-webkit-transform: translate3d(0,0,0);
1524	}
1525
1526	40%, 43% {
1527		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1528		-webkit-transform: translate3d(0, -12px, 0);
1529	}
1530
1531	70% {
1532		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1533		-webkit-transform: translate3d(0, -6px, 0);
1534	}
1535
1536	90% {
1537		-webkit-transform: translate3d(0,-1px,0);
1538	}
1539}
1540
1541@keyframes bounce {
1542	from, 20%, 53%, 80%, to {
1543		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1544		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1545		-webkit-transform: translate3d(0,0,0);
1546		transform: translate3d(0,0,0);
1547	}
1548
1549	40%, 43% {
1550		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1551		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1552		-webkit-transform: translate3d(0, -12px, 0);
1553		transform: translate3d(0, -12px, 0);
1554	}
1555
1556	70% {
1557		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1558		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1559		-webkit-transform: translate3d(0, -6px, 0);
1560		transform: translate3d(0, -6px, 0);
1561	}
1562
1563	90% {
1564		-webkit-transform: translate3d(0,-1px,0);
1565		transform: translate3d(0,-1px,0);
1566	}
1567}
1568
1569.customize-control-header .choice {
1570	position: relative;
1571	display: block;
1572	margin-bottom: 9px;
1573}
1574
1575.customize-control-header .choice:focus {
1576	outline: none;
1577	box-shadow:
1578		0 0 0 1px #5b9dd9,
1579		0 0 3px 1px rgba(30, 140, 190, .8);
1580}
1581
1582.customize-control-header .uploaded div:last-child > .choice {
1583	margin-bottom: 0;
1584}
1585
1586.customize-control .attachment-media-view .thumbnail-image img,
1587.customize-control-header img {
1588	max-width: 100%;
1589}
1590
1591.customize-control .attachment-media-view .remove-button,
1592.customize-control .attachment-media-view .default-button,
1593.customize-control-header .remove {
1594	margin-right: 8px;
1595}
1596
1597/* Background position control */
1598.customize-control-background_position .background-position-control .button-group {
1599	display: block;
1600}
1601
1602/**
1603 * Code Editor Control and Custom CSS Section
1604 *
1605 * Modifications to the Section Container to make the textarea full-width and
1606 * full-height, if the control is the only control in the section.
1607 */
1608
1609.customize-control-code_editor textarea {
1610	width: 100%;
1611	font-family: Consolas, Monaco, monospace;
1612	font-size: 12px;
1613	padding: 6px 8px;
1614	-moz-tab-size: 2;
1615	-o-tab-size: 2;
1616	tab-size: 2;
1617}
1618.customize-control-code_editor textarea,
1619.customize-control-code_editor .CodeMirror {
1620	height: 14em;
1621}
1622
1623#customize-controls .customize-section-description-container.section-meta.customize-info {
1624	border-bottom: none;
1625}
1626
1627#sub-accordion-section-custom_css .customize-control-notifications-container {
1628	margin-bottom: 15px;
1629}
1630
1631#customize-control-custom_css textarea {
1632	display: block;
1633	height: 500px;
1634}
1635
1636.customize-section-description-container + #customize-control-custom_css .customize-control-title {
1637	margin-left: 12px;
1638}
1639
1640.customize-section-description-container + #customize-control-custom_css:last-child textarea {
1641	border-right: 0;
1642	border-left: 0;
1643	height: calc( 100vh - 185px );
1644	resize: none;
1645}
1646
1647.customize-section-description-container + #customize-control-custom_css:last-child {
1648	margin-left: -12px;
1649	width: 299px;
1650	width: calc( 100% + 24px );
1651	margin-bottom: -12px;
1652}
1653
1654.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
1655	height: calc( 100vh - 185px );
1656}
1657
1658.CodeMirror-lint-tooltip,
1659.CodeMirror-hints {
1660	z-index: 500000 !important;
1661}
1662
1663.customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
1664	margin-left: 12px;
1665	margin-right: 12px;
1666}
1667
1668.theme-browser .theme.active .theme-actions,
1669.wp-customizer .theme-browser .theme .theme-actions {
1670	padding: 10px 15px;
1671	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
1672}
1673
1674@media screen and ( max-width: 640px ) {
1675	.customize-section-description-container + #customize-control-custom_css:last-child {
1676		margin-right: 0;
1677	}
1678
1679	.customize-section-description-container + #customize-control-custom_css:last-child textarea {
1680		height: calc( 100vh - 140px );
1681	}
1682}
1683
1684/**
1685 * Themes
1686 */
1687
1688#customize-theme-controls .control-panel-themes {
1689	border-bottom: none;
1690}
1691
1692#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
1693#customize-theme-controls .control-panel-themes > .accordion-section-title {
1694	cursor: default;
1695	background: #fff;
1696	color: #555d66;
1697	border-top: 1px solid #ddd;
1698	border-bottom: 1px solid #ddd;
1699	border-left: none;
1700	border-right: none;
1701	margin: 0 0 15px 0;
1702	padding-right: 100px; /* Space for the button */
1703}
1704
1705#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1706#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1707	border-top: 0;
1708}
1709
1710#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1711#customize-theme-controls .control-section-themes > .accordion-section-title {
1712	margin: 0 0 15px;
1713}
1714
1715#customize-controls .customize-themes-panel .accordion-section-title:hover,
1716#customize-controls .customize-themes-panel .accordion-section-title {
1717	margin: 15px -8px;
1718}
1719
1720#customize-controls .control-section-themes .accordion-section-title,
1721#customize-controls .customize-themes-panel .accordion-section-title {
1722	padding-right: 100px; /* Space for the button */
1723}
1724
1725.control-panel-themes .accordion-section-title span.customize-action,
1726#customize-controls .customize-section-title span.customize-action,
1727#customize-controls .control-section-themes .accordion-section-title span.customize-action,
1728#customize-controls .customize-section-title span.customize-action {
1729	font-size: 13px;
1730	display: block;
1731	font-weight: 400;
1732}
1733
1734#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
1735	position: absolute;
1736	right: 10px;
1737	top: 50%;
1738	margin-top: -14px;
1739	font-weight: 400;
1740}
1741
1742#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
1743	display: none;
1744}
1745
1746.control-panel-themes .customize-themes-full-container {
1747	position: fixed;
1748	top: 0;
1749	left: 0;
1750	transition: .18s left ease-in-out;
1751	margin: 0 0 0 300px;
1752	padding: 71px 0 25px;
1753	overflow-y: scroll;
1754	width: calc(100% - 300px);
1755	height: calc(100% - 96px);
1756	background: #eee;
1757	z-index: 20;
1758}
1759
1760@media screen and (min-width: 1670px) {
1761	.control-panel-themes .customize-themes-full-container {
1762		width: 82%;
1763		right: 0;
1764		left: initial;
1765	}
1766}
1767
1768.modal-open .control-panel-themes .customize-themes-full-container {
1769	overflow-y: visible;
1770}
1771
1772/* Animations for opening the themes panel */
1773#customize-save-button-wrapper,
1774#customize-header-actions .spinner,
1775#customize-header-actions .customize-controls-preview-toggle {
1776	transition: .18s margin ease-in-out;
1777}
1778
1779#customize-footer-actions,
1780#customize-footer-actions .collapse-sidebar {
1781	bottom: 0;
1782	transition: .18s bottom ease-in-out;
1783}
1784
1785.in-themes-panel:not(.animating) #customize-header-actions .spinner,
1786.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
1787.in-themes-panel:not(.animating) #customize-preview,
1788.in-themes-panel:not(.animating) #customize-footer-actions {
1789	visibility: hidden;
1790}
1791
1792.wp-full-overlay.in-themes-panel {
1793	background: #eee; /* Prevents a black flash when fading in the panel */
1794}
1795
1796.in-themes-panel #customize-save-button-wrapper,
1797.in-themes-panel #customize-header-actions .spinner,
1798.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
1799	margin-top: -46px; /* Height of header actions bar */
1800}
1801
1802.in-themes-panel #customize-footer-actions,
1803.in-themes-panel #customize-footer-actions .collapse-sidebar {
1804	bottom: -45px;
1805}
1806
1807/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
1808.in-themes-panel.animating .control-panel-themes .filter-themes-count {
1809	display: none;
1810}
1811
1812.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
1813	bottom: 0;
1814}
1815
1816.themes-filter-bar .feature-filter-toggle {
1817	float: right;
1818	margin: 3px 0 3px 25px;
1819}
1820
1821.themes-filter-bar .feature-filter-toggle:before {
1822    content: "\f111";
1823    margin: 0 5px 0 0;
1824    font: normal 16px/1 dashicons;
1825    vertical-align: text-bottom;
1826    -webkit-font-smoothing: antialiased;
1827    -moz-osx-font-smoothing: grayscale;
1828}
1829
1830.themes-filter-bar .feature-filter-toggle.open {
1831	background: #eee;
1832	border-color: #999;
1833	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
1834	-webkit-transform: translateY(1px);
1835	transform: translateY(1px);
1836}
1837
1838.themes-filter-bar .feature-filter-toggle .filter-count-filters {
1839	display: none;
1840}
1841
1842.filter-drawer {
1843	box-sizing: border-box;
1844	width: 100%;
1845	position: absolute;
1846	top: 46px;
1847	left: 0;
1848	padding: 25px 0 25px 25px;
1849	border-top: 0;
1850	margin: 0;
1851	background: #eee;
1852	border-bottom: 1px solid #ddd;
1853}
1854
1855.filter-drawer .filter-group {
1856	margin: 0 25px 0 0;
1857	width: calc( (100% - 75px) / 3);
1858	min-width: 200px;
1859	max-width: 320px;
1860}
1861
1862/* Adds a delay before fading in to avoid it "jumping" */
1863@-webkit-keyframes themes-fade-in {
1864	0% {
1865		opacity: 0;
1866	}
1867	50% {
1868		opacity: 0;
1869	}
1870	100% {
1871		opacity: 1;
1872	}
1873}
1874@keyframes themes-fade-in {
1875	0% {
1876		opacity: 0;
1877	}
1878	50% {
1879		opacity: 0;
1880	}
1881	100% {
1882		opacity: 1;
1883	}
1884}
1885
1886.control-panel-themes .customize-themes-full-container.animate {
1887	-webkit-animation: .6s themes-fade-in 1;
1888	animation: .6s themes-fade-in 1;
1889}
1890
1891.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
1892	-webkit-animation: .6s themes-fade-in 1;
1893	animation: .6s themes-fade-in 1;
1894}
1895
1896.control-panel-themes .filter-themes-count {
1897	position: relative;
1898	float: right;
1899	line-height: 34px;
1900}
1901
1902.control-panel-themes .filter-themes-count .themes-displayed {
1903	font-weight: 600;
1904	color: #555d66;
1905}
1906
1907.customize-themes-notifications {
1908	margin: 0;
1909}
1910
1911.control-panel-themes .customize-themes-notifications .notice {
1912	margin: 0 0 25px 0;
1913}
1914
1915.customize-themes-full-container .customize-themes-section {
1916	display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1917	overflow: hidden;
1918}
1919
1920.customize-themes-full-container .customize-themes-section.current-section {
1921	display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1922}
1923
1924.control-section .customize-section-text-before {
1925	padding: 0 0 8px 15px;
1926	margin: 15px 0 0 0;
1927	line-height: 16px;
1928	border-bottom: 1px solid #ddd;
1929	color: #555d66;
1930}
1931
1932.control-panel-themes .customize-themes-section-title {
1933	width: 100%;
1934	background: #fff;
1935	box-shadow: none;
1936	outline: none;
1937	border-top: none;
1938	border-bottom: 1px solid #ddd;
1939	border-left: 4px solid #fff;
1940	border-right: none;
1941	cursor: pointer;
1942	padding: 10px 15px;
1943	position: relative;
1944	text-align: left;
1945	font-size: 14px;
1946	font-weight: 600;
1947	color: #555d66;
1948	text-shadow: none;
1949}
1950
1951.control-panel-themes #accordion-section-installed_themes {
1952	border-top: 1px solid #ddd;
1953}
1954
1955.control-panel-themes .theme-section {
1956	margin: 0;
1957	position: relative;
1958}
1959
1960.control-panel-themes .customize-themes-section-title:focus,
1961.control-panel-themes .customize-themes-section-title:hover {
1962	border-left-color: #0073aa;
1963	color: #0073aa;
1964	background: #f5f5f5;
1965}
1966
1967.customize-themes-section-title:not(.selected):after {
1968	content: "";
1969	display: block;
1970	position: absolute;
1971	top: 9px;
1972	right: 15px;
1973	width: 18px;
1974	height: 18px;
1975	border-radius: 100%;
1976	border: 1px solid #ccc;
1977	background: #fff;
1978}
1979
1980.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
1981	content: "\f147";
1982	font: 16px/1 dashicons;
1983	box-sizing: border-box;
1984	width: 20px;
1985	height: 20px;
1986	padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
1987	border-radius: 100%;
1988	position: absolute;
1989	top: 9px;
1990	right: 15px;
1991	background: #0073aa;
1992	color: #fff;
1993}
1994
1995.control-panel-themes .customize-themes-section-title.selected {
1996	color: #0073aa;
1997}
1998
1999#customize-theme-controls .themes.accordion-section-content {
2000	position: relative;
2001	left: 0;
2002	padding: 0;
2003	width: 100%;
2004}
2005
2006.loading .customize-themes-section .spinner {
2007	display: block;
2008	visibility: visible;
2009	position: relative;
2010	clear: both;
2011	width: 20px;
2012	height: 20px;
2013	left: calc(50% - 10px);
2014	float: none;
2015	margin-top: 50px;
2016}
2017
2018.customize-themes-section .no-themes,
2019.customize-themes-section .no-themes-local {
2020	display: none;
2021}
2022
2023.themes-section-installed_themes .theme .notice-success:not(.updated-message) {
2024	display: none; /* Hide "installed" notice on installed themes tab. */
2025}
2026
2027.customize-control-theme .theme {
2028	width: 100%;
2029	margin: 0;
2030	border: 1px solid #ddd;
2031	background: #fff;
2032}
2033
2034.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
2035	background: #fff;
2036	border: none;
2037}
2038
2039.customize-control.customize-control-theme { /* override most properties on .customize-control */
2040	box-sizing: border-box;
2041	width: 25%;
2042	max-width: 600px; /* Max. screenshot size / 2 */
2043	margin: 0 25px 25px 0;
2044	padding: 0;
2045	clear: none;
2046}
2047
2048/* 5 columns above 2100px */
2049@media screen and (min-width: 2101px) {
2050	.customize-control.customize-control-theme {
2051		width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
2052	}
2053}
2054
2055/* 4 columns up to 2100px */
2056@media screen and (min-width: 1601px) and (max-width: 2100px) {
2057	.customize-control.customize-control-theme {
2058		width: calc( ( 100% - 100px ) / 4 - 1px );
2059	}
2060}
2061
2062/* 3 columns up to 1600px */
2063@media screen and (min-width: 1201px) and (max-width: 1600px) {
2064	.customize-control.customize-control-theme {
2065		width: calc( ( 100% - 75px ) / 3 - 1px );
2066	}
2067}
2068
2069/* 2 columns up to 1200px */
2070@media screen and (min-width: 851px) and (max-width: 1200px) {
2071	.customize-control.customize-control-theme {
2072		width: calc( ( 100% - 50px ) / 2 - 1px );
2073
2074	}
2075}
2076
2077/* 1 column up to 850 px */
2078@media screen and (max-width: 850px) {
2079	.customize-control.customize-control-theme {
2080		width: 100%;
2081	}
2082}
2083
2084.wp-customizer .theme-browser .themes {
2085	padding: 0 0 25px 25px;
2086	transition: .18s margin-top linear;
2087}
2088
2089.wp-customizer .theme-browser .theme .theme-actions {
2090	opacity: 1;
2091}
2092
2093#customize-controls h3.theme-name

Large files files are truncated, but you can click here to view the full file