Add documentation on styling

docs/public/app_configuration/README.md

@@ -13,4 +13,75 @@ The following settings can be provided:
 |                                     | If not configured the web oc can be accessed without authentication.                                                  |
 | `VITE_AUTH_METADATA_URL`            | Url of the OIDC meta data, e.g. "https://login.microsoftonline.com/MYTENANTID/v2.0/.well-known/openid-configuration". |
 | `VITE_AUTH_SCOPE`                   | Scope, e.g. "openid profile email Offline_Access api://myclientid/Delft-FEWSWebServices".                             |
-| `VITE_MAPBOX_TOKEN`                 | Mapbox token. Can be retrieved from: https://account.mapbox.com/access-tokens.                                        |
+| `VITE_MAPBOX_TOKEN`                 | Mapbox token. Can be retrieved from: https://account.mapbox.com/access-tokens. Optional since v1.1.0.                                       |
+
+## Styling
+
+By default the Web OC loads the `weboc-default-style.css` which can be found in the root directory of a Web OC build.
+Three more style sheets with font specification, chart styles and specific css overruling Vuetify component styles are imported by this file.
+In the following section a number of css variables define a number of colors used by the Web OC in normal (light) and dark mode.
+
+```css
+@import './fonts/exo-2/fonts.css';
+@import './default-styles.css';
+@import './vuetify-overrule.css';
+
+:root {
+  --font-family: 'Exo 2', sans-serif;
+  --theme-color: white;
+  --contrast-color: black;
+  --canvas-fill: rgb(223, 223, 223);
+  --weboc-app-bar-bg-color: #080c80;
+}
+
+.dark {
+  --contrast-color: rgb(255, 255, 255);
+  --theme-color: black;
+  --canvas-fill: rgb(54, 54, 54);
+}
+```
+
+Create a copy of the `weboc-default-style.css` and change the line in the `WebOperatorClient.xml` file to point to the new file:
+```xml
+<customStyleSheet>weboc-default-style.css</customStyleSheet>
+```
+See [Web OC Delft-FEWS configuration ](configuration/) for more information on the `WebOperatorClient.xml` file.
+
+### Changing the WebOC colors
+
+Change the following css variable to change the colors used in light or dark mode:
+
+| Variable | Description |
+| --- | ---- |
+| `--weboc-app-bar-bg-color` | Color of app top menu bar |
+| `--theme-color` | Color of texts and chart axes |
+| `--contrast-color` | Contrast color used in charts |
+| `--canvas-fill` | Chart canvas background color |
+
+### Changing the WebOC fonts
+
+It is easy to host your own set of [web fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) or use a service like Google fonts https://fonts.google.com/.
+
+To use a font from the Google font service — check license conditions — replace the first import (`@import './fonts/exo-2/fonts.css';`) with the import statement for including the selected font. Take the import statement from the "Web @import" tab at https://fonts.google.com/selection/embed after selecting a font. 
+
+As an example, the following import make the Dancing Script fonts available
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&display=swap')
+```
+
+Then change the `--font-family` variable to read
+```css
+:root {
+  --font-family: 'Dancing Script', sans-serif;
+  ...
+}
+```
+The correct name of the font can also be found at https://fonts.google.com/selection/embed. 
+
+
+
+> [!TIP]
+> Using a font service might require changes to the `font-src` and `style-src` Content Security Policy in the webserver configuration.
+
+Self hosting of web fonts requires fonts in a `woff` or `woff2` format.

docs/public/configuration/README.md

@@ -7,14 +7,83 @@ All configuration related to what content is being displayed in Web OC, is manag
 
 Key files in the FEWS Configuration to get started with Web OC are:
 
-- WebOperatorClient.xml (SystemConfigFiles). Configure available Web OC components as well as general items like title and logo: https://publicwiki.deltares.nl/display/FEWSDOC/11+Web+Operator+Client
-- WebServices.xml (PiServiceConfigFiles). Web OC highly depends on what data is made available through FewsWebServices, Use this configuration file to configure a filterId, permissions etc.: https://publicwiki.deltares.nl/pages/viewpage.action?pageId=220266993
+- `WebOperatorClient.xml` (SystemConfigFiles). Configure available Web OC components as well as general items like title and logo: https://publicwiki.deltares.nl/display/FEWSDOC/11+Web+Operator+Client
+- `WebServices.xml` (PiServiceConfigFiles). Web OC highly depends on what data is made available through FewsWebServices, Use this configuration file to configure a filterId, permissions etc.: https://publicwiki.deltares.nl/pages/viewpage.action?pageId=220266993
 
 Although Web OC will run without any further adjustments to the Delft-FEWS configuration, its strongly recommended to spend some time on your Topology configuration in relation to Web OC (see below).
 
-### System time
+> **_NOTE:_** Please note that Web OC will always use the system time of the Web OC users device as Web OC system time. This time setting can not be modified by Web OC configuration.
+
+## General Web OC configuration
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<webOperatorClient xmlns="http://www.wldelft.nl/fews"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.wldelft.nl/fews https://fewsdocs.deltares.nl/schemas/version1.0/webOperatorClient.xsd">
+    <general>
+        <title>Delft FEWS Web Operator Client</title>
+        <icons>
+            <logo>deltares_logo.png</logo>
+            <favicon>deltares_favicon.svg</favicon>
+        </icons>
+        <defaultComponent>topologyDisplay</defaultComponent>
+        <customStyleSheet>weboc-default-style.css</customStyleSheet>
+        <splashScreen>image.png</splashScreen>
+        <helpMenu>
+            <url name="Help entry links to external url">https://example.com</url>
+            <path name="Help entry links to path in Web OC">terms-of-use</path>
+        </helpMenu>
+    </general>
+    <components>
+        <topologyDisplay>
+            <title>Topology Disiplay</title>
+            <defaultPath>
+                <nodeId>topololgy_node_id</nodeId>
+            </defaultPath>
+            <showLeafNodesAsButtons>true</showLeafNodesAsButtons>
+        </topologyDisplay>
+        <htmlDisplay>
+            <title>Terms of Use page</title>
+            <path>terms-of-use</path>
+            <viewPermission>public</viewPermission>
+            <url>terms-of-use.html</url>
+        </htmlDisplay>
+    </components>
+</webOperatorClient>
+```
+
+^ **NOTE**: The FEWS PI webservices (2023.02) can be used to serve [static web resources](https://fewsdocs.deltares.nl/webservices/rest-api/v1/#get-/resources/static/-path-/-id-).
+Relative urls in `WebOperatorClient.xml` are first resolved against the base url of the Web OC instance (e.g. `deltares_logo.png`), and then against the resources endpoint of the FewsWebServices instance.
+
+### Styling
+
+With the customStyleSheet option in the `WebOperatorClient.xml` , it is possible to load a custom stylesheet for Web OC. This stylesheet will be loaded after the default stylesheet and can be used to override default styles. The custom stylesheet should be placed in the same directory as the index.html file.
+
+```css
+@import '../fonts/exo-2/fonts.css';
+@import './default-styles.css';
+@import './vuetifiy-overrule.css';
+
+:root {
+  --font-family: 'Exo 2', sans-serif;
+  --theme-color: white;
+  --contrast-color: black;
+  --canvas-fill: rgb(223, 223, 223);
+  --weboc-app-bar-bg-color: #080c80;
+}
+
+.dark {
+  --contrast-color: rgb(255, 255, 255);
+  --theme-color: black;
+  --canvas-fill: rgb(54, 54, 54);
+}
+```
+
+**Fonts**
+
+**Icons**
 
-Please note that Web OC will always use the system time of the Web OC users device as Web OC system time. This time setting can not be modified by Web OC configuration.
 
 ## Web OC navigation using Topology
 

public/rwsos-style.css

@@ -1,6 +1,6 @@
 @import 'fonts/RO/fonts.css';
 @import './default-styles.css';
-@import './vuetifiy-overrule.css';
+@import './vuetify-overrule.css';
 
 :root {
   --font-family: 'RO-Sans', sans-serif;

public/weboc-default-style.css

@@ -1,6 +1,6 @@
 @import '../fonts/exo-2/fonts.css';
 @import './default-styles.css';
-@import './vuetifiy-overrule.css';
+@import './vuetify-overrule.css';
 
 :root {
   --font-family: 'Exo 2', sans-serif;