WordPress/wp-includes/css/media-views-rtl.css
Andrew Ozz 56ede0bad7 Edit Image modal:
- Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal.
- Switch to using <select> for the Size and Link To.
- Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…).
- On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields.
- Keep image at top on screen sizes where the two columns are stacked into a single column.
- Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism.
Props gcorne, see #27366
Built from https://develop.svn.wordpress.org/trunk@27898


git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-02 01:54:15 +00:00

2304 lines
38 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,
.image-details 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 .imgedit-wrap {
position: static;
}
.media-frame .imgedit-wait {
height: auto !important;
left: 0;
bottom: 0;
right: 0;
}
.media-frame .imgedit-wrap .imgedit-panel-content {
padding: 16px;
position: absolute;
top: 0;
left: 282px;
bottom: 0;
right: 0;
overflow: auto;
}
.media-frame .imgedit-wrap .imgedit-settings {
background: #f3f3f3;
border-right: 1px solid #ddd;
padding: 0 16px 16px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 250px;
overflow: auto;
}
.media-frame .imgedit-group {
background: none;
border: none;
border-bottom: 1px solid #ddd;
-webkit-box-shadow: none;
box-shadow: none;
margin: 0;
margin-bottom: 16px;
padding: 0;
padding-bottom: 16px;
}
.media-frame .imgedit-group:last-of-type {
border: none;
margin: 0;
padding: 0;
}
.media-frame .imgedit-group-top h3 {
text-transform: uppercase;
font-size: 12px;
color: #666;
margin: 0;
margin-top: 24px;
}
.media-frame .imgedit-group-top h3 a {
text-decoration: none;
color: #666;
}
.media-frame .imgedit-help-toggle {
margin-top: -2px;
cursor: pointer;
color: #666;
}
.media-frame .imgedit-help-toggled span.dashicons:before {
content: '\f142';
}
.media-frame .imgedit-group img {
margin-top: 5px;
}
.media-frame .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;
-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;
padding: 0;
}
.image-details .column-settings {
background: #f3f3f3;
border-left: 1px solid #ddd;
min-height: 100%;
width: 52%;
position: absolute;
top: 0;
right: 0;
}
.image-details .column-settings h3 {
margin: 20px;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.image-details .column-image {
width: 48%;
position: absolute;
right: 52%;
top: 0;
}
.image-details .image {
margin: 20px;
}
.image-details .image img {
max-width: 100%;
max-height: 500px;
}
.image-details .advanced-toggle {
font-style: italic;
color: #666;
text-decoration: none;
margin: 20px;
display: block;
}
.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';
margin-top: 0;
}
.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 .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 {
margin-right: 27%;
width: 70%;
}
.image-details .embed-media-settings .link-target {
margin-top: 24px;
}
.media-embed .setting input.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,
.link-settings {
margin-top: 10px;
}
/* Drag & drop on the editor upload */
#wp-fullscreen-body .uploader-editor,
.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-fullscreen-body .uploader-editor {
background: rgba( 0, 86, 132, 0.9 );
position: fixed;
z-index: 100050; /* above the editor toolbar */
}
.wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
opacity: 0;
}
#wp-fullscreen-body .uploader-editor-content,
.wp-editor-wrap .uploader-editor-content {
border: 1px dashed #fff;
position: absolute;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
}
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
.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;
margin: 0;
display: none;
}
.wp-editor-wrap .uploader-editor.droppable {
background: rgba( 0, 86, 132, 0.9 );
}
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
.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;
}
.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 .link-target {
width: 100%;
}
.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 {
position: relative;
padding: 10px 0 20px 0;
right: 0;
width: 100%;
min-height: inherit;
}
/* 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);
}
}