More css tweaks

This commit is contained in:
Pieter Vander Vennet 2020-11-14 03:26:09 +01:00
parent 3fdb84e481
commit c86f4e4aff
10 changed files with 36 additions and 25 deletions

View file

@ -111,14 +111,7 @@ export class InitUiElements {
InitUiElements.setupAllLayerElements();
if (layoutToUse.customCss !== undefined) {
var head = document.getElementsByTagName('head')[0];
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);
Utils.LoadCustomCss(layoutToUse.customCss);
}
function updateFavs() {

View file

@ -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 = {

2
Svg.ts
View file

@ -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);}

View file

@ -155,4 +155,15 @@ 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);
}
}

View file

@ -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>

Before

Width:  |  Height:  |  Size: 201 B

After

Width:  |  Height:  |  Size: 214 B

View file

@ -1,12 +1,12 @@
html {
--subtle-detail-color: #9d9d9d !important;
--subtle-detail-color-contrast: #00ff00 !important;
--subtle-detail-color: #070 !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;
}

View file

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

View file

@ -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;
stroke: var(--popup-border) !important;
fill: var(--popup-border) !important;
border: solid var(--foreground-color) 1px;
stroke: var(--foreground-color) !important;
fill: var(--foreground-color) !important;
font-size: medium;
float: right;
}
.edit-button svg path{
stroke: var(--popup-border) !important;
fill: var(--popup-border) !important;
stroke: var(--foreground-color) !important;
fill: var(--foreground-color) !important;
}

View file

@ -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 {

View file

@ -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>;