steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +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; --b-panel-blur: 16px;
} }
@{panel}, @{table}@{panel} > @{table-caption} { // Ensure that browsers not supporting backdrop-filter do not apply this style
background-color: .hsl-group(background; 0.3)[@c]; @supports (backdrop-filter: blur(var(--b-panel-blur))) {
backdrop-filter:
blur(var(--b-panel-blur))
hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
;
@{panel} { @{panel}, @{table}@{panel} > @{table-caption} {
background-color: .hsl-group(current; 0.075)[@c]; background-color: .hsl-group(background; 0.3)[@c];
backdrop-filter: none; 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 // 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
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{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 // Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{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 // Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} { @{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
// Make the modifier inherit properly
@{panel} {
background-color: .hsl-group(todo-background)[@c]; background-color: .hsl-group(todo-background)[@c];
backdrop-filter: none;
}
}
// Make to-do have a glass background too // Make the modifier inherit properly
@{panel}@{modifier-todo} { @{panel} {
background-color: .hsl-group(todo-background; 0.3)[@c]; background-color: .hsl-group(todo-background)[@c];
backdrop-filter: backdrop-filter: none;
blur(var(--b-panel-blur)) }
grayscale(100%) }
;
} // Make to-do have a glass background too
@{panel} {
@{panel}@{modifier-todo} { @{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];
}
}
} }
} }