WordPress/wp-admin/css/customize-controls.css
Andrew Nacin 2710bcade1 Switch to .min for compressed JS and CSS files.
* This moves our "development" versions from .dev.js to .js (same for css).
 * The compressed version then moves from .js to .min.js (same for css).

By switching to the standard .min convention, it sets expectations for developers,
and works nicely with existing tools such as ack.

fixes #21633.



git-svn-id: http://core.svn.wordpress.org/trunk@21592 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-23 00:04:18 +00:00

535 lines
11 KiB
CSS

body {
overflow: hidden;
}
#customize-controls a {
text-decoration: none;
}
.customize-section {
border-top: 1px solid #fff;
border-bottom: 1px solid #dfdfdf;
margin: 0;
}
.control-section.customize-section:hover,
.control-section.customize-section.open {
border-top-color: #808080;
}
.control-section.customize-section:hover {
border-bottom-color: #6d6d6d;
}
.customize-section.open:hover {
border-bottom-color: #dfdfdf;
}
.customize-section:last-child {
box-shadow: 0 1px 0 0px #fff;
}
.customize-section-title {
margin: 0;
padding: 15px 20px;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.cannot-expand .customize-section-title {
cursor: auto;
}
.customize-section-content {
display: none;
padding: 10px 20px 15px;
overflow: hidden;
}
.control-section .customize-section-title {
padding: 10px 20px;
font-size: 15px;
font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
font-weight: normal;
text-shadow: 0 1px 0 #fff;
background: #f5f5f5;
background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#f5f5f5));
background-image: -webkit-linear-gradient(bottom, #eee, #f5f5f5);
background-image: -moz-linear-gradient(bottom, #eee, #f5f5f5);
background-image: -o-linear-gradient(bottom, #eee, #f5f5f5);
background-image: linear-gradient(to top, #eee, #f5f5f5);
}
.control-section:hover .customize-section-title,
.control-section .customize-section-title:hover,
.control-section.open .customize-section-title {
color: #fff;
text-shadow: 0 -1px 0 #333;
background: #808080;
background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080);
background-image: -o-linear-gradient(bottom, #6d6d6d, #808080);
background-image: linear-gradient(to top, #6d6d6d, #808080);
}
.control-section.open .customize-section-title {
border-bottom: 1px solid #6d6d6d;
}
.customize-section.open .customize-section-content {
display: block;
background: #fdfdfd;
}
.customize-section-title:after {
content: '';
width: 0;
height: 0;
border-color: #ccc transparent;
border-style: solid;
border-width: 6px 6px 0;
position: absolute;
top: 25px;
right: 20px;
z-index: 1;
}
.cannot-expand .customize-section-title:after {
display: none;
}
.customize-section-title:hover:after {
border-color: #aaa transparent;
}
.control-section .customize-section-title:hover:after {
border-color: #eee transparent;
}
.control-section .customize-section-title:after {
top: 15px;
}
#customize-info .customize-section-content {
background: transparent;
}
#customize-info .preview-notice {
font-size: 13px;
line-height: 24px;
color: #999;
}
#customize-info .theme-name {
font-size: 20px;
font-weight: 200;
line-height: 24px;
color: #333;
display: block;
text-shadow: 0 1px 0 #fff;
}
#customize-info .theme-screenshot {
width: 258px;
border: 1px solid #ccc;
}
#customize-info .theme-description {
margin-top: 1em;
color: #777;
line-height: 20px;
}
#customize-controls .submit {
text-align: center;
}
#customize-theme-controls > ul,
#customize-theme-controls .customize-section-content {
margin: 0;
}
#customize-header-actions .button-primary {
float: right;
margin-top: 11px;
}
#customize-header-actions img {
display: none;
float: right;
margin-top: 13px;
margin-right: 4px;
}
.saving #customize-header-actions img {
display: block;
}
.customize-control {
width: 100%;
float: left;
clear: both;
margin-bottom: 8px;
}
.customize-control-title {
display: block;
line-height: 24px;
font-weight: bold;
}
.customize-control select,
.customize-control input[type="text"],
.customize-control input[type="radio"],
.customize-control input[type="checkbox"],
.customize-control-color .color-picker,
.customize-control-checkbox label,
.customize-control-upload div {
line-height: 28px;
}
.customize-control input[type="text"] {
width: 98%;
line-height: 18px;
margin: 0;
}
.customize-control select {
min-width: 50%;
max-width: 100%;
height: 28px;
line-height: 28px;
}
.customize-control-checkbox input {
margin-right: 5px;
}
.customize-control-radio {
padding: 5px 0 10px;
}
.customize-control-radio .customize-control-title {
margin-bottom: 0;
line-height: 22px;
}
.customize-control-radio label {
line-height: 20px;
}
.customize-control-radio input {
margin-right: 5px;
}
#customize-preview iframe {
width: 100%;
height: 100%;
}
/*
* Style for custom settings
*/
/*
* Dropdowns
*/
.customize-section .dropdown {
float: left;
display: block;
position: relative;
cursor: pointer;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.customize-section .dropdown-content {
overflow: hidden;
float: left;
min-width: 30px;
height: 16px;
line-height: 16px;
margin-right: 16px;
padding: 4px 5px;
background-color: #eee;
border: 1px solid #ccc;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.customize-control .dropdown-arrow {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 15px;
border-color: #ccc;
border-style: solid;
border-width: 1px 1px 1px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.customize-control .dropdown-arrow:after {
content: '';
width: 0;
height: 0;
border-color: #ccc transparent;
border-style: solid;
border-width: 4px 4px 0 4px;
position: absolute;
top: 50%;
margin-top: -1px;
right: 4px;
z-index: 1;
}
.customize-section .dropdown:hover .dropdown-content,
.customize-control .dropdown:hover .dropdown-arrow {
border-color: #aaa;
}
.customize-section .dropdown:hover .dropdown-arrow:after {
border-color: #aaa transparent;
}
.customize-control .dropdown-status {
display: none;
max-width: 112px;
color: #777;
}
/*
* Color Picker
*/
.customize-control-color .color-picker-hex,
.customize-control-color .farbtastic-placeholder {
display: none;
}
.customize-control-color.open .color-picker-hex,
.customize-control-color.open .farbtastic-placeholder {
display: block;
}
.customize-control-color .dropdown {
margin-right: 5px;
margin-bottom: 5px;
}
.customize-control-color .dropdown .dropdown-content {
background-color: #fff;
border: 1px solid rgba( 0, 0, 0, 0.15 );
}
.customize-control-color .dropdown:hover .dropdown-content {
border-color: rgba( 0, 0, 0, 0.25 );
}
.customize-section input[type="text"].color-picker-hex {
float: left;
width: 85px;
font-family: monospace;
text-align: center;
}
/* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */
.customize-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
color: transparent;
}
.customize-section input[type="text"].color-picker-hex:-moz-placeholder {
color: #999;
}
.customize-control-color .farbtastic-placeholder {
width: 100%;
margin: 5px 0 10px;
float: left;
}
.customize-control-color .farbtastic {
margin: 0 auto;
}
/*
* Image Picker
*/
.customize-control-image .library,
.customize-control-image .actions {
display: none;
float: left;
width: 100%;
}
.customize-control-image.open .library,
.customize-control-image.open .actions {
display: block;
}
.customize-section .customize-control-image .dropdown-content {
height: auto;
min-height: 24px;
min-width: 40px;
padding: 0;
}
.customize-section .customize-control-image .dropdown-status {
padding: 4px 5px;
}
.customize-section .customize-control-image .preview-thumbnail img {
display: block;
width: 100%;
max-width: 122px;
max-height: 98px;
margin: 0 auto;
}
.customize-section .customize-control-image .actions {
text-align: right;
}
.customize-section .customize-control-image .library ul {
border-bottom: 1px solid #dfdfdf;
float: left;
width: 100%;
margin: 10px 0 0;
}
.customize-section .customize-control-image .library li {
color: #999;
float: left;
padding: 3px 5px;
margin: 0;
border-style: solid;
border-color: transparent;
border-width: 1px 1px 0 1px;
}
.customize-section .customize-control-image .library li.library-selected {
margin-bottom: -1px;
padding-bottom: 4px;
color: #777;
background: #fdfdfd;
border-color: #dfdfdf;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0 ;
}
.customize-section .customize-control-image .library-content {
display: none;
width: 100%;
float: left;
padding: 10px 0;
}
.customize-section .customize-control-image .library-content.library-selected {
display: block;
}
.customize-section .customize-control-image .library .thumbnail {
display: block;
width: 100%;
}
.customize-section .customize-control-image .library .thumbnail:hover img {
border-color: #21759b;
}
.customize-section .customize-control-image .library .thumbnail img {
display: block;
max-width: 90%;
max-height: 80px;
margin: 5px auto;
padding: 4px;
background: #fff;
border: 1px solid #dfdfdf;
}
.customize-section .customize-control-upload .upload-fallback,
.customize-section .customize-control-image .upload-fallback {
display: none;
}
.customize-section .customize-control-upload .upload-dropzone,
.customize-section .customize-control-image .upload-dropzone {
display: none;
padding: 15px 10px;
border: 3px dashed #dfdfdf;
margin: 5px auto;
text-align: center;
color: #777;
position: relative;
cursor: default;
}
.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
.customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
display: block;
-webkit-transition: border-color 0.1s;
-moz-transition: border-color 0.1s;
-ms-transition: border-color 0.1s;
-o-transition: border-color 0.1s;
transition: border-color 0.1s;
}
.customize-section .customize-control-upload .library ul li,
.customize-section .customize-control-image .library ul li {
cursor: pointer;
}
.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
.customize-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;
}
/**
* Handle cheaters.
*/
body.cheatin {
min-width: 0;
background: #f9f9f9;
padding: 50px;
}
body.cheatin p {
max-width: 700px;
margin: 0 auto;
padding: 2em;
font-size: 14px;
background: #fff;
border: 1px solid #dfdfdf;
-webkit-border-radius: 3px;
border-radius: 3px;
}