9gag dark deluxe by sltw

/* ==UserStyle==
@name           9gag dark deluxe
@namespace      USO Archive
@author         SLTW
@description    `A Theme for 9gag to make it dark and overall a very nice experience.Added a few little Details and improvements.This is still a work in progress - so if you find any issues or have troubles with the theme please let me know.`
@version        20210508.8.19
@license        CC-BY-NC-ND-4.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("9gag.com") {
/*9gag dark deluxe*/

/* top navigation */
#top-nav {background: #1b1b1bf2; 
border-bottom: solid 3px #000;   
}
.nav-wrap a.logo,.nav-wrap a.menu{ filter: invert(0) !important;}

.sticky-navbar[data-v-28b16781] {background: transparent;}
.sticky-navbar a[data-v-28b16781] {color: white; border: 1px solid #646464;}
.sticky-navbar a.selected[data-v-28b16781], .sticky-navbar a.selected[data-v-28b16781]:hover {background-color: #000; color: #0f0;}
.sticky-navbar a[data-v-28b16781]:hover {background-color: #006200;}


[data-v-19da590c] .button .icon {opacity: 0.3}
[data-v-19da590c] .button .icon:hover {opacity: 1}


div.post-tag a {display: none;}

[class="post-view featured-video"] {height: 15px}
[class="post-view featured-video"]:before {content:"Here would be a featured video but my theme saved you."; color: #ff7600}



/* default background color */
.background-white, body {background-color: #1b1b1b;}

section#list-view-2 .post-container .post-view {background-color: transparent;}


/* Coloring Post Titles */
.listview h1 a,section#list-view-2 h1 {color: #fff;}
.listview h1 a:hover {color: #00ff31}


/* icons inverted coloer */
.post-action span.icon {filter: invert(100%);}

/* left side labels */
.section-sidebar .nav .label {color: #d0d0d0;}
.section-sidebar .nav .label:hover  {background-color: #747474!important;color: white;}
.section-sidebar .icon.star {filter: invert(100%)}


/* .drawer, .drawer[data-v-756727ca], .drawer[data-v-19da590c], .drawer[data-v-3b27b023] */

[class^=".drawer"], [class="drawer"] {background: transparent !important;}
a.label {color: white !important;}


/* hot, trending and fresh icon */
.section-sidebar .icon.hot, i.icon.hot {background-image: url(https://orig00.deviantart.net/8367/f/2018/090/0/b/explosion_gif_transparent_background_6_by_agomy-dc7g7tg.gif); background-size: 24px 24px;}
.section-sidebar .icon.trending, .section-sidebar .icon.fresh {filter: invert(100%)}


/* Selected label left */
.section-sidebar .nav .label.selected {background-color: #454545;color: white;}
.section-sidebar .nav .label.selected:hover {background-color: #454545;color: white;}


/* right side stuff */
section.block-feature-cover a {color: #a6a6a6;}
section.block-feature-cover a:hover {color: white!important;}

/* remove featured stuff */
.featured-tag {display: none;}

/*remove stupid ad stiuff*/
[id="jsid-ad-container-banner_top"] {display: none !important;}


/* post border stuff */ 
.listview article {border: solid 1px #58585800; margin-right: -2px; margin-bottom: 2px}


/* my profile stuff */
.profile-header header h2 {color: #b7b6b6;}
.profile .tab-bar ul.menu a.selected {color: white; border-bottom: 2px solid #0F0;}
.profile .tab-bar ul.menu a:hover {color: white;}
.profile-header .img-container img {border: solid 1px green;}
.profile-about, .profile .tab-bar {color: #32ff33;}

.popup-menu.user {background-color: #333;}


/* header search */
.headbar-search {background-color: Black; box-shadow: 3px 3px 10px 5px #000}
.popup-menu.search-menu {background: none;}
input {background-color: #f000; color: white;}



/* notification-menu and popmenu*/
.notification-menu .title h3 {color: white;}
.notification-menu {background-color: #000; border: 1px solid #00ff223b; box-shadow: 0px 0px 5px 2px #00ff078c;}
.notification-list li a.item.new {background-color: black;color: white}
.notification-list li a.item.new:hover {background-color: #535353;color: white}
.notification-menu .bumper {background-color: #000;}
.notification-menu .bumper a.see-all {color: #fff;}
.notification-menu .bumper a.see-all:hover {color: #0F0;}
.notification-menu .tab-bar a {color: #7b7b7b;}
.notification-menu .tab-bar a.active {color: #0F0;border-bottom: 2px solid #0f0}
.notification-menu .tab-bar a.active:hover {color: #0f0;}
.notification-menu .tab-bar a:hover {color: #50fd43;} 

.noti-item.unread {background: black; color: #72fb68;}
.noti-item.unread a {color: #72fb68;}
.noti-item.unread:hover {background: #242424; color: #0f0;}
.noti-item {background: #000; color: gray; }
.noti-item:hover {background: #242424; color: #fff; }


.popup-menu ul {background-color: #4b4b4b; border: 1px solid #00ff2278; box-shadow: 0px 0px 5px 2px #00ff078c;}
.popup-menu a {background: transparent;color: white;}
.popup-menu a:hover  {background: rgb(100, 100, 100);color: white;}


.notification-list li a.item {background-color: #ffffff57;}
.notification-list li a.item:hover {background-color: #386e6aa6; }


/* comment section */
.CS3 {background: transparent;}
.CS3 .tab-bar h3,.CS3 .comment-entry .payload .username {color: white;}
.CS3 .comment-entry .payload .content {color: #aeaeae;}
.CS3 .collapsed-comment {color: #86ff8a;}
.CS3 .tab-bar ul.tab li.active a {color: white; border-bottom: solid 5px #0F0}
.CS3 .tab-bar ul.tab a:hover {color: white;}

.CS3 input[type=url], .CS3 textarea {background-color: Black;color: white; border-color: #0F0; resize: vertical; min-height: 100px;  }
.CS3 .comment-box .action {border-color: #0f0}

.CS3 .comment-section-title h3 {color: #00fffb;}
.CS3 .notice-message {background-color: transparent;}


.comment-input-area-content__input-area_textarea {background: black !important;}
[class="comment-list-item"]:hover,[class="comment-list-item comment-list-item_reply"]:hover, [class="comment-list-item comment-list-item_reply comment-list-item_highlighted"], .comment-list-item[data-v-8df947e6]:hover, .comment-list-item_highlighted[data-v-d3b46cbe],.comment-list-item[data-v-207b3136]:hover  {background: rgba(13, 12, 12, .72) !important; border-radius: 10px}
.comment-list-item__text {color: white;}

.comment-item-header__deleted[data-v-3457baac], .comment-item-header__username[data-v-3457baac],.comment-item-header__deleted[data-v-ff5844e8], .comment-item-header__username[data-v-ff5844e8] {color: #e32685 ;}


.comment_system_module a {color: #22ec2f ;}

.comment-tab-bar__label[data-v-786d06f2] {color: white;}
.comment-tab-bar_action.active[data-v-786d06f2] {color:  #1ea827; border-color: #1ea827;}

.comment-list-item__replies[data-v-8df947e6] {color: #0f0}

.comment-list-item__replies .arrow-down-reverse[data-v-8df947e6] {    border-top: 0 !important;    border-bottom: 5px solid #0f0;}
.comment-list-item__replies .arrow-down[data-v-8df947e6] {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #0f0;display: inline-block;margin: 0 11px 2px 0;}


.comment-input-area-content_attachments-list[data-v-178c8010] {background-color: #1a1a1a; border-top: 2px solid #fff}

.vote-button_voted[data-v-33327dc2], .vote-button_voted[data-v-33327dc2]:hover {color: #e32685 !important;}


.comment-list-item_highlighted[data-v-2314e918]:hover {background-color: #000000;}
.comment-list-item_highlighted[data-v-2314e918] {animation-name: highlight; animation-duration: 4s; border-radius: 15px}

@keyframes highlight {
  0% { background: #000;}
  90% { background: #000;}
  100% {background: transparent}
}




/*locked message*/

.comment-notice-message[data-v-180fcaf2] {background: #a40000; box-shadow: 0 0 10px 10px #a40000; border-radius: 10px}
[class="comment-notice-message__title"]:after {content:" <- does it say 'locked'? Then you are looking at an ad or something else that was paid for by someone. You did upvote this? You fool go back to TikTok."}
 

/* pro badge */
.CS3 a.badge.pro, .CS3 span.badge.pro {display:none;}

/*report*/
.post-afterbar-meta a:hover {color: #f00; font-weight:bold;}
.post-afterbar-meta a:hover::before {color: #f00; font-weight:bold;content:"Dude you ain't no snitch are you?"}


/* button stuff */
.CS3 a.cmnt-btn {background-color: #000; border: 1px solid #bcbcbc;}
.CS3 a.cmnt-btn:hover {background-color: #000; border: 1px solid #00ff1c;color: #0F0}


.comment-input-area-footer__actions-area_action.post[data-v-cfe73014], .uni-modal__footer .button-primary {background: black; border: 1px solid #0f0}
.comment-input-area-footer__actions-area_action.post[data-v-cfe73014]:hover, .uni-modal__footer .button-primary:hover {background: black; border: 2px solid #0f0}

/*inside a post*/
section#individual-post header h1 {color: white;}
.post-afterbar-a.in-post-top {background: transparent}

.btn-vote a.up:hover {border: solid 1px #0F0;}
.btn-vote a.up.active {border: solid 1px #0F0;}

.btn-vote a.down:hover {border: solid 1px #f00;}
.btn-vote a.down.active {border: solid 1px #F00;}

.post-afterbar-a .post-nav a.next {opacity: 0.7}
  
  
  
  
/* fuck stupid sharing options - Fuck whatsapp - Fuck Facbook messenger*/
[class="badge-evt badge-track whatsapp"], [class="badge-evt badge-track messenger"] {display: none !important;}

  
  

/*video stuff*/
.video-length {opacity: 0.5!important}

/*notifications list*/
.notification-text-list .label h3, .notification-detail .section-title h3,.notification-text-list a {color: white;}
.notification-text-list p {color: #c1c1c1}

/*settings*/
section#settings h2,.field label {color: #fff;}
.setting-social-connect label {color: #fff;}
.setting-social-connect label:after {content:' - What is happening?'}


/* upload button*/
.user-function .btn-primary, .visitor-function .btn-primary,section.modal.upload .source.file span.btn,.CS3 .notice-message .btn-container a.btn {color: #0F0; background-color: Black; border: solid 1px #6d6d6d;}
.user-function .btn-primary:hover, .visitor-function .btn-primary:hover,.CS3 .notice-message .btn-container a.btn:hover {color: #0F0; background-color: Black; border: solid 1px #0F0;}


/*upload window*/
section.modal {background-color: #000...