QBN Client Mods

• Gabriel

  WHAT: Bigger videos

  CSS:
  dt, body.cover .thread dd {
  display: initial;
  }

  Gabriel

  Flag

• 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.

  mantrakid 1Permalink

  UpvoteDownvote

  Dogear

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• 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;
  }

  pockets 4Permalink

  UpvoteDownvote

  Dogear

  Flag

  • sick thanks for sharing this!mantrakid
  • THX!Gabriel

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• 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;
  }

  kingsteven 4Permalink

  UpvoteDownvote

  Dogear

  Flag

  • 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

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• kingsteven0

  thought of another easy mod

  hide all up/ downvotes and buttons:

  span.score, div.voter {display: none !important;}

  kingsteven 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• ephix0

  where do you put the css?

  ephix 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  • stylebot maybe?pockets
  • https://chromewebsto…pockets
  • Aye thanks. It's been a while since I've done any css stuff. Any web dev actually.ephix
  • hmm dunnae work for me. does it need admin or something.ephix
  • nevermind, have to paste them one at a time.ephix

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• 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;

  }

  sausages 2Permalink

  UpvoteDownvote

  Dogear

  Flag

  • lolkingsteven

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• 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;
  }

  dmay 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel