Mercurial > mbsePi-apps / annotate
www-thermferm/css/webcam-ng.css@13555c27b592 (annotated)
www-thermferm/css/webcam-ng.css
Thu, 25 Apr 2024 14:26:47 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Thu, 25 Apr 2024 14:26:47 +0200
- changeset 708
- 13555c27b592
- parent 625
- c36b8a80caee
- permissions
- -rw-r--r--
Version 0.9.19a6. Fixes after a short trial on the production controller. Fixed json for alternate beer termperature sensor. Fixed division by 1000 for the room temperature and humidity values. The dropdown list for devices shows the address instead of description in the list.
| 618 | 1 | /* |
| 625 | 2 | * css file for the webcam screen optimized for bmsapp. |
| 618 | 3 | */ |
| 4 | ||
| 5 | ||
| 6 | body { | |
| 624 | 7 | background: #252526; |
| 618 | 8 | font-family: Verdana, Arial, sans-serif; |
| 9 | margin: 0px; | |
| 10 | } | |
| 11 | ||
| 12 | ||
| 13 | #content { | |
| 14 | width: 768px; | |
| 15 | height: 578px; | |
| 16 | background: #252526; | |
| 17 | float: left; | |
| 624 | 18 | color: #252526; |
| 618 | 19 | } |
| 20 | ||
| 21 | ||
| 22 | #camera_display { | |
| 23 | width: 560px; | |
| 24 | height: 560px; | |
| 25 | float: left; | |
| 26 | background-color: #252526; | |
| 27 | margin: 5px; | |
| 28 | margin-top: 5px; | |
| 29 | border: 2px solid; | |
| 30 | border-color: #59b4d4; | |
| 31 | border-radius: 5px 5px 5px 5px; | |
| 32 | } | |
| 33 | ||
| 34 | ||
| 35 | #camera_controls { | |
| 36 | width: 180px; | |
| 37 | height: 560px; | |
| 38 | float: right; | |
| 39 | background-color: #252526; | |
| 40 | margin: 5px; | |
| 41 | margin-top: 5px; | |
| 42 | border: 2px solid; | |
| 43 | border-color: #59b4d4; | |
| 44 | border-radius: 5px 5px 5px 5px; | |
| 45 | } | |
| 46 | ||
| 47 | ||
| 48 | img { | |
| 49 | float:left; | |
| 50 | margin:0 15px 15px 0; | |
| 51 | padding:1px; | |
| 52 | background:#59b4d4; | |
| 53 | border:1px solid #59b4d4; | |
| 54 | } | |
| 55 | ||
| 56 | /* Source image is 320x240. Increase the size a bit. */ | |
| 57 | #streamimage { | |
| 58 | width: 520px; | |
| 59 | height: 390px; | |
| 60 | margin-top: 83px; | |
| 61 | margin-left: 18px; | |
| 62 | } | |
| 63 | ||
| 64 | ||
| 65 | /* | |
| 66 | * CSS3 transformations: rotate, flip, mirror | |
| 67 | */ | |
| 68 | img.x-rotated-0 {} | |
| 69 | img.x-rotated-90 { | |
| 70 | -moz-transform: rotate(90deg); | |
| 71 | -webkit-transform: rotate(90deg); | |
| 72 | } | |
| 73 | img.x-rotated-180 { | |
| 74 | -moz-transform: rotate(180deg); | |
| 75 | -webkit-transform: rotate(180deg); | |
| 76 | } | |
| 77 | img.x-rotated-270 { | |
| 78 | -moz-transform: rotate(270deg); | |
| 79 | -webkit-transform: rotate(270deg); | |
| 80 | } | |
| 81 | img.x-mirrored-rotated-0 { | |
| 82 | -moz-transform: scaleX(-1); | |
| 83 | -webkit-transform: scaleX(-1); | |
| 84 | } | |
| 85 | img.x-mirrored-rotated-90 { | |
| 86 | -moz-transform: rotate(90deg) scaleX(-1); | |
| 87 | -webkit-transform: rotate(90deg) scaleX(-1); | |
| 88 | } | |
| 89 | img.x-mirrored-rotated-180 { | |
| 90 | -moz-transform: rotate(180deg) scaleX(-1); | |
| 91 | -webkit-transform: rotate(180deg) scaleX(-1); | |
| 92 | } | |
| 93 | img.x-mirrored-rotated-270 { | |
| 94 | -moz-transform: rotate(270deg) scaleX(-1); | |
| 95 | -webkit-transform: rotate(270deg) scaleX(-1); | |
| 96 | } | |
| 97 | img.x-flipped-rotated-0 { | |
| 98 | -moz-transform: scaleY(-1); | |
| 99 | -webkit-transform: scaleY(-1); | |
| 100 | } | |
| 101 | img.x-flipped-rotated-90 { | |
| 102 | -moz-transform: rotate(90deg) scaleY(-1); | |
| 103 | -webkit-transform: rotate(90deg) scaleY(-1); | |
| 104 | } | |
| 105 | img.x-flipped-rotated-180 { | |
| 106 | -moz-transform: rotate(180deg) scaleY(-1); | |
| 107 | -webkit-transform: rotate(180deg) scaleY(-1); | |
| 108 | } | |
| 109 | img.x-flipped-rotated-270 { | |
| 110 | -moz-transform: rotate(270deg) scaleY(-1); | |
| 111 | -webkit-transform: rotate(270deg) scaleY(-1); | |
| 112 | } | |
| 113 | img.x-flipped-mirrored-rotated-0 { | |
| 114 | -moz-transform: scale(-1,-1); | |
| 115 | -webkit-transform: scale(-1,-1); | |
| 116 | } | |
| 117 | img.x-flipped-mirrored-rotated-90 { | |
| 118 | -moz-transform: rotate(90deg) scale(-1,-1); | |
| 119 | -webkit-transform: rotate(90deg) scale(-1,-1); | |
| 120 | } | |
| 121 | img.x-flipped-mirrored-rotated-180 { | |
| 122 | -moz-transform: rotate(180deg) scale(-1,-1); | |
| 123 | -webkit-transform: rotate(180deg) scale(-1,-1); | |
| 124 | } | |
| 125 | img.x-flipped-mirrored-rotated-270 { | |
| 126 | -moz-transform: rotate(270deg) scale(-1,-1); | |
| 127 | -webkit-transform: rotate(270deg) scale(-1,-1); | |
| 128 | } | |
| 129 |
