3540b301af
* Use ajax-based saving, add saving indicator. * Use ajax-based refreshing instead of form targets. * Instead of using hidden inputs with prefixed names to track the canonical data, use the values stored in wp.customize. Encode the values as JSON before sending to avoid bugs with ids that contain square brackets (PHP mangles POST values with nested brackets). * Use wp.customize.Previewer solely for the purpose of previewing; move the postMessage connection with the parent frame and other unrelated code snippets into the 'ready' handler. git-svn-id: https://develop.svn.wordpress.org/trunk@20645 602fd350-edb4-49c9-b593-d223f7449a82
472 lines
8.6 KiB
CSS
472 lines
8.6 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.customize-section-content {
|
|
display: none;
|
|
padding: 10px 20px 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.control-section {
|
|
border: 0;
|
|
}
|
|
|
|
.control-section .customize-section-title {
|
|
padding: 8px 20px;
|
|
border-top: 1px solid #fff;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.control-section .customize-section-title:hover {
|
|
background-color: #efefef;
|
|
background-image: -webkit-linear-gradient( top, #f5f5f5, #eee );
|
|
background-image: -moz-linear-gradient( top, #f5f5f5, #eee );
|
|
background-image: -ms-linear-gradient( top, #f5f5f5, #eee );
|
|
background-image: -o-linear-gradient( top, #f5f5f5, #eee );
|
|
background-image: linear-gradient( top, #f5f5f5, #eee );
|
|
box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
|
|
}
|
|
|
|
.control-section .customize-section-content {
|
|
border-top: 1px solid #fff;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
}
|
|
|
|
.customize-section.open .customize-section-content {
|
|
display: block;
|
|
}
|
|
|
|
.customize-section-title:after {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-color: #ccc transparent transparent transparent;
|
|
border-style: solid;
|
|
border-width: 6px;
|
|
position: absolute;
|
|
top: 25px;
|
|
right: 20px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.customize-section.open .customize-section-title:after {
|
|
margin-top: -7px;
|
|
border-color: transparent transparent #ccc transparent;
|
|
}
|
|
|
|
.control-section .customize-section-title:after {
|
|
top: 13px;
|
|
}
|
|
|
|
#customize-info {
|
|
margin-top: 45px;
|
|
}
|
|
|
|
#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;
|
|
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 {
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
#customize-theme-controls > ul,
|
|
#customize-theme-controls .customize-section-content {
|
|
margin: 0;
|
|
}
|
|
|
|
#customize-footer-actions img {
|
|
display: none;
|
|
position: absolute;
|
|
top: 18px;
|
|
margin-left: 4px;
|
|
}
|
|
.saving #customize-footer-actions img {
|
|
display: inline;
|
|
}
|
|
|
|
.customize-control {
|
|
float: left;
|
|
clear: both;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.customize-control-title {
|
|
clear: left;
|
|
float: left;
|
|
min-width: 110px;
|
|
margin-right: 10px;
|
|
line-height: 28px;
|
|
}
|
|
.customize-control-content {
|
|
float: right;
|
|
width: 140px;
|
|
}
|
|
|
|
.customize-control-text input,
|
|
.customize-control-select select,
|
|
.customize-control-checkbox input,
|
|
.customize-control-color .color-picker,
|
|
.customize-control-upload div {
|
|
float: left;
|
|
clear: right;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.customize-control-text input {
|
|
float: right;
|
|
width: 138px;
|
|
line-height: 18px;
|
|
margin: 1px;
|
|
}
|
|
|
|
.customize-control-select select {
|
|
width: 138px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.customize-control-checkbox input {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.customize-control-radio {
|
|
padding: 5px 0 10px;
|
|
}
|
|
|
|
.customize-control-radio .customize-control-title {
|
|
margin-bottom: 0;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.customize-control-radio label {
|
|
float: left;
|
|
clear: both;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.customize-control-radio input {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#customize-preview iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/*
|
|
* Style for custom settings
|
|
*/
|
|
.customize-section select {
|
|
max-width: 150px;
|
|
}
|
|
|
|
/*
|
|
* 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-control.open .dropdown-arrow:after {
|
|
border-width: 0 4px 4px 4px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.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: #999;
|
|
}
|
|
|
|
/*
|
|
* 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 .color-picker-hex {
|
|
float: left;
|
|
width: 70px;
|
|
font-family: monospace;
|
|
background-color: #fff;
|
|
color: #777;
|
|
border: 1px solid #ccc;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.customize-section .color-picker-hex span {
|
|
float: left;
|
|
display: block;
|
|
margin: 1px -2px 0 0;
|
|
line-height: 16px;
|
|
padding: 3px 0 3px 8px;
|
|
text-align: right;
|
|
-webkit-border-radius: 3px 0 0 3px;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
.customize-section .color-picker-hex input[type="text"] {
|
|
width: 50px;
|
|
height: 22px;
|
|
line-height: 16px;
|
|
color: #777;
|
|
background: transparent;
|
|
border: 0;
|
|
-webkit-border-radius: 0 3px 3px 0;
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
.customize-control-color .farbtastic-placeholder {
|
|
width: 235px;
|
|
margin: 5px 0 10px 25px;
|
|
float: left;
|
|
}
|
|
|
|
.customize-control-color .farbtastic {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/*
|
|
* Image Picker
|
|
*/
|
|
|
|
.customize-control-image .library,
|
|
.customize-control-image .actions {
|
|
display: none;
|
|
float: left;
|
|
}
|
|
.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;
|
|
max-width: 122px;
|
|
max-height: 98px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.customize-section .customize-control-image .actions {
|
|
float: right;
|
|
}
|
|
|
|
.customize-section .customize-control-image .actions a {
|
|
display: block;
|
|
}
|
|
|
|
.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: #f5f5f5;
|
|
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: 220px;
|
|
max-height: 80px;
|
|
|
|
margin: 5px auto;
|
|
padding: 4px;
|
|
background: #fff;
|
|
border: 1px solid #dfdfdf;
|
|
}
|
|
|
|
.customize-section .customize-control-upload .upload-dropzone,
|
|
.customize-section .customize-control-image .upload-dropzone {
|
|
padding: 15px 10px;
|
|
border: 3px dashed #dfdfdf;
|
|
margin: 5px auto;
|
|
text-align: center;
|
|
color: #777;
|
|
position: relative;
|
|
} |