Mirrors/theme.park
1
0
Fork 0
mirror of https://github.com/gilbN/theme.park.git synced 2024-10-03 22:17:08 +02:00
Code Issues Releases Wiki Activity
fdde2a3659
theme.park/CSS/addons/organizr/glass
History
GilbN 0d8ded875e
Update README.md
2019-11-03 15:18:57 +01:00
..
screenshots Add files via upload 2019-11-03 15:16:58 +01:00
example.jpg Add files via upload 2019-11-03 14:27:55 +01:00
glass-base.css Update glass-base.css 2019-11-03 14:39:41 +01:00
README.md Update README.md 2019-11-03 15:18:57 +01:00

README.md

Installation

Set the Organizr theme to either Aquamarine or Hotline.

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

@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

Replace the variables if you have a dark background.

  • Light blur colors for dark backgrounds.
    --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
    --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);

Screenshots