WordPress/wp-admin/css/customize-controls-rtl.css
Helen Hou-Sandí a800cf654b Drop Open Sans in the admin in favor of system fonts.
Rejoice, for your admins will feel more native to your surrounding computing environment and likely load faster, especially when offline, as they no longer have to talk to The Google Overlord.

At the time of introduction in 3.8, there were not good system fonts common to all platforms at the time. In the years since, Windows, Android, OS X, iOS, Firefox OS, and various flavors of Linux have all gotten their own (good) system UI fonts.

There will definitely be visual bugs, mainly around alignment and spacing; these should be documented and reported on the ticket and fixed more atomically so that our current and future selves have a better understanding of what happened and why.

The style remains registered, as it is almost certainly in use by themes and plugins.

props mattmiklic.
see #36753.

Built from https://develop.svn.wordpress.org/trunk@37361


git-svn-id: http://core.svn.wordpress.org/trunk@37327 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-05-04 22:07:37 +00:00

1669 lines
36 KiB
CSS

body {
overflow: hidden;
-webkit-text-size-adjust: 100%;
}
#customize-controls a {
text-decoration: none;
}
#customize-controls h3 {
font-size: 14px;
}
#customize-controls img {
max-width: 100%;
}
#customize-controls .submit {
text-align: center;
}
#customize-controls .description {
color: #555;
}
#customize-header-actions .button-primary {
float: left;
margin-top: 9px;
}
#customize-header-actions .spinner {
margin-top: 13px;
margin-left: 4px;
}
.saving #customize-header-actions .spinner {
visibility: visible;
}
#customize-header-actions {
border-bottom: 1px solid #ddd;
}
#customize-controls .wp-full-overlay-sidebar-content {
overflow-y: auto;
overflow-x: hidden;
}
#customize-controls .customize-info {
border: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
#customize-controls .customize-info .accordion-section-title {
background: #fff;
color: #555;
border-right: none;
border-left: none;
border-bottom: none;
cursor: default;
}
#customize-controls .customize-info.open .accordion-section-title:after,
#customize-controls .customize-info .accordion-section-title:hover:after,
#customize-controls .customize-info .accordion-section-title:focus:after {
color: #333;
}
#customize-controls .customize-info .accordion-section-title:after {
display: none;
}
#customize-controls .customize-info .preview-notice {
font-size: 13px;
line-height: 24px;
}
#customize-controls .control-section .customize-section-title h3,
#customize-controls .control-section h3.customize-section-title,
#customize-controls .customize-info .panel-title {
font-size: 20px;
font-weight: 200;
line-height: 26px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#customize-controls .customize-section-title span.customize-action {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#customize-controls .customize-info .customize-help-toggle {
position: absolute;
top: 4px;
left: 1px;
padding: 20px 10px 10px 20px;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
background: transparent;
color: #555;
border: none;
}
#customize-controls .customize-info .customize-help-toggle:before {
position: absolute;
top: 5px;
right: 6px;
}
#customize-controls .customize-info.open .customize-help-toggle,
#customize-controls .customize-info .customize-help-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:hover {
color: #0073aa;
}
#customize-controls .customize-info .customize-panel-description,
#customize-controls .no-widget-areas-rendered-notice {
color: #555;
display: none;
background: #fff;
padding: 12px 15px;
border-top: 1px solid #ddd;
}
#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
border-top: none;
}
#customize-controls .customize-info .customize-panel-description p:first-child {
margin-top: 0;
}
#customize-controls .customize-info .customize-panel-description p:last-child {
margin-bottom: 0;
}
#customize-controls .current-panel .control-section > h3.accordion-section-title {
padding-left: 30px;
}
#customize-theme-controls .control-section {
border: none;
}
#customize-theme-controls .accordion-section-title {
color: #555;
background-color: #fff;
border-bottom: 1px solid #eee;
}
#customize-theme-controls .accordion-section-title:after {
content: "\f341";
color: #a0a5aa;
}
#customize-theme-controls .accordion-section-content {
color: #555;
background: transparent;
}
#customize-controls .control-section:hover > .accordion-section-title,
#customize-controls .control-section .accordion-section-title:hover,
#customize-controls .control-section.open .accordion-section-title,
#customize-controls .control-section .accordion-section-title:focus {
color: #23282d;
background: #f5f5f5;
}
.js .control-section:hover .accordion-section-title,
.js .control-section .accordion-section-title:hover,
.js .control-section.open .accordion-section-title,
.js .control-section .accordion-section-title:focus {
background: #f5f5f5;
}
#customize-theme-controls .control-section:hover > .accordion-section-title:after,
#customize-theme-controls .control-section .accordion-section-title:hover:after,
#customize-theme-controls .control-section.open .accordion-section-title:after,
#customize-theme-controls .control-section .accordion-section-title:focus:after {
color: #23282d;
}
#customize-theme-controls .control-section.open {
border-bottom: 1px solid #eee;
}
#customize-theme-controls .control-section.open .accordion-section-title {
border-bottom-color: #eee !important;
}
#customize-theme-controls .control-section:last-of-type.open,
#customize-theme-controls .control-section:last-of-type > .accordion-section-title {
border-bottom-color: #ddd;
}
#customize-theme-controls > ul {
margin: 0;
}
#customize-theme-controls .accordion-section-content {
position: absolute;
top: 0;
right: 100%;
width: 100%;
margin: 0;
padding: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.customize-section-description-container {
margin-bottom: 15px;
}
.customize-section-title {
margin: -12px -12px 0 -12px;
border-bottom: 1px solid #ddd;
background: #fff;
}
div.customize-section-description {
margin-top: 22px;
}
div.customize-section-description p:first-child {
margin-top: 0;
}
div.customize-section-description p:last-child {
margin-bottom: 0;
}
#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
border-bottom: 1px solid #ddd;
padding: 12px 12px 12px 12px;
}
.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
padding: 12px 12px 13px 12px;
}
.customize-section-title h3,
h3.customize-section-title {
padding: 10px 14px 12px 10px;
margin: 0;
line-height: 21px;
color: #555;
}
#customize-theme-controls {
position: relative;
right: 0;
-webkit-transition: .18s right ease-in-out;
transition: .18s right ease-in-out;
}
.ios #customize-theme-controls {
-webkit-transition: right 0s;
transition: right 0s;
}
.section-open #customize-info,
.section-open #customize-theme-controls {
right: -100%;
}
.accordion-sub-container.control-panel-content {
display: none;
position: absolute;
right: 300px;
top: 0;
width: 300px;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
}
.ios .accordion-sub-container.control-panel-content {
-webkit-transition: right 0s;
transition: right 0s;
}
.accordion-sub-container.control-panel-content.animating {
display: block;
}
.current-panel .accordion-sub-container.control-panel-content {
width: 100%;
}
.customize-controls-close {
display: block;
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
padding: 0 0 0 2px;
background: #eee;
border: none;
border-left: 1px solid #ddd;
color: #444;
text-align: right;
cursor: pointer;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.customize-panel-back,
.customize-section-back {
display: block;
float: right;
width: 48px;
height: 71px;
padding: 0 0 0 24px;
margin: 0;
background: #fff;
border: none;
border-left: 1px solid #ddd;
-webkit-box-shadow: none;
box-shadow: none;
cursor: pointer;
-webkit-transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
}
.customize-section-back {
height: 74px;
}
.ios .customize-panel-back,
.ios .customize-section-back {
-webkit-transition: right 0s;
transition: right 0s;
}
.ios .customize-panel-back {
display: none;
}
.ios .expanded.in-sub-panel .customize-panel-back {
display: block;
}
.panel-meta.customize-info .accordion-section-title {
margin-right: 48px;
}
#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
background: #fff;
color: #555;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.customize-controls-preview-toggle:focus,
.customize-controls-preview-toggle:hover {
background: #ddd;
border-color: #ccc;
color: #000;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.customize-panel-back:hover,
.customize-panel-back:focus,
.customize-section-back:hover,
.customize-section-back:focus {
color: #23282d;
background: #f5f5f5;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.customize-controls-close:before {
font: normal 22px/45px dashicons;
content: "\f335";
position: relative;
top: 1px;
right: 13px;
}
.customize-panel-back:before,
.customize-section-back:before {
font: normal 20px/72px dashicons;
content: "\f345";
position: relative;
right: 13px;
}
.wp-full-overlay-sidebar .wp-full-overlay-header {
-webkit-transition: padding ease-in-out .18s;
transition: padding ease-in-out .18s;
}
.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
padding-right: 62px;
}
#customize-info,
#customize-theme-controls > ul > .accordion-section {
position: relative;
right: 0;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
}
.ios #customize-info,
.ios #customize-theme-controls > ul > .accordion-section {
-webkit-transition: right 0s;
transition: right 0s;
}
.in-sub-panel #customize-info,
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
right: -300px;
width: 300px;
}
.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
width: 100%;
}
#customize-theme-controls .control-section.current-panel {
padding: 0;
}
#customize-theme-controls .control-section > h3.accordion-section-title {
position: relative;
right: 0;
}
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
right: -354px;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
}
.ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
-webkit-transition: right 0s;
transition: right 0s;
}
.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
visibility: hidden;
overflow-y: hidden;
}
.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
visibility: visible;
}
.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
overflow-y: auto;
}
p.customize-section-description {
font-style: normal;
margin-top: 22px;
margin-bottom: 0;
}
.customize-control {
width: 100%;
float: right;
clear: both;
margin-bottom: 12px;
}
.customize-control select,
.customize-control input[type="radio"],
.customize-control input[type="checkbox"] {
line-height: 28px;
}
.customize-control input[type="text"],
.customize-control input[type="password"],
.customize-control input[type="email"],
.customize-control input[type="number"],
.customize-control input[type="search"],
.customize-control input[type="tel"],
.customize-control input[type="url"] {
width: 98%;
line-height: 18px;
margin: 0;
}
.customize-control-hidden {
margin: 0;
}
.customize-control-textarea textarea {
width: 100%;
resize: vertical;
}
.customize-control select {
min-width: 50%;
max-width: 100%;
height: 28px;
line-height: 28px;
}
.customize-control select[multiple] {
height: auto;
}
.customize-control-title {
display: block;
font-size: 14px;
line-height: 24px;
font-weight: 600;
margin-bottom: 5px;
}
.customize-control-description {
display: block;
font-style: italic;
line-height: 18px;
margin-bottom: 5px;
}
.customize-control-color .color-picker,
.customize-control-upload div {
line-height: 28px;
}
.customize-control-radio label,
.customize-control-checkbox label,
.customize-control-nav_menu_auto_add label {
line-height: 20px;
display: block;
margin-right: 24px;
padding-top: 6px;
padding-bottom: 6px;
}
.customize-control-radio input,
.customize-control-checkbox input,
.customize-control-nav_menu_auto_add input {
margin-left: 4px;
margin-right: -24px;
}
.customize-control-radio {
padding: 5px 0 10px;
}
.customize-control-radio .customize-control-title {
margin-bottom: 0;
line-height: 22px;
}
.customize-control-radio .customize-control-title + .customize-control-description {
margin-top: 7px;
}
.customize-control .attachment-thumb.type-icon {
float: right;
margin: 10px;
width: auto;
}
.customize-control .attachment-title {
font-weight: bold;
margin: 0;
padding: 5px 10px;
}
.customize-control .attachment-meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding: 0 10px;
}
.customize-control .attachment-meta-title {
padding-top: 7px;
}
.customize-control .thumbnail-image {
line-height: 0;
}
.customize-control .thumbnail-image img {
cursor: pointer;
}
#customize-controls .thumbnail-audio .thumbnail {
max-width: 64px;
max-height: 64px;
margin: 10px;
float: right;
}
#customize-preview iframe {
width: 100%;
height: 100%;
position: absolute;
}
#customize-preview iframe + iframe {
visibility: hidden;
}
.wp-full-overlay-sidebar {
background: #eee;
border-left: 1px solid #ddd;
}
/* Style for custom settings */
/**
* Dropdowns
*/
.accordion-section .dropdown {
float: right;
display: block;
position: relative;
cursor: pointer;
}
.accordion-section .dropdown-content {
overflow: hidden;
float: right;
min-width: 30px;
height: 16px;
line-height: 16px;
margin-left: 16px;
padding: 4px 5px;
border: 2px solid #eee;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* @todo maybe no more used? */
.customize-control .dropdown-arrow {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20px;
background: #eee;
}
.customize-control .dropdown-arrow:after {
content: "\f140";
font: normal 20px/1 dashicons;
speak: none;
display: block;
padding: 0;
text-indent: 0;
text-align: center;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
color: #32373c;
}
.customize-control .dropdown-status {
color: #32373c;
background: #eee;
display: none;
max-width: 112px;
}
/* Color Picker */
.customize-control-color .color-picker-hex {
display: none;
}
.customize-control-color.open .color-picker-hex {
display: block;
}
.customize-control-color .dropdown {
margin-left: 5px;
margin-bottom: 5px;
}
.customize-control-color .dropdown .dropdown-content {
background-color: #555;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.customize-control-color .dropdown:hover .dropdown-content {
border-color: rgba(0, 0, 0, 0.25);
}
/**
* iOS can't scroll iframes,
* instead it expands the iframe size to match the size of the content
*/
.ios .wp-full-overlay {
position: relative;
}
.ios #customize-controls .wp-full-overlay-sidebar-content {
-webkit-overflow-scrolling: touch;
}
/* Media controls */
.customize-control-media .current,
.customize-control-upload .current,
.customize-control-image .current,
.customize-control-background .current,
.customize-control-cropped_image .current,
.customize-control-site_icon .current,
.customize-control-header .current {
margin-bottom: 8px;
}
.customize-control-header .uploaded {
margin-bottom: 18px;
}
.customize-control-header .uploaded button:not(.random),
.customize-control-header .default button:not(.random) {
width: 100%;
padding: 0;
margin: 0;
background: none;
border: none;
color: inherit;
cursor: pointer;
}
.customize-control-header button img {
display: block;
}
.customize-control-media .remove-button,
.customize-control-media .default-button,
.customize-control-media .upload-button,
.customize-control-upload .remove-button,
.customize-control-upload .default-button,
.customize-control-upload .upload-button,
.customize-control-image .remove-button,
.customize-control-image .default-button,
.customize-control-image .upload-button,
.customize-control-background .remove-button,
.customize-control-background .default-button,
.customize-control-background .upload-button,
.customize-control-cropped_image .remove-button,
.customize-control-cropped_image .default-button,
.customize-control-cropped_image .upload-button,
.customize-control-site_icon .remove-button,
.customize-control-site_icon .default-button,
.customize-control-site_icon .upload-button,
.customize-control-header button.new,
.customize-control-header button.remove {
white-space: normal;
width: 48%;
height: auto;
}
.customize-control-media .current .container,
.customize-control-upload .current .container,
.customize-control-image .current .container,
.customize-control-background .current .container,
.customize-control-cropped_image .current .container,
.customize-control-site_icon .current .container,
.customize-control-header .current .container {
overflow: hidden;
-webkit-border-radius: 2px;
border: 1px solid #eee;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.customize-control-media .current .container,
.customize-control-upload .current .container,
.customize-control-background .current .container,
.customize-control-cropped_image .current .container,
.customize-control-site_icon .current .container,
.customize-control-image .current .container {
min-height: 40px;
}
.customize-control-media .placeholder,
.customize-control-upload .placeholder,
.customize-control-image .placeholder,
.customize-control-background .placeholder,
.customize-control-cropped_image .placeholder,
.customize-control-site_icon .placeholder,
.customize-control-header .placeholder {
width: 100%;
position: relative;
text-align: center;
cursor: default;
border: 1px dashed #b4b9be;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 40px;
}
.customize-control-media .inner,
.customize-control-upload .inner,
.customize-control-image .inner,
.customize-control-background .inner,
.customize-control-cropped_image .inner,
.customize-control-site_icon .inner,
.customize-control-header .inner {
display: none;
position: absolute;
width: 100%;
color: #555;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.customize-control-media .inner,
.customize-control-upload .inner,
.customize-control-background .inner,
.customize-control-cropped_image .inner,
.customize-control-site_icon .inner,
.customize-control-image .inner {
display: block;
min-height: 40px;
}
.customize-control-media .inner,
.customize-control-upload .inner,
.customize-control-image .inner,
.customize-control-background .inner,
.customize-control-cropped_image .inner,
.customize-control-site_icon .inner,
.customize-control-header .inner,
.customize-control-header .inner .dashicons {
line-height: 20px;
top: 8px;
}
.customize-control-header .list .inner,
.customize-control-header .list .inner .dashicons {
top: 9px;
}
.customize-control-header .header-view {
position: relative;
width: 100%;
margin-bottom: 5px;
}
.customize-control-header .header-view:last-child {
margin-bottom: 0px;
}
/* Convoluted, but 'outline' support isn't good enough yet */
.customize-control-header .header-view:after {
border: 0;
}
.customize-control-header .header-view.selected:after {
content: '';
position: absolute;
height: auto;
top: 0; right: 0; bottom: 0; left: 0;
border: 4px solid #00a0d2;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.customize-control-header .header-view.button.selected {
border: 0;
}
/* Header control: overlay "close" button */
.customize-control-header .uploaded .header-view .close {
font-size: 20px;
color: #fff;
background: #555;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 10px;
left: -999px;
z-index: 1;
width: 26px;
height: 26px;
cursor: pointer;
}
.customize-control-header .header-view:hover .close,
.customize-control-header .header-view .close:focus {
left: 10px;
}
/* Header control: randomiz(s)er */
.customize-control-header .random.placeholder {
cursor: pointer;
-webkit-border-radius: 2px;
border-radius: 2px;
height: 40px;
}
.customize-control-header button.random {
width: 100%;
height: auto;
min-height: 40px;
white-space: normal;
}
.customize-control-header button.random .dice {
margin-top: 4px;
}
.customize-control-header .placeholder:hover .dice,
.customize-control-header .header-view:hover > button.random .dice {
-webkit-animation: dice-color-change 3s infinite;
animation: dice-color-change 3s infinite;
}
@-webkit-keyframes dice-color-change {
0% { color: #d4b146; }
50% { color: #ef54b0; }
75% { color: #7190d3; }
100% { color: #d4b146; }
}
@keyframes dice-color-change {
0% { color: #d4b146; }
50% { color: #ef54b0; }
75% { color: #7190d3; }
100% { color: #d4b146; }
}
.customize-control-header .choice {
position: relative;
display: block;
margin-bottom: 9px;
}
.customize-control-header .uploaded div:last-child > .choice {
margin-bottom: 0;
}
.customize-control-media img,
.customize-control-upload img,
.customize-control-image img,
.customize-control-background img,
.customize-control-cropped_image img,
.customize-control-header img {
width: 100%;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.customize-control-media .remove-button,
.customize-control-media .default-button,
.customize-control-upload .remove-button,
.customize-control-upload .default-button,
.customize-control-image .remove-button,
.customize-control-image .default-button,
.customize-control-background .remove-button,
.customize-control-background .default-button,
.customize-control-cropped_image .remove-button,
.customize-control-cropped_image .default-button,
.customize-control-site_icon .remove-button,
.customize-control-site_icon .default-button,
.customize-control-header .remove {
float: right;
margin-left: 3px;
}
.customize-control-media .upload-button,
.customize-control-upload .upload-button,
.customize-control-image .upload-button,
.customize-control-background .upload-button,
.customize-control-cropped_image .upload-button,
.customize-control-site_icon .upload-button,
.customize-control-header .new {
float: left;
}
/**
* Themes
*/
@-webkit-keyframes customize-reload {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes customize-reload {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* #customize-container is reused from customize-loader.js, hence the naming. */
.wp-customizer .customize-loading #customize-container {
display: block;
-webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
animation: customize-reload .75s;
}
.control-section-themes .accordion-section-title {
cursor: default;
}
#customize-theme-controls .control-section-themes .accordion-section-title:hover,
#customize-theme-controls .control-section-themes .accordion-section-title:focus {
color: #555;
background-color: #fff;
}
.control-section-themes .accordion-section-title {
margin: 15px 0;
}
.customize-themes-panel .accordion-section-title {
margin: 15px -8px;
}
.control-section-themes .accordion-section-title {
padding-left: 100px; /* Space for the button */
}
.control-section-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action {
font-size: 13px;
display: block;
font-weight: 400;
}
.control-section-themes .accordion-section-title .change-theme,
.control-section-themes .accordion-section-title .customize-theme {
position: absolute;
left: 10px;
top: 50%;
margin-top: -14px;
font-weight: normal;
}
.control-section-themes .accordion-section-title:before {
display: none;
}
.customize-themes-panel {
display: none;
padding: 0 8px;
background: #f1f1f1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.customize-themes-panel .accordion-section-title:first-child {
margin-top: 0;
}
#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
font-size: 14px;
font-weight: 600;
}
.customize-themes-panel > h2 {
padding: 15px 8px 0 8px;
}
.control-section.open .customize-themes-panel {
display: block;
}
#customize-theme-controls .customize-themes-panel .accordion-section-content {
background: transparent;
display: block;
}
.customize-control.customize-control-theme {
margin-bottom: 8px;
}
#customize-theme-controls .themes.accordion-section-content {
position: relative;
right: 0;
padding: 0;
width: 100%;
}
.wp-customizer .theme-browser .themes {
padding-bottom: 8px;
}
.wp-customizer .theme-browser .theme {
margin: 0;
width: 100%;
}
.wp-customizer .theme-browser .theme .theme-actions {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
#customize-controls h3.theme-name {
font-size: 15px;
}
#customize-controls .theme-overlay .theme-name {
font-size: 32px;
}
.wp-customizer #themes-filter {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
width: 100%;
}
#accordion-section-themes .accordion-section-title:after {
display: none;
}
#customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
right: 0;
}
.customize-themes-panel.control-panel-content {
position: absolute;
right: -100%;
top: 0;
width: 100%;
border-top: 1px solid #ddd;
}
.in-themes-panel #customize-info,
.in-themes-panel #customize-theme-controls > ul > .accordion-section {
right: 100%;
}
/* Details View */
.wp-customizer .theme-overlay {
display: none;
}
.wp-customizer.modal-open .theme-overlay {
position: fixed;
right: 0;
top: 0;
left: 0;
bottom: 0;
z-index: 109;
}
.wp-customizer .theme-overlay .theme-backdrop {
background: rgba( 238, 238, 238, 0.75 );
position: fixed;
z-index: 110;
}
.wp-customizer .theme-overlay .theme-wrap {
right: 90px;
left: 90px;
top: 45px;
bottom: 45px;
z-index: 120;
max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
}
.wp-customizer .theme-overlay .theme-actions {
text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
}
.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
}
.ie8 .wp-customizer .theme-overlay .theme-header,
.ie8 .wp-customizer .theme-overlay .theme-about,
.ie8 .wp-customizer .theme-overlay .theme-actions {
position: static;
}
/* Small Screens */
@media (max-width:850px), (max-height:472px) {
.wp-customizer .theme-overlay .theme-wrap {
right: 0;
left: 0;
top: 0;
bottom: 0;
}
}
/* Handle cheaters. */
body.cheatin {
font-size: medium;
height: auto;
background: #fff;
margin: 50px auto 2em;
padding: 1em 2em;
max-width: 700px;
min-width: 0;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
box-shadow: 0 1px 3px rgba(0,0,0,0.13);
}
body.cheatin h1 {
border-bottom: 1px solid #ddd;
clear: both;
color: #666;
font: 24px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
margin: 30px 0 0 0;
padding: 0;
padding-bottom: 7px;
}
body.cheatin p {
font-size: 14px;
line-height: 1.5;
margin: 25px 0 20px;
}
/**
* Widgets and Menus common styles
*/
/* higher specificity than .wp-core-ui .button-secondary */
#customize-theme-controls .add-new-widget,
#customize-theme-controls .add-new-menu-item {
cursor: pointer;
float: left;
margin-right: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
.reordering .add-new-widget,
.reordering .add-new-menu-item {
opacity: 0.2;
pointer-events: none;
cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
}
.add-new-widget:before,
.add-new-menu-item:before {
content: "\f132";
display: inline-block;
position: relative;
right: -2px;
top: -1px;
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Reordering */
.reorder-toggle {
color: #0073aa;
float: left;
padding: 5px 8px;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.reorder-toggle:hover {
color: #00a0d2;
}
.reorder-toggle:focus {
outline: 1px dotted;
}
.reorder,
.reordering .reorder-done {
display: block;
padding: 5px 8px;
}
.reorder-done,
.reordering .reorder {
display: none;
color: #0073aa;
}
.reorder-toggle:hover .reorder-done,
.reorder-toggle:active .reorder-done,
.reorder-toggle:focus .reorder-done {
color: #00a0d2;
}
.widget-reorder-nav span,
.menu-item-reorder-nav button {
position: relative;
overflow: hidden;
float: right;
display: block;
width: 33px; /* was 42px for mobile */
height: 43px;
color: #82878c;
text-indent: -9999px;
cursor: pointer;
outline: none;
}
.menu-item-reorder-nav button {
width: 30px;
height: 40px;
background: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.widget-reorder-nav span:before,
.menu-item-reorder-nav button:before {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font: normal 20px/43px dashicons;
text-align: center;
text-indent: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.widget-reorder-nav span:hover,
.widget-reorder-nav span:focus,
.menu-item-reorder-nav button:hover,
.menu-item-reorder-nav button:focus {
color: #191e23;
background: #eee;
}
.move-widget-down:before,
.menus-move-down:before {
content: "\f347";
}
.move-widget-up:before,
.menus-move-up:before {
content: "\f343";
}
#customize-theme-controls .first-widget .move-widget-up,
#customize-theme-controls .last-widget .move-widget-down,
.move-up-disabled .menus-move-up,
.move-down-disabled .menus-move-down,
.move-right-disabled .menus-move-right,
.move-left-disabled .menus-move-left {
color: #d5d5d5;
background-color: #fff;
cursor: default;
pointer-events: none;
}
/**
* New widget and Add-menu-items modes and panels
*/
.wp-full-overlay-main {
left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
width: 100%;
}
body.adding-widget .add-new-widget,
body.adding-widget .add-new-widget:hover,
.adding-menu-items .add-new-menu-item,
.adding-menu-items .add-new-menu-item:hover,
.add-menu-toggle.open,
.add-menu-toggle.open:hover {
background: #eee;
border-color: #929793;
color: #32373c;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
}
body.adding-widget .add-new-widget:before,
.adding-menu-items .add-new-menu-item:before,
#accordion-section-add_menu .add-new-menu-item.open:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#available-widgets,
#available-menu-items {
position: absolute;
top: 0;
bottom: 0;
right: -301px;
visibility: hidden;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
margin: 0;
z-index: 4;
background: #eee;
-webkit-transition: right .18s;
transition: right .18s;
border-left: 1px solid #ddd;
}
#available-widgets .customize-section-title,
#available-menu-items .customize-section-title {
display: none;
}
#available-widgets-list {
top: 60px;
position: absolute;
overflow: auto;
bottom: 0;
width: 100%;
}
#available-widgets-filter {
position: fixed;
top: 0;
z-index: 1;
width: 300px;
background: #eee;
border-bottom: 1px solid #e5e5e5;
}
/* search field container */
#available-widgets-filter,
#available-menu-items-search .accordion-section-title {
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#available-widgets-filter input,
#available-menu-items-search input {
padding: 6px 10px;
width: 100%;
}
#available-widgets .widget-top,
#available-widgets .widget-top:hover,
#available-menu-items .item-top,
#available-menu-items .item-top:hover {
border: none;
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
#available-widgets .widget-tpl,
#available-menu-items .item-tpl {
position: relative;
padding: 20px 60px 20px 15px;
background: #fff;
border-bottom: 1px solid #e5e5e5;
cursor: pointer;
display: none;
}
#available-widgets .widget,
#available-menu-items .item {
position: static;
}
/* Responsive */
.customize-controls-preview-toggle {
display: none;
}
@media only screen and (max-width: 782px) {
.wp-customizer .theme:not(.active):hover .theme-actions,
.wp-customizer .theme:not(.active):focus .theme-actions {
display: block;
}
.wp-customizer .theme-browser .theme.active .theme-name span {
display: inline;
}
.customize-control-radio label,
.customize-control-checkbox label,
.customize-control-nav_menu_auto_add label {
margin-right: 32px;
}
.customize-control-radio input,
.customize-control-checkbox input,
.customize-control-nav_menu_auto_add input {
margin-right: -32px;
}
.customize-control input[type="radio"] + label,
.customize-control input[type="checkbox"] + label {
line-height: 32px;
}
}
@media screen and ( max-width: 640px ) {
#customize-controls {
width: 100%;
}
.wp-full-overlay.expanded {
margin-right: 0;
}
/* when the sidebar is collapsed and switching to responsive view,
bring it back see ticket #35220 */
.wp-full-overlay.collapsed #customize-controls {
margin-right: 0;
}
.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
bottom: 0;
}
.customize-controls-preview-toggle {
display: block;
position: absolute;
top: 0;
right: 48px;
line-height: 45px;
font-size: 14px;
padding: 0 12px;
margin: 0;
height: 45px;
background: #eee;
border: 0;
border-left: 1px solid #ddd;
color: #444;
cursor: pointer;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
}
#customize-footer-actions,
#customize-preview,
.customize-controls-preview-toggle .controls,
.preview-only .wp-full-overlay-sidebar-content,
.preview-only .customize-controls-preview-toggle .preview {
display: none;
}
.customize-controls-preview-toggle .preview:before,
.customize-controls-preview-toggle .controls:before {
font: normal 20px/1 dashicons;
content: "\f177";
position: relative;
top: 4px;
margin-left: 6px;
}
.customize-controls-preview-toggle .controls:before {
content: "\f540";
}
.preview-only #customize-controls {
height: 45px;
}
.preview-only #customize-preview,
.preview-only .customize-controls-preview-toggle .controls {
display: block;
}
#customize-preview {
top: 45px;
bottom: 0;
height: auto;
}
.wp-core-ui.wp-customizer .button {
padding: 6px 14px;
line-height: normal;
font-size: 14px;
vertical-align: middle;
height: auto;
margin-bottom: 4px;
}
#customize-header-actions .button-primary {
margin-top: 6px;
}
body.adding-widget div#available-widgets,
body.adding-menu-items div#available-menu-items {
top: 46px;
right: 0;
z-index: 10;
width: 100%;
}
#available-widgets .customize-section-title,
#available-menu-items .customize-section-title {
display: block;
margin: 0;
}
#available-widgets .customize-section-back,
#available-menu-items .customize-section-back {
height: 69px;
}
#available-widgets .customize-section-title h3,
#available-menu-items .customize-section-title h3 {
font-size: 20px;
font-weight: 200;
padding: 9px 14px 12px 10px;
margin: 0;
line-height: 24px;
color: #555;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#available-widgets .customize-section-title .customize-action,
#available-menu-items .customize-section-title .customize-action {
font-size: 13px;
display: block;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#available-widgets-filter {
position: relative;
width: 100%;
background: #fff;
height: auto;
padding: 10px 15px;
}
#available-widgets-list {
top: 140px;
}
}