www/css/style.css

Sun, 23 May 2021 16:41:35 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Sun, 23 May 2021 16:41:35 +0200
changeset 752
f68e3bbc1ada
parent 570
c8a20234d7e7
child 764
e95744b6b31d
permissions
-rw-r--r--

Fermentables, hops, miscs and yeast now have tests against the added moment with the brewing stage. Added to inventory edit rows, delete rows, and pick choices for the moment to add or edit. Some more popups to explain certain blocks.

/* local style for bms web
 */

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


#MainPanel,
#fermenter,
#co2meter,
#ispindel {
    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;
}


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


#export_table,
#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,
#co2meter_table,
#ispindel_table {
    width: 960px;
    height: 210px;
    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     ||
 * ||    Temperature    |          |     Pressure      ||
 * ||                   |          |                   ||
 * ||                   |          |                   ||
 * ||                   |          |                   ||
 * |+-------------------+          +-------------------+|
 * +----------------------------------------------------+
 */

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

/*
 * +----------panel_top------------+
 * |  door light alarm power LEDs  |
 * |                               |
 * +-------------------------------+
 * +---------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,
#co2meter_panel_top,
#ispindel_panel_top {
  width: 290px;
  height: 100px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
}

#fermenter_doorled,
#fermenter_lightled,
#fermenter_alarmled,
#fermenter_powerled {
  width: 50px;
  height: 30px;
  float: left;
  text-align: center;
  margin-top: 15px;
  margin-left: 20px;
}

#co2meter_alarmled,
#co2meter_powerled,
#ispindel_alarmled,
#ispindel_powerled {
  width: 50px;
  height: 30px;
  float: right;
  text-align: center;
  margin-top: 15px;
  margin-right: 20px;
}

#co2meter_panel_display,
#ispindel_panel_display {
  width: 290px;
  height: 260px;
  float: right;
  margin: 5px;
  margin-top: 3px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
}

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


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

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

#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,
#co2meter_panel_buttons,
#ispindel_panel_buttons {
  width: 290px;
  height: 227px;
  float: right;
  margin: 5px;
  margin-top: 3px;
  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