1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 03:24:20 +00:00

Add configurable panel opacity

Closes #68.
This commit is contained in:
Steffo 2024-03-30 19:40:55 +01:00
parent 6115354ca8
commit 0988a24c3e
Signed by: steffo
GPG key ID: 5ADA3868646C3FC0
3 changed files with 13 additions and 4 deletions

View file

@ -63,7 +63,11 @@
height: 100%; height: 100%;
// Set the default font family // Set the default font family
.use-font-group(text) .use-font-group(text);
// Set the opacity of the glass panels
--b-panel-initial-opacity: 1.0;
--b-panel-nested-opacity: 1.0;
} }
//</editor-fold> //</editor-fold>
@ -209,7 +213,7 @@
gap: 8px; gap: 8px;
// Give the first panel in a stack a fixed background color, so it may be seen against a background // Give the first panel in a stack a fixed background color, so it may be seen against a background
background-color: .hsl-group(background)[@c]; background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c];
// Set a min-width for the first level panel // Set a min-width for the first level panel
@media (max-width: 492px) { @media (max-width: 492px) {
@ -248,6 +252,8 @@
// Do not set min-width for nested panels // Do not set min-width for nested panels
@{panel} { @{panel} {
min-width: unset; min-width: unset;
background-color: .hsl-group(background; var(--b-panel-nested-opacity))[@c];
} }
} }

View file

@ -11,6 +11,9 @@
// Set the shadow drawn on element placed directly on the background // Set the shadow drawn on element placed directly on the background
--b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c]; --b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c];
// Override the nested panel opacity to keep them readable
--b-panel-nested-opacity: 0.075;
} }
&, @{all} { &, @{all} {
@ -38,7 +41,7 @@
// Do not give the same effects to nested panels // Do not give the same effects to nested panels
@{panel} { @{panel} {
background-color: .hsl-group(current; 0.075)[@c]; background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
backdrop-filter: none; backdrop-filter: none;
box-shadow: none; box-shadow: none;
} }

View file

@ -8,7 +8,7 @@
// Sets the backdrop-filter blur radius of all panels // Sets the backdrop-filter blur radius of all panels
--b-panel-blur: 16px; --b-panel-blur: 16px;
// Set the opacity of the glass panels // Override the opacity of the glass panels
--b-panel-initial-opacity: 0.300; --b-panel-initial-opacity: 0.300;
--b-panel-nested-opacity: 0.075; --b-panel-nested-opacity: 0.075;
} }