An alternative layout for BINI's exclusive membership site.
BINI Exclusive Members Site Alt Layout by boydreamboy
Details
Authorboydreamboy
LicenseNo License
Categoryhttps://fandom.abs-cbn.com/bini/members
Created
Updated
Size3.6 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
- Please don't swipe horizontally at the Exclusive Videos section 😂
Source code
/* ==UserStyle==
@name BINI Exclusive Members Site Alt Layout
@version 20240908.09.17
@namespace https://userstyles.world/user/boydreamboy
@description An alternative layout for BINI's exclusive membership site.
@author boydreamboy
@license No License
==/UserStyle== */
@-moz-document url("https://fandom.abs-cbn.com/bini/members") {
/* no corsiva */
.font-corsiva,
.MuiTypography-h2 {
font-family: "Helvetica" !important;
font-weight: bold;
font-size: 2em
}
/* replace Exclusive videos */
div.px-6 p.font-corsiva {
visibility: hidden;
position: relative;
}
div.px-6 p.font-corsiva::after {
visibility: visible !important;
position: absolute;
left: 0;
content: "Exclusive Videos";
}
/* wiiiiiide */
.container {
max-width: 80% !important;
}
/* reset display of each section */
.container > div {
display: block;
margin-top: 0px !important;
margin-bottom: 50px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
/* reset style and align exclusive drops section */
.container > div:nth-child(3) > div:nth-child(1) {
background-color: transparent;
justify-content: flex-start;
}
.container > div:nth-child(3) > div:nth-child(1) img {
border-radius: 10px;
}
/* remove padding of bini memeverse */
.MuiContainer-root.MuiContainer-maxWidthXl.css-zsio2v {
padding: 0px;
}
/* vods container layout */
.px-6 .swiper-wrapper {
display: grid;
gap: 10px;
/* column-gap: 20px;
row-gap: 5px; */
grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* reset and max width of vods */
.swiper-slide {
display: initial;
width: 100% !important;
/* height: 16em !important; */
}
/* vod titles */
.swiper-slide p {
margin-top: 10px;
font-size: 1.1rem;
line-height: 1.1rem;
/* clip vod titles to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 3em !important;
transition: max-height 0.5s ease-in-out !important;
}
/* vod titles reveal */
.swiper-slide p:hover{
-webkit-line-clamp: 50 !important;
max-height: 50em !important;
}
/* reset display of boxes under slide items */
.swiper-slide div {
display: initial;
}
/* vod thumbnails */
.swiper-slide img.aspect-video {
border-radius: 10px;
box-shadow: 0 1px 2px rgba(88, 201, 212, 0.3);
transition: all .1s ease-in-out;
}
/* vod thumbnails shadow on hover */
.swiper-slide:hover img.aspect-video {
box-shadow: 0 5px 15px rgba(88, 201, 212, .5);
border: 3px solid rgba(88, 201, 212, 0.3);
}
/* hides swipe button */
button > svg {
display: none !important;
}
/* forms */
iframe {
height: 800px;
}
/* vods layout in smaller screens */
@media screen and (max-width: 992px) {
.px-6 .swiper-wrapper {
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
/* vod titles */
.swiper-slide p {
margin-top: 10px;
font-size: 1rem;
line-height: 1rem;
}
}
@media screen and (max-width: 600px) {
.px-6 .swiper-wrapper {
gap: 5px;
grid-template-columns: 1fr 1fr;
}
.container {
max-width: 100% !important;
}
.swiper-slide {
/* height: 13em !important; */
}
div.container:first-child > div {
margin-bottom: 10px !important;
}
}
/* removes play icon on chrome */
@supports (-webkit-font-smoothing: antialiased) {
.absolute.bottom-0.p-2.w-full.flex.items-center.justify-between {
display: none;
}
}
}