Mobile-friendly improvements to StashDB
/* ==UserStyle==
@name Stash DB Mobile
@description Mobile-friendly improvements to StashDB
@namespace https://gist.github.com/angrytoenail/bef6d23f43430f857e5c94cfc241954e
@author Angry Toenail
@version 0.1
@match https://stashdb.org/
@match https://stashdb.org/*
==/UserStyle== */
.HomePage-scenes {
grid-template-columns: repeat(auto-fill,minmax(400px,1fr));
grid-auto-rows: auto;
}
.scenes-list > .row {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(450px,1fr));
grid-auto-rows: auto;
>div {
width: auto;
}
}
.ImageInput-image, .Image {
height: unset !important;
width: unset;
max-height: 40vh;
}
.Image-image {
/* width: 400px;
height: auto; */
width: 100%;
max-width: unset;
max-height: 40vh;
object-fit: cover;
}
.SceneCard-image img {
border-radius: 10px;
}
nav.navbar {
flex-direction: column;
flex-wrap: wrap;
align-items: center;
.navbar-nav:first-child {
flex-wrap: wrap;
justify-content: center;
margin-right: 0 !important;
margin-bottom: var(--bs-navbar-padding-y);
}
}
.nav-link {
min-width: max-content;
}
body {
min-width: 100%;
}
form.d-flex {
flex-wrap: wrap;
justify-content: center;
}
.SearchField {
width: 400px;
}
@media only screen and (max-width: 850px) {
.navbar {
justify-content: center;
}
.navbar-navbar {
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.navbar-nav:first-child {
flex-wrap: wrap;
justify-content: center;
}
.navbar-nav:last-child {
width: 100%;
display: grid;
justify-content: space-evenly;
justify-items: center;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
grid-template-areas:
"notification user logout"
"search search search";
a:first-child {
grid-area: notification;
}
.me-2 {
grid-area: user;
}
.me-4 {
grid-area: logout;
}
.nav-link {
margin-right: 0 !important;
margin-left: 0 !important;
}
.SearchField {
grid-area: search;
padding: 1rem 0;
justify-self: stretch;
text-align: center;
}
}
}