theme with bg class=glass gradient

Valessio Soares de Brito
1 parent e2af716a
Showing 5 changed files with 106 additions and 71 deletions Show diff stats
src/web/static/coda-slider-2.0/stylesheets/coda-slider-2.0.css
src/web/static/css/style.css
src/web/static/css/survey.css
src/web/templates/layout.html
src/web/templates/survey.html
@@ -22,7 +22,7 @@
 	.coda-slider, .coda-slider .panel { width: 600px } 
 	/* Change margin and width of the slider (with dynamic arrows) */
-	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px }
+	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 500px }
 	.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
 	/* Arrow styling */
@@ -51,4 +51,4 @@
 	.coda-slider .panel-container { position: relative }
 	.coda-nav-left, .coda-nav-right { float: left }
 	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
-	
 \ No newline at end of file
+	
@@ -46,7 +46,6 @@ caption, th, td { text-align: left; font-weight: normal; }
 blockquote:before, blockquote:after, q:before, q:after { content: ""; }
-
 /*
  * Layout, font, size.. colors..
  */
@@ -70,14 +69,6 @@ margin-left: auto;
 background-color: white;
 border-radius: 10px;
 box-shadow: 0 2px 20px #545454;
-background: #e0e0e0; /* Old browsers: generate by http://www.colorzilla.com/gradient-editor/ */
-background: -moz-linear-gradient(top, #e0e0e0 0%, #ffffff 46%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(46%,#ffffff)); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* Opera11.10+ */
-background: -ms-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* IE10+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
-background: linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* W3C */
 }
 #header {
@@ -91,10 +82,6 @@ border-radius: 0 0 20px 20px;
 box-shadow: 0 2px 20px #545454;
 outline: medium none;
 padding: 15px;
-background: #eeeeec; 
-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeec', endColorstr='#babdb6');
-background: -webkit-gradient(linear, left top, left bottom, from(#babdb6), to(#babdb6));
-background: -moz-linear-gradient(top,  #eeeeec,  #babdb6);
 }
 #logo span { display: none; }
@@ -213,10 +200,12 @@ margin-top: 0.5em;
 h1 {
 font-weight: normal;
 font-size: 1.8em;
+color: #4b86d1;
 }
 h2 {
 font-size: 1.4em;
 font-weight: normal;
+color: #678cbb;
 }
 h3 {
 font-size: 1.125em;
@@ -258,36 +247,6 @@ margin: 0;
 padding:0;
 }
-/* Gray Box */
-
-.graybox { 
-background: #dfdfdf;
-border-radius: 5px;
-padding: 5px;
-}
-
-.horiz-grad {
-background: #dfdfdf; /* Old browsers */
-background: -moz-linear-gradient(left, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, right top, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
-background: -ms-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
-background: linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* W3C */
-}
-
-.vert-grad {
-background: #dfdfdf; /* Old browsers */
-background: -moz-linear-gradient(top, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
-background: -ms-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
-background: linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* W3C */
-}
-
 /* Tip */
 div.tip
 , div.important
@@ -302,6 +261,8 @@ font-size: 0.75em;
 line-height: 2em;
 background-color:#FFFFCB;
 border:0.15em solid #CCCCA3;
+border-radius: 10px;
+box-shadow: 0 1px 5px #545454;
 }
 div.tip p
 , div.important p
@@ -330,13 +291,11 @@ background-image: url(&#39;../images/admon-note.png&#39;);
 #recommender-box { 
 position: relative;
 margin:0;
-/* width: 560px; FIXME: remove logo */
-/* float: right; */
 vertical-align: top;
 border: 1px solid #888a85;
 border-radius: 4px;
 box-shadow: 0 1px 4px gray inset;
-background: white;
+background: #ffffff;
 z-index: 3;
 }
@@ -394,13 +353,9 @@ position: relative;
 border: 1px solid #888a85;
 box-shadow: 0 1px 4px gray inset;
 border-radius: 0;
-background: #ffffff; /* for non-css3 browsers */
-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d3d7cf'); /* for IE */
-background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d3d7cf)); /* for webkit browsers */
-background: -moz-linear-gradient(top,  #ffffff,  #d3d7cf); /* for firefox 3.6+ */ 
 color: #585C60;
 font-size: 12px;
-font-weight: 600;
+font-weight: bold;
 width: 135px;
 height: 30px;
 line-height: 14px;
@@ -409,16 +364,12 @@ padding: 5px;
 position: absolute;
 right: -1px;
 top: -1px;
-text-shadow: 0 1px 0 gray;
 z-index: 2;
 cursor: pointer;
 }
 #submit-button:hover {
-background: #d3d7cf;
-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d7cf', endColorstr='#d3d7cf');
-background: -webkit-gradient(linear, left top, left bottom, from(#d3d7cf), to(#d3d7cf));
-background: -moz-linear-gradient(top,  #d3d7cf,  #d3d7cf);
+background: #ffffff; 
 }
 /* Advance Query */
@@ -461,10 +412,6 @@ margin: 10px;
 display: none;
 position: absolute;
 top: 0px;
-background: #fef7bc;
-padding: 10px;
-border-radius: 10px;
-box-shadow: 0 1px 10px #545454;
 z-index: 1;
 }
@@ -473,3 +420,43 @@ display: block;
 }
+/* Gradients */
+
+.graybox { 
+background: #dfdfdf;
+border-radius: 5px;
+padding: 5px;
+}
+
+.horiz-grad {
+background: #dfdfdf; /* Old browsers */
+background: -moz-linear-gradient(left, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, right top, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
+background: -ms-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
+background: linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* W3C */
+}
+
+.vert-grad {
+background: #dfdfdf; /* Old browsers */
+background: -moz-linear-gradient(top, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
+background: -ms-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+background: linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* W3C */
+}
+
+.glass {
+background: #e2e2e2; /* Old browsers */
+background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera11.10+ */
+background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
+background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
+}
@@ -3,6 +3,16 @@ display: block;
 position: absolute;
 top: 0px;
 left: 0px;
+padding: 0px;
+}
+
+#header,
+#recommender-box {
+height: 40px;
+}
+
+#submit-button {
+height: 42px;
 }
 #tip-upload {
@@ -10,6 +20,22 @@ top: 40px;
 width: 420px;
 }
+#tip-finish,
+#tip-strategy .tip {
+display: none;
+position: absolute;
+top: 25px;
+width: 250px;
+right: 0px;
+font-size: 11px;
+font-weight: normal;
+color: #000000;
+}
+
+#finish-button:hover #tip-finish,
+#tip-strategy:hover .tip { display: block; }
+
+
 .innertube {
 margin: 30px;
 }
@@ -57,10 +83,28 @@ list-style: none;
 margin-bottom: 10px;
 }
-/* Panel */
+#strategy-button,
+#finish-button {
+border: 1px solid #888a85;
+box-shadow: 0 1px 4px gray inset;
+border-radius: 5px;
+color: #585C60;
+font-size: 12px;
+font-weight: 600;
+width: 135px;
+height: 30px;
+line-height: 14px;
+margin: 0;
+margin-left: 10px;
+padding: 5px;
+z-index: 2;
+cursor: pointer;
+}
-#panel-controls {
-float: right;
+#panel-controls,
+#controls-form { 
+float: right; 
+position: relative;
 }
@@ -56,14 +56,14 @@ if ((u==null) &amp;&amp; (x==null) || (x==&quot;Write your list App here or send a file list 
 <body class="$content.mod">
-<div id="wrap">
-<div id="header"> 
+<div id="wrap" class="glass">
+<div id="header" class="glass"> 
   <a href="$url_base" title="AppRecommender"><h1 id="logo"><span>AppRecommender</span></h1></a>
     <div id="recommender-box">
     <form action="apprec" enctype="multipart/form-data" method="post" name="weboptions" onsubmit="return validateForm()">
       <fieldset>
 	<div id="submit-box">
-	<input type="submit" value="RECOMMENDER" id="submit-button"><br />
+	<input type="submit" value="RECOMMENDER" id="submit-button" class="glass"><br />
         <a id="advanced-button">advanced query?</a>
 	</div>
 	<div id="input-box">
@@ -80,7 +80,7 @@ if ((u==null) &amp;&amp; (x==null) || (x==&quot;Write your list App here or send a file list 
 	<p>
 	   <label title="Upload file">Upload file: <input type="file" name="pkgs_file" size="20" /></label>
 	</p>
-	<div id="tip-upload">
+	<div id="tip-upload" class="tip important">
 	<p>
 	You can use file <strong>/var/log/popularity-contest</strong> or create a with <strong>dpkg</strong>, use:
 	</p>
@@ -5,7 +5,6 @@ $var cssfiles: static/coda-slider-2.0/stylesheets/coda-slider-2.0.css static/css
 $var jsfiles: static/coda-slider-2.0/javascripts/jquery-1.3.2.min.js static/coda-slider-2.0/javascripts/jquery.coda-slider-2.0.js static/coda-slider-2.0/javascripts/jquery.easing.1.3.js static/js/facebox.js
-<!-- survey slides -->
 <script type="text/javascript">
     $$(document).ready(function() {
         $$('a[rel*=facebox]').facebox({
@@ -62,7 +61,12 @@ $for pkg in pkg_details:
 </div><!-- .coda-slider -->
 </div><!-- .coda-slider-wrapper -->
-<input id="conclude-button" type="submit" value="Conclude" />
+<div id="controls-form">
+<a href="#finish" id="finish-button" class="glass">Finish 
+  <div class="tip important" id="tip-finish"><p>Tem certeza que não gostaria de avaliar uma nova estratégia? </p></div>
+</a>
+<label for="strategy_button" id="tip-strategy"><div class="tip note"><p> Gerar um novo resultado com uma estratégia diferente para mesma lista de pacotes. </p></div><input id="strategy-button" name="strategy_button" type="submit" value="New Strategy" class="glass" /></label>
+</div>
 </form>
	@@ -3,6 +3,16 @@ display: block;		@@ -3,6 +3,16 @@ display: block;
3	position: absolute;	3	position: absolute;
4	top: 0px;	4	top: 0px;
5	left: 0px;	5	left: 0px;
		6	+padding: 0px;
		7	+}
		8	+
		9	+#header,
		10	+#recommender-box {
		11	+height: 40px;
		12	+}
		13	+
		14	+#submit-button {
		15	+height: 42px;
6	}	16	}
7		17
8	#tip-upload {	18	#tip-upload {
	@@ -10,6 +20,22 @@ top: 40px;		@@ -10,6 +20,22 @@ top: 40px;
10	width: 420px;	20	width: 420px;
11	}	21	}
12		22
		23	+#tip-finish,
		24	+#tip-strategy .tip {
		25	+display: none;
		26	+position: absolute;
		27	+top: 25px;
		28	+width: 250px;
		29	+right: 0px;
		30	+font-size: 11px;
		31	+font-weight: normal;
		32	+color: #000000;
		33	+}
		34	+
		35	+#finish-button:hover #tip-finish,
		36	+#tip-strategy:hover .tip { display: block; }
		37	+
		38	+
13	.innertube {	39	.innertube {
14	margin: 30px;	40	margin: 30px;
15	}	41	}
	@@ -57,10 +83,28 @@ list-style: none;		@@ -57,10 +83,28 @@ list-style: none;
57	margin-bottom: 10px;	83	margin-bottom: 10px;
58	}	84	}
59		85
60	-/* Panel */	86	+#strategy-button,
		87	+#finish-button {
		88	+border: 1px solid #888a85;
		89	+box-shadow: 0 1px 4px gray inset;
		90	+border-radius: 5px;
		91	+color: #585C60;
		92	+font-size: 12px;
		93	+font-weight: 600;
		94	+width: 135px;
		95	+height: 30px;
		96	+line-height: 14px;
		97	+margin: 0;
		98	+margin-left: 10px;
		99	+padding: 5px;
		100	+z-index: 2;
		101	+cursor: pointer;
		102	+}
61		103
62	-#panel-controls {
63	-float: right;	104	+#panel-controls,
		105	+#controls-form {
		106	+float: right;
		107	+position: relative;
64	}	108	}
65		109
66		110