Fix blur background in the same class level and add blur background in default tile

This commit is contained in:
Konstantinos Triantafyllou 2022-11-03 09:32:59 +02:00
parent 35ab282e53
commit c2bf664ce3
4 changed files with 17 additions and 6 deletions

View File

@ -5,10 +5,10 @@
@background-color-opacity: @global-opacity; @background-color-opacity: @global-opacity;
.hook-background-misc() { .hook-background-misc() {
.set-blur-background(); .set-blur-background(@background-default-background, 80%);
.uk-background-default { .uk-background-default {
.set-blur-background(@background-default-background); .set-blur-background(@background-default-background , 80%);
} }
.uk-background-primary { .uk-background-primary {

View File

@ -1,13 +1,20 @@
.set-blur-background(@color: @base-body-background, @opacity: 80%) { .set-blur-background(@color: @base-body-background, @opacity: 80%) {
.uk-blur-background { &.uk-blur-background, .uk-blur-background {
background: fade(@color, @opacity + 15%); background: fade(@color, 99%);
} }
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.uk-blur-background { &.uk-blur-background, .uk-blur-background {
-webkit-backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background: fade(@color, @opacity); background: fade(@color, @opacity);
} }
} }
/* for firefox */
@-moz-document url-prefix() {
&.uk-blur-background, .uk-blur-background {
background: fade(@color, 99%);
}
}
} }

View File

@ -27,7 +27,7 @@
@offcanvas-overlay-background: @global-overlay-background; @offcanvas-overlay-background: @global-overlay-background;
.hook-offcanvas-bar() { .hook-offcanvas-bar() {
.set-blur-background(@offcanvas-bar-background); .set-blur-background(@offcanvas-bar-background, 80%);
} }
.hook-offcanvas-misc() { .hook-offcanvas-misc() {

View File

@ -1 +1,5 @@
@tile-default-background: @global-inverse-color; @tile-default-background: @global-inverse-color;
.hook-tile-default() {
.set-blur-background(@tile-default-background, 50%) !important;
}