More css tweaks
This commit is contained in:
parent
3fdb84e481
commit
c86f4e4aff
10 changed files with 36 additions and 25 deletions
|
@ -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() {
|
||||
|
|
2
State.ts
2
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 = {
|
||||
|
|
2
Svg.ts
2
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);}
|
||||
|
|
11
Utils.ts
11
Utils.ts
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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 |
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -156,7 +156,7 @@
|
|||
"nl": "Wat wordt hier precies bewaakt?"
|
||||
},
|
||||
"freeform": {
|
||||
"key": "surveillance:type"
|
||||
"key": "surveillance:zone"
|
||||
},
|
||||
"render": {
|
||||
"en": " Surveills a {surveillance:zone}",
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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 {
|
||||
|
|
5
index.ts
5
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>;
|
||||
|
|
Loading…
Reference in a new issue