From e63f8d42b557c715e6d0e7a0cde3b3fc49d3e22f Mon Sep 17 00:00:00 2001
From: GilbN <24592972+gilbN@users.noreply.github.com>
Date: Tue, 10 Nov 2020 22:29:02 +0100
Subject: [PATCH] Created Organizr - Glass addon (markdown)
---
Organizr---Glass-addon.md | 111 ++++++++++++++++++++++++++++++++++++++
1 file changed, 111 insertions(+)
create mode 100644 Organizr---Glass-addon.md
diff --git a/Organizr---Glass-addon.md b/Organizr---Glass-addon.md
new file mode 100644
index 0000000..62fcacc
--- /dev/null
+++ b/Organizr---Glass-addon.md
@@ -0,0 +1,111 @@
+
+## Installation
+
+* [Full](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass#Full)
+* [Login - Lockscreen only](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass#login---lockscreen-only)
+
+
+
+***
+### `Tip!`
+ If you're on Docker use the `php-fpm` tag to speed up load times, like so: `organizrtools/organizr-v2:php-fpm`
+
+***
+
+### NOTE
+**Firefox:** `From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.`
+
+
+## Full
+
+1. Set the Organizr theme to either Aquamarine, Hotline or Space Gray
+
+2. Import the `glass-base.css` and root variables in the Custom Theme CSS box like below.
+ Replace `--main-bg-color` with a wallpaper you have uploaded to Organizr
+
+```css
+@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/glass-base.css";
+:root {
+ --main-bg-color: url(https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/example.jpg) center center/cover no-repeat fixed;
+ --mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+ --link-color: #fff;
+ --custom-buttons-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed;
+ --hompage-item-hover: radial-gradient(ellipse at center, rgba(0, 150, 136, 0.33) 0%, #b53f3f73 100%) center center/cover no-repeat fixed;
+ --notification-box-line: #000;
+
+ --div-background-color-10: rgba(0, 0, 0, 0.15);
+ --div-background-color-15: rgba(0, 0, 0, 0.25);
+ --div-background-color-25: rgba(0, 0, 0, 0.35);
+ --div-background-color-35: rgba(0, 0, 0, 0.45);
+}
+```
+
+On mobile the background is replaced with `--mobile-bg-color`. Find a background you like here https://cssgradient.io/gradient-backgrounds/ or just set it to a regualar color e.g. `#1f1f1f`
+
+Here are the other theme colors if you want to use that instead:
+
+
+
+`--mobile-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;`
+
+
+
+` --mobile-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;`
+
+
+
+`--mobile-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;`
+
+
+
+`--mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;`
+
+
+
+`--mobile-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;`
+
+### Replace the variables if you have a dark background.
+
+* Light blur colors for dark backgrounds.
+
+```css
+ --div-background-color-10: rgba(255, 255, 255, 0.10);
+ --div-background-color-15: rgba(255, 255, 255, 0.15);
+ --div-background-color-25: rgba(255, 255, 255, 0.25);
+ --div-background-color-35: rgba(255, 255, 255, 0.35);
+```
+
+* Dark blur colors for bright backgrounds
+```css
+ --div-background-color-10: rgba(0, 0, 0, 0.15);
+ --div-background-color-15: rgba(0, 0, 0, 0.25);
+ --div-background-color-25: rgba(0, 0, 0, 0.35);
+ --div-background-color-35: rgba(0, 0, 0, 0.45);
+```
+
+## Login - Lockscreen only
+
+If you just want the login and lockscreen css, just add this in custom CSS:
+
+```css
+@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/glass-login.css";
+```
+
+You can change the blur background color by adding the variables above. The default is dark.
+```css
+@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass/glass-login.css";
+:root {
+ --div-background-color-10: rgba(255, 255, 255, 0.10);
+ --div-background-color-15: rgba(255, 255, 255, 0.15);
+ --div-background-color-25: rgba(255, 255, 255, 0.25);
+ --div-background-color-35: rgba(255, 255, 255, 0.35);
+}
+```
+
+# Screenshots
+
+
+
+
+