valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

themes: Fix incorrect blur and opacity interaction 

Chrome sometimes seems to have problems when using a blur
backdrop-filter in combination with opacity. On Linux, this often
results in the blur being completely ignored. This also seems to apply
to other systems, though. See the following issue for more details:
https://bugs.chromium.org/p/chromium/issues/detail?id=1129838

Making the background opaque using rgba seems to fix the problem.
This commit is contained in:
Michael Kuhn 2022-01-05 20:42:21 +01:00
parent 97baf3e8b9
commit 1ff52bff81
7 changed files with 7 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
themes/compact.css
View File

@ -1475,8 +1475,7 @@ body.ttrss_utility hr {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #ddd; border: 0 solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;
background: white ! important; background: rgba(255, 255, 255, 0.9) ! important;
opacity: 0.9;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
body.ttrss_prefs { body.ttrss_prefs {

3
themes/compact_night.css
View File

@ -1475,8 +1475,7 @@ body.ttrss_utility hr {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #222; border: 0 solid #222;
border-bottom-width: 1px; border-bottom-width: 1px;
background: #333 ! important; background: rgba(51, 51, 51, 0.9) ! important;
opacity: 0.9;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
body.ttrss_prefs { body.ttrss_prefs {

3
themes/light-high-contrast.css
View File

@ -1475,8 +1475,7 @@ body.ttrss_utility hr {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #ddd; border: 0 solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;
background: white ! important; background: rgba(255, 255, 255, 0.9) ! important;
opacity: 0.9;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
body.ttrss_prefs { body.ttrss_prefs {

3
themes/light.css
View File

@ -1475,8 +1475,7 @@ body.ttrss_utility hr {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #ddd; border: 0 solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;
background: white ! important; background: rgba(255, 255, 255, 0.9) ! important;
opacity: 0.9;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
body.ttrss_prefs { body.ttrss_prefs {

3
themes/light/cdm.less
View File

@ -325,8 +325,7 @@
box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1); box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1);
border: 0 solid @border-default; border: 0 solid @border-default;
border-bottom-width: 1px; border-bottom-width: 1px;
background : @default-bg ! important; background : fade(@default-bg, 90%) ! important;
opacity: 0.9;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
} }

3
themes/night.css
View File

@ -1476,8 +1476,7 @@ body.ttrss_utility hr {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #222; border: 0 solid #222;
border-bottom-width: 1px; border-bottom-width: 1px;
background: #333 ! important; background: rgba(51, 51, 51, 0.9) ! important;
opacity: 0.9;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
body.ttrss_prefs { body.ttrss_prefs {

3
themes/night_blue.css
View File

@ -1476,8 +1476,7 @@ body.ttrss_utility hr {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
border: 0 solid #222; border: 0 solid #222;
border-bottom-width: 1px; border-bottom-width: 1px;
background: #333 ! important; background: rgba(51, 51, 51, 0.9) ! important;
opacity: 0.9;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
body.ttrss_prefs { body.ttrss_prefs {