WordPress/wp-includes/css/media-views-rtl.css
Andrew Ozz 60435c4143 Edit Image modal:
- Bring back some of the advanced settings.
- Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit.
- The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview."
- Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited.
(updates two PNGs from precommit)
Props gcorne, see #27366
Built from https://develop.svn.wordpress.org/trunk@27797


git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 22:41:14 +00:00

2146 lines
35 KiB
CSS

/**
* Base Styles
*/
.media-modal * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.media-modal,
.media-frame {
font-family: "Open Sans", sans-serif;
font-size: 12px;
}
.media-frame input,
.media-frame textarea {
padding: 6px 8px;
line-height: 16px;
}
.media-frame select,
.wp-admin .media-frame select {
line-height: 28px;
margin-top: 3px;
}
.media-frame a {
border-bottom: none;
color: #21759b;
}
.media-frame a:hover {
color: #d54e21;
}
.media-frame a.button {
color: #333;
}
.media-frame a.button:hover {
color: #222;
}
.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: "Open Sans", sans-serif;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: #dfdfdf;
}
.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 :-moz-placeholder {
color: #a9a9a9;
}
.media-frame .hidden {
display: none;
}
/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
.ui-sortable,
.ui-draggable {
-ms-touch-action: none;
touch-action: none;
}
.meta-box-sortables.ui-sortable {
-ms-touch-action: auto;
touch-action: auto;
}
.meta-box-sortables.ui-sortable .hndle {
-ms-touch-action: none;
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;
text-decoration: none;
top: 5px;
left: 10px;
width: 30px;
height: 30px;
z-index: 1000;
}
.media-modal-close span.media-modal-icon {
display: block;
margin: 8px auto 0;
width: 15px;
height: 15px;
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;
color: #666;
}
.media-modal-close:hover .media-modal-icon:before {
color: #2ea2cc;
}
.media-modal-close:active {
outline: 0;
}
.media-modal-content {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
min-height: 300px;
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
box-shadow: 0 5px 15px rgba(0,0,0,0.7);
background: #fcfcfc;
-webkit-font-smoothing: subpixel-antialiased;
}
.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 #dfdfdf;
overflow: hidden;
}
.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;
float: right;
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 {
position: relative;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: #666;
margin: 24px 0 8px;
}
.media-sidebar .setting {
display: block;
float: right;
width: 100%;
margin: 1px 0;
}
.media-sidebar .setting label {
display: block;
}
.media-sidebar .setting .link-to-custom {
margin: 3px 0;
}
.media-sidebar .setting span {
min-width: 30%;
margin-left: 4%;
font-size: 12px;
}
.media-sidebar .setting select {
max-width: 65%;
}
.media-sidebar .setting input[type="checkbox"],
.media-sidebar .field input[type="checkbox"] {
width: 16px;
float: none;
margin: 8px 3px 0;
padding: 0;
}
.media-sidebar .setting span,
.compat-item label span {
float: right;
min-height: 22px;
padding-top: 8px;
line-height: 16px;
text-align: left;
font-weight: normal;
color: #666;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea {
margin: 1px;
width: 65%;
float: left;
}
.media-sidebar .setting textarea,
.compat-item .field textarea {
height: 62px;
resize: vertical;
}
.media-sidebar 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: 66%;
}
.compat-item .field input {
width: 100%;
margin: 0;
}
/**
* Menu
*/
.media-menu {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: 0;
padding: 16px 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: #0074a2;
text-decoration: none;
}
.media-menu > a:hover {
color: #21759B;
background: rgba( 0, 0, 0, 0.04 );
}
.media-menu > a:active {
outline: none;
}
.media-menu .active,
.media-menu .active:hover {
color: #222;
font-weight: bold;
}
.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 {
-webkit-transition: none;
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,
.media-router > a:focus {
outline: none;
}
.media-router .active,
.media-router .active:hover {
color: #333;
}
.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: 56px;
z-index: 200;
}
.media-frame-router {
position: absolute;
top: 56px;
right: 200px;
left: 0;
height: 36px;
z-index: 200;
}
.media-frame-content {
position: absolute;
top: 90px;
right: 200px;
left: 0;
bottom: 61px;
height: auto;
width: auto;
margin: 0;
overflow: auto;
background: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.media-frame-toolbar {
position: absolute;
right: 200px;
left: 0;
bottom: 0;
height: 60px;
z-index: 100;
}
.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-menu .media-frame-menu {
right: -200px;
}
.media-frame.hide-toolbar .media-frame-content {
bottom: 0;
}
.media-frame.hide-toolbar .media-frame-toolbar {
bottom: -61px;
}
.media-frame.hide-router .media-frame-content {
top: 56px;
}
.media-frame.hide-router .media-frame-router {
display: none;
}
.media-frame.hide-router .media-frame-title {
border-bottom: 1px solid #dfdfdf;
-webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
}
.media-frame-title h1 {
padding: 0 16px;
font-size: 22px;
line-height: 60px;
margin: 0;
}
.media-frame-title .suggested-dimensions {
font-size: 14px;
float: left;
margin-left: 20px;
}
.media-frame-content .crop-content {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
/**
* 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: 10px;
}
/**
* Search
*/
.media-frame .search {
margin-top: 11px;
padding: 4px;
line-height: 18px;
font-size: 13px;
color: #464646;
font-family: "Open Sans", sans-serif;
-webkit-appearance: none;
}
.media-toolbar-secondary .search {
margin-left: 16px;
}
/**
* Attachments
*/
.attachments {
margin: 0;
padding-left: 16px;
-webkit-overflow-scrolling: touch;
}
/**
* Attachment
*/
.attachment {
position: relative;
float: right;
padding: 0;
margin: 0 10px 20px;
color: #464646;
list-style: none;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.selected.attachment {
-webkit-box-shadow:
0 0 0 1px #fff,
0 0 0 3px #ccc;
box-shadow:
0 0 0 1px #fff,
0 0 0 3px #ccc;
}
.attachment-preview {
position: relative;
width: 199px;
height: 199px;
-webkit-box-shadow:
inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
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;
}
.attachment .icon {
margin: 0 auto;
overflow: hidden;
padding-top: 20%;
}
.attachment .thumbnail {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0 auto;
overflow: hidden;
max-width: 100%;
max-height: 100%;
}
.attachment-preview .thumbnail:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
overflow: hidden;
}
/* @noflip */
.attachment .thumbnail img {
top: 0;
left: 0;
}
/* @noflip */
.attachment .thumbnail .centered {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate( 50%, 50% );
-ms-transform: translate( 50%, 50% );
transform: translate( 50%, 50% );
}
.attachment .thumbnail .centered img {
-webkit-transform: translate( -50%, -50% );
-ms-transform: translate( -50%, -50% );
transform: translate( -50%, -50% );
}
.attachment .filename {
position: absolute;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
max-height: 100%;
word-wrap: break-word;
text-align: center;
font-weight: bold;
background: rgba( 255, 255, 255, 0.8 );
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
}
.attachment .filename div {
padding: 5px 10px;
}
.attachment-preview .thumbnail {
width: 199px;
height: 199px;
}
.attachment .thumbnail img {
position: absolute;
}
.attachment .close {
display: none;
position: absolute;
top: 5px;
left: 5px;
height: 22px;
width: 22px;
padding: 0;
font-size: 20px;
line-height: 20px;
text-align: center;
text-decoration: none;
color: #464646;
background-color: #fff;
background-position: -96px 4px;
border-width: 0;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
}
.attachment .close:hover {
-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
}
.attachment:hover .close {
display: block;
}
.attachment .check {
display: none;
height: 24px;
width: 24px;
position: absolute;
top: -6px;
left: -6px;
outline: none;
background: #eee;
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
}
.attachment .check div {
background-position: -1px 0;
height: 15px;
width: 15px;
margin: 5px;
}
.attachment .check:hover div {
background-position: -40px 0;
}
.attachment.selected .check {
display: block;
}
.attachment.details {
-webkit-box-shadow: 0 0 0 1px #fff,
0 0 0 5px #1e8cbe;
box-shadow: 0 0 0 1px #fff,
0 0 0 5px #1e8cbe;
}
.attachment.details .check {
background-color: #1e8cbe;
-webkit-box-shadow: 0 0 0 1px #fff,
0 0 0 2px #1e8cbe;
box-shadow: 0 0 0 1px #fff,
0 0 0 2px #1e8cbe;
}
.attachment.details .check div {
background-position: -21px 0;
}
.attachment.details .check:hover div {
background-position: -60px 0;
}
.media-frame .attachment .describe {
position: relative;
display: block;
width: 100%;
margin: -1px 0 0;
padding: 8px;
font-size: 12px;
-webkit-border-radius: 0;
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 .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-top: 10px;
}
.attachments-browser .attachments,
.attachments-browser .uploader-inline {
position: absolute;
top: 50px;
right: 0;
left: 300px;
bottom: 0;
overflow: auto;
}
.attachments-browser .instructions {
display: inline-block;
margin-top: 16px;
line-height: 18px;
font-size: 13px;
color: #666;
}
/**
* Progress Bar
*/
.media-progress-bar {
position: relative;
height: 10px;
width: 70%;
margin: 10px auto;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #dfdfdf;
background: rgba( 0, 0, 0, 0.1 );
}
.media-progress-bar div {
height: 10px;
min-width: 20px;
width: 0;
background: #1e8cbe;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: width 300ms;
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;
}
.media-sidebar .media-uploader-status {
border-bottom: 1px solid #dfdfdf;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
}
.uploader-inline .media-uploader-status h3 {
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: #464646;
}
.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: 0;
left: 0;
}
.upload-errors .upload-error {
margin: 8px auto 0 auto;
padding: 8px;
border: 1px #c00 solid;
background: #ffebe8;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.upload-errors .upload-error-label {
padding: 2px 4px;
margin-left: 8px;
font-weight: bold;
color: #fff;
background: #e00;
background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00));
background-image: -webkit-linear-gradient(top, #e00, #a00);
background-image: linear-gradient(to bottom, #e00, #a00);
-webkit-border-radius: 3px;
border-radius: 3px;
}
.upload-errors .upload-error-message {
display: block;
padding-top: 8px;
color: #b44;
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;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
.uploader-window-content {
position: absolute;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
border: 1px dashed #fff;
}
.uploader-window h3 {
margin: -0.5em 0 0;
position: absolute;
top: 50%;
right: 0;
left: 0;
-webkit-transform: translateY( -50% );
-ms-transform: translateY( -50% );
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: 20px;
padding: 20px;
text-align: center;
}
.uploader-inline-content {
position: absolute;
top: 30%;
right: 0;
left: 0;
}
.uploader-inline-content .upload-ui {
margin: 4em 0;
}
.uploader-inline-content .post-upload-ui {
margin-bottom: 2em;
}
.uploader-inline .has-upload-message .upload-ui {
margin: 0 0 4em;
}
.uploader-inline h3 {
font-size: 20px;
line-height: 28px;
font-weight: 400;
margin-bottom: 1.6em;
}
.uploader-inline .has-upload-message .upload-instructions {
font-size: 14px;
color: #464646;
font-weight: normal;
}
.uploader-inline .drop-instructions {
display: none;
}
.supports-drag-drop .uploader-inline .drop-instructions {
display: block;
}
.uploader-inline p {
font-size: 12px;
}
.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: bold;
}
.media-selection .selection-info a {
display: block;
float: right;
padding: 1px 8px;
margin: 1px -8px 1px 8px;
line-height: 16px;
text-decoration: none;
border-left: 1px solid #dfdfdf;
color: #21759B;
}
.media-selection .selection-info a:hover {
background: #21759B;
color: #fff;
border-color: transparent;
}
.media-selection .selection-info a:last-child {
border-left: 0;
margin-left: 0;
}
.media-selection .selection-info .clear-selection {
color: red;
}
.media-selection .selection-info .clear-selection:hover {
background: red;
}
.media-selection .selection-view {
display: inline-block;
vertical-align: top;
}
.media-selection .attachments {
display: inline-block;
height: 48px;
margin-top: 5px;
overflow: hidden;
vertical-align: top;
}
.media-selection .attachment .icon {
width: 50%;
}
.attachment.selection.selected {
-webkit-box-shadow: none;
box-shadow: none;
}
.attachment.selection.details {
-webkit-box-shadow:
0 0 0 1px #fff,
0 0 0 4px #1e8cbe;
box-shadow:
0 0 0 1px #fff,
0 0 0 4px #1e8cbe;
}
.media-selection .attachment.selection.details {
-webkit-box-shadow:
0 0 0 1px #fff,
0 0 0 3px #1e8cbe;
box-shadow:
0 0 0 1px #fff,
0 0 0 3px #1e8cbe;
}
.media-selection:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 25px;
background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
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;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
display: none;
opacity: 0.7;
filter: alpha(opacity=70);
width: 20px;
height: 20px;
margin: 0;
}
.media-toolbar .spinner {
margin-top: 14px;
}
.media-sidebar .settings-save-status {
background: #f5f5f5;
float: left;
text-transform: none;
z-index: 10;
}
.media-sidebar .settings-save-status .spinner {
margin: 0 5px 0;
}
.media-sidebar .settings-save-status .saved {
float: left;
display: none;
}
.media-sidebar .save-waiting .settings-save-status .spinner,
.media-sidebar .save-complete .settings-save-status .saved {
display: block;
}
/**
* Attachment Details
*/
.attachment-details {
position: relative;
overflow: auto;
}
.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: bold;
color: #464646;
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;
-webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
}
.uploading .attachment-info .media-progress-bar {
margin-top: 35px;
}
.attachment-info .thumbnail:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
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 .refresh-attachment,
.attachment-info .delete-attachment,
.attachment-info .trash-attachment {
display: block;
text-decoration: none;
white-space: nowrap;
}
.attachment-info .refresh-attachment,
.attachment-details.needs-refresh .attachment-info .edit-attachment {
display: none;
}
.attachment-details.needs-refresh .attachment-info .refresh-attachment,
.attachment-info .edit-attachment {
display: block;
}
.attachment-info .delete-attachment,
.attachment-info .trash-attachment {
color: #bc0b0b;
}
.attachment-info .delete-attachment:hover,
.attachment-info .trash-attachment:hover {
color: red;
}
/**
* 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-frame .image-editor {
padding: 16px;
}
.media-frame .imgedit-wrap table {
width: 100%;
}
.media-frame .imgedit-wrap table td {
vertical-align: top;
padding-top: 0;
}
.media-frame .imgedit-wrap table td.imgedit-settings {
width: 250px;
}
/**
* 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;
-webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
}
.media-frame .embed-url .spinner {
position: absolute;
top: 16px;
left: 26px;
}
.media-frame .embed-loading .embed-url .spinner {
display: block;
}
.embed-link-settings,
.embed-media-settings {
position: absolute;
top: 60px;
right: 0;
left: 0;
bottom: 0;
padding: 16px 16px 32px;
overflow: auto;
}
.image-details .media-modal {
right: 140px;
left: 140px;
}
.image-details .media-frame-menu {
display: none;
}
.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;
}
.image-details .column-settings {
width: 44%;
float: right;
margin-left: 20px;
}
.image-details .column-image {
width: 53%;
float: right;
}
.image-details .column-image:after {
content: '';
display: table;
clear: both;
}
.image-details .image img {
max-width: 100%;
max-height: 500px;
}
.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;
-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
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 .setting {
float: none;
}
.image-details .actions {
margin: 10px 0;
}
.media-embed .setting input[type="text"],
.media-embed .setting textarea {
display: block;
width: 100%;
max-width: 400px;
margin: 1px 0;
}
.image-details .setting input[type="text"],
.image-details .setting textarea {
max-width: inherit;
}
.media-embed .setting input.hidden {
display: none;
}
.media-embed .setting span {
display: block;
width: 200px;
font-size: 13px;
line-height: 24px;
color: #666;
}
.media-embed .setting .button-group {
margin: 2px 0;
}
.media-embed-sidebar {
position: absolute;
top: 0;
right: 440px;
}
.advanced,
.link-settings {
margin-top: 10px;
}
.advanced .hidden {
display: none;
}
/* 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.wp-fullscreen-wrap .uploader-editor {
background: rgba( 0, 86, 132, 0.9 );
position: fixed;
z-index: 100050; /* above the editor toolbar */
}
.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;
-webkit-transform: translateY( -50% );
-ms-transform: translateY( -50% );
transform: translateY( -50% );
font-size: 3em;
line-height: 1.3;
font-weight: bold;
color: #fff;
padding: 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,
.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 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;
}
@media only screen and (max-width: 960px) {
.media-frame-content .media-toolbar-primary .search,
.media-frame-content .media-toolbar-secondary .attachment-filters {
max-width: 120px;
}
}
/**
* Responsive layout
*/
@media only screen and (max-width: 900px) {
.media-frame-menu {
width: 139px;
}
.media-menu > a {
padding: 4px 5px;
}
.media-frame-title,
.media-frame-router,
.media-frame-content,
.media-frame-toolbar {
right: 140px;
}
.media-sidebar {
width: 159px;
padding: 0 10px 24px;
}
.attachments-browser .attachments,
.attachments-browser .uploader-inline,
.attachments-browser .media-toolbar {
left: 180px;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea,
.media-sidebar .setting span,
.compat-item label span {
float: none;
}
.media-sidebar .setting span,
.compat-item label span {
text-align: inherit;
display: block;
min-height: 16px;
margin: 0;
padding: 8px 2px 0;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea,
.media-sidebar .setting select {
width: 98%;
max-width: none;
}
.media-sidebar .setting select.columns {
width: auto;
}
.media-frame input,
.media-frame textarea,
.media-frame .search {
padding: 3px 6px;
}
.media-frame-content .attachment .icon {
top: 40%;
}
.image-details .media-modal {
right: 30px;
left: 30px;
}
.media-selection {
min-width: 120px;
}
.media-selection:after {
background: none;
}
.media-selection .attachments {
display: none;
}
.media-menu .separator {
margin: 12px 10px;
}
.media-modal-close {
left: 10px;
}
/* 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) {
/* Media tabs on the top */
.media-frame-content .media-toolbar .instructions {
display: none;
}
.media-frame-menu {
width: auto;
bottom: auto;
left: 0;
height: 60px;
}
.media-menu {
border-left: none;
position: relative;
border-bottom: 1px solid #dddddd;
overflow: hidden;
padding: 10px 10px 10px 0;
}
.media-menu a {
float: right;
width: 42%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.media-frame-title {
display: none;
}
.image-details .media-frame-title {
display: block;
top: 0;
font-size: 14px;
}
.media-frame-toolbar {
position: absolute;
bottom: 0px;
right: 0;
left: 0;
background: #FFF;
border-top: 1px solid #DEDEDE;
}
.media-toolbar {
position: relative;
}
.media-frame {
overflow: hidden;
}
.attachments-browser .attachments {
top: 42px;
}
.attachment-details h3 {
margin-top: 45px;
}
/* Shorten right-side links so they don't overlap the close button */
.media-menu a:nth-child(2),
.media-menu a:last-child {
width: 40%;
}
.media-menu .separator {
display: none;
}
.media-frame-title {
top: 72px;
right: auto;
height: auto;
}
.media-frame-title h1 {
line-height: 3;
font-size: 18px;
}
.media-frame-router {
top: 84px;
right: 0;
}
.media-frame-content {
right: 0;
top: 118px;
}
.image-details .media-frame.hide-router .media-frame-content {
top: 40px;
}
.media-frame .attachments-browser {
padding-bottom: 300px;
}
.media-sidebar {
border-bottom: 1px solid #dddddd;
}
.media-modal {
width: auto;
}
.media-toolbar-primary, .media-toolbar-secondary {
height: auto;
}
.uploader-inline h3 {
margin: 0 0 .8em 0;
}
.uploader-inline-content {
top: auto;
}
.uploader-inline-content .upload-ui {
margin: 0;
}
.attachments-browser .attachments, .attachments-browser .uploader-inline {
position: relative;
margin-left: 180px;
}
/* Full-bleed modal */
.media-modal,
.image-details .media-modal {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.media-modal-backdrop {
position: fixed;
}
.attachments-browser .attachment,
.attachments-browser .attachment-preview {
max-width: 100%;
}
.attachments-browser .media-toolbar-primary input.search {
max-width: 150px;
}
.uploader-inline-content {
position: relative;
}
.media-sidebar .setting input[type="checkbox"],
.media-sidebar .field input[type="checkbox"] {
width: 25px;
}
/* Image From Link */
.embed-link-settings,
.embed-media-settings {
padding-bottom: 52px;
}
.image-details .column-settings,
.image-details .column-image {
float: none;
width: 100%;
}
/* Gallery */
.media-frame.hide-router .media-frame-content {
top: 73px;
border-top: none;
}
.collection-settings h3 {
margin-top: 45px;
}
}
/* Landscape specific header override */
@media screen and (max-height: 400px) {
.media-menu {
padding: 0 10px 0 0;
}
.media-menu a {
float: right;
width: 21%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 10px inherit;
}
.media-menu a:nth-child(2),
.media-menu a:last-child {
width: 21%;
}
.media-modal-close {
top: 2px;
}
.media-frame-router {
top: 44px;
}
.media-frame-content {
top: 78px;
}
.attachments-browser .attachments {
top: 2px;
}
/* Prevent unnecessary scrolling on title input */
.embed-link-settings {
overflow: visible;
}
}
@media only screen and (max-width: 680px) {
.media-frame-content .media-toolbar .search,
.media-frame-content .media-toolbar .attachment-filters {
max-width: 85px;
}
}
/**
* HiDPI Displays
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.media-modal-icon {
background-image: url(../images/uploader-icons-2x.png);
-webkit-background-size: 134px 15px;
background-size: 134px 15px;
}
.media-frame .spinner {
background-image: url(../images/spinner-2x.gif);
}
}