beenull/m1k1oblog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

backdrop-filter fallback

Browse source
This commit is contained in:
Miroslav Šedivý 2020-02-08 17:23:55 +01:00
parent 610ff2ecad
commit f27d628524
2 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/styles/theme01.css
View file

@ -156,10 +156,6 @@ body {
background: white; background: white;
} }
.b_post.is_hidden {
border-color: black;
}
.b_post.is_hidden .b_overlay { .b_post.is_hidden .b_overlay {
display: flex; display: flex;
} }

12
static/styles/theme02.css
View file

@ -28,6 +28,7 @@
--filter: none; --filter: none;
--filter-hover: invert(0.25); --filter-hover: invert(0.25);
--overlay-background: rgba(0, 0, 0, .25); --overlay-background: rgba(0, 0, 0, .25);
--overlay-fallback-background: #ccc;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -61,6 +62,7 @@
--filter: invert(0.62) sepia(0.98) saturate(0.12) hue-rotate(175deg) brightness(0.9) contrast(0.96); --filter: invert(0.62) sepia(0.98) saturate(0.12) hue-rotate(175deg) brightness(0.9) contrast(0.96);
--filter-hover: invert(1); --filter-hover: invert(1);
--overlay-background: rgba(255, 255, 255, .25); --overlay-background: rgba(255, 255, 255, .25);
--overlay-fallback-background: #555;
} }
} }
@ -212,18 +214,20 @@ body {
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
z-index: 1; z-index: 1;
background: var(--overlay-fallback-background);
}
@supports (backdrop-filter: blur(25px)) {
.b_overlay {
backdrop-filter: blur(25px); backdrop-filter: blur(25px);
background: var(--overlay-background); background: var(--overlay-background);
} }
}
.b_overlay .button { .b_overlay .button {
background: var(--primary-background); background: var(--primary-background);
} }
.b_post.is_hidden {
box-shadow: inset 0px 0px 9px -1px var(--primary-text)
}
.b_post.is_hidden .b_overlay { .b_post.is_hidden .b_overlay {
display: flex; display: flex;
} }