topaLE
/
theme.park.app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
869 Commits
4 Branches
30 Tags
464 MiB
 
 
 
 
 
Tree: 0704e9ef4e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0704e9ef4e'
${ noResults }
theme.park.app/CSS/addons/organizr/glass
gilbN 0704e9ef4e
org glass custom html 		5 years ago
..
screenshots Delete dsfsdf.txt 5 years ago
README.md Update README.md 5 years ago
example.jpg Add files via upload 5 years ago
glass-base.css org glass custom html 5 years ago

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