Remove margins in Gelbooru for posts / thumbnails / images.
This userstyle expands thumbnails while browsing in posts to fully utilize screen realestate. It will look like a grid of squares that fills your viewport.
Gelbooru | BIG Thumbnails for "Posts" by grindle
Details
Authorgrindle
LicenseUnlicense License
Categorygelbooru
Created
Updated
Size1.6 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
• If you are using a 1080p phone, the thumbnails will look pretty small. To change this, modify the fraction denominators specified within the syle. This will change the amount of columns displayed, and less columns means larger thumbnails.
• This userstyle hides both the scrollbar and the tags sidebar. I don't know any CSS so I can't make it work otherwise; however, I already had them hidden anyway.
0.0.1 | Initial release
Source code
/* ==UserStyle==
@name Gelbooru | BIG Thumbnails for "Posts"
@namespace https://github.com/Granshmeyr/userstyles
@version 0.0.1
@description Enlarge and crop post thumbnails.
@author Grindle
==/UserStyle== */
@-moz-document url-prefix("https://gelbooru.com/index.php?page=post&s=list") {
article.thumbnail-preview img {
width: calc(100vw / 5); /* Change denominator to desired column amount */
height: calc(100vw / 5); /* Change denominator to desired column amount */
max-width: unset !important;
max-height: unset !important;
object-fit: cover !important;
}
.thumbnail-preview {
width: calc(100vw / 5); /* Change denominator to desired column amount */
height: calc(100vw / 5); /* Change denominator to desired column amount */
margin-top: 0px !important;
}
/* Settings for small viewport mode (<850px) */
@media only screen and (max-width: 850px) and (min-width: 500px) {
.thumbnail-preview {
width: 33.33vw !important;
height: 33.33vw !important;
}
}
@media only screen and (max-width: 850px) and (min-width: 500px) {
article.thumbnail-preview img {
width: 33.33vw !important;
height: 33.33vw !important;
}
}
/* These are for removing the tags sidebar */
.aside {
display: none !important;
}
#container {
grid-template-columns: auto !important;
}
/* Hides scrollbars */
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;
}
}