Watch2Gether better style

watch2gether.css

/*
* Watch2Gether by default is not dark enough, not flat at all and does not use the screen as it should do
* So I decided to make a style to make it flat, dark, use the full potential of the screen and look a bit
* more like a webapp.
* If you want to use it you'll need something like Stylus, to apply CSS on websites
*/


/*
Use the entire screen
*/

/* Make the video take full with */
.w2g-player-search {
    max-width: 100%;
}
/* Don't restrain video height */
.w2g-video-container {
    max-height: 100%;
}

/* Remove the extra borders at the left and right of the screen */
.w2g-main-lower,
.w2g-player-search,
.w2g-main-right.w2g-search-hide {
    padding: 0;
    margin: 0;
}

/*
It's night time!
*/

* {
    --dark-background: #1c1c1c;
    --dark-background-alt: #2f2f2f;
    --dark-foreground: #8e8e8e;
}

.w2g-menu-tab.w2g-chat.w2g-messages.w2g-panel-bottom,
.w2g-main-right,
.w2g-color-wrapper,
.w2g-topbar,
.ui.selection.dropdown,
.w2g-userbar,
.w2g-main-container {
    background: var(--dark-background) !important;
    color: var(--dark-foreground) !important;
}


.w2g-active-icon,
.ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"],
.ui.button:hover, .ui.button,
.w2g-chat-bubble-container,
.emoji-button,
.w2g-panel-menu {
    background-color: var(--dark-background-alt) !important;
    color: var(--dark-foreground) !important;
}