WordPress/wp-admin/css/customize-controls-rtl.css
Helen Hou-Sandí b90b64bf9e More consistent icons in place of some buttons for the Customizer and theme install preview.
* Use a single close icon instead of a context-changing cancel/close button in the Customizer. In user testing, this small distinction in language was overlooked, and we use an AYS now instead. This also makes it consistent with the back arrow in Customizer panels.
* Use the same close icon as well as the previous/next arrows from the theme details browser in the theme install preview.

props celloexpressions. fixes #28655.

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


git-svn-id: http://core.svn.wordpress.org/trunk@28819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-08 18:19:14 +00:00

867 lines
17 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-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,
#customize-info .accordion-section-title:hover,
#customize-info .accordion-section-title:focus {
color: #555555;
}
#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.open .accordion-section-title {
border-color: transparent;
}
#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: white;
}
#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: #555555;
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: #555555;
}
#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:after {
content: "\f139";
}
.rtl .control-section.control-panel > .accordion-section-title:after {
content: "\f141";
}
.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 ease-in .1s;
transition: color ease-in .1s;
}
.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 ease-in-out .18s, color ease-in .1s;
transition: right ease-in-out .18s, color ease-in .1s;
}
.collapsed .control-panel-back {
display: none;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.control-panel-back:focus,
.control-panel-back:hover {
background-color: #0074a2;
color: #fff;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.customize-controls-close:before {
font: normal 32px/1 dashicons;
content: "\f335";
position: relative;
top: 8px;
right: 8px;
}
.control-panel-back:before {
font: normal 29px/1 dashicons;
content: "\f340";
position: relative;
top: 9px;
right: 9px;
}
.rtl .control-panel-back:before {
content: "\f344";
}
.current-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: !important 0;
border-radius: !important 0;
}
.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;
}