mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-19 00:55:13 +01:00
922f83a69f
In many a strange and curious file of forgotten lore—
While I pondered, blaming Nacin, my notifications suddenly awakened,
As of someone quietly DMing;—DMing me, I can’t ignore.
“’Tis some contributor,” I muttered, “DMing me an idea or four—
Only this and nothing more.”
Ah, distinctly I remember, at WordCamp US, last December;
A mad proposal nearly laid me—down out cold—upon the floor.
Curious, I listened closely;—to a plan I agreed with, mostly—
A way to make our JavaScript—JavaScript which was a chore—
Maintainable, extendable, for the future, is what I saw.
Guten-ready for evermore.
Open here I switch to Slack, when, with many a patch and hack,
In there stepped Omar, a JavaScript developer hardcore;
Pronouncing all the changes fit; ready now to be commit;
“There’s nothing else for us to do,” DMing me, “It’s done!” he swore—
“No longer random guessing at which file need next be explored—
Let’s move on, we’re all aboard.”
Moved all together, grouped and managed, in folders all is packaged,
The code had all been cleaned and tidied, important parts moved to the fore,
“Though this change be useful here,” I said, “it is too large, I fear,
We couldn’t manage such a patch, we’ve done nothing like this before—
Tell me where doth go this change, change to make our codebase soar!”
Quoth Omar, “In WordPress Core.”
Props omarreis for shepherding this significant change.
Props adamsilverstein, aduth, atimmer, dingo_bastard, frank-klein, gziolo, herregroen, jaswrks, jeremyfelt, jipmoors, jorbin, netweb, ocean90, pento, tjnowell, and youknowriad for testing, feedback, discussion, encouragement, commiserations, etc.
I make no apologies for this commit message.
Fixes #43055.
Built from https://develop.svn.wordpress.org/trunk@43309
git-svn-id: http://core.svn.wordpress.org/trunk@43138 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2629 lines
47 KiB
CSS
2629 lines
47 KiB
CSS
/**
|
|
* 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;
|
|
right: 30px;
|
|
left: 30px;
|
|
bottom: 30px;
|
|
z-index: 160000;
|
|
}
|
|
|
|
.wp-customizer .media-modal {
|
|
z-index: 560000;
|
|
}
|
|
|
|
.media-modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 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;
|
|
left: 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;
|
|
right: 0;
|
|
left: 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-left: 2%;
|
|
width: 42%;
|
|
width: calc(48% - 12px);
|
|
}
|
|
|
|
.media-modal-content .media-toolbar-primary .media-button {
|
|
float: left;
|
|
}
|
|
|
|
.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;
|
|
right: 0;
|
|
left: 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: left;
|
|
height: 100%;
|
|
}
|
|
|
|
.media-toolbar-secondary {
|
|
float: right;
|
|
height: 100%;
|
|
}
|
|
|
|
.media-toolbar-primary > .media-button,
|
|
.media-toolbar-primary > .media-button-group {
|
|
margin-right: 10px;
|
|
float: right;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.media-toolbar-secondary > .media-button,
|
|
.media-toolbar-secondary > .media-button-group {
|
|
margin-left: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/**
|
|
* Sidebar
|
|
*/
|
|
.media-sidebar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 267px;
|
|
padding: 0 16px 24px;
|
|
z-index: 75;
|
|
background: #f3f3f3;
|
|
border-right: 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: right;
|
|
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-left: 4%;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
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: right;
|
|
min-height: 22px;
|
|
padding-top: 8px;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
color: #666;
|
|
}
|
|
|
|
.compat-item label span {
|
|
text-align: left;
|
|
}
|
|
|
|
.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: left;
|
|
}
|
|
|
|
.media-sidebar .setting .value,
|
|
.attachment-details .setting .value {
|
|
margin: 0 1px;
|
|
text-align: right;
|
|
}
|
|
|
|
.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: right;
|
|
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-left: 4%;
|
|
float: right;
|
|
text-align: left;
|
|
}
|
|
|
|
.compat-item .label span {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.compat-item .field {
|
|
float: left;
|
|
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;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
background: #f3f3f3;
|
|
border-left-width: 1px;
|
|
border-left-style: solid;
|
|
border-left-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: right;
|
|
padding: 8px 10px 9px;
|
|
margin: 0;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.media-router > a:last-child {
|
|
border-left: 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;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.media-frame-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 200px;
|
|
z-index: 150;
|
|
}
|
|
|
|
.media-frame-title {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 200px;
|
|
left: 0;
|
|
height: 50px;
|
|
z-index: 200;
|
|
}
|
|
|
|
.media-frame-router {
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 200px;
|
|
left: 0;
|
|
height: 36px;
|
|
z-index: 200;
|
|
}
|
|
|
|
.media-frame-content {
|
|
position: absolute;
|
|
top: 84px;
|
|
right: 200px;
|
|
left: 0;
|
|
bottom: 61px;
|
|
height: auto;
|
|
width: auto;
|
|
margin: 0;
|
|
overflow: auto;
|
|
background: #fff;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
.media-frame-toolbar {
|
|
position: absolute;
|
|
right: 200px;
|
|
left: 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 {
|
|
right: 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: left;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.media-frame-content .crop-content {
|
|
height: 100%;
|
|
}
|
|
|
|
.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
|
|
margin-left: 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%;
|
|
right: 50%;
|
|
margin-right: -150px;
|
|
margin-left: -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-left: 2%;
|
|
max-width: 42%;
|
|
max-width: calc(48% - 12px);
|
|
}
|
|
|
|
.media-frame select.attachment-filters:last-of-type {
|
|
margin-left: 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: right;
|
|
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;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 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;
|
|
right: 0;
|
|
left: 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;
|
|
right: 0;
|
|
}
|
|
|
|
.wp-core-ui .attachment .thumbnail .centered {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 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;
|
|
right: 0;
|
|
left: 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;
|
|
left: 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;
|
|
left: 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 {
|
|
left: 300px;
|
|
height: 50px;
|
|
}
|
|
|
|
.attachments-browser.hide-sidebar .media-toolbar {
|
|
left: 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;
|
|
right: 0;
|
|
left: 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;
|
|
left: 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 {
|
|
left: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.attachments-browser .instructions {
|
|
display: inline-block;
|
|
margin-top: 16px;
|
|
line-height: 18px;
|
|
font-size: 13px;
|
|
color: #666;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.attachments-browser .no-media {
|
|
padding: 2em 2em 0 0;
|
|
}
|
|
|
|
/**
|
|
* 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%;
|
|
right: 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;
|
|
left: -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-right: 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;
|
|
right: 0;
|
|
left: 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;
|
|
right: 10px;
|
|
left: 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%;
|
|
right: 0;
|
|
left: 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%;
|
|
right: 0;
|
|
left: 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;
|
|
right: 0;
|
|
left: 350px;
|
|
height: 60px;
|
|
padding: 0 16px 0 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.media-selection .selection-info {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
height: 60px;
|
|
margin-left: 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: right;
|
|
padding: 1px 8px;
|
|
margin: 1px -8px 1px 8px;
|
|
line-height: 16px;
|
|
border-left: 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-left: 0;
|
|
margin-left: 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;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 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;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 25px;
|
|
background-image: linear-gradient(to right, 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: left;
|
|
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: left;
|
|
text-transform: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.attachment-details .settings-save-status .spinner {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.attachment-details .settings-save-status .saved {
|
|
float: left;
|
|
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: right;
|
|
max-width: 120px;
|
|
max-height: 120px;
|
|
margin-top: 5px;
|
|
margin-left: 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;
|
|
right: 0;
|
|
left: 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: right;
|
|
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: right;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.attachment-display-settings h4 {
|
|
margin: 1.4em 0 0.4em;
|
|
}
|
|
|
|
.collection-settings {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.collection-settings .setting input[type="checkbox"] {
|
|
float: right;
|
|
margin-left: 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;
|
|
left: 282px;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.media-modal .imgedit-wrap .imgedit-settings {
|
|
background: #f3f3f3;
|
|
border-right: 1px solid #ddd;
|
|
padding: 20px 16px 16px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 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 0 0 8px;
|
|
}
|
|
|
|
.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;
|
|
left: 26px;
|
|
}
|
|
|
|
.media-frame .embed-loading .embed-url .spinner {
|
|
visibility: visible;
|
|
}
|
|
|
|
.embed-link-settings,
|
|
.embed-media-settings {
|
|
position: absolute;
|
|
top: 70px;
|
|
right: 0;
|
|
left: 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 {
|
|
right: 140px;
|
|
left: 140px;
|
|
}
|
|
|
|
.image-details .media-frame-title,
|
|
.image-details .media-frame-content,
|
|
.image-details .media-frame-router {
|
|
right: 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-left: 1px solid #ddd;
|
|
min-height: 100%;
|
|
width: 55%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 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;
|
|
right: 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: right;
|
|
}
|
|
|
|
.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: right;
|
|
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: right;
|
|
}
|
|
|
|
.media-embed .thumbnail img {
|
|
max-height: 200px;
|
|
display: block;
|
|
}
|
|
|
|
.media-embed .thumbnail:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 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: right;
|
|
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-right: 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: right;
|
|
width: 25%;
|
|
text-align: left;
|
|
margin: 8px 1% 0 1%;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.media-embed .setting .button-group {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.media-embed-sidebar {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 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;
|
|
right: 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;
|
|
right: 10px;
|
|
left: 10px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.wp-editor-wrap .uploader-editor .uploader-editor-title {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
left: 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: right;
|
|
}
|
|
|
|
/**
|
|
* 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 {
|
|
right: 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;
|
|
right: -300px;
|
|
left: auto;
|
|
bottom: auto;
|
|
padding: 5px 0;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.media-frame:not(.hide-menu) .media-menu.visible {
|
|
right: 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 {
|
|
right: 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: right;
|
|
cursor: pointer;
|
|
}
|
|
/* End drop-down menu */
|
|
|
|
.media-sidebar {
|
|
width: 230px;
|
|
}
|
|
|
|
.attachments-browser .attachments,
|
|
.attachments-browser .uploader-inline,
|
|
.attachments-browser .media-toolbar {
|
|
left: 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%;
|
|
right: 70%;
|
|
}
|
|
|
|
.image-details .column-settings {
|
|
width: 70%;
|
|
}
|
|
|
|
.image-details .media-modal {
|
|
right: 30px;
|
|
left: 30px;
|
|
}
|
|
|
|
.image-details .embed-media-settings .setting {
|
|
margin: 20px;
|
|
}
|
|
|
|
.image-details .embed-media-settings .setting span {
|
|
float: none;
|
|
text-align: right;
|
|
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-right: 0;
|
|
}
|
|
|
|
.image-details .embed-media-settings .custom-size {
|
|
margin-right: 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: left;
|
|
}
|
|
|
|
.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;
|
|
right: 0;
|
|
left: 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 {
|
|
left: 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;
|
|
right: 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%;
|
|
}
|