From: Calin Crisan <ccrisan@gmail.com>
Date: Tue, 1 Dec 2015 12:32:15 +0000 (+0200)
Subject: added camera action buttons; many UI improvements
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=c1b17a4acb9543b7683c113155be1a8fe45d08ef;p=motioneye-debian

added camera action buttons; many UI improvements
---

diff --git a/motioneye/static/css/main.css b/motioneye/static/css/main.css
index 937fc46..2dd979e 100644
--- a/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@ -13,6 +13,7 @@
 
 html {
     height: 100%;
+    -webkit-tap-highlight-color: transparent;
 }
 
 body {
@@ -110,15 +111,28 @@ div.page-container {
     padding: 50px 0.2em 50px 0px;
 }
 
+div.page-container.four-columns {
+    font-size: 12px;
+}
+
 div.page-container.stretched {
     margin-left: 40%;
+    font-size: 16px;
+}
+
+div.page-container.three-columns.stretched {
+    font-size: 12px;
+}
+
+div.page-container.four-columns.stretched {
+    font-size: 10px;
 }
 
 
     /* icons & icon buttons */
 
 div.button.settings-button {
-    margin: 1px;
+    border: 1px solid transparent;
     vertical-align: middle;
     background-image: url(../img/top-bar-buttons.svg);
     background-size: cover;
@@ -132,7 +146,7 @@ div.settings-top-bar.open div.button.settings-button {
 }
 
 div.button.logout-button {
-    margin: 1px;
+    border: 1px solid transparent;
     vertical-align: middle;
     background-image: url(../img/top-bar-buttons.svg);
     background-size: cover;
@@ -155,7 +169,7 @@ body:not(.admin) div.settings-top-bar div.logout-button {
 
 div.button.rem-camera-button {
     display: none;
-    margin: 1px;
+    border: 1px solid transparent;
     vertical-align: middle;
     background-image: url(../img/top-bar-buttons.svg);
     background-size: cover;
@@ -827,6 +841,9 @@ div.camera-frame {
     opacity: 0;
     vertical-align: top;
     cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
 }
 
 div.camera-frame:HOVER {
@@ -877,19 +894,19 @@ div.camera-overlay.visible {
 div.camera-overlay-top,
 div.camera-overlay-bottom {
     position: absolute;
-    background-color: rgba(49, 49, 49, 0.5);
+    background-color: rgba(49, 49, 49, 0.8);
     left: 0px;
     width: 100%;
 }
 
 div.camera-frame:HOVER div.camera-overlay-top,
 div.camera-frame:HOVER div.camera-overlay-bottom {
-    background-color: rgba(65, 65, 65, 0.5);
+    background-color: rgba(65, 65, 65, 0.8);
 }
 
 div.camera-frame.motion-detected div.camera-overlay-top,
 div.camera-frame.motion-detected div.camera-overlay-bottom {
-    background-color: rgba(113, 39, 39, 0.5);
+    background-color: rgba(113, 39, 39, 0.8);
 }
 
 div.camera-overlay-top {
@@ -923,14 +940,9 @@ div.camera-top-buttons {
 div.camera-top-button {
     background-image: url(../img/camera-top-buttons.svg);
     background-size: cover;
-    width: 2em;
-    height: 2em;
+    width: 2.5em;
+    height: 2.5em;
     vertical-align: top;
-    margin-top: 0.25em;
-}
-
-div.camera-top-button:last-child {
-    margin-right: 0.25em;
 }
 
 div.camera-top-button.full-screen {
@@ -952,63 +964,59 @@ div.camera-top-button.media-movies {
 div.camera-overlay-bottom {
     bottom: 0px;
     white-space: nowrap;
-    height: 4.5em;
+    height: 5em;
+}
+
+div.camera-overlay-bottom.few-buttons {
+    height: 2.5em;
 }
 
 div.camera-info {
     display: inline-block;
     white-space: nowrap;
-    width: 33%;
+    width: 50%;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: top;
+    text-align: left;
+    line-height: 5em;
 }
 
-span.camera-info-name {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 50%;
-    text-align: right;
+div.camera-overlay-bottom.few-buttons div.camera-info {
+    line-height: 2.5em;
 }
 
-span.camera-info-value {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 48%;
-    text-align: left;
+span.camera-info {
     padding-left: 0.5em;
-    font-weight: bold;
 }
 
 div.camera-action-buttons {
     display: inline-block;
-    white-space: nowrap;
-    width: 66%;
+    width: 50%;
     vertical-align: top;
     text-align: right;
 }
 
+div.camera-action-buttons-wrapper {
+    width: 10em;
+    display: inline-block;
+    white-space: normal;
+}
+
 div.camera-action-button {
-    background-image: url(../img/camera-top-buttons.svg);
+    background-image: url(../img/camera-action-buttons.svg);
     background-size: cover;
-    width: 4em;
-    height: 4em;
+    width: 2.5em;
+    height: 2.5em;
     vertical-align: top;
-    margin: 0.25em;
 }
 
-/* div.camera-action-button:last-child { */
-/*     margin-right: 0.25em; */
-/* } */
-
 div.camera-action-button.lock {
-    background-position: -100% 0px;
+    background-position: 0px 0px;
 }
 
 div.camera-action-button.unlock {
-    background-position: 0px 0px;
+    background-position: -100% 0px;
 }
 
 div.camera-action-button.light-on {
@@ -1016,11 +1024,27 @@ div.camera-action-button.light-on {
 }
 
 div.camera-action-button.light-off {
-    background-position: -200% 0px;
+    background-position: -300% 0px;
 }
 
-div.camera-action-button.alarm {
-    background-position: -300% 0px;
+div.camera-action-button.alarm-on {
+    background-position: -400% 0px;
+}
+
+div.camera-action-button.alarm-off {
+    background-position: -500% 0px;
+}
+
+div.camera-action-button.snapshot {
+    background-position: -600% 0px;
+}
+
+div.camera-action-button.record-start {
+    background-position: -700% 0px;
+}
+
+div.camera-action-button.record-stop {
+    background-position: -800% 0px;
 }
 
 div.camera-container {
@@ -1095,6 +1119,14 @@ img.camera-progress {
     body {
         font-size: 16px;
     }
+    
+    div.page-container.stretched {
+        font-size: 10px;
+    }
+
+    div.page-container.four-columns.stretched {
+        font-size: 8px;
+    }
 }
 
 @media all and (max-width: 1000px) {
@@ -1102,8 +1134,9 @@ img.camera-progress {
     
     div.page-container.stretched {
         margin-left: 0px;
+        font-size: 16px;
     }
-    
+
     div.settings.open {
         box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
         background-color: rgba(40, 40, 40, 0.9);
@@ -1148,9 +1181,17 @@ img.camera-progress {
     div.settings-top-bar.open {
         min-width: 100%;
     }
+
+    div.page-container.stretched {
+        font-size: 16px;
+    }
 }
 
 @media all and (max-width: 1200px) {
+    div.page-container {
+        font-size: 16px !important;
+    }
+
     div.camera-frame {
         width: 100% !important;
     }
diff --git a/motioneye/static/css/ui.css b/motioneye/static/css/ui.css
index 64d56ed..74ac18e 100644
--- a/motioneye/static/css/ui.css
+++ b/motioneye/static/css/ui.css
@@ -60,7 +60,7 @@ div.button.dialog.default {
 }
 
 div.button.mouse-effect {
-    opacity: 0.7;
+    opacity: 0.8;
     transition: opacity 0.1s ease;
 }
 
@@ -72,6 +72,10 @@ div.button.mouse-effect:ACTIVE {
     opacity: 0.7;
 }
 
+div.icon.mouse-effect:ACTIVE {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 
     /* check box */
 
@@ -370,10 +374,12 @@ span.modal-title {
 
 div.modal-close-button {
     position: absolute;
-    top: 0.2em;
-    right: 0.3em;
-    width: 1.5em;
-    height: 1.5em;
+    top: 0px;
+    right: 0px;
+    margin-top: -5px;
+    margin-right: -5px;
+    width: 2.5em;
+    height: 2.5em;
     background-image: url(../img/camera-top-buttons.svg);
     background-size: cover;
     background-position: -400% 0px;
diff --git a/motioneye/static/img/camera-action-buttons.svg b/motioneye/static/img/camera-action-buttons.svg
new file mode 100644
index 0000000..ee25bc5
--- /dev/null
+++ b/motioneye/static/img/camera-action-buttons.svg
@@ -0,0 +1,210 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="360"
+   height="40"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="camera-action-buttons.svg"
+   inkscape:export-filename="/media/data/projects/motioneye/static/img/top-bar-buttons.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#aaaaaa"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.74509804"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9999999"
+     inkscape:cx="56.963083"
+     inkscape:cy="9.783066"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     inkscape:snap-page="true"
+     inkscape:snap-intersection-paths="true"
+     showguides="false"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4156"
+       empspacing="20"
+       enabled="true"
+       visible="true"
+       snapvisiblegridlinesonly="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1012.3622)">
+    <circle
+       r="13"
+       cy="1032.3623"
+       cx="20.000002"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4108" />
+    <circle
+       r="13"
+       cy="1032.3623"
+       cx="60"
+       id="path3863"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <circle
+       r="13"
+       cy="1032.3623"
+       cx="100"
+       id="circle4211"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:1;fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 100,1025.3622 a 5,5 0 0 0 -5,5 5,5 0 0 0 3,4.5801 l 0,4.4199 4,0 0,-4.4238 a 5,5 0 0 0 3,-4.5762 5,5 0 0 0 -5,-5 z"
+       id="path4219"
+       inkscape:connector-curvature="0" />
+    <circle
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4149"
+       cx="340"
+       cy="1032.3623"
+       r="13" />
+    <path
+       style="fill:#3498db;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 14,1030.3622 0,9 12,0 0,-9 -12,0 z m 6,1.5 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -0.5,1.1152 l 0,2.8848 -2,0 0,-2.8848 a 1.5,1.5 0 0 1 -0.5,-1.1152 1.5,1.5 0 0 1 1.5,-1.5 z"
+       id="path4150"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 16.0001,1030.3622 c 0,-2.4852 1.790817,-4.4998 3.9999,-4.4998 2.209083,0 3.9999,2.0146 3.9999,4.4998"
+       id="path4170"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="csc" />
+    <path
+       id="path4173"
+       d="m 54,1030.3622 0,9 12,0 0,-9 -12,0 z m 6,1.5 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -0.5,1.1152 l 0,2.8848 -2,0 0,-2.8848 a 1.5,1.5 0 0 1 -0.5,-1.1152 1.5,1.5 0 0 1 1.5,-1.5 z"
+       style="fill:#3498db;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:nodetypes="csc"
+       inkscape:connector-curvature="0"
+       id="path4175"
+       d="m 56.450322,1031.0227 c -0.431551,-2.4474 0.982228,-5.7424 3.15775,-6.126 2.175522,-0.3836 3.391928,0.4655 4.720515,2.7369"
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <circle
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4180"
+       cx="140"
+       cy="1032.3623"
+       r="13" />
+    <path
+       id="path4182"
+       d="m 140,1025.3622 a 5,5 0 0 0 -5,5 5,5 0 0 0 3,4.5801 l 0,4.4199 4,0 0,-4.4238 a 5,5 0 0 0 3,-4.5762 5,5 0 0 0 -5,-5 z"
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path4218"
+       d="m 220,1025.3622 c 4,1 2,8 7,11 l -14,0 c 5,-3 3,-10 7,-11 z"
+       style="fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <circle
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4220"
+       cx="220"
+       cy="1032.3623"
+       r="13" />
+    <path
+       style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 222,1038.3622 c 0,1.1046 -0.89543,2 -2,2 -1.10457,0 -2,-0.8954 -2,-2"
+       id="path4222"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="csc" />
+    <path
+       style="fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 180,1025.3622 c 4,1 2,8 7,11 l -14,0 c 5,-3 3,-10 7,-11 z"
+       id="path4225"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+    <circle
+       r="13"
+       cy="1032.3623"
+       cx="180"
+       id="circle4227"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="csc"
+       inkscape:connector-curvature="0"
+       id="path4229"
+       d="m 182,1038.3622 c 0,1.1046 -0.89543,2 -2,2 -1.10457,0 -2,-0.8954 -2,-2"
+       style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <circle
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4233"
+       cx="300"
+       cy="1032.3623"
+       r="13" />
+    <circle
+       style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4235"
+       cx="300"
+       cy="1032.3622"
+       r="6" />
+    <rect
+       style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4239"
+       width="10"
+       height="10"
+       x="335"
+       y="1027.3622" />
+    <circle
+       r="13"
+       cy="1032.3623"
+       cx="260"
+       id="circle4264"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:1;fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 258,1025.3622 -1,2 -2,0 c -1.108,0 -2,0.892 -2,2 l 0,6 c 0,1.108 0.892,2 2,2 l 10,0 c 1.108,0 2,-0.892 2,-2 l 0,-6 c 0,-1.108 -0.892,-2 -2,-2 l -2,0 -1,-2 -4,0 z m 2,3 a 4,4 0 0 1 4,4 4,4 0 0 1 -4,4 4,4 0 0 1 -4,-4 4,4 0 0 1 4,-4 z"
+       id="path4266"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/motioneye/static/img/camera-top-buttons.svg b/motioneye/static/img/camera-top-buttons.svg
index db32747..4d05781 100644
--- a/motioneye/static/img/camera-top-buttons.svg
+++ b/motioneye/static/img/camera-top-buttons.svg
@@ -9,8 +9,8 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="160"
-   height="32"
+   width="200"
+   height="40"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -28,8 +28,8 @@
      inkscape:pageopacity="0.74509804"
      inkscape:pageshadow="2"
      inkscape:zoom="1"
-     inkscape:cx="150.49331"
-     inkscape:cy="16.048896"
+     inkscape:cx="40.412118"
+     inkscape:cy="7.9982113"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -56,7 +56,7 @@
     <inkscape:grid
        type="xygrid"
        id="grid4156"
-       empspacing="8"
+       empspacing="20"
        enabled="true"
        visible="true"
        snapvisiblegridlinesonly="false" />
@@ -77,10 +77,10 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(0,-1020.3622)">
+     transform="translate(0,-1012.3622)">
     <path
        style="fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 108,1030.3622 10,6 -10,6 z"
+       d="m 136,1026.3622 10,6 -10,6 z"
        id="path3819"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cccc" />
@@ -89,84 +89,84 @@
        style="fill:#3498db;fill-opacity:1"
        inkscape:connector-curvature="0"
        id="path3-0"
-       d="m 16.11329,1028.8869 c 1.51525,-1.5152 3.73031,-1.8995 5.60282,-1.1568 l -3.58249,3.5826 c -0.19802,0.1977 -0.19752,0.521 5.1e-4,0.719 l 2.19757,2.1975 c 0.19777,0.1973 0.52181,0.1983 0.71908,0 l 3.58249,-3.5826 c 0.7424,1.8724 0.35802,4.0878 -1.15672,5.6021 -1.31089,1.3115 -3.14663,1.7719 -4.83074,1.3916 l -5.90889,5.9094 c -1.083439,1.0834 -2.8403292,1.0834 -3.9237692,0 -1.0842,-1.0834 -1.0842,-2.8401 0,-3.9243 10e-4,0 0.002,0 0.004,0 l 5.9045692,-5.9051 c -0.37957,-1.6845 0.0811,-3.52 1.39202,-4.8306 z m -6.3112692,13.6744 c 0.5375402,0.5368 1.4082502,0.5368 1.9457902,0 0.536519,-0.5373 0.537029,-1.408 0,-1.9453 -0.53754,-0.5367 -1.40825,-0.5378 -1.9457902,0 -0.53728,0.5373 -0.53703,1.4078 0,1.9459 z" />
+       d="m 20.11329,1024.8869 c 1.51525,-1.5152 3.73031,-1.8995 5.60282,-1.1568 l -3.58249,3.5826 c -0.19802,0.1977 -0.19752,0.521 5.1e-4,0.719 l 2.19757,2.1975 c 0.19777,0.1973 0.52181,0.1983 0.71908,0 l 3.58249,-3.5826 c 0.7424,1.8724 0.35802,4.0878 -1.15672,5.6021 -1.31089,1.3115 -3.14663,1.7719 -4.83074,1.3916 l -5.90889,5.9094 c -1.083439,1.0834 -2.840329,1.0834 -3.923769,0 -1.0842,-1.0834 -1.0842,-2.8401 0,-3.9243 0.001,0 0.002,0 0.004,0 l 5.904569,-5.9051 c -0.37957,-1.6845 0.0811,-3.52 1.39202,-4.8306 z m -6.311269,13.6744 c 0.53754,0.5368 1.40825,0.5368 1.94579,0 0.536519,-0.5373 0.537029,-1.408 0,-1.9453 -0.53754,-0.5367 -1.40825,-0.5378 -1.94579,0 -0.53728,0.5373 -0.53703,1.4078 0,1.9459 z" />
     <circle
        r="13"
-       cy="1036.3623"
-       cx="16.000002"
+       cy="1032.3623"
+       cx="20.000002"
        style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="path4108" />
     <circle
        r="13"
-       cy="1036.3623"
-       cx="48"
+       cy="1032.3623"
+       cx="60"
        id="path3863"
        style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <path
        style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 46,1030.3622 -4,0 0,4"
+       d="m 58,1026.3622 -4,0 0,4"
        id="path3865"
        inkscape:connector-curvature="0" />
     <path
        inkscape:connector-curvature="0"
        id="path3867"
-       d="m 50,1030.3622 4,0 0,4"
+       d="m 62,1026.3622 4,0 0,4"
        style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <path
        style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 46,1042.3622 -4,0 0,-4"
+       d="m 58,1038.3622 -4,0 0,-4"
        id="path3869"
        inkscape:connector-curvature="0" />
     <path
        inkscape:connector-curvature="0"
        id="path3871"
-       d="m 50,1042.3622 4,0 0,-4"
+       d="m 62,1038.3622 4,0 0,-4"
        style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <circle
        r="13"
-       cy="1036.3623"
-       cx="112"
+       cy="1032.3623"
+       cx="140"
        id="circle4192"
        style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <circle
        r="13"
-       cy="1036.3623"
-       cx="80"
+       cy="1032.3623"
+       cx="100"
        id="circle4211"
        style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <path
        sodipodi:nodetypes="ccccc"
        inkscape:connector-curvature="0"
        id="path4213"
-       d="m 73,1030.3622 14,0 0,12 -14,0 z"
+       d="m 93,1026.3622 14,0 0,12 -14,0 z"
        style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <path
-       sodipodi:nodetypes="ccccc"
+       sodipodi:nodetypes="ccccccc"
        inkscape:connector-curvature="0"
        id="path4215"
-       d="m 73,1041.3622 5,-5 3,3 2,-2 4,4"
+       d="m 93,1038.3622 0,-1 5,-5 3,3 2,-2 4,4 0,1"
        style="fill:#3498db;fill-opacity:1;fill-rule:evenodd;stroke:#3498db;stroke-width:1px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" />
     <circle
        style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
        id="path4219"
-       cx="83.5"
-       cy="1033.8622"
+       cx="103.5"
+       cy="1029.8622"
        r="1.5" />
     <circle
        style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="circle4149"
-       cx="144"
-       cy="1036.3623"
+       cx="180"
+       cy="1032.3623"
        r="13" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 139,1031.3622 10,10"
+       d="m 175,1027.3622 10,10"
        id="path4151"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 139,1041.3622 10,-10"
+       d="m 175,1037.3622 10,-10"
        id="path4153"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index 97391c8..39122fb 100644
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -11,6 +11,7 @@ var basePath = null;
 var signatureRegExp = new RegExp('[^a-zA-Z0-9/?_.=&{}\\[\\]":, _-]', 'g');
 var initialConfigFetched = false; /* used to workaround browser extensions that trigger stupid change events */
 var pageContainer = null;
+var overlayVisible = false;
 
 
     /* Object utilities */
@@ -3522,9 +3523,9 @@ function runMediaDialog(cameraId, mediaType) {
         buttonsDiv.show();
         
         if (windowWidth < 1000) {
-            mediaListDiv.width(parseInt(windowWidth * 0.8));
-            mediaListDiv.height(parseInt(windowHeight * 0.7));
-            groupsDiv.width(parseInt(windowWidth * 0.8));
+            mediaListDiv.width(windowWidth - 30);
+            mediaListDiv.height(windowHeight - 140);
+            groupsDiv.width(windowWidth - 30);
             groupsDiv.height('');
             groupsDiv.addClass('small-screen');
         }
@@ -3680,20 +3681,27 @@ function addCameraFrameUi(cameraConfig) {
                     '<div class="camera-overlay-top">' +
                         '<div class="camera-name"><span class="camera-name"></span></div>' +
                         '<div class="camera-top-buttons">' +
-                            '<div class="button camera-top-button mouse-effect full-screen" title="full-screen window"></div>' +
-                            '<div class="button camera-top-button mouse-effect media-pictures" title="pictures"></div>' +
-                            '<div class="button camera-top-button mouse-effect media-movies" title="movies"></div>' +
-                            '<div class="button camera-top-button mouse-effect configure" title="configure"></div>' +
+                            '<div class="button icon camera-top-button mouse-effect full-screen" title="full-screen window"></div>' +
+                            '<div class="button icon camera-top-button mouse-effect media-pictures" title="pictures"></div>' +
+                            '<div class="button icon camera-top-button mouse-effect media-movies" title="movies"></div>' +
+                            '<div class="button icon camera-top-button mouse-effect configure" title="configure"></div>' +
                         '</div>' +
                     '</div>' +
                     '<div class="camera-overlay-bottom">' +
-                        '<div class="camera-info"></div>' +
+                        '<div class="camera-info">' +
+                            '<span class="camera-info fps"></span>' +
+                        '</div>' +
                         '<div class="camera-action-buttons">' +
-                            '<div class="button camera-action-button mouse-effect lock" title="lock"></div>' +
-                            '<div class="button camera-action-button mouse-effect unlock" title="unlock"></div>' +
-                            '<div class="button camera-action-button mouse-effect light-on" title="turn on light"></div>' +
-                            '<div class="button camera-action-button mouse-effect light-off" title="turn off light"></div>' +
-                            '<div class="button camera-action-button mouse-effect alarm" title="alarm"></div>' +
+                        '<div class="camera-action-buttons-wrapper">' +
+                                '<div class="button icon camera-action-button mouse-effect lock" title="lock"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect light-on" title="turn light on"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect alarm-on" title="turn alarm on"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect snapshot" title="take a snapshot"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect unlock" title="unlock"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect light-off" title="turn light off"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect alarm-off" title="turn alarm off"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect record-start" title="record"></div>' +
+                            '</div>' +
                         '</div>' +
                     '</div>' +
                 '</div>' +
@@ -3712,8 +3720,12 @@ function addCameraFrameUi(cameraConfig) {
     var unlockButton = cameraFrameDiv.find('div.camera-action-button.unlock');
     var lightOnButton = cameraFrameDiv.find('div.camera-action-button.light-on');
     var lightOffButton = cameraFrameDiv.find('div.camera-action-button.light-off');
-    var alarmButton = cameraFrameDiv.find('div.camera-action-button.alarm');
+    var alarmOnButton = cameraFrameDiv.find('div.camera-action-button.alarm-on');
+    var alarmOffButton = cameraFrameDiv.find('div.camera-action-button.alarm-off');
+    var snapshotButton = cameraFrameDiv.find('div.camera-action-button.snapshot');
+    var recordButton = cameraFrameDiv.find('div.camera-action-button.record');
     
+    var cameraOverlay = cameraFrameDiv.find('div.camera-overlay');
     var cameraPlaceholder = cameraFrameDiv.find('div.camera-placeholder');
     var cameraProgress = cameraFrameDiv.find('div.camera-progress');
     var cameraImg = cameraFrameDiv.find('img.camera');
@@ -3737,7 +3749,17 @@ function addCameraFrameUi(cameraConfig) {
     progressImg.attr('src', staticPath + 'img/camera-progress.gif');
     
     cameraProgress.click(function () {
-        doFullScreenCamera(cameraId);
+        showCameraOverlay();
+        overlayVisible = true;
+    });
+    
+    cameraOverlay.click(function () {
+        hideCameraOverlay();
+        overlayVisible = false;
+    });
+    
+    cameraOverlay.find('div.camera-overlay-top, div.camera-overlay-bottom').click(function () {
+        return false;
     });
     
     cameraProgress.addClass('visible');
@@ -3789,15 +3811,14 @@ function addCameraFrameUi(cameraConfig) {
         };
     }(cameraId));
     
-    /* add the top button handlers */
-    //TODO 
+    /* add the action button handlers */
+//    if (cameraConfig.at-most-4-buttons) {
+//        cameraOverlay.find('div.camera-overlay-bottom').addClass('few-buttons');
+//    }
+    //TODO add handlers 
     
-    // TODO move these to the refresh function
-    cameraInfoDiv.append('<span class="camera-info-name">frame rate</span>');
-    cameraInfoDiv.append('<span class="camera-info-value">25 fps</span><br>');
-    cameraInfoDiv.append('<span class="camera-info-name">temperature</span>');
-    cameraInfoDiv.append('<span class="camera-info-value">38 deg</span><br>');
-    cameraInfoDiv.css('padding-top', '1em');
+    // TODO move this to the refresh function
+    cameraInfoDiv.append('');
     
     /* error and load handlers */
     cameraImg[0].onerror = function () {
@@ -3875,6 +3896,9 @@ function recreateCameraFrames(cameras) {
             camera = cameras[i];
             addCameraFrameUi(camera);
         }
+
+        /* overlay is always hidden after creating the frames */
+        hideCameraOverlay();
         
         if ($('#cameraSelect').find('option').length < 2 && isAdmin()) {
             /* invite the user to add a camera */
diff --git a/motioneye/static/js/ui.js b/motioneye/static/js/ui.js
index 7dfa9bb..c43d196 100644
--- a/motioneye/static/js/ui.js
+++ b/motioneye/static/js/ui.js
@@ -927,7 +927,7 @@ function makeModalDialogTitleBar(options) {
     titleBar.append(titleSpan);
     
     if (options.closeButton) {
-        var closeButton = $('<div class="button modal-close-button mouse-effect" title="close"></div>');
+        var closeButton = $('<div class="button icon modal-close-button mouse-effect" title="close"></div>');
         closeButton.click(hideModalDialog);
         titleBar.append(closeButton);
     }
diff --git a/motioneye/templates/main.html b/motioneye/templates/main.html
index 3232bf9..66e8acc 100644
--- a/motioneye/templates/main.html
+++ b/motioneye/templates/main.html
@@ -77,10 +77,10 @@
     <div class="header">
         <div class="header-container">
             <div class="settings-top-bar closed">
-                <div class="button settings-button mouse-effect" title="settings"></div
-                ><div class="button logout-button mouse-effect" title="switch user"></div>
+                <div class="button icon settings-button mouse-effect" title="settings"></div
+                ><div class="button icon logout-button mouse-effect" title="switch user"></div>
                 <select class="styled" id="cameraSelect" {% if not add_remove_cameras %}style="display: none;"{% endif %}></select>
-                <div class="button rem-camera-button mouse-effect" id="remCameraButton" title="remove camera" {% if not add_remove_cameras %}style="display: none;"{% endif %}></div>
+                <div class="button icon rem-camera-button mouse-effect" id="remCameraButton" title="remove camera" {% if not add_remove_cameras %}style="display: none;"{% endif %}></div>
                 <div class="button apply-button" id="applyButton">Apply</div>
                 {% if hostname %}<div class="hostname">{{hostname}}</div>{% endif %}
             </div>