More css tweaks

InitUiElements.ts

@@ -111,14 +111,7 @@ export class InitUiElements {
         InitUiElements.setupAllLayerElements();
 
         if (layoutToUse.customCss !== undefined) {
-            var head = document.getElementsByTagName('head')[0];
+           Utils.LoadCustomCss(layoutToUse.customCss);
-            var link = document.createElement('link');
-            link.id = "customCss";
-            link.rel = 'stylesheet';
-            link.type = 'text/css';
-            link.href = layoutToUse.customCss;
-            link.media = 'all';
-            head.appendChild(link);
         }
 
         function updateFavs() {

State.ts

@@ -22,7 +22,7 @@ export default class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.1.2f";
+    public static vNumber = "0.1.3";
     
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

Svg.ts

@@ -39,7 +39,7 @@ export default class Svg {
     public static camera_plus_svg() { return new FixedUiElement(Svg.camera_plus);}
     public static camera_plus_ui() { return new FixedUiElement(Svg.camera_plus_img);}
 
-    public static checkmark = "<svg width=\"26\" height=\"18\" viewBox=\"0 0 26 18\" style=\"fill:none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 7.28571L10.8261 15L23 3\" stroke=\"black\" stroke-width=\"4\" stroke-linejoin=\"round\"/></svg>"
+    public static checkmark = "<svg width=\"26\" height=\"18\" viewBox=\"0 0 26 18\"  xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 7.28571L10.8261 15L23 3\" stroke=\"black\" stroke-width=\"4\" stroke-linejoin=\"round\" style=\"fill:none !important;\"/></svg>"
     public static checkmark_img = Img.AsImageElement(Svg.checkmark)
     public static checkmark_svg() { return new FixedUiElement(Svg.checkmark);}
     public static checkmark_ui() { return new FixedUiElement(Svg.checkmark_img);}

Utils.ts

@@ -154,5 +154,16 @@ export class Utils {
             });
 
     }
+    
+    public static LoadCustomCss(location: string){
+        var head = document.getElementsByTagName('head')[0];
+        var link = document.createElement('link');
+        link.id = "customCss";
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = location;
+        link.media = 'all';
+        head.appendChild(link);
+    }
 
 }

assets/svg/checkmark.svg

@@ -1 +1 @@
-<svg width="26" height="18" viewBox="0 0 26 18" style="fill:none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.28571L10.8261 15L23 3" stroke="black" stroke-width="4" stroke-linejoin="round"/></svg>
+<svg width="26" height="18" viewBox="0 0 26 18"  xmlns="http://www.w3.org/2000/svg"><path d="M3 7.28571L10.8261 15L23 3" stroke="black" stroke-width="4" stroke-linejoin="round" style="fill:none !important;"/></svg>

assets/themes/surveillance_cameras/custom_theme.css

@@ -1,12 +1,12 @@
 html {
-    --subtle-detail-color: #9d9d9d !important;
+    --subtle-detail-color: #070 !important;
-    --subtle-detail-color-contrast: #00ff00 !important;
+    --subtle-detail-color-contrast: #white !important;
     --popup-border: #00ff00 !important;
     --catch-detail-color: #00ff00 !important;
     --catch-detail-color-contrast: black !important;
     --alert-color: #eb00ff !important;
     --background-color: black !important;
     --foreground-color: white !important;
-    --shadow-color: white !important;
+    --shadow-color: #0f0 !important;
 }
 

assets/themes/surveillance_cameras/surveillance_cameras.json

@@ -156,7 +156,7 @@
             "nl": "Wat wordt hier precies bewaakt?"
           },
           "freeform": {
-            "key": "surveillance:type"
+            "key": "surveillance:zone"
           },
           "render": {
             "en": " Surveills a {surveillance:zone}",

css/tagrendering.css

@@ -31,6 +31,7 @@
     display: block;
     margin-top: 1em;
     background-color: var(--subtle-detail-color);
+    color: var(--subtle-detail-color-contrast);
     padding: 1em;
     border-radius: 1em;
     font-size: larger;
@@ -65,15 +66,15 @@
 }
 
 input:checked + label .question-option-with-border {
-    border: 2px solid black;
+    border: 2px solid var(--subtle-detail-color-contrast);
 }
 
 
 .save {
     display: inline-block;
-    border: solid white 2px;
+    border: solid var(--catch-detail-color-contrast) 2px;
     background-color: var(--catch-detail-color);
-    color: white;
+    color: var(--catch-detail-color-contrast);
     padding: 0.2em 0.6em;
     font-size: x-large;
     font-weight: bold;
@@ -89,9 +90,9 @@ input:checked + label .question-option-with-border {
 
 .login-button-friendly {
     display: inline-block;
-    border: solid white 2px;
     background-color:var(--catch-detail-color);
     color: var(--catch-detail-color-contrast);
+    border: solid var(--catch-detail-color-contrast) 2px;
     padding: 0.2em 0.6em;
     font-size: large;
     font-weight: bold;
@@ -125,14 +126,14 @@ input:checked + label .question-option-with-border {
     height: 1.3em;
     padding: 0.5em;
     border-radius: 0.65em;
-    border: solid var(--popup-border) 1px;
+    border: solid var(--foreground-color) 1px;
-    stroke: var(--popup-border) !important;
+    stroke: var(--foreground-color) !important;
-    fill: var(--popup-border) !important;
+    fill: var(--foreground-color) !important;
     font-size: medium;
     float: right;
 }
 
 .edit-button svg path{
-    stroke: var(--popup-border) !important;
+    stroke: var(--foreground-color) !important;
-    fill: var(--popup-border) !important;
+    fill: var(--foreground-color) !important;
 }

index.css

@@ -39,7 +39,8 @@ svg path {
     background-color: var(--background-color);
     color: var(--foreground-color);
 
-    border: 2px solid var(--popup-border)
+    border: 2px solid var(--popup-border);
+    box-shadow: 0 3px 14px var(--shadow-color) !important;
 }
 
 .leaflet-container {

index.ts

@@ -5,6 +5,7 @@ import {QueryParameters} from "./Logic/Web/QueryParameters";
 import {UIEventSource} from "./Logic/UIEventSource";
 import * as $ from "jquery";
 import LayoutConfig from "./Customizations/JSON/LayoutConfig";
+import {Utils} from "./Utils";
 
 let defaultLayout = "bookcases"
 // --------------------- Special actions based on the parameters -----------------
@@ -29,6 +30,10 @@ if(location.href.indexOf("pietervdvn.github.io") >= 0){
     defaultLayout = "bookcases"
 }
 
+const customCssQP = QueryParameters.GetQueryParameter("custom-css", "", "If specified, the custom css from the given link will be loaded additionaly");
+if(customCssQP.data !== undefined && customCssQP.data !== ""){
+    Utils.LoadCustomCss(customCssQP.data);
+}
 
 
 let testing: UIEventSource<string>;