XBVR Dark Edition

Greasy Fork is available in English.
A dark style for XBVR web interface
目前为 2024-03-05 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name XBVR Dark Edition
// @namespace 7kt-xbvr
// @version 1.0.5
// @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 = `
  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%;
  }
  .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;
  }
  .table thead {
    background-color: #232322;
  }
  body {
    color: #f1f1f1;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
  }
  .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-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;
  }
  .bbox {
    background-color: #1b1b1b !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: #dbdbdb;
    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: #363636;
    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 {
    color: #f1f1f1
  }

  .navbar-brand h1 small {
    font-size: .5em;
    margin-left: 0.2em;
    opacity: 1;
    color: #aa8aff;
    margin-top: -0.8em;
  }

  .content table thead td,
  .content table thead th {
    color: #f1f1f1;
  }

  .table {
    background-color: transparent;
    color: #f1f1f1;
  }

  .content table tfoot td,
  .content table tfoot th {
    color: #b5b5b5;
  }

  .content table td,
  .content table th {
    border: 1px solid #7873734a;
  }
  .content table td,
  .content table th {
    /* border: 1px solid #dbdbdb; */
    border: 1px solid #7873734a;
  }
  .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: #393939;
    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: #393939;
    border-color: transparent;
  }
  .tabs li.is-active a {
    border-bottom-color: transparent;
    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-current-sort {
    border-color: #7957d5;
    font-weight: 700;
    background-color: #393939;
  }

  .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 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: repeating-linear-gradient(90deg, #7957d5, transparent);
  }
  .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);
  }
})();