MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Fix backdrop blurs on GNOME Web and other browsers requiring -webkit-*

Browse source
This commit is contained in:
Korbs 2024-09-08 21:34:26 -04:00
parent be1ef71d6f
commit 9583ff6ab9
7 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
source/src/components/Dialog.astro
View file

@ -35,6 +35,7 @@ const {
height: 100%; height: 100%;
z-index: 6; z-index: 6;
backdrop-filter: blur(10px) brightness(0.5) contrast(0.9); backdrop-filter: blur(10px) brightness(0.5) contrast(0.9);
-webkit-backdrop-filter: blur(10px) brightness(0.5) contrast(0.9);
} }
.dialog { .dialog {
display: none; display: none;

1
source/src/components/DiscoverChannel.astro
View file

@ -31,6 +31,7 @@ const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + Cha
align-items: center; align-items: center;
text-align: center; text-align: center;
backdrop-filter: blur(24px) contrast(0.7) brightness(0.4); backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
-webkit-backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
img { img {
width: 24%; width: 24%;
align-self: center; align-self: center;

1
source/src/components/Search.astro
View file

@ -136,6 +136,7 @@ for the JavaScript code in this page.
width: 100%; width: 100%;
border-radius: 6px; border-radius: 6px;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px #282828 solid; border: 1px #282828 solid;
a:hover { a:hover {
background: #0d0d0d !important; background: #0d0d0d !important;

1
source/src/components/category/CategoryCard.astro
View file

@ -48,6 +48,7 @@ const {
place-content: center; place-content: center;
border-radius: 10px; border-radius: 10px;
backdrop-filter: blur(3px) brightness(0.3) contrast(0.8); backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
-webkit-backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
p { p {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;

1
source/src/pages/live.astro
View file

@ -70,6 +70,7 @@ const Creator = await fetch(
height: 100%; height: 100%;
z-index: -1; z-index: -1;
backdrop-filter: brightness(0.2) contrast(0.8) blur(12px); backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
-webkit-backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px;
} }
.creator-tw-banner { .creator-tw-banner {

2
source/src/styles/mobile.scss
View file

@ -9,6 +9,7 @@
width: calc(100% - 48px); width: calc(100% - 48px);
background: transparent; background: transparent;
backdrop-filter: blur(48px) contrast(0.8) brightness(0.8); backdrop-filter: blur(48px) contrast(0.8) brightness(0.8);
-webkit-backdrop-filter: blur(48px) contrast(0.8) brightness(0.8);
justify-content: space-around; justify-content: space-around;
z-index: 10; z-index: 10;
padding: 0px 24px; padding: 0px 24px;
@ -50,6 +51,7 @@
.header, .page-title { .header, .page-title {
background: rgb(0 0 0 / 80%); background: rgb(0 0 0 / 80%);
backdrop-filter: blur(10px) contrast(0.8); backdrop-filter: blur(10px) contrast(0.8);
-webkit-backdrop-filter: blur(10px) contrast(0.8);
} }
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {

1
source/src/styles/player.scss
View file

@ -190,6 +190,7 @@
gap: 6px; gap: 6px;
padding: 4px; padding: 4px;
backdrop-filter: blur(24px) contrast(0.8) brightness(0.8); backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
-webkit-backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
hr { hr {
margin: 0px; margin: 0px;
width: 100%; width: 100%;