Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-13 03:26:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Remove blur from media modal background

Browse source
This commit is contained in:
Lim Chee Aun 2023-04-20 19:10:07 +08:00
parent 7a7693ae52
commit fbcc1f6e22
3 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app.css
View file

@ -920,8 +920,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.media-modal-container { .media-modal-container {
position: relative; position: relative;
width: 100%; width: 100%;
background-color: var(--backdrop-color); background-color: var(--backdrop-solid-color);
backdrop-filter: blur(24px);
animation: appear 0.3s var(--timing-function) both; animation: appear 0.3s var(--timing-function) both;
} }
.media-modal-container.loading { .media-modal-container.loading {

8
src/components/media.jsx
View file

@ -165,10 +165,10 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
}`} }`}
data-formatted-duration={formattedDuration} data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''} data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
style={{ // style={{
backgroundColor: // backgroundColor:
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, // rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
}} // }}
onClick={(e) => { onClick={(e) => {
if (hoverAnimate) { if (hoverAnimate) {
try { try {

2
src/index.css
View file

@ -43,6 +43,7 @@
--outline-hover-color: rgba(128, 128, 128, 0.7); --outline-hover-color: rgba(128, 128, 128, 0.7);
--divider-color: rgba(0, 0, 0, 0.1); --divider-color: rgba(0, 0, 0, 0.1);
--backdrop-color: rgba(0, 0, 0, 0.05); --backdrop-color: rgba(0, 0, 0, 0.05);
--backdrop-solid-color: #ccc;
--img-bg-color: rgba(128, 128, 128, 0.2); --img-bg-color: rgba(128, 128, 128, 0.2);
--loader-color: #1c1e2199; --loader-color: #1c1e2199;
--comment-line-color: #e5e5e5; --comment-line-color: #e5e5e5;
@ -82,6 +83,7 @@
--divider-color: rgba(255, 255, 255, 0.1); --divider-color: rgba(255, 255, 255, 0.1);
--bg-blur-color: #24252699; --bg-blur-color: #24252699;
--backdrop-color: rgba(0, 0, 0, 0.5); --backdrop-color: rgba(0, 0, 0, 0.5);
--backdrop-solid-color: #333;
--loader-color: #f0f2f599; --loader-color: #f0f2f599;
--comment-line-color: #565656; --comment-line-color: #565656;
--drop-shadow-color: rgba(0, 0, 0, 0.5); --drop-shadow-color: rgba(0, 0, 0, 0.5);