Rumble Darkly by owb

/* ==UserStyle==
@name         Rumble Darkly
@version      20220314.05.06
@namespace    userstyles.world/user/owb
@description  Dark theme for Rumble with some nice extra features:


* Subscribe/Unsubscribe distinctly coloured to be more eye-catching when you can subscribe
* (+|-) Rumble voting buttons reshaped and animated with pleasing filling action
* Spotlight on hovered thumbnails to improve focus
* Tabs on the home page improved and given subtle animation
* Rumble logo used as the play button
* Light from header bar gently pulses in a soothing way

@author       owb
@license      CC-0
==/UserStyle== */

@-moz-document domain("rumble.com") {
/* TODO

PAGES
Channels subscriptions

My Feed
License Videos
Editor Picks
Trending
Search Results

Channel Page

Legal Stuff: terms, privacy policy, copyright
!Developers EXCLUDE

*/


:root{
    --bgcol0:   #161616;
    --color0:   #eaeaea;
    --bgcol1:   #1a1a1a;
    --color1:   #eaeaea;
    --rumble-green:   #74a441;
    
    --header-bg:  var(--bgcol0);
    --input-bgcol:   #fff;
    --input-color:   #1c1c1c;
    --button-border:    var(--rumble-green);
    --button-bg:    none;
    
    --rumble-logo: "m 7.5,0 c -0.69548,-0.008 -1.29958,0.1276 -1.81666,0.41494 -0.40852,0.20428 -0.7491,0.5455 -1.02138,0.88572 -0.68092,-0.068 -1.36238,0.0688 -1.9071,0.40962 -1.9066,1.02138 -2.58658,3.9477 -2.65452,9.25888 0,5.10686 0.74952,8.03646 2.58802,9.1259 0.47662,0.27228 1.02032,0.40696 1.63314,0.40696 a 3.4045898,3.4045898 0 0 0 1.29534,1.29534 c 1.90658,1.02138 4.76534,0.1362 9.12324,-2.38322 4.35788,-2.5194 6.60436,-4.6318 6.60436,-6.74268 0.068,-0.54472 -0.0682,-1.02188 -0.34044,-1.56664 0.20434,-0.47662 0.34044,-1.02088 0.34044,-1.4975 0,-2.17892 -2.17838,-4.22172 -6.60436,-6.80918 -3.0833,-1.81062 -5.46272,-2.77684 -7.24008,-2.79814 z m 0.0852,3.76898 c 3.6977,0.0414 10.08344,4.09082 10.08344,7.13368 -0.0682,2.65554 -8.51256,8.91898 -11.64476,7.0805 -3.06412,-1.7023 -3.06412,-12.18738 0,-13.88968 0.42132,-0.2298 0.95624,-0.33126 1.56132,-0.3245 z m 0.99212,3.63334 c -0.3037,-0.004 -0.57134,0.0474 -0.782,0.1622 -1.5661,0.8852 -1.5661,6.13038 0,6.94748 1.56612,0.8852 5.8543,-2.24758 5.8543,-3.6094 0,-1.4629 -3.2164,-3.48084 -5.0723,-3.50034 z";
}

::selection {
    color:#000;
    background-color: var(--rumble-green);
}

/* pop up dialogs */
.overlay .overlay-heading {
    background: var(--rumble-green);
    padding: .3rem;
    font-size: 1.2rem;
}
.overlay {
    background: #222;
}

html,
body {
    background-color: var(--bgcol0); /* default if can't do gradients */
    
    --bgc2: #131313;
    /*ZigZag background by eCSSpert*/
    background:
    linear-gradient(135deg, var(--bgc2) 25%, transparent 25%) -25px 0,
    linear-gradient(225deg, var(--bgc2) 25%, transparent 25%) -25px 0,
    linear-gradient(315deg, var(--bgc2) 25%, transparent 25%),
    linear-gradient(45deg, var(--bgc2) 25%, transparent 25%);
    background-size: 50px 50px;
    background-color: #111;
    
    color: var(--color0);
}

:hover {
    opacity: 1;
}

/* Allow window to be filled */
.constrained {
    max-width: 88%;
}

input,
select {
    background: var(--input-bgcol);
    color: var(--input-color);
    border-color: var(--color0);
    border-radius: 0;
}


/* HEADER */

header {
    background-color: var(--header-bg) !important;
    border-bottom: none;
    box-shadow: 0 0 8px 0 var(--rumble-green);
    
    animation-name: light;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

button.header-upload { background: none;}

/* hide user rumbles (up-cummies) stats */
span.header-user-stat {
    height: 0;
    visibility: hidden;
}

/* menu button (three lines) */
.main-menu-open,
.main-menu-close {
    stroke: white;
}

/* header light flickering animation */
@keyframes light {
    from {box-shadow: 0 0 7px 0 var(--rumble-green);}
    to	 {box-shadow: 0 0 21px 0 #9f6;}
}


.header-logo {
	content:url("https://help.rumble.com/logo.png");
}

.header-search {
    border-radius: 1rem 3rem 1rem 3rem;
}
.header-search-select, .header-search-field{
    background: none;
    color: #1c1c1c;
}
.header-user-name{color: var(--rumble-green);}
/*HEADER*/
/*MAIN-PAGE*/
.module-title{
    color: var(--rumble-green);
}

/* Tabs */
.tabs {z-index: 0;}
.tab-heading {
    background: #181818;
    color: #444;
    border-radius: .5rem .5rem 0 0;
    z-index: 0;
    transition: .15s;
}
a.tab-heading.module-title.tab-active {
    background: var(--bgcol1);
    color: var(--rumble-green);
    border: 0;
    box-shadow: 5px 5px 5px #111;
    height: 90%;
    z-index: 0;
    transition: .15s;
}

/* Only underline if click navigates to new page */
a.tab-heading.module-title {text-decoration: none;}
a.tab-heading.module-title.tab-active:hover {text-decoration: underline;}

.container,
.video-item {
    background: var(--bgcol1) ;
    background-image: repeating-linear-gradient(-45deg, #222, #242424 5px, #242424 4px, #222 3px);
    background-size: 5px 6px;
    border-bottom: 1px solid #1e1e1e;
    border-right: 1px solid #1e1e1e;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-radius: 1px;
    box-shadow: 7px 7px 8px #0009;
    z-index: 1;
}
.mediaList-link-more a,.promo-widget-link{
    background: var(--rumble-green);
    border-color: var(--rumble-green);
    border-radius: 6px;
    color: var(--input-color);
    box-shadow: 7px 7px 8px #111;
}

.mediaList-by-heading,.forum-post-meta,.promo-widget-link:hover,small{
    color: var(--color0);
    text-decoration: none;
}
/*MAIN-PAGE*/
/*ARTICLE-VIDEO*/

/* Rumbles vote count */
.rumbles-vote,.comment-count{
    color: var(--rumble-green);
}

.rumbles-vote-up, .rumbles-vote-up:hover {
    color: white;
    border-radius: 1rem 0 0 3rem;
    opacity: 1;
    
    background: linear-gradient(to bottom, #0000 50%, var(--rumble-green) 50%) top;
    background-size: 100% 200%;
	background-position: top;
    transition: ease-in .2s
}
.rumbles-vote-up.active, .rumbles-vote-up.active:hover {
    background-color: var(--rumble-green); /* default */
    opacity: 1;
    
    background: linear-gradient(to top, var(--rumble-green) 50%, #0000 50%) bottom;
    background-size: 100% 200%;
    background-position: bottom;
    transition: ease-out .2s;
}

.rumbles-vote-down, .rumbles-vote-down:hover {
	color: white;
    border-radius: 0 3rem 1rem 0;
    opacity: 1;
    
    background: linear-gradient(to top, #0000 50%, #d44 50%) bottom;
    background-size: 100% 200%;
    background-position: bottom;
    transition: ease-in .2s;
}
.rumbles-vote-down.active, .rumbles-vote-down.active:hover {
    opacity: 1;
    
    background: linear-gradient(to bottom, #d44 50%, #0000 50%) top;
    background-size: 100% 200%;
    background-position: top;
    transition: ease-out .2s;
}
/* END Rumbles Vote */

.media-video-action{
    background: none;
    border: 1px solid var(--rumble-green);
}
svg.user-image--icon{
    stroke: var(--rumble-green);
}

.media-icon-license, .media-icon-embed {
    stroke: var(--color0);
}

svg.user-image--icon{
    background: none;
    border-color: var(--rumble-green);
}

i.user-image--letter { background: var(--rumble-green);}

/* Subscribe button highlighted while unsubbed - owb */
.round-button.media-subscribe[data-action="subscribe"]{
    background: var(--rumble-green);
    border-color: var(--button-border);
    color: black;
    max-width: 12rem;
    transition: ease-in .1s;
}
/* subscriber count on button */
.round-button.media-subscribe[data-action="subscribe"] > span.subscribe-button-count {
    color: var(--color0);
}

.round-button.media-subscribe[data-action="unsubscribe"] {
    max-width: 14rem;
    transition: ease-in .1s;
    overflow: hidden;
}


.round-button{
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 1rem 2rem 1rem 2rem;
    color: var(--rumble-green);
}

.round-button:hover{
    opacity: 1;
}

button.round-button.locals-button {
    border: 1px solid #e83646;
    background: #e83646;
    color: var(--color0);
}


/* VIDEO */
h1.h1 {
    margin: 0px 0 6px;
    font-size: 16pt;
    font-weight: bold;
    color: var(--rumble-green);
}

div.media-under-title {
    margin: 0 0 6px;
}

video {
    border-radius: 2px;
}

div.streamed-on {
    margin: 12px 0;
}

div.video-footer-buttons {
    margin: 12px 0 12px;
}

div.media-description {
    padding: 1px 20px;
}

p.media-description a {
    color: var(--rumble-green);
}

/* !!! FIX ME !!!
/* COMMENTS*/ 
.comments-create-textarea,
textarea#chat-message-text-input {
    margin-left: 4rem;
    max-width: 94%;
    border-radius: 1rem 3rem 1rem 3rem;
    color: var(--input-color);
}

.comments.comments-1 {
    padding: 1rem;
    margin: 0;
}
.comments.comments-2{
    padding: 2rem 0 0 1rem;
    padding-right: 0rem;
    margin-right: 0rem;
    margin-left: 4rem;
    border-left: 10px;
}

.comment-item.comment-item-first {
    margin: 0;
    padding-left: 0rem;
    padding-top: 0rem;
}

.comments-author-image {
    margin-left: 0;
}

div.comments-meta {
    margin: .25rem 0 1.5rem 4rem;
}

.comment-actions,
.comments-action-reply,
.comments-action-delete,
.comments-action-restore {
    float:left;
    padding-top: 0.2rem;
    padding-right: .5rem;
    margin: 0;
    text-align: left;
    font-weight:bold;
}

p.comment-text {
    padding-bottom: .5rem;
}

/* play button */
svg.RumbleElm.RumbleSVG-bplay{
	width: 43px !important;
    height: 45px !important;
}

.bigPlayUIInner {
    background: var(--rumble-green) !important;
    border-radius: 18px !important;
}

svg.RumbleElm.RumbleSVG-bplay path {
    fill: #fff;
    stroke-linejoin: round;
    stroke-width: 0px;
    
    d: path(var(--rumble-logo));
}

div.bigPlayUI:hover div.bigPlayUIInner  {
    background: #fff !important;
    transition: 0.3s;
}
div.bigPlayUI:hover svg.RumbleElm.RumbleSVG-bplay path {
    fill: var(--rumble-green);
    transition: 0.3s;
}

/*HELP*/...