EdFrees

Rumble.com Dark Mode 11-11-2021

Oct 24th, 2021 (edited)
642
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. currently working on:
  3. -embed button on video page
  4. -sing in/up page
  5. -Dark Mode toggle button
  6. */
  7. /*last update: 11-11-2021*/
  8. * {transition: 200ms;}
  9. *:not(.contained) {
  10.     color: #ddd;
  11.     background: #000;
  12.     background-color: #222;
  13.     background-image: unset;
  14.     border-color: #aaa !important;
  15. }
  16.  
  17. /*========================================================================================*/
  18. /* headers */
  19. header.header {
  20.     color: #ddd;
  21.     background: #222;
  22. }
  23.  
  24. svg.main-menu-close,
  25. svg.main-menu-open {
  26.     stroke: #ddd;
  27. }
  28.  
  29. div.hover-menu {
  30.     padding: 0.2rem 0;
  31. }
  32.  
  33. a.main-menu-item {
  34.     margin: 0;
  35.     padding: 0.4rem 1rem 0.4rem;
  36.     line-height: 1.8rem;
  37. }
  38.  
  39. a.main-menu-item:hover {
  40.     background: #444;
  41.     color: rgba(255, 255, 255, 0.75);
  42. }
  43.  
  44. a.main-menu-item svg.main-menu-icon {
  45.     transition: 100ms;
  46.     stroke: rgba(255, 255, 255, 0.75);
  47. }
  48.  
  49. a.main-menu-item:hover svg.main-menu-icon {
  50.     background: unset;
  51. }
  52.  
  53. .hover-menu > a:hover {
  54.     text-decoration: none;
  55. }
  56.  
  57. .hover-menu > a > .main-menu-heading {
  58.     margin: 2rem 0;
  59.     padding: 5px 1rem;
  60.     line-height: 1.8rem;
  61.     border-bottom: 1px solid;
  62.     border-bottom-color: transparent !important;
  63. }
  64.  
  65. .hover-menu > a:hover > .main-menu-heading {
  66.     background: #444;
  67.     color: rgba(255, 255, 255, 0.5);
  68.     text-decoration: none;
  69.     border-top-color: transparent !important;
  70.     border-bottom-color: #aaa !important;
  71. }
  72.  
  73. svg.main-menu-icon {
  74.     vertical-align: bottom;
  75.     margin: 0 0.5rem 0 0;
  76. }
  77.  
  78. a.header-logo {
  79.     border-radius: 2rem;
  80.     overflow: hidden;
  81. }
  82.  
  83. a.header-logo > img {
  84.     padding: 5px;
  85.     background: #ddd;
  86. }
  87.  
  88. svg.main-menu-icon {
  89.     stroke: #888;
  90. }
  91.  
  92. select.header-search-select > option {
  93.     color: #ddd;
  94. }
  95.  
  96. form.header-search {
  97.     border: 1px solid #ddd;
  98.     padding: 0 20px;
  99. }
  100.  
  101. /*keep these separate*/
  102. input:-moz-autofill,
  103. input:-moz-autofill:hover,
  104. input:-moz-autofill:focus {
  105.     -moz-box-shadow: 0 0 0px 1000px #222 inset;
  106.     -moz-text-fill-color: #ddd;
  107. }
  108. input:-webkit-autofill,
  109. input:-webkit-autofill:hover,
  110. input:-webkit-autofill:focus {
  111.     -webkit-box-shadow: 0 0 0px 1000px #222 inset;
  112.     -webkit-text-fill-color: #ddd;
  113. }
  114. /*===================*/
  115. svg.header-search-icon {
  116.     stroke: #888;
  117. }
  118.  
  119. button.header-upload {
  120.     background: #74a642;
  121. }
  122.  
  123. span.header-user-name,
  124. span.header-user-stat {
  125.     color: #ddd;
  126. }
  127.  
  128. /*========================================================================================*/
  129. /* home page */
  130. a.tab-heading.tab-active {
  131.     color: #222;
  132.     background: #ddd;
  133. }
  134.  
  135. ul.mediaList-list {
  136.     padding: 0;
  137. }
  138.  
  139. ul.mediaList-list.container.content.with-show-more-link {
  140.     padding-bottom: 14px;
  141. }
  142.  
  143. ul.mediaList-list > .mediaList-item.first-item {
  144.     padding-top: 14px;
  145. }
  146.  
  147. ul.mediaList-list.without-show-more-link > .mediaList-item.last-item {
  148.     padding-bottom: 14px;
  149. }
  150.  
  151. ul.mediaList-list > .mediaList-item {
  152.     padding: 1rem 14px;
  153. }
  154.  
  155. ul.mediaList-list.related > li.mediaList-item:not(.first-item) {
  156.     margin-top: 16px;
  157. }
  158.  
  159. .two-thirds .container.content:hover,
  160. .two-thirds .container.content:hover a,
  161. .two-thirds .container.content:hover .mediaList-info,
  162. .two-thirds .container.content:hover .mediaList-info h3,
  163. .two-thirds .container.content:hover .mediaList-info section,
  164. .two-thirds .container.content:hover .mediaList-info div,
  165. .two-thirds .container.content:hover .mediaList-info h4,
  166. .two-thirds .container.content:hover .mediaList-info small {
  167.     background: #444;
  168. }
  169.  
  170. li.mediaList-item:hover,
  171. li.mediaList-item:hover a,
  172. li.mediaList-item:hover .mediaList-info,
  173. li.mediaList-item:hover .mediaList-info h3,
  174. li.mediaList-item:hover .mediaList-info section,
  175. li.mediaList-item:hover .mediaList-info div,
  176. li.mediaList-item:hover .mediaList-info h4,
  177. li.mediaList-item:hover .mediaList-info small {
  178.     background: #444;
  179. }
  180.  
  181. div.mediaList-image-ranking {
  182.     background: unset;
  183. }
  184.  
  185. li.mediaList-link-more {
  186.     background: unset;
  187. }
  188.  
  189. li.mediaList-link-more > a {
  190.     background: #444;
  191.     color: #ddd;
  192. }
  193.  
  194. ul.promo-widget-list,
  195. ul.promo-widget-list > li {
  196.     background: unset;
  197. }
  198.  
  199. a.promo-widget-link:hover {
  200.     background: rgba(75, 75, 75, 0.75);
  201.     color: #ddd;
  202. }
  203. a.promo-widget-link {
  204.     background: rgba(255, 255, 255, 0.75);
  205.     color: #444;
  206. }
  207.  
  208. /*========================================================================================*/
  209. /*search results & user page*/
  210. ul.tuner-box--ul li span.tuner-box--link--current {
  211.     background: #ddd;
  212.     color: #222;
  213.     cursor: default;
  214. }
  215.  
  216. a.tuner-box--link:hover {
  217.     text-decoration: none;
  218.     background: #444;
  219.     color: #ddd;
  220. }
  221.  
  222. ul.paginator--ul {
  223.     overflow: visible;
  224.     box-shadow: none;
  225. }
  226. li.paginator--li > * {
  227.     border-bottom-width: 2px;
  228.     border-bottom-style: solid;
  229. }
  230. li.paginator--li:first-of-type > * {
  231.     border-width: 0px 1px 2px 0px;
  232.     border-style: solid;
  233.     border-radius: 0 0 0 2rem;
  234. }
  235. li.paginator--li:last-of-type > * {
  236.     border-width: 0px 0px 2px 0px !important;
  237.     border-style: solid !important;
  238.     border-radius: 0 0 2rem 0;
  239. }
  240. li.paginator--li a.paginator--link:hover {
  241.     background: #444;
  242.     color: #ddd;
  243. }
  244. li.paginator--li span.paginator--link--current {
  245.     position: relative;
  246.     background-color: #ddd;
  247.     color: #222;
  248. }
  249. li.paginator--li span.paginator--link--current::after {
  250.     content: "current page";
  251.     padding: 2px 0;
  252.     display:none;
  253.     position: absolute;
  254.     top: -20px;
  255.     right: -20px;
  256.     width: 85px;
  257.     text-align: center;
  258.     background-color: #ddd;
  259.     border: 1px solid #444;
  260.     -moz-border-radius: 2px;
  261.     -webkit-border-radius: 2px;
  262.     -ms-border-radius: 2px;
  263.     border-radius: 2px;
  264.     color: #222;
  265. }
  266.  
  267. li.paginator--li span.paginator--link--current:hover::after{
  268.     display: block;
  269. }
  270.  
  271. /*========================================================================================*/
  272. /*stats page*/
  273. #-v2 .side-link-nav li a:hover {
  274.     background: #ddd;
  275.     color: #699c39;
  276. }
  277.  
  278. #-v2 h2,
  279. #-v2 .statsa #cmessage {
  280.     color: #ddd;
  281. }
  282.  
  283. #-v2 .google-visualization-table-table .google-visualization-table-th,
  284. #-v2 .google-visualization-table-table .google-visualization-table-th > span {
  285.     color: #222;
  286. }
  287.  
  288. div.plan-features > div,
  289. #-v2 .plan-features li > strong,
  290. .plan-features li > strong {
  291.     color: #222;
  292. }
  293.  
  294. #-v2 .policy-violations-blurb p {
  295.     color: #ddd;
  296. }
  297.  
  298. #-v2 .table-grid .link span {
  299.     color: unset;
  300. }
  301.  
  302. #-v2 .Switch span {
  303.     color: unset;
  304. }
  305.  
  306. /*========================================================================================*/
  307. /*category page*/
  308. h3.video-item--title {
  309.     color: #ddd;
  310.     background: #222;
  311. }
  312.  
  313. article.video-item:hover,
  314. article.video-item:hover h3.video-item--title {
  315.     background-color: #444;
  316. }
  317.  
  318. a.video-item--a {
  319.     background: unset;
  320. }
  321.  
  322. footer.video-item--footer,
  323. footer.video-item--footer * {
  324.     color: #ddd;
  325.     background: unset;
  326. }
  327.  
  328. /*========================================================================================*/
  329. /*video player page */
  330. .container.content {
  331.     background: #222;
  332. }
  333.  
  334. svg.media-icon-license,
  335. svg.media-icon-embed {
  336.     stroke: #ddd;
  337. }
  338.  
  339. svg.icon-rumbles-up,
  340. svg.icon-rumbles-down,
  341. svg.media-icon-embed,
  342. svg.media-icon-license,
  343. .header-upload > svg,
  344. svg.header-search-icon {
  345.     border-radius: 25%;
  346.     background: unset;
  347. }
  348.  
  349. button.bg-green {
  350.     background: #567d31;
  351.     box-shadow: 0 2px 3px rgba(86, 125, 49, 0.5);
  352. }
  353.  
  354. button.bg-green:active {
  355.     transform: translate(-1px, 2px);
  356. }
  357.  
  358. button.bg-green:hover {
  359.     opacity: 1;
  360.     background: #007d00;
  361.     box-shadow: 0 2px 3px rgba(0, 125, 0, 0.5);
  362. }
  363.  
  364. button.bg-green:active:hover {
  365.     box-shadow: none;
  366. }
  367.  
  368. button.bg-blue {
  369.     background: #37c;
  370.     box-shadow: 0 2px 3px rgba(51, 119, 204, 0.5);
  371. }
  372.  
  373. button.bg-blue:active {
  374.     box-shadow: none;
  375.     transform: translate(1px, 2px);
  376. }
  377.  
  378. button.bg-blue:hover {
  379.     opacity: 1;
  380.     background: #00c;
  381.     box-shadow: 0 2px 3px rgba(0, 0, 204, 0.5);
  382. }
  383.  
  384. button.bg-blue:active:hover {
  385.     box-shadow: none;
  386. }
  387.  
  388. a.share-link > .share-icon-reddit {
  389.     background: #cee3f8;
  390. }
  391.  
  392. a.share-link:hover > .share-icon-reddit > path:nth-of-type(1) {
  393.     fill: #cee3f8;
  394. }
  395.  
  396. a.share-link > .share-icon-reddit > path:nth-of-type(2) {
  397.     fill: #222;
  398. }
  399.  
  400. a.share-link:hover > .share-icon-reddit > path:nth-of-type(2) {
  401.     background: #222;
  402. }
  403.  
  404. a.share-link > .share-icon-reddit > path:last-of-type {
  405.     fill: #222;
  406. }
  407.  
  408. a.share-link > .share-icon-whatsapp {
  409.     background: #4dc247;
  410.     fill: #222;
  411. }
  412.  
  413. a.share-link:hover > .share-icon-whatsapp > path {
  414.     fill: #4dc247;
  415. }
  416.  
  417. a.share-link > .share-icon-twitter {
  418.     background: #55acee;
  419.     fill: #222;
  420. }
  421.  
  422. a.share-link:hover > .share-icon-twitter > path {
  423.     fill: #55acee;
  424. }
  425.  
  426. a.share-link > .share-icon-email {
  427.     background: #d44638;
  428.     fill: #222;
  429. }
  430.  
  431. a.share-link:hover > .share-icon-email > path {
  432.     fill: #d44638;
  433. }
  434.  
  435. a.share-link:hover > svg {
  436.     background: #444;
  437. }
  438.  
  439. button.share-copy-url:hover {
  440.     background: #444;
  441. }
  442.  
  443. span.subscribe-button-label,
  444. span.subscribe-button-count,
  445. svg.media-icon-share {
  446.     background: unset;
  447. }
  448.  
  449. button.round-button.media-video-action-embed {
  450.     color: #ddd;
  451.     background: rgba(255, 255, 255, 0.25);
  452. }
  453.  
  454. button.round-button.media-video-action-embed:hover {
  455.     background: rgba(255, 255, 255, 0.75);
  456.     color: #444;
  457.     opacity: 1;
  458. }
  459.  
  460. button.round-button.media-video-action-embed:hover svg {
  461.     transition: 150ms;
  462. }
  463.  
  464. button.round-button.media-video-action-embed:hover svg {
  465.     stroke: #444;
  466. }
  467.  
  468. svg.icon-rumbles-up {
  469.     background: #050;
  470. }
  471.  
  472. svg.icon-rumbles-down {
  473.     background: #500;
  474. }
RAW Paste Data