From 737fbe3b6622c870fc02fea167e39bbebebb8eaf Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Wed, 29 Feb 2012 09:41:48 -0500
Subject: [PATCH] More styles for decorated selects

---
 skins/larry/styles.css |   28 +++++++++++++++++++++++-----
 skins/larry/ui.js      |    3 ++-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index ab70453..9412135 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1451,13 +1451,27 @@
 	position: relative;
 	z-index: 10;
 	opacity: 0;
-	-khtml-appearance: none;
-	padding: 2px 4px;
+	height: 22px;
 	cursor: pointer;
+	filter: alpha(opacity=0);
+	-khtml-appearance: none;
+	-webkit-appearance: none;
 }
 
 html.opera select.decorated {
 	opacity: 1;
+	height: auto;
+}
+
+select.decorated option {
+	color: #fff;
+	background: #444;
+	border: 1px solid #999;
+	border-top-color: #5a5a5a;
+	border-bottom-color: #333;
+	text-shadow: 0px 1px 1px #333;
+	padding: 6px 10px;
+	outline: none;
 }
 
 
@@ -1504,12 +1518,14 @@
 }
 
 .googie_list tr:first-child td,
-ul.toolbarmenu li:first-child {
+ul.toolbarmenu li:first-child,
+select.decorated option:first-child {
 	border-top: 0;
 }
 
 .googie_list tr:last-child td,
-ul.toolbarmenu li:last-child {
+ul.toolbarmenu li:last-child,
+select.decorated option:last-child {
 	border-bottom: 0;
 }
 
@@ -1535,7 +1551,9 @@
 
 .googie_list td.googie_list_onhover,
 ul.toolbarmenu li a.active:hover,
-#rcmKSearchpane ul li.selected {
+#rcmKSearchpane ul li.selected,
+select.decorated option:hover,
+select.decorated option[selected='selected'] {
 	background-color: #00aad6;
 	background: -moz-linear-gradient(top, #00aad6 0%, #008fc9 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00aad6), color-stop(100%,#008fc9));
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 5e12186..d7ef9ae 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -186,9 +186,10 @@
           });
 
         $('<a class="menuselector dropdownselector"><span class="handle">' + title + '</span></a>')
+          .css('position', 'absolute')
           .offset(select.position())
           .insertAfter(select)
-          .children().width(select.width() - 5);
+          .children().width(select.outerWidth() - 40);
 
         select.parent().css('position', 'relative');
       });

--
Gitblit v1.9.1