Mercurial > mbsePi-apps / file diff

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/css/webcam.css	Sun Mar 31 13:57:25 2019 +0200
@@ -0,0 +1,137 @@
+/*
+ * css file for the webcam screen.
+ */
+
+
+body {
+    background: #ccc;
+    font-family: Verdana, Arial, sans-serif;
+    margin: 0px;
+}
+
+
+#jqxWidget {
+    width: 1280px;
+    height: 630px;
+    float: left;
+}
+
+
+#content {
+    width: 1278px;
+    height: 628px;
+    border: 2px solid #4297d7;
+    background: #252526;
+    float: left;
+    color: #eeeeee;
+}
+
+
+#camera_display {
+    width: 800px; 
+    height: 610px; 
+    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: 448px;
+    height: 610px;
+    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: 105px;
+    margin-left: 135px;
+}
+
+
+/*
+ *  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);
+}
+