diff --git a/css/media.css b/css/media.css index acd1ebf..7f976ec 100644 --- a/css/media.css +++ b/css/media.css @@ -1,367 +1,147 @@ -/* @override http://dev7/sites/all/modules/media/css/media.css?L */ - - /** * @file * Styles for the media library. */ -/* @group media item list */ +/* jQuery UI */ -.item-list .media-display-switch { - float: right; - line-height: 0; -} -.item-list .media-display-switch li { - float: left; - list-style: none; - margin-left: -1px; +.ui-dialog.media-wrapper .ui-dialog-content { + padding: 0; } -.item-list .media-display-switch li a { - background: #f2f1f1; - border: 1px solid; - border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d3d3d3; - display: block; - padding: 7px 9px; -} -.item-list .media-display-switch li.first a { - -moz-border-radius-topleft: 4px; - -moz-border-radius-bottomleft: 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; -} -.item-list .media-display-switch li.last a { - -moz-border-radius-topright: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; -} -.item-list .media-display-switch li a.active { - position: relative; - background: #666; - border: 1px solid #555; - color: #fff; -} - -/* Set the height to auto */ -#media_content_browser .media-thumbnail { - height: auto; - width: 120px; -} - - -/* Push content under the tabs */ -#media_content_browser_tabs { - margin-bottom: 30px; -} - -/* This is some stuff to just get some basic mockup done on the - content navigator. Should be removed/revised soon */ -.result_limit { - float: right; -} -.result_limit li { - display: inline; - list-style: none; -} - -.item-list .media_content_navigator li { - display: inline; - list-style: none; +.ui-dialog.media-wrapper .ui-dialog-buttonpane { + display: none; } -/* @end */ - -/* @group media item */ +/* Media item */ .media-item { - background: #FFF; + background: #FFFFFF; border: 1px solid #CCCCCC; - margin: 10px; - padding: 6px 6px 2px; + padding: 5px; width: 100px; } -.media-item.selected { - background: #F4ECC7; -} - -.media-item a { - display: block; -} - .media-item img { - border: 2px solid transparent; - display: inline-block; - margin-left: -2px; height: auto; width: 100%; } -.media-item img:hover { - border-color: #058AC5; -} - - -.media-item-icons img{ - height:25px; - width:25px; - float:left; -} - .media-item .label-wrapper { - overflow: hidden; - margin-left: 14px; -} - -.media-item .label-wrapper:hover { - border-bottom: 2px solid #CCC; - border-right: 2px solid #CCC; - display: inline-block; - line-height: 16px; - margin-bottom: -1px; - overflow: visible; - position: relative; - z-index: 10; -} - -.preview .media-item .label-wrapper { - margin-left: 0; -} - -.preview { - display: inline-block; - vertical-align: middle; + text-align: center; } - -.media-item .media-filename { - background: #FFF; - color: #058AC5; +.media-item .label-wrapper label { font-size: 10px; - padding: 0 3px; + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } -.media-item .label-wrapper:hover .media-filename { - border: 1px solid #888; - display: inline-block; - margin: 0 0 -2px -1px; -} - -.media-item.selected .media-filename { - background: #F4ECC7; -} - -.media-item .media-filename:hover { - text-decoration: underline; -} - -.media-modal-frame { - overflow: hidden; -} +/* Media item list */ -.view-content #media-browser-library-list { +#media-browser-library-list { margin: 0; + padding: 0; } -.media-list-thumbnails{ - overflow: hidden; - width: 100%; -} - -.media-list-thumbnails > li { +.media-list-thumbnails li { float: left; list-style: none; + margin: 0 10px 10px 0; } -.media-list-thumbnails .media-item { - margin-left: 0; - margin-top: 0; +.media-list-thumbnails li a { + text-decoration: none; } -.media-list-thumbnails .form-type-checkbox { - margin: -35px 0 0 16px; - position: absolute; -} - -.media-item .media-type-icon { - border: none; - margin: 0 0 -5px; - width: auto; +.media-list-thumbnails .media-item.selected { + background: #F4ECC7; + border-color: #058AC5; } -.ui-dialog.media-wrapper .ui-dialog-buttonpane { - display: none; +.media-list-thumbnails .media-item:hover { + border-color: #058AC5; + cursor: pointer; } -.ui-widget.ui-widget-content.media-wrapper { - background: none; - border: none; +.media-list-thumbnails .media-item .label-wrapper label { + color: #058AC5; } -/* @end */ - -/* @group media browser */ - -body.page-media-browser { - background: none; - overflow: hidden; +.media-list-thumbnails .media-item .label-wrapper label:hover { + cursor: pointer; } -div#media-browser-tabs { - -moz-border-radius: 0; - -webkit-border-radius: 0; - border-radius: 0; - border: 0; +.media-list-thumbnails .form-type-checkbox { + bottom: 135px; + left: 8px; + margin: 0; + padding: 0; + position: relative; } -/* show the throbber on the page */ -div#media-browser .throbber { - height:100%; - width:100%; - position:absolute; - background: transparent url('images/loading.gif') no-repeat center center; -} +/* Library form */ -#media-browser .ui-tabs-panel { - /** - * This sucks, I don't want to hardcode this, but don't know how else - * to keep the scrollbar INSIDE the iframe. - */ - height: 410px; +#media-tab-library #scrollbox { + height: 300px; + overflow-x: hidden; overflow-y: auto; } -#media-tab-media_internet .media-provider img { - vertical-align: middle; - margin-right: 1em; -} - -#media-browser-library-list .label-wrapper { - margin-left: 0; -} +/* Format form */ -#mediaBrowser body { - background: none; -} - -#media-browser-tabset { - background: #FFF; +#media-format-form { + margin: 20px; } -#media-browser-tabset .media-browser-tab { - border: 1px solid #aaa; +#media-format-form .media-item { + float: left; + margin-right: 10px; } -#media-browser-tabset .ui-tabs-nav { - border-left: 1px solid #aaa; - border-right: 1px solid #aaa; - border-top: 1px solid #aaa; +#media-format-form .form-item-format label { + display: inline; } -.fake-ok { - margin-right: 5px; -} +/* File field */ -a.button { +.media-widget .preview { display: inline-block; - line-height: 21px; -} - -/* @end media browser */ - -/* @group media edit page */ - -.no-overflow { - overflow: hidden; -} - -.media-image-left .field-name-file { - float: left; - margin-bottom: 2em; - margin-right: 2em; - padding-top: 12px; -} - -.media-image-left .field-name-file .field-item { - width: 180px; - word-break: break-word; -} - -.media-image-left .styles-field-file { - background-color: #FFFFFF; - border: 1px solid #CCCCCC; - padding: 2%; - width: 96%; + vertical-align: middle; } -.media-image-left .field-name-file img { - height: auto; - width: 100%; +.media-widget .preview a { + text-decoration: none; } -.media-image-left .form-actions { - clear: both; +.media-widget .preview .media-item { + margin-right: 10px; } -/* @end media edit page */ - -/* @group media format form */ - -#media-format-form { - margin:30px; +.media-widget .preview .media-item:hover { + border-color: #058AC5; + cursor: pointer; } -#media-admin #edit-options { - clear: both; - margin: 0; +.media-widget .preview .media-item .label-wrapper label { + color: #058AC5; } -.media-clear { - clear: both; +.media-widget .preview .media-item .label-wrapper label:hover { + cursor: pointer; } -#edit-options .form-item-format label { - display: inline; -} +/* Plupload */ -#media-format-form .media-item { - float: left; - margin-left: 0; - margin-top: 0; +body.page-media-format-form #media-browser-page .plupload_start { + display: none; } -#media-format-form .label-wrapper { - margin-left: 0; -} +/* Multiedit */ .media-multiedit-form .media-edit-form { - border-bottom: 1px solid #aaa; - margin-bottom:1em; - margin-top:1.5em; -} - -body.page-media-format-form { - background: none; + border-bottom: 1px solid #AAAAAA; + margin-bottom: 1em; + margin-top: 1.5em; } - -#media-browser-page { - background: #FFF; - padding: 1px 0; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; -} - -#media-browser-page .plupload_start { - display:none; -} - -a.button { - display: inline-block; - margin: 10px 5px 0 0; -} - -/* @end media format form */ diff --git a/includes/MediaBrowserLibrary.inc b/includes/MediaBrowserLibrary.inc index 2e8a2e0..30d44d7 100644 --- a/includes/MediaBrowserLibrary.inc +++ b/includes/MediaBrowserLibrary.inc @@ -25,8 +25,6 @@ class MediaBrowserLibrary extends MediaBrowserPlugin { public function view() { $path = drupal_get_path('module', 'media'); $build['#attached']['js'][] = $path . '/js/plugins/media.library.js'; - //@todo: should move this. - $build['#attached']['css'][] = $path . '/js/plugins/media.library.css'; $build['#settings']['viewMode'] = 'thumbnails'; $build['#settings']['getMediaUrl'] = url('media/browser/list'); diff --git a/js/plugins/media.library.css b/js/plugins/media.library.css deleted file mode 100644 index dbd68dc..0000000 --- a/js/plugins/media.library.css +++ /dev/null @@ -1,23 +0,0 @@ - -ul#media-browser-library-list { - list-style: none; - margin: -10px 0 0 0; - padding: 0px; - background-color: white; -} - -#media-tab-library #container{ - padding:20px 0; -} - -#media-tab-library #scrollbox{ - height: 300px; - overflow:auto; - overflow-x:hidden; -} - -#scrollbox #status { - clear: both; - text-align: center; - margin-top: 10px; -} diff --git a/media.module b/media.module index 4bcdc28..67e1d1c 100644 --- a/media.module +++ b/media.module @@ -1160,7 +1160,7 @@ function media_form_file_entity_admin_files_alter(&$form, $form_state) { else { $form['files'] = array( '#tree' => TRUE, - '#prefix' => '