thumbnails and list view

2 files changed, 68 insertions, 44 deletions

diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 029a5525c..1dee4dc69 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -249,7 +249,7 @@ div.dokuwiki div.pagenav-next {
 /* ----------- type of recent changes ------------- */
 
 div.dokuwiki div.changestypenav {
-    border-bottom: 1px solid #8CACBB;
+    border-bottom: 1px solid __border__;
     padding-bottom: 10px;
     margin-bottom: 10px;
 }
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index bf4513f0c..25816e273 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -1,18 +1,3 @@
-.float-image {
-    float: left;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    width: 100px;
-    height: 180px;
-    background-color: #DEE7EC;
-    padding: 10px;
-    text-align: center;
-}
-
-.float-image:hover {
-    background-color: #dadada;
-}
-
 /* --- Tree formatting --- */
 
 #media-menu img {
@@ -55,35 +40,36 @@
     overflow-x: hidden;
     padding: 0;
     margin: 0;
+    text-align: left;
 }
 
 .background-container {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
     margin-bottom: 10px;
     padding: 10px;
     text-align: left;
 }
 
 .mediamanager-link-thumbnails {
-    background: url('icon-thumb.png') 0 -4px no-repeat;
+    background: url('/lib/images/icon-thumb.png') 0 -4px no-repeat;
     padding-left: 30px;
     display: block;
     float: left;
-    /*width: 0;*/
-    /*overflow: hidden;*/
+    width: 0;
+    overflow: hidden;
 }
 
 .mediamanager-link-list {
-    background: url('icon-list.png') 0 -4px no-repeat;
+    background: url('/lib/images/icon-list.png') 0 -4px no-repeat;
     padding-left: 30px;
     display: block;
     float: left;
-    /*width: 0;*/
-    /*overflow: hidden;*/
+    width: 0;
+    overflow: hidden;
 }
 
 .mediamanager-block-sort {
-    background: url('icon-sort.png') 0 -4px no-repeat;
+    background: url('/lib/images/icon-sort.png') 0 -4px no-repeat;
     padding-left: 30px;
     display: block;
     float: right;
@@ -95,22 +81,6 @@
     margin-right: 10px;
 }
 
-.mediamanager-clear {
-    clear: both;
-    line-height: 0;
-    font-size: 0;
-}
-
-.mediamanager-link-upload {
-    background: url('icon-upload.png') 0 -4px no-repeat;
-    padding-left: 30px;
-}
-
-.mediamanager-link-search {
-    background: url('icon-search.png') 0 -4px no-repeat;
-    padding-left: 30px;
-}
-
 .mediamanager-tabs a {
     font-weight: bold;
     display: block;
@@ -130,11 +100,11 @@
 }
 
 .mediamanager-tabs .selected {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
 }
 
 .mediamanager-tabs a:hover {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
     opacity: 0.5;
 }
 
@@ -143,7 +113,7 @@
 }
 
 .mediamanager-table tr:nth-child(2n+1){
-    background-color: #f5f5f5;
+    background-color: __background_neu__;
 }
 
 .mediamanager-table {
@@ -151,7 +121,7 @@
 }
 
 .mediamanager-table tr:hover {
-    background-color: #DEE7EC;
+    background-color: __background_alt__;
 }
 
 form.meta textarea.edit {
@@ -160,3 +130,57 @@ form.meta textarea.edit {
     min-width: 95%;
     max-width: 95%;
 }
+
+.mediamanager-file-list {
+    padding: 0;
+    margin: 0 !important;
+}
+
+.mediamanager-thumbs li {
+    width: 100px;
+    min-height: 130px;
+    display: inline-block;
+    margin: 0;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    background-color: __background_alt__;
+    padding: 10px;
+    vertical-align: top;
+    display: -moz-inline-stack;
+    text-align: center;
+}
+
+.mediamanager-thumbs li .info {
+    display: block;
+}
+
+.mediamanager-list li {
+    display: block;
+    margin-bottom: 3px;
+}
+
+.mediamanager-list li:nth-child(2n+1) {
+    background-color: __background_neu__;
+}
+
+.mediamanager-list li .image {
+    width: 50px;
+    height: 50px;
+    overflow: hidden;
+    float: left;
+}
+
+.mediamanager-list li .image img {
+    width: 100%;
+}
+
+.mediamanager-list li .info {
+    overflow: hidden;
+    float: left;
+    margin-left: 5px;
+    width: 20%;
+}
+
+.mediamanager-file-list li:hover {
+    background-color: #dadada;
+}