Mercurial > mbsePi-apps / file diff

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/css/webcam-ng.css	Thu Apr 25 15:10:37 2024 +0200
@@ -0,0 +1,129 @@
+/*
+ * 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);
+}
+