xen-orchestra-xo5-dark-theme.user.js

xen-orchestra-xo5-dark-theme.user.js

// ==UserScript==
// @name        XenOrchestra NG Theme
// @match       https://10.0.50.100/*
// @grant       none
// @version     0.1
// @author      Evan Reichard
// ==/UserScript==

(function() {
    'use strict';

    const css = `
        /* ------------------------------------- */
        /* ---------- Menu & Sub-Menu ---------- */
        /* ------------------------------------- */

        .xo-menu, .xo-sub-menu {
            background-color: #111225;
            padding: 5px;
            border: 1px solid #363647;
        }

        .xo-menu + div > div {
            overflow: unset !important;
            overflow-x: auto !important;
        }

        .nav-tabs {
            text-transform: uppercase;
            border-top: 1px solid #363647;
            border-bottom: 0px;
            float: left;
            min-width: max-content;
            font-size: 1rem;
            width: 100%;
        }

        .nav-tabs a.nav-link,
        .nav-tabs a.nav-link:focus,
        .nav-tabs a.nav-link:hover,
        .nav-tabs a.nav-link.active,
        .nav-tabs a.nav-link.active:focus,
        .nav-tabs a.nav-link.active:hover {
            color: #f8f8f8;
            border-bottom: 2px solid #8f84ff;
        }

        .nav-tabs a.nav-link:hover {
            background-color: #393566;
        }

        .nav-tabs a.nav-link {
            border-radius: 0px;
            border: 0px;
        }

        .nav-tabs .nav-item + .nav-item {
            margin-left: 0px;
        }

        .xo-menu-item:hover, .nav-link.active {
            background-color: #2b284d !important;
        }

        .xo-menu-item, .nav-link.active {
            border-radius: 15px;
        }

        .nav-link.active:hover {
            background-color: #393566 !important;
        }


        /* ------------------------------------- */
        /* ------------ Global Style ----------- */
        /* ------------------------------------- */

        /* HTML Text Color */
        table, .form-group, .ct-label, .ct-point, h2, #newSrForm, .table, h3 {
            color: white;
        }

        /* SVG Text Color */
        text {
          fill: white;
        }

        .table thead th {
            border-bottom: 2px solid #363647;
        }

        .thead-default th {
            color: #e0e0e0;
            background-color: #1e1e2d;
        }

        .table td, .table th {
            border-top: 1px solid #363647;
        }

        .card-header {
            color: white;
            background-color: #0a0a0a;
        }

        .card, .list-group-item, tr {
            background-color: black;
            color: white;
            border-radius: 10px;
        }

        /* ------------------------------------- */
        /* ------------ Page Header ------------ */
        /* ------------------------------------- */

        .page-header {
            padding: 0px;
            border-radius: 0px;
        }

        .page-header .container-fluid {
            padding: 0px !important;
            border-radius: 0px;
            padding: 0px;
        }

        .page-header > div > div:first-child::after {
            content: none;
        }

        .header-title + div {
            text-align: unset !important;
            width: unset !important;
        }

        /* Header Tabs Horizontal Scroll */
        .page-header > div > div:first-child > div:has(.pull-right) {
            overflow-y: hidden;
        }

        .page-header > .container-fluid > div:not([class*="_itemRowHeader"]):first-child > div:first-child {
            margin: 10px !important;
        }

        /* ------------------------------------- */
        /* -------------- VM Page -------------- */
        /* ------------------------------------- */

        /* VM List Buttons */
        .page-header > .container-fluid > [class*="_itemRowHeader"].row {
            display: flex;
            width: 100%;
            padding: 10px;
            align-items: center;
        }

        .page-header > .container-fluid > [class*="_itemRowHeader"].row:nth-child(2) > .hidden-sm-down {
            display: flex;
            justify-content: center;
        }

        /* Expanded VM Graphs */
        .row > [class*="_itemExpanded"]:has(.row > [class*="_itemExpanded"]) {
            /* width: 100%; */
            float: right;
        }

        /* VM Page Start / Stop Buttons */
        .row:has(.header-title) > div:nth-child(2):has(div > .btn-group) {
            margin: 20px;
            float: right;
        }

        .row > div {
            padding: 0px;
        }

        div:has(> .nav.nav-tabs) {
            width: 100%;
        }

        .row {
          margin: 0px !important;
        }

        nav + div {
          overflow-y: unset !important;
          background-color: black;
          padding: 10px !important;
          border: 1px solid #363647;
        }

        .container-fluid, [class$="_itemContainer"], #vmCreation, #networkCreation {
            background-color: #111225;
            color: white;
            padding: 20px !important;
            border-radius: 10px;
            border: 1px solid #363647;
        }

        .container-fluid > .container-fluid {
            background-color: transparent;
            padding: 0;
            border-radius: 0;
            border: none;
        }

        [class$="_itemContainer"] [class$="_item"] {
            border-bottom: 1px solid #363647;
        }

        [class$="_itemContainer"] [class$="_item"]:hover {
            background-color: #393566 !important;
        }

        /* ------------------------------------- */
        /* ------------- VM Console ------------ */
        /* ------------------------------------- */

        div:has(input[value="1"]) ~ .console canvas {
            width: 100% !important;
            height: unset !important;
        }
    `;

    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);
})();