Bootstrapify the webui

This commit is contained in:
2012-01-11 00:48:46 +00:00
parent 4486af7be8
commit a6ddb25eae
15 changed files with 1250 additions and 251 deletions

View File

@@ -1,190 +1,118 @@
body {
margin: 0em;
padding: 0em;
background: #a7a09a;
font-family: verdana, helvetica, sans-serif;
}
/**
* StatusBoard normal stylesheet
*
*/
@import url('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css');
@CHARSET "UTF-8";
a {
color: gray;
}
label {
margin-left: 1em;
margin-right: 1em;
}
#container {
width: 75%;
min-width: 75em;
margin: auto;
}
#banner {
margin: 0em;
padding: 0em;
background: #eeeeee;
}
#banner h1 {
padding: 0.5em;
}
#navigation {
background: #eeeeee;
margin-top: 0em;
margin-bottom: 1em;
padding: 0.2em;
}
#navigation ul {
margin: 0em;
padding: 0em 5em;;
list-style: none;
}
#navigation li {
margin: 1em;
padding: 0em;
display: inline;
}
#page-container {
margin: 0em;
padding: 0em;
}
#sidebar {
float: left;
width: 20em;
margin-bottom: 1em;
background: #eeeeee;
}
#page {
margin-left: 21em;
margin-bottom: 1em;
padding: 0.5em;
background: #eeeeee;
}
#footer {
clear: both;
padding: 2em;
font-size: smaller;
font-style: italic;
background: #eeeeee;
color: #333333;
}
#errors {
background: peachpuff;
color: darkred;
margin: 1em;
}
#messages {
background: lightcyan;
color: darkblue;
margin: 1em;
}
/* Centred dialog taken from http://stackoverflow.com/questions/1205457/how-to-design-a-css-for-a-centered-floating-confirm-dialog */
#centrepoint {
top: 50%;
left: 50%;
position: absolute;
}
#dialog {
position: relative;
width: 600px;
margin-left: -300px;
/*height: 20em;*/
margin-top: -20em;
@media all {
body {
margin: 0em;
margin-top: 60px;
padding-top: 40px;
padding: 0em;
font-family: verdana, helvetica, sans-serif;
/* background: #F7F7F7;*/
}
display: none;
background: #eeeeee;
border: 2px solid #a7a09a;
}
#dialogheader {
height: 2em;
width: 100%;
margin: 0.3em;
}
#dialogheadertitle {
color: black;
font-weight: bold;
float: left;
}
#dialogheaderclose {
width: 1.2em;
height: 1.2em;
background-color: crimson;
color: white;
border: 1px solid fireBrick;
float: right;
margin-right: 1em;
text-align: center;
vertical-align: middle;
display: table-cell;
font-weight: bold;
cursor: pointer;
}
#dialogcontent {
padding: 0.5em;
}
.dialogfooterbuttonset {
display: none;
text-align: right;
}
table#settings {
a {
color: gray;
}
label {
margin-left: 1em;
margin-right: 1em;
}
footer {
padding: 2em;
font-size: smaller;
font-style: italic;
color: #333333;
text-align: center;
}
/* Centred dialog taken from http://stackoverflow.com/questions/1205457/how-to-design-a-css-for-a-centered-floating-confirm-dialog */
#centrepoint {
top: 50%;
left: 50%;
position: absolute;
}
#dialog {
position: relative;
width: 600px;
margin-left: -300px;
/*height: 20em;*/
margin-top: -20em;
display: none;
background: #eeeeee;
border: 2px solid #a7a09a;
}
#dialogheader {
height: 2em;
width: 100%;
margin: 0.3em;
}
#dialogheadertitle {
color: black;
font-weight: bold;
float: left;
}
#dialogheaderclose {
width: 1.2em;
height: 1.2em;
background-color: crimson;
color: white;
border: 1px solid fireBrick;
float: right;
margin-right: 1em;
text-align: center;
vertical-align: middle;
display: table-cell;
font-weight: bold;
cursor: pointer;
}
#dialogcontent {
padding: 0.5em;
}
.dialogfooterbuttonset {
display: none;
text-align: right;
}
.default {
background: beige;
color: darkgray;
font-style: italic;
}
.icon {
height: 16px;
width: 16px;
}
form#setup-rips input[type="text"] {
width: 30em;
}
#quantizer-slider {
width: 20em;
}
select.rip-streams {
width: 20em;
}
}
table#settings td {
padding: 1.0em;
border: 1px solid;
border-collapse: collapse;
}
table#settings input[type=text] {
width: 40em;
}
table#settings input.hash_key {
width: 10em;
}
table#settings input.hash_value {
width: 25em;
}
.settings_addfieldcontainer {
text-align: right;
}
.default {
background: beige;
color: darkgray;
font-style: italic;
}
.icon {
height: 16px;
width: 16px;
}
form#setup-rips input[type="text"] {
width: 30em;
}
#quantizer-slider {
width: 20em;
}
select.rip-streams {
width: 20em;
}
@media print {
.no-print {
display: none;
}
body {
margin: 0;
}
}