www/css/style.css

Thu, 13 Dec 2018 20:32:36 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Thu, 13 Dec 2018 20:32:36 +0100
changeset 139
eb1ac7487710
parent 71
e1c50b21b7e3
child 167
dabcd35f8f92
permissions
-rw-r--r--

Added EBC color examples. Added simple progessbars for hop flavour and aroma contribution. We need something better. In the fermentables tab, above the grid display the malt color and OG estimates. Display supplier as well in the fermentables grid.

/*
 */

body {
    background: #ccc;
    font-family: Verdana, Arial, sans-serif;
    margin: 0px;
}



#MainPanel {
    width: 1278px;
    height: 628px;
    border: 2px solid #4297d7;
    background: #252526;
    color: #eeeeee;
}



#water_totals {
    width: 960px;
    background: #353536;
    margin-top: 15px;
    border: 1px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


#about_table {
    width: 960px;
    background: #353536;
    margin: 150px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


#node_table {
    width: 600px;
    background: #353536;
    margin: 50px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}



#fermenter_table {
    width: 720px;
    background: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}



.temperature {
    display: inline-block;
    width: 64px;
    height: 20px;
    white-space: nowrap;
    color: #00eeee;
}



.NUM {
    font-family: "Arial Black", Gadget, sans-serif;
    color: #00eeee;
    padding: 2px;
    margin: 2px;
    background-color: #212121;
}


.ebccolor {
    float: left;
    margin-left: 10px;
    width: 75px;
    height: 23px;
    border:1px solid #59b4d4; 
    border-radius:6px;
    moz-border-radius:6px;
    webkit-border-radius:6px;
    background: #212121;
}


/*
 * +----------------------------------------------------_
 * |+-------------------++--------++-------------------+|
 * ||                   ||        ||                   ||
 * ||			|| chiller||                   ||
 * ||                   ||        ||                   ||
 * ||                   |=--------+|                   ||
 * ||     Air temp      |+--------+|     Beer temp     ||
 * ||                   ||        ||                   ||
 * ||                   || Temps  ||                   ||
 * ||                   || digits ||                   ||
 * |+-------------------++--------++-------------------+|
 * +----------------------------------------------------+
 */

#fermenter_thermometers {
    width: 720px;
    height: 295px;
    background-color: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}



#fermenter_tempdigits {
    width: 145px;
    height: 120px;
    float: left;
    margin-top: 170;
    background-color: #252526;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


/*
.LEDred_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #F40;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px;
}

.LEDred_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #820;
    border-radius: 50%;
    box-shadow: #400 0 0px 1px 1px;
}

.LEDyellow_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #FF0;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px;
}

.LEDyellow_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #A90;
    border-radius: 50%;
    box-shadow: #440 0 0px 1px 1px;
}

.LEDgreen_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #5E0;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px;
}

.LEDgreen_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #270;
    border-radius: 50%;
    box-shadow: #250 0 0px 1px 1px;
}

.LEDblue_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #4AF;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px;
}

.LEDblue_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #137;
    border-radius: 50%;
    box-shadow: #024 0 0px 1px 1px;
}
*/


/*
 * New recipe wizzard
 */
#hintBase, #hintStyle {
    float: left;
    margin-top: 30px;
    margin-right: 20px;
    padding: 5px;
    width: 600px;
    color: yellow;
}
#section {
    margin: 5px;
}
#baseButtonsWrapper {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    width: 160px;
}
#styleButtonsWrapper {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    width: 320px;
}
#completedButtonsWrapper {
    float: right;
    margin-right: 10px;
    width: 320px;
    margin-top: 160px;
}
.nextButton {
    float: right;
    margin-left: 0px;
}
.backButton {
    float: left;
    margin-left: 10px;
}

mercurial