WordPress/wp-includes/css/media-views.css
Daryl Koopersmith c217397faa Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:

	new wp.media.controller.Workflow().render().modal.open();


The Javascript is broken up into two files, with the slugs media-models and media-views.

* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.

* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...

To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':

	wp_enqueue_script( 'media-views' );
	wp_enqueue_style( 'media-views' );
	wp_plupload_default_settings();
	add_action( 'admin_footer', 'wp_print_media_templates' );

see #21390.



git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 04:54:23 +00:00

278 lines
4.0 KiB
CSS

/**
* Modal
*/
.media-modal {
position: fixed;
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
background: #fff;
z-index: 125000;
}
.media-modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.8;
z-index: 120000;
}
.media-modal-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 28px;
background: #f1f1f1;
}
.media-modal-header h3 {
float: left;
padding: 0 0 0 10px;
margin: 0;
line-height: 28px;
}
.media-modal-close {
float: right;
padding-right: 10px;
line-height: 28px;
}
.media-modal-content {
position: absolute;
top: 28px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
/**
* Workspace
*/
.media-workspace {
position: relative;
width: 100%;
height: 100%;
}
.upload-attachments {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 180px;
margin: 10px;
text-align: center;
border: 3px dashed #dfdfdf;
background: #fff;
z-index: 100;
}
.upload-attachments h3 {
font-size: 18px;
font-weight: 200;
color: #777;
padding: 40px 0 0;
margin: 0;
}
.upload-attachments span {
display: block;
color: #777;
margin: 10px 0;
}
.upload-attachments a {
display: inline-block;
margin: 0 auto;
}
.drag-over .upload-attachments {
width: auto;
right: 0;
border-color: #83B4D8;
}
.existing-attachments {
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
}
/**
* Attachments
*/
.attachments {
width: 100%;
height: 100%;
}
.attachments-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: #fff;
}
.attachments-header h3 {
float: left;
margin: 0;
padding: 0 0 0 10px;
line-height: 50px;
font-size: 18px;
font-weight: 200;
}
.attachments-header input {
float: right;
margin-top: 10px;
margin-right: 10px;
}
.attachments ul {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
margin: 0 10px 20px;
}
/**
* Attachment
*/
.attachment {
position: relative;
float: left;
width: 200px;
height: 200px;
padding: 0;
margin: 0 10px 20px;
border: 1px solid #dfdfdf;
}
.attachment:hover {
border-color: #d54e21;
}
.attachment.selected {
border-color: #21759b;
}
.attachment-thumbnail {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.attachment img {
display: block;
max-height: 200px;
max-width: 200px;
/* Vertically center the thumbnails. */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate( -50%, -50% );
-moz-transform: translate( -50%, -50% );
-ms-transform: translate( -50%, -50% );
-o-transform: translate( -50%, -50% );
transform: translate( -50%, -50% );
margin: 0 auto;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.4 );
}
/* Square crop with overflow visible on hover. */
/*
.attachment .portrait img {
width: 200px;
}
.attachment .landscape img {
height: 200px;
}
.attachment .attachment-thumbnail:hover {
overflow: visible;
z-index: 1000;
}
.attachment .attachment-thumbnail:hover img {
border: 10px solid #fff;
box-shadow: 0 0 10px rgba( 0, 0, 0, 0.4 );
}*/
/* Square crop with resized image on hover. */
/*
.attachment .portrait img {
width: 200px;
}
.attachment .landscape img {
height: 200px;
}
.attachment .attachment-thumbnail:hover img {
height: auto;
width: auto;
max-height: 200px;
max-width: 200px;
}*/
/**
* Progress Bar
*/
.media-progress-bar {
position: relative;
height: 8px;
width: 70%;
margin: 10px auto;
padding: 2px;
border: 2px solid #dfdfdf;
border-radius: 8px;
}
.media-progress-bar div {
height: 8px;
min-width: 8px;
width: 0;
background: #dfdfdf;
border-radius: 10px;
-webkit-transition: width 200ms;
-moz-transition: width 200ms;
-ms-transition: width 200ms;
-o-transition: width 200ms;
transition: width 200ms;
}
.attachment-thumbnail .media-progress-bar {
position: absolute;
top: 50%;
left: 15%;
width: 70%;
margin: -8px 0 0 -4px;
}
.upload-attachments .media-progress-bar {
margin-top: 80px;
display: none;
}
.uploading .upload-attachments .media-progress-bar {
display: block;
}