@openglobus/og 0.13.8 → 0.13.12

package/README.md

@@ -2,7 +2,7 @@
 
 # OpenGlobus
 
-English | [简体中文](README_CN.md)
+English | [简体中文](README_CN.md) | [Portuguese-BR](README_pt-BR.md)
 
 [OpenGlobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets
 with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and

package/css/og.css

@@ -14,11 +14,8 @@
 
 .defaultText {
     position: absolute;
-    font: 16px;
-    font-family: Consolas, monaco, monospace;
-    z-index: 1000;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
     color: white;
 }
 
@@ -43,15 +40,6 @@
     overflow: hidden;
 }
 
-.ogLayerSwitcherButton {
-    top: 10%;
-    right: 0px;
-    width: 19px;
-    height: 19px;
-    position: absolute;
-    background-color: rgba(22, 76, 155, 1) !important;
-    z-index: 35000;
-}
 
 .ogAttribution {
     background: rgba(255, 255, 255, 0.8);
@@ -62,39 +50,39 @@
     height: 20px;
 }
 
-    .ogAttribution img {
-        max-height: 2em;
-        width: auto;
-        height: auto;
-        max-width: 100%;
-        vertical-align: middle;
-        border: 0;
-        -ms-interpolation-mode: bicubic;
-    }
+.ogAttribution img {
+    max-height: 2em;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
 
-    .ogAttribution ul {
-        font-size: .7rem;
-        color: black;
-        /*text-shadow: 0 0 2px #fff;*/
-        margin: 0;
-        padding: 1px 0px 1px 0px;
-        line-height: 1.375em;
-        font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
-    }
+.ogAttribution ul {
+    font-size: .7rem;
+    color: black;
+    /*text-shadow: 0 0 2px #fff;*/
+    margin: 0;
+    padding: 1px 0 1px 0;
+    line-height: 1.375em;
+    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+}
 
-    .ogAttribution li {
-        display: inline;
-        list-style: none;
-        line-height: inherit;
-        margin-left: 5px;
-        margin-right: 5px;
-    }
+.ogAttribution li {
+    display: inline;
+    list-style: none;
+    line-height: inherit;
+    margin-left: 5px;
+    margin-right: 5px;
+}
 
 .ogZoomControl {
     background-clip: padding-box;
     height: 70px;
     width: 40px;
-    box-shadow: 0px 1px 4px rgba(15, 15, 15, 0.17);
+    box-shadow: 0 1px 4px rgba(15, 15, 15, 0.17);
     z-index: 0;
     position: absolute;
     outline: none;
@@ -136,29 +124,290 @@
     }
 }
 
-#ogLayerSwitcherButtonMinimize {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAWUlEQVQ4T7WRwQnAMAwDvf+WhULHcPsSDjkIStyDe0Ry/HG0kplHCiodBZWOYgo+6uBKQWHNVgoqXTHccXg895WO9e8/i07EcMe+q3UsElQ6CiodBZWOjUS8VrAiaVC/GgQAAAAASUVORK5CYII=) top left no-repeat;
+/* =============================== */
+/*         INPUTS STYLING          */
+/* =============================== */
+
+input {
+    accent-color: #705affee;
+    cursor: pointer;
 }
 
-#ogLayerSwitcherButtonMaximize {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAYklEQVQ4T82PwQnAMAwDvf+WhULHcDEkYIGaRIaGHNzDDx3YvnB3qgyLhDIsEpZ57svDdtbZH5r9PwrBFg5CKdRHq+btPyFGH7UTgC0chOXQjFFI4pxQ/j8rwyKhDIuEHLMXAr14nPGmYYMAAAAASUVORK5CYII=) top left no-repeat;
+
+/* =============================== */
+/*         MENU V-BAR STYLING      */
+/* =============================== */
+
+.og-menu-bar-vertical {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 40px;
+    height: 40px;
+    background-color: rgba(64, 59, 59, 0.85);
+    border-radius: 2px;
+    box-shadow: 0 1px 4px rgba(15, 15, 15, 0.17);
+    z-index: 0;
 }
 
-#ogLayerSwitcherDialog {
-    overflow: auto;
-    height: 70%;
+
+/* =============================== */
+/*         MENU ΒΤΝ STYLING        */
+/*         General Settings        */
+/* =============================== */
+
+/* You can use any image you want. Just make sure it is around 32x32px. Color doesn't matter */
+/* Filters are used to convert to black and then lighten it: */
+/* e.g. filter: brightness(0) invert(0.6) */
+/* Make sure that you encode it to base64 (there are free online converters) */
+/* Also use this for background attribute: top left no-repeat */
+
+/* All buttons have this class + OFF if they are OFF */
+.og-menu-btn {
+    height: 40px;
+    width: 40px;
     position: absolute;
-    bottom: 25px;
-    top: 10%;
-    right: 0px;
-    width: 17em;
-    background-color: rgba(22, 76, 155, 0.4);
+    outline: none;
+    cursor: pointer;
+    z-index: 1;
+    border-radius: 4px;
+    background-color: rgba(64, 59, 59, 0.85);
+
+}
+
+/* All buttons have a div inside to hold the background base64 image */
+.og-menu-btn > div {
+    width: 40px;
+    height: 40px;
+    background-size: 24px !important;
+    background-position: 8px 8px !important;
+    filter: invert(95%) drop-shadow(4px 4px 3px black);
+}
+
+.og-menu-btn.og-OFF {
+    border: none;
+}
+
+.og-menu-btn.og-OFF > div {
+    filter: invert(75%)
+}
+
+.og-menu-btn.og-OFF > div:hover {
+    filter: invert(100%)
+}
+
+.og-hide {
+    display: none !important;
+}
+
+.og-not-visible {
+    visibility: hidden !important;
+}
+
+.og-dialog {
+    position: absolute;
+    right: 52px;
+    width: 13em;
+    border-radius: 4px;
+    box-shadow: 3px 3px 4px rgba(15, 15, 15, 0.17);
+    background-color: rgba(64, 59, 59, 0.85);
     z-index: 25000;
-    padding: 0 0 0 10px;
+    padding: 0;
+    margin: 0;
     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
-    border-radius: 2px;
+    overflow: hidden;
+}
+
+
+/* =============================== */
+/*     DIALOG HEADER BTN STYLING   */
+/*         General Settings        */
+/* =============================== */
+
+/* All buttons have this class + OFF if they are OFF */
+.og-dialog-header-btn {
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+}
+
+/* All buttons have a div inside to hold the background base64 image */
+.og-dialog-header-btn > div {
+    width: 24px;
+    height: 24px;
+    background-size: 14px;
+    background-position: 5px 5px !important;
+    filter: brightness(0) invert(0.6)
+}
+
+
+.og-dialog-header-btn.og-OFF > div:hover {
+    filter: brightness(0) invert(0.75)
+}
+
+.og-dialog-header-btn > div:hover {
+    filter: brightness(0) invert(0.75);
+}
+
+.og-dialog-header-title {
+    margin-left: 4px;
+    line-height: 22px;
+    font-size: 12px;
+    color: #aaaaaa;
+    width: fit-content;
+}
+
+/* =============================== */
+/* 1 - LAYER SWITCHER */
+#og-layer-switcher-menu-btn {
+    top: 12px;
+    right: 12px;
+}
+
+#og-layer-switcher-menu-btn > div {
+    background: url('data:image/png;base64,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') top left no-repeat;
+}
+
+#og-layer-switcher-dialog {
+    top: 12px;
+    width: 260px;
+    color: whitesmoke;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+
+}
+
+#og-layer-switcher-dialog input {
+    margin-right: 12px;
+}
+
+.og-layer-switcher-main-container {
+    resize: vertical;
+    overflow-y: auto;
+    height: min-content;
+}
+
+.og-layer-switcher-main-container.og-minimized {
+    height: 24px !important;
+    overflow-y: hidden;
+}
+
+#og-layer-switcher-dialog.og-minimized {
+    resize: vertical;
+    height: 24px !important;
+}
+
+.og-layer-switcher-dialog-header {
+    height: 24px;
+    width: 260px;
+    margin: 0;
+    padding: 0;
+    border-radius: 4px 4px 0 0;
+    background-color: rgba(112, 90, 255, 0.8);
+    display: grid;
+    grid-template-columns: 24px 24px 1fr 24px;
+}
+
+#og-layer-switcher-dialog-close-btn > div {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAADeAAAA3gHd6oNqAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAEJQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhihLswAAABV0Uk5TAAIHCRgaHi1LfoiWmJ6jxcfc4/T2aa9U1AAAALtJREFUOMuFU90ahBAUHIlUbMS8/6vuRWWz5TtzhRlzOD9AhXbrlnJO2+o0njC+sKJ480cPy40mybIMd36MfCCOP37a+YJ9qvdfeXI/PYbIDuLxjoVdLABgSl9QDAB/bmb7uc4/dj5XHtCXgYUKxyoo2MtCw9Vr6lQEBVXNHNYaMByKoKoVyRUbW0XLc0Niq2h5JmS2ipZnlgViCPGR4jfFRImpFosll1tsGLnlxKaV214eHHn05OHtj/8XWDc60UIMToAAAAAASUVORK5CYII=') top left no-repeat;
+    background-size: 14px;
+}
+
+#og-layer-switcher-dialog-minMax-btn > div {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGaSURBVFiFxdexThRRGMXx306CCKzGgoTQqRAtJMgzaIc8FYmRNyBqTcILaKfRAk1sYOmMhcFObExYEqDR4u5NyGS5O3d3Z+Ykp5rd7//duXe+OdNRXXewhWd4ivu4N7j2Fz/Rw0e8w1lG7aSWsYtz/Kvoc7zF6iTgOWyjnwEu+wo7mM2Fr+J4AnDZB1iqCt/A7ynCo39hrcrK64BHn6TuxG0c1giP/uKGM7HdADz6VRm+bLLTnutLrFxvYLdBePSbCL8rb8hMy310C7zAfHlPGtACNgthtrel54XwYmlL6x38wWLiR0f4MSbgkfQCTwmPxE0H5QjFmHCD//YS9S8mKT4VVdmCY3wfs/5jrCeun8I3zc+A6K+FsM9tqVcIGa4tfYCuECBbG8V97Ne80mHaG7ARktCV5lZ/gQfljnYabODlsFsyg88NwA8kYvqSkF7rgidDadRaTU2c4MkoeNQiPk0RnvVhEjUrpNfU23KUL4UDdysXfl0PhQCZk5rP8NqQR62sTkYjXWwKEW5jULz8eX4ojPb3QtAdqf+adwSq+JuuGwAAAABJRU5ErkJggg==') top left no-repeat;
+    background-size: 14px;
+}
+
+#og-layer-switcher-dialog-pin-btn {
+    justify-self: right;
+    margin-right: 4px;
+    transform: rotate(-45deg);
+
+}
+
+#og-layer-switcher-dialog-pin-btn.og-OFF {
+    transform: rotate(0deg);
+}
+
+#og-layer-switcher-dialog-pin-btn > div {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE7SURBVFiF7da/LgRRGIbxH2tJqBQbCiSoSVQ6iSglEluoReUmXIM70ChU1ETrChQqF8DSiEIyBQomO9nMOPNvd0O8yalm8j3POec7Z4b//JE0sYfpYcEv8IE7zA4LHo+BSaTBBypxlAGPxy1a/RTYRDRMiRbuAwJ9k2h9Fw7BK/fEOOawoHvGi8JLrcQWrvDWU+QFjyXgSYngZXWI9wqQ0NhPwkZTBJYxErIsmWfchF5q4Ez9M+9gNa9pE+cVgZHuPfFUBF6HRIQ2dnCNlaLwOGW2I8JuWWBaiq5Eu054nEk85BSYL1I47Rj2polTzPi6H0JZKiKQBx5/8ztYE+6J7Trh8d53dDs51BO1NGAWPPk8629ovd/wnyReMVEFPpYTniVxXAUOGwXgSYkTXGKqqkADB1isWug/vyafkbf+xKZ/5a0AAAAASUVORK5CYII=') top left no-repeat;
+    background-size: 14px;
+}
+
+.og-layer-switcher-record {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 6px 0;
+}
+
+.og-layer-switcher-record.og-depth-1,
+.og-layer-switcher-record.og-depth-2 {
+    color: white;
+    font-size: 14px;
+    font-weight: 250;
+}
+
+.og-layer-switcher-record.terrainProviders,
+.og-layer-switcher-record.baselayers {
+    height: 24px;
+}
+
+
+.og-layer-switcher-record.overlays > * {
+    display: inline;
+}
+
+.og-layer-switcher-record.overlays > input {
+    vertical-align: top;
 }
 
+.og-layer-switcher-record.og-depth-0:nth-child(2) {
+    border-top: 2px solid grey;
+    border-bottom: 2px solid grey;
+}
+
+.og-layer-switcher-record.og-depth-0 {
+    padding: 18px 12px;
+}
+
+.og-layer-switcher-record.og-depth-0 input {
+    margin-left: 18px;
+}
+
+details[open] > summary {
+    margin-bottom: 12px;
+}
+
+.og-layer-switcher-dropZone {
+    display: block !important;
+    height: 4px;
+    margin-left: 4px;
+    /* background-color: #705affee; */
+}
+
+.og-layer-switcher-dropZone.og-drag-over {
+
+    background-color: #705affee;
+    opacity: 0.5;
+}
+
+/* =============================== */
+/* GEO IMAGE DRAGGER */
+
+/* Just set position and background url */
+
+#og-geo-image-dragger-menu-btn {
+    top: 112px;
+    right: 12px;
+}
+
+#og-geo-image-dragger-menu-btn > div {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIuSURBVHgB7ZjvVcIwFMWvHr9bN4gTyAZ2A92AOIFu4Ai4AWygToAbiBNQJwAnwDz6QkNs/tgAhXPyO+eeQJuS+5q8lD4gk8lkMpkTZ6S0Uhor3SsVOF7IG3kkrwul6Rlq8zYfSl/ckpboB6E0UCqVbrjdwhWADQUwQx3UXOmbj1WsVJMFG73kVnBbePysz5kBPLBJuvDO+KFYKqv1GQYbiF2uZPiD9Y56JmgZ4cLqOGNNjMEGrBv+LhwDC6vtgp5V8vBt+KlcF1zAT8V6s45TAMJoaeqv+Ptl4Dd/2OjC+Fyx/p1roQBc6JzonXOcODmAHUG584w6L/RDVcRevGJJ9McEjQ+tqae/1P2OYQbo7g9bjpeot28vhwiA/rsIz/mi47k1+w6A1vUry2WmQvuDio5FbdX7yoER4tc0LZW50XcR8CONvjsPgO70FH+TkjTyXCdQLzeJ8NKRSAxgiPbEE9i+k216RjoSCQEMjWvGaBK0RLOPh/SENCQ6BjBoMUl3/AVxxk0N0R2JDgG0mU/RAhH7fCiA2G1UwL8VdkEnu0ACMQGIXQzkIDmIUAAC+zNvj/GIjuO4csB+uBxKn2hKPK4XewlHElPnEu4HUZ+aG9psJmZVYlOqOCVi60IhlmheyKtA38JSErEv9RWaUsecWzqmKwopCDTBUOnmmltd7PLSNgO64vCGuhI3Q3+lRR1EqXSLltIiMUWdFGPucOx5QLvTBM2OlclkMpnM6fILH2AieAQ9pX8AAAAASUVORK5CYII=') top left no-repeat
+}
+
+/* =============================== */
 .displayNone {
     display: none;
 }
@@ -167,21 +416,29 @@
     display: block;
 }
 
-.layersDiv {
-    margin-left: 3px;
-    margin-bottom: 5px;
-    color: white;
-    font-size: 1.2em;
+/* =============================== */
+/* RULER */
+
+/* Just set position and background url */
+#og-ruler-menu-btn {
+    bottom: 193px;
+    right: 12px;
+    box-shadow: 0 1px 4px rgb(15 15 15 / 17%);
+    background-color: rgba(64, 59, 59, 0.85);
+    border-radius: 2px;
 }
 
-.ogLayerSwitcherInput {
-    cursor: pointer;
+#og-ruler-menu-btn > div {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJVSURBVHgB1ZhrdcMwDEbvGBSCIRSCIJRBx2BlUDNYh2BlMAiFEAiBMAhbfDqfuo78yKNp9p2jH3EcW3GuJTmwLklnTWc/nR35R9p2duHqeGjCyrXp7J2+494urFhvnX2Tdt7bnpVJOmtJO/ytXG9YgQw6597c5hWuzsYvYXminENH8it+iJ6xSh/DE1Ti/ISOh2uLMVt0Qwt5XNw9UzHG4mHVdPZF2vF2oBPxIjQ8SJ7zFC6u3TJcW2WsAzNrRz4spjiv1YkHhVWhzLkwXVpYfWeCSunffY0d07SJxjgo82wZoRrOp35e8zdWHPsbJoRVIc/5F/MmmpPipDAirBoez7kvpW3QFnIvQVu8iMmwWuJcS/9jJejRxQZOHkmj21Mu/c/F+Wt07ZPfZ9ReKrdt2Fnob5QYF8MwCdcFCeWRDL+g4R4ZwwB0S50bxnGucexfKodMbtVVdJshnQfKooc8v2BhQjpSxkVFV+s8Nf17hZFjH7SbYC7XPgndM/2Vn+K8cJ8ld+SRSVlLJbpzHuFeySNjqatcB6NrlUEMw1Wzccec0KombumzV5LDw/FrgjZfeLXcnJGC426uUcVZKFEGlsIzWs0C91HmzAyc1+pCPweE2kQTppDZkd+gc2X0nnJHOMON4VTN4iTkK9dPHvyjKneES9Us3uFSPBcWUO4IZ9DL3DN5XPYsLO0IZ/7uWW4rukTlOloxxz7SaF9Iw8XwZAl9xxwKF1bAea1yzsa4zP7DaQ4Zys5bVvL/PiXLijmvUVwnzZ7+p+ilsp/hWio71j9YkX4Byx4UVaJRe+4AAAAASUVORK5CYII=') top left no-repeat
 }
 
-.ogLayerSwitcherLabel {
-    font-size: 0.8em;
+.og-ruler.og-dialog {
+    height: 80px;
+    top: 174px;
 }
 
+/* =============================== */
+
 .ogConsole {
     position: absolute;
     top: 0;
@@ -190,7 +447,7 @@
     max-height: 70%;
     overflow: auto;
     font-size: 12px;
-    font-family: Tahoma;
+    font-family: Arial;
     background-color: rgba(130, 130, 130, 0.49);
     color: white;
     z-index: 100000000;
@@ -210,20 +467,23 @@
     color: yellow;
 }
 
+/* Is this class used elsewhere??? */
+/* if not we can delete it */
+
 .ogViewExtentBtn {
-    float: left;
-    width: 17px;
-    height: 17px;
+    margin-left: 12px;
+    height: 24px;
+    width: 24px;
+    scale: 70%;
     cursor: pointer;
-    -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwMCAxMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48bWV0YWRhdGE+IFN2ZyBWZWN0b3IgSWNvbnMgOiBodHRwOi8vd3d3Lm9ubGluZXdlYmZvbnRzLmNvbS9pY29uIDwvbWV0YWRhdGE+PGc+PHBhdGggZD0iTTUwMC4xLDMyMS43Yy05OC40LDAtMTc4LjIsNzkuOC0xNzguMiwxNzguMmMwLDk4LjQsNzkuOCwxNzguMiwxNzguMiwxNzguMmM5OC40LDAsMTc4LjItNzkuOCwxNzguMi0xNzguMkM2NzguMyw0MDEuNSw1OTguNSwzMjEuNyw1MDAuMSwzMjEuN3ogTTg5OC4yLDQ1NS40Yy0yMC41LTE4NS43LTE2OC0zMzMuMS0zNTMuNy0zNTMuN1YxMGgtODkuMXY5MS44Yy0xODUuNywyMC41LTMzMy4xLDE2OC0zNTMuNywzNTMuN0gxMHY4OS4xaDkxLjhjMjAuNSwxODUuNywxNjgsMzMzLjEsMzUzLjcsMzUzLjdWOTkwaDg5LjF2LTkxLjhjMTg1LjctMjAuNSwzMzMuMS0xNjgsMzUzLjctMzUzLjdIOTkwdi04OS4xQzk5MCw0NTUuNCw4OTguMiw0NTUuNCw4OTguMiw0NTUuNHogTTUwMC4xLDgxMS44Yy0xNzIuMiwwLTMxMS44LTEzOS43LTMxMS44LTMxMS44YzAtMTcyLjIsMTM5LjctMzExLjgsMzExLjgtMzExLjhjMTcyLjIsMCwzMTEuOCwxMzkuNywzMTEuOCwzMTEuOEM4MTEuOSw2NzIuMSw2NzIuMiw4MTEuOCw1MDAuMSw4MTEuOHoiLz48L2c+PC9zdmc+);
-    -webkit-mask-size: 17px;
-    background: #d8d8d8;
-    margin-top: 2px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYEAQAAAAa7ikwAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAABgAAAAYADwa0LPAAAAB3RJTUUH5ggMBTM4rM25AwAAAAJiS0dEAACqjSMyAAABsUlEQVRIx81WWYrCQBAVg4Iwbp8ud5DoYRRBxPMoouiPegQVPYp6Azdc/ly++01XKkmPksQ4ZmAKAr3V0u9VVScU8ikQkQhwuRifHIeCFiAWgy2xWHCGRSIBVKtAt6scdDrGmtz7IOJUyjAk7ne4Ce2JdhsimXzTeKkE7PfK0vEIjMdqTuPTSc23W6BY9G/cjvpwgKjVmOBHDnitXmfnJLcboOs+YNntWGGxADIZtRcOQ4xGEMMhjdV6Ngssl6yz2XjywuSZkf8w/vrW5MS8iWi13LPFgkbC8n5SEFwmVOLry+EApaJJ6C8KCSIaVcRXKk8FlE4D/T5vzmY81zT/0Wsa68znbKPX47ksSC5/JxkM/EdPxDvJ5RKMA3nWw8EfQxQsyecz2yiXvdNUptz7adposO716pim7EQ2Lrv3ZLP+o8/n7RQVzabHwWSSGxcJlb9y4t4qcjlgtWKd9RoiHn9x1WKRG5d1E1mhBr7PzY7WCBaruAiaQsEnnrpuNC5biLzJRL0D06ki1Ircp/FH0lstdRsnoaibzZeweDuKx6m3qE5rPZnlsmu2/KtH/9Pflm+sYR/yIsaCAQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wOC0xMlQwNTo1MTo1NiswMDowMIPhE+YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDgtMTJUMDU6NTE6NTYrMDA6MDDyvKtaAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIyLTA4LTEyVDA1OjUxOjU2KzAwOjAwpamKhQAAAABJRU5ErkJggg==) center center no-repeat;
+
 }
 
-    .ogViewExtentBtn:hover {
-        background: white;
-    }
+.ogViewExtentBtn:hover {
+    border-radius: 10px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYEAQAAAAa7ikwAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAABgAAAAYADwa0LPAAAAB3RJTUUH5ggMBTM4rM25AwAAAAJiS0dEAACqjSMyAAABsUlEQVRIx81WWYrCQBAVg4Iwbp8ud5DoYRRBxPMoouiPegQVPYp6Azdc/ly++01XKkmPksQ4ZmAKAr3V0u9VVScU8ikQkQhwuRifHIeCFiAWgy2xWHCGRSIBVKtAt6scdDrGmtz7IOJUyjAk7ne4Ce2JdhsimXzTeKkE7PfK0vEIjMdqTuPTSc23W6BY9G/cjvpwgKjVmOBHDnitXmfnJLcboOs+YNntWGGxADIZtRcOQ4xGEMMhjdV6Ngssl6yz2XjywuSZkf8w/vrW5MS8iWi13LPFgkbC8n5SEFwmVOLry+EApaJJ6C8KCSIaVcRXKk8FlE4D/T5vzmY81zT/0Wsa68znbKPX47ksSC5/JxkM/EdPxDvJ5RKMA3nWw8EfQxQsyecz2yiXvdNUptz7adposO716pim7EQ2Lrv3ZLP+o8/n7RQVzabHwWSSGxcJlb9y4t4qcjlgtWKd9RoiHn9x1WKRG5d1E1mhBr7PzY7WCBaruAiaQsEnnrpuNC5biLzJRL0D06ki1Ircp/FH0lstdRsnoaibzZeweDuKx6m3qE5rPZnlsmu2/KtH/9Pflm+sYR/yIsaCAQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wOC0xMlQwNTo1MTo1NiswMDowMIPhE+YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDgtMTJUMDU6NTE6NTYrMDA6MDDyvKtaAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIyLTA4LTEyVDA1OjUxOjU2KzAwOjAwpamKhQAAAABJRU5ErkJggg==) center center no-repeat, #705affee;
+}
 
 
 /**
@@ -234,10 +494,10 @@
     top: 0;
     left: 0;
     color: white;
-    font-family: arial;
+    font-family: Arial;
     font-size: 12px;
     width: 346px;
-    text-shadow: 0px 0px 3px #616161;
+    text-shadow: 0 0 3px #616161;
     padding: 10px;
     pointer-events: none;
     transform: scale(1.0);
@@ -245,11 +505,11 @@
     background-color: rgb(55 55 55 / 63%);
 }
 
-    .og-debug-info .og-watch-line {
-        width: 100%;
-        padding-bottom: 5px;
-        display: inline-block;
-    }
+.og-debug-info .og-watch-line {
+    width: 100%;
+    padding-bottom: 5px;
+    display: inline-block;
+}
 
 .og-watch-line .og-watch-label {
     float: left;
@@ -326,9 +586,9 @@
     float: right;
 }
 
-    .og-popup-btn:hover {
-        color: #2e9be7;
-    }
+.og-popup-btn:hover {
+    color: #2e9be7;
+}
 
 .og-popup-title {
     position: absolute;
@@ -366,7 +626,7 @@
     background-clip: padding-box;
     height: 40px;
     width: 40px;
-    box-shadow: 0px 1px 4px rgba(15, 15, 15, 0.17);
+    box-shadow: 0 1px 4px rgba(15, 15, 15, 0.17);
     z-index: 0;
     position: absolute;
     outline: none;
@@ -383,7 +643,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    padding: 12px 0px 12px 12px;
+    padding: 12px 0 12px 12px;
     width: 350px;
     overflow: auto;
     height: calc(100% - 30px);
@@ -395,60 +655,59 @@
     overflow-x: hidden;
 }
 
-    .og-lighing .og-color-options {
-    }
+.og-lighing .og-color-options {
+}
 
-    .og-lighing .og-caption {
-        width: 100%;
-        position: relative;
-        padding-top: 5px;
-        padding-bottom: 5px;
-    }
+.og-lighing .og-caption {
+    width: 100%;
+    position: relative;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
 
-    .og-lighing .og-option {
-        width: 100%;
-        position: relative;
-        display: inline-block;
-        padding-bottom: 7px;
-    }
+.og-lighing .og-option {
+    width: 100%;
+    position: relative;
+    display: inline-block;
+    padding-bottom: 7px;
+}
 
-    .og-lighing .og-label {
-        float: left;
-    }
+.og-lighing .og-label {
+    float: left;
+}
 
-    .og-lighing .og-slider {
-        float: left;
-        width: calc(100% - 85px);
-        margin-left: 10px;
-        margin-right: 10px;
-    }
+.og-lighing .og-slider {
+    float: left;
+    width: calc(100% - 85px);
+    margin-left: 10px;
+    margin-right: 10px;
+}
 
-        .og-lighing .og-slider input {
-            width: 100%;
-            position: relative;
-        }
+.og-lighing .og-slider input {
+    width: 100%;
+    position: relative;
+}
 
-    .og-lighing .og-value {
-        float: left;
-	width: 50px;
-    }
+.og-lighing .og-value {
+    float: left;
+    width: 50px;
+}
 
-    .og-lighing #layers {
-        font-size: 16px;
-        color: #e8e8e8;
-        background-color: #5e5e5e;
-        font-family: monospace;
-        padding: 5px;
-        width: 240px;
-        margin-left: 21px;
-    }
+.og-lighing #layers {
+    font-size: 16px;
+    color: #e8e8e8;
+    background-color: #5e5e5e;
+    font-family: monospace;
+    padding: 5px;
+    width: 240px;
+    margin-left: 21px;
+}
 
 
-.og-coordinates{
+.og-coordinates {
     position: absolute;
     bottom: 25px;
     right: 12px;
-    float: right;
     text-align: right;
     overflow: hidden;
     font-family: monospace;
@@ -460,7 +719,7 @@
     padding: 3px;
 }
 
-.og-coordinates div{
+.og-coordinates div {
     float: left;
 }