cvm_dark.user.css

/* ==UserStyle==
@name         CollabVM Dark
@namespace    mv-cvm-dark
@version      1.0.3
@license      GPL-3.0
==/UserStyle== */
@-moz-document regexp("^https?://([a-z0-9]+[.])*(computernewb\\.com|socket\\.computer|flyonthewall\\.buzz)/(collab-vm|truth)/.*") {
@media only screen and (max-width: 867px) {
    nav, .col-md-4 > .panel > .list-group > .list-group-item.disabled {display: none;} 
    #online-users {height: auto !important; display: flex; flex-wrap: wrap; overflow: hidden !important;}
    #online-users > .list-group-item {overflow: hidden; width: 20%;}
}
    
    .modal-body{
    padding-top:3px;
    padding-left:8px;
    padding-right:6px;
    padding-bottom:7px;
}
.modal-footer{
    padding-top:8px;
    padding-right:6px;
    padding-bottom:8px;
    background: #2b2b2b !important;
}
    
    .list-group-item {padding: 5px 3px 5px 3px;}
    #online-users >li:hover {background-color: #4d4d4d !important;}
    .col-md-8 > div > ul {padding: 0;}
    
#username-modal > div > div > div:nth-child(2):after{
    content:"Usernames can contain only numbers, letters, spaces, dashes, underscores, and dots, and it must be between 3 and 20 characters.";
}
    
.fade,.in{
    animation:none!important;
}
.modal-header > button > span {background-color: #2b2b2b !important; color: white;}
.modal-header{
    background-color: #2b2b2b !important;
    border: none;
    padding:8px;
}
.modal-backdrop{
display:none!important;
}
    .alert-info {padding-top: 6px;padding-bottom: 6px;}
    .input-group > #chat-user {
    background-color: rgb(43, 43, 43);
    border: none;
    color: black;
    padding-left:5px;
    padding-right:0px;
    font-size:13.8px;
        font-weight: bold;
    }

    #chat-user:after {
    color: #777;
    content: "▸";
    }
    #chat-input {padding-left:4.5px;}
    
    :root { color-scheme: dark;}   
    
    div#display > div > div > div > canvas > div {display: none !important;}
    /* it's messy but it works so */
    #display-outer,.navbar,.container-fluid, #vm-view,.panel, .col-md-8 > div {
        margin-top: 0 !important; margin-bottom:0 !important; padding-bottom: 0;}
    .col-md-3 {margin-top: 10px;}
    .col-md-4, .col-md-8 {
        padding-right: 0px !important; padding-left: 0 !important; overflow: hidden !important;}
    div#display-outer {margin:auto; width: auto; line-height: 0 !important;}
    .page-header, div#vm-view > br, div#kbd-outer > br, #dw-ad {display: none !important;}
    #display-outer > h3 {display:contents !important;}
    #online-users {max-height: 251px !important; height: 251px;}
    .btn-default { margin-right: -4px !important; }
    .alert { margin-bottom: 0px !important; }
    #vote-stats > h3 {
        margin-top: 0 !important; margin-bottom: 0 !important;}  
    .h4, .h5, .h6, h4, h5, h6 {
        margin-top: 1px !important;margin-bottom: 6px !important;}  
    * {border-radius: unset !important;}
    .btn-default {padding: 4.5px 12px 4.5px 12px !important;}
    .input-group-btn {background-color: #4d4d4d;}
    .col-md-3 {margin: 0;}
    .col-md-8 > div {line-height: 0.8;}
    #vm-list {margin-top: 10px; color: gray;}
    a[href="mailto:computernewbab@gmail.com"] {margin-left: 4.5px;}
    
    .thumbnail .caption {padding: 9px 9px 0px 9px; }
    
    .btn,.panel,.list-group,.list-group-item,#chat-user,#chat-input,
    .guac-keyboard-key,.modal-content,#username-addon,#username-box,nav,.dropdown-menu{
        border-radius:0!important;
        box-shadow:none!important;
        background-image:none!important;
        outline:none!important;
        transition:none!important;
    }

    #chat-box li {
    word-break: break-word;
}
    nav {
        width:100%;
        min-height:auto!important;
        height:auto!important;
        padding-top: 7px; padding-bottom: 7px !important; margin-bottom: 7px !important;
    }
    .navbar-nav a{
        padding:0 10px!important;
        margin:0!important;
        height:auto!important;
    }
    .navbar-brand {
        padding-left: 0 !important;padding-right: 0 !important; padding-bottom: 0; padding-top: 0; margin:0!important;height:auto!important;}
    .navbar-right {margin-bottom:0;margin-top:0;}
    
.thumbnail:after{
    content:attr(href);
    right:0;
    top:0;
    position:absolute;
    padding-right:2px;
    margin-right:15px;
    padding-top:1px;
    font-size:18px;
    font-weight:bold;
    background:#1f1f1fcf;
}
    
    .container > h1:nth-child(1), p {
        color: #6d6d6d;
    }
    
    .ui.menu, .navbar, .navbar-default {
        background-color: #121212 !important;
        background-image: none !important;
    }
    
    .navbar {
        border: none;
    }
    
    .item, label {
        color: #a4a4a4 !important;
    }

    input#search-box, .ui.dropdown .menu, h4.ui, .ui.segment {
        background-color: #2e2e2e !important;
    }
    
    .list-group-item.disabled, .panel, .list-group-item {
        background-color: #2e2e2e !important;
        color: gray;
        border:none !important;
        box-shadow:none !important;
    }

    #change-username-modal, .ui.modal > .header, .ui.modal > .content, .modal-content, .modal-footer {
        color: gray;
        background-color: #2e2e2e !important;
        border: none !important;
    }
    .ui.form input, .ui.form textarea, .ui.form select, #guac-table > div, .tabulator-row.tabulator-selectable:hover, .tabulator-col-content, .tabulator-row {
        background-color: #121212 !important;
        color: lightgray !important;
    }
    #vm-list > div > div > div:hover, .thumbnail, div.caption {
        background-color: #2e2e2e !important;
        border: none !important;
        color: gray !important;
    }
    .tabulator-row.tabulator-selectable.tabulator-row-odd.tabulator-selected {
        background-color: #363636 !important;
    }
    body {
        background-color: #212121 !important;
    }

    small, #vm-description {
        color: gray;
    }

    .ui.green.button, .ui.green.horizontal.label, button#vote-yes, .label-success {
        background-color: darkgreen !important;
        background-image: none;
        border: none;
    }

    .ui.red.button, .ui.red.horizontal.label, button#vote-no, .label-danger {
        background-color: darkred !important;
        background-image: none;
        border: none;
    }

    #online-users > .item.has-turn, .has-turn {
        background-color: #82b3c9 !important;
    }

    #online-users > .item.waiting-turn, .waiting-turn {
        background-color: #cbc26d !important;
    }
    
    .ui.button, #username-label, .ui.basic.labels .label, .ui.basic.label, #username-addon {
        background-color: #4d4d4d !important;
        border: none;
        color: gray;
    }
    
    button
    {
        background-color: #4d4d4d !important;
        border: none !important;
        color: gray !important;
        background-image: none !important;
        text-shadow: none !important;
    }
    
    h4 {
        background: none !important;
    }
    
    .page-header, .text-center {
        border: none !important;
        padding-bottom: 0 !important
    }
    
    .ui.attached.segment, .ui.top.attached.header {
        color: #a4a4a4;
        border: none !important;
    }

    .message-pane-wrapper, #username-box {
        background-color: #2b2b2b !important;
        border: none !important;
    }
    
    .message-pane li:hover {
        background-color: #4d4d4d;
    }

    .ui.cards > .card, .ui.cards > .card:hover {
        background-color: #2c2c2c !important;
        box-shadow: none !important;
    }

    .ui.input > input, .ui.input > input:focus, .ui.input > input:active, div#field, #chat-input {
        background-color: #2b2b2b !important;
        border: none;
    }
    
    #chat-input:focus, #username-box:focus {
        box-shadow: none;
    }

    .message-pane > li {
        border-bottom: 1px solid #363636;
        box-shadow: 0 1px 0 0 #333333;
    }

    .chat-timestamp {
        color: gray;
    }

    #chat-box > li > div {
        color: #6d6d6d;
    }

    #vote-status > h3 > small {
        color: lightgray;
    }
    
    div#vote-alert, #vote-dismiss {
        background-color: #121212 !important;
        background-image: none;
        border: none;
        box-shadow: none;
        color: lightgray;
        text-shadow: none;
    }

    .ui.blue.message, .ui.attached.blue.message {
        box-shadow: 0 0 0 1px #2b2b2b inset, 0 0 0 0 rgba(0, 0, 0, 0);
        color: #a4a4a4;
    }
    
    #chat-box > li > div > ul > li {
	    border-bottom: none;
	    box-shadow: none;
    }
}