Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-17 09:48:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] fix: Fix popover/dialog backgrounds not blurred on older Webkit browsers

Browse Source 
Port e8a603b18f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-06-30 14:16:54 +02:00
committed by Claire
parent 2eec4da8fc
commit 0bb2dc9d26
3 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/flavours/glitch/styles/_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/flavours/glitch/styles/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;
@@ -2082,7 +2082,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;
@@ -2758,7 +2758,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: 2px; // glitch: reduced padding padding: 2px; // glitch: reduced padding
border-radius: 4px; border-radius: 4px;
@@ -2957,7 +2957,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;
@@ -3017,7 +3017,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;
@@ -4121,7 +4121,7 @@ input.glitch-setting-text {
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;
@@ -4949,7 +4949,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;
@@ -5300,7 +5300,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;
@@ -5498,7 +5498,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;
@@ -6283,7 +6283,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;
@@ -6327,7 +6327,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);
} }
@@ -6545,7 +6545,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;
@@ -6612,7 +6612,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;
@@ -6974,7 +6974,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;
@@ -7130,7 +7130,7 @@ img.modal-warning {
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;
@@ -7154,7 +7154,7 @@ img.modal-warning {
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;
@@ -7176,7 +7176,7 @@ img.modal-warning {
.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;
@@ -7965,7 +7965,7 @@ img.modal-warning {
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;
@@ -9143,7 +9143,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;
@@ -9154,7 +9154,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;
@@ -9560,7 +9560,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;
@@ -11199,7 +11199,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/flavours/glitch/styles/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%)};