A dark style for XBVR web interface
目前為
// ==UserScript==
// @name XBVR Dark Edition
// @namespace 7kt-xbvr
// @version 1.0.0
// @license MIT
// @description A dark style for XBVR web interface
// @author 7KT-SWE
// @homepageURL https://7kt.se/
// @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;
}
#toTop {
z-index: 5;
}
.table thead {
background-color: #232322;
}
body {
color: #f1f1f1;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
}
.button {
background-color: #232323;
border-color: #808080;
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;
}
.input,
.select select,
.taginput .taginput-container.is-focusable,
.textarea {
background-color: #393939;
border-color: #808080;
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;
}
.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[data-v-2df8dc34] {
background: #000000;
}
.bbox[data-v-ce9a7246] {
-webkit-box-flex: 1;
-ms-flex: 1 0 25%;
flex: 1 0 25%;
background: #000000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
padding: 0;
line-height: 0;
}
.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[data-v-03bbe72f] {
color: #ababab;
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
}
h1 small[data-v-01095c92] {
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;
}
.tabs.is-boxed li.is-active a {
background-color: #121212;
}
.content table td,
.content table th {
/* border: 1px solid #dbdbdb; */
border: 1px solid #7873734a;
}
.tabs.is-boxed li.is-active a {
/* background-color: #fff; */
background-color: #7873734a;
}
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;
}
.bbox[data-v-0519afa8] {
-webkit-box-flex: 1;
-ms-flex: 1 0 25%;
flex: 1 0 25%;
background: #222;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
padding: 0;
line-height: 0;
}
.button[disabled],
fieldset[disabled] .button {
background-color: #808080;
border-color: #808080;
-webkit-box-shadow: none;
box-shadow: none;
opacity: .5;
color: #c6c6c6;
}
.button {
border-color: #4a4a4a;
}
.button.is-light {
background-color: #545454;
border-color: grey;
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: #dbdbdb;
-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);
}
.b-table .table-wrapper.has-sticky-header tr:first-child th {
position: sticky;
top: 0;
z-index: 2;
background: #212121;
}
.videosize[data-v-a076ceaa] {
color: #ffffff;
font-weight: 550;
}
`;
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);
}
})();