mediamanager html, css reworking

4 files changed, 214 insertions, 212 deletions

diff --git a/inc/media.php b/inc/media.php
index 5e12ac8a6..141ba8c2c 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -548,6 +548,21 @@ function media_filelist($ns,$auth=null,$jump='',$fullscreenview=false){
 }
 
 /**
+ * Prints mediamanager tab
+ *
+ * @author Kate Arzamastseva <pshns@ukr.net>
+ * @param string $link
+ * @param string $class
+ * @param string $name
+ * @param string $selected
+ */
+function media_tab($link, $class, $name, $selected=false) {
+    if (!empty($selected) && $selected == $class) $class .= ' selected';
+    $tab = '<a href="'.$link.'" class="'.$class.'" >'.$name.'</a>';
+    echo $tab;
+}
+
+/**
  * Prints tabs for files list actions
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
@@ -567,21 +582,6 @@ function media_tabs_files($selected=false){
 }
 
 /**
- * Prints mediamanager tab
- *
- * @author Kate Arzamastseva <pshns@ukr.net>
- * @param string $link
- * @param string $class
- * @param string $name
- * @param string $selected
- */
-function media_tab($link, $class, $name, $selected=false) {
-    if (!empty($selected) && $selected == $class) $class .= ' selected';
-    $tab = '<a href="'.$link.'" class="'.$class.'" >'.$name.'</a>';
-    echo $tab;
-}
-
-/**
  * Prints tabs for files details actions
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
@@ -614,18 +614,23 @@ function media_tab_files_options($ns){
 
     echo '<div class="background-container">';
     echo $ns;
-    echo '<div id="mediamanager__tabs_list" style="display: inline;">';
-    echo '<a href="'.media_managerURL(array('view' => 'thumbs')).'"
-        rel=".mediamanager-files-thumbnails-tab" class="mediamanager-link-thumbnails">'.
-        $lang['media_thumbsview'].'</a>';
-    echo '<a href="'.media_managerURL(array('view' => 'list')).'"
-        rel=".mediamanager-files-list-tab" class="mediamanager-link-list"
-        title="View as list">'.$lang['media_listview'].'</a>';
+
+    echo '<div id="mediamanager__tabs_list">';
+
+    echo '<a href="'.media_managerURL(array('view' => 'thumbs')).'" id="mediamanager__link_thumbs" >';
+    echo $lang['media_thumbsview'];
+    echo '</a>';
+
+    echo '<a href="'.media_managerURL(array('view' => 'list')).'" id="mediamanager__link_list" >';
+    echo $lang['media_listview'];
+    echo '</a>';
 
     echo '</div>';
-    echo '<div class="mediamanager-block-sort">'.$lang['media_sort'];
-    //select
+
+    echo '<div id="mediamanager__sort">';
+    echo $lang['media_sort'];
     echo '</div>';
+
     echo '<div class="clearer"></div>';
     echo '</div>';
 }
@@ -647,9 +652,9 @@ function media_tab_files($ns,$auth=null,$jump='') {
         echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL;
     }else{
         if ($view == 'list') {
-            echo '<ul class="mediamanager-file-list mediamanager-list" id="mediamanager__file_list">';
+            echo '<ul class="mediamanager-list" id="mediamanager__file_list">';
         } else {
-            echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="mediamanager__file_list">';
+            echo '<ul class="mediamanager-thumbs" id="mediamanager__file_list">';
         }
         media_filelist($ns,$auth,$jump,true);
         echo '</ul>';
@@ -698,9 +703,9 @@ function media_tab_search($ns,$auth=null) {
     if($do == 'searchlist'){
         $view = $_REQUEST['view'];
         if ($view == 'list') {
-            echo '<ul class="mediamanager-file-list mediamanager-list" id="mediamanager__file_list">';
+            echo '<ul class="mediamanager-list" id="mediamanager__file_list">';
         } else {
-            echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="mediamanager__file_list">';
+            echo '<ul class="mediamanager-thumbs" id="mediamanager__file_list">';
         }
         media_searchlist($query,$ns,$auth,true);
         echo '</ul>';
@@ -794,7 +799,7 @@ function media_tab_history($image, $ns, $auth=null) {
 function media_preview($image, $auth, $rev=false, $meta=false) {
     global $lang;
 
-    echo '<div class="mediamanager-preview">';
+    echo '<div id="mediamanager__preview">';
 
     $size = media_image_preview_size($image, $rev, $meta);
 
@@ -810,7 +815,7 @@ function media_preview($image, $auth, $rev=false, $meta=false) {
         $more .= '&w='.$size[0].'&h='.$size[1];
 
         $src = ml($image, $more);
-        echo '<img src="'.$src.'" alt="" width="99%" style="max-width: '.$size[0].'px;" />';
+        echo '<img src="'.$src.'" alt="'.$image.'" style="max-width: '.$size[0].'px;" />';
     }
 
     echo '</div>';
@@ -824,7 +829,7 @@ function media_preview($image, $auth, $rev=false, $meta=false) {
 function media_preview_buttons($image, $auth, $rev=false) {
     global $lang;
 
-    echo '<div class="mediamanager-preview">';
+    echo '<div id="mediamanager__preview_buttons">';
 
     $more = '';
     if ($rev) {
@@ -870,6 +875,47 @@ function media_preview_buttons($image, $auth, $rev=false) {
 }
 
 /**
+ * Returns image width and height for mediamanager preview panel
+ *
+ * @author Kate Arzamastseva <pshns@ukr.net>
+ * @param string $image
+ * @param int $rev
+ * @param JpegMeta $meta
+ * @return array
+ */
+function media_image_preview_size($image, $rev, $meta) {
+    if (!preg_match("/\.(jpe?g|gif|png)$/", $image)) return false;
+
+    $info = getimagesize(mediaFN($image, $rev));
+    $w = (int) $info[0];
+    $h = (int) $info[1];
+
+    $size = 500;
+    if($meta && ($w > $size || $h > $size)){
+        $ratio = $meta->getResizeRatio($size, $size);
+        $w = floor($w * $ratio);
+        $h = floor($h * $ratio);
+    }
+    return array($w, $h);
+}
+
+/**
+ * Returns the requested EXIF/IPTC tag from the image meta
+ *
+ * @author Kate Arzamastseva <pshns@ukr.net>
+ * @param array $tags
+ * @param JpegMeta $meta
+ * @param string $alt
+ * @return string
+ */
+function media_getTag($tags,$meta,$alt=''){
+    if($meta === false) return $alt;
+    $info = $meta->getField($tags);
+    if($info == false) return $alt;
+    return $info;
+}
+
+/**
  * Returns mediafile tags
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
@@ -926,22 +972,6 @@ function media_details($image, $auth, $rev=false, $meta=false) {
 }
 
 /**
- * Returns the requested EXIF/IPTC tag from the image meta
- *
- * @author Kate Arzamastseva <pshns@ukr.net>
- * @param array $tags
- * @param JpegMeta $meta
- * @param string $alt
- * @return string
- */
-function media_getTag($tags,$meta,$alt=''){
-    if($meta === false) return $alt;
-    $info = $meta->getField($tags);
-    if($info == false) return $alt;
-    return $info;
-}
-
-/**
  * Shows difference between two revisions of file
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
@@ -989,13 +1019,13 @@ function media_diff($image, $ns, $auth) {
     $data[4] = $auth;
 
     // trigger event
-    return trigger_event('MEDIA_DIFF', $data, '_media_image_diff', true);
+    return trigger_event('MEDIA_DIFF', $data, '_media_file_diff', true);
 
 }
 
-function _media_image_diff($data) {
+function _media_file_diff($data) {
     if(is_array($data) && count($data)===5) {
-        return media_image_diff($data[0], $data[1], $data[2], $data[3], $data[4]);
+        return media_file_diff($data[0], $data[1], $data[2], $data[3], $data[4]);
     } else {
         return false;
     }
@@ -1006,10 +1036,10 @@ function _media_image_diff($data) {
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
  */
-function media_image_diff($image, $l_rev, $r_rev, $ns, $auth){
+function media_file_diff($image, $l_rev, $r_rev, $ns, $auth){
     global $lang, $config_cascade;
 
-    echo '<ul class="mediamanager-table-50">';
+    echo '<ul id="mediamanager__diff_table">';
 
     echo '<li>';
     media_preview($image, $auth, $l_rev, $l_meta);
@@ -1062,73 +1092,13 @@ function media_image_diff($image, $l_rev, $r_rev, $ns, $auth){
 
     echo '</ul>';
 
-    media_image_diff_opacity($image, $l_rev, $r_rev, $l_meta);
-    media_image_diff_portions($image, $l_rev, $r_rev, $l_meta);
-}
-
-/**
- * Returns image width and height for mediamanager preview panel
- *
- * @author Kate Arzamastseva <pshns@ukr.net>
- * @param string $image
- * @param int $rev
- * @param JpegMeta $meta
- * @return array
- */
-function media_image_preview_size($image, $rev, $meta) {
-    if (!preg_match("/\.(jpe?g|gif|png)$/", $image)) return false;
-
-    $info = getimagesize(mediaFN($image, $rev));
-    $w = (int) $info[0];
-    $h = (int) $info[1];
-
-    $size = 500;
-    if($meta && ($w > $size || $h > $size)){
-        $ratio = $meta->getResizeRatio($size, $size);
-        $w = floor($w * $ratio);
-        $h = floor($h * $ratio);
-    }
-    return array($w, $h);
-}
-
-/**
- * Prints two images side by side
- * and slider to change the opacity
- * of one of the images
- *
- * @author Kate Arzamastseva <pshns@ukr.net>
- * @param string $image
- * @param int $l_rev
- * @param int $r_rev
- * @param JpegMeta $meta
- */
-function media_image_diff_opacity($image, $l_rev, $r_rev, $meta) {
-    $l_size = media_image_preview_size($image, $l_rev, $meta);
-    $r_size = media_image_preview_size($image, $r_rev, $meta);
-
-    if (!$l_size || !$r_size || $l_size != $r_size || $l_size[0] < 30) return '';
-
-    echo '<div class="mediamanager-preview">';
-
-    $l_more = 'rev='.$l_rev.'&h='.$l_size[1].'&w='.$l_size[0];
-    $r_more = 'rev='.$r_rev.'&h='.$l_size[1].'&w='.$l_size[0];
-
-    $l_src = ml($image, $l_more);
-    $r_src = ml($image, $r_more);
-
-    echo '<div id="mediamanager__diff_opacity_image1" style="background-image: url(\''.$l_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
-    echo '<div id="mediamanager__diff_opacity_image2" style="background-image: url(\''.$r_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
-    echo '</div>';
-    echo '</div>';
-
-    echo '<div id="mediamanager__opacity_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
-    echo '</div>';
+    media_image_diff($image, $l_rev, $r_rev, $l_meta, 'opacity');
+    media_image_diff($image, $l_rev, $r_rev, $l_meta, 'portions');
 }
 
 /**
  * Prints two images side by side
- * and slider to change the width
- * of one of the images
+ * and slider
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
  * @param string $image
@@ -1136,7 +1106,7 @@ function media_image_diff_opacity($image, $l_rev, $r_rev, $meta) {
  * @param int $r_rev
  * @param JpegMeta $meta
  */
-function media_image_diff_portions($image, $l_rev, $r_rev, $meta) {
+function media_image_diff($image, $l_rev, $r_rev, $meta, $type) {
     $l_size = media_image_preview_size($image, $l_rev, $meta);
     $r_size = media_image_preview_size($image, $r_rev, $meta);
 
@@ -1150,12 +1120,12 @@ function media_image_diff_portions($image, $l_rev, $r_rev, $meta) {
     $l_src = ml($image, $l_more);
     $r_src = ml($image, $r_more);
 
-    echo '<div id="mediamanager__diff_portions_image1" style="background-image: url(\''.$l_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
-    echo '<div id="mediamanager__diff_portions_image2" style="background-image: url(\''.$r_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
+    echo '<div id="mediamanager__diff_'.$type.'_image1" style="background-image: url(\''.$l_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
+    echo '<div id="mediamanager__diff_'.$type.'_image2" style="background-image: url(\''.$r_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
     echo '</div>';
     echo '</div>';
 
-    echo '<div id="mediamanager__portions_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
+    echo '<div id="mediamanager__'.$type.'_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
     echo '</div>';
 }
 
diff --git a/inc/template.php b/inc/template.php
index 81b3795ac..13cec438c 100644
--- a/inc/template.php
+++ b/inc/template.php
@@ -1146,17 +1146,17 @@ function tpl_fileList(){
     media_tabs_files($opened_tab);
 
     if ($opened_tab == 'files') {
-        echo '<div class="mediamanager-tab-files" id="mediamanager__files">';
+        echo '<div id="mediamanager__files">';
         media_tab_files($NS,$AUTH,$JUMPTO);
         echo '</div>';
 
     } elseif ($opened_tab == 'upload') {
-        echo '<div class="mediamanager-tab-upload" id="mediamanager__files">';
+        echo '<div id="mediamanager__files">';
         media_tab_upload($NS,$AUTH,$JUMPTO);
         echo '</div>';
 
     } elseif ($opened_tab == 'search') {
-        echo '<div class="mediamanager-tab-search" id="mediamanager__files">';
+        echo '<div id="mediamanager__files">';
         media_tab_search($NS,$AUTH);
         echo '</div>';
     }
@@ -1188,17 +1188,17 @@ function tpl_fileDetails($image, $rev){
     media_tabs_details($image, $opened_tab);
 
     if ($opened_tab == 'view') {
-        echo '<div class="mediamanager-tab-detail-view" id="mediamanager__details">';
+        echo '<div id="mediamanager__details">';
         media_tab_view($image, $NS, $AUTH, $rev);
         echo '</div>';
 
     } elseif ($opened_tab == 'edit') {
-        echo '<div class="mediamanager-tab-detail-edit" id="mediamanager__details">';
+        echo '<div id="mediamanager__details">';
         media_tab_edit($image, $NS, $AUTH);
         echo '</div>';
 
     } elseif ($opened_tab == 'history') {
-        echo '<div class="mediamanager-tab-detail-history" id="mediamanager__details">';
+        echo '<div id="mediamanager__details">';
         media_tab_history($image,$NS,$AUTH);
         echo '</div>';
     }
@@ -1211,7 +1211,7 @@ function tpl_fileDetails($image, $rev){
  *
  * @author Andreas Gohr <andi@splitbrain.org>
  */
-function tpl_mediaTree($fullscreen = false){
+function tpl_mediaTree(){
     global $NS;
     ptln('<div id="media__tree">');
     media_nstree($NS);
@@ -1456,8 +1456,9 @@ function tpl_media() {
     if (isset($REV) && !$JUMPTO) $rev = $REV;
 
     echo '<div class="mediamanager" id="id-mediamanager">';
-    echo '<div class="mediamanager-slider" id="id-mediamanager-layout">';
-    echo '<div id="id-mediamanager-layout-namespaces" class="layout" style="width: 25%;">';
+    echo '<div id="mediamanager__layout">';
+
+    echo '<div id="mediamanager__layout_namespaces" class="layout resizable" >';
     html_msgarea();
     echo '<div class="mediamanager-tabs">';
     echo '<a href="#" class="selected">'.hsc($lang['namespaces']).'</a>';
@@ -1467,15 +1468,18 @@ function tpl_media() {
     echo hsc($lang['namespaces']);
     echo '</div>';
     echo '<div class="scroll-container">';
-    tpl_mediaTree(true);
+    tpl_mediaTree();
     echo '</div>';
     echo '</div>';
-    echo '<div id="mediamanager__layout_list" class="layout" style="width: 40%;">';
+
+    echo '<div id="mediamanager__layout_list" class="layout resizable" >';
     tpl_fileList();
     echo '</div>';
-    echo '<div id="mediamanager__layout_detail" class="layout" style="width: 30%;">';
+
+    echo '<div id="mediamanager__layout_detail" class="layout" >';
     tpl_fileDetails($image, $rev);
     echo '</div>';
+
     echo '<div class="clearer"></div>';
     echo '</div>';
     echo '</div>';
diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 8500166dc..c5e6afc9b 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -302,10 +302,12 @@ var dw_mediamanager = {
         event.preventDefault();
 
         $content = jQuery('#mediamanager__file_list');
-        if ($link.hasClass('mediamanager-link-thumbnails')) {
+
+        if ($link[0].id == 'mediamanager__link_thumbs') {
             $content.removeClass('mediamanager-list');
             $content.addClass('mediamanager-thumbs');
-        } else if ($link.hasClass('mediamanager-link-list')) {
+
+        } else if ($link[0].id == 'mediamanager__link_list') {
             $content.removeClass('mediamanager-thumbs');
             $content.addClass('mediamanager-list');
         }
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index 6c4b64d3e..02c732ce7 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -1,19 +1,17 @@
+/* Layout */
+
 .mediamanager {
     width: 100%;
     overflow-x: auto;
 }
 
-.mediamanager .mediamanager-slider {
-
-}
-
-.mediamanager .mediamanager-slider .layout {
+#mediamanager__layout .layout {
     margin-left: 5px;
     margin-right: 5px;
     float: left;
 }
 
-.mediamanager .scroll-container {
+#mediamanager__layout .scroll-container {
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0;
@@ -21,44 +19,45 @@
     text-align: left;
 }
 
-.background-container {
+#mediamanager__layout .background-container {
     background-color: __background_alt__;
     margin-bottom: 10px;
     padding: 10px;
     text-align: left;
 }
 
-.mediamanager-link-thumbnails {
-    background: url('../../images/icon-thumb.png') 0 -4px no-repeat;
-    padding-left: 30px;
-    display: inline-block;
-    width: 0;
-    overflow: hidden;
+#mediamanager__layout .background-container .icon {
+    margin-right: 5px;
+}
 
-    margin-left: 10px;
+#mediamanager__layout_namespaces {
+    width: 25%;
+    min-width: 125px;
 }
 
-.mediamanager-link-list {
-    background: url('../../images/icon-list.png') 0 -4px no-repeat;
-    padding-left: 30px;
-    display: inline-block;
-    width: 0;
-    overflow: hidden;
+#mediamanager__layout_list {
+    width: 40%;
+    min-width: 375px;
 }
 
-.mediamanager-block-sort {
-    background: url('../../images/icon-sort.png') 0 -4px no-repeat;
-    padding-left: 30px;
-    display: block;
-    float: right;
+#mediamanager__layout_detail {
+    width: 30%;
+    min-width: 200px;
 }
 
-.mediamanager-link-thumbnails:hover,
-.mediamanager-link-list:hover {
-    width: auto;
-    margin-right: 10px;
+.ui-resizable-e:hover {
+    background-color: #dadada;
 }
 
+/* Namespaces tree */
+
+.idx .selected {
+    background-color: __highlight__;
+    font-weight: bold;
+}
+
+/* Tabs */
+
 .mediamanager-tabs a {
     font-weight: bold;
     display: block;
@@ -66,13 +65,7 @@
     padding: 10px;
     padding-bottom: 5px;
     padding-top: 5px;
-
     margin-right: 2px;
-
-    -moz-border-radius-topright: 10px;
-    -webkit-border-top-right-radius: 10px;
-    -moz-border-radius-topleft: 10px;
-    -webkit-border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-top-left-radius: 10px;
 }
@@ -86,34 +79,55 @@
     opacity: 0.5;
 }
 
-.mediamanager-table td {
-    padding: 5px;
+/* Title links */
+
+#mediamanager__tabs_list {
+    display: inline;
 }
 
-.mediamanager-table tr:nth-child(2n+1){
-    background-color: __background_neu__;
+#mediamanager__link_thumbs {
+    background: url('../../images/icon-thumb.png') 0 -4px no-repeat;
+    padding-left: 30px;
+    display: inline-block;
+    width: 0;
+    overflow: hidden;
+    margin-left: 10px;
 }
 
-.mediamanager-table {
-   background: expression(this.rowIndex % 2 == 0 ? "#ffffff" : "#f5f5f5");
+#mediamanager__link_list {
+    background: url('../../images/icon-list.png') 0 -4px no-repeat;
+    padding-left: 30px;
+    display: inline-block;
+    width: 0;
+    overflow: hidden;
 }
 
-.mediamanager-table tr:hover {
-    background-color: __background_alt__;
+#mediamanager__link_thumbs:hover,
+#mediamanager__link_list:hover {
+    width: auto;
+    margin-right: 10px;
 }
 
-form.meta textarea.edit {
-    height: 8em;
-    width: 95%;
-    min-width: 95%;
-    max-width: 95%;
+#mediamanager__sort {
+    background: url('../../images/icon-sort.png') 0 -4px no-repeat;
+    padding-left: 30px;
+    display: block;
+    float: right;
 }
 
-.mediamanager-file-list {
+/* File list */
+
+#mediamanager__file_list {
     padding: 0;
     margin: 0 !important;
 }
 
+#mediamanager__file_list li:hover {
+    background-color: #dadada;
+}
+
+/* Files thumbs view */
+
 .mediamanager-thumbs li {
     width: 100px;
     min-height: 130px;
@@ -129,9 +143,11 @@ form.meta textarea.edit {
     zoom: 1;
     position: relative;
 }
+
 * html .mediamanager-thumbs li {
     display: inline;
 }
+
 *+html .mediamanager-thumbs li {
     display: inline;
     height: 130px;
@@ -160,6 +176,11 @@ form.meta textarea.edit {
     white-space: nowrap;
 }
 
+.mediamanager-thumbs li .date {
+    font-style: italic;
+    white-space: normal;
+}
+
 .mediamanager-thumbs li input[type=checkbox] {
     display: none;
     float: left;
@@ -171,6 +192,8 @@ form.meta textarea.edit {
     display: block;
 }
 
+/* Files list view */
+
 .mediamanager-list li {
     list-style: none;
     display: block;
@@ -194,7 +217,6 @@ form.meta textarea.edit {
 
 .mediamanager-list li .image img {
     width: 100%;
-    vertical-align: middle;
 }
 
 .mediamanager-list li .name,
@@ -208,8 +230,7 @@ form.meta textarea.edit {
     white-space: nowrap;
 }
 
-.mediamanager-list li .date,
-.mediamanager-thumbs li .date {
+.mediamanager-list li .date {
     font-style: italic;
     white-space: normal;
 }
@@ -238,16 +259,41 @@ form.meta textarea.edit {
     display: block;
 }
 
-.mediamanager-file-list li:hover {
-    background-color: #dadada;
+/* Upload panel */
+
+#mediamanager__layout div.upload {
+    padding-bottom: 0.5em;
 }
 
-.mediamanager-table-50 {
+/* File preview */
+
+#mediamanager__preview,
+#mediamanager__preview_buttons {
+    text-align: center;
+    margin-bottom: 5px;
+}
+
+#mediamanager__preview img {
+    width: 99%;
+}
+
+/* Meta data edit form */
+
+form.meta textarea.edit {
+    height: 8em;
+    width: 95%;
+    min-width: 95%;
+    max-width: 95%;
+}
+
+/* File diff */
+
+#mediamanager__diff_table {
     padding: 0;
     margin: 0 !important;
 }
 
-.mediamanager-table-50 li {
+#mediamanager__diff_table li {
     width: 48%;
     display: inline-block;
     margin: 0;
@@ -258,33 +304,13 @@ form.meta textarea.edit {
     color: black;
 }
 
-* html .mediamanager-table-50 li {
+* html #mediamanager__diff_table li {
     display: inline;
 }
 
-.mediamanager-preview {
-    text-align: center;
-    margin-bottom: 5px;
-}
-
-.ui-resizable-e:hover {
-    background-color: #dadada;
-}
-
-.idx .selected {
-    background-color: __highlight__;
-    font-weight: bold;
-}
-
-.mediamanager div.upload {
-    padding-bottom: 0.5em;
-}
-
-.background-container .icon {
-    margin-right: 5px;
-}
+/* Image diff */
 
-.mediamanager dl.img_tags dd.highlighted{
+#mediamanager__layout dl.img_tags dd.highlighted{
     background-color: __highlight__;
 }