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

glass: Wrap in a @supports CSS guard

Browse source 
To prevent Safari from drawing background-less panels
This commit is contained in:
Steffo 2022-10-11 11:57:43 +02:00
parent 892ae7055b
commit 178a4ec54c
1 changed files with 43 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/rules/glass.less
View file

@ -9,57 +9,62 @@
--b-panel-blur: 16px;
}
@{panel}, @{table}@{panel} > @{table-caption} {
background-color: .hsl-group(background; 0.3)[@c];
backdrop-filter:
blur(var(--b-panel-blur))
hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
;
// Ensure that browsers not supporting backdrop-filter do not apply this style
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
@{panel} {
background-color: .hsl-group(current; 0.075)[@c];
backdrop-filter: none;
@{panel}, @{table}@{panel} > @{table-caption} {
background-color: .hsl-group(background; 0.3)[@c];
backdrop-filter:
blur(var(--b-panel-blur))
hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
;
@{panel} {
background-color: .hsl-group(current; 0.075)[@c];
backdrop-filter: none;
}
}
}
// Make sure mark still works, even considering specificity
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
backdrop-filter: none;
// Make the modifier toggle properly
// Make sure mark still works, even considering specificity
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c];
background-color: .hsl-group(mark-background)[@c];
backdrop-filter: none;
// Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
}
}
}
}
// Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
// Make the modifier inherit properly
@{panel} {
// Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
backdrop-filter: none;
}
}
// Make to-do have a glass background too
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background; 0.3)[@c];
backdrop-filter:
blur(var(--b-panel-blur))
grayscale(100%)
;
}
@{panel} {
// Make the modifier inherit properly
@{panel} {
background-color: .hsl-group(todo-background)[@c];
backdrop-filter: none;
}
}
// Make to-do have a glass background too
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
background-color: .hsl-group(todo-background; 0.3)[@c];
backdrop-filter:
blur(var(--b-panel-blur))
grayscale(100%)
;
}
@{panel} {
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
}
}
}
}