CollabVM Improver - Ceiridge's Userscript

userscript.js

// ==UserScript==
// @name         CollabVM Autoscroll and CSS
// @namespace    Ceiridge
// @version      1.0
// @description  AutoScroll for CollabVM chat and CSS
// @author       Ceiridge
// @match        *://computernewb.com/collab-vm*
// @grant        none
// @run-at       document-end
// ==/UserScript==

// Warning! This code is not well organized and prioritizes fast coding above nice coding!

var cboxx = document.getElementById('chat-panel');

if(typeof cboxx !== "undefined") {
	cboxx.addEventListener("DOMNodeInserted", () => {
		cboxx.scrollTop = cboxx.scrollHeight;
	});
}

var cssBlock = `
/* Make the entire site more compact and comfortable */
div#display-outer {
	width: unset !important;
	display: block !important;
	float: left;
	position: relative;
	margin-top: unset !important;
}

.ui.grid {
	display: grid !important;
}

/* This is stupid, but it works. too bad! */
#vm-view>div.ui.grid>div.column.column.column.column.column.column {
	width: 100% !important;
}

.twelve.wide.column>div:first-of-type, .cvm1 .col-md-8>div:first-of-type {
	min-height: 500px !important;
}

#display-outer>h3:last-of-type {
	height: 0px !important;
	margin-top: 0px;
	margin-bottom: 25px;
}

#vm-view>div:first-of-type {
	display: none;
}

.message-pane li>div {
    overflow-wrap: anywhere !important;
}

/* CVM 1 fix */
.cvm1 .col-md-4, .cvm1 .col-md-8 {
	width: 30% !important;
}

/* Prevent resolution changes */
#display canvas, #display > div {
	max-width: 1024px;
	max-height: 768px;
}

/* Guac Keyboard Modifications */
#kbd-container {
	display: inline-block;
}

#kbd-outer {
	transform: translate(-115%, 200%);
	opacity: 0.75;
	position: absolute;
    z-index: 9001;
}

.cvm1 #kbd-outer {
    transform: translate(-1020px, 200%);
}

.cvm1 .row {
    display: unset !important;
}

.guac-keyboard .guac-keyboard-key-container {
	width: 50px !important;
	height: 35px !important;
	font-size: 40px !important;
	line-height: 20px !important;
	color: red;
}

.cvm1 .guac-keyboard .guac-keyboard-group.guac-keyboard-movement {
    flex: 0.25 auto !important;
}

/* Dark Mode */
body,
.ui.menu .item,
.ui.header,
.ui.segment,
.ui.input>input,
.ui.button,
.ui.label,
.cvm1 .navbar-default .navbar-nav>li>a, .cvm1 .navbar-default .navbar-brand, .cvm1 .btn-default, .cvm1 .input-group-addon, .cvm1 .form-control {
	color: white !important;
}

.cvm1 #online-users .list-group-item {
    color: red;
}

.cvm1 .btn-default {
    text-shadow: 0 1px 0 #000;
}

.guest.username {
	color: #ddd !important;
}

body {
	background: #161616 !important;
}

.ui.menu,
.ui.top.attached.header,
.message-pane-wrapper,
.ui.input>input,
.cvm1 .navbar-default, .cvm1 li.list-group-item.disabled, .cvm1 .btn-default:hover, .cvm1 .form-control {
	background: #323232 !important;
}

.ui.attached.segment,
.message-pane li:hover,
.ui.button,
.ui.label, .cvm1 .input-group-addon, .cvm1 .btn-default {
	background: #404040 !important;
}

/* CVM 1, this hopefully is overridden by has-turn, etc. */
.cvm1 *[class="list-group-item"], .cvm1 *[class="list-group-item current-user"] {
    background-color: #404040;
}
`;

var cssElement = document.createElement("style");
cssElement.innerHTML = cssBlock;
setTimeout(() => document.body.appendChild(cssElement), 1000);