updated clean themes

2 files changed, 243 insertions, 128 deletions

diff --git a/contrib/themes/Clean/templates/style.inc b/contrib/themes/Clean/templates/style.inc
index 1f5cf5fc..189a0571 100755
--- a/contrib/themes/Clean/templates/style.inc
+++ b/contrib/themes/Clean/templates/style.inc
@@ -30,70 +30,87 @@
 	browswer compatible as possible.  If someone actually knew what they were doing 

 	with css, I'm sure this could be done much more effeciently...

 */

-$border2="1pt solid Silver";

+$border2="1px solid Silver";

 ?>

+<script type="text/javascript" language="javascript">

+<!-- Begin Suckerfish hover menu JS

+// function needed for IE.  attaches mouseover/out events to give/remove css class .sfhover (fake hover)

+sfHover = function(navlist) {

+var sfEls = document.getElementById("navlist").getElementsByTagName("LI");

+for (var i=0; i <sfEls.length; i++) {

+    sfEls[i].onmouseover=function() {

+        this.className+=" sfhover";

+    }

+    sfEls[i].onmouseout=function() {

+        this.className=this.className.replace(new RegExp("sfhover\\b"), "");

+    }

+} // end for

+} // end function for sfHover

+if (window.attachEvent) window.attachEvent("onload", sfHover);

+// End Suckerfish hover menu JS-->

+</script>

 <style type="text/css">

 <!--

-body{
-	font-family: Arial,Helvetica,sans-serif;
-   	color: <?php echo conf('font_color1'); ?>;
-	font-size: <?php echo conf('font_size'); ?>px;
-}
-p{
-    	font-family: Arial,Helvetica,sans-serif;
-   	color: <?php echo conf('font_color1'); ?>;
-	font-size: <?php echo conf('font_size'); ?>px;
-}
-ol{list-style:decimal;}
-ul{list-style:disc;}
-a{
-	color: <?php echo conf('font_color2'); ?>;
-	font-weigth:bolder;
-}
-a:link {text-decoration: none;}
-a:visited {text-decoration: none;}
-a:hover {text-decoration: underline;}
-a:active {text-decoration: underline;}
-
-img{border: 2px outset silver;}
-p img{border: none;}/*no border for ampache logo */
-.text-box{border: thin outset;}
-H3{font-size: <?php echo conf('font_size')+2; ?>px;}
-TABLE{
-	border-collapse: separate;
-	empty-cells:show;
-}
+body{

+	font-family: Arial,Helvetica,sans-serif;

+   	color: <?php echo conf('font_color1'); ?>;

+	font-size: <?php echo conf('font_size'); ?>px;

+}

+p{

+    font-family: Arial,Helvetica,sans-serif;

+   	color: <?php echo conf('font_color1'); ?>;

+	font-size: <?php echo conf('font_size'); ?>px;

+}

+ol{list-style:decimal;}

+ul{list-style:disc;}

+a{

+	color: <?php echo conf('font_color2'); ?>;

+	font-weight:bolder;

+}

+a:link {text-decoration: none;}

+a:visited {text-decoration: none;}

+a:hover {text-decoration: underline;}

+a:active {text-decoration: underline;}

+

+img{border: thin outset Silver;}

+p img{border:none;}/*no border on login page logo.*/

+.text-box{border: thin outset;}

+H3{font-size: <?php echo conf('font_size')+2; ?>px;}

+TABLE{

+	border-collapse: separate;

+	empty-cells:show;

+}

 td{color: <?php echo conf('font_color3'); ?>;padding: 0px 8px 0px 8px;}

 th{

 	border: <?php echo $border2;?>;

 	padding: 0px 8px 0px 8px;

 	vertical-align: top;

 	text-align: center;

-	font-weight: normal;/*override default bolding on th's*/
+	font-weight: normal;/*override default bolding on th's*/

 }

 input{

 	color: <?php echo conf('font_color3'); ?>;

-	font-size: <?php echo conf('font_size'); ?>px;
-}
+	font-size: <?php echo conf('font_size'); ?>px;

+}

 select{ 

 	color: <?php echo conf('font_color3'); ?>;

-	font-size: <?php echo conf('font_size'); ?>px;
-}
+	font-size: <?php echo conf('font_size'); ?>px;

+}

 textarea{ 

 	color: <?php echo conf('font_color3'); ?>;

-	font-size: <?php echo conf('font_size'); ?>px;
+	font-size: <?php echo conf('font_size'); ?>px;

 }

-.login{border: 2px ridge Silver;}
-.npsong td{border-bottom: <?php echo $border2;?>;border-top: <?php echo $border2;?>;}
+.login{border: 2px ridge Silver;}

+.npsong td{border-bottom: <?php echo $border2;?>;border-top: <?php echo $border2;?>;}

 .tabledata{border-collapse: collapse;border: <?php echo $border2;?>;}

-.table-header{
+.table-header{

 	background: url(<?php echo conf('web_path'); ?><?php echo conf('theme_path'); ?>/images/ampache-light-bg.gif)  <?php echo conf('base_color2')?> repeat-x;

 	vertical-align: top;

 	text-align: center;

 	border: <?php echo $border2;?>;

-}
-.table-header td{border: <?php echo $border2;?>;}/*override td and add border on all fields.
-
+}

+.table-header td{border: <?php echo $border2;?>;}/*override td and add border on all fields.*/

+

 .navitem{/*compatiblity with older version*/

 	background: url(<?php echo conf('web_path'); ?><?php echo conf('theme_path'); ?>/images/ampache-light-bg.gif)  <?php echo conf('base_color2')?> repeat-x;

 	vertical-align: top;

@@ -122,64 +139,64 @@ textarea{
 .headrow {

 	background:<?php echo conf('row_color3'); ?>;

 	font-size: <?php echo conf('font_size'); ?>px;

-	border: <?php echo $border;?>;	

+	border: <?php echo $border2;?>;	

 }

 

 .odd {/*odd rows in multi lined tables.*/

 	background: <?php echo conf('row_color1'); ?>;

-	border:none;
-	text-align: left;
+	border:none;

+	text-align: left;

 }

 

 /*do the borders for them.  we'll just do edges on odds except for first/last rows where we add the top or bottom.*/

-.odd td {border:none;}
-.odd td:first-child{border-left: <?php echo $border2;?>}
-.odd td:last-child{border-right: <?php echo $border2;?>;}
-.odd:first-child td{border-top: <?php echo $border2;?>}
-.odd:last-child td{border-bottom:<?php echo $border2;?>}
-/*special cases*/
-.odd td table tr td{border: none;}/*skip embedded tables*/
-.odd td table tr td:first-child{border:none;}
-.odd td table tr td:last-child{border:none;}
-.odd td table td table{border:<?php echo $border2;?>;}/*color swatches on preferences page*/
-
-
-.even{
-        background:<?php echo conf('row_color2'); ?>;
-        text-align: left;/*for lists on homepage*/
-        border:none;
-}
-/*specify sides/top & bottom on evens*/
-.even td{border-bottom:<?php echo $border2;?>;border-top:<?php echo $border2;?>;}
-.even td:first-child{border-bottom:<?php echo $border2;?>;border-left: <?php echo $border2;?>;border-top: <?php echo $border2;?>;}
-.even td:last-child{border-bottom:<?php echo $border2;?>;border-top:<?php echo $border2;?>;border-right:<?php echo $border2;?>;}
-/*special cases*/
-.even td table tr td{border:none;}/*skip embedded tables*/
-.even td table tr td:first-child{border:none;}
-.even td table tr td:last-child{border:none;}
-.even td table td table{border:<?php echo $border2;?>;}/*color swatches on preferences page*/
-
-
+.odd td {border:none;}

+.odd td:first-child{border-left: <?php echo $border2;?>}

+.odd td:last-child{border-right: <?php echo $border2;?>;}

+.odd:first-child td{border-top: <?php echo $border2;?>}

+.odd:last-child td{border-bottom:<?php echo $border2;?>}

+/*special cases*/

+.odd td table tr td{border: none;}/*skip embedded tables*/

+.odd td table tr td:first-child{border:none;}

+.odd td table tr td:last-child{border:none;}

+.odd td table td table{border:<?php echo $border2;?>;}/*color swatches on preferences page*/

+

+

+.even{

+        background:<?php echo conf('row_color2'); ?>;

+        text-align: left;/*for lists on homepage*/

+        border:none;

+}

+/*specify sides/top & bottom on evens*/

+.even td{border-bottom:<?php echo $border2;?>;border-top:<?php echo $border2;?>;}

+.even td:first-child{border-bottom:<?php echo $border2;?>;border-left: <?php echo $border2;?>;border-top: <?php echo $border2;?>;}

+.even td:last-child{border-bottom:<?php echo $border2;?>;border-top:<?php echo $border2;?>;border-right:<?php echo $border2;?>;}

+/*special cases*/

+.even td table tr td{border:none;}/*skip embedded tables*/

+.even td table tr td:first-child{border:none;}

+.even td table tr td:last-child{border:none;}

+.even td table td table{border:<?php echo $border2;?>;}/*color swatches on preferences page*/

+

+

 

 .border{

 	border-collapse: collapse;

 	border: <?php echo $border2;?>;

 	padding: 0px 0px 0px 0px;

 }

-
-/*do some clean up of unwanted borders in border class with embedded even/odd classes */
-.border .even table .even td{border:none;}/*random selection on home page*/
-.border .even td table tr td{border:none;}/*prev next on artists/albums*/
-.border .even td table tr td:first-child{border:none;}/*prev next on artists/albums*/
-.border .even td table tr td:last-child{border:none;}/*prev next on artists/albums*/
-.border .odd td table td{border:none;}/*skip embedded tables.*/
-.border .odd td table td:first-child{border:none;}
-.border .odd td table td:last-child{border:none;}
-.border .table-header:first-child td font{/*override with defaults because  album header is hardcoded to big*/
-	font-size: <?php echo conf('font_size'); ?>px;
-	font-weight: bolder;
-}
-
+

+/*do some clean up of unwanted borders in border class with embedded even/odd classes */

+.border .even table .even td{border:none;}/*random selection on home page*/

+.border .even td table tr td{border:none;}/*prev next on artists/albums*/

+.border .even td table tr td:first-child{border:none;}/*prev next on artists/albums*/

+.border .even td table tr td:last-child{border:none;}/*prev next on artists/albums*/

+.border .odd td table td{border:none;}/*skip embedded tables.*/

+.border .odd td table td:first-child{border:none;}

+.border .odd td table td:last-child{border:none;}

+.border .table-header:first-child td font{/*override with defaults because  album header is hardcoded to big*/

+	font-size: <?php echo conf('font_size'); ?>px;

+	font-weight: bolder;

+}

+

 .blank{	background: #fff;}

 .header{font-size: <?php echo conf('font_size'); ?>px;}

 .error{	color: <?php echo conf('error_color'); ?>;}

@@ -201,39 +218,39 @@ textarea{
 	font-weight: normal; 

 }

 /*************** Main Menu *****************/

-#mainmenu {
-        float: left;
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-	border-top: <?php echo $border2;?>;  
-        border-bottom: <?php echo $border2;?>;
-        border-right: <?php echo $border2;?>;
-        border-left: <?php echo $border2;?>;
-        background: url(<?php echo conf('web_path'); ?><?php echo conf('theme_path'); ?>/images/ampache-light-bg.gif) <?php echo conf('base_color2');?> repeat-x;
-    }
-    #mainmenu li {
-        float: left;
-        margin: 0;
-        padding: 0 10px 0 10px;
-        border-right: <?php echo $border2;?>;
-        display: inline;
-    }
-    #mainmenu li.active {
-        background: url(<?php echo conf('web_path'); ?><?php echo conf('theme_path'); ?>/images/ampache-dark-bg.gif) <?php echo conf('base_color2');?> repeat-x;
-    }
-    #mainmenu a {
-        text-decoration: none;
-    }
-    #mainmenu a:hover {
-        color: #000;
-        text-decoration: underline;
-    }
-    #mainmenu a:active {
-        color: #00a;
-        text-decoration: underline;
-    }
+#mainmenu {

+        float: left;

+        width: 100%;

+        margin: 0;

+        padding: 0;

+        list-style: none;

+	border-top: <?php echo $border2;?>;  

+        border-bottom: <?php echo $border2;?>;

+        border-right: <?php echo $border2;?>;

+        border-left: <?php echo $border2;?>;

+        background: url(<?php echo conf('web_path'); ?><?php echo conf('theme_path'); ?>/images/ampache-light-bg.gif) <?php echo conf('base_color2');?> repeat-x;

+    }

+    #mainmenu li {

+        float: left;

+        margin: 0;

+        padding: 0 10px 0 10px;

+        border-right: <?php echo $border2;?>;

+        display: inline;

+    }

+    #mainmenu li.active {

+        background: url(<?php echo conf('web_path'); ?><?php echo conf('theme_path'); ?>/images/ampache-dark-bg.gif) <?php echo conf('base_color2');?> repeat-x;

+    }

+    #mainmenu a {

+        text-decoration: none;

+    }

+    #mainmenu a:hover {

+        color: #000;

+        text-decoration: underline;

+    }

+    #mainmenu a:active {

+        color: #00a;

+        text-decoration: underline;

+    }

 /*************** END Main Menu *************/

 /*************** Admin Menu *************/

     #adminmenu {

@@ -244,7 +261,7 @@ textarea{
         list-style: none;

         border-bottom: <?php echo $border2;?>;

         border-right: <?php echo $border2;?>;

-	border-left: <?php echo $border2;?>;

+		border-left: <?php echo $border2;?>;

         background: url(<?php echo conf('web_path'); ?><?php echo conf('theme_path'); ?>/images/ampache-light-bg.gif) <?php echo conf('base_color2')?> repeat;

     }

     #adminmenu li {

@@ -270,12 +287,109 @@ textarea{
         text-decoration: underline;

     }

 /*************** END Main Menu *************/

+/*New Menu (3.3.2 alpha 4+)*/

+/**

+ * Div Definitions

+ * These define how the page is layed out, be careful with these as changes to them

+ * can cause drastic layout changes

+ */

+	#maincontainer{

+			margin: 0px;

+	} 	

+	#topbar{

+			height: 60px;

+			padding-top:10px;

+			padding-left:10px;

+			background-color: <?php echo conf('bg_color1'); ?>;

+	}

+	#topbarright{

+			float: right;

+	}

+	#topbarleft{

+			float: left;

+	}

+	#topbarleft img{border:none;}/*ampache logo*/

+	#navcontainer ul li{

+			float:left; 

+			width:100%;

+	}

+	.subnavbutton{

+			background-color: <?php echo conf('row_color1'); ?>;

+			text-align:center;

+			text-decoration: none;

+			color: <?php echo conf('font_color2'); ?>;

+	}

+	#content{ 

+		margin-left:0px;

+	}

+/**

+ * Experimental for menus (Thx Sigger)

+ * TO DO: Fill in 1px border around menus & submenu items 

+ * Make padding appply to the li, not just an a.  Moving paddng: to li throws off the dropdown menu alignment.

+ */

+    #sidebar {

+		clear: both;

+		height: 100%;

+        margin: 0;

+        float: left;

+ /*       width: 110px;  /* this controls the width of the sidebar.  horizontal menu needs more width */

+        padding: 0;

+		border-top: <?php echo $border2;?>;

+		list-style: none;

+        line-height: 1.0;

+	}

+    #sidebar ul {

+		margin: 0px;

+		list-style: none;

+		padding: 0px;

+        font-family: verdana, arial, Helvetica, sans-serif;

+		line-height: 1.0;

+    }

+    #sidebar li {

+/*        margin: 0 0 1px 0; */

+		margin: 0px;

+        display: block;   

+		border-bottom:<?php echo $border2;?>;

+		border-left: <?php echo $border2;?>;

+		border-right: <?php echo $border2;?>;

+		padding: 5px 0px 5px 10px;   

+		width: 10em;

+		background-color: <?php echo conf('row_color2'); ?>;

+	}

+    #sidebar a, .navbutton {

+		display: block;  /*Not sure why this is neccesary, but it is for IE*/

+		text-decoration: none;

+	}

+    #sidebar li:hover, #sidebar li.sfhover {

+        color: <?php echo conf('font_color2'); ?>;

+		background-color: <?php echo conf('row_color3'); ?>;

+    }

+    #sidebar li:active {

+        background-color: <?php echo conf('row_color1'); ?>;

+    }

+    #sidebar li ul {

+		float: left;

+		position: absolute;	

+		width: 11em; 

+		border: <?php echo $border2;?>;

+		margin: -1.5em 0 0 10em;

+/* -2em 0 0 10em for vertical menu puts the submenu back up and to the right of the hovered menu item by "the right amount"*/

+		left: -999em;  /* this puts the submenu item way off to the left until it's called back by a hover (below) */

+    }

+    #sidebar li:hover ul, #sidebar li.sfhover ul {

+		left: auto;  /* this calls the submenu back when the parent li is hovered. */

+    }

+/**

+ * End Div Definitions

+ * This is the end of the main structure def's

+ */

+/*****/

 /*************** Page Header *********************/

     #pageheader {

-        background: <?php echo conf('bgcolor1');?>;

-    	
-    }

-    #pageheader img{border: none;}
+        background-color: <?php echo conf('bg_color1'); ?>;   

+	}

+    #pageheader img{border: none;}

 /*************** END Page Header *****************/

 -->

+

 </style>

diff --git a/contrib/themes/Clean/theme.cfg.php b/contrib/themes/Clean/theme.cfg.php
index 5637c49d..1a4f5ea9 100755
--- a/contrib/themes/Clean/theme.cfg.php
+++ b/contrib/themes/Clean/theme.cfg.php
@@ -57,11 +57,12 @@ font_color3 = "#666666"
 # Row Color 1-

 row_color1 = "#ffffff"

 

-# Row Color 2-FCFCF8
 -"#F7FAFF"
-row_color2 = "#FAFAF8"
+# Row Color 2-FCFCF8

+ -"#F7FAFF"

+row_color2 = "#FAFAF8"

 

 # Row Color 3

-row_color3 = "#E6EAC6"

+row_color3 = "#D1D8D5"

 

 # Error Color

 error_color = "#990033"