Mercurial > mbsePi-apps / file revision

/*
 * 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);
}