diff --git a/ui3.htm b/ui3.htm index 0f8a120..a7c04d7 100644 --- a/ui3.htm +++ b/ui3.htm @@ -10,7 +10,7 @@ - UI3 - Blue Iris + %%SYSNAME%% UI3 diff --git a/ui3/css-vars-ponyfill.min.js b/ui3/css-vars-ponyfill.min.js new file mode 100644 index 0000000..b72d15d --- /dev/null +++ b/ui3/css-vars-ponyfill.min.js @@ -0,0 +1,10 @@ +/*! + * css-vars-ponyfill + * v2.0.2 + * https://jhildenbiddle.github.io/css-vars-ponyfill/ + * (c) 2018-2019 John Hildenbiddle + * MIT license + */ +/* Hacked a bit by bp2008 to bypass module loading by injecting into window.cssVars */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).cssVars=window.cssVars=t()}(this,function(){"use strict";function e(){return(e=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{},r={mimeType:t.mimeType||null,onBeforeSend:t.onBeforeSend||Function.prototype,onSuccess:t.onSuccess||Function.prototype,onError:t.onError||Function.prototype,onComplete:t.onComplete||Function.prototype},n=Array.isArray(e)?e:[e],o=Array.apply(null,Array(n.length)).map(function(e){return null});function s(){return!("<"===(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").trim().charAt(0))}function a(e,t){r.onError(e,n[t],t)}function c(e,t){var s=r.onSuccess(e,n[t],t);e=!1===s?"":s||e,o[t]=e,-1===o.indexOf(null)&&r.onComplete(o)}var i=document.createElement("a");n.forEach(function(e,t){if(i.setAttribute("href",e),i.href=String(i.href),Boolean(document.all&&!window.atob)&&i.host.split(":")[0]!==location.host.split(":")[0]){if(i.protocol===location.protocol){var n=new XDomainRequest;n.open("GET",e),n.timeout=0,n.onprogress=Function.prototype,n.ontimeout=Function.prototype,n.onload=function(){s(n.responseText)?c(n.responseText,t):a(n,t)},n.onerror=function(e){a(n,t)},setTimeout(function(){n.send()},0)}else console.warn("Internet Explorer 9 Cross-Origin (CORS) requests must use the same protocol (".concat(e,")")),a(null,t)}else{var o=new XMLHttpRequest;o.open("GET",e),r.mimeType&&o.overrideMimeType&&o.overrideMimeType(r.mimeType),r.onBeforeSend(o,e,t),o.onreadystatechange=function(){4===o.readyState&&(200===o.status&&s(o.responseText)?c(o.responseText,t):a(o,t))},o.send()}})}function n(e){var t={cssComments:/\/\*[\s\S]+?\*\//g,cssImports:/(?:@import\s*)(?:url\(\s*)?(?:['"])([^'"]*)(?:['"])(?:\s*\))?(?:[^;]*;)/g},n={rootElement:e.rootElement||document,include:e.include||'style,link[rel="stylesheet"]',exclude:e.exclude||null,filter:e.filter||null,useCSSOM:e.useCSSOM||!1,onBeforeSend:e.onBeforeSend||Function.prototype,onSuccess:e.onSuccess||Function.prototype,onError:e.onError||Function.prototype,onComplete:e.onComplete||Function.prototype},s=Array.apply(null,n.rootElement.querySelectorAll(n.include)).filter(function(e){return t=e,r=n.exclude,!(t.matches||t.matchesSelector||t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector).call(t,r);var t,r}),a=Array.apply(null,Array(s.length)).map(function(e){return null});function c(){if(-1===a.indexOf(null)){var e=a.join("");n.onComplete(e,a,s)}}function i(e,t,o,s){var i=n.onSuccess(e,o,s);(function e(t,o,s,a){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[];var i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:[];var l=u(t,s,i);l.rules.length?r(l.absoluteUrls,{onBeforeSend:function(e,t,r){n.onBeforeSend(e,o,t)},onSuccess:function(e,t,r){var s=n.onSuccess(e,o,t),a=u(e=!1===s?"":s||e,t,i);return a.rules.forEach(function(t,r){e=e.replace(t,a.absoluteRules[r])}),e},onError:function(r,n,u){c.push({xhr:r,url:n}),i.push(l.rules[u]),e(t,o,s,a,c,i)},onComplete:function(r){r.forEach(function(e,r){t=t.replace(l.rules[r],e)}),e(t,o,s,a,c,i)}}):a(t,c)})(e=void 0!==i&&!1===Boolean(i)?"":i||e,o,s,function(e,r){null===a[t]&&(r.forEach(function(e){return n.onError(e.xhr,o,e.url)}),!n.filter||n.filter.test(e)?a[t]=e:a[t]="",c())})}function u(e,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],s={};return s.rules=(e.replace(t.cssComments,"").match(t.cssImports)||[]).filter(function(e){return-1===n.indexOf(e)}),s.urls=s.rules.map(function(e){return e.replace(t.cssImports,"$1")}),s.absoluteUrls=s.urls.map(function(e){return o(e,r)}),s.absoluteRules=s.rules.map(function(e,t){var n=s.urls[t],a=o(s.absoluteUrls[t],r);return e.replace(n,a)}),s}s.length?s.forEach(function(e,t){var s=e.getAttribute("href"),u=e.getAttribute("rel"),l="LINK"===e.nodeName&&s&&u&&"stylesheet"===u.toLowerCase(),f="STYLE"===e.nodeName;if(l)r(s,{mimeType:"text/css",onBeforeSend:function(t,r,o){n.onBeforeSend(t,e,r)},onSuccess:function(r,n,a){var c=o(s,location.href);i(r,t,e,c)},onError:function(r,o,s){a[t]="",n.onError(r,e,o),c()}});else if(f){var d=e.textContent;n.useCSSOM&&(d=Array.apply(null,e.sheet.cssRules).map(function(e){return e.cssText}).join("")),i(d,t,e,location.href)}else a[t]="",c()}):n.onComplete("",[])}function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:location.href,r=document.implementation.createHTMLDocument(""),n=r.createElement("base"),o=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(o),n.href=t,o.href=e,o.href}var s=a;function a(e,t,r){e instanceof RegExp&&(e=c(e,r)),t instanceof RegExp&&(t=c(t,r));var n=i(e,t,r);return n&&{start:n[0],end:n[1],pre:r.slice(0,n[0]),body:r.slice(n[0]+e.length,n[1]),post:r.slice(n[1]+t.length)}}function c(e,t){var r=t.match(e);return r?r[0]:null}function i(e,t,r){var n,o,s,a,c,i=r.indexOf(e),u=r.indexOf(t,i+1),l=i;if(i>=0&&u>0){for(n=[],s=r.length;l>=0&&!c;)l==i?(n.push(l),i=r.indexOf(e,l+1)):1==n.length?c=[n.pop(),u]:((o=n.pop())=0?i:u;n.length&&(c=[s,a])}return c}function u(t){var r=e({},{preserveStatic:!0,removeComments:!1},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});function n(e){throw new Error("CSS parse error: ".concat(e))}function o(e){var r=e.exec(t);if(r)return t=t.slice(r[0].length),r}function a(){return o(/^{\s*/)}function c(){return o(/^}/)}function i(){o(/^\s*/)}function u(){if(i(),"/"===t[0]&&"*"===t[1]){for(var e=2;t[e]&&("*"!==t[e]||"/"!==t[e+1]);)e++;if(!t[e])return n("end of comment is missing");var r=t.slice(2,e);return t=t.slice(e+2),{type:"comment",comment:r}}}function l(){for(var e,t=[];e=u();)t.push(e);return r.removeComments?[]:t}function f(){for(i();"}"===t[0];)n("extra closing bracket");var e=o(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/);if(e)return e[0].trim().replace(/\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*\/+/g,"").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g,function(e){return e.replace(/,/g,"‌")}).split(/\s*(?![^(]*\)),\s*/).map(function(e){return e.replace(/\u200C/g,",")})}function d(){o(/^([;\s]*)+/);var e=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g,t=o(/^(\*?[-#\/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){if(t=t[0].trim(),!o(/^:\s*/))return n("property missing ':'");var r=o(/^((?:\/\*.*?\*\/|'(?:\\'|.)*?'|"(?:\\"|.)*?"|\((\s*'(?:\\'|.)*?'|"(?:\\"|.)*?"|[^)]*?)\s*\)|[^};])+)/),s={type:"declaration",property:t.replace(e,""),value:r?r[0].replace(e,"").trim():""};return o(/^[;\s]*/),s}}function p(){if(!a())return n("missing '{'");for(var e,t=l();e=d();)t.push(e),t=t.concat(l());return c()?t:n("missing '}'")}function m(){i();for(var e,t=[];e=o(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)t.push(e[1]),o(/^,\s*/);if(t.length)return{type:"keyframe",values:t,declarations:p()}}function v(){if(i(),"@"===t[0]){var e=function(){var e=o(/^@([-\w]+)?keyframes\s*/);if(e){var t=e[1];if(!(e=o(/^([-\w]+)\s*/)))return n("@keyframes missing name");var r,s=e[1];if(!a())return n("@keyframes missing '{'");for(var i=l();r=m();)i.push(r),i=i.concat(l());return c()?{type:"keyframes",name:s,vendor:t,keyframes:i}:n("@keyframes missing '}'")}}()||function(){var e=o(/^@supports *([^{]+)/);if(e)return{type:"supports",supports:e[1].trim(),rules:y()}}()||function(){if(o(/^@host\s*/))return{type:"host",rules:y()}}()||function(){var e=o(/^@media *([^{]+)/);if(e)return{type:"media",media:e[1].trim(),rules:y()}}()||function(){var e=o(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);if(e)return{type:"custom-media",name:e[1].trim(),media:e[2].trim()}}()||function(){if(o(/^@page */))return{type:"page",selectors:f()||[],declarations:p()}}()||function(){var e=o(/^@([-\w]+)?document *([^{]+)/);if(e)return{type:"document",document:e[2].trim(),vendor:e[1]?e[1].trim():null,rules:y()}}()||function(){if(o(/^@font-face\s*/))return{type:"font-face",declarations:p()}}()||function(){var e=o(/^@(import|charset|namespace)\s*([^;]+);/);if(e)return{type:e[1],name:e[2].trim()}}();if(e&&!r.preserveStatic){var s=!1;if(e.declarations)s=e.declarations.some(function(e){return/var\(/.test(e.value)});else s=(e.keyframes||e.rules||[]).some(function(e){return(e.declarations||[]).some(function(e){return/var\(/.test(e.value)})});return s?e:{}}return e}}function h(){if(!r.preserveStatic){var e=s("{","}",t);if(e){var o=-1!==e.pre.indexOf(":root")&&/--\S*\s*:/.test(e.body),a=/var\(/.test(e.body);if(!o&&!a)return t=t.slice(e.end+1),{}}}var c=f()||[],i=r.preserveStatic?p():p().filter(function(e){var t=c.some(function(e){return-1!==e.indexOf(":root")})&&/^--\S/.test(e.property),r=/var\(/.test(e.value);return t||r});return c.length||n("selector missing"),{type:"rule",selectors:c,declarations:i}}function y(e){if(!e&&!a())return n("missing '{'");for(var r,o=l();t.length&&(e||"}"!==t[0])&&(r=v()||h());)r.type&&o.push(r),o=o.concat(l());return e||c()?o:n("missing '}'")}return{type:"stylesheet",stylesheet:{rules:y(!0),errors:[]}}}function l(t){var r=e({},{store:{},onWarning:function(){}},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});return"string"==typeof t&&(t=u(t,r)),t.stylesheet.rules.forEach(function(e){"rule"===e.type&&1===e.selectors.length&&":root"===e.selectors[0]&&e.declarations.forEach(function(e,t){var n=e.property,o=e.value;n&&0===n.indexOf("--")&&(r.store[n]=o)})}),r.store}function f(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",r=arguments.length>2?arguments[2]:void 0,n={charset:function(e){return"@charset "+e.name+";"},comment:function(e){return 0===e.comment.indexOf("__CSSVARSPONYFILL")?"/*"+e.comment+"*/":""},"custom-media":function(e){return"@custom-media "+e.name+" "+e.media+";"},declaration:function(e){return e.property+":"+e.value+";"},document:function(e){return"@"+(e.vendor||"")+"document "+e.document+"{"+o(e.rules)+"}"},"font-face":function(e){return"@font-face{"+o(e.declarations)+"}"},host:function(e){return"@host{"+o(e.rules)+"}"},import:function(e){return"@import "+e.name+";"},keyframe:function(e){return e.values.join(",")+"{"+o(e.declarations)+"}"},keyframes:function(e){return"@"+(e.vendor||"")+"keyframes "+e.name+"{"+o(e.keyframes)+"}"},media:function(e){return"@media "+e.media+"{"+o(e.rules)+"}"},namespace:function(e){return"@namespace "+e.name+";"},page:function(e){return"@page "+(e.selectors.length?e.selectors.join(", "):"")+"{"+o(e.declarations)+"}"},rule:function(e){var t=e.declarations;if(t.length)return e.selectors.join(",")+"{"+o(t)+"}"},supports:function(e){return"@supports "+e.supports+"{"+o(e.rules)+"}"}};function o(e){for(var o="",s=0;s1&&void 0!==arguments[1]?arguments[1]:{});return"string"==typeof t&&(t=u(t,r)),function e(t,r){t.rules.forEach(function(n){n.rules?e(n,r):n.keyframes?n.keyframes.forEach(function(e){"keyframe"===e.type&&r(e.declarations,n)}):n.declarations&&r(n.declarations,t)})}(t.stylesheet,function(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2?arguments[2]:void 0;if(-1===e.indexOf("var("))return e;var n=s("(",")",e);return n?"var"===n.pre.slice(-3)?0===n.body.trim().length?(t.onWarning("var() must contain a non-whitespace string"),e):n.pre.slice(0,-3)+function(e){var n=e.split(",")[0].replace(/[\s\n\t]/g,""),o=(e.match(/(?:\s*,\s*){1}(.*)?/)||[])[1],s=t.variables.hasOwnProperty(n)?String(t.variables[n]):void 0,a=s||(o?String(o):void 0),c=r||e;return s||t.onWarning('variable "'.concat(n,'" is undefined')),a&&"undefined"!==a&&a.length>0?h(a,t,c):"var(".concat(c,")")}(n.body)+h(n.post,t):n.pre+"(".concat(h(n.body,t),")")+h(n.post,t):(-1!==e.indexOf("var(")&&t.onWarning('missing closing ")" in the value "'.concat(e,'"')),e)}var y="undefined"!=typeof window,g=y&&window.CSS&&window.CSS.supports&&window.CSS.supports("(--a: 0)"),S={group:0,job:0},b={rootElement:y?document:null,shadowDOM:!1,include:"style,link[rel=stylesheet]",exclude:"",variables:{},onlyLegacy:!0,preserveStatic:!0,preserveVars:!1,silent:!1,updateDOM:!0,updateURLs:!0,watch:null,onBeforeSend:function(){},onWarning:function(){},onError:function(){},onSuccess:function(){},onComplete:function(){}},E={cssComments:/\/\*[\s\S]+?\*\//g,cssKeyframes:/@(?:-\w*-)?keyframes/,cssMediaQueries:/@media[^{]+\{([\s\S]+?})\s*}/g,cssRootRules:/(?::root\s*{\s*[^}]*})/g,cssUrls:/url\((?!['"]?(?:data|http|\/\/):)['"]?([^'")]*)['"]?\)/g,cssVarDecls:/(?:[\s;]*)(-{2}\w[\w-]*)(?:\s*:\s*)([^;]*);/g,cssVarFunc:/var\(\s*--[\w-]/,cssVars:/(?:(?::root\s*{\s*[^;]*;*\s*)|(?:var\(\s*))(--[^:)]+)(?:\s*[:)])/},w={dom:{},job:{},user:{}},O=!1,C=null,x=0,A=null,j=!1;function k(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o="cssVars(): ",s=e({},b,r);function a(e,t,r,n){!s.silent&&window.console&&console.error("".concat(o).concat(e,"\n"),t),s.onError(e,t,r,n)}function c(e){!s.silent&&window.console&&console.warn("".concat(o).concat(e)),s.onWarning(e)}if(y){if(s.watch)return s.watch=b.watch,function(e){function t(e){var t="LINK"===e.tagName&&-1!==(e.getAttribute("rel")||"").indexOf("stylesheet");return t&&!e.disabled}if(!window.MutationObserver)return;C&&(C.disconnect(),C=null);(C=new MutationObserver(function(r){var n=r.some(function(r){var n,o=!1;return"attributes"===r.type?o=t(r.target):"childList"===r.type&&(n=r.addedNodes,o=Array.apply(null,n).some(function(e){var r=1===e.nodeType,n=r&&e.hasAttribute("data-cssvars"),o=function(e){return"STYLE"===e.tagName&&!e.disabled}(e)&&E.cssVars.test(e.textContent),s=!n&&(t(e)||o);return s})||function(t){return Array.apply(null,t).some(function(t){var r=1===t.nodeType,n=r&&"out"===t.getAttribute("data-cssvars"),o=r&&"src"===t.getAttribute("data-cssvars"),s=o;if(o||n){var a=t.getAttribute("data-cssvars-group"),c=e.rootElement.querySelector('[data-cssvars-group="'.concat(a,'"]'));o&&(T(e.rootElement),w.dom={}),c&&c.parentNode.removeChild(c)}return s})}(r.removedNodes)),o});n&&k(e)})).observe(document.documentElement,{attributes:!0,attributeFilter:["disabled","href"],childList:!0,subtree:!0})}(s),void k(s);if(!1===s.watch&&C&&(C.disconnect(),C=null),!s.__benchmark){if(O===s.rootElement)return void function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100;clearTimeout(A),A=setTimeout(function(){e.__benchmark=null,k(e)},t)}(r);if(s.__benchmark=_(),s.exclude=[C?'[data-cssvars]:not([data-cssvars=""])':'[data-cssvars="out"]',s.exclude].filter(function(e){return e}).join(","),s.variables=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=/^-{2}/;return Object.keys(e).reduce(function(r,n){var o=t.test(n)?n:"--".concat(n.replace(/^-+/,""));return r[o]=e[n],r},{})}(s.variables),!C)if(Array.apply(null,s.rootElement.querySelectorAll('[data-cssvars="out"]')).forEach(function(e){var t=e.getAttribute("data-cssvars-group");(t?s.rootElement.querySelector('[data-cssvars="src"][data-cssvars-group="'.concat(t,'"]')):null)||e.parentNode.removeChild(e)}),x){var i=s.rootElement.querySelectorAll('[data-cssvars]:not([data-cssvars="out"])');i.length2&&void 0!==arguments[2]?arguments[2]:[],d={},p=s.updateDOM?w.dom:Object.keys(w.job).length?w.job:w.job=JSON.parse(JSON.stringify(w.dom));if(i.forEach(function(e,t){if(E.cssVars.test(n[t]))try{var r=u(n[t],{preserveStatic:s.preserveStatic,removeComments:!0});l(r,{store:d,onWarning:c}),e.__cssVars={tree:r}}catch(t){a(t.message,e)}}),s.updateDOM&&e(w.user,s.variables),e(d,s.variables),o=Boolean((document.querySelector("[data-cssvars]")||Object.keys(w.dom).length)&&Object.keys(d).some(function(e){return d[e]!==p[e]})),e(p,w.user,d),o)T(s.rootElement),k(s);else{var v=[],h=[],y=!1;if(w.job={},s.updateDOM&&S.job++,i.forEach(function(t){var r=!t.__cssVars;if(t.__cssVars)try{m(t.__cssVars.tree,e({},s,{variables:p,onWarning:c}));var n=f(t.__cssVars.tree);if(s.updateDOM){if(t.getAttribute("data-cssvars")||t.setAttribute("data-cssvars","src"),n.length){var o=t.getAttribute("data-cssvars-group")||++S.group,i=n.replace(/\s/g,""),u=s.rootElement.querySelector('[data-cssvars="out"][data-cssvars-group="'.concat(o,'"]'))||document.createElement("style");y=y||E.cssKeyframes.test(n),u.hasAttribute("data-cssvars")||u.setAttribute("data-cssvars","out"),i===t.textContent.replace(/\s/g,"")?(r=!0,u&&u.parentNode&&(t.removeAttribute("data-cssvars-group"),u.parentNode.removeChild(u))):i!==u.textContent.replace(/\s/g,"")&&([t,u].forEach(function(e){e.setAttribute("data-cssvars-job",S.job),e.setAttribute("data-cssvars-group",o)}),u.textContent=n,v.push(n),h.push(u),u.parentNode||t.parentNode.insertBefore(u,t.nextSibling))}}else t.textContent.replace(/\s/g,"")!==n&&v.push(n)}catch(e){a(e.message,t)}r&&t.setAttribute("data-cssvars","skip"),t.hasAttribute("data-cssvars-job")||t.setAttribute("data-cssvars-job",S.job)}),x=s.rootElement.querySelectorAll('[data-cssvars]:not([data-cssvars="out"])').length,s.shadowDOM)for(var g,b=[s.rootElement].concat(t(s.rootElement.querySelectorAll("*"))),C=0;g=b[C];++C){if(g.shadowRoot&&g.shadowRoot.querySelector("style"))k(e({},s,{rootElement:g.shadowRoot,variables:w.dom}))}s.updateDOM&&y&&function(e){var t=["animation-name","-moz-animation-name","-webkit-animation-name"].filter(function(e){return getComputedStyle(document.body)[e]})[0];if(t){for(var r=e.getElementsByTagName("*"),n=[],o=0,s=r.length;o1&&void 0!==arguments[1]?arguments[1]:location.href,r=document.implementation.createHTMLDocument(""),n=r.createElement("base"),o=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(o),n.href=t,o.href=e,o.href}function _(){return y&&(window.performance||{}).now?window.performance.now():(new Date).getTime()}function T(e){Array.apply(null,e.querySelectorAll('[data-cssvars="skip"],[data-cssvars="src"]')).forEach(function(e){return e.setAttribute("data-cssvars","")})}return k.reset=function(){for(var e in O=!1,C&&(C.disconnect(),C=null),x=0,A=null,j=!1,w)w[e]={}},k}); +//# sourceMappingURL=css-vars-ponyfill.min.js.map diff --git a/ui3/icons-src/logosrc.png b/ui3/icons-src/logosrc.png new file mode 100644 index 0000000..7aa94c4 Binary files /dev/null and b/ui3/icons-src/logosrc.png differ diff --git a/ui3/launcher-icon.png b/ui3/launcher-icon.png index 75ca0a5..b7870c9 100644 Binary files a/ui3/launcher-icon.png and b/ui3/launcher-icon.png differ diff --git a/ui3/libs-src/Dialog.css b/ui3/libs-src/Dialog.css index af6d792..199bde6 100644 --- a/ui3/libs-src/Dialog.css +++ b/ui3/libs-src/Dialog.css @@ -143,6 +143,7 @@ overflow: auto; max-width: 90vw; max-height: 85vh; + max-height: calc(100vh - 31px); } .dialog_content a, .dialog_content a:visited diff --git a/ui3/libs-ui3.css b/ui3/libs-ui3.css index 26bc887..f63ef96 100644 --- a/ui3/libs-ui3.css +++ b/ui3/libs-ui3.css @@ -7,4 +7,4 @@ /*slider-checkbox.css*/ .sliderCb[type=checkbox]:checked,.sliderCb[type=checkbox]:not(:checked){position:absolute;left:-9999px}.sliderCb[type=checkbox]:checked+label,.sliderCb[type=checkbox]:not(:checked)+label{position:relative;padding-right:75px;cursor:pointer}.sliderCb[type=checkbox]:checked+label:after,.sliderCb[type=checkbox]:checked+label:before,.sliderCb[type=checkbox]:not(:checked)+label:after,.sliderCb[type=checkbox]:not(:checked)+label:before{content:'';position:absolute}.sliderCb[type=checkbox]:checked+label:before,.sliderCb[type=checkbox]:not(:checked)+label:before{right:10px;top:6px;width:65px;height:30px;background:#2B2D30;box-shadow:0 0 1px rgba(255,255,255,.75);border-radius:15px;transition:background-color .2s}.sliderCb[type=checkbox]:checked+label:after,.sliderCb[type=checkbox]:not(:checked)+label:after{width:20px;height:20px;transition:all .2s;border-radius:50%;background:#a9b2bc;top:11px;right:50px}.sliderCb[type=checkbox]:checked+label:before{background:#3C3F43}.sliderCb[type=checkbox]:checked+label:after{background:#6ea8dd;top:11px;right:15px}.sliderCb[type=checkbox]:checked+label .ui,.sliderCb[type=checkbox]:checked+label .ui:after,.sliderCb[type=checkbox]:not(:checked)+label .ui:before{position:absolute;right:16px;width:65px;border-radius:15px;font-size:14px;font-weight:700;line-height:22px;transition:all .2s}.sliderCb[type=checkbox]:not(:checked)+label .ui:before{content:"no";right:-22px;top:9px;color:#A9A9A9}.sliderCb[type=checkbox]:checked+label .ui:after{right:-18px;top:-4px;content:"yes";color:#6ea8dd}.sliderCb[type=checkbox]:focus+label:before{border:1px dashed #777;margin-top:-1px} /*Dialog.css*/ -.dialog_close_icon svg{stroke:currentColor;pointer-events:none}.dialog_refresh_icon svg{fill:currentColor;pointer-events:none}.dialog_overlay{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000}.dialog_wrapper{position:absolute;border:1px solid #1870B5;background-color:#FFF;color:#000;font-size:10pt;overflow-x:hidden;overflow-y:hidden;min-width:160px;min-height:24px;max-width:90vw;box-shadow:0 0 35px 1px rgba(0,0,0,.4)}.dialog_wrapper.darkTheme{background-color:#393939;color:#cdcdcd}.dialog_titlebar{position:relative;height:24px;overflow:hidden;padding-right:40px;border-bottom:1px solid #B5D5FF;user-select:none;cursor:default;font-size:0}.dialog_wrapper.darkTheme .dialog_titlebar{border-bottom:1px solid #15273f;background-color:#272727}.dialog_title{padding:0 4px;top:0;left:0;height:24px;line-height:24px;font-size:16px;user-select:none}.dialog_close,.dialog_refresh{position:absolute;top:0;right:0;width:40px;height:24px;background-color:#FFF}.dialog_close:hover{background-color:#E81123;color:#FFF}.dialog_close:active{background-color:#F1707A;color:#FFF}.dialog_wrapper.darkTheme .dialog_close,.dialog_wrapper.darkTheme .dialog_refresh{background-color:#272727;color:#cdcdcd}.dialog_wrapper.darkTheme .dialog_close:hover{background-color:#9b0612}.dialog_wrapper.darkTheme .dialog_close:active{background-color:#7d040e}.dialog_refresh{right:40px}.dialog_refresh:hover,.dialog_wrapper.darkTheme .dialog_refresh:hover{background-color:#158e1d;color:#FFF}.dialog_refresh:active,.dialog_wrapper.darkTheme .dialog_refresh:active{background-color:#146619;color:#FFF}.dialog_close_icon,.dialog_refresh_icon{width:12px;height:12px;margin:6px auto}.dialog_content{position:relative;padding:2px 4px;overflow:auto;max-width:90vw;max-height:85vh}.dialog_content a,.dialog_content a:visited{color:#8DF}.dialog_wrapper.loading::after{content:"";position:absolute;top:24px;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)} +.dialog_close_icon svg{stroke:currentColor;pointer-events:none}.dialog_refresh_icon svg{fill:currentColor;pointer-events:none}.dialog_overlay{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000}.dialog_wrapper{position:absolute;border:1px solid #1870B5;background-color:#FFF;color:#000;font-size:10pt;overflow-x:hidden;overflow-y:hidden;min-width:160px;min-height:24px;max-width:90vw;box-shadow:0 0 35px 1px rgba(0,0,0,.4)}.dialog_wrapper.darkTheme{background-color:#393939;color:#cdcdcd}.dialog_titlebar{position:relative;height:24px;overflow:hidden;padding-right:40px;border-bottom:1px solid #B5D5FF;user-select:none;cursor:default;font-size:0}.dialog_wrapper.darkTheme .dialog_titlebar{border-bottom:1px solid #15273f;background-color:#272727}.dialog_title{padding:0 4px;top:0;left:0;height:24px;line-height:24px;font-size:16px;user-select:none}.dialog_close,.dialog_refresh{position:absolute;top:0;right:0;width:40px;height:24px;background-color:#FFF}.dialog_close:hover{background-color:#E81123;color:#FFF}.dialog_close:active{background-color:#F1707A;color:#FFF}.dialog_wrapper.darkTheme .dialog_close,.dialog_wrapper.darkTheme .dialog_refresh{background-color:#272727;color:#cdcdcd}.dialog_wrapper.darkTheme .dialog_close:hover{background-color:#9b0612}.dialog_wrapper.darkTheme .dialog_close:active{background-color:#7d040e}.dialog_refresh{right:40px}.dialog_refresh:hover,.dialog_wrapper.darkTheme .dialog_refresh:hover{background-color:#158e1d;color:#FFF}.dialog_refresh:active,.dialog_wrapper.darkTheme .dialog_refresh:active{background-color:#146619;color:#FFF}.dialog_close_icon,.dialog_refresh_icon{width:12px;height:12px;margin:6px auto}.dialog_content{position:relative;padding:2px 4px;overflow:auto;max-width:90vw;max-height:85vh;max-height:calc(100vh - 31px)}.dialog_content a,.dialog_content a:visited{color:#8DF}.dialog_wrapper.loading::after{content:"";position:absolute;top:24px;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)} diff --git a/ui3/licenses.txt b/ui3/licenses.txt index abb4601..7bc74b1 100644 --- a/ui3/licenses.txt +++ b/ui3/licenses.txt @@ -160,4 +160,7 @@ AVI.js // Available under the same license as UI3: GNU LESSER GENERAL PUBLIC LICENSE, Version 3 jmuxer -The MIT License - https://github.com/samirkumardas/jmuxer/blob/master/LICENSE \ No newline at end of file +The MIT License - https://github.com/samirkumardas/jmuxer/blob/master/LICENSE + +css-vars-ponyfill +The MIT License - https://github.com/jhildenbiddle/css-vars-ponyfill/blob/master/LICENSE \ No newline at end of file diff --git a/ui3/logos/launcher-icon144.png b/ui3/logos/launcher-icon144.png new file mode 100644 index 0000000..bd85804 Binary files /dev/null and b/ui3/logos/launcher-icon144.png differ diff --git a/ui3/logos/launcher-icon144.webp b/ui3/logos/launcher-icon144.webp new file mode 100644 index 0000000..ea8cab6 Binary files /dev/null and b/ui3/logos/launcher-icon144.webp differ diff --git a/ui3/logos/launcher-icon168.png b/ui3/logos/launcher-icon168.png new file mode 100644 index 0000000..e7507a0 Binary files /dev/null and b/ui3/logos/launcher-icon168.png differ diff --git a/ui3/logos/launcher-icon168.webp b/ui3/logos/launcher-icon168.webp new file mode 100644 index 0000000..035acf9 Binary files /dev/null and b/ui3/logos/launcher-icon168.webp differ diff --git a/ui3/logos/launcher-icon192.webp b/ui3/logos/launcher-icon192.webp new file mode 100644 index 0000000..c3d250d Binary files /dev/null and b/ui3/logos/launcher-icon192.webp differ diff --git a/ui3/logos/launcher-icon48.png b/ui3/logos/launcher-icon48.png new file mode 100644 index 0000000..7ee1b9a Binary files /dev/null and b/ui3/logos/launcher-icon48.png differ diff --git a/ui3/logos/launcher-icon48.webp b/ui3/logos/launcher-icon48.webp new file mode 100644 index 0000000..50e50f3 Binary files /dev/null and b/ui3/logos/launcher-icon48.webp differ diff --git a/ui3/logos/launcher-icon72.png b/ui3/logos/launcher-icon72.png new file mode 100644 index 0000000..ec37cec Binary files /dev/null and b/ui3/logos/launcher-icon72.png differ diff --git a/ui3/logos/launcher-icon72.webp b/ui3/logos/launcher-icon72.webp new file mode 100644 index 0000000..77f99e1 Binary files /dev/null and b/ui3/logos/launcher-icon72.webp differ diff --git a/ui3/logos/launcher-icon96.png b/ui3/logos/launcher-icon96.png new file mode 100644 index 0000000..1b5ffbb Binary files /dev/null and b/ui3/logos/launcher-icon96.png differ diff --git a/ui3/logos/launcher-icon96.webp b/ui3/logos/launcher-icon96.webp new file mode 100644 index 0000000..21a632e Binary files /dev/null and b/ui3/logos/launcher-icon96.webp differ diff --git a/ui3/logos/overlay96.png b/ui3/logos/overlay96.png new file mode 100644 index 0000000..07afa35 Binary files /dev/null and b/ui3/logos/overlay96.png differ diff --git a/ui3/logos/overlay96.webp b/ui3/logos/overlay96.webp new file mode 100644 index 0000000..3885332 Binary files /dev/null and b/ui3/logos/overlay96.webp differ diff --git a/ui3/manifest.json b/ui3/manifest.json index d7e205b..3894b19 100644 --- a/ui3/manifest.json +++ b/ui3/manifest.json @@ -2,6 +2,61 @@ "short_name": "UI3", "name": "Blue Iris UI3", "icons": [ + { + "src": "logos/launcher-icon48.webp", + "sizes": "48x48", + "type": "image/webp" + }, + { + "src": "logos/launcher-icon72.webp", + "sizes": "72x72", + "type": "image/webp" + }, + { + "src": "logos/launcher-icon96.webp", + "sizes": "96x96", + "type": "image/webp" + }, + { + "src": "logos/launcher-icon144.webp", + "sizes": "144x144", + "type": "image/webp" + }, + { + "src": "logos/launcher-icon168.webp", + "sizes": "168x168", + "type": "image/webp" + }, + { + "src": "logos/launcher-icon192.webp", + "sizes": "192x192", + "type": "image/webp" + }, + { + "src": "logos/launcher-icon48.png", + "sizes": "48x48", + "type": "image/png" + }, + { + "src": "logos/launcher-icon72.png", + "sizes": "72x72", + "type": "image/png" + }, + { + "src": "logos/launcher-icon96.png", + "sizes": "96x96", + "type": "image/png" + }, + { + "src": "logos/launcher-icon144.png", + "sizes": "144x144", + "type": "image/png" + }, + { + "src": "logos/launcher-icon168.png", + "sizes": "168x168", + "type": "image/png" + }, { "src": "launcher-icon.png", "sizes": "192x192", diff --git a/ui3/ui3.css b/ui3/ui3.css index acb0a7f..bfa25c3 100644 --- a/ui3/ui3.css +++ b/ui3/ui3.css @@ -1,3 +1,55 @@ +:root +{ + /* Main / Misc */ + --main-highlight-color: #3E5F8A; + --panel-bg-color: #181818; + --cliplist-bg-color: #101010; + --contextmenu-server-icon-color: #444E4F; + /* Dropdowns, Calendar, SquareButtons */ + --uicontrol-bg-color: #101010; + --uicontrol-hover-bg-color: #303030; + --uicontrol-active-bg-color: #505050; + /* Dropdowns */ + --dropdown-item-bg-color: #000000; + --dropdown-item-hover-bg-color: #303030; + --dropdown-item-active-bg-color: #505050; + --dropdown-item-color: #DDDDDD; + --dropdown-item-hover-color: #EEEEEE; + --dropdown-item-active-color: #FFFFFF; + --dropdown-item-blue-color: #618dc7; + --dropdown-item-blue-hover-color: #7db0f3; + --dropdown-item-blue-active-color: #8fbefd; + --dropdown-item-golden-color: #C8B11C; + --dropdown-item-golden-hover-color: #e6cf35; + --dropdown-item-golden-active-color: #ffe84e; + --dropdown-item-red-color: #F09700; + --dropdown-item-red-hover-color: #ffa919; + --dropdown-item-red-active-color: #ffb944; + /* Dialogs */ + --dialog-bg-color: var(--panel-bg-color); + --dialog-border-color: #404040; + --dialog-color: #cdcdcd; + --dialog-titlebar-bg-color: var(--main-highlight-color); + --dialog-titlebar-bottom-border-color: #2b405d; + --dialog-titlebar-color: #cdcdcd; + /* Collapsible headings in dialogs */ + --collapsible-heading-bg-color: var(--panel-bg-color); + --collapsible-heading-hover-bg-color: #333333; + --collapsible-heading-active-bg-color: #404040; + --collapsible-heading-color: #808080; + --collapsible-heading-expanded-bg-color: #404040; + --collapsible-heading-expanded-hover-bg-color: #4a4a4a; + --collapsible-heading-expanded-active-bg-color: #505050; + --collapsible-heading-expanded-color: #cdcdcd; + /* Streaming Profile List */ + --streaming-profile-item-bg-color: #272727; + --streaming-profile-item-hover-bg-color: #404040; + --streaming-profile-item-ghost-bg-color: rgba(255,255,255,0.1); + /* Clip List */ + --datetile-bg-color: #383E47; + /* Context Menus */ + --context-menu-icon-highlight-color: #0097F0; +} /* SVG */ svg.icon { @@ -52,7 +104,7 @@ svg.stroke body { margin: 0px; - background-color: #15171B; + background-color: var(--panel-bg-color); overflow: hidden; font-family: Arial, Sans-Serif; font-size: 0px; @@ -104,7 +156,7 @@ body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable position: absolute; width: 100%; height: 64px; - background-color: #15171B; + background-color: var(--panel-bg-color); overflow: hidden; z-index: 100; } @@ -136,7 +188,7 @@ body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable top: 64px; height: 500px; width: 256px; - background-color: #15171B; + background-color: var(--panel-bg-color); } #layoutleftLive, #layoutleftRecordings, #layoutleftFlasher, #layoutleftLiveScrollable, #layoutleftLiveScrollableWrapper @@ -176,7 +228,7 @@ body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable #layoutbottom { position: absolute; - background-color: #15171B; + background-color: var(--panel-bg-color); left: 256px; bottom: 0px; overflow: hidden; @@ -224,7 +276,7 @@ body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable #systemnamewrapper { height: 100%; - background-color: #0097F0; + background-color: var(--main-highlight-color); color: #FFFFFF; } @@ -249,7 +301,7 @@ body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable .topbar_tab.selected { color: #FFFFFF; - border-bottom: 8px solid #0097F0; + border-bottom: 8px solid var(--main-highlight-color); cursor: default; } @@ -375,7 +427,7 @@ div.icon, a.icon .layoutleft-track { width: 8px; - background-color: #15171B; + background-color: var(--panel-bg-color); } .sizeLarge .layoutleft-track @@ -454,16 +506,17 @@ div.icon, a.icon font-size: 16px; text-align: center; cursor: pointer; + background-color: var(--uicontrol-bg-color); } .squareButton:hover, .oneByTwoSquareButton:hover { - background-color: rgba(255,255,255,0.1); + background-color: var(--uicontrol-hover-bg-color); } .squareButton:active, .oneByTwoSquareButton:active { - background-color: rgba(255,255,255,0.3); + background-color: var(--uicontrol-active-bg-color); } .squareButton.disabled, .oneByTwoSquareButton.disabled @@ -477,14 +530,14 @@ div.icon, a.icon .squareButton.spacer:hover, .oneByTwoSquareButton.disabled:hover { - background-color: transparent; + background-color: var(--uicontrol-bg-color); } .squareButton.disabled:active, .squareButton.spacer:active, .oneByTwoSquareButton.disabled:active { - background-color: transparent; + background-color: var(--uicontrol-bg-color); } .squareButton.spacer @@ -645,7 +698,7 @@ div.invisibleLabel .collapsibleTrigger:hover { - background-color: #1F2026; + background-color: rgba(255,255,255,0.067); } .collapsibleTrigger.collapsed .collapsibleTriggerIcon @@ -946,7 +999,7 @@ div.invisibleLabel .progressBarInner { - background-color: #0097F0; + background-color: var(--main-highlight-color); width: 0%; height: 100%; } @@ -1028,7 +1081,7 @@ div.invisibleLabel padding-bottom: 0px; position: absolute; bottom: 0px; - background-color: #15171B; + background-color: var(--panel-bg-color); z-index: 50; overflow: visible; white-space: nowrap; @@ -1383,6 +1436,7 @@ div.invisibleLabel padding-left: 10px; cursor: pointer; overflow: hidden; + background-color: var(--uicontrol-bg-color); } .dropdownBox.disabled @@ -1393,14 +1447,24 @@ div.invisibleLabel #stoplightBtn:hover, .dropdownBox:hover, #dateRange:hover { - background-color: rgba(255,255,255,0.1); + background-color: var(--uicontrol-hover-bg-color); } - #stoplightBtn.disabled:hover, .dropdownBox.disabled:hover + #stoplightBtn:active, .dropdownBox:active, #dateRange:active { - background-color: transparent; + background-color: var(--uicontrol-active-bg-color); } + .dropdownBox.disabled:hover, #dateRange + { + background-color: var(--uicontrol-bg-color); + } + +#stoplightBtn, #stoplightBtn.disabled, #stoplightBtn.disabled:hover +{ + background-color: transparent; +} + .sizeMedium .dropdownBox { margin-top: 10px; @@ -1482,12 +1546,12 @@ div.invisibleLabel .dropdown_list { font-size: 16px; - background-color: #2C2E31; + background-color: var(--dropdown-item-bg-color); display: inline-block; position: absolute; border: 1px solid #969BA7; z-index: 9999999; /* Same z-index as playback settings panels. Toasts are at 999999 (one less 9)*/ - color: #DDDDDD; + color: var(--dropdown-item-color); overflow: auto; } @@ -1499,14 +1563,14 @@ div.invisibleLabel .dropdown_list > div:hover, .dropdown_list > div.selected { - background-color: #666666; - color: #EEEEEE; + background-color: var(--dropdown-item-hover-bg-color); + color: var(--dropdown-item-hover-color); } .dropdown_list > div:active { - background-color: #999999; - color: #FFFFFF; + background-color: var(--dropdown-item-active-bg-color); + color: var(--dropdown-item-active-color); } .sizeMedium .dropdown_list @@ -1538,53 +1602,53 @@ div.invisibleLabel .dropdown_list > div.blueLarger { - color: #0097F0; + color: var(--dropdown-item-blue-color); } .dropdown_list > div.blueLarger:hover { - background-color: #444444; - color: #4dbeff; + background-color: var(--dropdown-item-hover-bg-color); + color: var(--dropdown-item-blue-hover-color); } .dropdown_list > div.blueLarger:active { - background-color: #666666; - color: #99daff; + background-color: var(--dropdown-item-active-bg-color); + color: var(--dropdown-item-blue-active-color); } .dropdown_list > div.goldenLarger { - color: #BBBB00; + color: var(--dropdown-item-golden-color); } .dropdown_list > div.goldenLarger:hover { - background-color: #444444; - color: #DDDD00; + background-color: var(--dropdown-item-hover-bg-color); + color: var(--dropdown-item-golden-hover-color); } .dropdown_list > div.goldenLarger:active { - background-color: #666666; - color: #FFFF00; + background-color: var(--dropdown-item-active-bg-color); + color: var(--dropdown-item-golden-active-color); } .dropdown_list > div.redLarger { - color: #F09700; + color: var(--dropdown-item-red-color); } .dropdown_list > div.redLarger:hover { - background-color: #444444; - color: #ffa919; + background-color: var(--dropdown-item-hover-bg-color); + color: var(--dropdown-item-red-hover-color); } .dropdown_list > div.redLarger:active { - background-color: #666666; - color: #ffb944; + background-color: var(--dropdown-item-active-bg-color); + color: var(--dropdown-item-red-active-color); } .mainMenuIcon @@ -1705,7 +1769,7 @@ div.invisibleLabel #datePickerDialog { font-size: 16px; - background-color: #15171B; + background-color: var(--panel-bg-color); display: inline-block; position: absolute; border: 1px solid #969BA7; @@ -1803,6 +1867,7 @@ div.invisibleLabel white-space: nowrap; /*height: 500px;*/ font-size: 16px; /* Firefox relies on font-size to calculate mousewheel scroll distance */ + background-color: var(--cliplist-bg-color); } #clipsbody.largerThumbs @@ -1821,6 +1886,11 @@ div.invisibleLabel width: 100%; } +.clipListTopDateWrapper +{ + background-color: var(--datetile-bg-color); +} + #clipListTopDate { cursor: pointer; @@ -1917,7 +1987,7 @@ div.invisibleLabel line-height: 18px; font-size: 12px; color: #FFFFFF; - background-color: #383E47; + background-color: var(--datetile-bg-color); } .cliptile, .datetile, .clipListText @@ -2447,6 +2517,9 @@ body + div .b-m-mpanel { font-family: Consolas, Arial, sans-serif; + box-sizing: border-box; + max-height: 100vh; + overflow-y: auto; } .b-m-mpanel a @@ -2455,6 +2528,16 @@ body + div color: #000000; cursor: default; } + + .b-m-mpanel::-webkit-scrollbar-thumb + { + background-color: #BBBBBB; + } + + .b-m-mpanel::-webkit-scrollbar-track + { + background-color: #E0E0E0; + } /* Playback Controls */ #seekhint { @@ -2972,7 +3055,7 @@ body + div display: inline-block; width: 0px; height: 100%; - background-color: #0097F0; + background-color: var(--main-highlight-color); } #seekBarHighlight @@ -3160,7 +3243,7 @@ body + div .about_icon { float: right; - width: 48px; + width: 150.5px; height: 48px; } @@ -3475,7 +3558,7 @@ body + div /* Context Menu Icon Classes */ .iconBlue { - color: #0097F0; + color: var(--context-menu-icon-highlight-color); } /* Disk Usage Dialog */ .pieLegend @@ -3909,7 +3992,7 @@ body + div min-height: 10px; padding: 3px 6px; margin: 3px 0px; - background-color: #424242; + background-color: var(--streaming-profile-item-bg-color); border: 1px solid #5f5f5f; border-radius: 5px; cursor: pointer; @@ -3919,12 +4002,12 @@ body + div .profileListItem:hover { - background-color: #525252; + background-color: var(--streaming-profile-item-hover-bg-color); } .profileListItem.ghost { - background-color: rgba(255,255,255,0.1) !important; + background-color: var(--streaming-profile-item-ghost-bg-color) !important; margin: 0px !important; display: block !important; position: absolute; @@ -3957,29 +4040,34 @@ div::-webkit-scrollbar div::-webkit-scrollbar-thumb { - background: #5e5e5e; + background-color: #5e5e5e; border-left: 0px solid #393939; } div::-webkit-scrollbar-thumb:hover { - background: #6c6c6c; + background-color: #6c6c6c; } div::-webkit-scrollbar-thumb:active { - background: #7a7a7a; + background-color: #7a7a7a; } div::-webkit-scrollbar-track { - background: #393939; + background-color: var(--panel-bg-color); } div::-webkit-scrollbar-corner { background: #222222; } + +#clipsbodyWrapper .layoutleft-track +{ + background-color: var(--cliplist-bg-color); +} /* For IE */ /*.dialog_content { @@ -4008,7 +4096,7 @@ div::-webkit-scrollbar-corner { width: 0%; height: 100%; - background-color: #0097F0; + background-color: var(--main-highlight-color); } /* Export Dialog */ .activeExportDialog @@ -4204,7 +4292,8 @@ div::-webkit-scrollbar-corner /* Stats for nerds */ .statsForNerds { - margin-bottom: 6px; + padding-bottom: 6px; + box-sizing: border-box; } .statsRow @@ -4267,34 +4356,34 @@ div::-webkit-scrollbar-corner margin-top: 8px; padding: 7px 0px; cursor: pointer; - background-color: #424242; - color: #808080; + background-color: var(--collapsible-heading-bg-color); + color: var(--collapsible-heading-color); } .collapsible_section_heading:hover { - background-color: #4a4a4a; + background-color: var(--collapsible-heading-hover-bg-color); } .collapsible_section_heading:active { - background-color: #505050; + background-color: var(--collapsible-heading-active-bg-color); } .collapsible_section_heading.expanded { - background-color: #626262; - color: #cdcdcd; + background-color: var(--collapsible-heading-expanded-bg-color); + color: var(--collapsible-heading-expanded-color); } .collapsible_section_heading.expanded:hover { - background-color: #6a6a6a; + background-color: var(--collapsible-heading-expanded-hover-bg-color); } .collapsible_section_heading.expanded:active { - background-color: #707070; + background-color: var(--collapsible-heading-expanded-active-bg-color); } .collapsible_section @@ -4386,3 +4475,28 @@ div::-webkit-scrollbar-corner { color: #e6e660; } +/* Dialog Theme */ +.dialog_wrapper.darkTheme +{ + border-color: var(--dialog-border-color); + background-color: var(--dialog-bg-color); + color: var(--dialog-color); +} + + .dialog_wrapper.darkTheme .dialog_titlebar + { + border-bottom-color: var(--dialog-titlebar-bottom-border-color); + background-color: var(--dialog-titlebar-bg-color); + } + + .dialog_wrapper.darkTheme .dialog_close, + .dialog_wrapper.darkTheme .dialog_refresh + { + background-color: var(--dialog-titlebar-bg-color); + color: var(--dialog-titlebar-color); + } + + .dialog_wrapper.darkTheme div::-webkit-scrollbar-track + { + background: var(--dialog-bg-color); + } \ No newline at end of file diff --git a/ui3/ui3.js b/ui3/ui3.js index 71caa7a..0c9010f 100644 --- a/ui3/ui3.js +++ b/ui3/ui3.js @@ -445,6 +445,11 @@ var togglableUIFeatures = // High priority notes //////////////////////////////////////// /////////////////////////////////////////////////////////////// +// TODO: Change color scheme to match BI 5 +// TODO: Expandable clip list. ("Show more clips") +// TODO: Detect HTML5 video player suspend and automatically play. +// TODO: Determine cause of pause / play cycle in inactive UI3 tab after switching between two UI3 tabs. + /////////////////////////////////////////////////////////////// // Low priority notes ///////////////////////////////////////// ///////////////////////////////////////////////////////////////