www/css/style.css

Wed, 09 Jan 2019 16:19:26 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Wed, 09 Jan 2019 16:19:26 +0100
changeset 184
3dbe1d2265ed
parent 183
a810539dc218
child 185
4c25db9e8102
permissions
-rw-r--r--

Removed the setpoints and temperatures from the right display panel. Added the current temperatures in text to the gauges as caption. Adjusted the gauge caption font display. Only send commands to the mqtt server just before we fetch fresh data. Added new target temperature settings in the right display box.

/*
 */

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: 280px;
  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: 280px;
  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: 140px;
  height: 70px;
  float: left;
  text-align: center;
}


#fermenter_panel_control {
  width: 280px;
  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: 93px;
  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: 57px;
  margin-top: 20px;
}


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


.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