NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript== // @name XBVR Dark Edition // @namespace 7kt-xbvr // @version 1.1.3 // @license MIT // @description A dark style for XBVR web interface // @author 7KT-SWE // @homepageURL https://7kt.se/ // @supportURL https://openuserjs.org/scripts/arvid-demon/XBVR_Dark_Edition/issues // @grant GM_addStyle // @run-at document-start // @match *://localhost:9999/* // @match *://127.0.0.1:9999/* // ==/UserScript== (function () { let css = ` * { scrollbar-color: #474747 transparent; scrollbar-width: thin; } html { background-color: #121212; font-size: 16px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .b-table .table-wrapper.has-mobile-cards tr:not([class *= is-]) { background: transparent; } .b-table .table-wrapper.has-mobile-cards tr:not([class *= is-]):hover { background-color: transparent; } .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td { border-bottom: 1px solid #232323; } .progress-wrapper.is-not-native::-moz-progress-bar, .progress::-moz-progress-bar { background-color: #167df0; } .content table th:not([align]) { text-align: inherit; border-color: #5b5b5b; font-weight: 700; color: #ffffff; background-color: #1b1b1b; } .control.pagination-input .input { background-color: #cfcfcf; color: #000; font-size: unset; } .control { font-size: unset; } .button, .file-cta, .file-name, .input, .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .taginput .taginput-container.is-focusable, .textarea { font-size: unset; } .pagination-list { flex-wrap: inherit; } a#toTop { background-color: #3b3b3b !important; color: #f1f1f1 !important; } a#toTop:hover { background-color: #5d5d5d !important; } #toTop { z-index: 5; } body { color: #f1f1f1; font-size: 1em; font-weight: 400; line-height: 1.5; } .tag:not(body).is-info.is-light { background-color: #393939; color: #f1f1f1; } .button.is-info.is-light.is-hovered, .button.is-info.is-light:hover { background-color: #ededed; color: #000000; } .button.is-info.is-light.is-hovered, .button.is-info.is-light:hover { background-color: #e6e6e6; border-color: transparent; color: #000; } .tag:not(body).is-info { background-color: #167df0; color: #fff; z-index: 5; } .button { background-color: #121212; border-color: #4a4a4a; border-width: 1px; color: #f1f1f1; cursor: pointer; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: calc(.5em - 1px); padding-left: 1em; padding-right: 1em; padding-top: calc(.5em - 1px); text-align: center; white-space: nowrap; } .button.is-hovered, .button:hover { border-color: #b5b5b5; color: #f1f1f1; background: #393939; } .checkbox:hover, .radio:hover { color: #f1f1f1; } .tag:not(body) { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #393939; border-radius: 4px; color: #ffffff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: .75rem; height: 2em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1.5; padding-left: .75em; padding-right: .75em; white-space: nowrap; } .input, .select select, .taginput .taginput-container.is-focusable, .textarea { background-color: #232323; border-color: #393939; border-radius: 4px; color: #f1f1f1; } .label { color: #f1f1f1; display: block; font-size: 1rem; font-weight: 600; } .field.is-floating-label .label:before { content: ""; display: block; position: absolute; top: .775em; left: 0; right: 0; height: .375em; background-color: #393939; z-index: -1; } .select:not(.is-multiple):not(.is-loading):after { border-color: #f1f1f1; right: 1.125em; z-index: 4; } .pagination-link, .pagination-next, .pagination-previous { border-color: #808080; color: #f1f1f1; min-width: 2.5em; } .pagination-link:hover, .pagination-next:hover, .pagination-previous:hover { border-color: #b5b5b5; color: #f1f1f1; background-color: #393939; } .is-divider-vertical[data-content]:after, .is-divider[data-content]:after { background: #121212; color: #f1f1f1; content: attr(data-content); display: inline-block; font-size: .75rem; padding: .4rem .8rem; -webkit-transform: translateY(-1.1rem); transform: translateY(-1.1rem); text-align: center; } .navbar.is-light { background-color: #232323; } .select fieldset[disabled] select, .select select[disabled], .taginput [disabled].taginput-container.is-focusable, .taginput fieldset[disabled] .taginput-container.is-focusable, [disabled].input, [disabled].textarea, fieldset[disabled] .input, fieldset[disabled] .select select, fieldset[disabled] .taginput .taginput-container.is-focusable, fieldset[disabled] .textarea { background-color: #212121; border-color: #212121; -webkit-box-shadow: none; box-shadow: none; color: #7a7a7a; } .navbar.is-light .navbar-burger { color: #5b5b5b; } .navbar.is-light .navbar-end .navbar-link, .navbar.is-light .navbar-end > .navbar-item, .navbar.is-light .navbar-start .navbar-link, .navbar.is-light .navbar-start > .navbar-item { color: #b5b5b5; } .navbar.is-light .navbar-end .navbar-link.is-active, .navbar.is-light .navbar-end .navbar-link:focus, .navbar.is-light .navbar-end .navbar-link:hover, .navbar.is-light .navbar-end > a.navbar-item.is-active, .navbar.is-light .navbar-end > a.navbar-item:focus, .navbar.is-light .navbar-end > a.navbar-item:hover, .navbar.is-light .navbar-start .navbar-link.is-active, .navbar.is-light .navbar-start .navbar-link:focus, .navbar.is-light .navbar-start .navbar-link:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active, .navbar.is-light .navbar-start > a.navbar-item:focus, .navbar.is-light .navbar-start > a.navbar-item:hover { background-color: #393939; color: #f1f1f1; } .navbar.is-light .navbar-end .navbar-link, .navbar.is-light .navbar-end > .navbar-item, .navbar.is-light .navbar-start .navbar-link, .navbar.is-light .navbar-start > .navbar-item { color: #b5b5b5; } .content table tfoot td, .content table tfoot th { color: #5b5b5b; } .bbox { background-color: #1b1b1b !important; cursor: pointer !important; } .dropdown-content { background-color: #393939; } .modal-card .timepicker .dropdown-content .control .select select { font-weight: 600; padding-right: calc(.75em - 1px); border-width: 1px; } .modal-card .is-divider[data-content]:after { background: #212121; } .modal-card-body { -webkit-overflow-scrolling: touch; background-color: #212121; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; overflow: auto; padding: 20px; } .modal-background { background-color: hsla(0, 0%, 4%, .86) !important; } .modal-card-foot, .modal-card-head { background-color: #121212; } .modal-card-title { color: #f1f1f1; } .modal-card-head { border-bottom: 1px solid #7873734a; } .modal-card-foot { border-top: 1px solid #7873734a; } .tabs a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom-color: #b5b5b5; border-bottom-style: solid; border-bottom-width: 1px; color: #b5b5b5; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: -1px; padding: .5em 1em; vertical-align: top; } .tabs a:hover { border-bottom-color: #7957d5; color: #f1f1f1; } .message-body { border-color: #5b5b5b; border-radius: 4px; border-style: solid; border-width: 0 0 0 4px; color: #f1f1f1; padding: 1.25em 1.5em; } .message { background-color: #121212; border-radius: 4px; font-size: 1rem; } strong { color: #f1f1f1; font-weight: 700; } .videosize { color: #fff !important; font-weight: 550; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #f1f1f1; font-weight: 600; line-height: 1.125; } h1.title::before { content: "XB"; color: #ffffff; position: absolute; } h1.title { color: #fc3ec8; font-weight: 600; } table th { color: #f1f1f1; } .title { color: #f1f1f1; font-size: 2rem; font-weight: 600; line-height: 1.125; } .navbar-brand h1 small { font-size: .4em; margin-left: 0.2em; opacity: .8; color: #b397ff; margin-bottom: 4px; } .table { background-color: transparent; color: #b5b5b5; } .tabs ul { border-bottom-color: #302e2e; background-color: #1b1b1b; } .tabs.is-boxed a:hover { background-color: #393939; border-bottom-color: #302e2e; } .b-tabs .tabs.is-boxed li a:focus { background-color: #7957d5; border-bottom-color: #302e2e; } .tabs.is-boxed a:focus { background-color: #393939; border-bottom-color: #302e2e; } .tabs.is-boxed li.is-active a { background-color: #7957d5; border-color: transparent; } .tabs li.is-active a { border-bottom-color: #7957d5; color: #f1f1f1; } code, hr { background-color: #7873734a; } .card { background-color: #121212; border-radius: .25rem; -webkit-box-shadow: 0 .5em 1em -.125em hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .02); box-shadow: 0 .5em 1em -.125em hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .02); color: #f1f1f1; max-width: 100%; position: relative; } .modal-card .card { background-color: transparent; } .menu-list a { color: #a2a2a2; } .b-table .table th.is-sortable:hover { border-color: #7957d5; background-color: #393939; } .b-table .table th.is-sortable { border-color: #5b5b5b; color: #ffffff; background-color: #1b1b1b; } .b-table .table th.is-current-sort { border-color: #7957d5; font-weight: 700; color: #ffffff; background-color: #1b1b1b; } .b-table .table-wrapper.has-sticky-header { height: 300px; overflow-y: auto; overflow-x: hidden; } .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selectable { color: #f1f1f1; } .datepicker .dropdown-content { background-color: #393939; border-radius: 4px; -webkit-box-shadow: 0 .5em 1em -.125em hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .02); box-shadow: 0 .5em 1em -.125em hsla(0, 0%, 4%, .1), 0 0 0 1px hsla(0, 0%, 4%, .02); } .dropdown .dropdown-menu .has-link a, a.dropdown-item, button.dropdown-item { padding-right: 3rem; text-align: inherit; white-space: nowrap; width: 100%; color: #f1f1f1; } .dropdown .dropdown-menu .has-link a:hover, a.dropdown-item:hover, button.dropdown-item:hover { background-color: #808080; color: #000000; } .button[disabled], fieldset[disabled] .button { background-color: #808080; border-color: #808080; -webkit-box-shadow: none; box-shadow: none; opacity: .5; color: #c6c6c6; } .button.is-light { background-color: #393939; border-color: #393939; color: rgb(241 241 241); } .button.is-light.is-hovered, .button.is-light:hover { background-color: #f1f1f1; border-color: transparent; color: rgba(0, 0, 0, .7); } .select select option { color: #F1F1F1; padding: calc(.5em - 1px) calc(.75em - 1px); } .input:active, .input:focus, .is-active.input, .is-active.textarea, .is-focused.input, .is-focused.textarea, .select select.is-active, .select select.is-focused, .select select:active, .select select:focus, .taginput .is-active.taginput-container.is-focusable, .taginput .is-focused.taginput-container.is-focusable, .taginput .taginput-container.is-focusable:active, .taginput .taginput-container.is-focusable:focus, .textarea:active, .textarea:focus { border-color: #4a4a4a; -webkit-box-shadow: 0 0 0 .125em rgba(111, 111, 111, .25); box-shadow: 0 0 0 .125em rgba(111, 111, 111, .25); } .button.is-dark { background-color: #4a4a4a; border-color: #4a4a4a; color: #fff; } .button.is-dark.is-outlined { background-color: transparent; border-color: #5b5b5b; color: #b5b5b5; } .button.is-dark.is-active, .button.is-dark:active { background-color: #5b5b5b; border-color: #5b5b5b; color: #fff; } .button.is-dark.is-outlined.is-focused, .button.is-dark.is-outlined.is-hovered, .button.is-dark.is-outlined:focus, .button.is-dark.is-outlined:hover { background-color: #5b5b5b; border-color: #5b5b5b; color: #fff; } .button.is-primary.is-hovered, .button.is-primary:hover { background-color: #714dd2; border-color: transparent; color: #f1f1f1; } .button.is-focused, .button:focus { border-color: #dbdbdb; color: #f1f1f1; } .button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(121, 87, 213, .25); box-shadow: 0 0 0 0.125em rgb(111, 111, 111, 25%); } .button.is-focused:not(:active), .button:focus:not(:active) { -webkit-box-shadow: 0 0 0 0.125em rgb(111, 111, 111, 25%); box-shadow: 0 0 0 0.125em rgb(111, 111, 111, 25%); } .button.is-primary.is-active, .button.is-primary:active { background-color: #808080; color: #f1f1f1; } .select:not(.is-multiple):not(.is-loading):hover:after { border-color: #f1f1f1; } .select:not(.is-multiple):not(.is-loading):after { border-color: #808080; right: 1.125em; z-index: 4; } .menu { font-size: 1rem; padding-top: 0.2em; } .menu-list a { border-radius: 2px; color: #b5b5b5; display: block; padding: .5em .75em; background-color: #1b1b1b; } .menu-list a:hover { background-color: #393939; color: #f1f1f1 } .menu-list a.is-active { background-color: #7957d5; color: #fff } .menu-list li ul { border-left: 1px solid #b5b5b5; margin: .75em; padding-left: .75em } .menu-label { color: #f1f1f1; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; font-weight: 600 } .select select:not([multiple]) { padding-right: 2.5em; } .table td, .table th { border-color: #232323; } .content table thead td, .content table thead th { color: #f1f1f1; } .content table td, .content table th { border-color: #232323; } .table thead td, .table thead th { border-width: 0 0 2px; color: #f1f1f1; } .navbar-brand, .navbar-tabs { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; min-height: 3.25rem; background: linear-gradient(90deg, #7957d5, transparent 90%); } .navbar-menu { background-color: #232323; -webkit-box-shadow: 0 8px 16px hsla(0, 0%, 4%, .1); box-shadow: 0 8px 16px hsla(0, 0%, 4%, .1); padding: .5rem 0; } .navbar.is-light .navbar-burger { color: #f1f1f1; } .navbar.is-light .navbar-brand .navbar-link.is-active, .navbar.is-light .navbar-brand .navbar-link:focus, .navbar.is-light .navbar-brand .navbar-link:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, .navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover { background-color: transparent; } .b-table .table-wrapper.has-sticky-header tr:first-child th { position: sticky; top: 0; z-index: 2; background: #212121; } `; if (typeof GM_addStyle !== "undefined") { GM_addStyle(css); } else { let styleNode = document.createElement("style"); styleNode.appendChild(document.createTextNode(css)); (document.querySelector("head") || document.documentElement).appendChild(styleNode); } })();