small changes style.. and change icon (experimental)

Valessio Soares de Brito
1 parent 65be4b76
Showing 4 changed files with 55 additions and 25 deletions Show diff stats
src/web/static/css/debtags.css
src/web/static/css/style.css
src/web/static/css/tabs.css
src/web/static/images/icon55.png
-#debtags-area {
-}
-
 #debtags-facets {
     float: left;
     text-align: right;
     width: 320px;
 }
+
 #debtags-facets div {
     background-color: #F0F0F0;
     cursor: pointer;
     padding-right: 1em;
 }
+
 #debtags-facets div.selected {
     background-color: #000000;
     color: #F0F0F0;
     font-weight: bolder;
 }
+
 #debtags-facets div:hover {
-    background-color: #AAAAAA;
+border-radius: 5px;
+background: #9f9f9f; /* Old browsers */
+background: -moz-linear-gradient(left, #f0f0f0 51%, #9f9f9f 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, right top, color-stop(51%,#9f9f9f), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(left, #f0f0f0 51%,#9f9f9f 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(left, #f0f0f0 51%,#9f9f9f 100%); /* Opera11.10+ */
+background: -ms-linear-gradient(left, #f0f0f0 51%,#9f9f9f 100%); /* IE10+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#9f9f9f',GradientType=1 ); /* IE6-9 */
+background: linear-gradient(left, #f0f0f0 51%,#9f9f9f 100%); /* W3C */
 }
 #tags-box {
 position: absolute;
-background: white;
+background: #f0f0f0;
 display: none;
 overflow: hidden;
 width: 320px;
-height: 430px;
+height: 425px;
 }
 #tags-box div {
@@ -88,22 +88,23 @@ margin-left: 50%;
 width: 620px;
 height: 60px;
 border-radius: 0 0 10px 10px;
-box-shadow: 0 -1px 5px #000000 inset, 0 1px 10px #000000 inset, 0 2px 20px #545454;
+box-shadow: 0 -1px 5px #000000 inset, 0 2px 20px #545454;
 outline: medium none;
 padding: 15px;
-background: #000;
-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#babdb6', endColorstr='#000000');
-background: -webkit-gradient(linear, left top, left bottom, from(#babdb6), to(#000000));
-background: -moz-linear-gradient(top,  #babdb6,  #000000);
+background: #6f2525;
+/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#babdb6', endColorstr='#000000');
+ * background: -webkit-gradient(linear, left top, left bottom, from(#babdb6), to(#000000));
+ * background: -moz-linear-gradient(top,  #babdb6,  #000000);
+ */
 }
 #logo span { display: none; }
 #logo { 
-background: url('../images/icon45.png') no-repeat;
-width: 45px;
-height: 45px;
+background: url('../images/icon55.png') no-repeat;
+width: 55px;
+height: 55px;
 margin: 0px;
-margin-top: 5px;
+/* margin-top: 5px; */
 display: block;
 float: left;
 }
@@ -360,7 +361,7 @@ z-index: 1;
 #pkgs_list, #input-box {
 position: relative;
-width: 410px;
+width: 400px;
 }
 #pkgs_list {
@@ -372,6 +373,7 @@ margin: 0;
 outline: 0 none;
 padding: 3px;
 background: none;
+width: 420px;
 text-align: center;
 }
@@ -16,7 +16,7 @@ display: inline;
 }
 #list-tabs li a { 
-color: black; 
+color: #545454;
 float: left; 
 display: block;
 font-size: 0.8em;
@@ -26,10 +26,13 @@ position: relative;
 left: 1px; 
 text-decoration: none;
 text-transform: uppercase;
+box-shadow: 0 0 5px #dfdfdf;
+border-left: 1px solid #dfdfdf;
 }
 #list-tabs li a:hover { 
-background: #ccc; 
+box-shadow: 0 0 5px #545454 inset;
+color: #000;
 }
 #tab-area { 
@@ -42,23 +45,40 @@ min-height: 250px;
 width: auto;
 }
+li.tab-one a,
+#tab-one {
+background: #FFFFFF;
+}
+
+li.tab-two a,
+#tab-two {
+background: #F5F5F5;
+}
+
+li.tab-three a,
+#tab-three {
+background: #F0F0F0;
+}
+
 #tab-area .tabs { 
 padding: 10px; 
 min-height: 450px; 
 position: absolute; 
 top: -1px; 
 left: 0; 
-width: 320px; 
-background: white;
-}
-
-#tab-area .tabs, #list-tabs li a { 
-border: 1px solid #ccc; 
+width: 320px;
 }
 #tab-three, #tab-two { display: none; }
-#tab-three:target, #tab-two:target, #tab-one:target { z-index: 1; display: block; }
+#tab-three:target, #tab-two:target, #tab-one:target { 
+z-index: 1; 
+display: block; 
+box-shadow: 0 0 5px #dfdfdf;
+border-left: 1px solid #dfdfdf;
+border-bottom: 1px solid #dfdfdf;
+border-radius: 0px 5px 5px 5px;
+}