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

1879 lines
41 KiB
CSS
Raw Normal View History

body {
overflow: hidden;
-webkit-text-size-adjust: 100%;
}
.customize-controls-close,
.widget-control-actions 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: #555d66;
}
#customize-header-actions .button-primary {
float: right;
2013-11-20 23:48:09 +01:00
margin-top: 9px;
}
#customize-header-actions .spinner {
margin-top: 13px;
margin-right: 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-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
#customize-controls .customize-info.section-meta {
margin-bottom: 15px;
}
#customize-controls .customize-info.is-in-view,
#customize-controls .customize-section-title.is-in-view {
position: absolute;
z-index: 9;
width: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}
#customize-controls .customize-section-title.is-in-view {
margin-top: 0;
}
#customize-controls .customize-info.is-in-view + .accordion-section {
margin-top: 15px;
}
#customize-controls .customize-info.is-sticky,
#customize-controls .customize-section-title.is-sticky {
position: fixed;
top: 46px;
}
#customize-controls .customize-info .accordion-section-title {
background: #fff;
color: #555d66;
border-left: none;
border-right: 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: #32373c;
}
#customize-controls .customize-info .accordion-section-title:after {
display: none;
}
#customize-controls .customize-info .preview-notice {
font-size: 13px;
line-height: 24px;
}
#customize-controls .customize-pane-child .customize-section-title h3,
#customize-controls .customize-pane-child 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;
right: 1px;
padding: 20px 20px 10px 10px;
width: 20px;
height: 20px;
cursor: pointer;
box-shadow: none;
-webkit-appearance: none;
background: transparent;
color: #555d66;
border: none;
}
#customize-controls .customize-info .customize-help-toggle:before {
position: absolute;
top: 5px;
left: 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: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
#customize-controls .customize-info .customize-section-description,
#customize-controls .no-widget-areas-rendered-notice {
color: #555d66;
display: none;
background: #fff;
padding: 12px 15px;
border-top: 1px solid #ddd;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
border-top: none;
}
.no-widget-areas-rendered-notice {
font-style: italic;
}
.no-widget-areas-rendered-notice p:first-child {
margin-top: 0;
}
.no-widget-areas-rendered-notice p:last-child {
margin-bottom: 0;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
#customize-controls .customize-info .customize-section-description {
margin-bottom: 15px;
}
#customize-controls .customize-info .customize-panel-description p:first-child,
#customize-controls .customize-info .customize-section-description p:first-child {
margin-top: 0;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
#customize-controls .customize-info .customize-panel-description p:last-child,
#customize-controls .customize-info .customize-section-description p:last-child {
margin-bottom: 0;
}
#customize-controls .current-panel .control-section > h3.accordion-section-title {
padding-right: 30px;
}
#customize-theme-controls .control-section {
border: none;
}
#customize-theme-controls .accordion-section-title {
color: #555d66;
background-color: #fff;
border-bottom: 1px solid #ddd;
border-left: 4px solid #fff;
transition: .15s color ease-in-out,
.15s background-color ease-in-out,
.15s border-color ease-in-out;
}
#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
color: #555;
background-color: #fff;
border-left: 4px solid #fff;
}
#customize-theme-controls .accordion-section-title:after {
content: "\f345";
color: #a0a5aa;
}
#customize-theme-controls .accordion-section-content {
color: #555d66;
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: #0073aa;
background: #f3f3f5;
border-left-color: #0073aa;
}
#accordion-section-themes + .control-section {
border-top: 1px solid #ddd;
}
.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: #f3f3f5;
}
#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: #0073aa;
}
#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 .control-panel-content .control-section:nth-child(2),
#customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
border-top: 1px solid #ddd;
}
#customize-theme-controls > ul {
margin: 0;
}
#customize-theme-controls .accordion-section-content {
position: absolute;
top: 0;
left: 100%;
width: 100%;
margin: 0;
padding: 12px;
box-sizing: border-box;
}
#customize-info,
#customize-theme-controls .customize-pane-parent,
#customize-theme-controls .customize-pane-child {
overflow: visible;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
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 */
}
#customize-theme-controls .customize-pane-child.skip-transition {
transition: none;
}
#customize-info,
#customize-theme-controls .customize-pane-parent {
position: relative;
visibility: visible;
height: auto;
max-height: none;
overflow: auto;
-webkit-transform: none;
transform: none;
}
#customize-theme-controls .customize-pane-child {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
height: 0;
max-height: none;
overflow: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
-webkit-transform: none;
transform: none;
}
#customize-theme-controls .customize-themes-panel.customize-pane-child,
.section-open #customize-theme-controls .customize-pane-parent,
.in-sub-panel #customize-theme-controls .customize-pane-parent,
.section-open #customize-info,
.in-sub-panel #customize-info,
.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
visibility: hidden;
height: 0;
overflow: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.section-open #customize-theme-controls .customize-pane-parent.busy,
.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
.section-open #customize-info.busy,
.in-sub-panel #customize-info.busy,
.in-themes-panel #customize-info.busy,
.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.busy {
visibility: visible;
height: auto;
overflow: auto;
}
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#customize-theme-controls .customize-pane-child.accordion-section-content,
#customize-theme-controls .customize-pane-child.accordion-sub-container {
display: block;
overflow-x: hidden;
}
#customize-theme-controls .customize-pane-child.accordion-section-content {
padding: 12px;
}
#customize-theme-controls .customize-pane-child.menu li {
position: static;
}
.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;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
.customize-info div.customize-section-description {
margin-top: 0;
}
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 10px 12px 14px;
margin: 0;
line-height: 21px;
color: #555d66;
}
.accordion-sub-container.control-panel-content {
display: none;
position: absolute;
top: 0;
width: 100%;
}
.accordion-sub-container.control-panel-content.busy {
display: block;
}
.current-panel .accordion-sub-container.control-panel-content {
width: 100%;
}
.customize-controls-close {
display: block;
position: absolute;
top: 0;
left: 0;
width: 45px;
height: 41px;
padding: 0 2px 0 0;
background: #eee;
border: none;
border-top: 4px solid #eee;
border-right: 1px solid #ddd;
color: #444;
text-align: left;
cursor: pointer;
transition: color .15s ease-in-out,
border-color .15s ease-in-out,
background .15s ease-in-out;
box-sizing: content-box;
}
.customize-panel-back,
.customize-section-back {
display: block;
float: left;
width: 48px;
height: 71px;
padding: 0 24px 0 0;
margin: 0;
background: #fff;
border: none;
border-right: 1px solid #ddd;
border-left: 4px solid #fff;
box-shadow: none;
cursor: pointer;
transition: color .15s ease-in-out,
border-color .15s ease-in-out,
background .15s ease-in-out;
}
.customize-section-back {
height: 74px;
}
.ios .customize-panel-back {
display: none;
}
.ios .expanded.in-sub-panel .customize-panel-back {
display: block;
}
#customize-controls .panel-meta.customize-info .accordion-section-title {
margin-left: 48px;
border-left: none;
}
#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
#customize-controls .cannot-expand:hover .accordion-section-title {
background: #fff;
color: #555d66;
border-left-color: #fff;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.customize-controls-preview-toggle:focus,
.customize-controls-preview-toggle:hover {
background: #fff;
color: #0073aa;
border-top-color: #0073aa;
outline: none;
box-shadow: none;
}
.customize-panel-back:hover,
.customize-panel-back:focus,
.customize-section-back:hover,
.customize-section-back:focus {
color: #0073aa;
background: #f3f3f5;
border-left-color: #0073aa;
outline: none;
box-shadow: none;
}
.customize-controls-close:before {
font: normal 22px/45px dashicons;
content: "\f335";
position: relative;
top: -3px;
left: 13px;
}
.customize-panel-back:before,
.customize-section-back:before {
font: normal 20px/72px dashicons;
content: "\f341";
position: relative;
left: 9px;
}
.wp-full-overlay-sidebar .wp-full-overlay-header {
background-color: #eee;
transition: padding ease-in-out .18s;
}
.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
padding-left: 62px;
}
p.customize-section-description {
font-style: normal;
margin-top: 22px;
margin-bottom: 0;
}
.customize-control {
width: 100%;
float: left;
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"] {
Customize: Add setting validation model and control notifications to augment setting sanitization. When a setting is invalid, not only will it be blocked from being saved but all other settings will be blocked as well. This ensures that Customizer saves aren't partial but are more transactional. User will be displayed the error in a notification so that they can fix and re-attempt saving. PHP changes: * Introduces `WP_Customize_Setting::validate()`, `WP_Customize_Setting::$validate_callback`, and the `customize_validate_{$setting_id}` filter. * Introduces `WP_Customize_Manager::validate_setting_values()` to do validation (and sanitization) for the setting values supplied, returning a list of `WP_Error` instances for invalid settings. * Attempting to save settings that are invalid will result in the save being blocked entirely, with the errors being sent in the `customize_save_response`. Modifies `WP_Customize_Manager::save()` to check all settings for validity issues prior to calling their `save` methods. * Introduces `WP_Customize_Setting::json()` for parity with the other Customizer classes. This includes exporting of the `type`. * Modifies `WP_Customize_Manager::post_value()` to apply `validate` after `sanitize`, and if validation fails, to return the `$default`. * Introduces `customize_save_validation_before` action which fires right before the validation checks are made prior to saving. JS changes: * Introduces `wp.customize.Notification` in JS which to represent `WP_Error` instances returned from the server when setting validation fails. * Introduces `wp.customize.Setting.prototype.notifications`. * Introduces `wp.customize.Control.prototype.notifications`, which are synced with a control's settings' notifications. * Introduces `wp.customize.Control.prototype.renderNotifications()` to re-render a control's notifications in its notification area. This is called automatically when the notifications collection changes. * Introduces `wp.customize.settingConstructor`, allowing custom setting types to be used in the same way that custom controls, panels, and sections can be made. * Injects a notification area into existing controls which is populated in response to the control's `notifications` collection changing. A custom control can customize the placement of the notification area by overriding the new `getNotificationsContainerElement` method. * When a save fails due to setting invalidity, the invalidity errors will be added to the settings to then populate in the controls' notification areas, and the first such invalid control will be focused. Props westonruter, celloexpressions, mrahmadawais. See #35210. See #30937. Fixes #34893. Built from https://develop.svn.wordpress.org/trunk@37476 git-svn-id: http://core.svn.wordpress.org/trunk@37444 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-05-20 23:10:27 +02:00
width: 100%;
line-height: 18px;
margin: 0;
}
.customize-control-hidden {
margin: 0;
}
.customize-control-textarea textarea {
width: 100%;
resize: vertical;
}
.customize-control select {
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: 4px;
}
.customize-control-description {
display: block;
font-style: italic;
line-height: 18px;
margin-top: 0;
margin-bottom: 5px;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
.customize-section-description a.external-link:after {
font: 16px/11px dashicons;
content: "\f310";
top: 3px;
position: relative;
padding-left: 3px;
display: inline-block;
text-decoration: none;
}
.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-left: 24px;
padding-top: 6px;
padding-bottom: 6px;
}
.customize-control-radio input,
.customize-control-checkbox input,
.customize-control-nav_menu_auto_add input {
margin-right: 4px;
margin-left: -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: left;
margin: 10px;
width: auto;
}
.customize-control .attachment-title {
font-weight: 600;
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;
}
/* Remove descender space. */
.customize-control .thumbnail-image,
.customize-control-header .current,
.customize-control .wp-media-wrapper.wp-video {
line-height: 0;
}
/* Remove descender space. */
.customize-control-site_icon .favicon-preview .browser-preview {
vertical-align: top;
}
.customize-control .thumbnail-image img {
cursor: pointer;
}
#customize-controls .thumbnail-audio .thumbnail {
max-width: 64px;
max-height: 64px;
margin: 10px;
float: left;
}
#available-menu-items .accordion-section-content .new-content-item,
.customize-control-dropdown-pages .new-content-item {
width: calc(100% - 30px);
padding: 8px 15px;
position: absolute;
bottom: 0;
z-index: 10;
background: #eee;
display: -webkit-box;
display: flex;
}
.customize-control-dropdown-pages .new-content-item {
width: 100%;
padding: 5px 0 5px 1px;
position: relative;
}
#available-menu-items .new-content-item .create-item-input,
.customize-control-dropdown-pages .new-content-item .create-item-input {
-webkit-box-flex: 10;
flex-grow: 10;
}
#available-menu-items .new-content-item .add-content,
.customize-control-dropdown-pages .new-content-item .add-content {
margin: 2px 0 2px 6px;
-webkit-box-flex: 10;
flex-grow: 1;
}
.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
border: 1px solid #f00;
}
.customize-control-dropdown-pages .add-new-toggle {
margin-left: 1px;
font-weight: 600;
line-height: 28px;
}
#customize-preview iframe {
width: 100%;
height: 100%;
position: absolute;
}
#customize-preview iframe + iframe {
visibility: hidden;
}
.wp-full-overlay-sidebar {
background: #eee;
border-right: 1px solid #ddd;
}
Customize: Add setting validation model and control notifications to augment setting sanitization. When a setting is invalid, not only will it be blocked from being saved but all other settings will be blocked as well. This ensures that Customizer saves aren't partial but are more transactional. User will be displayed the error in a notification so that they can fix and re-attempt saving. PHP changes: * Introduces `WP_Customize_Setting::validate()`, `WP_Customize_Setting::$validate_callback`, and the `customize_validate_{$setting_id}` filter. * Introduces `WP_Customize_Manager::validate_setting_values()` to do validation (and sanitization) for the setting values supplied, returning a list of `WP_Error` instances for invalid settings. * Attempting to save settings that are invalid will result in the save being blocked entirely, with the errors being sent in the `customize_save_response`. Modifies `WP_Customize_Manager::save()` to check all settings for validity issues prior to calling their `save` methods. * Introduces `WP_Customize_Setting::json()` for parity with the other Customizer classes. This includes exporting of the `type`. * Modifies `WP_Customize_Manager::post_value()` to apply `validate` after `sanitize`, and if validation fails, to return the `$default`. * Introduces `customize_save_validation_before` action which fires right before the validation checks are made prior to saving. JS changes: * Introduces `wp.customize.Notification` in JS which to represent `WP_Error` instances returned from the server when setting validation fails. * Introduces `wp.customize.Setting.prototype.notifications`. * Introduces `wp.customize.Control.prototype.notifications`, which are synced with a control's settings' notifications. * Introduces `wp.customize.Control.prototype.renderNotifications()` to re-render a control's notifications in its notification area. This is called automatically when the notifications collection changes. * Introduces `wp.customize.settingConstructor`, allowing custom setting types to be used in the same way that custom controls, panels, and sections can be made. * Injects a notification area into existing controls which is populated in response to the control's `notifications` collection changing. A custom control can customize the placement of the notification area by overriding the new `getNotificationsContainerElement` method. * When a save fails due to setting invalidity, the invalidity errors will be added to the settings to then populate in the controls' notification areas, and the first such invalid control will be focused. Props westonruter, celloexpressions, mrahmadawais. See #35210. See #30937. Fixes #34893. Built from https://develop.svn.wordpress.org/trunk@37476 git-svn-id: http://core.svn.wordpress.org/trunk@37444 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-05-20 23:10:27 +02:00
/**
* Notifications
*/
#customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
margin: 4px 0 8px 0;
padding: 0;
display: none;
cursor: default;
}
#customize-controls .customize-control-widget_form.has-error .widget .widget-top,
.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
box-shadow: inset 0 0 0 2px #dc3232;
transition: .15s box-shadow linear;
}
.customize-control-notifications-container li.notice {
list-style: none;
margin: 0 0 6px 0;
padding: 4px 8px;
}
.customize-control-notifications-container li.notice:last-child {
margin-bottom: 0;
}
#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
margin-top: 0;
}
#customize-controls .customize-control-widget_form .customize-control-notifications-container {
margin-top: 8px;
}
.customize-control-text.has-error input {
outline: 2px solid #dc3232;
}
/* Style for custom settings */
/**
* Dropdowns
*/
.accordion-section .dropdown {
float: left;
display: block;
position: relative;
cursor: pointer;
}
.accordion-section .dropdown-content {
overflow: hidden;
float: left;
min-width: 30px;
height: 16px;
line-height: 16px;
margin-right: 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;
right: 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-right: 5px;
margin-bottom: 5px;
}
.customize-control-color .dropdown .dropdown-content {
background-color: #555d66;
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 .actions .button {
margin-top: 12px;
}
.customize-control-header .actions,
.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 .attachment-media-view .remove-button,
.customize-control .attachment-media-view .default-button,
.customize-control .attachment-media-view .upload-button,
.customize-control-header button.new,
.customize-control-header button.remove {
width: auto;
height: auto;
white-space: normal;
}
.customize-control .attachment-media-view .thumbnail,
.customize-control-header .current .container {
overflow: hidden;
}
.customize-control .attachment-media-view .placeholder,
.customize-control-header .placeholder {
width: 100%;
position: relative;
text-align: center;
cursor: default;
border: 1px dashed #b4b9be;
box-sizing: border-box;
padding: 9px 0;
line-height: 20px;
}
.customize-control-header .inner {
display: none;
position: absolute;
width: 100%;
color: #555d66;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.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: 12px;
}
.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 .choice:focus {
outline: none;
}
.customize-control-header .header-view.selected:after {
content: '';
position: absolute;
height: auto;
top: 0; left: 0; bottom: 0; right: 0;
border: 4px solid #00a0d2;
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: #555d66;
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: auto;
right: 10px;
}
.customize-control-header .header-view .close:focus {
outline: 1px solid #5b9dd9;
}
/* Header control: randomiz(s)er */
.customize-control-header .random.placeholder {
cursor: pointer;
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 .choice:focus {
outline: none;
box-shadow:
0 0 0 1px #5b9dd9,
0 0 3px 1px rgba(30, 140, 190, .8);
}
.customize-control-header .uploaded div:last-child > .choice {
margin-bottom: 0;
}
.customize-control .attachment-media-view .thumbnail-image img,
.customize-control-header img {
max-width: 100%;
}
.customize-control .attachment-media-view .remove-button,
.customize-control .attachment-media-view .default-button,
.customize-control-header .remove {
margin-right: 8px;
}
/* Background position control */
.customize-control-background_position .background-position-control .button-group {
display: block;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
/**
* Custom CSS Section
*
* Modifications to the Section Container to make the textarea full-width and
* full-height, if the control is the only control in the section.
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
*/
#customize-controls .customize-section-description-container.section-meta.customize-info {
border-bottom: none;
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
}
#sub-accordion-section-custom_css .customize-control-notifications-container {
margin-bottom: 15px;
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
}
#customize-control-custom_css textarea {
display: block;
font-family: Consolas, Monaco, monospace;
font-size: 12px;
padding: 6px 8px;
height: 500px;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
.customize-section-description-container + #customize-control-custom_css:last-child textarea {
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
border-right: 0;
border-left: 0;
height: calc( 100vh - 185px );
resize: none;
}
.customize-section-description-container + #customize-control-custom_css:last-child {
margin-left: -12px;
width: 299px;
width: calc( 100% + 24px );
margin-bottom: -12px;
}
@media screen and ( max-width: 640px ) {
.customize-section-description-container + #customize-control-custom_css:last-child {
margin-right: 0;
}
.customize-section-description-container + #customize-control-custom_css:last-child textarea {
height: calc( 100vh - 140px );
}
Customize: Introduce custom CSS for extending theme styles. * Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets. * A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it. * CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control. * `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels. * CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`. * `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type. * The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default. * Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered. See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/ Props johnregan3, celloexpressions, folletto, westonruter. Fixes #35395. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-19 20:15:31 +02:00
}
/**
* 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;
}
#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes .accordion-section-title {
cursor: default;
background: #fff;
color: #555d66;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: none;
margin-top: 0;
}
#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
border-top: 0;
}
#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes > .accordion-section-title {
margin: 0 0 15px;
}
#customize-controls .customize-themes-panel .accordion-section-title:hover,
#customize-controls .customize-themes-panel .accordion-section-title {
margin: 15px -8px;
}
#customize-controls .control-section-themes .accordion-section-title,
#customize-controls .customize-themes-panel .accordion-section-title {
padding-right: 100px; /* Space for the button */
}
#customize-controls .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;
}
#customize-controls .control-section-themes .accordion-section-title .change-theme,
#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
position: absolute;
right: 10px;
top: 50%;
margin-top: -14px;
font-weight: 400;
}
#customize-controls .control-section-themes .accordion-section-title:before {
display: none;
}
#customize-controls .customize-themes-panel {
padding: 0 8px;
background: #f1f1f1;
box-sizing: border-box;
}
#customize-controls .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-controls .customize-themes-panel > h2 {
padding: 15px 8px 0 8px;
}
#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;
left: 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%;
}
.control-section-themes .accordion-section-title:after,
.customize-themes-panel .accordion-section-title:after {
display: none;
}
.customize-themes-panel.control-panel-content {
border-top: 1px solid #ddd;
}
/* Details View */
.wp-customizer .theme-overlay {
display: none;
}
.wp-customizer.modal-open .theme-overlay {
position: fixed;
left: 0;
top: 0;
right: 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 {
left: 90px;
right: 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: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
}
.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 {
left: 0;
right: 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;
box-shadow: 0 1px 3px rgba(0,0,0,0.13);
}
body.cheatin h1 {
border-bottom: 1px solid #ddd;
clear: both;
color: #666;
font-size: 24px;
font-family: -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 */
#customize-theme-controls .add-new-widget,
#customize-theme-controls .add-new-menu-item {
cursor: pointer;
float: right;
margin-left: 10px;
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,
Customize: Allow users to more seamlessly create page-based nav menus during customization. Introduces the ability to create stubs for the various post types to add to a given menu. This eliminates the need to leave the customizer to first create the post in the admin and then return to managing menus. Only the title of the newly-created post can be supplied; the post content will be blank and will need to be provided in the normal edit post screen outside the customizer, unless a plugin enables a post editing in the customizer experience. When a post is created and added to a nav menu in the customizer, the newly created post that is added to a menu is given the `auto-draft` status, and if the changes are not published, the `auto-draft` post will be automatically deleted within 7 days via `wp_delete_auto_drafts()`. However, if the customizer changes are saved, then these nav menu item `auto-draft` post stubs will be transitioned to `publish`. Includes portions of code from the Customize Posts <https://github.com/xwp/wp-customize-posts> and Front-end Editor <https://github.com/iseulde/wp-front-end-editor> plugins. For more information, see https://make.wordpress.org/core/2016/06/16/feature-proposal-content-authorship-in-menus-with-live-preview/ Props celloexpressions, westonruter, valendesigns, afercia, melchoyce, mapk, iseulde, mrahmadawais. Fixes #34923. Built from https://develop.svn.wordpress.org/trunk@38436 git-svn-id: http://core.svn.wordpress.org/trunk@38377 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-08-30 00:59:28 +02:00
.add-new-menu-item:before,
#available-menu-items .new-content-item .add-content:before {
content: "\f132";
display: inline-block;
position: relative;
left: -2px;
top: -1px;
font: normal 20px/1 dashicons;
vertical-align: middle;
transition: all 0.2s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Reordering */
.reorder-toggle {
float: right;
padding: 5px 8px;
text-decoration: none;
cursor: pointer;
outline: none;
}
.reorder,
.reordering .reorder-done {
display: block;
padding: 5px 8px;
}
.reorder-done,
.reordering .reorder {
display: none;
}
.widget-reorder-nav span,
.menu-item-reorder-nav button {
position: relative;
overflow: hidden;
float: left;
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;
box-shadow: none;
}
.widget-reorder-nav span:before,
.menu-item-reorder-nav button:before {
display: inline-block;
position: absolute;
top: 0;
right: 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 {
right: 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;
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);
transform: rotate(45deg);
}
#available-widgets,
#available-menu-items {
position: absolute;
top: 0;
bottom: 0;
left: -301px;
visibility: hidden;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
margin: 0;
z-index: 4;
background: #eee;
transition: left .18s;
border-right: 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%;
border-top: 1px solid #ddd;
}
.no-widgets-found #available-widgets-list {
border-top: none;
}
#available-widgets-filter {
position: fixed;
top: 0;
z-index: 1;
width: 300px;
background: #eee;
}
/* search field container */
#available-widgets-filter,
#available-menu-items-search .accordion-section-title {
padding: 13px 15px;
box-sizing: border-box;
}
#available-widgets-filter input,
#available-menu-items-search input {
width: 100%;
height: 32px;
margin: 1px 0;
padding: 6px 30px;
}
#available-widgets-filter input::-ms-clear,
#available-menu-items-search input::-ms-clear {
display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
}
#available-menu-items-search .search-icon,
#available-widgets-filter .search-icon {
display: block;
position: absolute;
top: 15px; /* 13 container padding +1 input margin +1 input border */
left: 16px;
width: 30px;
height: 30px;
line-height: 28px;
text-align: center;
color: #72777c;
}
#available-widgets-filter .clear-results,
#available-menu-items-search .clear-results {
position: absolute;
top: 15px; /* 13 container padding +1 input margin +1 input border */
right: 16px;
width: 30px;
height: 30px;
padding: 0;
border: 0;
cursor: pointer;
background: none;
color: #a00;
text-decoration: none;
outline: 0;
}
#available-widgets-filter .clear-results,
#available-menu-items-search .clear-results,
#available-menu-items-search.loading .clear-results.is-visible {
display: none;
}
#available-widgets-filter .clear-results.is-visible,
#available-menu-items-search .clear-results.is-visible {
display: block;
}
#available-widgets-filter .clear-results:before,
#available-menu-items-search .clear-results:before {
content: "\f335";
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#available-widgets-filter .clear-results:hover,
#available-widgets-filter .clear-results:focus,
#available-menu-items-search .clear-results:hover,
#available-menu-items-search .clear-results:focus {
color: #dc3232;
}
#available-widgets-filter .clear-results:focus,
#available-menu-items-search .clear-results:focus {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
#available-menu-items-search .search-icon:after,
#available-widgets-filter .search-icon:after {
content: "\f179";
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.no-widgets-found-message {
display: none;
margin: 0;
padding: 0 15px;
line-height: inherit;
}
.no-widgets-found .no-widgets-found-message {
display: block;
}
#available-widgets .widget-top,
#available-widgets .widget-top:hover,
#available-menu-items .item-top,
#available-menu-items .item-top:hover {
border: none;
background: transparent;
box-shadow: none;
}
#available-widgets .widget-tpl,
#available-menu-items .item-tpl {
position: relative;
padding: 20px 15px 20px 60px;
background: #fff;
border-bottom: 1px solid #ddd;
border-left: 4px solid #fff;
transition: .15s color ease-in-out,
.15s background-color ease-in-out,
.15s border-color ease-in-out;
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-left: 32px;
}
.customize-control-radio input,
.customize-control-checkbox input,
.customize-control-nav_menu_auto_add input {
margin-left: -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-left: 0;
}
/* when the sidebar is collapsed and switching to responsive view,
bring it back see ticket #35220 */
.wp-full-overlay.collapsed #customize-controls {
margin-left: 0;
}
.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
bottom: 0;
}
.customize-controls-preview-toggle {
display: block;
position: absolute;
top: 0;
left: 48px;
line-height: 45px;
font-size: 14px;
padding: 0 12px;
margin: 0;
height: 45px;
background: #eee;
border: 0;
border-right: 1px solid #ddd;
color: #555d66;
cursor: pointer;
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-right: 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;
left: 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 10px 12px 14px;
margin: 0;
line-height: 24px;
color: #555d66;
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%;
height: auto;
}
#available-widgets-list {
top: 130px;
}
#available-menu-items-search .clear-results,
#available-menu-items-search .search-icon {
top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
}
}