/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @========@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=-=======@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@--=@@@@@--=@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @--=@@@=--=@@@@@@@@@@@@@=--==@@=--==@@@@@@@@@@@@@@@@@=@@@=--@@@@=--=@@@@@@==@@@@@@@@@===@@@@@@@@@@@==@@@@@@--=@@@@@--=@@@@@===@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @=-=====-=@@@=-==@==-=@@=--==@@=--==@@=-==@====@@=-===@@@=--@@@@@=--=@@=-====-==@@==-=====--=@@=-=====-=@@@--======--=@@=--====-=@@=--@@@=--@@=-=====@@=======-=@ @=-=@@@====@@--=======@@@--@@@@@--@@@=--=======@@=-=@@@@@=--@@@@@=--@@--=@@@@=--=@--=@@@@@--=@=--========@@--=@@@@=--=@=--@@@@@=-=@=--@@@=--@@=======@@--======== @--=@@@@=-=@@=-=@@@==@@@@--@@@@@--@@@@--=@@@==@@@=-=@@@@@=--=@===-=@@@=--=@@==-=@@=--=@@@=--=@@=-==@@===@@@--=@@@@@--=@@=-=@@@=--=@@--=@@=--@@@==@=--=@=--=@@===@ @=========@@@@=======@@@@====@@@====@@@=======@@@==@@@@@@========@@@@@@@======@@@@@@======--=@@@@======@@@@===@@@@@===@@@@======@@@@@======@@@@======@@@@======@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@===@@==-=@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=====@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* ==UserStyle== @name BetterDogeHouse @version 2.1.1 @description Tweaks for dogehouse.tv+ @preprocessor stylus -- AUTHOR STUFF -- @namespace Pukima @author Pukima (https://pukimaa.github.io) @homepageURL https://github.com/Pukimaa/BetterDogeHouse -- VARS -- @var text people-text "People Text" People @var text online-text "Online Text" online @var select Theme "Theme" ["Default (Dracula)*", "Lantern", "Light", "Nord", "SolarizedDark", "gruvboxDark", "gruvboxLight", "DarkCofee", "Comfy", "Slate"] @var checkbox leavebtn "Colored Leave Button" 0 ==/UserStyle== */ /* 2.1.1 - added new Theme: - Slate (based on GitHub's design language) - fixed weird color behaviour if you deafen yourself */ @-moz-document domain("dogehouse.tv") { :root { --people-text: \'people-text\'; --online-text: \'online-text\'; } #main > div:nth-child(1) > div.pb-5.w-full.flex.flex-col.flex-1.overflow-y-auto > h4 { visibility: hidden; } #main > div:nth-child(1) > div.pb-5.w-full.flex.flex-col.flex-1.overflow-y-auto > h4:after { content: var(--people-text); visibility: visible; display: block; } #main > div:nth-child(1) > div.pb-5.w-full.flex.flex-col.flex-1.overflow-y-auto > h6 { visibility: hidden; } #main > div:nth-child(1) > div.pb-5.w-full.flex.flex-col.flex-1.overflow-y-auto > h6:after { content: var(--online-text); visibility: visible; display: block; } .rounded-full { border-radius: 10px; } /* Inverts the color on dogehouse if you mute/unmute yourself */ #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > div > button.flex.bg-primary-800.transition.duration-200.ease-in-out.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.text-primary-100.mx-1.w-11.h-6\.5, #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > div > button.flex.bg-primary-800.transition.duration-200.ease-in-out.hover\:bg-primary-600.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.text-primary-100.mx-1.w-11.h-6\.5, #main > div:nth-child(3) > div.flex.flex-1.flex-col.overflow-y-auto > div:nth-child(1) > div > div.flex.flex-row > div > button:nth-child(1), #main > div:nth-child(3) > div.flex.flex-1.flex-col.overflow-y-auto > div:nth-child(1) > div > div.flex.flex-row > div > button:nth-child(1) > div > div > button { background: var(--color-accent); } #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > div > button.flex.bg-primary-800.transition.duration-200.ease-in-out.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.text-primary-100.mx-1.w-11.h-6\.5:hover, #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > div > button.flex.bg-primary-800.transition.duration-200.ease-in-out.hover\:bg-primary-600.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.text-primary-100.mx-1.w-11.h-6\.5:hover, #main > div:nth-child(3) > div.flex.flex-1.flex-col.overflow-y-auto > div:nth-child(1) > div > div.flex.flex-row > div > button:nth-child(1):hover { background: var(--color-accent-hover); } #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > div > button.flex.bg-primary-800.transition.duration-200.ease-in-out.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.mx-1.w-11.h-6\.5.bg-accent.hover\:bg-accent-hover.text-button { background: var(--color-primary-800); } #main > div:nth-child(3) > div.flex.flex-1.flex-col.overflow-y-auto > div:nth-child(1) > div > div.flex.flex-row > div > button.flex.bg-primary-700.transition.duration-200.ease-in-out.hover\:bg-primary-600.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.bg-accent.hover\:bg-accent-hover.text-button { background: var(--color-primary-700); } #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > div > button.flex.bg-primary-800.transition.duration-200.ease-in-out.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.mx-1.w-11.h-6\.5.bg-accent.hover\:bg-accent-hover.text-button:hover, #main > div:nth-child(3) > div.flex.flex-1.flex-col.overflow-y-auto > div:nth-child(1) > div > div.flex.flex-row > div > button.flex.bg-primary-700.transition.duration-200.ease-in-out.hover\:bg-primary-600.h-6.w-6.cursor-pointer.justify-center.items-center.rounded.bg-accent.hover\:bg-accent-hover.text-button:hover { background: var(--color-primary-600); } /* END ----- Inverts the color on dogehouse if yo, --color-button-textu mute/unmute yourself */ /* THEMES */ /* DogeHouse Logo Text alway accent color */ a.w-full > svg:nth-child(1) > path:nth-child(1), path:nth-child(2), path:nth-child(3), path:nth-child(4), path:nth-child(5), path:nth-child(6), path:nth-child(7), path:nth-child(8), path:nth-child(9) { fill: var(--color-accent); } /* Fixing weird color behauviour on some SVGs */ .mx-4 > svg:nth-child(1) > g:nth-child(1) > path:nth-child(2) { fill: var(--color-primary-300); } .rotate-45 > g:nth-child(1) > path:nth-child(1), .rotate-45 > g:nth-child(1) > path:nth-child(2), button.bg-primary-800:nth-child(1) > svg:nth-child(1) > path:nth-child(2), button.h-6:nth-child(2) > svg:nth-child(1) > path:nth-child(3), button.bg-primary-800:nth-child(1) > svg:nth-child(1) > path:nth-child(3) { fill: var(--color-button-text); } /* END */ /* Actual Theme coloring */ if Theme is Light { :root { --color-primary-900: #ffffff; --color-primary-800: #f6f6f6; --color-primary-700: #ededed; --color-primary-600: #e8e8e8; --color-primary-300: #414141; --color-primary-200: #202020; --color-primary-100: #202020; --color-button-text: #202020; } } if Theme is Lantern { :root { --color-primary-900: #1b110e; --color-primary-800: #261b17; --color-primary-700: #291812; --color-primary-600: #1b110e; --color-primary-300: #f99666; --color-accent: #e35b15; --color-accent-hover: #e86420; } } if Theme is Nord { :root { --color-primary-900: #2e3440; --color-primary-800: #3b4252; --color-primary-700: #434c5e; --color-primary-600: #4c566a; --color-primary-300: #81a1c1; --color-accent: #5e81ac; --color-accent-hover: #81a1c1; } } if Theme is SolarizedDark { :root { --color-primary-900: #002B36; --color-primary-800: #073642; --color-primary-700: #586E75; --color-primary-600: #657B83; --color-primary-300: #9eb2b5; --color-accent: #729999; --color-accent-hover: #93A1A1; } } if Theme is SolarizedLight { :root { --color-primary-900: #EFE7DC; --color-primary-800: #fdf8e2; --color-primary-700: #c1c1c1; --color-primary-600: #839496; --color-primary-300: #3b494e; --color-primary-100: #495e64; --color-primary-200: #2c373b; --color-button-text: #2d383c; --color-accent: #073642; --color-accent-hover: #002B36; } button.outline-none:nth-child(1) { background: var(--color-primary-600); } } if Theme is gruvboxDark { :root { --color-primary-900: #1d2021; --color-primary-800: #282828; --color-primary-700: #3c3836; --color-primary-600: #504945; --color-primary-300: #95867a; --color-primary-200: #9e8e80; --color-primary-100: #b9a693; --color-accent: #d65d0e; --color-accent-hover: #fe9019; } } if Theme is gruvboxLight { :root { --color-primary-900: #f9f5d7; --color-primary-800: #fbf1c7; --color-primary-700: #ebdbb2; --color-primary-600: #d5c4a1; --color-primary-300: #7d725f; --color-primary-200: #5f564b; --color-primary-100: #2c2c2c; --color-accent: #d65d0e; --color-accent-hover: #af3a03; --color-button-text: #2c2c2c; } } if Theme is DarkCofee { :root { --color-primary-900: #221f1b; --color-primary-800: #36312a; --color-primary-700: #3a352e; --color-primary-600: #2b2728; --color-primary-300: #979390; --color-primary-200: #b5b3b1; --color-primary-100: #ceccca; --color-accent: #e18114; --color-accent-hover: #f58c14; } } if Theme is Comfy { :root { --color-primary-900: #101320; --color-primary-800: #1e2233; --color-primary-700: #191f2e; --color-primary-600: #23283d; --color-primary-300: #8c9195; --color-primary-200: #b3b8be; --color-primary-100: #c1c7cc; --color-accent: #4E5D94; --color-accent-hover: #7289DA; } } if Theme is Slate { :root { --color-primary-900: #24292E; --color-primary-800: #2A3036; --color-primary-700: #1D2125; --color-primary-600: #2F363D; --color-primary-300: #8D9697; --color-primary-200: #d5e4e6; --color-primary-100: #EFF5F5; --color-accent: #2E85E9; --color-accent-hover: #0366D6; } .rounded, .rounded-lg, .rounded-md, .rounded-8, .rounded-t-8, .rounded-b-8, .rc-slider-rail, .rc-slider-track, flex flex-col mt-3 overflow-y-auto scrollbar-thin scrollbar-thumb-primary-700 overflow-x-hidden { border-radius: 0px; } .rounded-full { border-radius: 3px; } .box-content { bottom: 0.0001rem !important; } } /* Leave Button colored */ if leavebtn { #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > button, #main > div:nth-child(3) > div.flex.flex-1.flex-col.overflow-y-auto > div:nth-child(1) > div > div.flex.flex-row > button { background: var(--color-accent); } #main > div.flex.flex-col.flex-1.w-full > div.sticky.bottom-0.pb-7.bg-primary-900 > div > div > button:hover, #main > div:nth-child(3) > div.flex.flex-1.flex-col.overflow-y-auto > div:nth-child(1) > div > div.flex.flex-row > button:hover { background: var(--color-accent-hover); } } }