IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIX: remove background image from lightbox backdrop (#24225)

Browse Source 
This change removes the background image (which is the small version of the uploaded image) from the lightbox backdrop.

Now a solid color (dark grey) is used for the backdrop so we can distinguish between the lightbox's head, body and footer.
This commit is contained in:
David Battersby 2023-11-03 16:10:04 +08:00 committed by GitHub
parent 47e58357b6
commit b2ec92390a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/d-lightbox.js
View File

@ -65,7 +65,7 @@ export default class DLightbox extends Component {
return htmlSafe(variables.join("")); return htmlSafe(variables.join(""));
} }
const { width, height, aspectRatio, dominantColor, fullsizeURL, smallURL } = const { width, height, aspectRatio, dominantColor, fullsizeURL } =
this.currentItem; this.currentItem;
variables.push( variables.push(
@ -74,8 +74,7 @@ export default class DLightbox extends Component {
`${base}-height: ${height}px`, `${base}-height: ${height}px`,
`${base}-aspect-ratio: ${aspectRatio}`, `${base}-aspect-ratio: ${aspectRatio}`,
`${base}-dominant-color: #${dominantColor}`, `${base}-dominant-color: #${dominantColor}`,
`${base}-full-size-url: url(${encodeURI(fullsizeURL)})`, `${base}-full-size-url: url(${encodeURI(fullsizeURL)})`
`${base}-small-url: url(${encodeURI(smallURL)})`
); );
return htmlSafe(variables.filter(Boolean).join(";")); return htmlSafe(variables.filter(Boolean).join(";"));

7
app/assets/stylesheets/common/components/d-lightbox.scss
View File

@ -19,6 +19,7 @@ html.has-lightbox {
--d-lightbox-primary: #ffffff; --d-lightbox-primary: #ffffff;
--d-lightbox-secondary: #000000; --d-lightbox-secondary: #000000;
--d-lightbox-secondary-translucent: rgba(0, 0, 0, 0.25); --d-lightbox-secondary-translucent: rgba(0, 0, 0, 0.25);
--d-lightbox-tertiary: #222222;
} }
/* Lightbox element*/ /* Lightbox element*/
@ -280,11 +281,7 @@ html.has-lightbox {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-size: cover; background-color: var(--d-lightbox-tertiary);
background-position: center;
filter: blur(15px) brightness(0.25);
background-color: var(--d-lightbox-secondary);
background-image: var(--d-lightbox-image-small-url);
} }
&__main-image { &__main-image {