You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2628 lines
47 KiB
2628 lines
47 KiB
/** |
|
* Base Styles |
|
*/ |
|
.media-modal * { |
|
box-sizing: content-box; |
|
} |
|
|
|
.media-modal input, |
|
.media-modal select, |
|
.media-modal textarea { |
|
box-sizing: border-box; |
|
} |
|
|
|
.media-modal, |
|
.media-frame { |
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
font-size: 12px; |
|
-webkit-overflow-scrolling: touch; |
|
} |
|
|
|
.media-modal legend, |
|
.media-modal label { |
|
font-size: 13px; |
|
} |
|
|
|
.media-frame input, |
|
.media-frame textarea { |
|
padding: 6px 8px; |
|
} |
|
|
|
.media-frame select, |
|
.wp-admin .media-frame select { |
|
line-height: 28px; |
|
margin-top: 3px; |
|
} |
|
|
|
.media-frame a { |
|
border-bottom: none; |
|
color: #0073aa; |
|
} |
|
|
|
.media-frame a:hover, |
|
.media-frame a:active { |
|
color: #00a0d2; |
|
} |
|
|
|
.media-frame a:focus { |
|
box-shadow: |
|
0 0 0 1px #5b9dd9, |
|
0 0 2px 1px rgba(30, 140, 190, .8); |
|
outline: none; |
|
color: #124964; |
|
} |
|
|
|
.media-frame a.button { |
|
color: #32373c; |
|
} |
|
|
|
.media-frame a.button:hover { |
|
color: #23282d; |
|
} |
|
|
|
.media-frame a.button-primary, |
|
.media-frame a.button-primary:hover { |
|
color: #fff; |
|
} |
|
|
|
.media-frame input[type="text"], |
|
.media-frame input[type="password"], |
|
.media-frame input[type="number"], |
|
.media-frame input[type="search"], |
|
.media-frame input[type="email"], |
|
.media-frame input[type="url"], |
|
.media-frame textarea, |
|
.media-frame select { |
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
font-size: 12px; |
|
border-width: 1px; |
|
border-style: solid; |
|
border-color: #ddd; |
|
} |
|
|
|
.media-frame input[type="text"]:focus, |
|
.media-frame input[type="password"]:focus, |
|
.media-frame input[type="number"]:focus, |
|
.media-frame input[type="search"]:focus, |
|
.media-frame input[type="email"]:focus, |
|
.media-frame input[type="url"]:focus, |
|
.media-frame textarea:focus, |
|
.media-frame select:focus { |
|
border-color: #5b9dd9; |
|
} |
|
|
|
.media-frame select { |
|
height: 24px; |
|
padding: 2px; |
|
} |
|
|
|
.media-frame input:disabled, |
|
.media-frame textarea:disabled, |
|
.media-frame input[readonly], |
|
.media-frame textarea[readonly] { |
|
background-color: #eee; |
|
} |
|
|
|
.media-frame input[type="search"] { |
|
-webkit-appearance: textfield; |
|
} |
|
|
|
.media-frame ::-webkit-input-placeholder { |
|
color: #72777c; |
|
} |
|
|
|
.media-frame ::-moz-placeholder { |
|
color: #72777c; |
|
opacity: 1; |
|
} |
|
|
|
.media-frame :-ms-input-placeholder { |
|
color: #72777c; |
|
} |
|
|
|
.media-frame .hidden { |
|
display: none; |
|
} |
|
|
|
/*! |
|
* jQuery UI Draggable/Sortable 1.11.4 |
|
* http://jqueryui.com |
|
* |
|
* Copyright jQuery Foundation and other contributors |
|
* Released under the MIT license. |
|
* http://jquery.org/license |
|
*/ |
|
.ui-draggable-handle, |
|
.ui-sortable-handle { |
|
touch-action: none; |
|
} |
|
|
|
/** |
|
* Modal |
|
*/ |
|
.media-modal { |
|
position: fixed; |
|
top: 30px; |
|
left: 30px; |
|
right: 30px; |
|
bottom: 30px; |
|
z-index: 160000; |
|
} |
|
|
|
.wp-customizer .media-modal { |
|
z-index: 560000; |
|
} |
|
|
|
.media-modal-backdrop { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
min-height: 360px; |
|
background: #000; |
|
opacity: 0.7; |
|
z-index: 159900; |
|
} |
|
|
|
.wp-customizer .media-modal-backdrop { |
|
z-index: 559900; |
|
} |
|
|
|
.media-modal-close { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 50px; |
|
height: 50px; |
|
margin: 0; |
|
padding: 0; |
|
border: 1px solid transparent; |
|
background: none; |
|
color: #666; |
|
z-index: 1000; |
|
cursor: pointer; |
|
outline: none; |
|
transition: color .1s ease-in-out, background .1s ease-in-out; |
|
} |
|
|
|
.media-modal-close:hover, |
|
.media-modal-close:active { |
|
color: #00a0d2; |
|
} |
|
|
|
.media-modal-close:focus { |
|
color: #00a0d2; |
|
border-color: #5b9dd9; |
|
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); |
|
} |
|
|
|
.media-modal-close span.media-modal-icon { |
|
background-image: none; |
|
} |
|
|
|
.media-modal-close .media-modal-icon:before { |
|
content: "\f158"; |
|
font: normal 20px/1 dashicons; |
|
speak: none; |
|
vertical-align: middle; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
|
|
.media-modal-content { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
overflow: auto; |
|
min-height: 300px; |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.7); |
|
background: #fcfcfc; |
|
-webkit-font-smoothing: subpixel-antialiased; |
|
} |
|
|
|
.media-modal-content .media-frame select.attachment-filters { |
|
margin-top: 11px; |
|
margin-right: 2%; |
|
width: 42%; |
|
width: calc(48% - 12px); |
|
} |
|
|
|
.media-modal-content .media-toolbar-primary .media-button { |
|
float: right; |
|
} |
|
|
|
.media-modal-content .attachments-browser .search { |
|
width: 100%; |
|
} |
|
|
|
/* higher specificity */ |
|
.wp-core-ui .media-modal-icon { |
|
background-image: url(../images/uploader-icons.png); |
|
background-repeat: no-repeat; |
|
} |
|
|
|
/** |
|
* Toolbar |
|
*/ |
|
.media-toolbar { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: 100; |
|
height: 60px; |
|
padding: 0 16px; |
|
border: 0 solid #ddd; |
|
overflow: hidden; |
|
} |
|
|
|
.media-frame-toolbar .media-toolbar { |
|
top: initial; |
|
bottom: -45px; |
|
height: auto; |
|
overflow: initial; |
|
border-top: 1px solid #ddd; |
|
} |
|
|
|
@media screen and (max-width: 782px) { |
|
.media-frame-toolbar .media-toolbar { |
|
bottom: -48px; |
|
} |
|
} |
|
|
|
.media-toolbar-primary { |
|
float: right; |
|
height: 100%; |
|
} |
|
|
|
.media-toolbar-secondary { |
|
float: left; |
|
height: 100%; |
|
} |
|
|
|
.media-toolbar-primary > .media-button, |
|
.media-toolbar-primary > .media-button-group { |
|
margin-left: 10px; |
|
float: left; |
|
margin-top: 15px; |
|
} |
|
|
|
.media-toolbar-secondary > .media-button, |
|
.media-toolbar-secondary > .media-button-group { |
|
margin-right: 10px; |
|
margin-top: 15px; |
|
} |
|
|
|
/** |
|
* Sidebar |
|
*/ |
|
.media-sidebar { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
width: 267px; |
|
padding: 0 16px 24px; |
|
z-index: 75; |
|
background: #f3f3f3; |
|
border-left: 1px solid #ddd; |
|
overflow: auto; |
|
-webkit-overflow-scrolling: touch; |
|
} |
|
|
|
.hide-toolbar .media-sidebar { |
|
bottom: 0; |
|
} |
|
|
|
.media-sidebar .sidebar-title { |
|
font-size: 20px; |
|
margin: 0; |
|
padding: 12px 10px 10px; |
|
line-height: 28px; |
|
} |
|
|
|
.media-sidebar .sidebar-content { |
|
padding: 0 10px; |
|
margin-bottom: 130px; |
|
} |
|
|
|
.media-sidebar .search { |
|
display: block; |
|
width: 100%; |
|
} |
|
|
|
.media-sidebar h3, /* Back-compat for pre-4.4 */ |
|
.image-details h3, /* Back-compat for pre-4.4 */ |
|
.media-sidebar h2, |
|
.image-details h2 { |
|
position: relative; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
font-size: 12px; |
|
color: #666; |
|
margin: 24px 0 8px; |
|
} |
|
|
|
.media-sidebar .setting, |
|
.attachment-details .setting { |
|
display: block; |
|
float: left; |
|
width: 100%; |
|
margin: 1px 0; |
|
} |
|
|
|
.media-sidebar .setting label, |
|
.attachment-details .setting label { |
|
display: block; |
|
} |
|
|
|
.media-sidebar .setting .link-to-custom, |
|
.attachment-details .setting .link-to-custom { |
|
margin: 3px 2px 0; |
|
} |
|
|
|
.media-sidebar .setting span, |
|
.attachment-details .setting span { |
|
min-width: 30%; |
|
margin-right: 4%; |
|
font-size: 12px; |
|
text-align: right; |
|
word-wrap: break-word; |
|
} |
|
|
|
.media-sidebar .setting .name { |
|
max-width: 80px; |
|
} |
|
|
|
.media-sidebar .setting select, |
|
.attachment-details .setting select { |
|
max-width: 65%; |
|
} |
|
|
|
.media-sidebar .setting input[type="checkbox"], |
|
.media-sidebar .field input[type="checkbox"], |
|
.media-sidebar .setting input[type="radio"], |
|
.media-sidebar .field input[type="radio"], |
|
.attachment-details .setting input[type="checkbox"], |
|
.attachment-details .field input[type="checkbox"], |
|
.attachment-details .setting input[type="radio"], |
|
.attachment-details .field input[type="radio"] { |
|
float: none; |
|
margin: 8px 3px 0; |
|
padding: 0; |
|
} |
|
|
|
.media-sidebar .setting span, |
|
.attachment-details .setting span, |
|
.compat-item label span { |
|
float: left; |
|
min-height: 22px; |
|
padding-top: 8px; |
|
line-height: 16px; |
|
font-weight: 400; |
|
color: #666; |
|
} |
|
|
|
.compat-item label span { |
|
text-align: right; |
|
} |
|
|
|
.media-sidebar .setting input[type="text"], |
|
.media-sidebar .setting input[type="password"], |
|
.media-sidebar .setting input[type="email"], |
|
.media-sidebar .setting input[type="number"], |
|
.media-sidebar .setting input[type="search"], |
|
.media-sidebar .setting input[type="tel"], |
|
.media-sidebar .setting input[type="url"], |
|
.media-sidebar .setting textarea, |
|
.media-sidebar .setting .value, |
|
.attachment-details .setting input[type="text"], |
|
.attachment-details .setting input[type="password"], |
|
.attachment-details .setting input[type="email"], |
|
.attachment-details .setting input[type="number"], |
|
.attachment-details .setting input[type="search"], |
|
.attachment-details .setting input[type="tel"], |
|
.attachment-details .setting input[type="url"], |
|
.attachment-details .setting textarea, |
|
.attachment-details .setting .value { |
|
box-sizing: border-box; |
|
margin: 1px; |
|
width: 65%; |
|
float: right; |
|
} |
|
|
|
.media-sidebar .setting .value, |
|
.attachment-details .setting .value { |
|
margin: 0 1px; |
|
text-align: left; |
|
} |
|
|
|
.media-sidebar .setting textarea, |
|
.attachment-details .setting textarea, |
|
.compat-item .field textarea { |
|
height: 62px; |
|
resize: vertical; |
|
} |
|
|
|
.media-sidebar select, |
|
.attachment-details select { |
|
margin-top: 3px; |
|
} |
|
|
|
.compat-item { |
|
float: left; |
|
width: 100%; |
|
overflow: hidden; |
|
} |
|
|
|
.compat-item table { |
|
width: 100%; |
|
table-layout: fixed; |
|
border-spacing: 0; |
|
border: 0; |
|
} |
|
|
|
.compat-item tr { |
|
padding: 2px 0; |
|
display: block; |
|
overflow: hidden; |
|
} |
|
|
|
.compat-item .label, |
|
.compat-item .field { |
|
display: block; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.compat-item .label { |
|
min-width: 30%; |
|
margin-right: 4%; |
|
float: left; |
|
text-align: right; |
|
} |
|
|
|
.compat-item .label span { |
|
display: block; |
|
width: 100%; |
|
} |
|
|
|
.compat-item .field { |
|
float: right; |
|
width: 65%; |
|
margin: 1px; |
|
} |
|
|
|
.compat-item .field input[type="text"], |
|
.compat-item .field input[type="password"], |
|
.compat-item .field input[type="email"], |
|
.compat-item .field input[type="number"], |
|
.compat-item .field input[type="search"], |
|
.compat-item .field input[type="tel"], |
|
.compat-item .field input[type="url"], |
|
.compat-item .field textarea { |
|
width: 100%; |
|
margin: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
.sidebar-for-errors .attachment-details, |
|
.sidebar-for-errors .compat-item, |
|
.sidebar-for-errors .media-sidebar .media-progress-bar, |
|
.sidebar-for-errors .upload-details { |
|
display: none !important; |
|
} |
|
|
|
/** |
|
* Menu |
|
*/ |
|
.media-menu { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
margin: 0; |
|
padding: 10px 0; |
|
background: #f3f3f3; |
|
border-right-width: 1px; |
|
border-right-style: solid; |
|
border-right-color: #ccc; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
|
|
.media-menu > a { |
|
display: block; |
|
position: relative; |
|
padding: 8px 20px; |
|
margin: 0; |
|
line-height: 18px; |
|
font-size: 14px; |
|
color: #0073aa; |
|
text-decoration: none; |
|
} |
|
|
|
.media-menu > a:hover { |
|
color: #0073aa; |
|
background: rgba( 0, 0, 0, 0.04 ); |
|
} |
|
|
|
.media-menu > a:active { |
|
outline: none; |
|
} |
|
|
|
.media-menu .active, |
|
.media-menu .active:hover { |
|
color: #23282d; |
|
font-weight: 600; |
|
} |
|
|
|
.media-menu .separator { |
|
height: 0; |
|
margin: 12px 20px; |
|
padding: 0; |
|
border-top: 1px solid #ddd; |
|
} |
|
|
|
/** |
|
* Menu |
|
*/ |
|
.media-router { |
|
position: relative; |
|
padding: 0 6px; |
|
margin: 0; |
|
clear: both; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
|
|
.media-router a { |
|
transition: none; |
|
} |
|
|
|
.media-router > a { |
|
position: relative; |
|
float: left; |
|
padding: 8px 10px 9px; |
|
margin: 0; |
|
height: 18px; |
|
line-height: 18px; |
|
font-size: 14px; |
|
text-decoration: none; |
|
} |
|
|
|
.media-router > a:last-child { |
|
border-right: 0; |
|
} |
|
|
|
.media-router > a:active { |
|
outline: none; |
|
} |
|
|
|
.media-router .active, |
|
.media-router .active:hover { |
|
color: #32373c; |
|
} |
|
|
|
.media-router .active, |
|
.media-router > a.active:last-child { |
|
margin: -1px -1px 0; |
|
background: #fff; |
|
border: 1px solid #ddd; |
|
border-bottom: none; |
|
} |
|
|
|
.media-router .active:after { |
|
display: none; |
|
} |
|
|
|
/** |
|
* Frame |
|
*/ |
|
.media-frame { |
|
overflow: hidden; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
} |
|
|
|
.media-frame-menu { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
bottom: 0; |
|
width: 200px; |
|
z-index: 150; |
|
} |
|
|
|
.media-frame-title { |
|
position: absolute; |
|
top: 0; |
|
left: 200px; |
|
right: 0; |
|
height: 50px; |
|
z-index: 200; |
|
} |
|
|
|
.media-frame-router { |
|
position: absolute; |
|
top: 50px; |
|
left: 200px; |
|
right: 0; |
|
height: 36px; |
|
z-index: 200; |
|
} |
|
|
|
.media-frame-content { |
|
position: absolute; |
|
top: 84px; |
|
left: 200px; |
|
right: 0; |
|
bottom: 61px; |
|
height: auto; |
|
width: auto; |
|
margin: 0; |
|
overflow: auto; |
|
background: #fff; |
|
border-top: 1px solid #ddd; |
|
} |
|
|
|
.media-frame-toolbar { |
|
position: absolute; |
|
left: 200px; |
|
right: 0; |
|
bottom: 0; |
|
height: 60px; |
|
z-index: 100; |
|
bottom: 60px; |
|
height: auto; |
|
} |
|
|
|
.media-frame.hide-menu .media-frame-title, |
|
.media-frame.hide-menu .media-frame-router, |
|
.media-frame.hide-menu .media-frame-toolbar, |
|
.media-frame.hide-menu .media-frame-content { |
|
left: 0; |
|
} |
|
|
|
.media-frame.hide-toolbar .media-frame-content { |
|
bottom: 0; |
|
} |
|
|
|
.media-frame.hide-router .media-frame-content { |
|
top: 50px; |
|
} |
|
|
|
.media-frame.hide-menu .media-frame-menu, |
|
.media-frame.hide-router .media-frame-router, |
|
.media-frame.hide-toolbar .media-frame-toolbar { |
|
display: none; |
|
} |
|
|
|
.media-frame.hide-router .media-frame-title { |
|
border-bottom: 1px solid #ddd; |
|
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); |
|
} |
|
|
|
.media-frame-title .dashicons { |
|
display: none; |
|
} |
|
|
|
.media-frame-title h1 { |
|
padding: 0 16px; |
|
font-size: 22px; |
|
line-height: 50px; |
|
margin: 0; |
|
} |
|
|
|
.media-frame-title .suggested-dimensions { |
|
font-size: 14px; |
|
float: right; |
|
margin-right: 20px; |
|
} |
|
|
|
.media-frame-content .crop-content { |
|
height: 100%; |
|
} |
|
|
|
.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon { |
|
margin-right: 300px; |
|
} |
|
|
|
.media-frame-content .crop-content .crop-image { |
|
display: block; |
|
margin: auto; |
|
max-width: 100%; |
|
max-height: 100%; |
|
} |
|
|
|
.media-frame-content .crop-content .upload-errors |
|
{ |
|
position: absolute; |
|
width: 300px; |
|
top: 50%; |
|
left: 50%; |
|
margin-left: -150px; |
|
margin-right: -150px; |
|
z-index: 600000; |
|
} |
|
|
|
/** |
|
* Iframes |
|
*/ |
|
.media-frame .media-iframe { |
|
overflow: hidden; |
|
} |
|
|
|
.media-frame .media-iframe, |
|
.media-frame .media-iframe iframe { |
|
height: 100%; |
|
width: 100%; |
|
border: 0; |
|
} |
|
|
|
/** |
|
* Attachment Browser Filters |
|
*/ |
|
.media-frame select.attachment-filters { |
|
margin-top: 11px; |
|
margin-right: 2%; |
|
max-width: 42%; |
|
max-width: calc(48% - 12px); |
|
} |
|
|
|
.media-frame select.attachment-filters:last-of-type { |
|
margin-right: 0; |
|
} |
|
|
|
/** |
|
* Search |
|
*/ |
|
.media-frame .search { |
|
margin-top: 11px; |
|
padding: 4px; |
|
font-size: 13px; |
|
color: #444; |
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
-webkit-appearance: none; |
|
} |
|
|
|
.media-toolbar-primary .search { |
|
max-width: 100%; |
|
} |
|
|
|
/** |
|
* Attachments |
|
*/ |
|
.wp-core-ui .attachments { |
|
margin: 0; |
|
-webkit-overflow-scrolling: touch; |
|
} |
|
|
|
/** |
|
* Attachment |
|
*/ |
|
.wp-core-ui .attachment { |
|
position: relative; |
|
float: left; |
|
padding: 8px; |
|
margin: 0; |
|
color: #444; |
|
cursor: pointer; |
|
list-style: none; |
|
text-align: center; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
width: 25%; |
|
box-sizing: border-box; |
|
} |
|
|
|
.wp-core-ui .attachment:focus, |
|
.wp-core-ui .selected.attachment:focus, |
|
.wp-core-ui .attachment.details:focus { |
|
box-shadow: |
|
inset 0 0 2px 3px #fff, |
|
inset 0 0 0 7px #5b9dd9; |
|
outline: none; |
|
} |
|
|
|
.wp-core-ui .selected.attachment { |
|
box-shadow: |
|
inset 0 0 0 5px #fff, |
|
inset 0 0 0 7px #ccc; |
|
} |
|
|
|
.wp-core-ui .attachment.details { |
|
box-shadow: |
|
inset 0 0 0 3px #fff, |
|
inset 0 0 0 7px #0073aa; |
|
} |
|
|
|
.wp-core-ui .attachment-preview { |
|
position: relative; |
|
box-shadow: |
|
inset 0 0 15px rgba( 0, 0, 0, 0.1 ), |
|
inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); |
|
background: #eee; |
|
cursor: pointer; |
|
} |
|
|
|
.wp-core-ui .attachment-preview:before { |
|
content: ""; |
|
display: block; |
|
padding-top: 100%; |
|
} |
|
|
|
.wp-core-ui .attachment .icon { |
|
margin: 0 auto; |
|
overflow: hidden; |
|
} |
|
|
|
.wp-core-ui .attachment .thumbnail { |
|
overflow: hidden; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
opacity: 1; |
|
transition: opacity .1s; |
|
} |
|
|
|
.wp-core-ui .attachment .portrait img { |
|
max-width: 100%; |
|
} |
|
|
|
.wp-core-ui .attachment .landscape img { |
|
max-height: 100%; |
|
} |
|
|
|
.wp-core-ui .attachment .thumbnail:after { |
|
content: ""; |
|
display: block; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); |
|
overflow: hidden; |
|
} |
|
|
|
.wp-core-ui .attachment .thumbnail img { |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.wp-core-ui .attachment .thumbnail .centered { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; /* Fails with spaces?? Weird! */ |
|
transform: translate( 50%, 50% ); |
|
} |
|
|
|
.wp-core-ui .attachment .thumbnail .centered img { |
|
transform: translate( -50%, -50% ); |
|
} |
|
|
|
.wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon { |
|
transform: translate( -50%, -70% ); |
|
} |
|
|
|
.ie8 .wp-core-ui .attachment img.icon { |
|
top: 20%; |
|
position: relative; |
|
} |
|
|
|
.wp-core-ui .attachment .filename { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
overflow: hidden; |
|
max-height: 100%; |
|
word-wrap: break-word; |
|
text-align: center; |
|
font-weight: 600; |
|
background: rgba( 255, 255, 255, 0.8 ); |
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 ); |
|
} |
|
|
|
.wp-core-ui .attachment .filename div { |
|
padding: 5px 10px; |
|
} |
|
|
|
.wp-core-ui .attachment .thumbnail img { |
|
position: absolute; |
|
} |
|
|
|
.wp-core-ui .attachment-close { |
|
display: block; |
|
position: absolute; |
|
top: 5px; |
|
right: 5px; |
|
height: 22px; |
|
width: 22px; |
|
padding: 0; |
|
background-color: #fff; |
|
background-position: -96px 4px; |
|
border-radius: 3px; |
|
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); |
|
transition: none; |
|
} |
|
|
|
.wp-core-ui .attachment-close:hover, |
|
.wp-core-ui .attachment-close:focus { |
|
background-position: -36px 4px; |
|
} |
|
|
|
.wp-core-ui .attachment .check { |
|
display: none; |
|
height: 24px; |
|
width: 24px; |
|
padding: 0; |
|
border: 0; |
|
position: absolute; |
|
z-index: 10; |
|
top: 0; |
|
right: 0; |
|
outline: none; |
|
background: #eee; |
|
cursor: pointer; |
|
box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); |
|
} |
|
|
|
.wp-core-ui .attachment .check .media-modal-icon { |
|
display: block; |
|
background-position: -1px 0; |
|
height: 15px; |
|
width: 15px; |
|
margin: 5px; |
|
} |
|
|
|
.wp-core-ui .attachment .check:hover .media-modal-icon { |
|
background-position: -40px 0; |
|
} |
|
|
|
.wp-core-ui .attachment.selected .check { |
|
display: block; |
|
} |
|
|
|
.wp-core-ui .attachment.details .check, |
|
.wp-core-ui .attachment.selected .check:focus, |
|
.wp-core-ui .media-frame.mode-grid .attachment.selected .check { |
|
background-color: #0073aa; |
|
box-shadow: |
|
0 0 0 1px #fff, |
|
0 0 0 2px #0073aa; |
|
} |
|
|
|
.wp-core-ui .attachment.details .check .media-modal-icon, |
|
.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon { |
|
background-position: -21px 0; |
|
} |
|
|
|
.wp-core-ui .attachment.details .check:hover .media-modal-icon, |
|
.wp-core-ui .attachment.selected .check:focus .media-modal-icon, |
|
.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon { |
|
background-position: -60px 0; |
|
} |
|
|
|
.wp-core-ui .media-frame .attachment .describe { |
|
position: relative; |
|
display: block; |
|
width: 100%; |
|
margin: 0; |
|
padding: 8px; |
|
font-size: 12px; |
|
border-radius: 0; |
|
} |
|
|
|
/** |
|
* Attachments Browser |
|
*/ |
|
.media-frame .attachments-browser { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
|
|
.attachments-browser .media-toolbar { |
|
right: 300px; |
|
height: 50px; |
|
} |
|
|
|
.attachments-browser.hide-sidebar .media-toolbar { |
|
right: 0; |
|
} |
|
|
|
.attachments-browser .media-toolbar-primary > .media-button, |
|
.attachments-browser .media-toolbar-primary > .media-button-group, |
|
.attachments-browser .media-toolbar-secondary > .media-button, |
|
.attachments-browser .media-toolbar-secondary > .media-button-group { |
|
margin: 11px 0; |
|
} |
|
|
|
.attachments-browser .attachments { |
|
padding: 2px 8px 8px; |
|
} |
|
|
|
.attachments-browser .attachments, |
|
.attachments-browser .uploader-inline { |
|
position: absolute; |
|
top: 50px; |
|
left: 0; |
|
right: 300px; |
|
bottom: 0; |
|
overflow: auto; |
|
outline: none; |
|
} |
|
|
|
.attachments-browser .uploader-inline.hidden { |
|
display: none; |
|
} |
|
|
|
.attachments-browser .media-toolbar-primary { |
|
max-width: 33%; |
|
} |
|
|
|
.attachments-browser .media-toolbar-secondary { |
|
max-width: 66%; |
|
} |
|
|
|
.uploader-inline .close { |
|
background-color: transparent; |
|
border: 0; |
|
cursor: pointer; |
|
height: 48px; |
|
outline: none; |
|
padding: 0; |
|
position: absolute; |
|
right: 2px; |
|
text-align: center; |
|
top: 2px; |
|
width: 48px; |
|
z-index: 1; |
|
} |
|
|
|
.uploader-inline .close:before { |
|
font: normal 30px/1 dashicons !important; |
|
color: #555d66; |
|
display: inline-block; |
|
content: "\f335"; |
|
font-weight: 300; |
|
margin-top: 1px; |
|
} |
|
|
|
.uploader-inline .close:focus { |
|
outline: 1px solid #5b9dd9; |
|
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); |
|
} |
|
|
|
.attachments-browser.hide-sidebar .attachments, |
|
.attachments-browser.hide-sidebar .uploader-inline { |
|
right: 0; |
|
margin-right: 0; |
|
} |
|
|
|
.attachments-browser .instructions { |
|
display: inline-block; |
|
margin-top: 16px; |
|
line-height: 18px; |
|
font-size: 13px; |
|
color: #666; |
|
margin-right: 0.5em; |
|
} |
|
|
|
.attachments-browser .no-media { |
|
padding: 2em 0 0 2em; |
|
} |
|
|
|
/** |
|
* Progress Bar |
|
*/ |
|
.media-progress-bar { |
|
position: relative; |
|
height: 10px; |
|
width: 70%; |
|
margin: 10px auto; |
|
border-radius: 10px; |
|
background: #ddd; |
|
background: rgba( 0, 0, 0, 0.1 ); |
|
} |
|
|
|
.media-progress-bar div { |
|
height: 10px; |
|
min-width: 20px; |
|
width: 0; |
|
background: #0073aa; |
|
border-radius: 10px; |
|
transition: width 300ms; |
|
} |
|
|
|
.media-uploader-status .media-progress-bar { |
|
display: none; |
|
width: 100%; |
|
} |
|
|
|
.uploading.media-uploader-status .media-progress-bar { |
|
display: block; |
|
} |
|
|
|
.attachment-preview .media-progress-bar { |
|
position: absolute; |
|
top: 50%; |
|
left: 15%; |
|
width: 70%; |
|
margin: -5px 0 0 0; |
|
} |
|
|
|
.media-uploader-status { |
|
position: relative; |
|
margin: 0 auto; |
|
padding-bottom: 10px; |
|
max-width: 400px; |
|
} |
|
|
|
.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */ |
|
.uploader-inline .media-uploader-status h2 { |
|
display: none; |
|
} |
|
|
|
.media-uploader-status .upload-details { |
|
display: none; |
|
font-size: 12px; |
|
color: #666; |
|
} |
|
|
|
.uploading.media-uploader-status .upload-details { |
|
display: block; |
|
} |
|
|
|
.media-uploader-status .upload-detail-separator { |
|
padding: 0 4px; |
|
} |
|
|
|
.media-uploader-status .upload-count { |
|
color: #444; |
|
} |
|
|
|
.media-uploader-status .upload-dismiss-errors, |
|
.media-uploader-status .upload-errors { |
|
display: none; |
|
} |
|
|
|
.errors.media-uploader-status .upload-dismiss-errors, |
|
.errors.media-uploader-status .upload-errors { |
|
display: block; |
|
} |
|
|
|
.media-uploader-status .upload-dismiss-errors { |
|
text-decoration: none; |
|
} |
|
|
|
.media-sidebar .media-uploader-status .upload-dismiss-errors { |
|
position: absolute; |
|
top: -10px; |
|
right: -10px; |
|
padding: 10px; |
|
transition: none; |
|
} |
|
|
|
.media-sidebar .media-uploader-status .upload-dismiss-errors:before { |
|
content: "\f153"; |
|
display: block; |
|
font: normal 16px/1 dashicons; |
|
color: #72777c; |
|
} |
|
|
|
.media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before, |
|
.media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before { |
|
color: #c00; |
|
} |
|
|
|
.upload-errors .upload-error { |
|
padding: 12px; |
|
margin-bottom: 12px; |
|
background: #fff; |
|
border-left: 4px solid #dc3232; |
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.uploader-inline .upload-errors .upload-error { |
|
background-color: #fbeaea; |
|
box-shadow: none; |
|
} |
|
|
|
.upload-errors .upload-error-filename { |
|
font-weight: 600; |
|
} |
|
|
|
.upload-errors .upload-error-message { |
|
display: block; |
|
padding-top: 8px; |
|
word-wrap: break-word; |
|
} |
|
|
|
.uploader-window { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: rgba( 0, 86, 132, 0.9 ); |
|
z-index: 250000; |
|
display: none; |
|
text-align: center; |
|
opacity: 0; |
|
transition: opacity 250ms; |
|
} |
|
|
|
.uploader-window-content { |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
right: 10px; |
|
bottom: 10px; |
|
border: 1px dashed #fff; |
|
} |
|
|
|
.uploader-window h3, /* Back-compat for pre-4.4 */ |
|
.uploader-window h1 { |
|
margin: -0.5em 0 0; |
|
position: absolute; |
|
top: 50%; |
|
left: 0; |
|
right: 0; |
|
transform: translateY( -50% ); |
|
font-size: 40px; |
|
color: #fff; |
|
padding: 0; |
|
} |
|
|
|
.uploader-window .media-progress-bar { |
|
margin-top: 20px; |
|
max-width: 300px; |
|
background: transparent; |
|
border-color: #fff; |
|
display: none; |
|
} |
|
|
|
.uploader-window .media-progress-bar div { |
|
background: #fff; |
|
} |
|
|
|
.uploading .uploader-window .media-progress-bar { |
|
display: block; |
|
} |
|
|
|
.media-frame .uploader-inline { |
|
margin-bottom: 20px; |
|
padding: 0; |
|
text-align: center; |
|
} |
|
|
|
.uploader-inline-content { |
|
position: absolute; |
|
top: 30%; |
|
left: 0; |
|
right: 0; |
|
} |
|
|
|
.uploader-inline-content .upload-ui { |
|
margin: 2em 0; |
|
} |
|
|
|
.uploader-inline-content .post-upload-ui { |
|
margin-bottom: 2em; |
|
} |
|
|
|
.uploader-inline .has-upload-message .upload-ui { |
|
margin: 0 0 4em; |
|
} |
|
|
|
.uploader-inline h3, /* Back-compat for pre-4.4 */ |
|
.uploader-inline h2 { |
|
font-size: 20px; |
|
line-height: 28px; |
|
font-weight: 400; |
|
margin: 0; |
|
} |
|
|
|
.uploader-inline .has-upload-message .upload-instructions { |
|
font-size: 14px; |
|
color: #444; |
|
font-weight: 400; |
|
} |
|
|
|
.uploader-inline .drop-instructions { |
|
display: none; |
|
} |
|
|
|
.supports-drag-drop .uploader-inline .drop-instructions { |
|
display: block; |
|
} |
|
|
|
.uploader-inline p { |
|
font-size: 12px; |
|
margin: 0.5em 0; |
|
} |
|
|
|
.uploader-inline .media-progress-bar { |
|
display: none; |
|
} |
|
|
|
.uploading.uploader-inline .media-progress-bar { |
|
display: block; |
|
} |
|
|
|
.uploader-inline .browser { |
|
display: inline-block !important; |
|
} |
|
|
|
/** |
|
* Selection |
|
*/ |
|
.media-selection { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 350px; |
|
height: 60px; |
|
padding: 0 0 0 16px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
} |
|
|
|
.media-selection .selection-info { |
|
display: inline-block; |
|
font-size: 12px; |
|
height: 60px; |
|
margin-right: 10px; |
|
vertical-align: top; |
|
} |
|
|
|
.media-selection.empty, |
|
.media-selection.editing { |
|
display: none; |
|
} |
|
|
|
.media-selection.one .edit-selection { |
|
display: none; |
|
} |
|
|
|
.media-selection .count { |
|
display: block; |
|
padding-top: 12px; |
|
font-size: 14px; |
|
line-height: 20px; |
|
font-weight: 600; |
|
} |
|
|
|
.media-selection .button-link { |
|
float: left; |
|
padding: 1px 8px; |
|
margin: 1px 8px 1px -8px; |
|
line-height: 16px; |
|
border-right: 1px solid #ddd; |
|
color: #0073aa; |
|
text-decoration: none; |
|
} |
|
|
|
.media-selection .button-link:hover, |
|
.media-selection .button-link:focus { |
|
color: #00a0d2; |
|
} |
|
|
|
.media-selection .button-link:last-child { |
|
border-right: 0; |
|
margin-right: 0; |
|
} |
|
|
|
.selection-info .clear-selection { |
|
color: #bc0b0b; |
|
} |
|
|
|
.selection-info .clear-selection:hover, |
|
.selection-info .clear-selection:focus { |
|
color: #dc3232; |
|
} |
|
|
|
.media-selection .selection-view { |
|
display: inline-block; |
|
vertical-align: top; |
|
} |
|
|
|
.media-selection .attachments { |
|
display: inline-block; |
|
height: 48px; |
|
margin: 6px; |
|
padding: 0; |
|
overflow: hidden; |
|
vertical-align: top; |
|
} |
|
|
|
.media-selection .attachment { |
|
width: 40px; |
|
padding: 0; |
|
margin: 4px; |
|
} |
|
|
|
.media-selection .attachment .thumbnail { |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
} |
|
|
|
.media-selection .attachment .icon { |
|
width: 50%; |
|
} |
|
|
|
.media-selection .attachment-preview { |
|
box-shadow: none; |
|
background: none; |
|
} |
|
|
|
.wp-core-ui .media-selection .attachment:focus, |
|
.wp-core-ui .media-selection .selected.attachment:focus, |
|
.wp-core-ui .media-selection .attachment.details:focus { |
|
box-shadow: |
|
0 0 0 1px #fff, |
|
0 0 2px 3px #5b9dd9; |
|
} |
|
|
|
.wp-core-ui .media-selection .selected.attachment { |
|
box-shadow: none; |
|
} |
|
|
|
.wp-core-ui .media-selection .attachment.details { |
|
box-shadow: |
|
0 0 0 1px #fff, |
|
0 0 0 3px #0073aa; |
|
} |
|
|
|
.media-selection:after { |
|
content: ""; |
|
display: block; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
width: 25px; |
|
background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 )); |
|
} |
|
|
|
.media-selection .attachment .filename { |
|
display: none; |
|
} |
|
|
|
/** |
|
* Spinner |
|
*/ |
|
.media-frame .spinner { |
|
background: url(../images/spinner.gif) no-repeat; |
|
background-size: 20px 20px; |
|
float: right; |
|
display: inline-block; |
|
visibility: hidden; |
|
opacity: 0.7; |
|
filter: alpha(opacity=70); |
|
width: 20px; |
|
height: 20px; |
|
margin: 0; |
|
vertical-align: middle; |
|
} |
|
|
|
.media-frame .spinner.is-active { |
|
visibility: visible; |
|
} |
|
|
|
.media-toolbar .spinner { |
|
margin-top: 14px; |
|
} |
|
|
|
/** |
|
* Attachment Details |
|
*/ |
|
.attachment-details { |
|
position: relative; |
|
overflow: auto; |
|
} |
|
|
|
.attachment-details .settings-save-status { |
|
float: right; |
|
text-transform: none; |
|
z-index: 10; |
|
} |
|
|
|
.attachment-details .settings-save-status .spinner { |
|
margin-left: 5px; |
|
} |
|
|
|
.attachment-details .settings-save-status .saved { |
|
float: right; |
|
display: none; |
|
} |
|
|
|
.attachment-details.save-waiting .settings-save-status .spinner { |
|
visibility: visible; |
|
} |
|
|
|
.attachment-details.save-complete .settings-save-status .saved { |
|
display: block; |
|
} |
|
|
|
.attachment-info { |
|
overflow: hidden; |
|
min-height: 60px; |
|
margin-bottom: 16px; |
|
line-height: 18px; |
|
color: #666; |
|
border-bottom: 1px solid #ddd; |
|
padding-bottom: 11px; |
|
} |
|
|
|
.attachment-info .filename { |
|
font-weight: 600; |
|
color: #444; |
|
word-wrap: break-word; |
|
} |
|
|
|
.attachment-info .thumbnail { |
|
position: relative; |
|
float: left; |
|
max-width: 120px; |
|
max-height: 120px; |
|
margin-top: 5px; |
|
margin-right: 10px; |
|
margin-bottom: 5px; |
|
} |
|
|
|
.uploading .attachment-info .thumbnail { |
|
width: 120px; |
|
height: 80px; |
|
box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ); |
|
} |
|
|
|
.uploading .attachment-info .media-progress-bar { |
|
margin-top: 35px; |
|
} |
|
|
|
.attachment-info .thumbnail-image:after { |
|
content: ""; |
|
display: block; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 ); |
|
overflow: hidden; |
|
} |
|
|
|
.attachment-info .thumbnail img { |
|
display: block; |
|
max-width: 120px; |
|
max-height: 120px; |
|
margin: 0 auto; |
|
} |
|
|
|
.attachment-info .details { |
|
float: left; |
|
font-size: 12px; |
|
max-width: 100%; |
|
} |
|
|
|
.attachment-info .edit-attachment, |
|
.attachment-info .delete-attachment, |
|
.attachment-info .trash-attachment, |
|
.attachment-info .untrash-attachment { |
|
display: block; |
|
text-decoration: none; |
|
white-space: nowrap; |
|
} |
|
|
|
.attachment-details.needs-refresh .attachment-info .edit-attachment { |
|
display: none; |
|
} |
|
|
|
.attachment-info .edit-attachment { |
|
display: block; |
|
} |
|
|
|
.media-modal .delete-attachment, |
|
.media-modal .trash-attachment, |
|
.media-modal .untrash-attachment { |
|
display: inline; |
|
padding: 0; |
|
color: #bc0b0b; |
|
} |
|
|
|
.media-modal .delete-attachment:hover, |
|
.media-modal .delete-attachment:focus, |
|
.media-modal .trash-attachment:hover, |
|
.media-modal .trash-attachment:focus, |
|
.media-modal .untrash-attachment:hover, |
|
.media-modal .untrash-attachment:focus { |
|
color: #dc3232; |
|
} |
|
|
|
/** |
|
* Attachment Display Settings |
|
*/ |
|
.attachment-display-settings { |
|
width: 100%; |
|
float: left; |
|
overflow: hidden; |
|
} |
|
|
|
.attachment-display-settings h4 { |
|
margin: 1.4em 0 0.4em; |
|
} |
|
|
|
.collection-settings { |
|
overflow: hidden; |
|
} |
|
|
|
.collection-settings .setting input[type="checkbox"] { |
|
float: left; |
|
margin-right: 8px; |
|
} |
|
|
|
.collection-settings .setting span { |
|
min-width: inherit; |
|
} |
|
|
|
/** |
|
* Image Editor |
|
*/ |
|
.media-modal .imgedit-wrap { |
|
position: static; |
|
} |
|
|
|
.media-modal .imgedit-wrap .imgedit-panel-content { |
|
padding: 16px; |
|
position: absolute; |
|
top: 0; |
|
right: 282px; |
|
bottom: 0; |
|
left: 0; |
|
overflow: auto; |
|
} |
|
|
|
.media-modal .imgedit-wrap .imgedit-settings { |
|
background: #f3f3f3; |
|
border-left: 1px solid #ddd; |
|
padding: 20px 16px 16px; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
width: 250px; |
|
overflow: auto; |
|
} |
|
|
|
.media-modal .imgedit-group { |
|
background: none; |
|
border: none; |
|
border-bottom: 1px solid #ddd; |
|
box-shadow: none; |
|
margin: 0; |
|
margin-bottom: 16px; |
|
padding: 0; |
|
padding-bottom: 16px; |
|
position: relative; /* RTL fix, #WP29352 */ |
|
} |
|
|
|
.media-modal .imgedit-group:last-of-type { |
|
border: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.media-modal .imgedit-group-top { |
|
margin: 0; |
|
} |
|
|
|
.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */ |
|
.media-modal .imgedit-group-top h2, |
|
.media-modal .imgedit-group-top h2 .button-link { |
|
display: inline-block; |
|
text-transform: uppercase; |
|
font-size: 12px; |
|
color: #666; |
|
margin: 0; |
|
margin-top: 3px; |
|
} |
|
|
|
.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */ |
|
.media-modal .imgedit-group-top h2 a, |
|
.media-modal .imgedit-group-top h2 .button-link { |
|
text-decoration: none; |
|
color: #666; |
|
} |
|
|
|
/* higher specificity than media.css */ |
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle, |
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover, |
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active { |
|
border: 1px solid transparent; |
|
margin: 0; |
|
padding: 0; |
|
background: transparent; |
|
color: #0074a2; |
|
font-size: 20px; |
|
line-height: 1; |
|
cursor: pointer; |
|
box-sizing: content-box; |
|
box-shadow: none; |
|
} |
|
|
|
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { |
|
color: #0074a2; |
|
border-color: #5b9dd9; |
|
outline: none; |
|
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); |
|
} |
|
|
|
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle { |
|
margin-top: -3px; |
|
} |
|
|
|
.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { |
|
margin-top: -2px; |
|
} |
|
|
|
.media-modal .imgedit-help-toggled span.dashicons:before { |
|
content: "\f142"; |
|
} |
|
|
|
.media-modal .imgedit-thumbnail-preview { |
|
margin: 10px 8px 0 0; |
|
} |
|
|
|
.imgedit-thumbnail-preview-caption { |
|
display: block; |
|
} |
|
|
|
.media-modal .imgedit-wrap div.updated { |
|
margin: 0; |
|
margin-bottom: 16px; |
|
} |
|
|
|
|
|
/** |
|
* Embed from URL and Image Details |
|
*/ |
|
.embed-url { |
|
display: block; |
|
position: relative; |
|
padding: 16px; |
|
margin: 0; |
|
z-index: 250; |
|
background: #fff; |
|
font-size: 18px; |
|
} |
|
|
|
.media-frame .embed-url input { |
|
font-size: 18px; |
|
padding: 12px 14px; |
|
width: 100%; |
|
min-width: 200px; |
|
box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 ); |
|
} |
|
|
|
.media-frame .embed-url .spinner { |
|
position: absolute; |
|
top: 32px; |
|
right: 26px; |
|
} |
|
|
|
.media-frame .embed-loading .embed-url .spinner { |
|
visibility: visible; |
|
} |
|
|
|
.embed-link-settings, |
|
.embed-media-settings { |
|
position: absolute; |
|
top: 70px; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
padding: 16px 16px 32px; |
|
overflow: auto; |
|
} |
|
|
|
.media-embed .embed-link-settings { |
|
/* avoid Firefox to give focus to the embed preview container parent */ |
|
overflow: visible; |
|
} |
|
|
|
.embed-preview img, |
|
.embed-preview iframe, |
|
.embed-preview embed, |
|
.mejs-container video { |
|
max-width: 100%; |
|
vertical-align: middle; |
|
} |
|
|
|
.embed-preview a { |
|
display: inline-block; |
|
} |
|
|
|
.embed-preview img { |
|
display: block; |
|
height: auto; |
|
} |
|
|
|
.mejs-container:focus { |
|
outline: 1px solid #5b9dd9; |
|
box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8); |
|
} |
|
|
|
.image-details .media-modal { |
|
left: 140px; |
|
right: 140px; |
|
} |
|
|
|
.image-details .media-frame-title, |
|
.image-details .media-frame-content, |
|
.image-details .media-frame-router { |
|
left: 0; |
|
} |
|
|
|
.image-details .embed-media-settings { |
|
top: 0; |
|
overflow: visible; |
|
padding: 0; |
|
} |
|
|
|
.image-details .embed-media-settings, |
|
.image-details .embed-media-settings div { |
|
box-sizing: border-box; |
|
} |
|
|
|
.image-details .column-settings { |
|
background: #f3f3f3; |
|
border-right: 1px solid #ddd; |
|
min-height: 100%; |
|
width: 55%; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.image-details .column-settings h3, /* Back-compat for pre-4.4 */ |
|
.image-details .column-settings h2 { |
|
margin: 20px; |
|
padding-top: 20px; |
|
border-top: 1px solid #ddd; |
|
color: #23282d; |
|
} |
|
|
|
.image-details .column-image { |
|
width: 45%; |
|
position: absolute; |
|
left: 55%; |
|
top: 0; |
|
} |
|
|
|
.image-details .image { |
|
margin: 20px; |
|
} |
|
|
|
.image-details .image img { |
|
max-width: 100%; |
|
max-height: 500px; |
|
} |
|
|
|
.image-details .advanced-toggle { |
|
padding: 0; |
|
color: #666; |
|
text-transform: uppercase; |
|
text-decoration: none; |
|
} |
|
|
|
.image-details .advanced-toggle:hover, |
|
.image-details .advanced-toggle:active { |
|
color: #666; |
|
} |
|
|
|
.image-details .advanced-toggle:after { |
|
font: normal 20px/1 dashicons; |
|
speak: none; |
|
vertical-align: top; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
content: "\f140"; |
|
display: inline-block; |
|
margin-top: -2px; |
|
} |
|
|
|
.image-details .advanced-visible .advanced-toggle:after { |
|
content: "\f142"; |
|
} |
|
|
|
.image-details .embed-media-settings .size { |
|
margin-bottom: 4px; |
|
} |
|
|
|
.image-details .custom-size span { |
|
display: block; |
|
} |
|
|
|
.image-details .custom-size label { |
|
display: block; |
|
float: left; |
|
} |
|
|
|
.image-details .custom-size span small { |
|
color: #555d66; /* #f3f3f3 background */ |
|
font-size: inherit; |
|
} |
|
|
|
.image-details .custom-size input { |
|
width: 5em; |
|
} |
|
|
|
.image-details .custom-size .sep { |
|
float: left; |
|
margin: 26px 6px 0 6px; |
|
} |
|
|
|
.image-details .custom-size:after { |
|
content: ""; |
|
display: table; |
|
clear: both; |
|
} |
|
|
|
.media-embed .thumbnail { |
|
max-width: 100%; |
|
max-height: 200px; |
|
position: relative; |
|
float: left; |
|
} |
|
|
|
.media-embed .thumbnail img { |
|
max-height: 200px; |
|
display: block; |
|
} |
|
|
|
.media-embed .thumbnail:after { |
|
content: ""; |
|
display: block; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); |
|
overflow: hidden; |
|
} |
|
|
|
.media-embed .setting { |
|
width: 100%; |
|
margin: 10px 0; |
|
float: left; |
|
display: block; |
|
clear: both; |
|
} |
|
|
|
.image-details .embed-media-settings .setting { |
|
float: none; |
|
width: auto; |
|
} |
|
|
|
.image-details .actions { |
|
margin: 10px 0; |
|
} |
|
|
|
.image-details .hidden { |
|
display: none; |
|
} |
|
|
|
.media-embed .setting input[type="text"], |
|
.media-embed .setting textarea { |
|
display: block; |
|
width: 100%; |
|
max-width: 400px; |
|
margin: 1px 0; |
|
} |
|
|
|
.image-details .embed-media-settings .setting input[type="text"], |
|
.image-details .embed-media-settings .setting textarea { |
|
max-width: inherit; |
|
width: 70%; |
|
} |
|
|
|
.image-details .embed-media-settings .setting input.link-to-custom, |
|
.image-details .embed-media-settings .link-target, |
|
.image-details .embed-media-settings .custom-size { |
|
margin-left: 27%; |
|
width: 70%; |
|
} |
|
|
|
.image-details .embed-media-settings .link-target { |
|
margin-top: 24px; |
|
} |
|
|
|
.media-embed .setting input.hidden, |
|
.media-embed .setting textarea.hidden { |
|
display: none; |
|
} |
|
|
|
.media-embed .setting span { |
|
display: block; |
|
width: 200px; |
|
font-size: 13px; |
|
line-height: 24px; |
|
color: #666; |
|
} |
|
|
|
.image-details .embed-media-settings .setting span { |
|
float: left; |
|
width: 25%; |
|
text-align: right; |
|
margin: 8px 1% 0 1%; |
|
line-height: 1.1; |
|
} |
|
|
|
.media-embed .setting .button-group { |
|
margin: 2px 0; |
|
} |
|
|
|
.media-embed-sidebar { |
|
position: absolute; |
|
top: 0; |
|
left: 440px; |
|
} |
|
|
|
.advanced-section, |
|
.link-settings { |
|
margin-top: 10px; |
|
} |
|
|
|
/* Drag & drop on the editor upload */ |
|
.wp-editor-wrap .uploader-editor { |
|
background: rgba( 150, 150, 150, 0.9 ); |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 99998; /* under the toolbar */ |
|
display: none; |
|
text-align: center; |
|
} |
|
|
|
.wp-editor-wrap .uploader-editor-content { |
|
border: 1px dashed #fff; |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
right: 10px; |
|
bottom: 10px; |
|
} |
|
|
|
.wp-editor-wrap .uploader-editor .uploader-editor-title { |
|
position: absolute; |
|
top: 50%; |
|
left: 0; |
|
right: 0; |
|
transform: translateY( -50% ); |
|
font-size: 3em; |
|
line-height: 1.3; |
|
font-weight: 600; |
|
color: #fff; |
|
padding: 0; |
|
margin: 0; |
|
display: none; |
|
} |
|
|
|
.wp-editor-wrap .uploader-editor.droppable { |
|
background: rgba( 0, 86, 132, 0.9 ); |
|
} |
|
|
|
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title { |
|
display: block; |
|
} |
|
|
|
/** |
|
* IE7 Fixes |
|
*/ |
|
.ie7 .media-frame .attachments-browser { |
|
position: static; |
|
} |
|
|
|
.ie7 .media-frame .embed-url input { |
|
margin-top: 4px; |
|
width: 90%; |
|
} |
|
|
|
.ie7 .compat-item { |
|
width: 99%; |
|
} |
|
|
|
.ie7 .attachment-display-settings { |
|
width: auto; |
|
} |
|
|
|
.ie7 .attachment-preview, |
|
.ie7 .attachment-preview .thumbnail { |
|
width: 120px; |
|
height: 120px; |
|
} |
|
|
|
.ie7 .media-frame .attachment .describe { |
|
width: 102px; |
|
} |
|
|
|
.ie7 .media-sidebar .setting select { |
|
max-width: 55%; |
|
} |
|
|
|
.ie7 .media-sidebar .setting input[type="text"], |
|
.ie7 .media-sidebar .setting input[type="password"], |
|
.ie7 .media-sidebar .setting input[type="email"], |
|
.ie7 .media-sidebar .setting input[type="number"], |
|
.ie7 .media-sidebar .setting input[type="search"], |
|
.ie7 .media-sidebar .setting input[type="tel"], |
|
.ie7 .media-sidebar .setting input[type="url"], |
|
.ie7 .media-sidebar .setting textarea { |
|
width: 55%; |
|
} |
|
|
|
.ie7 .media-sidebar .setting .link-to-custom { |
|
float: left; |
|
} |
|
|
|
/** |
|
* Localization |
|
*/ |
|
.rtl .media-modal, |
|
.rtl .media-frame, |
|
.rtl .media-frame .search, |
|
.rtl .media-frame input[type="text"], |
|
.rtl .media-frame input[type="password"], |
|
.rtl .media-frame input[type="number"], |
|
.rtl .media-frame input[type="search"], |
|
.rtl .media-frame input[type="email"], |
|
.rtl .media-frame input[type="url"], |
|
.rtl .media-frame input[type="tel"], |
|
.rtl .media-frame textarea, |
|
.rtl .media-frame select { |
|
font-family: Tahoma, sans-serif; |
|
} |
|
|
|
:lang(he-il) .rtl .media-modal, |
|
:lang(he-il) .rtl .media-frame, |
|
:lang(he-il) .rtl .media-frame .search, |
|
:lang(he-il) .rtl .media-frame input[type="text"], |
|
:lang(he-il) .rtl .media-frame input[type="password"], |
|
:lang(he-il) .rtl .media-frame input[type="number"], |
|
:lang(he-il) .rtl .media-frame input[type="search"], |
|
:lang(he-il) .rtl .media-frame input[type="email"], |
|
:lang(he-il) .rtl .media-frame input[type="url"], |
|
:lang(he-il) .rtl .media-frame textarea, |
|
:lang(he-il) .rtl .media-frame select { |
|
font-family: Arial, sans-serif; |
|
} |
|
|
|
/** |
|
* Responsive layout |
|
*/ |
|
@media only screen and (max-width: 900px) { |
|
|
|
/* Drop-down menu */ |
|
.media-frame:not(.hide-menu) .media-frame-title, |
|
.media-frame:not(.hide-menu) .media-frame-router, |
|
.media-frame:not(.hide-menu) .media-frame-content, |
|
.media-frame:not(.hide-menu) .media-frame-toolbar { |
|
left: 0; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-frame-menu { |
|
position: static; |
|
width: 0; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-menu { |
|
width: auto; |
|
max-width: 80%; |
|
overflow: auto; |
|
z-index: 2000; |
|
top: 50px; |
|
left: -300px; |
|
right: auto; |
|
bottom: auto; |
|
padding: 5px 0; |
|
border: 1px solid #ccc; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-menu.visible { |
|
left: 0; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-menu > a { |
|
padding: 12px 16px; |
|
font-size: 16px; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-menu > a.active { |
|
display: none; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-menu .separator { |
|
margin: 5px 10px; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-frame-title { |
|
left: 0; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-frame-title .dashicons { |
|
display: inline-block; |
|
line-height: 50px; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-frame-title h1 { |
|
color: #0073aa; |
|
line-height: 3; |
|
font-size: 18px; |
|
float: left; |
|
cursor: pointer; |
|
} |
|
/* End drop-down menu */ |
|
|
|
.media-sidebar { |
|
width: 230px; |
|
} |
|
|
|
.attachments-browser .attachments, |
|
.attachments-browser .uploader-inline, |
|
.attachments-browser .media-toolbar { |
|
right: 262px; |
|
} |
|
|
|
.media-sidebar .setting, |
|
.attachment-details .setting { |
|
margin: 6px 0px; |
|
} |
|
|
|
.media-sidebar .setting input, |
|
.media-sidebar .setting textarea, |
|
.media-sidebar .setting span, |
|
.attachment-details .setting input, |
|
.attachment-details .setting textarea, |
|
.attachment-details .setting span, |
|
.compat-item label span { |
|
float: none; |
|
} |
|
|
|
.media-sidebar .setting span, |
|
.attachment-details .setting span, |
|
.compat-item label span { |
|
text-align: inherit; |
|
min-height: 16px; |
|
margin: 0; |
|
padding: 8px 2px 0; |
|
} |
|
|
|
.media-sidebar .setting .value, |
|
.attachment-details .setting .value { |
|
float: none; |
|
width: auto; |
|
} |
|
|
|
.media-sidebar .setting input[type="text"], |
|
.media-sidebar .setting input[type="password"], |
|
.media-sidebar .setting input[type="email"], |
|
.media-sidebar .setting input[type="number"], |
|
.media-sidebar .setting input[type="search"], |
|
.media-sidebar .setting input[type="tel"], |
|
.media-sidebar .setting input[type="url"], |
|
.media-sidebar .setting textarea, |
|
.media-sidebar .setting select, |
|
.attachment-details .setting input[type="text"], |
|
.attachment-details .setting input[type="password"], |
|
.attachment-details .setting input[type="email"], |
|
.attachment-details .setting input[type="number"], |
|
.attachment-details .setting input[type="search"], |
|
.attachment-details .setting input[type="tel"], |
|
.attachment-details .setting input[type="url"], |
|
.attachment-details .setting textarea, |
|
.attachment-details .setting select { |
|
float: none; |
|
width: 98%; |
|
max-width: none; |
|
height: auto; |
|
} |
|
|
|
.media-sidebar .setting select.columns, |
|
.attachment-details .setting select.columns { |
|
width: auto; |
|
} |
|
|
|
.media-frame input, |
|
.media-frame textarea, |
|
.media-frame .search { |
|
padding: 3px 6px; |
|
} |
|
|
|
.image-details .column-image { |
|
width: 30%; |
|
left: 70%; |
|
} |
|
|
|
.image-details .column-settings { |
|
width: 70%; |
|
} |
|
|
|
.image-details .media-modal { |
|
left: 30px; |
|
right: 30px; |
|
} |
|
|
|
.image-details .embed-media-settings .setting { |
|
margin: 20px; |
|
} |
|
|
|
.image-details .embed-media-settings .setting span { |
|
float: none; |
|
text-align: left; |
|
width: 100%; |
|
margin-bottom: 4px; |
|
} |
|
|
|
.image-details .embed-media-settings .setting input.link-to-custom, |
|
.image-details .embed-media-settings .setting input[type="text"], |
|
.image-details .embed-media-settings .setting textarea { |
|
width: 100%; |
|
margin-left: 0; |
|
} |
|
|
|
.image-details .embed-media-settings .custom-size { |
|
margin-left: 20px; |
|
} |
|
|
|
.collection-settings .setting input[type="checkbox"] { |
|
margin-top: 0; |
|
} |
|
|
|
.media-selection { |
|
min-width: 120px; |
|
} |
|
|
|
.media-selection:after { |
|
background: none; |
|
} |
|
|
|
.media-selection .attachments { |
|
display: none; |
|
} |
|
|
|
.media-modal .attachments-browser .media-toolbar .search { |
|
max-width: 100%; |
|
height: auto; |
|
float: right; |
|
} |
|
|
|
.media-modal .attachments-browser .media-toolbar .attachment-filters { |
|
height: auto; |
|
} |
|
|
|
.media-modal .attachments-browser .media-toolbar .spinner { |
|
margin: 14px 2px 0; |
|
} |
|
|
|
/* Text inputs need to be 16px, or they force zooming on iOS */ |
|
.media-frame input[type="text"], |
|
.media-frame input[type="password"], |
|
.media-frame input[type="number"], |
|
.media-frame input[type="search"], |
|
.media-frame input[type="email"], |
|
.media-frame input[type="url"], |
|
.media-frame textarea, |
|
.media-frame select { |
|
font-size: 16px; |
|
} |
|
} |
|
|
|
/* Responsive on portrait and landscape */ |
|
@media only screen and (max-width: 640px), screen and (max-height: 400px) { |
|
/* Full-bleed modal */ |
|
.media-modal, |
|
.image-details .media-modal { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
} |
|
|
|
.media-modal-backdrop { |
|
position: fixed; |
|
} |
|
|
|
.media-sidebar { |
|
z-index: 1900; |
|
max-width: 70%; |
|
bottom: 120%; |
|
box-sizing: border-box; |
|
padding-bottom: 0; |
|
} |
|
|
|
.media-sidebar.visible { |
|
bottom: 0; |
|
} |
|
|
|
.attachments-browser .attachments, |
|
.attachments-browser .uploader-inline, |
|
.attachments-browser .media-toolbar { |
|
right: 0; |
|
} |
|
|
|
.image-details .media-frame-title { |
|
display: block; |
|
top: 0; |
|
font-size: 14px; |
|
} |
|
|
|
.image-details .column-image, |
|
.image-details .column-settings { |
|
width: 100%; |
|
position: relative; |
|
left: 0; |
|
} |
|
|
|
.image-details .column-settings { |
|
padding: 4px 0; |
|
} |
|
|
|
/* Media tabs on the top */ |
|
.media-frame-content .media-toolbar .instructions { |
|
display: none; |
|
} |
|
} |
|
|
|
/* Landscape specific header override */ |
|
@media screen and (max-height: 400px) { |
|
.media-menu { |
|
padding: 0; |
|
} |
|
|
|
.media-frame-router { |
|
top: 44px; |
|
} |
|
|
|
.media-frame-content { |
|
top: 78px; |
|
} |
|
|
|
.attachments-browser .attachments { |
|
top: 40px; |
|
} |
|
|
|
/* Prevent unnecessary scrolling on title input */ |
|
.embed-link-settings { |
|
overflow: visible; |
|
} |
|
} |
|
|
|
@media only screen and (max-width: 480px) { |
|
.media-modal-close { |
|
top: -5px; |
|
} |
|
|
|
.media-modal .media-frame-title { |
|
height: 40px; |
|
} |
|
|
|
.wp-core-ui.wp-customizer .media-button { |
|
margin-top: 13px; |
|
} |
|
|
|
.media-modal .media-frame-title h1, |
|
.media-frame:not(.hide-menu) .media-frame-title h1 { |
|
font-size: 18px; |
|
line-height: 40px; |
|
} |
|
|
|
.media-frame:not(.hide-menu) .media-frame-title .dashicons { |
|
line-height: 40px; |
|
} |
|
|
|
.media-frame-router, |
|
.media-frame:not(.hide-menu) .media-menu { |
|
top: 40px; |
|
} |
|
|
|
.media-frame-content { |
|
top: 74px; |
|
} |
|
|
|
.media-frame.hide-router .media-frame-content { |
|
top: 40px; |
|
} |
|
} |
|
|
|
/** |
|
* HiDPI Displays |
|
*/ |
|
@media print, |
|
(-webkit-min-device-pixel-ratio: 1.25), |
|
(min-resolution: 120dpi) { |
|
|
|
.wp-core-ui .media-modal-icon { |
|
background-image: url(../images/uploader-icons-2x.png); |
|
background-size: 134px 15px; |
|
} |
|
|
|
.media-frame .spinner { |
|
background-image: url(../images/spinner-2x.gif); |
|
} |
|
} |
|
|
|
.media-frame-content[data-columns="1"] .attachment { |
|
width: 100%; |
|
} |
|
|
|
.media-frame-content[data-columns="2"] .attachment { |
|
width: 50%; |
|
} |
|
|
|
.media-frame-content[data-columns="3"] .attachment { |
|
width: 33.33%; |
|
} |
|
|
|
.media-frame-content[data-columns="4"] .attachment { |
|
width: 25%; |
|
} |
|
|
|
.media-frame-content[data-columns="5"] .attachment { |
|
width: 20%; |
|
} |
|
|
|
.media-frame-content[data-columns="6"] .attachment { |
|
width: 16.66%; |
|
} |
|
|
|
.media-frame-content[data-columns="7"] .attachment { |
|
width: 14.28%; |
|
} |
|
|
|
.media-frame-content[data-columns="8"] .attachment { |
|
width: 12.5%; |
|
} |
|
|
|
.media-frame-content[data-columns="9"] .attachment { |
|
width: 11.11%; |
|
} |
|
|
|
.media-frame-content[data-columns="10"] .attachment { |
|
width: 10%; |
|
} |
|
|
|
.media-frame-content[data-columns="11"] .attachment { |
|
width: 9.09%; |
|
} |
|
|
|
.media-frame-content[data-columns="12"] .attachment { |
|
width: 8.33%; |
|
}
|
|
|