www/css/style.css

Wed, 30 Jan 2019 16:40:23 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Wed, 30 Jan 2019 16:40:23 +0100
changeset 221
a8aabb63fbcc
parent 189
6470e5c6a001
child 278
dc22dd5d77fd
permissions
-rw-r--r--

Added two missing fields in getfermentablesources.php. When getting a single recipe from the database, update the fermentables json data with available inventory and ingredient. Added inventory column in the fermentable grid. Added ingredient selection in the fermentable popup window to replace ingredient.

/*
 */

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

#fermenter_thermometers {
    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 {
  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;
}


#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 {
  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