WordPress/wp-admin/css/customize-controls-rtl.css
desrosj c6169ea341 Build/Test Tools: Support NodeJS 14.x in the 4.1 branch.
This updates the 4.1 branch to support the latest LTS version of NodeJS (currently 14.x), allowing the same version to be used across all WordPress branches that receive security updates as a courtesy.

Because older branches use (really) old versions of NodeJS, the local Docker environment cannot be backported since the needed dependencies will not run on these older versions (see #48301). This also blocks the ability to move automated testing over to GitHub Actions (see #50401).

This change also introduces a `packager-lock.json` file to the branch.

In addition to backporting the package updates that happened after branching 4.1, dependencies that were removed in future releases have also been updated to their latest versions.

Props desrosj, dd32, netweb, jorbin.
Merges [31425,31504,31557,31648-31650,32356-32357,32988,33726,35363,35513,35521,35538-35541,35859,36861-36865,37017,37019-37020,37212,37612,38111,39110,39113,39115-39117,39478,41835,42460-42461,42463,42887,43320,43323,43977,44219,44233,45321,45765,46404,46408-46409,47404,47867,47872-47873,48705,49636,49933,49937,49939,50126,50176,50185] to the 4.1 branch.
See #52341.
Built from https://develop.svn.wordpress.org/branches/4.1@50216


git-svn-id: http://core.svn.wordpress.org/branches/4.1@49884 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-02-05 04:30:35 +00:00

851 lines
17 KiB
CSS

body {
overflow: hidden;
}
#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: #666666;
}
#customize-header-actions .button-primary {
float: left;
margin-top: 9px;
}
#customize-header-actions .spinner {
margin-top: 16px;
margin-left: 4px;
}
.saving #customize-header-actions .spinner {
display: block;
}
#customize-header-actions {
border-bottom: 1px solid #ddd;
}
#customize-controls .wp-full-overlay-sidebar-content {
overflow-y: auto;
overflow-x: hidden;
}
#customize-info {
border: none;
border-top: 1px solid #ddd;
}
#customize-info .accordion-section-title {
background-color: #fff;
color: #666666;
border-right: none;
border-left: none;
border-bottom: 1px solid #eeeeee;
}
#customize-info.open .accordion-section-title:after,
#customize-info .accordion-section-title:hover:after,
#customize-info .accordion-section-title:focus:after {
color: #555555;
}
#customize-info .preview-notice {
font-size: 13px;
line-height: 24px;
}
#customize-info .theme-name {
font-size: 20px;
font-weight: 200;
line-height: 24px;
display: block;
}
#customize-info .theme-screenshot {
width: 258px;
}
#customize-info .theme-description {
margin-top: 1em;
color: #666666;
line-height: 20px;
}
#customize-theme-controls .control-section {
border: none;
}
#customize-theme-controls .accordion-section-title {
color: #555555;
background-color: #fff;
border-bottom: 1px solid #eeeeee;
}
#customize-theme-controls .accordion-section-content {
color: #555555;
background: #fff;
}
#customize-info.open .accordion-section-title,
#customize-info .accordion-section-title:hover,
#customize-info .accordion-section-title:focus,
#customize-theme-controls .control-section:hover > .accordion-section-title,
#customize-theme-controls .control-section .accordion-section-title:hover,
#customize-theme-controls .control-section.open .accordion-section-title,
#customize-theme-controls .control-section .accordion-section-title:focus {
color: #222;
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: #555;
}
#customize-info.open,
#customize-theme-controls .control-section.open {
border-bottom: 1px solid #eeeeee;
}
#customize-theme-controls .control-section.open .accordion-section-title {
border-bottom-color: #eeeeee !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,
#customize-theme-controls .accordion-section-content {
margin: 0;
}
.control-section.control-panel > .accordion-section-title {
padding-left: 54px;
}
.control-section.control-panel > .accordion-section-title:after {
content: "\f345";
background: #f5f5f5;
color: #555;
width: 38px;
height: 100%;
margin: -11px 0 -11px -10px; /* compensate for positioning */
line-height: 45px;
padding-right: 5px;
border-right: 1px solid #eee;
z-index: 0;
}
.rtl .control-section.control-panel > .accordion-section-title:after {
content: "\f341";
}
#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
background: #ddd;
color: #000;
border: 1px solid #d9d9d9;
border-left: none;
margin-top: -12px;
line-height: 44px;
z-index: 1;
}
.accordion-sub-container.control-panel-content {
display: none;
position: absolute;
right: 300px;
top: 0;
width: 300px;
border-top: 1px solid #ddd;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
}
.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-left: 2px;
background: #eee;
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;
}
.control-panel-back {
display: block;
position: fixed;
top: 0;
z-index: 99;
right: -48px;
width: 45px;
height: 45px;
padding-left: 2px;
background: #eee;
border-left: 1px solid #ddd;
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;
}
.collapsed .control-panel-back {
display: none;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.control-panel-back:focus,
.control-panel-back:hover {
background: #ddd;
border-color: #ccc;
color: #000;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.customize-controls-close:before {
font: normal 22px/1 dashicons;
content: "\f335";
position: relative;
top: 7px;
right: 13px;
}
.control-panel-back:before {
font: normal 20px/1 dashicons;
content: "\f341";
position: relative;
top: 7px;
right: 13px;
}
.rtl .control-panel-back:before {
content: "\f345";
}
.in-sub-panel .control-panel-back {
right: 0;
}
.current-panel > .accordion-section-title {
height: 22px;
}
.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;
}
.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: -300px;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
}
.control-section.control-panel .accordion-section-title .panel-title {
font-size: 20px;
font-weight: 200;
line-height: 24px;
display: block;
border: none;
}
.control-section.control-panel .preview-notice {
font-size: 13px;
line-height: 24px;
}
p.customize-section-description {
font-style: normal;
}
.customize-control {
width: 100%;
float: right;
clear: both;
margin-bottom: 8px;
}
.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-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-checkbox label,
.customize-control-upload div {
line-height: 28px;
}
.customize-control-checkbox input {
margin-left: 5px;
}
.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-radio label {
line-height: 32px;
}
.customize-control-radio input {
margin-left: 5px;
}
.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: 5px 10px 0;
}
.customize-control .attachment-meta-title {
padding-top: 7px;
}
.customize-control .thumbnail-image {
line-height: 0;
}
.customize-control .thumbnail-image img {
cursor: pointer;
}
#customize-preview iframe {
width: 100%;
height: 100%;
}
.wp-full-overlay-sidebar {
background: #eeeeee;
border-left: 1px solid #ddd;
}
.collapse-sidebar {
background-color: transparent !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
.collapse-sidebar:active,
.collapse-sidebar:active .collapse-sidebar-label,
.collapse-sidebar:active .collapse-sidebar-arrow:before {
text-shadow: none;
}
.collapsed .collapse-sidebar-arrow:before {
color: #888;
}
/* 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 #eeeeee;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.customize-control .dropdown-arrow {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20px;
background: #eeeeee;
}
.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: #333;
}
.customize-control .dropdown-status {
color: #333;
background: #eeeeee;
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: #555555;
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-preview {
position: relative;
}
.ios #customize-controls .wp-full-overlay-sidebar-content {
-webkit-overflow-scrolling: touch;
}
/** Header control **/
.customize-control-upload .current,
.customize-control-image .current,
.customize-control-background .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-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-header button.new,
.customize-control-header button.remove {
white-space: normal;
width: 48%;
height: auto;
}
.customize-control-upload .current .container,
.customize-control-image .current .container,
.customize-control-background .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-upload .current .container,
.customize-control-background .current .container,
.customize-control-image .current .container {
min-height: 40px;
}
.customize-control-upload .placeholder,
.customize-control-image .placeholder,
.customize-control-background .placeholder,
.customize-control-header .placeholder {
width: 100%;
position: relative;
text-align: center;
cursor: default;
}
.customize-control-upload .inner,
.customize-control-image .inner,
.customize-control-background .inner,
.customize-control-header .inner {
display: none;
position: absolute;
width: 100%;
color: #555;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.customize-control-upload .inner,
.customize-control-background .inner,
.customize-control-image .inner {
display: block;
min-height: 40px;
}
.customize-control-upload .inner,
.customize-control-image .inner,
.customize-control-background .inner,
.customize-control-header .inner,
.customize-control-header .inner .dashicons {
line-height: 20px;
top: 10px;
}
.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 #2ea2cc;
-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: 2em;
color: grey;
position: absolute;
visibility: hidden;
top: 10px;
left: 10px;
z-index: 1;
width: 20px;
height: 20px;
cursor: pointer;
}
.customize-control-header .uploaded .header-view .close:hover {
color: black;
text-shadow:
1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
.customize-control-header .header-view:hover .close {
visibility: visible;
}
/* 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;
-ms-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; }
}
@-ms-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-upload .actions,
.customize-control-image .actions,
.customize-control-background .actions,
.customize-control-header .actions {
margin-bottom: 32px;
}
.customize-control-header .choice {
position: relative;
display: block;
margin-bottom: 9px;
}
.customize-control-header .uploaded div:last-child > .choice {
margin-bottom: 0;
}
.customize-control-upload img,
.customize-control-image img,
.customize-control-background img,
.customize-control-header img {
width: 100%;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.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-header .remove {
float: right;
margin-left: 3px;
}
.customize-control-upload .upload-button,
.customize-control-image .upload-button,
.customize-control-background .upload-button,
.customize-control-header .new {
float: left;
}
/** 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 p {
font-size: 14px;
line-height: 1.5;
margin: 25px 0 20px;
}