summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/css/style.css1189
-rw-r--r--www/index.html2
-rw-r--r--www/lang/locale-en.json1
-rw-r--r--www/templates/events.html10
-rw-r--r--www/templates/montage.html9
5 files changed, 516 insertions, 695 deletions
diff --git a/www/css/style.css b/www/css/style.css
index 8efb5d24..9fb19658 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1,200 +1,153 @@
@font-face {
font-family: 'fontawesome';
- src:url('../lib/font-awesome/fonts/fontawesome-webfont.eot');
- src:url('../lib/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'),
- url('../lib/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),
- url('../lib/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'),
- url('../lib/font-awesome/fonts/fontawesome-webfont.svg') format('svg');
+ src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot');
+ src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../lib/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('../lib/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), url('../lib/font-awesome/fonts/fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-
.icon-super-speed:before {
font-family: "fontawesome";
content: "\f135";
}
-
-
.icon-normal-speed:before {
font-family: "fontawesome";
content: "\f1b9";
}
-
.icon-faster:before {
font-family: "fontawesome";
content: "\f101";
}
-
-
-
.icon-slower:before {
font-family: "fontawesome";
content: "\f100";
}
-
-
-.image-loader-container
-{
- position:relative;
- width:100%;
- height:100%;
+.image-loader-container {
+ position: relative;
+ width: 100%;
+ height: 100%;
}
-
-image-loader
-{
- position:absolute;
- top:50%;
- left:50%;
- z-index:999;
+image-loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ z-index: 999;
}
-
-
.vis-time-axis .grid.vis-odd {
background: #f5f5f5;
- }
-
-.my-vis-font
-{
- font-size:10px;
}
-
+.my-vis-font {
+ font-size: 10px;
+}
.my-vis-buttons {
- position: absolute;
- top: 0;
- right: 0;
- margin: 10px;
- z-index: 9999;
- }
-
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 10px;
+ z-index: 9999;
+}
ion-popover-view.fit {
- height: auto;
+ height: auto;
}
-
ion-popover-view.fit ion-content {
- position: relative;
+ position: relative;
}
-
.platform-android ion-popover-view.fit {
- margin-top: 10px;
+ margin-top: 10px;
}
-
.platform-ios ion-popover-view.fit {
- padding-top: 10px;
- padding-bottom: 10px;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
/* Using this for full screen modals for event and monitor mode */
-.modal{
- top: 0 ;
- bottom: 0 ;
- left: 0 ;
- right: 0 ;
- width: 100%
-}
-
-
-
+.modal {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%
+}
/* I am using flexboxes to dynamicall adapt content
in montage view.
Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
+
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-
font-weight: normal;
text-align: left;
- flex-wrap:wrap;
-
+ flex-wrap: wrap;
}
-
.wrapper > * {
/*padding: 5px;*/
/*flex: 1 100%; -- I commented this out - the wrapper was taking up full width in Chrome*/
}
-
.header {
background: #333333;
- color:#cccccc;
+ color: #cccccc;
border-color: #444444;
- border-style: solid;
- border-width:1px;
- opacity:80%;
+ border-style: solid;
+ border-width: 1px;
+ opacity: 80%;
}
-
.header-event-id {
background: #9b59b6;
- color:#cccccc;
+ color: #cccccc;
border-color: #9b59b6;
- border-style: solid;
- border-width:1px;
- opacity:80%;
+ border-style: solid;
+ border-width: 1px;
+ opacity: 80%;
}
-
-
.header-paused {
background: #ba3e3e;
- color:#cccccc;
+ color: #cccccc;
border-color: #ba3e3e;
- border-style: solid;
- border-width:1px;
- opacity:80%;
+ border-style: solid;
+ border-width: 1px;
+ opacity: 80%;
transform: translate(-50%, -50%);
-
}
-
-
-
-
.alarmed-header {
background: #ba3e3e;
- color:#ffffff;
+ color: #ffffff;
border-color: #ba3e3e;
- border-style: solid;
- border-width:1px;
- opacity:80%;
-
+ border-style: solid;
+ border-width: 1px;
+ opacity: 80%;
}
-
.minimized-alarmed-header {
background: #ba3e3e;
- color:#ffffff;
+ color: #ffffff;
border-color: #ba3e3e;
- border-style: solid;
- border-width:5px;
- opacity:80%;
- position:absolute;
- top:0px;
- left:0px;
- width:100%;
-
+ border-style: solid;
+ border-width: 5px;
+ opacity: 80%;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
}
-
-#slowpulse
-{
+#slowpulse {
-webkit-animation-duration: 1500ms;
}
.alarmed-body {
border-left: thick solid #ba3e3e;
-
}
-
.alarmed-footer {
background: #ba3e3e;
- border-color:#ba3e3e;
- color:#ffffff;
- border-width:1px;
+ border-color: #ba3e3e;
+ color: #ffffff;
+ border-width: 1px;
/*padding:2px;*/
}
-
.main {
text-align: center;
/*background: #5a5a5a;*/
@@ -203,21 +156,15 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
padding: 0px;
/*padding:2px;*/
}
-
.aside-1 {
background: gold;
}
-
.aside-2 {
background: hotpink;
}
-
-
figure {
- position: relative;
-
+ position: relative;
}
-
figure img {
display: block;
width: 100%;
@@ -226,58 +173,49 @@ figure img {
figcaption {
overflow: hidden;
text-overflow: ellipsis;
- white-space:nowrap;
-
+ white-space: nowrap;
}
-
.normal-figcaption {
- background: rgba(0,0,0,0.2);
+ background: rgba(0, 0, 0, 0.2);
color: #FFF;
position: absolute;
bottom: 0;
left: 0;
right: 0;
- opacity:1;
-
+ opacity: 1;
}
-
.alarmed-figcaption {
-
background: #ba3e3e;
- color:#ffffff;
- position:absolute;
+ color: #ffffff;
+ position: absolute;
bottom: 0;
left: 0;
right: 0;
- opacity:0.7;
-
-
+ opacity: 0.7;
}
-
-
-
/* modified from:
http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
.notification-badge {
- position:relative;
- }
- .notification-badge[data-badge]:after {
- content:attr(data-badge);
- position:absolute;
- top:-3px;
- left:18px;
- font-size:9px;
- background:crimson;
- color:white;
- width:22px;height:17px;
- text-align:center;
- line-height:17px;
- border-radius:40%;
- font-weight:bold;
-
- }
+ position: relative;
+}
+.notification-badge[data-badge]:after {
+ content: attr(data-badge);
+ position: absolute;
+ top: -3px;
+ left: 18px;
+ font-size: 9px;
+ background: crimson;
+ color: white;
+ width: 22px;
+ height: 17px;
+ text-align: center;
+ line-height: 17px;
+ border-radius: 40%;
+ font-weight: bold;
+}
+
/*
.notification-badge{
@@ -290,26 +228,23 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
font-size: 8px;
}*/
-
.missingnetwork {
- position: fixed; /* or absolute */
- bottom: 95%;
- right: 95%;
- transform: translate(-50%, -50%);
+ position: fixed;
+ /* or absolute */
+ bottom: 95%;
+ right: 95%;
+ transform: translate(-50%, -50%);
}
-
.ptzcentered {
- position: fixed; /* or absolute */
- top: 50%;
- left: 50%;
+ position: fixed;
+ /* or absolute */
+ top: 50%;
+ left: 50%;
transform: translate(-50%, -50%);
}
-
.timeline_text {
- text-align:center;
- color:white;
-
-
+ text-align: center;
+ color: white;
}
/* // not using for now, may come in handy later
@@ -321,286 +256,250 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
transform: translate(-50%, -50%);
}*/
-.ptzcenteredbotbutton
-{
+.ptzcenteredbotbutton {
position: absolute;
- top: 80%;
- left:50%;
+ top: 80%;
+ left: 50%;
transform: translate(-50%, -50%);
}
-
-.ptzpresetbuttons
-{
+.ptzpresetbuttons {
position: absolute;
top: 5%;
left: 10%;
width: 80%;
-
-
}
-
-
.timelinebuttons {
- position: fixed; /* or absolute */
- bottom:130px;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index:99999;
+ position: fixed;
+ /* or absolute */
+ bottom: 130px;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 99999;
}
-
-.eventprogress
-{
- position:absolute;
+.eventprogress {
+ position: absolute;
-webkit-transform: rotate(-90deg) translateY(-1000%);
-webkit-transform-origin: 100% 0%;
-moz-transform: rotate(-90deg);
top: 50%;
- margin-top:-50px;
- left:100%;
- margin-left:-15px;
- z-index:10;
- width:100px;
-
+ margin-top: -50px;
+ left: 100%;
+ margin-left: -15px;
+ z-index: 10;
+ width: 100px;
}
-
-.camera-icon
-{
- position:absolute;
- bottom:20px;
- left:10px;
- z-index:10;
- opacity:0.7;
+.camera-icon {
+ position: absolute;
+ bottom: 20px;
+ left: 10px;
+ z-index: 10;
+ opacity: 0.7;
}
-
-.desktop-zoom-icon
-{
- position:absolute;
- bottom:20px;
- left:70px;
- z-index:10;
- opacity:0.7;
+.desktop-zoom-icon {
+ position: absolute;
+ bottom: 20px;
+ left: 70px;
+ z-index: 10;
+ opacity: 0.7;
}
-
-.modal-alarm-badge
-{
- position:absolute;
- bottom:20px;
+.modal-alarm-badge {
+ position: absolute;
+ bottom: 20px;
left: 100px;
-
- z-index:10;
- opacity:0.7;
+ z-index: 10;
+ opacity: 0.7;
}
-
-
-.event-modal-alarm-badge
-{
- position:absolute;
-
+.event-modal-alarm-badge {
+ position: absolute;
left: 10px;
- bottom:10px;
- z-index:10;
- opacity:1;
+ bottom: 10px;
+ z-index: 10;
+ opacity: 1;
}
-
-
-.events-modal-gapless-icon
-{
- position:absolute;
- bottom:120px;
- left:20px;
- z-index:10;
- opacity:0.5;
+.events-modal-gapless-icon {
+ position: absolute;
+ bottom: 120px;
+ left: 20px;
+ z-index: 10;
+ opacity: 0.5;
}
-
-.popup80 .popup
-{
- width:80% !important;
+.popup80 .popup {
+ width: 80% !important;
}
-
-.popup90 .popup
-{
- width:90% !important;
+.popup90 .popup {
+ width: 90% !important;
}
-
-.popup95 .popup
-{
- width:95% !important;
+.popup95 .popup {
+ width: 95% !important;
}
-
-.events-modal-camera-icon
-{
- position:absolute;
- bottom:120px;
- left:110px;
- z-index:10;
- opacity:0.5;
+.events-modal-camera-icon {
+ position: absolute;
+ bottom: 120px;
+ left: 110px;
+ z-index: 10;
+ opacity: 0.5;
}
-
-.events-modal-onlyalarms-icon
-{
- position:absolute;
- bottom:120px;
- left:140px;
- z-index:10;
- opacity:0.5;
+.events-modal-onlyalarms-icon {
+ position: absolute;
+ bottom: 120px;
+ left: 140px;
+ z-index: 10;
+ opacity: 0.5;
}
-.events-range
-{
- position:absolute;
- bottom:20px;
- left:30px;
- z-index:10;
- opacity:0.7;
- width:70%;
+.events-range {
+ position: absolute;
+ bottom: 20px;
+ left: 30px;
+ z-index: 10;
+ opacity: 0.7;
+ width: 70%;
}
-
-
-.events-range-modal
-{
- position:absolute;
- bottom:30px;
- left:30px;
- z-index:99;
- opacity:1;
- width:70%;
+.events-range-modal {
+ position: absolute;
+ bottom: 30px;
+ left: 30px;
+ z-index: 99;
+ opacity: 1;
+ width: 70%;
}
-
-.events-range-modal-text
-{
-
- position:absolute;
- top:20px;
- font-size:80%;
- line-height:100%;
-
+.events-range-modal-text {
+ position: absolute;
+ top: 20px;
+ font-size: 80%;
+ line-height: 100%;
left: 50%;
transform: translate(-50%, 0%);
- z-index:10;
- opacity:0.7;
- color:white;
+ z-index: 10;
+ opacity: 0.7;
+ color: white;
background-color: black;
border-radius: 5px 5px 5px 5px;
- padding-left:3px;
- padding-right:3px;
-
+ padding-left: 3px;
+ padding-right: 3px;
}
-
-
-.monitor-modal-text
-{
- position:absolute;
- bottom:30px;
-
+.monitor-modal-text {
+ position: absolute;
+ bottom: 30px;
left: 50%;
transform: translate(-50%, 0%);
- z-index:10;
- opacity:0.7;
- color:white;
+ z-index: 10;
+ opacity: 0.7;
+ color: white;
background-color: black;
border-radius: 5px 5px 5px 5px;
- padding-left:3px;
- padding-right:3px;
-
+ padding-left: 3px;
+ padding-right: 3px;
}
-
-.events-alarm-line
-{
-
+.events-alarm-line {
position: relative;
bottom: 1px;
left: 0px;
width: 100%;
border-top: 1px solid black;
-
}
-
-.events-float-filter
-{
+.bwmode {
position: absolute;
- top: 50%;
- right:-12px;
-
- color:#fff;
- background-color:#b47226;
+ top: 30%;
+ right: -28px;
+ opacity: 0.7;
+ background-color: #f1c40f;
+ color: #000;
+ font-size: 11px;
border-radius: 0px 0px 5px 5px;
- font-size:11px;
-
- padding-left:3px;
- padding-right:3px;
- opacity:0.7;
-
-
- z-index:99999;
-
- -webkit-transform: rotate(90deg);
+ z-index: 99999;
+ padding-left: 3px;
+ padding-right: 3px;
+ -webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
-.events-filter-on
-{
- position: absolute;
- left: 50%;
-
- transform: translate(-50%, 0);
- opacity:0.7;
- border-radius: 0px 0px 5px 5px;
- margin-top:-18px;
- background-color:#b47226;
- padding-left:6px;
- padding-right:6px;
- color:#fff;
- font-size:11px;
+.events-float-filter {
+ position: absolute;
+ top: 50%;
+ right: -12px;
+ color: #fff;
+ background-color: #b47226;
+ border-radius: 0px 0px 5px 5px;
+ font-size: 11px;
+ padding-left: 3px;
+ padding-right: 3px;
+ opacity: 0.7;
+ z-index: 99999;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+.events-filter-on {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, 0);
+ opacity: 0.7;
+ border-radius: 0px 0px 5px 5px;
+ margin-top: -18px;
+ background-color: #b47226;
+ padding-left: 6px;
+ padding-right: 6px;
+ color: #fff;
+ font-size: 11px;
}
/* Styling of progress bar
http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
*/
-
-progress, /* All HTML5 progress enabled browsers */
-progress[role] /* polyfill */
+progress,
+/* All HTML5 progress enabled browsers */
+progress[role]/* polyfill */
{
-
- /* Turns off styling - not usually needed, but good to know. */
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
-
- /* gets rid of default border in Firefox and Opera. */
- border: none;
-
- /* Needs to be in here for Safari polyfill so background images work as expected. */
- background-size: auto;
- height:10px;
-
+ /* Turns off styling - not usually needed, but good to know. */
+
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ /* gets rid of default border in Firefox and Opera. */
+
+ border: none;
+ /* Needs to be in here for Safari polyfill so background images work as expected. */
+
+ background-size: auto;
+ height: 10px;
}
/* Polyfill */
progress[role]:after {
- background-image: none; /* removes default background from polyfill */
+ background-image: none;
+ /* removes default background from polyfill */
}
/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
- display: none;
+ display: none;
}
/* ----------------- progress background start ------------------*/
-progress, /* Firefox */
-progress[role][aria-valuenow] { /* Polyfill */
- background: #aaaaaa !important; /* !important is needed by the polyfill */
+progress,
+/* Firefox */
+progress[role][aria-valuenow] {
+ /* Polyfill */
+
+ background: #aaaaaa !important;
+ /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
background: #aaaaaa;
}
+
/* ----------------- progress background start ------------------*/
/* ----------------- progress bar color start ------------------*/
+
/* IE10 */
progress {
color: #f1a165;
@@ -617,490 +516,396 @@ progress::-webkit-progress-value {
}
/* Polyfill */
-progress[aria-valuenow]:before {
+progress[aria-valuenow]:before {
background: #f1a165;
}
-/* ----------------- progress bar color end ------------------*/
-
-.rotate-button
-{
+/* ----------------- progress bar color end ------------------*/
+.rotate-button {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
-
-
-.zm-image-fit
-{
+.zm-image-fit {
max-width: 100%;
max-height: 100%;
}
-
-.zm-image-crop
-{
- width:100%;
+.zm-image-crop {
+ width: 100%;
}
-
/*
.object-fit_cover { object-fit: cover; width:100%; height:auto;}
.object-fit_contain { object-fit: contain; max-width:100%; height:auto; }
*/
-
-
-.object-fit_cover { object-fit: cover; width:100%; height:auto;}
-.object-fit_contain { object-fit: contain; max-width:100%; max-height:100%; }
-
+.object-fit_cover {
+ object-fit: cover;
+ width: 100%;
+ height: auto;
+}
+.object-fit_contain {
+ object-fit: contain;
+ max-width: 100%;
+ max-height: 100%;
+}
.list .item.item-accordion {
- line-height: 200px;
- padding-top: 0;
- padding-bottom: 0;
- transition: 3s all linear;
+ line-height: 200px;
+ padding-top: 0;
+ padding-bottom: 0;
+ transition: 3s all linear;
}
.list .item.item-accordion.ng-hide {
- line-height: 0px;
+ line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
- display: block !important;
+ display: block !important;
}
-
ul[rn-carousel] > li {
- position: relative;
- margin-left: -100%;
+ position: relative;
+ margin-left: -100%;
}
-
ul[rn-carousel] > li:first-child {
- margin-left: 0;
+ margin-left: 0;
}
-
ul[rn-carousel] img {
- max-width: 100%;
-}
-
-
-.content-banner .content-banner-close
-{
- margin-top:-5px;
+ max-width: 100%;
}
-
-.mySliderClass.jslider.sliderCSS div.jslider-pointer{
-left:50%;
-width:30px;
-height:30px;
-opacity:0.5;
-background-color:#615959;
-border-radius:50%;
-margin-left:-3px;
-margin-top:-8px;
+.content-banner .content-banner-close {
+ margin-top: -5px;
}
-
-.mySliderClass div.jslider-scale ins
-{
- color:red;
+.mySliderClass.jslider.sliderCSS div.jslider-pointer {
+ left: 50%;
+ width: 30px;
+ height: 30px;
+ opacity: 0.5;
+ background-color: #615959;
+ border-radius: 50%;
+ margin-left: -3px;
+ margin-top: -8px;
+}
+.mySliderClass div.jslider-scale ins {
+ color: red;
/*background-color:red;
border-radius:5%;
line-height:5px;*/
}
-
-.mySliderClass div.jslider-value
-{
- position:absolute;
- top:-29px;
- left:0;padding:1px 2px 0;
- background:#fff;font-size:9px;
- line-height:12px;
- white-space:nowrap;
- -moz-border-radius:2px;
- -webkit-border-radius:2px;
- -o-border-radius:2px;
- border-radius:2px
+.mySliderClass div.jslider-value {
+ position: absolute;
+ top: -29px;
+ left: 0;
+ padding: 1px 2px 0;
+ background: #fff;
+ font-size: 9px;
+ line-height: 12px;
+ white-space: nowrap;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -o-border-radius: 2px;
+ border-radius: 2px
}
-
-
input[type=range]::-webkit-slider-thumb {
-
-
- background: #2980b9;
-
+ background: #2980b9;
}
/* this is for input = password and dialog = text */
.pinCode input[type=number] {
-webkit-text-security: disc;
}
-
-
-.pinCode input[type=number]{
+.pinCode input[type=number] {
height: 50px;
- width:200px;
+ width: 200px;
text-align: center;
font-size: 2em;
border: 1px solid #ddd;
-webkit-appearance: none;
-}
-
-
-.pin-background.scroll-content
- {
+}
+.pin-background.scroll-content {
/*background: url('../img/background.png') no-repeat center center fixed;*/
+
background-size: cover;
- background-color:#555555;
+ background-color: #555555;
/*background-color:#16a085;*/
-
}
-
-#responsive-image{
- width: 65%;
- margin: 0 auto;
+#responsive-image {
+ width: 65%;
+ margin: 0 auto;
}
-#responsive-image img{
- width: 100%
-
+#responsive-image img {
+ width: 100%
}
/* to avoid padding on delete in event list */
.item-content {
padding-right: 16px !important;
}
-
-.eventDeleteSpeed
-{
+.eventDeleteSpeed {
-webkit-animation-duration: 300ms;
}
-
-
-.content-banner.alarm
-{
+.content-banner.alarm {
background-color: forestgreen;
- color:white;
-
+ color: white;
}
-
-.content-banner.net
-{
+.content-banner.net {
background-color: #9b59b6;
- color:white;
+ color: white;
}
/* This accordion list is used for event server monitor filter
* http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations
*/
.list .item.item-accordion {
- line-height: 45px;
- padding-top: 0;
- padding-bottom: 0;
- transition: 0.09s all linear;
+ line-height: 45px;
+ padding-top: 0;
+ padding-bottom: 0;
+ transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
- line-height: 0px;
+ line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
- display: block !important;
+ display: block !important;
}
-
.custom-list i {
- float: right;
+ float: right;
}
-
-
/* This is for quick scrub for H264 */
.videogular-container {
- height: 260px;
-
- margin: auto;
- overflow: hidden;
- float:left;
+ height: 260px;
+ margin: auto;
+ overflow: hidden;
+ float: left;
}
-
-
.videogular-full-container {
- height:80%;
-
- z-index:100;
- float:center;
-
- margin: auto;
- overflow: hidden;
-
+ height: 80%;
+ z-index: 100;
+ float: center;
+ margin: auto;
+ overflow: hidden;
}
-
-
-
-
#full-screen-event {
- -webkit-animation-duration: 200ms;
-
+ -webkit-animation-duration: 200ms;
}
-
-#monitorimage
-{
- -webkit-animation-duration: 200ms;
+#monitorimage {
+ -webkit-animation-duration: 200ms;
}
-
-#firstuse
-{
+#firstuse {
-webkit-animation-delay: 1s;
}
-
-#transition-delay
-{
+#transition-delay {
-webkit-animation-delay: 1s;
}
/* packery stuff */
-
-
-
-* { box-sizing: border-box; }
-
-body { font-family: sans-serif; }
+* {
+ box-sizing: border-box;
+}
+body {
+ font-family: sans-serif;
+}
/* ---- grid ---- */
-
-
-.dragborder
-{
- border:2px dotted #3498db;
+.dragborder {
+ border: 2px dotted #3498db;
}
-
-.dragborder-selected
-{
- border:4px solid #e74c3c;
+.dragborder-selected {
+ border: 4px solid #e74c3c;
+}
+.grid-sizer {
+ width: 10%;
+}
+.grid-item {
+ width: 20%;
+}
+.grid-item-10 {
+ width: 10%;
+}
+.grid-item-20 {
+ width: 20%;
+}
+.grid-item-30 {
+ width: 30%;
+}
+.grid-item-40 {
+ width: 40%;
+}
+.grid-item-50 {
+ width: 50%;
+}
+.grid-item-60 {
+ width: 60%;
+}
+.grid-item-70 {
+ width: 70%;
+}
+.grid-item-80 {
+ width: 80%;
+}
+.grid-item-90 {
+ width: 90%;
+}
+.grid-item-100 {
+ width: 100%;
}
-
-
-.grid-sizer {width:10%; }
-.grid-item { width: 20%; }
-.grid-item-10 {width: 10%; }
-.grid-item-20 { width: 20%; }
-.grid-item-30 { width: 30%; }
-.grid-item-40 { width: 40%; }
-.grid-item-50 { width: 50%; }
-.grid-item-60 {width: 60%; }
-.grid-item-70 { width: 70%; }
-.grid-item-80 { width: 80%; }
-.grid-item-90 {width: 90%; }
-.grid-item-100 {width:100%; }
-
-
-
-
/* clear fix */
.grid:after {
- content: '';
- display: block;
- clear: both;
+ content: '';
+ display: block;
+ clear: both;
}
-
-
.grid-item img {
- display: block;
- width: 100%;
- height:auto;
-
+ display: block;
+ width: 100%;
+ height: auto;
}
-/* ---- .grid-item ---- */
-
-
+/* ---- .grid-item ---- */
.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
- background: #34495e;
- z-index: 2;
+ background: #34495e;
+ z-index: 2;
}
-
.packery-drop-placeholder {
- outline: 3px dashed hsla(0, 0%, 0%, 0.5);
- outline-offset: -6px;
- -webkit-transition: -webkit-transform 0.2s;
- transition: transform 0.2s;
+ outline: 3px dashed hsla(0, 0%, 0%, 0.5);
+ outline-offset: -6px;
+ -webkit-transition: -webkit-transform 0.2s;
+ transition: transform 0.2s;
}
-
-
.wide-as-needed {
- overflow: scroll;
- white-space: nowrap;
+ overflow: scroll;
+ white-space: nowrap;
}
-
-
.visred {
- fill:#FF0000;
+ fill: #FF0000;
}
-
-.wizardtip
-{
- margin-left:5px;
- margin-right:5px;
- margin-top:10px;
- margin-bottom:5px;
+.wizardtip {
+ margin-left: 5px;
+ margin-right: 5px;
+ margin-top: 10px;
+ margin-bottom: 5px;
padding: 5px 5px 5px 5px;
background-color: #cccccc;
- color:#333232;
+ color: #333232;
border-radius: 8px;
border-width: 1px;
- border-color:#8b8888;
+ border-color: #8b8888;
border-style: solid;
}
-
.wiz-list {
- list-style-type: disc;
- list-style-position: inside;
+ list-style-type: disc;
+ list-style-position: inside;
}
-
-
-.zmPullup
-{
- background-color:#E3BE1C;
+.zmPullup {
+ background-color: #E3BE1C;
}
-
#flyoutmenu {
- z-index:99;
-
+ z-index: 99;
}
-
#flyoutmenu ul {
- list-style: none;
- margin: 0;
- padding: 0;
- color:white;
- z-index:99;
-
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ color: white;
+ z-index: 99;
font-size: 0.7em;
font-family: sans-serif;
text-transform: uppercase;
}
-
-
#flyoutmenu ul li a i {
-
font-size: 2.5em;
font-family: sans-serif;
text-transform: uppercase;
}
-
#flyoutmenu li {
- display: inline-block;
- margin-bottom: .2em;
- padding:0.7em;
- margin-right: 4px;
-
+ display: inline-block;
+ margin-bottom: .2em;
+ padding: 0.7em;
+ margin-right: 4px;
line-height: 100%;
}
-
-#flyoutmenu li:first-child
-{
+#flyoutmenu li:first-child {
/*background: rgba(192, 57, 43, 0.7);*/
- background:rgba(108, 122, 137, 0.7);
- -webkit-border-radius: 5px 0 0 5px ;
-
+
+ background: rgba(108, 122, 137, 0.7);
+ -webkit-border-radius: 5px 0 0 5px;
}
-
-#flyoutmenu li:only-child
-{
+#flyoutmenu li:only-child {
/*background: rgba(192, 57, 43, 0.7);*/
- background:rgba(108, 122, 137, 0.7);
- -webkit-border-radius: 5px 5px 5px 5px ;
-
+
+ background: rgba(108, 122, 137, 0.7);
+ -webkit-border-radius: 5px 5px 5px 5px;
}
-
-#flyoutmenu li:last-child
-{
- -webkit-border-radius: 0 5px 5px 0;
+#flyoutmenu li:last-child {
+ -webkit-border-radius: 0 5px 5px 0;
}
/* make sure this is after last-child */
-#flyoutmenu li:only-child
-{
+#flyoutmenu li:only-child {
/*background: rgba(192, 57, 43, 0.7);*/
- background:rgba(108, 122, 137, 0.7);
- -webkit-border-radius: 5px 5px 5px 5px ;
-
+
+ background: rgba(108, 122, 137, 0.7);
+ -webkit-border-radius: 5px 5px 5px 5px;
}
-
- #flyoutmenu li:nth-child(n+2) {
- background:rgba(108, 122, 137, 0.7);
- z-index:-1;
-
- }
-
-#flyoutmenu a
-{
- text-decoration:none;
- color:white;
+#flyoutmenu li:nth-child(n+2) {
+ background: rgba(108, 122, 137, 0.7);
+ z-index: -1;
+}
+#flyoutmenu a {
+ text-decoration: none;
+ color: white;
}
/* Overlay graph in event footage */
#event_canvas {
- position:absolute;
- width: 80%;
- height: 20px;
- bottom:80px;
- left:20px;
- opacity:1;
- z-index:99;
-
+ position: absolute;
+ width: 80%;
+ height: 20px;
+ bottom: 80px;
+ left: 20px;
+ opacity: 1;
+ z-index: 99;
}
-
-
#event_canvas_video {
- position:absolute;
- width: 100%;
- height: 20px;
- bottom:140px;
- left:0px;
- opacity:1;
- z-index:99;
-
+ position: absolute;
+ width: 100%;
+ height: 20px;
+ bottom: 140px;
+ left: 0px;
+ opacity: 1;
+ z-index: 99;
}
-
-
-
#event_slider {
- position:absolute;
- width: 80%;
- height: 20px;
- bottom:60px;
- left:20px;
- opacity:1;
- z-index:9999;
-
-
+ position: absolute;
+ width: 80%;
+ height: 20px;
+ bottom: 60px;
+ left: 20px;
+ opacity: 1;
+ z-index: 9999;
}
-
#event_rate_text {
- position:absolute;
- width: 80%;
- bottom:20px;
- left:43px;
- opacity:1;
- color:#fff;
- z-index:9998;
-
-}
-
-.smallnote
-{
- font-size:9px;
- text-align:center;
- background-color: rgba(0,0,0,0.3);
- color:rgb(0,0,0);
- border-top-left-radius:5px;
- border-top-right-radius:5px;
-
-}
-
-.white-button-text
-{
- color:#fff !important;
-}
-
-
-
+ position: absolute;
+ width: 80%;
+ bottom: 20px;
+ left: 43px;
+ opacity: 1;
+ color: #fff;
+ z-index: 9998;
+}
+.smallnote {
+ font-size: 9px;
+ text-align: center;
+ background-color: rgba(0, 0, 0, 0.3);
+ color: rgb(0, 0, 0);
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+.white-button-text {
+ color: #fff !important;
+} \ No newline at end of file
diff --git a/www/index.html b/www/index.html
index 5ca3042f..66f2c178 100644
--- a/www/index.html
+++ b/www/index.html
@@ -195,7 +195,7 @@
<ion-item href="#/montage" menu-close>
- <span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;">&nbsp;<i class="icon ion-arrow-graph-down-left"></i>&nbsp;</span>
+ <!--<span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;">&nbsp;<i class="icon ion-arrow-graph-down-left"></i>&nbsp;</span>-->
<span class=" item-icon-left">
<i class="icon ion-ios-eye"></i>
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 711a301d..7d1e33ee 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -149,6 +149,7 @@
"kLoginValidatedTitle" :"Login Validated",
"kLogs" :"Logs",
"kLowBandwidth" :"low bandwidth mode",
+ "kLowBWDisplay" : "low bandwidth",
"kManageServerGroups" :"Manage Server Groups",
"kMaxFPS" :"Max FPS",
"kMaxItemsForTimeline" :"Max. items for Timeline",
diff --git a/www/templates/events.html b/www/templates/events.html
index 9b0cd7ba..ac0e1a4f 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -34,7 +34,7 @@
</ion-header-bar>
</div>
-
+
<ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll" has-subheader="true" overflow-scroll="false" mouse-wheel-scroll>
@@ -278,7 +278,15 @@
</ion-infinite-scroll>
</div>
</ion-content>
+
+
+
<div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();">{{'kFilterOn'|translate}}</div>
+
+ <div class="bwmode" ng-if="$root.runMode=='lowbw'">
+ {{ 'kLowBWDisplay' | translate }}
+ </div>
+
<ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 9e0be000..f79db1ef 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -1,4 +1,5 @@
<ion-view view-title="{{'kMontage' | translate}}" cache-view="false" hide-nav-bar="{{minimal}}">
+
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
<button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();">&nbsp;
@@ -34,7 +35,8 @@
<ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" >
-
+
+
<span ng-if="!minimal && showSizeButtons">
<!-- this is header -->
@@ -120,6 +122,11 @@
</ion-content>
+
+ <div class="bwmode" ng-if="$root.runMode=='lowbw'">
+ {{ 'kLowBWDisplay' | translate }}
+ </div>
+
<div ng-show="minimal">
<nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 13:58:05 +0000