techhub/mastodon
2
0
Fork 0
Code Activity

fix: Fix popover/dialog backgrounds not blurred on older Webkit browsers (#35220)

Browse Source
This commit is contained in:
diondiondion
2025-06-30 14:16:54 +02:00
committed by GitHub
parent f00c8e3245
commit e8a603b18f
3 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/styles/mastodon/_variables.scss
View File

@@ -86,6 +86,11 @@ $inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default; $lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default; $light-text-color: $ui-primary-color !default;
// Keep this filter a SCSS variable rather than
// a CSS Custom Property due to this Safari bug:
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
// Language codes that uses CJK fonts // Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;

44
app/javascript/styles/mastodon/components.scss
View File

@@ -362,7 +362,7 @@
&.overlayed { &.overlayed {
box-sizing: content-box; box-sizing: content-box;
background: rgba($black, 0.65); background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); backdrop-filter: $backdrop-blur-filter;
color: rgba($white, 0.7); color: rgba($white, 0.7);
border-radius: 4px; border-radius: 4px;
padding: 2px; padding: 2px;
@@ -2016,7 +2016,7 @@ body > [data-popper-placement] {
&__popout { &__popout {
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
max-width: 320px; max-width: 320px;
@@ -2693,7 +2693,7 @@ a.account__display-name {
.dropdown-menu { .dropdown-menu {
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
@@ -2892,7 +2892,7 @@ a.account__display-name {
gap: 8px; gap: 8px;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
background: var(--background-color); background: var(--background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--background-border-color);
box-sizing: border-box; box-sizing: border-box;
@@ -2952,7 +2952,7 @@ a.account__display-name {
.tabs-bar__wrapper { .tabs-bar__wrapper {
background: var(--background-color); background: var(--background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
@@ -4033,7 +4033,7 @@ a.account__display-name {
background: rgba($base-shadow-color, 0.6); background: rgba($base-shadow-color, 0.6);
border-radius: 8px; border-radius: 8px;
padding: 12px 9px; padding: 12px 9px;
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); backdrop-filter: $backdrop-blur-filter;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -4817,7 +4817,7 @@ a.status-card {
&__label { &__label {
background-color: rgba($black, 0.45); background-color: rgba($black, 0.45);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); backdrop-filter: $backdrop-blur-filter;
border-radius: 8px; border-radius: 8px;
padding: 12px 16px; padding: 12px 16px;
display: flex; display: flex;
@@ -5168,7 +5168,7 @@ a.status-card {
margin-top: 5px; margin-top: 5px;
z-index: 2; z-index: 2;
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
border-radius: 5px; border-radius: 5px;
@@ -5366,7 +5366,7 @@ a.status-card {
.language-dropdown__dropdown { .language-dropdown__dropdown {
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
@@ -6046,7 +6046,7 @@ a.status-card {
min-height: 478px; min-height: 478px;
flex-direction: column; flex-direction: column;
background: var(--modal-background-color); background: var(--modal-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--modal-border-color); border: 1px solid var(--modal-border-color);
border-radius: 16px; border-radius: 16px;
@@ -6090,7 +6090,7 @@ a.status-card {
padding: 24px; padding: 24px;
flex-direction: column; flex-direction: column;
background: var(--modal-background-color); background: var(--modal-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--modal-border-color); border: 1px solid var(--modal-border-color);
} }
@@ -6308,7 +6308,7 @@ a.status-card {
max-height: 80vh; max-height: 80vh;
flex-direction: column; flex-direction: column;
background: var(--modal-background-color); background: var(--modal-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--modal-border-color); border: 1px solid var(--modal-border-color);
border-radius: 16px; border-radius: 16px;
@@ -6375,7 +6375,7 @@ a.status-card {
&__popout { &__popout {
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
max-width: 320px; max-width: 320px;
@@ -6735,7 +6735,7 @@ a.status-card {
.actions-modal { .actions-modal {
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border-color: var(--dropdown-border-color); border-color: var(--dropdown-border-color);
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
max-height: 80vh; max-height: 80vh;
@@ -6861,7 +6861,7 @@ a.status-card {
color: $white; color: $white;
border: 0; border: 0;
background: rgba($black, 0.65); background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); backdrop-filter: $backdrop-blur-filter;
padding: 3px 12px; padding: 3px 12px;
border-radius: 99px; border-radius: 99px;
font-size: 14px; font-size: 14px;
@@ -6886,7 +6886,7 @@ a.status-card {
color: $white; color: $white;
border: 0; border: 0;
background: rgba($black, 0.65); background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); backdrop-filter: $backdrop-blur-filter;
padding: 3px 8px; padding: 3px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
@@ -6908,7 +6908,7 @@ a.status-card {
.media-gallery__alt__popover { .media-gallery__alt__popover {
background: rgba($black, 0.65); background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); backdrop-filter: $backdrop-blur-filter;
border-radius: 4px; border-radius: 4px;
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
padding: 16px; padding: 16px;
@@ -7661,7 +7661,7 @@ a.status-card {
inset-inline-start: 50%; inset-inline-start: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: rgba($base-shadow-color, 0.45); background: rgba($base-shadow-color, 0.45);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
color: $white; color: $white;
border-radius: 8px; border-radius: 8px;
padding: 16px 24px; padding: 16px 24px;
@@ -8834,7 +8834,7 @@ noscript {
&__footer { &__footer {
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
background: var(--modal-background-variant-color); background: var(--modal-background-variant-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--modal-border-color); border: 1px solid var(--modal-border-color);
border-top: 0; border-top: 0;
padding: 12px; padding: 12px;
@@ -8845,7 +8845,7 @@ noscript {
&__header { &__header {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background: var(--modal-background-variant-color); background: var(--modal-background-variant-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--modal-border-color); border: 1px solid var(--modal-border-color);
border-bottom: 0; border-bottom: 0;
padding: 12px; padding: 12px;
@@ -9251,7 +9251,7 @@ noscript {
display: block; display: block;
border-radius: 16px; border-radius: 16px;
background: var(--modal-background-color); background: var(--modal-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--modal-border-color); border: 1px solid var(--modal-border-color);
padding: 24px; padding: 24px;
box-sizing: border-box; box-sizing: border-box;
@@ -10885,7 +10885,7 @@ noscript {
.hover-card { .hover-card {
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
background: var(--modal-background-color); background: var(--modal-background-color);
backdrop-filter: var(--background-filter); backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--modal-border-color); border: 1px solid var(--modal-border-color);
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;

1
app/javascript/styles/mastodon/css_variables.scss
View File

@@ -11,7 +11,6 @@
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)}; --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
--modal-border-color: #{lighten($ui-base-color, 4%)}; --modal-border-color: #{lighten($ui-base-color, 4%)};
--background-border-color: #{lighten($ui-base-color, 4%)}; --background-border-color: #{lighten($ui-base-color, 4%)};
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
--background-color: #{darken($ui-base-color, 8%)}; --background-color: #{darken($ui-base-color, 8%)};
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)}; --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
--surface-background-color: #{darken($ui-base-color, 4%)}; --surface-background-color: #{darken($ui-base-color, 4%)};