WordPress/wp-admin/css/customize-controls-rtl.css
desrosj 9508fca05f Build/Test Tools: Support NodeJS 14.x in the 4.0 branch.
This updates the 4.0 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.0, dependencies that were removed in future releases have also been updated to their latest versions.

Props desrosj, dd32, netweb, jorbin.
Merges [30059-30063,30066-30067,31425,31504,31557,31648,31649-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,50192] to the 4.0 branch.
See #52341.
Built from https://develop.svn.wordpress.org/branches/4.0@50218


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

890 lines
18 KiB
CSS

body {
overflow: hidden;
}
#customize-controls a {
text-decoration: none;
}
#customize-controls h3 {
font-size: 14px;
}
#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: "\f344";
}
.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-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);
}
/*
* Image Picker
*/
.customize-control-image .library,
.customize-control-image .actions {
display: none;
float: right;
width: 100%;
}
.customize-control-image.open .library,
.customize-control-image.open .actions {
display: block;
}
.accordion-section .customize-control-image .dropdown-content {
height: auto;
min-height: 24px;
min-width: 40px;
padding: 0;
}
.accordion-section .customize-control-image .dropdown-status {
padding: 4px 5px;
}
.accordion-section .customize-control-image .preview-thumbnail img {
display: block;
width: 100%;
max-width: 122px;
max-height: 98px;
margin: 0 auto;
}
.accordion-section .customize-control-image .actions {
text-align: left;
}
.accordion-section .customize-control-image .library ul {
border-bottom: 1px solid #ddd;
float: right;
width: 100%;
margin: 10px 0 0;
}
.accordion-section .customize-control-image .library li {
color: #ccc;
float: right;
padding: 3px 15px;
margin: 0;
border: 1px solid transparent;
}
.accordion-section .customize-control-image .library li.library-selected {
margin-bottom: -1px;
padding-bottom: 4px;
color: #666666;
border-color: #ddd;
border-bottom-color: #fff;
}
.accordion-section .customize-control-image .library .thumbnail {
display: block;
width: 100%;
}
.accordion-section .customize-control-image .library .thumbnail img {
display: block;
max-width: 90%;
max-height: 80px;
margin: 5px auto;
padding: 2px;
background: #666666;
}
.accordion-section .customize-control-image .library .thumbnail:hover img {
background-color: #2ea2cc;
}
.accordion-section .customize-control-image .library-content {
display: none;
width: 100%;
float: right;
padding: 10px 0;
}
.accordion-section .customize-control-image .library-content.library-selected {
display: block;
}
.accordion-section .customize-control-upload .upload-fallback,
.accordion-section .customize-control-image .upload-fallback {
display: none;
}
.accordion-section .customize-control-upload .upload-dropzone,
.accordion-section .customize-control-image .upload-dropzone {
display: none;
padding: 15px 10px;
border: 3px dashed #dfdfdf;
margin: 5px auto;
text-align: center;
position: relative;
cursor: default;
}
.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop,
.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop {
display: block;
-webkit-transition: border-color 0.1s;
transition: border-color 0.1s;
}
.accordion-section .customize-control-upload .library ul li,
.accordion-section .customize-control-image .library ul li {
cursor: pointer;
}
.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
border-color: #83b4d8;
}
/**
* 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-header_image .current {
margin-bottom: 8px;
}
#customize-control-header_image .uploaded {
margin-bottom: 18px;
}
#customize-control-header_image .uploaded button:not(.random),
#customize-control-header_image .default button:not(.random) {
width: 100%;
padding: 0;
margin: 0;
background: none;
border: none;
color: inherit;
cursor: pointer;
}
#customize-control-header_image button img {
display: block;
}
#customize-control-header_image button.new,
#customize-control-header_image button.remove {
white-space: normal;
width: 48%;
height: auto;
}
/* Header control: current image container */
#customize-control-header_image .current .container {
overflow: hidden;
-webkit-border-radius: 2px;
border: 1px solid #eee;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#customize-control-header_image .placeholder {
width: 100%;
position: relative;
text-align: center;
cursor: default;
}
#customize-control-header_image .inner {
display: none;
position: absolute;
width: 100%;
color: #555;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#customize-control-header_image .inner,
#customize-control-header_image .inner .dashicons {
line-height: 20px;
top: 10px;
}
#customize-control-header_image .list .inner,
#customize-control-header_image .list .inner .dashicons {
top: 9px;
}
#customize-control-header_image .header-view {
position: relative;
width: 100%;
margin-bottom: 5px;
}
#customize-control-header_image .header-view:last-child {
margin-bottom: 0px;
}
/* Convoluted, but 'outline' support isn't good enough yet */
#customize-control-header_image .header-view:after {
border: 0;
}
#customize-control-header_image .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_image .header-view.button.selected {
border: 0;
}
/* Header control: overlay "close" button */
#customize-control-header_image .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_image .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_image .header-view:hover .close {
visibility: visible;
}
/* Header control: randomiz(s)er */
#customize-control-header_image .random.placeholder {
cursor: pointer;
-webkit-border-radius: 2px;
border-radius: 2px;
height: 40px;
}
#customize-control-header_image button.random {
width: 100%;
height: auto;
min-height: 40px;
white-space: normal;
}
#customize-control-header_image button.random .dice {
margin-top: 4px;
}
#customize-control-header_image .placeholder:hover .dice,
#customize-control-header_image .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; }
}
/* Header control: actions and choices */
#customize-control-header_image .actions {
margin-bottom: 32px;
}
#customize-control-header_image .choice {
position: relative;
display: block;
margin-bottom: 9px;
}
#customize-control-header_image .uploaded div:last-child > .choice {
margin-bottom: 0;
}
#customize-control-header_image img {
width: 100%;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#customize-control-header_image .remove {
float: right;
margin-left: 3px;
}
#customize-control-header_image .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;
}