www/css/webcam-ng.css

Fri, 03 May 2024 14:14:01 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Fri, 03 May 2024 14:14:01 +0200
changeset 717
22dd7ab614e5
parent 710
abe60578d695
permissions
-rw-r--r--

Add new fermenter adds dummy yeast temperatures. Periodic thermferm unit logging adds the unit alias name. Added Green LED hide color. Moved getglobal.php to dbglobal.php. Adjusted several record types in global and fermenter javascript records so there is less guesswork. Only display control leds and switches for defined equipment.

/*
 * css file for the webcam screen optimized for bmsapp.
 */


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


#content {
    width: 768px;
    height: 578px;
    background: #252526;
    float: left;
    color: #252526;
}


#camera_display {
    width: 560px; 
    height: 560px; 
    float: left;
    background-color: #252526;
    margin: 5px;
    margin-top: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


#camera_controls {
    width: 180px;
    height: 560px;
    float: right;
    background-color: #252526;
    margin: 5px;
    margin-top: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


img {
    float:left;
    margin:0 15px 15px 0;
    padding:1px;
    background:#59b4d4;
    border:1px solid #59b4d4;
}

/* Source image is 320x240. Increase the size a bit. */
#streamimage {
    width: 520px;
    height: 390px;
    margin-top: 83px;
    margin-left: 18px;
}


/*
 *  CSS3 transformations: rotate, flip, mirror
 */
img.x-rotated-0 {}
img.x-rotated-90 {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
img.x-rotated-180 {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
img.x-rotated-270 {
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
}
img.x-mirrored-rotated-0 {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}
img.x-mirrored-rotated-90 {
    -moz-transform: rotate(90deg) scaleX(-1);
    -webkit-transform: rotate(90deg) scaleX(-1);
}
img.x-mirrored-rotated-180 {
    -moz-transform: rotate(180deg) scaleX(-1);
    -webkit-transform: rotate(180deg) scaleX(-1);
}
img.x-mirrored-rotated-270 {
    -moz-transform: rotate(270deg) scaleX(-1);
    -webkit-transform: rotate(270deg) scaleX(-1);
}
img.x-flipped-rotated-0 {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
}
img.x-flipped-rotated-90 {
    -moz-transform: rotate(90deg) scaleY(-1);
    -webkit-transform: rotate(90deg) scaleY(-1);
}
img.x-flipped-rotated-180 {
    -moz-transform: rotate(180deg) scaleY(-1);
    -webkit-transform: rotate(180deg) scaleY(-1);
}
img.x-flipped-rotated-270 {
    -moz-transform: rotate(270deg) scaleY(-1);
    -webkit-transform: rotate(270deg) scaleY(-1);
}
img.x-flipped-mirrored-rotated-0 {
    -moz-transform: scale(-1,-1);
    -webkit-transform: scale(-1,-1);
}
img.x-flipped-mirrored-rotated-90 {
    -moz-transform: rotate(90deg) scale(-1,-1);
    -webkit-transform: rotate(90deg) scale(-1,-1);
}
img.x-flipped-mirrored-rotated-180 {
    -moz-transform: rotate(180deg) scale(-1,-1);
    -webkit-transform: rotate(180deg) scale(-1,-1);
}
img.x-flipped-mirrored-rotated-270 {
    -moz-transform: rotate(270deg) scale(-1,-1);
    -webkit-transform: rotate(270deg) scale(-1,-1);
}

mercurial