@@ -31,7 +31,7 @@ A web responsive interface to manage
here (in the assets section).
+An Android app is available for download
here (in the assets section).
diff --git a/docker/init b/docker/init
index e37b61a0..b8912697 100644
--- a/docker/init
+++ b/docker/init
@@ -44,6 +44,9 @@ fi
# Start go2rtc in background
/bin/su -s /bin/bash -c "/usr/local/bin/go2rtc -c $GO2RTC_DIR/go2rtc.yml >/dev/null 2>/dev/null &" www-data
+# Start shell service in background
+/bin/bash "$WWW_DIR/bin/service.sh" &
+
# Start motionui service
/bin/su -s /bin/bash -c "php $WWW_DIR/tools/service.php" www-data
diff --git a/www/bin/service.sh b/www/bin/service.sh
new file mode 100644
index 00000000..0ce8114c
--- /dev/null
+++ b/www/bin/service.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Run commands every day
+while true; do
+ /usr/bin/apt-get clean all > /dev/null
+ /usr/bin/apt-get update -y -qq > /dev/null
+
+ # Sleep for a day
+ /usr/bin/sleep 86400
+done
\ No newline at end of file
diff --git a/www/controllers/Go2rtc/Go2rtc.php b/www/controllers/Go2rtc/Go2rtc.php
index 397a24c3..aad0c85e 100644
--- a/www/controllers/Go2rtc/Go2rtc.php
+++ b/www/controllers/Go2rtc/Go2rtc.php
@@ -56,13 +56,10 @@ public function addStream(int $id, array $params)
* Rotate filter
*/
if ($rotate == 90) {
- // $ffmpegParams .= ' -vf "transpose=1"';
$ffmpegParams .= '#rotate=90';
} else if ($rotate == 180) {
- // $ffmpegParams .= ' -vf "transpose=2,transpose=2"';
$ffmpegParams .= '#rotate=180';
} else if ($rotate == 270) {
- // $ffmpegParams .= ' -vf "transpose=2"';
$ffmpegParams .= '#rotate=270';
}
diff --git a/www/controllers/Motion/Event.php b/www/controllers/Motion/Event.php
index 4d60e407..002e85c6 100644
--- a/www/controllers/Motion/Event.php
+++ b/www/controllers/Motion/Event.php
@@ -120,7 +120,7 @@ public function attachFile(string $motionEventId, string $file, int $width, int
* Create thumbnail if not already exist
*/
if (!file_exists($file . '.thumbnail')) {
- $myprocess = new \Controllers\Process('/usr/bin/ffmpeg -loglevel error -ss 00:00:01.00 -i ' . $file . ' -vf \'scale=320:320:force_original_aspect_ratio=decrease\' -vframes 1 ' . $file . '.thumbnail.jpg');
+ $myprocess = new \Controllers\Process('/usr/bin/ffmpeg -loglevel error -ss 00:00:00.10 -i ' . $file . ' -vf \'scale=320:320:force_original_aspect_ratio=decrease\' -vframes 1 ' . $file . '.thumbnail.jpg');
$myprocess->execute();
$myprocess->close();
}
diff --git a/www/public/resources/js/camera.js b/www/public/resources/js/camera.js
index 778f08e3..6989816c 100644
--- a/www/public/resources/js/camera.js
+++ b/www/public/resources/js/camera.js
@@ -380,13 +380,13 @@ $(document).on('click','#timelapse-play-btn',function () {
* @returns
*/
async function playTimelapse()
-{
+{
/**
* Retrieve camera id, date, max range and all pictures names
*/
var cameraId = $('#picture-slider').attr('camera-id');
var date = $('#picture-slider').attr('date');
- var max = $('#picture-slider').attr('max');
+ var max = parseInt($('#picture-slider').attr('max'));
var pictures = $('timelapse-data').attr('pictures');
/**
@@ -443,7 +443,7 @@ async function playTimelapse()
/**
* Convert max to integer
*/
- var max = parseInt(max);
+ max = parseInt(max);
/**
* If current index is greater or equal to max, then reset index to 0
@@ -455,81 +455,92 @@ async function playTimelapse()
}
/**
- * The loop will run until the index reaches the max range
+ * Define timelapse object
*/
- while (index < max + 1) {
- /**
- * Quit if timelapse div was closed
- */
- if ($('#timelapse').length == 0) {
- return;
- }
-
- /**
- * Quit if timelapse is in pause mode
- */
- if ($('#picture-slider').attr('pause') == 'true') {
- return;
- }
-
- /**
- * Quit if timelapse-date-changed is set in local storage
- * This means that the user has changed the date while the timelapse is playing so we stop the timelapse and
- * remove the 'timelapse-date-changed' from local storage
- */
- if (localStorage.getItem('timelapse-date-changed')) {
- localStorage.removeItem('timelapse-date-changed');
- return;
- }
-
- /**
- * Get JPEG picture filename from the array
- * e.g. timelapse_08-17-50.jpg
- */
- var picture = pictures[index];
+ const timelapse = {
+ images: pictures,
+ index: index,
+ imgElement: $("#timelapse-picture"),
+ loadNextImage: function() {
+ if (this.index < this.images.length) {
+ /**
+ * Quit if timelapse div was closed
+ */
+ if ($('#timelapse').length == 0) {
+ return;
+ }
- /**
- * Define the path to the target picture
- * e.g. /timelapse?id=14&picture=2024-06-04/timelapse_08-17-50.jpg
- */
- var path = '/timelapse?id=' + cameraId + '&picture=' + date + '/' + picture;
+ /**
+ * Quit if timelapse is in pause mode
+ */
+ if ($('#picture-slider').attr('pause') == 'true') {
+ return;
+ }
- /**
- * Extract the time from the picture name
- */
- var time = picture.split('_')[1].split('.')[0];
- var hour = time.split('-')[0];
- var min = time.split('-')[1];
- var sec = time.split('-')[2];
+ /**
+ * Quit if timelapse-date-changed is set in local storage
+ * This means that the user has changed the date while the timelapse is playing so we stop the timelapse and
+ * remove the 'timelapse-date-changed' from local storage
+ */
+ if (localStorage.getItem('timelapse-date-changed')) {
+ localStorage.removeItem('timelapse-date-changed');
+ return;
+ }
- /**
- * Update the image and the slider value
- */
- $('#timelapse-picture').attr('src', path);
- $('#picture-slider').val(index);
+ /**
+ * Get JPEG picture filename from the array
+ * e.g. timelapse_08-17-50.jpg
+ */
+ var picture = pictures[this.index];
- /**
- * Update the picture time
- */
- $('#picture-time').text(hour + ':' + min + ':' + sec);
+ /**
+ * Define the path to the target picture
+ * e.g. /timelapse?id=14&picture=2024-06-04/timelapse_08-17-50.jpg
+ */
+ var path = '/timelapse?id=' + cameraId + '&picture=' + date + '/' + picture;
- /**
- * Wait 100ms before updating the index
- */
- await new Promise(r => setTimeout(r, 100));
+ /**
+ * Extract the time from the picture name
+ */
+ var time = picture.split('_')[1].split('.')[0];
+ var hour = time.split('-')[0];
+ var min = time.split('-')[1];
+ var sec = time.split('-')[2];
+
+ /**
+ * Create a new Image object and set its src to the target picture path
+ */
+ const nextImage = new Image();
+ nextImage.src = path;
- /**
- * Always define index from the current slider value (in case the user changed the slider value while the timelapse is playing)
- * and increment it by 1
- */
- index = parseInt($('#picture-slider').val()) + 1;
- }
+ /**
+ * Once the image is fully loaded, update the image
![]()
and the slider value
+ */
+ nextImage.onload = () => {
+ // Image is fully loaded, update the slider value
+ $('#picture-slider').val(this.index);
+
+ // Update the picture time
+ $('#picture-time').text(hour + ':' + min + ':' + sec);
+
+ this.imgElement.attr("src", path);
+
+ /**
+ * Always define index from the current slider value (in case the user changed the slider value while the timelapse is playing)
+ * and increment it by 1
+ */
+ this.index++;
+
+ setTimeout(() => this.loadNextImage(), 150); // Pause
+ };
+ }
+ }
+ };
/**
- * Change button to 'play' button
+ * Start timelapse
*/
- $('#timelapse-pause-btn').hide();
- $('#timelapse-play-btn').css('display', 'inline-flex');
+ timelapse.loadNextImage();
}
/**
diff --git a/www/public/resources/styles/common.css b/www/public/resources/styles/common.css
index 289e794b..a42f9629 100644
--- a/www/public/resources/styles/common.css
+++ b/www/public/resources/styles/common.css
@@ -1,5 +1,5 @@
/**
- * v1.13
+ * v1.15
*/
@font-face{font-family: 'Roboto'; src: url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');}
@@ -33,6 +33,10 @@ p, label, a, i, span {
color: white;
}
+a {
+ color: inherit;
+}
+
span {
line-height: initial !important;
}
@@ -143,7 +147,10 @@ pre.codeblock {
.baseline { vertical-align: baseline; }
.vertical-align-text-top{vertical-align: text-top !important}
.font-size-10{font-size:10px !important}.font-size-11{font-size: 11px !important}.font-size-12{font-size: 12px !important}.font-size-13{font-size: 13px !important}.font-size-14{font-size: 14px !important}.font-size-15{font-size: 15px !important}.font-size-16{font-size: 16px !important}.font-size-17{font-size: 17px !important}.font-size-18{font-size: 18px !important}.font-size-20{font-size: 20px !important}.font-size-22{font-size: 22px !important}
-.mediumopacity,.mediumopacity-cst{opacity: 0.55}
+.mediumopacity,.mediumopacity-cst{
+ color: #97a5b4;
+ filter: brightness(0) saturate(100%) invert(72%) sepia(2%) saturate(2168%) hue-rotate(169deg) brightness(89%) contrast(95%);
+}
.lowopacity,.lowopacity-cst{
color: #8A99AA;
filter: brightness(0) saturate(100%) invert(65%) sepia(17%) saturate(341%) hue-rotate(171deg) brightness(90%) contrast(88%);
@@ -166,8 +173,9 @@ pre.codeblock {
.grid {display: grid}
.grid-2 {grid-template-columns: 1fr 1fr !important}
.grid-2-1 {grid-template-columns: 2fr 1fr !important}
-.grid-3 {grid-template-columns: 1fr 1fr 1fr !important}
-.grid-4 {grid-template-columns: 1fr 1fr 1fr 1fr !important}
+.grid-3 {grid-template-columns: repeat(3, 1fr) !important}
+.grid-4 {grid-template-columns: repeat(4, 1fr) !important}
+.grid-5 {grid-template-columns: repeat(5, 1fr) !important}
.grid-fr-1-2 {grid-template-columns: 1fr 2fr !important}
.grid-fr-2-1 {grid-template-columns: 2fr 1fr !important}
.grid-fr-4-1 {grid-template-columns: 4fr 1fr !important}
@@ -175,6 +183,7 @@ pre.codeblock {
.grid-fr-auto-1-3 {grid-template-columns: auto 1fr 3fr !important}
.grid-fr-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important}
.grid-fr-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important}
+.grid-40p-45p-10p{grid-template-columns: 40% 45% 10% !important}
.justify-center {justify-content: center}
.justify-space-between {justify-content: space-between}
.justify-space-around{justify-content: space-around}
@@ -182,23 +191,26 @@ pre.codeblock {
.justify-items-center{justify-items: center}
.align-content-center {align-content: center}
.align-content-right {align-content: flex-end}
+.align-item-start {align-items: start !important}
+.align-flex-start {align-items: flex-start !important}
.align-item-center {align-items: center}
.align-item-right, .align-flex-end {align-items: flex-end}
.align-self-center{align-self: center}
.align-self-end{align-self: flex-end}
-.column-gap-1{column-gap: 1px}.column-gap-2 {column-gap: 2px}.column-gap-4 {column-gap: 4px}.column-gap-5{column-gap: 5px}.column-gap-6{column-gap: 6px}.column-gap-7{column-gap: 7px}.column-gap-8{column-gap: 8px}.column-gap-9{column-gap: 9px}.column-gap-10{column-gap: 10px}.column-gap-15{column-gap: 15px}
-.column-gap-20{column-gap: 20px}.column-gap-30{column-gap: 30px}.column-gap-40{column-gap: 40px}.column-gap-50{column-gap: 50px}.column-gap-60{column-gap: 60px}.column-gap-70{column-gap: 70px}.column-gap-80{column-gap: 80px}.column-gap-90{column-gap: 90px}.column-gap-100{column-gap: 100px}
+.column-gap-1{column-gap:1px!important}.column-gap-2{column-gap:2px!important}.column-gap-4{column-gap:4px!important}.column-gap-5{column-gap:5px!important}.column-gap-6{column-gap:6px!important}.column-gap-7{column-gap:7px!important}.column-gap-8{column-gap:8px!important}.column-gap-9{column-gap:9px!important}.column-gap-10{column-gap:10px!important}.column-gap-15{column-gap:15px!important}
+.column-gap-20{column-gap:20px!important}.column-gap-30{column-gap:30px!important}.column-gap-40{column-gap:40px!important}.column-gap-50{column-gap:50px!important}.column-gap-60{column-gap:60px!important}.column-gap-70{column-gap:70px!important}.column-gap-80{column-gap:80px!important}.column-gap-90{column-gap:90px!important}.column-gap-100{column-gap:100px!important}
.row-gap-1 {row-gap: 1px}.row-gap-2 {row-gap: 2px}.row-gap-4 {row-gap: 4px}.row-gap-5 {row-gap: 5px}.row-gap-6 {row-gap: 6px}.row-gap-7 {row-gap: 7px}.row-gap-8 {row-gap: 8px}.row-gap-9{row-gap: 9px}.row-gap-10{row-gap: 10px}.row-gap-15{row-gap: 15px}.row-gap-20{row-gap: 20px}
.padding-left-15{padding-left:15px !important}.padding-left-20{padding-left:20px !important}.padding-left-30{padding-left:30px !important}.padding-left-40{padding-left:40px !important}
.padding-right-15{padding-right:15px !important}.padding-right-20{padding-right:20px !important}.padding-right-30{padding-right:30px !important}.padding-right-40{padding-right:40px !important}
-.margin-10{margin:10px !important}.margin-15{margin:15px !important}
+.margin-0{margin:0 !important}.margin-10{margin:10px !important}.margin-15{margin:15px !important}
.margin-left-0 {margin-left: 0px !important}.margin-left-5 {margin-left: 5px !important}.margin-left-10 {margin-left: 10px !important}.margin-left-15 {margin-left: 15px !important}.margin-left-20 {margin-left: 20px !important}.margin-left-30 {margin-left: 30px !important}.margin-left-40 {margin-left: 40px !important}
.margin-right-0 {margin-right: 0px !important}.margin-right-5 {margin-right: 5px !important}.margin-right-10 {margin-right: 10px !important}.margin-right-15 {margin-right: 15px !important}.margin-right-20 {margin-right: 20px !important}.margin-right-30 {margin-right: 30px !important}.margin-right-40 {margin-right: 40px !important}
-.margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important}
+.margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important}.margin-top-50{margin-top:50px !important}
.margin-bottom-0 {margin-bottom: 0px !important}.margin-bottom-5 {margin-bottom: 5px !important}.margin-bottom-10 {margin-bottom: 10px !important}.margin-bottom-15 {margin-bottom: 15px !important}.margin-bottom-20 {margin-bottom: 20px !important}.margin-bottom-30 {margin-bottom: 30px !important}.margin-bottom-40 {margin-bottom: 40px !important}
.min-height-100 {min-height: 100px}.min-height-200 {min-height: 200px}.min-height-300 {min-height: 300px}.min-height-400 {min-height: 400px}.min-height-500 {min-height: 500px}.min-height-600 {min-height: 600px}.min-height-700 {min-height: 700px}.min-height-800 {min-height: 800px}.min-height-900 {min-height: 900px}.min-height-1000 {min-height: 1000px}
.min-width-100 {min-width: 100px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
.width-100{width:100%}
+.resize-disabled{resize:none;}
code {
font-family: monospace, monospace;
@@ -293,7 +305,7 @@ td {
/**
* Icons
*/
-.icon, .icon-small, .icon-medium, .icon-lowopacity, .icon-mediumopacity, .icon-nf, .icon-np {
+.icon, .icon-small, .icon-medium, .icon-large, .icon-lowopacity, .icon-mediumopacity, .icon-nf, .icon-np {
height: 19px;
vertical-align: middle;
cursor: pointer;
@@ -304,6 +316,9 @@ td {
.icon-medium {
height: 18px !important;
}
+.icon-large {
+ height: 25px !important;
+}
.icon-lowopacity {
opacity: 0.60;
}
@@ -344,7 +359,6 @@ input[type=file] {
input::file-selector-button {
color: rgba(0, 0, 0, 0.667) !important;
}
-input[type=color].color-xsmall { width: 50px; vertical-align: middle; }
input[type].input-small, .select-small { width: 100px; }
input[type].input-medium, .select-medium { width: 150px; }
input[type].input-large, .select-large { width: 250px; }
@@ -356,10 +370,25 @@ input::placeholder, select::placeholder, textarea::placeholder {
width: 400px;
}
+/* All color input */
+input[type="color"] {
+ padding: 0;
+ width: 150%;
+ height: 150%;
+ margin: -25%;
+}
+
+.input-color-wrapper {
+ overflow: hidden;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ box-shadow: 0px 0px 3px 0px #000000;
+}
+
+
/* All checkboxes unless onoff-switch-input */
input[type=checkbox]:not(.onoff-switch-input) {
- /* width: 16px;
- height: 16px; */
width: 20px;
height: 20px;
background-color: white;
@@ -376,6 +405,7 @@ input[type=checkbox]:not(.onoff-switch-input) {
input[type=checkbox]:not(.onoff-switch-input):checked {
background-color: #15bf7f;
position: relative;
+ filter: inherit !important;
&:before {
content: '✔';
display: block;
@@ -404,28 +434,38 @@ input[type=checkbox]:not(.onoff-switch-input):checked {
/* All transparent buttons */
.btn-large-tr, .btn-medium-tr, .btn-small-tr, .btn-xsmall-tr, .btn-xxsmall-tr, .btn-fit-tr, .round-btn-tr,
-.btn-large-tr-to-red, .btn-medium-tr-to-red, .btn-small-tr-to-red, .btn-xsmall-tr-to-red, .btn-xxsmall-tr-to-red, .btn-fit-tr-to-red, .round-btn-tr-to-red {
+.btn-large-tr-to-red, .btn-medium-tr-to-red, .btn-small-tr-to-red, .btn-xsmall-tr-to-red, .btn-xxsmall-tr-to-red, .btn-fit-tr-to-red, .round-btn-tr-to-red,
+.btn-auto-tr {
background-color: initial;
box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
border: 1px solid #24405c;
}
/* All blue buttons */
-.btn-large-blue, .btn-medium-blue, .btn-small-blue, .btn-xsmall-blue, .btn-xxsmall-blue, .btn-fit-blue, .round-btn-blue {
+.btn-large-blue, .btn-medium-blue, .btn-small-blue, .btn-xsmall-blue, .btn-xxsmall-blue, .btn-fit-blue, .round-btn-blue, .btn-auto-blue {
background-color: #1d3349;
}
+/* All blue alt buttons */
+.btn-large-blue-alt, .btn-medium-blue-alt, .btn-small-blue-alt, .btn-xsmall-blue-alt, .btn-xxsmall-blue-alt, .btn-fit-blue-alt, .round-btn-blue-alt, .btn-auto-blue-alt {
+ background-color: #24405b;
+}
/* All green buttons */
-.btn-large-green, .btn-medium-green, .btn-small-green, .btn-xsmall-green, .btn-xxsmall-green, .btn-fit-green, .round-btn-green {
+.btn-large-green, .btn-medium-green, .btn-small-green, .btn-xsmall-green, .btn-xxsmall-green, .btn-fit-green, .round-btn-green, .btn-auto-green {
background-color: #15bf7f;
}
/* All red buttons */
-.btn-large-red, .btn-medium-red, .btn-small-red, .btn-xsmall-red, .btn-xxsmall-red, .btn-fit-red, .round-btn-red {
+.btn-large-red, .btn-medium-red, .btn-small-red, .btn-xsmall-red, .btn-xxsmall-red, .btn-fit-red, .round-btn-red, .btn-auto-red {
background-color: #F32F63;
}
/* All yellow buttons */
-.btn-large-yellow, .btn-medium-yellow, .btn-small-yellow, .btn-xsmall-yellow, .btn-xxsmall-yellow, .btn-fit-yellow, .round-btn-yellow {
+.btn-large-yellow, .btn-medium-yellow, .btn-small-yellow, .btn-xsmall-yellow, .btn-xxsmall-yellow, .btn-fit-yellow, .round-btn-yellow, .btn-auto-yellow {
background-color: #ffb536;
}
+/* All auto buttons */
+.btn-auto-blue, .btn-auto-blue-alt, .btn-auto-green, .btn-auto-red, .btn-auto-yellow {
+ width: auto;
+}
+
/* All large buttons */
.btn-large, .btn-large-blue, .btn-large-green, .btn-large-red, .btn-large-tr {
width: 100%;
@@ -445,36 +485,36 @@ input[type=checkbox]:not(.onoff-switch-input):checked {
/* All very very small buttons */
.btn-xxsmall, .btn-xxsmall-blue, .btn-xxsmall-green, .btn-xxsmall-red, .btn-xxsmall-tr {
margin: 2px;
- width: 30px;
+ width: 34px;
}
/* All transparent buttons (hover) */
-.btn-large-tr:hover, .btn-medium-tr:hover, .btn-small-tr:hover, .btn-xsmall-tr:hover, .btn-xxsmall-tr:hover, .btn-fit-tr:hover, .round-btn-tr:hover {
+.btn-large-tr:hover, .btn-medium-tr:hover, .btn-small-tr:hover, .btn-xsmall-tr:hover, .btn-xxsmall-tr:hover, .btn-fit-tr:hover, .round-btn-tr:hover, .btn-auto-tr:hover {
transition-duration: 0.2s;
background-color: #1d3349;
opacity: 1;
}
/* All transparent to red buttons (hover) */
-.btn-large-tr-to-red:hover, .btn-medium-tr-to-red:hover, .btn-small-tr-to-red:hover, .btn-xsmall-tr-to-red:hover, .btn-xxsmall-tr-to-red:hover, .btn-fit-tr-to-red:hover, .round-btn-tr-to-red:hover {
+.btn-large-tr-to-red:hover, .btn-medium-tr-to-red:hover, .btn-small-tr-to-red:hover, .btn-xsmall-tr-to-red:hover, .btn-xxsmall-tr-to-red:hover, .btn-fit-tr-to-red:hover, .round-btn-tr-to-red:hover, .btn-auto-tr-to-red:hover {
transition-duration: 0.2s;
- background-color: #f10e4b;
- border: 1px solid #f10e4b;
+ background-color: #F32F63;
+ border: 1px solid #F32F63;
opacity: 1;
}
/* All blue buttons (hover) */
-.btn-large-blue:hover, .btn-medium-blue:hover, .btn-small-blue:hover, .btn-xsmall-blue:hover, .btn-xxsmall-blue:hover, .btn-fit-blue:hover, .round-btn-blue:hover {
+.btn-large-blue:hover, .btn-medium-blue:hover, .btn-small-blue:hover, .btn-xsmall-blue:hover, .btn-xxsmall-blue:hover, .btn-fit-blue:hover, .round-btn-blue:hover, .btn-auto-blue:hover {
transition-duration: 0.2s;
background-color: #1e3a54;
}
/* All green buttons (hover) */
-.btn-large-green:hover, .btn-medium-green:hover, .btn-small-green:hover, .btn-xsmall-green:hover, .btn-xxsmall-green:hover, .btn-fit-green:hover, .round-btn-green:hover {
+.btn-large-green:hover, .btn-medium-green:hover, .btn-small-green:hover, .btn-xsmall-green:hover, .btn-xxsmall-green:hover, .btn-fit-green:hover, .round-btn-green:hover, .btn-auto-green:hover {
transition-duration: 0.2s;
background-color: #12a16a;
}
/* All red buttons (hover) */
-.btn-large-red:hover, .btn-medium-red:hover, .btn-small-red:hover, .btn-xsmall-red:hover, .btn-xxsmall-red:hover, .btn-fit-red:hover, .round-btn-red:hover {
+.btn-large-red:hover, .btn-medium-red:hover, .btn-small-red:hover, .btn-xsmall-red:hover, .btn-xxsmall-red:hover, .btn-fit-red:hover, .round-btn-red:hover, .btn-auto-red:hover {
transition-duration: 0.2s;
background-color: #f10e4b;
}
@@ -499,7 +539,7 @@ input[type=checkbox]:not(.onoff-switch-input):checked {
}
[class^="round-btn"] img {
- width: 16px;
+ width: 18px;
}
/**
@@ -863,6 +903,34 @@ textarea {
border-bottom: 1px solid #d1d1d11f;
}
+#loginDiv-container {
+ height: 90vh;
+ position: relative;
+}
+#loginDiv {
+ width: 250px;
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
+#loginDiv img {
+ max-width: 80px;
+}
+#loginDiv h3 {
+ margin-left: auto;
+ margin-right: auto;
+}
+#loginDiv form input {
+ display: block;
+}
+#loginDiv div {
+ margin: auto;
+}
+
/**
* Loading div
*/
@@ -887,6 +955,7 @@ textarea {
display: flex;
justify-content: center;
align-items: center;
+ column-gap: 5px;
position: absolute;
top: 0;
left: 0;
@@ -965,7 +1034,7 @@ textarea {
@media (min-width:1025px) {
/* All buttons */
[class^="btn-"], [class*=" btn-"], input::file-selector-button {
- padding: 7px 5px 7px 5px;
+ padding: 9px 5px 9px 5px;
}
/**
@@ -979,7 +1048,11 @@ textarea {
width: 30%;
}
- .alert, .alert-success, .alert-error, .confirm-box {
- width: 25%;
+ .alert, .alert-success, .alert-error {
+ width: 29%;
+ }
+
+ .confirm-box {
+ width: 29%;
}
}
\ No newline at end of file
diff --git a/www/public/resources/styles/motionui.css b/www/public/resources/styles/motionui.css
index cdc8022c..ffcd8b26 100644
--- a/www/public/resources/styles/motionui.css
+++ b/www/public/resources/styles/motionui.css
@@ -685,44 +685,6 @@ footer #github img { width: 25px; }
border-radius: 5px;
}
-#loginDiv-container {
- height: 90vh;
- position: relative;
-}
-
-#loginDiv {
- width: 250px;
- margin: 0;
- position: absolute;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- text-align: center;
-}
-#loginDiv img {
- max-width: 80px;
-}
-#loginDiv h3 {
- margin-left: auto;
- margin-right: auto;
-}
-#loginDiv form input {
- display: block;
-}
-#loginDiv div {
- margin: auto;
-}
-
-.rotation-wrapper-outer {
- display: table;
-}
-
-.rotation-wrapper-inner {
- padding: 50% 0;
- height: 0;
-}
-
/**
* Full page loading veil
*/
diff --git a/www/version b/www/version
index 7cbea073..80444066 100644
--- a/www/version
+++ b/www/version
@@ -1 +1 @@
-5.2.0
\ No newline at end of file
+5.2.1
\ No newline at end of file