Libreddit CSS-grids issue Topic is solved
Moderator: trava90
Forum rules
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.
Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.
Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
- Clear any current output
- Navigate or refresh the page in question
- Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
-
- Moongazer
- Posts: 10
- Joined: 2020-01-01, 15:46
Libreddit CSS-grids issue
The FOSS-front-end of Reddit, Libreddit, has visual corruption in Pale Moon (and Basilisk according to a GitHub issue, haven't tested it myself).
Relevant GitHub issue closed by Libreddit team: https://github.com/spikecodes/libreddit/issues/167
The developer there suggested the problem laying on CSS-grids.
Official Libreddit instances to use for testing (same issue obviously on other instances, but might as well test on official):
https://libreddit.spike.codes/
https://libredd.it/
Attached a screenshot of the graphical issues.
Relevant GitHub issue closed by Libreddit team: https://github.com/spikecodes/libreddit/issues/167
The developer there suggested the problem laying on CSS-grids.
Official Libreddit instances to use for testing (same issue obviously on other instances, but might as well test on official):
https://libreddit.spike.codes/
https://libredd.it/
Attached a screenshot of the graphical issues.
You do not have the required permissions to view the files attached to this post.
-
- Add-ons Team
- Posts: 582
- Joined: 2017-01-14, 02:40
- Location: Philippines
Re: Libreddit CSS-grids issue
They're using the min() CSS function in their grid template for each post, which UXP currently does not have support for.
Temporarily, you may opt to use the following user style:
Temporarily, you may opt to use the following user style:
Code: Select all
@-moz-document domain("libredd.it"), domain("libreddit.spike.codes") {
.post {
border-radius: 5px;
background: var(--post);
box-shadow: var(--shadow);
display: grid;
transition: 0.2s background;
grid-template: "post_score post_header post_thumbnail" auto
"post_score post_title post_thumbnail" 1fr
"post_score post_media post_thumbnail" auto
"post_score post_body post_thumbnail" auto
"post_score post_notification post_thumbnail" auto
"post_score post_footer post_thumbnail" auto
/ minmax(40px, auto) minmax(0, 1fr) fit-content(152px);
}
}
-
- Moongazer
- Posts: 10
- Joined: 2020-01-01, 15:46
Re: Libreddit CSS-grids issue (partially resolved)
Thank you, FranklinDM. I've tested that snippet in my userContent.css and it works just fine!
EDIT: Seems I celebrated prematurely. This css snippet hides the embedded videos from posts. Example-link to a random video from r/popular: https://libredd.it/r/CrazyFuckingVideos ... ght_there/
Without the css snippet the content is all bunched up, but the video player is technically there even if tiny sized. With the css snippet the whole media player is hidden from sight.
EDIT: Seems I celebrated prematurely. This css snippet hides the embedded videos from posts. Example-link to a random video from r/popular: https://libredd.it/r/CrazyFuckingVideos ... ght_there/
Without the css snippet the content is all bunched up, but the video player is technically there even if tiny sized. With the css snippet the whole media player is hidden from sight.
-
- Pale Moon guru
- Posts: 35637
- Joined: 2011-08-28, 17:27
- Location: Motala, SE
Re: Libreddit CSS-grids issue
Reported on their github as an issue: https://github.com/spikecodes/libreddit/issues/502
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
-
- Add-ons Team
- Posts: 582
- Joined: 2017-01-14, 02:40
- Location: Philippines
Re: Libreddit CSS-grids issue (partially resolved)
Try this one:
Code: Select all
@-moz-document domain("libredd.it"), domain("libreddit.spike.codes") {
@media screen and (max-width: 480px) {
.post {
grid-template: "post_header post_header post_thumbnail" auto
"post_title post_title post_thumbnail" 1fr
"post_media post_media post_thumbnail" auto
"post_body post_body post_thumbnail" auto
"post_notification post_notification post_thumbnail" auto
"post_score post_footer post_thumbnail" auto
/ auto 1fr fit-content(152px);
}
}
.post {
border-radius: 5px;
background: var(--post);
box-shadow: var(--shadow);
display: grid;
transition: 0.2s background;
grid-template: "post_score post_header post_thumbnail" auto
"post_score post_title post_thumbnail" 1fr
"post_score post_media post_thumbnail" auto
"post_score post_body post_thumbnail" auto
"post_score post_notification post_thumbnail" auto
"post_score post_footer post_thumbnail" auto
/ minmax(40px, auto) minmax(0, 1fr) fit-content(152px);
}
.post_media_video.short,
.post_media_image.short svg,
.post_media_image.short img {
width: -moz-max-content;
}
#user, #subreddit, #sidebar {
height: -moz-max-content;
}
}
-
- Moongazer
- Posts: 10
- Joined: 2020-01-01, 15:46
Re: Libreddit CSS-grids issue
No luck with the updated CSS, looks the same (hidden player).
-
- Add-ons Team
- Posts: 582
- Joined: 2017-01-14, 02:40
- Location: Philippines
Re: Libreddit CSS-grids issue
This should (hopefully) force the video/image containers to use the content width:
Code: Select all
@-moz-document domain("libredd.it"), domain("libreddit.spike.codes") {
@media screen and (max-width: 480px) {
.post {
grid-template: "post_header post_header post_thumbnail" auto
"post_title post_title post_thumbnail" 1fr
"post_media post_media post_thumbnail" auto
"post_body post_body post_thumbnail" auto
"post_notification post_notification post_thumbnail" auto
"post_score post_footer post_thumbnail" auto
/ auto 1fr fit-content(152px);
}
}
.post {
border-radius: 5px;
background: var(--post);
box-shadow: var(--shadow);
display: grid;
transition: 0.2s background;
grid-template: "post_score post_header post_thumbnail" auto
"post_score post_title post_thumbnail" 1fr
"post_score post_media post_thumbnail" auto
"post_score post_body post_thumbnail" auto
"post_score post_notification post_thumbnail" auto
"post_score post_footer post_thumbnail" auto
/ minmax(40px, auto) minmax(0, 1fr) fit-content(152px);
}
.post_media_video,
.post_media_image svg,
.post_media_image img {
width: -moz-max-content !important;
}
#user, #subreddit, #sidebar {
height: -moz-max-content;
}
}
-
- Moongazer
- Posts: 10
- Joined: 2020-01-01, 15:46
Re: Libreddit CSS-grids issue
Thanks, the new snippet works perfectly!