Extract variables from html, add black theme to surveillance cameras, use svgs directly in the frontend
This commit is contained in:
Pieter Vander Vennet
parent
3183dec830
commit
3fdb84e481
26 changed files with 402 additions and 152 deletions
|
|
@ -110,6 +110,16 @@ 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);
|
||||
}
|
||||
|
||||
function updateFavs() {
|
||||
const favs = State.state.favouriteLayers.data ?? [];
|
||||
|
|
@ -269,7 +279,7 @@ export class InitUiElements {
|
|||
]
|
||||
|
||||
if (State.state.featureSwitchShareScreen.data) {
|
||||
tabs.push({header: Svg.share_img, content: new ShareScreen()});
|
||||
tabs.push({header: Svg.share, content: new ShareScreen()});
|
||||
}
|
||||
|
||||
if (State.state.featureSwitchMoreQuests.data) {
|
||||
|
|
@ -282,7 +292,7 @@ export class InitUiElements {
|
|||
|
||||
|
||||
tabs.push({
|
||||
header: Svg.help_img,
|
||||
header: Svg.help ,
|
||||
content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
|
||||
if (userdetails.csCount < State.userJourney.mapCompleteHelpUnlock) {
|
||||
return ""
|
||||
|
|
@ -303,8 +313,8 @@ export class InitUiElements {
|
|||
|
||||
const fullOptions = this.CreateWelcomePane();
|
||||
|
||||
const help = Svg.help_ui().SetClass("open-welcome-button");
|
||||
const close = Svg.close_ui().SetClass("close-welcome-button");
|
||||
const help = Svg.help_svg().SetClass("open-welcome-button");
|
||||
const close = Svg.close_svg().SetClass("close-welcome-button");
|
||||
const checkbox = new CheckBox(
|
||||
new Combine([
|
||||
close,
|
||||
|
|
@ -328,7 +338,7 @@ export class InitUiElements {
|
|||
const fullOptions2 = this.CreateWelcomePane();
|
||||
State.state.fullScreenMessage.setData(fullOptions2)
|
||||
|
||||
Svg.help_ui()
|
||||
Svg.help_svg()
|
||||
.SetClass("open-welcome-button")
|
||||
.SetClass("shadow")
|
||||
.onClick(() => {
|
||||
|
|
@ -366,14 +376,14 @@ export class InitUiElements {
|
|||
}
|
||||
|
||||
layerControlPanel.SetStyle("display:block;padding:1em;border-radius:1em;");
|
||||
const closeButton = Svg.close_ui().SetClass("layer-selection-toggle").SetStyle(" background: #e5f5ff;")
|
||||
const closeButton = Svg.close_svg().SetClass("layer-selection-toggle").SetStyle(" background: var(--subtle-detail-color);")
|
||||
const checkbox = new CheckBox(
|
||||
new Combine([
|
||||
closeButton,
|
||||
layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
|
||||
.SetClass("hidden-on-mobile")
|
||||
,
|
||||
Svg.layers_ui().SetClass("layer-selection-toggle"),
|
||||
Svg.layers_svg().SetClass("layer-selection-toggle"),
|
||||
State.state.layerControlIsOpened
|
||||
);
|
||||
|
||||
|
|
|
|||
109
Svg.ts
109
Svg.ts
File diff suppressed because one or more lines are too long
|
|
@ -27,7 +27,8 @@ export class FullScreenMessageBox extends UIElement {
|
|||
"overflow-y: auto;" +
|
||||
"max-width:100vw;" +
|
||||
"overflow-x:hidden;" +
|
||||
"background:white;"
|
||||
"background:var(--background-color);" +
|
||||
"color: var(--foreground-color);"
|
||||
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export class ImageUploadFlow extends UIElement {
|
|||
this._licensePicker = licensePicker;
|
||||
this._selectedLicence = licensePicker.GetValue();
|
||||
|
||||
this._connectButton = new Combine([t.pleaseLogin])
|
||||
this._connectButton = t.pleaseLogin.Clone()
|
||||
.onClick(() => State.state.osmConnection.AttemptLogin())
|
||||
.SetClass("login-button-friendly");
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ export class ImageUploadFlow extends UIElement {
|
|||
]);
|
||||
|
||||
const label = new Combine([
|
||||
Svg.camera_plus_ui().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"),
|
||||
Svg.camera_plus_svg().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"),
|
||||
Translations.t.image.addPicture
|
||||
.SetStyle("width:max-content;font-size: 28px;" +
|
||||
"font-weight: bold;" +
|
||||
|
|
@ -115,7 +115,7 @@ export class ImageUploadFlow extends UIElement {
|
|||
"cursor:pointer;" +
|
||||
"padding: 0.5em;" +
|
||||
"border-radius: 1em;" +
|
||||
"border: 3px solid black;" +
|
||||
"border: 3px solid var(--popup-border);" +
|
||||
"box-sizing:border-box;")
|
||||
|
||||
const actualInputElement =
|
||||
|
|
|
|||
39
UI/Input/Direction.ts
Normal file
39
UI/Input/Direction.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import {InputElement} from "./InputElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Combine from "../Base/Combine";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
|
||||
/**
|
||||
* Selects a direction in degrees
|
||||
*/
|
||||
export default class Direction extends InputElement<number>{
|
||||
|
||||
private readonly value: UIEventSource<number>;
|
||||
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
|
||||
|
||||
constructor(value?: UIEventSource<number>) {
|
||||
super();
|
||||
this.value = value ?? new UIEventSource<number>(undefined);
|
||||
}
|
||||
|
||||
|
||||
GetValue(): UIEventSource<number> {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
return new Combine([
|
||||
new FixedUiElement("").SetStyle(
|
||||
"position: absolute;top: calc(50% - 0.5em);left: calc(50% - 0.5em);width: 1em;height: 1em;background: red;border-radius: 1em"),
|
||||
|
||||
])
|
||||
.SetStyle("position:relative;display:block;width: min(100%, 25em); padding-top: min(100% , 25em); background:white; border: 1px solid black; border-radius: 999em")
|
||||
.Render();
|
||||
}
|
||||
|
||||
|
||||
IsValid(t: number): boolean {
|
||||
return t >= 0 && t <= 360;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ export default class EditableTagRendering extends UIElement {
|
|||
if(State.state.featureSwitchUserbadge.data){
|
||||
|
||||
this._editButton =
|
||||
Svg.pencil_ui().SetClass("edit-button")
|
||||
Svg.pencil_svg().SetClass("edit-button")
|
||||
.onClick(() => {
|
||||
self._editMode.setData(true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export class UserBadge extends UIElement {
|
|||
.SetClass("userbadge-login")
|
||||
.onClick(() => State.state.osmConnection.AttemptLogin());
|
||||
this._logout =
|
||||
Svg.logout_ui()
|
||||
Svg.logout_svg()
|
||||
.onClick(() => {
|
||||
State.state.osmConnection.LogOut();
|
||||
});
|
||||
|
|
@ -52,7 +52,7 @@ export class UserBadge extends UIElement {
|
|||
this._homeButton = new VariableUiElement(
|
||||
this._userDetails.map((userinfo) => {
|
||||
if (userinfo.home) {
|
||||
return Svg.home_img;
|
||||
return Svg.home;
|
||||
}
|
||||
return "";
|
||||
})
|
||||
|
|
@ -75,7 +75,7 @@ export class UserBadge extends UIElement {
|
|||
|
||||
let messageSpan: UIElement =
|
||||
new Link(
|
||||
new Combine([Svg.envelope_img, "" + user.totalMessages]),
|
||||
new Combine([Svg.envelope, "" + user.totalMessages]),
|
||||
'https://www.openstreetmap.org/messages/inbox',
|
||||
true
|
||||
)
|
||||
|
|
@ -83,7 +83,7 @@ export class UserBadge extends UIElement {
|
|||
|
||||
if (user.unreadMessages > 0) {
|
||||
messageSpan = new Link(
|
||||
new Combine([Svg.envelope_img, "" + user.unreadMessages]),
|
||||
new Combine([Svg.envelope, "" + user.unreadMessages]),
|
||||
'https://www.openstreetmap.org/messages/inbox',
|
||||
true
|
||||
).SetClass("alert")
|
||||
|
|
@ -104,7 +104,7 @@ export class UserBadge extends UIElement {
|
|||
}
|
||||
|
||||
const settings =
|
||||
new Link(Svg.gear_ui(),
|
||||
new Link(Svg.gear_svg(),
|
||||
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`,
|
||||
true)
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ export class UserBadge extends UIElement {
|
|||
|
||||
const csCount =
|
||||
new Link(
|
||||
new Combine([Svg.star_img, "" + user.csCount]),
|
||||
new Combine([Svg.star, "" + user.csCount]),
|
||||
`https://www.openstreetmap.org/user/${user.name}/history`,
|
||||
true);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
e<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
|
@ -1 +1 @@
|
|||
<svg width="26" height="18" viewBox="0 0 26 18" 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" 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>
|
||||
|
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 201 B |
|
|
@ -1,4 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="114" height="114">
|
||||
<path stroke="#000" stroke-width="7" fill="none" d="m7,20h98v72H7zl44,44q5,4 10,0l44-44M7,92l36-36m26,0 36,36"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="svg4"
|
||||
version="1.1"
|
||||
viewBox="0 0 114 114"
|
||||
height="114"
|
||||
width="114">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<path
|
||||
id="path817"
|
||||
d="M 9.6696131,22.725039 42.932885,56.977838 c 0,0 12.343058,14.397206 26.130256,0 C 88.864049,36.30085 103.12276,22.224485 103.12276,22.224485"
|
||||
style="fill:none;stroke:#000000;stroke-width:8.16401958;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<path
|
||||
id="path823"
|
||||
d="M 9.9025424,22.944915 102.88983,22.461864 v 69.921611"
|
||||
style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
|
||||
<path
|
||||
id="path823-3"
|
||||
d="M 102.88983,92.383475 9.902543,92.866526 V 22.944915"
|
||||
style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<path
|
||||
id="path840"
|
||||
d="M 15.059836,89.897056 52.138595,60.125694"
|
||||
style="fill:none;stroke:#000000;stroke-width:2.88938379;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<path
|
||||
id="path840-7"
|
||||
d="M 59.644597,61.331869 98.071505,89.49552"
|
||||
style="fill:none;stroke:#000000;stroke-width:2.89490533;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 224 B After Width: | Height: | Size: 2 KiB |
|
|
@ -1 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/><path fill-rule="evenodd" d="M12 1c-.268 0-.534.01-.797.028-.763.055-1.345.617-1.512 1.304l-.352 1.45c-.02.078-.09.172-.225.22a8.45 8.45 0 00-.728.303c-.13.06-.246.044-.315.002l-1.274-.776c-.604-.368-1.412-.354-1.99.147-.403.348-.78.726-1.129 1.128-.5.579-.515 1.387-.147 1.99l.776 1.275c.042.069.059.185-.002.315-.112.237-.213.48-.302.728-.05.135-.143.206-.221.225l-1.45.352c-.687.167-1.249.749-1.304 1.512a11.149 11.149 0 000 1.594c.055.763.617 1.345 1.304 1.512l1.45.352c.078.02.172.09.22.225.09.248.191.491.303.729.06.129.044.245.002.314l-.776 1.274c-.368.604-.354 1.412.147 1.99.348.403.726.78 1.128 1.129.579.5 1.387.515 1.99.147l1.275-.776c.069-.042.185-.059.315.002.237.112.48.213.728.302.135.05.206.143.225.221l.352 1.45c.167.687.749 1.249 1.512 1.303a11.125 11.125 0 001.594 0c.763-.054 1.345-.616 1.512-1.303l.352-1.45c.02-.078.09-.172.225-.22.248-.09.491-.191.729-.303.129-.06.245-.044.314-.002l1.274.776c.604.368 1.412.354 1.99-.147.403-.348.78-.726 1.129-1.128.5-.579.515-1.387.147-1.99l-.776-1.275c-.042-.069-.059-.185.002-.315.112-.237.213-.48.302-.728.05-.135.143-.206.221-.225l1.45-.352c.687-.167 1.249-.749 1.303-1.512a11.125 11.125 0 000-1.594c-.054-.763-.616-1.345-1.303-1.512l-1.45-.352c-.078-.02-.172-.09-.22-.225a8.469 8.469 0 00-.303-.728c-.06-.13-.044-.246-.002-.315l.776-1.274c.368-.604.354-1.412-.147-1.99-.348-.403-.726-.78-1.128-1.129-.579-.5-1.387-.515-1.99-.147l-1.275.776c-.069.042-.185.059-.315-.002a8.465 8.465 0 00-.728-.302c-.135-.05-.206-.143-.225-.221l-.352-1.45c-.167-.687-.749-1.249-1.512-1.304A11.149 11.149 0 0012 1zm-.69 1.525a9.648 9.648 0 011.38 0c.055.004.135.05.162.16l.351 1.45c.153.628.626 1.08 1.173 1.278.205.074.405.157.6.249a1.832 1.832 0 001.733-.074l1.275-.776c.097-.06.186-.036.228 0 .348.302.674.628.976.976.036.042.06.13 0 .228l-.776 1.274a1.832 1.832 0 00-.074 1.734c.092.195.175.395.248.6.198.547.652 1.02 1.278 1.172l1.45.353c.111.026.157.106.161.161a9.653 9.653 0 010 1.38c-.004.055-.05.135-.16.162l-1.45.351a1.833 1.833 0 00-1.278 1.173 6.926 6.926 0 01-.25.6 1.832 1.832 0 00.075 1.733l.776 1.275c.06.097.036.186 0 .228a9.555 9.555 0 01-.976.976c-.042.036-.13.06-.228 0l-1.275-.776a1.832 1.832 0 00-1.733-.074 6.926 6.926 0 01-.6.248 1.833 1.833 0 00-1.172 1.278l-.353 1.45c-.026.111-.106.157-.161.161a9.653 9.653 0 01-1.38 0c-.055-.004-.135-.05-.162-.16l-.351-1.45a1.833 1.833 0 00-1.173-1.278 6.928 6.928 0 01-.6-.25 1.832 1.832 0 00-1.734.075l-1.274.776c-.097.06-.186.036-.228 0a9.56 9.56 0 01-.976-.976c-.036-.042-.06-.13 0-.228l.776-1.275a1.832 1.832 0 00.074-1.733 6.948 6.948 0 01-.249-.6 1.833 1.833 0 00-1.277-1.172l-1.45-.353c-.111-.026-.157-.106-.161-.161a9.648 9.648 0 010-1.38c.004-.055.05-.135.16-.162l1.45-.351a1.833 1.833 0 001.278-1.173 6.95 6.95 0 01.249-.6 1.832 1.832 0 00-.074-1.734l-.776-1.274c-.06-.097-.036-.186 0-.228.302-.348.628-.674.976-.976.042-.036.13-.06.228 0l1.274.776a1.832 1.832 0 001.734.074 6.95 6.95 0 01.6-.249 1.833 1.833 0 001.172-1.277l.353-1.45c.026-.111.106-.157.161-.161z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
|
||||
<path fill-rule="evenodd" d="M12 1c-.268 0-.534.01-.797.028-.763.055-1.345.617-1.512 1.304l-.352 1.45c-.02.078-.09.172-.225.22a8.45 8.45 0 00-.728.303c-.13.06-.246.044-.315.002l-1.274-.776c-.604-.368-1.412-.354-1.99.147-.403.348-.78.726-1.129 1.128-.5.579-.515 1.387-.147 1.99l.776 1.275c.042.069.059.185-.002.315-.112.237-.213.48-.302.728-.05.135-.143.206-.221.225l-1.45.352c-.687.167-1.249.749-1.304 1.512a11.149 11.149 0 000 1.594c.055.763.617 1.345 1.304 1.512l1.45.352c.078.02.172.09.22.225.09.248.191.491.303.729.06.129.044.245.002.314l-.776 1.274c-.368.604-.354 1.412.147 1.99.348.403.726.78 1.128 1.129.579.5 1.387.515 1.99.147l1.275-.776c.069-.042.185-.059.315.002.237.112.48.213.728.302.135.05.206.143.225.221l.352 1.45c.167.687.749 1.249 1.512 1.303a11.125 11.125 0 001.594 0c.763-.054 1.345-.616 1.512-1.303l.352-1.45c.02-.078.09-.172.225-.22.248-.09.491-.191.729-.303.129-.06.245-.044.314-.002l1.274.776c.604.368 1.412.354 1.99-.147.403-.348.78-.726 1.129-1.128.5-.579.515-1.387.147-1.99l-.776-1.275c-.042-.069-.059-.185.002-.315.112-.237.213-.48.302-.728.05-.135.143-.206.221-.225l1.45-.352c.687-.167 1.249-.749 1.303-1.512a11.125 11.125 0 000-1.594c-.054-.763-.616-1.345-1.303-1.512l-1.45-.352c-.078-.02-.172-.09-.22-.225a8.469 8.469 0 00-.303-.728c-.06-.13-.044-.246-.002-.315l.776-1.274c.368-.604.354-1.412-.147-1.99-.348-.403-.726-.78-1.128-1.129-.579-.5-1.387-.515-1.99-.147l-1.275.776c-.069.042-.185.059-.315-.002a8.465 8.465 0 00-.728-.302c-.135-.05-.206-.143-.225-.221l-.352-1.45c-.167-.687-.749-1.249-1.512-1.304A11.149 11.149 0 0012 1zm-.69 1.525a9.648 9.648 0 011.38 0c.055.004.135.05.162.16l.351 1.45c.153.628.626 1.08 1.173 1.278.205.074.405.157.6.249a1.832 1.832 0 001.733-.074l1.275-.776c.097-.06.186-.036.228 0 .348.302.674.628.976.976.036.042.06.13 0 .228l-.776 1.274a1.832 1.832 0 00-.074 1.734c.092.195.175.395.248.6.198.547.652 1.02 1.278 1.172l1.45.353c.111.026.157.106.161.161a9.653 9.653 0 010 1.38c-.004.055-.05.135-.16.162l-1.45.351a1.833 1.833 0 00-1.278 1.173 6.926 6.926 0 01-.25.6 1.832 1.832 0 00.075 1.733l.776 1.275c.06.097.036.186 0 .228a9.555 9.555 0 01-.976.976c-.042.036-.13.06-.228 0l-1.275-.776a1.832 1.832 0 00-1.733-.074 6.926 6.926 0 01-.6.248 1.833 1.833 0 00-1.172 1.278l-.353 1.45c-.026.111-.106.157-.161.161a9.653 9.653 0 01-1.38 0c-.055-.004-.135-.05-.162-.16l-.351-1.45a1.833 1.833 0 00-1.173-1.278 6.928 6.928 0 01-.6-.25 1.832 1.832 0 00-1.734.075l-1.274.776c-.097.06-.186.036-.228 0a9.56 9.56 0 01-.976-.976c-.036-.042-.06-.13 0-.228l.776-1.275a1.832 1.832 0 00.074-1.733 6.948 6.948 0 01-.249-.6 1.833 1.833 0 00-1.277-1.172l-1.45-.353c-.111-.026-.157-.106-.161-.161a9.648 9.648 0 010-1.38c.004-.055.05-.135.16-.162l1.45-.351a1.833 1.833 0 001.278-1.173 6.95 6.95 0 01.249-.6 1.832 1.832 0 00-.074-1.734l-.776-1.274c-.06-.097-.036-.186 0-.228.302-.348.628-.674.976-.976.042-.036.13-.06.228 0l1.274.776a1.832 1.832 0 001.734.074 6.95 6.95 0 01.6-.249 1.833 1.833 0 001.172-1.277l.353-1.45c.026-.111.106-.157.161-.161z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
|
@ -8,33 +8,21 @@
|
|||
id="svg11382"
|
||||
height="900"
|
||||
width="900"
|
||||
viewBox="0 0 900 900"
|
||||
version="1.0">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs11384" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="matrix(0.90103258,0,0,0.90103258,112.84058,-1.9060177)">
|
||||
transform="matrix(0.90103258,0,0,0.90103258,112.84058,-1.9060177)"
|
||||
>
|
||||
<g
|
||||
id="g11476">
|
||||
<path
|
||||
id="path11472"
|
||||
style="font-style:normal;font-weight:normal;font-size:1201.92492676px;font-family:'Bitstream Vera Sans';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="font-style:normal;font-weight:normal;font-size:1201.92492676px;font-family:'Bitstream Vera Sans';text-align:center;text-anchor:middle;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 474.50888,718.22841 H 303.49547 v -22.30134 c -2.4e-4,-37.95108 4.30352,-68.76211 12.9113,-92.43319 8.60728,-23.67032 23.63352,-45.28695 40.65324,-64.84996 17.01914,-19.56211 41.98734,-26.33264 101.45793,-75.63085 31.69095,-25.82203 55.2813,-77.1523 55.28175,-98.67174 2.21232,-56.92245 -13.93983,-79.3422 -34.56287,-99.96524 -22.67355,-19.67717 -60.67027,-30.06998 -90.99892,-30.06998 -27.77921,6.9e-4 -68.46735,8.08871 -87.7666,25.37047 -25.93817,17.28308 -65.23747,73.70611 -57.04687,130.54577 l -194.516943,1.70222 c 0,-157.21399 29.393699,-198.69465 99.004113,-263.03032 67.39739,-54.376643 126.53128,-73.268365 243.84757,-73.268365 89.71791,0 161.89728,17.80281 214.32552,53.405855 71.20714,48.12472 122.30105,111.18354 122.30105,230.11281 -6.9e-4,44.32081 -19.15253,90.78638 -43.0726,128.33299 -18.38947,30.90938 -60.37511,66.45236 -118.21237,104.41628 -42.83607,25.7686 -66.67196,53.11926 -77.03964,72.0946 -10.36863,18.97603 -15.55271,43.72267 -15.55225,74.23999 z" />
|
||||
<path
|
||||
id="path11474"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
style="fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
transform="translate(1.106383,-5.5319149)"
|
||||
d="m 482.38298,869.80902 a 94.042557,73.021278 0 1 1 -188.08511,0 94.042557,73.021278 0 1 1 188.08511,0 z" />
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,3 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg height="16px" id="Layer_1" style="enable-background:new 0 0 16 16;" version="1.1" viewBox="0 0 16 16" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555 L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3 c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z"/></svg>
|
||||
<svg height="16px" id="Layer_1" style="enable-background:new 0 0 16 16;" version="1.1" viewBox="0 0 16 16" width="16px"
|
||||
xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555 L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3 c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 689 B After Width: | Height: | Size: 659 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg height="1024" width="896" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M704 64L576 192l192 192 128-128L704 64zM0 768l0.688 192.562L192 960l512-512L512 256 0 768zM192 896H64V768h64v64h64V896z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 207 B After Width: | Height: | Size: 230 B |
|
|
@ -73,25 +73,25 @@
|
|||
id="layer1"
|
||||
transform="translate(0,-270.54165)">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
style="fill:none;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669"
|
||||
id="path819"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
|
||||
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
|
||||
id="path820"
|
||||
cx="7.2434282"
|
||||
cy="283.69574"
|
||||
r="3.9119694" />
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
|
||||
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
|
||||
id="path820-3"
|
||||
cx="19.48818"
|
||||
cy="289.22873"
|
||||
r="3.9119689" />
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
|
||||
style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
|
||||
id="path820-3-6"
|
||||
cx="19.48818"
|
||||
cy="277.56281"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
12
assets/themes/surveillance_cameras/custom_theme.css
Normal file
12
assets/themes/surveillance_cameras/custom_theme.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
html {
|
||||
--subtle-detail-color: #9d9d9d !important;
|
||||
--subtle-detail-color-contrast: #00ff00 !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;
|
||||
}
|
||||
|
||||
|
|
@ -24,6 +24,8 @@
|
|||
"startZoom": 1,
|
||||
"widenFactor": 0.05,
|
||||
"socialImage": "",
|
||||
"customCss": "./assets/themes/surveillance_cameras/custom_theme.css",
|
||||
"defaultBackgroundId": "Stadia.AlidadeSmoothDark",
|
||||
"layers": [
|
||||
{
|
||||
"id": "cameras",
|
||||
|
|
@ -52,6 +54,7 @@
|
|||
},
|
||||
"description": {},
|
||||
"tagRenderings": [
|
||||
"images",
|
||||
{
|
||||
"question": {
|
||||
"en": "What kind of camera is this?",
|
||||
|
|
|
|||
|
|
@ -202,7 +202,13 @@ function createLandingPage(layout: LayoutConfig) {
|
|||
|
||||
let customCss = "";
|
||||
if (layout.customCss !== undefined && layout.customCss !== "") {
|
||||
customCss = `<link rel='stylesheet" href=${layout.customCss}"/>`
|
||||
|
||||
try {
|
||||
const cssContent = readFileSync(layout.customCss);
|
||||
customCss = "<style>" + cssContent + "</style>";
|
||||
} catch (e) {
|
||||
customCss = `<link rel='stylesheet' href="${layout.customCss}"/>`
|
||||
}
|
||||
}
|
||||
|
||||
const og = `
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ Contains tweaks for small screens
|
|||
|
||||
.only-on-mobile {
|
||||
display: none;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
|
||||
|
|
@ -14,6 +16,8 @@ Contains tweaks for small screens
|
|||
|
||||
.only-on-mobile {
|
||||
display: unset;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.hidden-on-mobile {
|
||||
|
|
@ -22,6 +26,8 @@ Contains tweaks for small screens
|
|||
|
||||
#messagesbox {
|
||||
display: none;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
#help-button-mobile{
|
||||
|
|
@ -57,15 +63,15 @@ Contains tweaks for small screens
|
|||
|
||||
#messagesboxmobile {
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
background-color: white;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#welcomeMessage {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
text-align: center;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.oh-table th {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -34,22 +33,22 @@
|
|||
}
|
||||
|
||||
.oh-timecell:hover {
|
||||
background-color: #92b1ff !important;
|
||||
background-color: var(--catch-detail-color) !important;
|
||||
}
|
||||
|
||||
|
||||
.oh-timecell-selected {
|
||||
background-color: #0048ff;
|
||||
background-color: var(--catch-detail-color);
|
||||
}
|
||||
|
||||
|
||||
.oh-timecell-half {
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: aliceblue;
|
||||
background-color: var(--subtle-detail-color);
|
||||
}
|
||||
|
||||
.oh-timecell-half.oh-timecell-selected {
|
||||
background-color: #0048ff;
|
||||
background-color: var(--catch-detail-color);
|
||||
}
|
||||
|
||||
.oh-table tr {
|
||||
|
|
@ -75,12 +74,12 @@
|
|||
}
|
||||
|
||||
.oh-timecol-selected {
|
||||
border-right: #0048ff;
|
||||
border-right: var(--catch-detail-color);
|
||||
}
|
||||
|
||||
.oh-timecol-selected > span {
|
||||
background-color: #0048ff;
|
||||
color: white;
|
||||
background-color: var(--catch-detail-color);
|
||||
color: var(--background-color);
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -96,11 +95,11 @@
|
|||
}
|
||||
|
||||
.oh-timerow-selected .oh-timecell-0 {
|
||||
border-left: 10px solid #0048ff !important;
|
||||
border-left: 10px solid var(--catch-detail-color) !important;
|
||||
}
|
||||
|
||||
.oh-timerow-selected .oh-timecell-6 {
|
||||
border-right: 10px solid #0048ff !important;
|
||||
border-right: 10px solid var(--catch-detail-color) !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -117,7 +116,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 4px);
|
||||
background: #0048ff;
|
||||
background: var(--catch-detail-color);
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -276,7 +275,7 @@
|
|||
|
||||
|
||||
.ohviz-today {
|
||||
background-color: #e5f5ff;
|
||||
background-color: var(--subtle-detail-color);
|
||||
}
|
||||
|
||||
.ohviz-weekday {
|
||||
|
|
@ -290,7 +289,7 @@
|
|||
}
|
||||
|
||||
.ohviz-container {
|
||||
border: 0.5em solid #e5f5ff;
|
||||
border: 0.5em solid var(--subtle-detail-color);
|
||||
border-radius: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
max-width: 100vw;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -21,10 +21,19 @@
|
|||
margin:auto;
|
||||
}
|
||||
|
||||
.tab-single-header svg {
|
||||
height: 3em;
|
||||
max-width: 3em;
|
||||
padding: 0.5em;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
|
||||
.tab-content {
|
||||
z-index: 5002;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
display: inline-block;
|
||||
|
|
@ -41,19 +50,36 @@
|
|||
}
|
||||
|
||||
.tab-active {
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
z-index: 5001;
|
||||
box-shadow: 0 0 10px black;
|
||||
border: 1px solid white;
|
||||
box-shadow: 0 0 10px var(--shadow-color);
|
||||
border: 1px solid var(--background-color);
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.tab-active svg {
|
||||
fill: var(--foreground-color);
|
||||
stroke: var(--foreground-color);
|
||||
}
|
||||
|
||||
.tab-non-active {
|
||||
background-color: #e5f5ff;
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--foreground-color);
|
||||
opacity: 0.5;
|
||||
border-left: 1px solid gray;
|
||||
border-right:1px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
border-top: 1px solid gray;
|
||||
border-bottom: 1px solid lightgray;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.tab-non-active svg {
|
||||
fill: var(--foreground-color) !important;
|
||||
stroke: var(--foreground-color) !important;
|
||||
}
|
||||
|
||||
.tab-non-active svg path{
|
||||
fill: var(--foreground-color) !important;
|
||||
stroke: var(--foreground-color) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
.question {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
background-color: #e5f5ff;
|
||||
background-color: var(--subtle-detail-color);
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
font-size: larger;
|
||||
|
|
@ -72,7 +72,7 @@ input:checked + label .question-option-with-border {
|
|||
.save {
|
||||
display: inline-block;
|
||||
border: solid white 2px;
|
||||
background-color: #3a3aeb;
|
||||
background-color: var(--catch-detail-color);
|
||||
color: white;
|
||||
padding: 0.2em 0.6em;
|
||||
font-size: x-large;
|
||||
|
|
@ -90,8 +90,8 @@ input:checked + label .question-option-with-border {
|
|||
.login-button-friendly {
|
||||
display: inline-block;
|
||||
border: solid white 2px;
|
||||
background-color: #3a3aeb;
|
||||
color: white;
|
||||
background-color:var(--catch-detail-color);
|
||||
color: var(--catch-detail-color-contrast);
|
||||
padding: 0.2em 0.6em;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
|
|
@ -115,7 +115,24 @@ input:checked + label .question-option-with-border {
|
|||
height: 1.3em;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.65em;
|
||||
border: solid black 1px;
|
||||
border: solid var(--popup-border) 1px;
|
||||
font-size: medium;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.edit-button svg {
|
||||
width: 1.3em;
|
||||
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;
|
||||
font-size: medium;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.edit-button svg path{
|
||||
stroke: var(--popup-border) !important;
|
||||
fill: var(--popup-border) !important;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
#userbadge {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
|
||||
#userbadge a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -42,14 +43,19 @@
|
|||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.userstats img {
|
||||
.userstats svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: black;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.userstats img {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#profile-pic {
|
||||
float: left;
|
||||
|
|
@ -76,7 +82,8 @@
|
|||
height: 2.2em; /*SHould equal profile-pic height - padding*/
|
||||
z-index: 5000;
|
||||
text-align: left;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
background-size: 100%;
|
||||
|
||||
line-height: 0.75em;
|
||||
|
|
@ -88,7 +95,8 @@
|
|||
.userbadge-login {
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
background-color: #e5f5ff !important;
|
||||
background-color: var(--subtle-detail-color) !important;
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
height:3em;
|
||||
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ function genImages() {
|
|||
}
|
||||
|
||||
const svg = fs.readFileSync("./assets/svg/" + path, "utf-8")
|
||||
.replace(/<\?xml.*?>/, "")
|
||||
.replace(/fill: ?none;/g,"fill: none !important;") // This is such a brittle hack...
|
||||
.replace(/\n/g, " ")
|
||||
.replace(/\r/g, "")
|
||||
.replace(/\\/g, "\\")
|
||||
|
|
@ -22,6 +24,7 @@ function genImages() {
|
|||
.replace(/[ -]/g, "_");
|
||||
module += ` public static ${name} = "${svg}"\n`
|
||||
module += ` public static ${name}_img = Img.AsImageElement(Svg.${name})\n`
|
||||
module += ` public static ${name}_svg() { return new FixedUiElement(Svg.${name});}\n`
|
||||
module += ` public static ${name}_ui() { return new FixedUiElement(Svg.${name}_img);}\n\n`
|
||||
}
|
||||
module += "}\n";
|
||||
|
|
|
|||
95
index.css
95
index.css
|
|
@ -1,11 +1,33 @@
|
|||
:root {
|
||||
--subtle-detail-color: #e5f5ff;
|
||||
--subtle-detail-color-contrast: black;
|
||||
--catch-detail-color: #3a3aeb;
|
||||
--catch-detail-color-contrast: white;
|
||||
--alert-color: #fee4d1;
|
||||
--background-color: white;
|
||||
--foreground-color: black;
|
||||
--popup-border: white;
|
||||
--shadow-color: #00000066
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
svg {
|
||||
fill: var(--foreground-color) !important;
|
||||
stroke: var(--foreground-color) !important;
|
||||
}
|
||||
|
||||
svg path {
|
||||
fill: var(--foreground-color) !important;
|
||||
stroke: var(--foreground-color) !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -13,6 +35,17 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
|
||||
border: 2px solid var(--popup-border)
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
background-color: var(--background-color) !important;
|
||||
}
|
||||
|
||||
#geolocate-button {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
|
|
@ -39,22 +72,25 @@ body {
|
|||
bottom: 1em;
|
||||
left: 1em;
|
||||
z-index: 9000;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
|
||||
border-radius: 1em;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px #00000066;
|
||||
box-shadow: 0 0 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.layer-selection-toggle {
|
||||
border-top-left-radius: 1em;
|
||||
border-bottom-left-radius: 1em;
|
||||
border-radius: 1em;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
background: var(--subtle-detail-color);
|
||||
}
|
||||
|
||||
.layer-selection-toggle img {
|
||||
.layer-selection-toggle svg {
|
||||
display: block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +98,7 @@ body {
|
|||
|
||||
|
||||
.alert {
|
||||
background-color: #fee4d1;
|
||||
background-color: var(--alert-color);
|
||||
font-weight: bold;
|
||||
border-radius: 1em;
|
||||
margin: 0.25em;
|
||||
|
|
@ -82,7 +118,7 @@ body {
|
|||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 0 10px #00000066;
|
||||
box-shadow: 0 0 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.title-font span {
|
||||
|
|
@ -91,7 +127,8 @@ body {
|
|||
}
|
||||
|
||||
.soft {
|
||||
background-color: #e5f5ff;
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
font-weight: bold;
|
||||
border-radius: 1em;
|
||||
margin: 0.25em;
|
||||
|
|
@ -137,7 +174,9 @@ body {
|
|||
#searchbox {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
|
||||
transition: all 500ms linear;
|
||||
pointer-events: all;
|
||||
border-radius: 1.3em;
|
||||
|
|
@ -170,6 +209,7 @@ body {
|
|||
font-size: large;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.search-go img {
|
||||
|
|
@ -215,13 +255,16 @@ body {
|
|||
overflow-y: auto;
|
||||
border-top-right-radius: 1em;
|
||||
border-bottom-right-radius: 1em;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
.close-welcome-button {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
background-color: #e5f5ff;
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
box-sizing: border-box;
|
||||
width: 4em;
|
||||
padding: 1em;
|
||||
|
|
@ -229,22 +272,26 @@ body {
|
|||
border-bottom-left-radius: 1em;
|
||||
}
|
||||
|
||||
.close-welcome-button img {
|
||||
.close-welcome-button svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.open-welcome-button {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
background: var(--subtle-detail-color);
|
||||
color: var(--foreground-color);
|
||||
|
||||
height: 4em;
|
||||
width: 4em;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.open-welcome-button img {
|
||||
.open-welcome-button svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
#messagesbox {
|
||||
|
|
@ -252,9 +299,11 @@ body {
|
|||
position: relative;
|
||||
padding: 0;
|
||||
pointer-events: all;
|
||||
box-shadow: 0 0 10px #00000066;
|
||||
box-shadow: 0 0 10px var(--shadow-color);
|
||||
border-radius: 1em;
|
||||
width: min-content
|
||||
width: min-content;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -273,7 +322,9 @@ body {
|
|||
pointer-events: none;
|
||||
|
||||
opacity: 1;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
|
||||
|
||||
transition: opacity 500ms linear;
|
||||
|
||||
|
|
@ -357,7 +408,9 @@ body {
|
|||
|
||||
|
||||
.iframe-escape {
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
|
||||
border-radius: 2em;
|
||||
display: block;
|
||||
width: min-content;
|
||||
|
|
@ -376,11 +429,11 @@ body {
|
|||
flex-direction: row;
|
||||
font-size: large;
|
||||
margin: 0.5em;
|
||||
background-color: #e5f5ff;
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
border-radius: 1em;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
15
test.ts
15
test.ts
|
|
@ -1,20 +1,11 @@
|
|||
/*
|
||||
//*
|
||||
|
||||
|
||||
import {UIEventSource} from "./Logic/UIEventSource";
|
||||
import {FeatureInfoBox} from "./UI/Popup/FeatureInfoBox";
|
||||
import SharedLayers from "./Customizations/SharedLayers";
|
||||
import Direction from "./UI/Input/Direction";
|
||||
|
||||
const tags = {
|
||||
mapillary: "wweALGY5g8_T8UjGkcWCfw",
|
||||
wikimedia_commons: "File:Boekenkast Sint-Lodewijks.jpg"
|
||||
}
|
||||
const src = new UIEventSource(tags);
|
||||
new Direction().AttachTo("maindiv")
|
||||
|
||||
new FeatureInfoBox(src, SharedLayers.sharedLayers["ghost_bike"]).AttachTo('maindiv');
|
||||
|
||||
//const subs = new SubstitutedTranslation(new Translation({"nl":"NL {image_carousel()} {image_upload()}"}), src)
|
||||
//subs.AttachTo("maindiv")
|
||||
/*/
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue