From 90f69556e88c39509172f5926ca29c1ae63e2103 Mon Sep 17 00:00:00 2001
From: Anika Henke <anika@selfthinker.org>
Date: Sun, 18 Sep 2011 10:28:31 +0100
Subject: [PATCH] media manager: re-newed CSS roughly (more to come)
---
inc/template.php | 2 +-
lib/tpl/default/mediamanager.css | 223 ++++++++++++++++---------------
2 files changed, 113 insertions(+), 112 deletions(-)
diff --git a/inc/template.php b/inc/template.php
index 58baca111..e2549095c 100644
--- a/inc/template.php
+++ b/inc/template.php
@@ -1513,7 +1513,7 @@ function tpl_media() {
echo hsc($lang['namespaces']);
echo '</div>';
- echo '<div class="panelContent">';
+ echo '<div class="panelContent" id="media__tree">';
media_nstree($NS);
echo '</div>';
echo '</div>';
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index b1905f8a0..e25c0c9f4 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -1,4 +1,5 @@
-/* Layout */
+
+/*____________ Layout ____________*/
#mediamanager__page h1 {
margin: 0 0 .5em;
@@ -8,19 +9,22 @@
min-width: 840px;
width: 100%;
overflow-x: auto;
+ text-align: left;
}
#mediamanager__page .panel {
float: left;
margin-right: 10px;
}
+#mediamanager__page .panel.file {
+ margin-right: 0;
+}
#mediamanager__page .panelContent {
overflow-y: auto;
overflow-x: hidden;
padding: 0;
margin: 0;
- text-align: left;
position: relative;
}
@@ -30,10 +34,7 @@
padding: 10px 10px 8px;
text-align: left;
min-height: 20px;
-}
-
-#mediamanager__page .panelHeader .icon {
- margin-right: 5px;
+ overflow: hidden;
}
#mediamanager__page .namespaces {
@@ -46,8 +47,8 @@
min-width: 375px;
}
-#mediamanager__page_detail {
- width: 35%;
+#mediamanager__page .file {
+ /* width: 35%; @todo: needed? */
min-width: 290px;
}
@@ -65,107 +66,86 @@
background-color: __background_alt__;
}
-/* Namespaces tree */
+/*____________ Namespaces tree ____________*/
-#mediamanager__page .namespaces ul.idx {
+#mediamanager__page .namespaces h2 {
+ font-size: 1em;
+ display: inline-block;
+ border-width: 0;
+ padding: .3em .8em;
+ margin: 0 .3em 0 0;
+ border-radius: .5em .5em 0 0;
+ font-weight: normal;
+ background-color: __background_alt__;
+ color: __text__;
+}
+
+#mediamanager__page .namespaces ul {
margin-left: .2em;
+ list-style: none;
}
-#mediamanager__page .namespaces ul.idx ul {
+#mediamanager__page .namespaces ul ul {
margin-left: 1em;
}
-#mediamanager__page .namespaces ul.idx .selected {
+#mediamanager__page .namespaces ul .selected {
background-color: __highlight__;
font-weight: bold;
}
-/* Tabs */
+/*____________ Panel header ____________*/
-#mediamanager__page div.panel h2.a11y {
- font-weight: bold;
- display: block;
+#mediamanager__page .panelHeader h3 {
float: left;
- 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;
-}
-
-#mediamanager__page div.panel h2.a11y .selected {
- background-color: __background_alt__;
+ font-weight: normal;
+ font-size: 1em;
+ padding: 0;
+ margin: 0;
}
-#mediamanager__page div.panel h2.a11y a:hover {
- background-color: __background_alt__;
- opacity: 0.5;
+#mediamanager__page .panelHeader form.options {
+ float: right;
}
-/* Title links */
-
-#mediamanager__page .filelist .panelHeader h3 {
- float: left;
- font-weight: normal;
+#mediamanager__page .panelHeader ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
-#mediamanager__tabs_list {
- float: left;
+#mediamanager__page .panelHeader form.options label span span {
+ display: none; /* @todo: hide accessibly */
}
-
-#mediamanager__link_thumbs,
-#mediamanager__link_list {
- padding-left: 30px;
- display: inline-block;
- width: 0;
- overflow: hidden;
+#mediamanager__page .panelHeader form.options label span {
+ padding-left: 27px;
}
-
-#mediamanager__link_thumbs {
+/* @todo: get different images */
+#mediamanager__page .panelHeader label.thumbs span {
background: url('../../images/icon-thumb.png') 0 -4px no-repeat;
- margin-left: 10px;
}
-
-#mediamanager__link_list {
+#mediamanager__page .panelHeader label.rows span {
background: url('../../images/icon-list.png') 0 -4px no-repeat;
}
-
-#mediamanager__link_thumbs:hover,
-#mediamanager__link_list:hover {
- width: auto;
- margin-right: 10px;
-}
-
-#mediamanager__sort {
+#mediamanager__page .panelHeader label.name span {
background: url('../../images/icon-sort.png') 0 -4px no-repeat;
- padding-left: 30px;
- display: block;
- float: right;
}
-
-* html #mediamanager__sort,
-*+html #mediamanager__sort {
- position: relative;
- margin-top: -18px;
+#mediamanager__page .panelHeader label.date span {
+ background: url('../../images/icon-sort.png') 0 -4px no-repeat;
}
-/* File list */
+/*____________ File list ____________*/
-#mediamanager__page .filelist .list {
+#mediamanager__page .filelist ul {
padding: 0;
- margin: 0 !important;
+ margin: 0;
}
-#mediamanager__page .filelist .list li:hover {
+#mediamanager__page .filelist .panelContent ul li:hover {
background-color: __background_alt__;
}
-/* Files thumbs view */
+/* thumbs */
#mediamanager__page .filelist .thumbs li {
width: 100px;
@@ -204,8 +184,8 @@
display: none;
}
-#mediamanager__page .filelist .thumbs li .image span,
-#mediamanager__page .filelist .thumbs li .image0 span {
+#mediamanager__page .filelist .thumbs li .image,
+#mediamanager__page .filelist .thumbs li .image0 {
vertical-align: middle;
display: table-cell;
width: 100px;
@@ -243,9 +223,13 @@
display: block;
}
-/* Files list view */
+/* rows */
-#mediamanager__page .filelist .list li {
+#mediamanager__page .filelist .rows li {
+ overflow: hidden;
+}
+
+#mediamanager__page .filelist .rows li {
list-style: none;
display: block;
position: relative;
@@ -256,12 +240,12 @@
color: __text__;
}
-#mediamanager__page .filelist .list li:nth-child(2n+1) {
+#mediamanager__page .filelist .rows li:nth-child(2n+1) {
background-color: __background_neu__;
}
-#mediamanager__page .filelist .list li .image,
-#mediamanager__page .filelist .list li .image1 {
+#mediamanager__page .filelist .rows li .image,
+#mediamanager__page .filelist .rows li .image1 {
width: 10%;
display: block;
overflow: hidden;
@@ -270,46 +254,46 @@
text-align: center;
}
-#mediamanager__page .filelist .list li .image0 {
+#mediamanager__page .filelist .rows li .image0 {
display: none;
}
-#mediamanager__page .filelist .list li .name,
-#mediamanager__page .filelist .list li .size,
-#mediamanager__page .filelist .list li .filesize,
-#mediamanager__page .filelist .list li .date {
+#mediamanager__page .filelist .rows li .name,
+#mediamanager__page .filelist .rows li .size,
+#mediamanager__page .filelist .rows li .filesize,
+#mediamanager__page .filelist .rows li .date {
overflow: hidden;
float: left;
margin-left: 1%;
white-space: nowrap;
}
-#mediamanager__page .filelist .list li .name {
+#mediamanager__page .filelist .rows li .name {
width: 30%;
font-weight: bold;
}
-#mediamanager__page .filelist .list li .size,
-#mediamanager__page .filelist .list li .filesize {
+#mediamanager__page .filelist .rows li .size,
+#mediamanager__page .filelist .rows li .filesize {
width: 15%;
}
-#mediamanager__page .filelist .list li .date {
+#mediamanager__page .filelist .rows li .date {
width: 20%;
}
-#mediamanager__page .filelist .list li .date {
+#mediamanager__page .filelist .rows li .date {
font-style: italic;
white-space: normal;
}
-#mediamanager__page .filelist .list .icon {
+#mediamanager__page .filelist .rows .icon {
max-width: 16px;
max-height: 16px;
}
-#mediamanager__page .filelist .list li .image span,
-#mediamanager__page .filelist .list li .image1 span {
+#mediamanager__page .filelist .rows li .image span,
+#mediamanager__page .filelist .rows li .image1 span {
vertical-align: middle;
text-align: center;
display: table-cell;
@@ -317,18 +301,18 @@
height: 40px;
}
-#mediamanager__page .filelist .list li input[type=checkbox] {
+#mediamanager__page .filelist .rows li input[type=checkbox] {
display: none;
float: left;
margin: 3px;
}
-#mediamanager__page .filelist .list li:hover input[type=checkbox],
-#mediamanager__page .filelist .list li input[type=checkbox]:checked {
+#mediamanager__page .filelist .rows li:hover input[type=checkbox],
+#mediamanager__page .filelist .rows li input[type=checkbox]:checked {
display: block;
}
-/* Upload panel */
+/*____________ Upload panel ____________*/
#mediamanager__page div.upload {
padding-bottom: 0.5em;
@@ -339,57 +323,74 @@
padding-bottom: 0.5em;
}
-/* File preview */
+/*____________ File preview ____________*/
-.mediamanager__preview,
-.mediamanager__preview_buttons {
+#mediamanager__page .file ul.actions {
text-align: center;
margin-bottom: 5px;
+ list-style: none;
+}
+
+#mediamanager__page .file div.image {
+ margin-bottom: 5px;
}
-.mediamanager__preview img {
+#mediamanager__page .file div.image img {
width: 99%;
}
-/* Meta data edit form */
+#mediamanager__page .file dl {
+}
+#mediamanager__page .file dl dt {
+ font-weight: bold;
+ display: block;
+ background-color: __background_alt__;
+}
+#mediamanager__page .file dl dd {
+ display: block;
+ background-color: __background_neu__;
+}
+
+
+/*____________ Meta data edit form ____________*/
-#mediamanager__details div.metafield {
+#mediamanager__page form.meta div.row {
margin-bottom: 5px;
}
-#mediamanager__details label {
+#mediamanager__page form.meta label {
display: block;
}
-#mediamanager__details form.meta input {
+#mediamanager__page form.meta input {
width: 50%;
}
-#mediamanager__details form.meta input.button {
+#mediamanager__page form.meta input.button {
width: auto;
}
-#mediamanager__details form.meta textarea.edit {
+#mediamanager__page form.meta textarea.edit {
height: 6em;
width: 95%;
min-width: 95%;
max-width: 95%;
}
-/* Revisions form */
+/*____________ Revisions form ____________*/
-#mediamanager__details #page__revisions ul {
+#mediamanager__page #page__revisions ul {
margin-left: 10px;
list-style-type: none;
}
-#mediamanager__details #page__revisions ul li div.li div {
+#mediamanager__page #page__revisions ul li div.li div {
font-size: 90%;
color: __text_neu__;
padding-left: 18px;
}
-#mediamanager__details #page__revisions ul li div.li input {
+#mediamanager__page #page__revisions ul li div.li input {
position: relative;
top: 1px;
}
--
GitLab