QBN Client Mods
- Started
- Last post
- 7 Responses
- Gabriel
WHAT: Bigger videos
CSS:
dt, body.cover .thread dd {
display: initial;
}
- mantrakid1
Love this idea. Did anyone have a nice dark mode skin they use? if not i might just go ahead at putting together a new one.
- pockets4
this guy needs some work
body.cover .thread dd.main .body {
z-index: 1000;
}
body.qbn,
body.qbn #sidebar.fixed,
body.qbn #sidebar.fixed-add,
body.qbn #sidebar.fixed-remove {
background: #222;
color: #ddd;
font-size: .7em;
}body.qbn #menu .krop{
display: none;
}body.qbn #sidebar .public-voice li:not(.selected):not(.announcem... a .title {
color: #aaa;
}body.qbn input,
body.qbn textarea {
background: none;
color: #aaa;
border: 1px solid #444!important;
box-shadow: none!important;
}body.qbn .news .notes{
display: none;
}body.qbn .notes .post-form textarea {
border: none!important;
}body.qbn h1,
body.qbn h1 a,
body.qbn h2,
body.qbn h2 a,
body.qbn .notes .actions,
body.qbn .notes .actions .add,
body.qbn .thread dt .score,
body.qbn .thread dd.main .meta span.score,
body.qbn #sidebar .public-voice li.announcement a,
body.qbn #menu a {
color: #fff;
}body.qbn a{
color: #ddd
}body.qbn .voter a.active,
body.qbn a.button,
body.qbn a.qbn-logo,
body.qbn #sidebar .public-voice li.selected a .title,
body.qbn a.user,
body.qbn .thread dd.main .meta a.user,
body.qbn .dogear a {
color: #FA0946;
}body.qbn .sized{
width: auto;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"main sidebar";
}body.qbn .close,
body.qbn #menu-trigger{
top: .6rem;
}body.qbn #sidebar{
grid-area: sidebar;
position: sticky;
top: 0;
overflow: unset;
align-self: start;
padding-top: 1.3em;
padding-right: 5em;
}body.qbn #sidebar .logo{
margin: 0;
height: auto;
width: auto;
display: grid;
align-items: center;
align-content: center;
padding-left: 2.6rem;
padding-right: 3rem;
}body.qbn #sidebar .logo .qbn-logo{
font-size: 2.6rem;
line-height: 1;
}body.qbn #sidebar .public-voice{
padding-left: 3.4em;
}body.qbn #sidebar .public-voice > div{
display: grid;
}body.qbn #sidebar .public-voice ul{
display: grid;
grid-gap: .5em;
padding-top: 3.5rem;
}body.qbn #sidebar .public-voice ul li{
height: auto;
line-height: 1.2;
display: grid;
text-align: left;
grid-template-areas:
"topic count";
align-items: end;
overflow: auto;
}body.qbn #sidebar .public-voice ul li .count{
grid-area: count;
position: relative;
margin: 0;
padding: 0;
line-height: 1;
width: auto;
}body.qbn #sidebar .public-voice ul li a{
grid-area: topic;
overflow: auto;
}body.qbn #sidebar .public-voice ul li a .title{
position: relative;
margin: 0;
padding: 0;
width: auto;
display: block;
overflow: auto;
}body.qbn #sidebar .public-voice .actions{
width: auto;
margin: 0;
padding-left: 0;
padding: 1.7em 0;
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "prev next";}
body.qbn #sidebar .public-voice .actions:first-of-type{
display: none;
}body.qbn #sidebar .public-voice .actions a{
margin: 0;
opacity: .3;
}body.qbn #sidebar .public-voice .actions a:hover{
opacity: 1;
}body.qbn #sidebar .public-voice .actions .prev{
position: relative;
width: auto;
grid-area: prev;
padding-right: 1em;
}body.qbn #sidebar .public-voice .actions .next{
display: grid;
justify-self: stretch;
grid-area: next;
}body.qbn #main{
overflow: unset;
grid-area: main;
margin: 0;
padding-left: 2rem;
padding-right: 2rem;
display: grid;
grid-template-columns: auto 1fr 1fr;
grid-gap: 1em;
grid-template-areas:
"title filter controls"
"body body body"
"post-form post-form post-form";
}body.qbn #main h1{
grid-area: title;
position: sticky;
top: 0;
padding-top: .4em;
padding: 15px;
z-index: 1;
background-color: #3d3d3d;
}body.qbn .avatar{
grid-area: filter;
top: 1em;
left: 0;
height: 50px;
width: 120px;
background-size: contain;
position: relative;
animation: fuckyou 2s ease-in-out infinite alternate;
}@keyframes fuckyou {
0%{
transform: rotateZ(0);
}100%{
transform: rotateZ(359deg);
}
}body.qbn .details{
display: grid;
grid-area: filter;
align-items: center;
grid-template-columns: auto 1fr;
padding-top: 1em;
}body.qbn.home h1,
body.qbn.cover h1{
padding-bottom: 0;
}body.qbn #main .main p.first-child,
body.qbn #main h2{
position: sticky;
top: 2.4em;
padding-left:10px;
padding-top: .4em;
z-index: 1000;}
body.qbn #main .main p.first-child{
top: 3em;
background-color: #3D3D3D;
padding-bottom:8px;}
body.qbn #main #meta{
grid-area: filter;
align-self: end;
padding: 0;
}body.qbn #main .filter{
grid-area: filter;
align-self: end;
position: sticky;
top: 1.9em;
z-index: 2;
background-color: #3d3d3d;
padding:15px
}body.qbn .filter .sort{
position: relative;
top: 0;
left: 0;
width: auto;
}body.qbn .thread {
border-bottom: 1px solid #444;
grid-area: body;
margin: 0;
}body.qbn #main .post-form{
grid-area: post-form;
}body.qbn .thread>li {
border-top: 1px solid #444;
}body.qbn .controls{
grid-area: controls;
position: sticky;
padding-top: 1rem;
top: 0;
margin: 0;
z-index: 4;
align-self: end;
justify-self: end;
box-sizing: border-box;
min-width: 320px;
}body.qbn .thread + .controls{
display: none;
}body.qbn.hot-replies .thread + .controls,
body.qbn.subscribed-replies .thread + .controls,
body.qbn.home .thread + .controls{
display: block;
}body.qbn.news-detail .thread + .controls .dogear{
display: none;
}body.qbn .controls li {
background: none;
}body.qbn .pagination {
background: #222;
}body.qbn .pagination .range a.active {
background: #fff;
color: #000;
}body.qbn .pagination .range a {
min-width: 0;
}body.qbn .option-list li a,
body.qbn .pagination .range a,
body.qbn .voter a.inactive,
body.qbn .field.text .help,
body.qbn .notes .actions .show-all {
color: #666;
}body.qbn #menu {
background: #222;
color: #999;
}body.qbn.news-detail h1,
body.qbn #meta,
body.qbn .controls
{
margin-left: 0;
}body.qbn .option-list li.selected a{
color: #999;
}body.qbn .user.uncertified{
color: lime;
}
body.qbn .thread dl{
display: grid;
width: 100%;
grid-template-areas:
"thumb main notes";
grid-template-columns: auto 1fr auto;
}body.qbn .thread dt{
grid-area: thumb;
padding: 0;
text-align: left;
height: auto;
padding-right: 2em;
}body.qbn .thread .news dt,
body.qbn .thread .reply dt{
display: none;
}body.qbn .thread dt a{
display: block;
height: 200px;
margin-left: 0;
}body.qbn .thread dt .user{
padding: 0;
margin: 0;
}body.qbn .thread .notes{
grid-area: notes;
box-sizing: border-box;
align-self: start;
padding: 1em 0;
position: sticky;
position: -webkit-sticky;
top: 0;
padding-top: 7rem;
width: 320px;
}body.qbn .thread .notes .inner ul{
display: grid;
grid-gap: 0 1em;
}body.qbn .thread .main{
position: relative;
display: grid;
grid-area: main;
grid-column: 2 / -1;
grid-template-columns: 1fr 320px;
grid-template-areas:
"body meta";
justify-content: start;
grid-gap: 1em;
padding: 0;
}body.qbn .body{
grid-area: body;
padding: 0;
font-size: 2em;
}body.qbn .thread .meta{
grid-area: meta;
display: grid;
align-items: start;
align-self: start;
padding-bottom: 1rem;
padding-top: 3.4rem;
height: auto;
grid-template-areas:
"user score voter ."
"created dogear voter flag";
grid-gap: 1em 3em;
position: sticky;
top: 0;
background-color: #222;
z-index: 1;
}body.qbn .thread .meta a{
opacity: .2;
}body.qbn .thread .meta .voter a.active,
body.qbn .thread .meta a:hover{
opacity: .8;
color: white;
}body.qbn .voter a.active::after{
content: "d";
}body.qbn .thread .meta .voter{
position: relative;
left: 0;
top: 0;
width: auto;
grid-area: voter;
display: grid;
grid-gap: 1em;
}body.qbn .thread .meta .voter a{
display: block;
text-align: left;
padding: 0;
}body.qbn .thread .meta .user{
grid-area: user;
opacity: 1;
}body.qbn .thread .meta .date{
grid-area: created;
}body.qbn .thread .meta .date::after{
content: none;
}body.qbn .thread .meta .score{
grid-area: score;
}body.qbn .thread .meta .created{
grid-area: created;
}body.qbn .thread .meta .dogear{
grid-area: dogear;
}body.qbn .thread .meta .flagger{
grid-area: flag;}
body.qbn .thread dd.main .meta>* {
display: grid;
padding: 0;
}body.qbn .thread .news .meta .user{
font-size: 2rem;
text-align: right;
grid-column: span 4;
grid-area: voter;
justify-self: end;
}.imgsizer{
position: relative;
width: 75%;
height: 50vh;
background: #00000000;
}.imgsizer:hover,
.vidsizer:hover{
z-index: 10;
}.imgsizer img{
display: block;
max-width: 100%;
max-height: 100%;
height: 100%;
width: 100%;
object-fit: contain;}
body.qbn .vidsizer{
width: auto;
max-width: 100%;
}@media screen and (max-width:800px) {
body.qbn .notes,
body.qbn .notes .post-form {
background: #000;
}
}body.qbn #footer {
position: fixed;
bottom: 1em;
padding: 0;
margin: 0;
right: 0;
left: auto;
width: auto;
opacity: .1;
height: auto;
font-size: .8em;
}
- kingsteven4
not running any mods atm. but these should work.
hide posts by a user:
li.reply:has( a.user[href="/kingsteven/"] ) {
display: none;
}hide sidenotes by user:
li:has( > span + small > a[href="/kingsteven/"].user ) {
display: none;
}- typockets
- added.monNom
- that's the most underrated css hack on every social media platform :)sted
- yeah, has() no place in polite css but is a blessing for this sort of thing.kingsteven
- a warning though... without some javascript to toggle this could get a bit confusing with sidenotes.kingsteven
- kingsteven0
thought of another easy mod
hide all up/ downvotes and buttons:
span.score, div.voter {display: none !important;}
- sausages2
A sidenote mod inspired by kingsteven, username for example purposes only...
@keyframes hotroddy {
50% {
opacity: 70%;
}
}li:has( > span + small > a[href="/hotroddy/"].user ):before {
content: "INCEL CONTENT WARNING: ";
animation: hotroddy .5s linear infinite;
font-weight: 700;
color: #d60000;}
- dmay0
Used this until he was gone
dd.notes li:has(a[href^="/ShulaDon92/"]),
li.reply:has(dt a[href^="/ShulaDon92/"]),
dd.notes li:has(a[href^="/Milan/"]),
li.reply:has(dt a[href^="/Milan/"]) {
display: none;
}