www/css/style.css

Thu, 10 Jan 2019 20:22:06 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Thu, 10 Jan 2019 20:22:06 +0100
changeset 185
4c25db9e8102
parent 184
3dbe1d2265ed
child 188
0ef62ec2d5b0
permissions
-rw-r--r--

Added configuration settings for MQTT in config.php. Finished screen box sizes for the fermenters monitor. Select beername and code from the current brew products and send it to the fermenter. Added switch commands to the fermenter. Delay data get from the fermenter after sending any command so there is time to process the commands. Turn switches off when the mode changes. Removed 0.2 degrees setpoint diffs for low and high, the fermenter must deal with it. Prevent turning the heater and cooler together on.

/*
 */

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


#MainPanel,
#fermenter {
    width: 1278px;
    height: 628px;
    border: 2px solid #4297d7;
    background: #252526;
    float: left;
    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: 960px;
    height: 200px;
    background: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


.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     ||
 * ||                   |          |                   ||
 * ||                   |          |                   ||
 * ||                   |          |                   ||
 * |+-------------------+          +-------------------+|
 * +----------------------------------------------------+
 */

#fermenter_thermometers {
    width: 960px;
    height: 390px;
    float: left;
    background-color: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}

/*
 * +----------panel_top------------+
 * |+-------------++--------------+|
 * ||             ||   powerled   ||
 * ||  selector   |+--------------+|
 * ||             |+--------------+|
 * ||             || mode control ||
 * |+-------------++--------------+|
 * +-------------------------------+
 * +---------panel_display---------+
 * |+-------------++--------------+|
 * ||  display 1  ||  display 2   ||
 * |+-------------++--------------+|
 * +-------------------------------+
 * +---------panel_control---------+
 * |+--------++---------++--------+|
 * ||  led 1 ||  led 2  ||  led 3 ||
 * |+--------++---------++--------+|
 * |+--------++---------++--------+|
 * ||  sw 1  ||   sw 2  ||  sw 3  ||
 * |+--------++---------++--------+|
 * +-------------------------------+
 * +--------panel_buttons----------+
 * |                               |
 * +-------------------------------+
 */
#fermenter_panel_top {
  width: 290px;
  height: 200px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
}

#fermenter_selector {
  width: 100px;
  height: 198px;
  margin-top: 3px;
  float: left;
}

#fermenter_alarmled {
width: 50px;
height: 30px;
float: left;
text-align: center;
margin-top: 10px;
margin-left: 20px;
}

#fermenter_powerled {
width: 50px;
height: 30px;
float: left;
text-align: center;
margin-top: 10px;
margin-left: 42px;
}


#fermenter_panel_display {
  width: 290px;
  height: 70px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 3px;
}
#fermenter_display {
  width: 145px;
  height: 70px;
  float: left;
  text-align: center;
}


#fermenter_panel_control {
  width: 290px;
  height: 140px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 3px;
}

#fermenter_led1,
#fermenter_led2,
#fermenter_led3 {
  width: 96px;
  height: 30px;
  float: left;
  text-align: center;
  margin-top: 8px;
}

#fermenter_toggle1 {
  float: left;
  margin-left: 29px;
  margin-top: 20px;
}

#fermenter_toggle2,
#fermenter_toggle3 {
  float: left;
  margin-left: 60px;
  margin-top: 20px;
}


#fermenter_panel_buttons {
  width: 290px;
  height: 155px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
}


.LEDred_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #820;
    border-radius: 50%;
    box-shadow: #400 0 0px 1px 1px;
}

.LEDyellow_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #A90;
    border-radius: 50%;
    box-shadow: #440 0 0px 1px 1px;
}

.LEDgreen_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #270;
    border-radius: 50%;
    box-shadow: #250 0 0px 1px 1px;
}

.LEDblue_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #137;
    border-radius: 50%;
    box-shadow: #024 0 0px 1px 1px;
}



/*
 * New recipe wizzard
 */
#hintBase, #hintStyle, #hintEq {
    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;
}
#eqButtonsWrapper {
    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