Authorowb
LicenseCC-0
Categoryrumble, dark
Created
Updated
Size13 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Dark theme for Rumble with some nice extra features:
[2022-01-02] New background, lots of other tweaks and tidying things up.
/* ==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*/...