Add initial support for custom stylesheets (#7164)

* Add initial support for custom stylesheets

Allow an override file `custom.css` that can partially override the
stylesheet used for the web interface.

# Changes
1. Update default views to use custom stylesheet
2. Update documentation

Related to: https://github.com/Ylianst/MeshCentral/issues/7144

* Add custom style support to more views

Load `custom.css` in the following views:
- agentinvite.handlebars
- invite.handlebars
- login2.handlebars
- message2.handlebars
- messenger.handlebars
- player.handlebars
- sharing.handlebars

docs/docs/meshcentral/customization.md

@@ -59,6 +59,36 @@ To update device icons, you need to edit these files: `meshcentral-web/public/im
 By following these steps, you can customize any icon in MeshCentral. Just find and change the corresponding image files in the `meshcentral-web/public/images` folder. Similarly, you can also move other folders from `node_modules/meshcentral` to `meshcentral-web` while keeping the original folder structure. This allows you to modify other parts of MeshCentral too, like the `.handlebars` templates for the web interface. Simply copy files from `node_modules/meshcentral/views` to `meshcentral-web/views` and make your changes in `meshcentral-web`. This lets you match MeshCentral's look to your company's brand or your own style.   
 ![](images/custom-web-icons.png)  
 
+### Customizing Web Style
+MeshCentral gives you the flexibility to override some or all of the web interface. An easy way to modify the style is to do the following:
+
+1. Create the file `custom.css` under `meshcentral-web/public/styles`. See [above](#customizing-web-style) for more information on `meshcentral-web`.
+2. Anything added to this file will override the default stylesheets. 
+
+An example file:
+
+```css
+#masthead {
+     background-color: red;
+}
+
+#page_leftbar {
+     background: linear-gradient(to bottom, #104893 0%,green 100%)
+}
+
+#footer {
+     background-color: green;
+}
+```
+
+Gives:
+
+![Custom Style](images/custom-style-example.png)
+
+!!!note
+You can of course override the stylesheets by directly copying them into `meshcentral-web/public/styles` but run the risk that future updates to those files in MeshCentral will be masked. `custom.css` is guaranteed to be loaded last on every page and will contain no content by default which means upgrades will work as normal. 
+
+
 ### Customizing Agent Invitation  
 Agents can be invited by public link or via email. [Click Here](assistant.md#agent-invitation) to see details. 
 

views/agentinvite.handlebars

@@ -8,6 +8,7 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/qrcode.min.js"></script>

views/default.handlebars

@@ -14,6 +14,7 @@
     <link type="text/css" href="styles/ol3-contextmenu.min.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/flatpickr.min.css" media="screen" rel="stylesheet" title="CSS">
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/meshcentral{{{min}}}.js"></script>

views/default3.handlebars

@@ -18,6 +18,7 @@
     <link id="theme-stylesheet" href="styles/bootstrap{{{min}}}.css" rel="stylesheet" title="CSS">
     <link href="styles/select2.min.css" rel="stylesheet" title="CSS">
     <link href="styles/select2-bootstrap-5-theme.min.css" rel="stylesheet" title="CSS">
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/meshcentral{{{min}}}.js"></script>

views/invite.handlebars

@@ -8,6 +8,7 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="robots" content="noindex,nofollow" />
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <title>Agent Installation</title>

views/login2.handlebars

@@ -10,6 +10,7 @@
     <link rel="manifest" href="{{{domainurl}}}manifest.json">
     <link rel="shortcut icon" type="image/x-icon" href="{{{domainurl}}}favicon.ico" />
     <link keeplink=1 type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script keeplink=1 type="text/javascript" src="scripts/u2f-api{{min}}.js"></script>

views/message2.handlebars

@@ -8,6 +8,7 @@
     <meta name=format-detection content="telephone=no" />
     <meta name="robots" content="noindex,nofollow">
     <link type=text/css href="/styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <title id="topTitle">{{{title1}}}</title>

views/messenger.handlebars

@@ -9,6 +9,7 @@
     <meta name="robots" content="noindex,nofollow">
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/messenger.css" media="screen" rel="stylesheet" title="CSS" />
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/filesaver.min.js"></script>

views/player.handlebars

@@ -9,6 +9,7 @@
     <meta name="robots" content="noindex,nofollow">
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/agent-desktop-0.0.2{{min}}.js"></script>

views/sharing.handlebars

@@ -10,6 +10,7 @@
     <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/style-sharing.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
+    <link type="text/css" href="styles/custom.css" media="screen" rel="stylesheet" title="CSS" />
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
     <script type="text/javascript" src="scripts/amt-redir-ws-0.1.0{{{min}}}.js"></script>