From bdfac8fa7dc4e33c8dc439775b4e5088d99f3658 Mon Sep 17 00:00:00 2001 From: Alix Guillard Date: Fri, 23 Nov 2012 15:57:33 +0100 Subject: [PATCH] Update style to have the form in one line Update form style in order to fit all the dropdown boxes in a single line if possible. --- src/style-horiz.css | 251 +++++++++++++++++++++++++++++++++++++++ src/style.css | 16 +-- src/templates/index.html | 8 +- 3 files changed, 262 insertions(+), 13 deletions(-) create mode 100644 src/style-horiz.css diff --git a/src/style-horiz.css b/src/style-horiz.css new file mode 100644 index 0000000..a7a4d1a --- /dev/null +++ b/src/style-horiz.css @@ -0,0 +1,251 @@ +1;2c.tbox {position:absolute; display:none; padding:14px 17px; z-index:900} +.tbox {position:absolute; display:none; padding:14px 17px; z-index:900} +.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333} +.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800} +.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat} +.tclose:hover {background-position:0 -30px} + +.clear { + clear:both; +} + +#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0} +#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px} +#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0} +#bluemask {background:#4195aa} +#frameless {padding:0} +#frameless .tclose {left:6px} + + +html, body { + height: 100%; +} + +body { + margin:0; + padding:0; + font-family:Helvetica, Arial, SansSerif; + font-size:1.1em; +} + +#header { + padding:0.8em; + background:#333840; + box-shadow: #333840 0 0 4px 4px; +/* + background:#caecfb; + box-shadow: #caecfb 0 4px 4px; +*/ +} +/* FDDD99 */ +#header H1 { + font-size:1.4em; + margin:0 0 0 10%; + color:white; +/* text-shadow: 1px 1px 0 #caecfb; */ +} + +#header span, #header span a { + color:white; + text-decoration:none; + font-weight:bold; +} + +p { + padding:0.4em; +} + +.form + { + margin:0 auto; + text-align:center; + } + +.form fieldset { + border:0; + margin:0; + padding:0 5px 5px; + float:left; +} + +.form fieldset#submit { + right:50px; + position:absolute; + border:0; +} + +.form select#commandselect { + min-width:300px; + max-width:500px; +} + +.form select#commandselect option { + min-width:300px; + max-width:500px; +} + +.form label { + text-align: left; + display: block; +/* padding-right: 20px; + line-height:32px; + float: left; + width:250px; + margin-top:10px; */ + font-weight:bold; + font-size:0.9em; + } + +.form input, .form select { + display: block; +/* min-width:300px; */ +/* float: left; */ +/* margin-top:10px; */ + font-size:0.9em; + padding:5px; + border-radius: 6px 6px 6px 6px; + border: 1px solid #888888; + background: #E5E5E5; /* for non-css3 browsers */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F6F6F6', endColorstr='#E0E0E0'); /* for IE */ + background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#E0E0E0)); /* for webkit browsers */ + background: -moz-linear-gradient(top, #F6F6F6, #E0E0E0); /* for firefox 3.6+ */ + +} + +.form input:hover, form select:hover, .form input[type=text], .form input[type=text].out{ + background: -moz-linear-gradient(top, #FFFFFF, #F0F0F0); /* for firefox 3.6+ */ +} + +.form input[type=text]:hover, .form input[type=text].hover { + background: -moz-linear-gradient(top, #FFFFFF, #FCFCFC); /* for firefox 3.6+ */ + border: 1px solid #333333; +} +.form select option{ + background-color:#FBFBFB; + padding: 1px 5px; + border:0; +} +.form select#routerselect option[value="2"]:before { + content: url("http://icons.iconarchive.com/icons/jeanette-foshee/simpsons-08/16/Marge-O-Rama-Officer-Marge-Simpson-2-icon.png"); +} + +.form select#routerselect option[value="1"]:before { + content: url("http://icons.iconarchive.com/icons/jeanette-foshee/simpsons-02/16/Folder-Homer-icon.png"); +} + +.form select#routerselect option[value="0"]:before { + content: url("http://icons.iconarchive.com/icons/jeanette-foshee/simpsons-09/16/Lisas-Wedding-Older-Marge-icon.png") +} + +.form br + { + clear: left; + } + +#result { + padding:0.8em; + margin:0.1em; + border:0; //1px dotted black; +} + +#result hr { + border:0; + border-bottom:1px dotted black; + width:100%; + height:1px; +} + +#result pre { + padding:5px; + border:1px solid #FDDD99; + background: #FFFFDD; + font-size:0.9em; +} + +#result table { + border-collapse:collapse; + border-left:1px solid #333; + border-right:1px solid #333; + border-bottom:1px solid #333; + background: #FFFFDD; +} + +#result table { + border-top:1px solid #333; +} + +#result table tr th { + background-color:#CACACA; + font-weight:bold; + padding:5px 12px 5px 12px; +} + +#result table tr td { + padding:4px 12px 4px 12px; + border:0; + font-size:0.9em; +} + +/* + WHITE = 'FFFFFF' + RED = 'FF0000' + GREEN = '00FF00' + BLUE = '0000FF' + YELLOW = 'FFFF00' + BLACK = '000000' +*/ + +#result table tr td.white { + background-color:#FFF; +} + +#result table tr td.red { + background-color:#FF0000; +} + +#result table tr td.green { + background-color:#00FF00; +} + +#result table tr td.blue { + background-color:#0000FF; +} + +#result table tr td.yellow { + background-color:#FFFF00; +} + +#result table tr td.black { + background-color:#000; +} + +#result table tr td. { + background-color:#; +} + + +#wrapper { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto -41px; /* the bottom margin is the negative value of the footer's height */ +} + +.push { + height:40px; +} +#footer { + background:#333840; + box-shadow:0 -4px 4px 2px #333840; + color:white; + margin:0; + padding:0; + position: relative; + width: 100%; + height:40px; +} +#footer p { + margin:0; + padding:0.8em; + font-size:0.8em; +} \ No newline at end of file diff --git a/src/style.css b/src/style.css index 0f58b85..bc1cf68 100644 --- a/src/style.css +++ b/src/style.css @@ -89,14 +89,14 @@ p { min-width:300px; float: left; margin-top:10px; -font-size:16px; -padding:5px; -border-radius: 6px 6px 6px 6px; -border: 1px solid #888888; -background: #E5E5E5; /* for non-css3 browsers */ -filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F6F6F6', endColorstr='#E0E0E0'); /* for IE */ -background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#E0E0E0)); /* for webkit browsers */ -background: -moz-linear-gradient(top, #F6F6F6, #E0E0E0); /* for firefox 3.6+ */ + font-size:16px; + padding:5px; + border-radius: 6px 6px 6px 6px; + border: 1px solid #888888; + background: #E5E5E5; /* for non-css3 browsers */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F6F6F6', endColorstr='#E0E0E0'); /* for IE */ + background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#E0E0E0)); /* for webkit browsers */ + background: -moz-linear-gradient(top, #F6F6F6, #E0E0E0); /* for firefox 3.6+ */ } diff --git a/src/templates/index.html b/src/templates/index.html index 5b29386..218a3b2 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -4,7 +4,7 @@ Universal Looking Glass - + @@ -145,16 +145,14 @@
- -
+
- - +
-- 2.22.0