Rumble.com - Dark Mode 11-11-2021

/*
currently working on:
-embed button on video page
-sing in/up page
-Dark Mode toggle button
*/
/*last update: 11-11-2021*/
* {transition: 200ms;}
*:not(.contained) {
    color: #ddd;
    background: #000;
    background-color: #222;
    background-image: unset;
    border-color: #aaa !important;
}

/*========================================================================================*/
/* headers */
header.header {
    color: #ddd;
    background: #222;
}

svg.main-menu-close,
svg.main-menu-open {
    stroke: #ddd;
}

div.hover-menu {
    padding: 0.2rem 0;
}

a.main-menu-item {
    margin: 0;
    padding: 0.4rem 1rem 0.4rem;
    line-height: 1.8rem;
}

a.main-menu-item:hover {
    background: #444;
    color: rgba(255, 255, 255, 0.75);
}

a.main-menu-item svg.main-menu-icon {
    transition: 100ms;
    stroke: rgba(255, 255, 255, 0.75);
}

a.main-menu-item:hover svg.main-menu-icon {
    background: unset;
}

.hover-menu > a:hover {
    text-decoration: none;
}

.hover-menu > a > .main-menu-heading {
    margin: 2rem 0;
    padding: 5px 1rem;
    line-height: 1.8rem;
    border-bottom: 1px solid;
    border-bottom-color: transparent !important;
}

.hover-menu > a:hover > .main-menu-heading {
    background: #444;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    border-top-color: transparent !important;
    border-bottom-color: #aaa !important;
}

svg.main-menu-icon {
    vertical-align: bottom;
    margin: 0 0.5rem 0 0;
}

a.header-logo {
    border-radius: 2rem;
    overflow: hidden;
}

a.header-logo > img {
    padding: 5px;
    background: #ddd;
}

svg.main-menu-icon {
    stroke: #888;
}

select.header-search-select > option {
    color: #ddd;
}

form.header-search {
    border: 1px solid #ddd;
    padding: 0 20px;
}

/*keep these separate*/
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus {
    -moz-box-shadow: 0 0 0px 1000px #222 inset;
    -moz-text-fill-color: #ddd;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #222 inset;
    -webkit-text-fill-color: #ddd;
}
/*===================*/
svg.header-search-icon {
    stroke: #888;
}

button.header-upload {
    background: #74a642;
}

span.header-user-name,
span.header-user-stat {
    color: #ddd;
}

/*========================================================================================*/
/* home page */
a.tab-heading.tab-active {
    color: #222;
    background: #ddd;
}

ul.mediaList-list {
    padding: 0;
}

ul.mediaList-list.container.content.with-show-more-link {
    padding-bottom: 14px;
}

ul.mediaList-list > .mediaList-item.first-item {
    padding-top: 14px;
}

ul.mediaList-list.without-show-more-link > .mediaList-item.last-item {
    padding-bottom: 14px;
}

ul.mediaList-list > .mediaList-item {
    padding: 1rem 14px;
}

ul.mediaList-list.related > li.mediaList-item:not(.first-item) {
    margin-top: 16px;
}

.two-thirds .container.content:hover,
.two-thirds .container.content:hover a,
.two-thirds .container.content:hover .mediaList-info,
.two-thirds .container.content:hover .mediaList-info h3,
.two-thirds .container.content:hover .mediaList-info section,
.two-thirds .container.content:hover .mediaList-info div,
.two-thirds .container.content:hover .mediaList-info h4,
.two-thirds .container.content:hover .mediaList-info small {
    background: #444;
}

li.mediaList-item:hover,
li.mediaList-item:hover a,
li.mediaList-item:hover .mediaList-info,
li.mediaList-item:hover .mediaList-info h3,
li.mediaList-item:hover .mediaList-info section,
li.mediaList-item:hover .mediaList-info div,
li.mediaList-item:hover .mediaList-info h4,
li.mediaList-item:hover .mediaList-info small {
    background: #444;
}

div.mediaList-image-ranking {
    background: unset;
}

li.mediaList-link-more {
    background: unset;
}

li.mediaList-link-more > a {
    background: #444;
    color: #ddd;
}

ul.promo-widget-list,
ul.promo-widget-list > li {
    background: unset;
}

a.promo-widget-link:hover {
    background: rgba(75, 75, 75, 0.75);
    color: #ddd;
}
a.promo-widget-link {
    background: rgba(255, 255, 255, 0.75);
    color: #444;
}

/*========================================================================================*/
/*search results & user page*/
ul.tuner-box--ul li span.tuner-box--link--current {
    background: #ddd;
    color: #222;
    cursor: default;
}

a.tuner-box--link:hover {
    text-decoration: none;
    background: #444;
    color: #ddd;
}

ul.paginator--ul {
    overflow: visible;
    box-shadow: none;
}
li.paginator--li > * {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
li.paginator--li:first-of-type > * {
    border-width: 0px 1px 2px 0px;
    border-style: solid;
    border-radius: 0 0 0 2rem;
}
li.paginator--li:last-of-type > * {
    border-width: 0px 0px 2px 0px !important;
    border-style: solid !important;
    border-radius: 0 0 2rem 0;
}
li.paginator--li a.paginator--link:hover {
    background: #444;
    color: #ddd;
}
li.paginator--li span.paginator--link--current {
    position: relative;
    background-color: #ddd;
    color: #222;
}
li.paginator--li span.paginator--link--current::after {
    content: "current page";
    padding: 2px 0;
    display:none;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 85px;
    text-align: center;
    background-color: #ddd;
    border: 1px solid #444;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    color: #222;
}

li.paginator--li span.paginator--link--current:hover::after{
    display: block;
}

/*========================================================================================*/
/*stats page*/
#-v2 .side-link-nav li a:hover {
    background: #ddd;
    color: #699c39;
}

#-v2 h2,
#-v2 .statsa #cmessage {
    color: #ddd;
}

#-v2 .google-visualization-table-table .google-visualization-table-th,
#-v2 .google-visualization-table-table .google-visualization-table-th > span {
    color: #222;
}

div.plan-features > div,
#-v2 .plan-features li > strong,
.plan-features li > strong {
    color: #222;
}

#-v2 .policy-violations-blurb p {
    color: #ddd;
}

#-v2 .table-grid .link span {
    color: unset;
}

#-v2 .Switch span {
    color: unset;
}

/*========================================================================================*/
/*category page*/
h3.video-item--title {
    color: #ddd;
    background: #222;
}

article.video-item:hover,
article.video-item:hover h3.video-item--title {
    background-color: #444;
}

a.video-item--a {
    background: unset;
}

footer.video-item--footer,
footer.video-item--footer * {
    color: #ddd;
    background: unset;
}

/*========================================================================================*/
/*video player page */
.container.content {
    background: #222;
}

svg.media-icon-license,
svg.media-icon-embed {
    stroke: #ddd;
}

svg.icon-rumbles-up,
svg.icon-rumbles-down,
svg.media-icon-embed,
svg.media-icon-license,
.header-upload > svg,
svg.header-search-icon {
    border-radius: 25%;
    background: unset;
}

button.bg-green {
    background: #567d31;
    box-shadow: 0 2px 3px rgba(86, 125, 49, 0.5);
}

button.bg-green:active {
    transform: translate(-1px, 2px);
}

button.bg-green:hover {
    opacity: 1;
    background: #007d00;
    box-shadow: 0 2px 3px rgba(0, 125, 0, 0.5);
}

button.bg-green:active:hover {
    box-shadow: none;
}

button.bg-blue {
    background: #37c;
    box-shadow: 0 2px 3px rgba(51, 119, 204, 0.5);
}

button.bg-blue:active {
    box-shadow: none;
    transform: translate(1px, 2px);
}

button.bg-blue:hover {
    opacity: 1;
    background: #00c;
    box-shadow: 0 2px 3px rgba(0, 0, 204, 0.5);
}

button.bg-blue:active:hover {
    box-shadow: none;
}

a.share-link > .share-icon-reddit {
    background: #cee3f8;
}

a.share-link:hover > .share-icon-reddit > path:nth-of-type(1) {
    fill: #cee3f8;
}

a.share-link > .share-icon-reddit > path:nth-of-type(2) {
    fill: #222;
}

a.share-link:hover > .share-icon-reddit > path:nth-of-type(2) {
    background: #222;
}

a.share-link > .share-icon-reddit > path:last-of-type {
    fill: #222;
}

a.share-link > .share-icon-whatsapp {
    background: #4dc247;
    fill: #222;
}

a.share-link:hover > .share-icon-whatsapp > path {
    fill: #4dc247;
}

a.share-link > .share-icon-twitter {
    background: #55acee;
    fill: #222;
}

a.share-link:hover > .share-icon-twitter > path {
    fill: #55acee;
}

a.share-link > .share-icon-email {
    background: #d44638;
    fill: #222;
}

a.share-link:hover > .share-icon-email > path {
    fill: #d44638;
}

a.share-link:hover > svg {
    background: #444;
}

button.share-copy-url:hover {
    background: #444;
}

span.subscribe-button-label,
span.subscribe-button-count,
svg.media-icon-share {
    background: unset;
}

button.round-button.media-video-action-embed {
    color: #ddd;
    background: rgba(255, 255, 255, 0.25);
}

button.round-button.media-video-action-embed:hover {
    background: rgba(255, 255, 255, 0.75);
    color: #444;
    opacity: 1;
}

button.round-button.media-video-action-embed:hover svg {
    transition: 150ms;
}

button.round-button.media-video-action-embed:hover svg {
    stroke: #444;
}

svg.icon-rumbles-up {
    background: #050;
}

svg.icon-rumbles-down {
    background: #500;
}