VRCX/html/src/app.dark.scss

@charset "utf-8";

//
// Copyright(c) 2019-2021 pypy and individual contributors.
// All rights reserved.
//
// This work is licensed under the terms of the MIT license.
// For a copy, see <https://opensource.org/licenses/MIT>.
//

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

html,
body {
    background-color: #101010;
}

body,
input,
textarea,
select,
button {
    color: #fff;
}

.el-loading-mask {
    background-color: rgba(0, 0, 0, 0.6);
}

.el-input__inner,
.el-textarea__inner,
.el-textarea .el-input__count,
.el-input .el-input__count .el-input__count-inner {
    color: #fff;
    background-color: #444;
    border: #333;
}

.el-input-group__append,
.el-input-group__prepend {
    color: #fff;
    background-color: #666;
    border: #555;
}

.el-table tr,
.el-table td.el-table__cell,
.el-table th.el-table__cell {
    background-color: #292929;
    border-bottom: 1px solid #5f5f5f;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
    background-color: #5f5f5f;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: #202020;
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #323232;
}

.el-pagination .btn-next,
.el-pagination .btn-prev {
    color: #bbb;
    background-color: #333;
}

.el-pagination button:disabled {
    color: #101010;
    background-color: #333;
}

.el-dialog,
.el-pager li {
    background-color: #333;
}

.el-pager li {
    color: #bbb;
}

.el-table {
    color: #fff;
}

.el-pagination__total {
    color: #bbb;
}

.el-tag--plain.el-tag--info {
    background-color: #333;
}

.el-tag--plain.el-tag--success {
    background-color: #333;
}

.el-button {
    color: #c5cad6;
}

.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
    background-color: #353535;
    border-color: #404040;
}

.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
    color: #000;
    background-color: #737373;
    border-color: #656565;
}

.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
    color: #c0c4cc;
    background-color: #292929;
    border-color: #3d3d3d;
}

.el-tabs__item {
    color: #c2c4ca;
}

.el-tabs--card > .el-tabs__header {
    border-bottom-color: #5f5f5f;
}

.el-dropdown-menu {
    background-color: #353535;
    border-color: #404040;
}

.el-dropdown-menu__item--divided::before {
    background-color: #404040;
}

.el-dropdown-menu__item {
    color: #d4d4d4;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    color: #66b1ff;
    background-color: #444;
}

.el-popper[x-placement^='bottom'] .popper__arrow::after {
    border-bottom-color: #333;
}

.el-popper[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: #404040;
}

.el-message-box {
    background-color: #333;
    border-color: #5f5f5f;
}

.el-tree {
    color: #bbb;
    background: #202020;
}

.el-menu-item:focus,
.el-menu-item:hover {
    background-color: #505050;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
    border-left-color: #5f5f5f;
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #9c9c9c;
    border-left-color: #5f5f5f;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-color: #5f5f5f;
}

.el-collapse-item__header {
    color: #d0d0d0;
    background-color: inherit;
    border-bottom-color: #5f5f5f;
}

.el-collapse-item__wrap {
    background-color: #333;
    border-bottom-color: #5f5f5f;
}

.el-message-box__title {
    color: #c8c8c8;
}

.el-dialog__title {
    color: #c8c8c8;
}

.el-message-box__content {
    color: #c8c8c8;
}

.el-collapse-item__content {
    color: #848484;
}

.el-switch__core {
    background-color: #212121;
    border-color: #5f5f5f;
}

.el-popover {
    background-color: #333;
    border-color: #5f5f5f;
}

.el-popper[x-placement^='right'] .popper__arrow::after {
    border-right-color: #5f5f5f;
}

.el-popper[x-placement^='right'] .popper__arrow {
    border-right-color: #5f5f5f;
}

.el-switch__label {
    color: #a0a0a0;
}

.el-table,
.el-table__expanded-cell {
    background-color: inherit;
}

.el-tree-node__content:hover {
    background-color: #272727;
}

.el-tree-node:focus > .el-tree-node__content {
    background-color: #333;
}

.el-select-dropdown {
    background-color: #353535;
}

.el-select-dropdown__item {
    color: #c8c8c8;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background-color: #404040;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
    background-color: #404040;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: #3e3e3e;
}

.el-tag.el-tag--info {
    background-color: #404040;
    border-color: #252525;
}

.el-table__expanded-cell:hover {
    background-color: #323232 !important;
}

.el-dialog__body {
    color: #fff;
}

.el-radio {
    color: #fff;
}

.el-radio-button__inner {
    color: #fff;
    background: #565656;
    border: 1px solid #666666;
}

.el-radio-button:first-child .el-radio-button__inner {
    border-left: 1px solid rgba(0, 0, 0, 0);
}

.el-button {
    color: #fff;
}

.el-form-item__label {
    color: #c8c8c8;
}

.el-checkbox {
    color: #c8c8c8;
}

.el-input.is-disabled .el-input__inner {
    background-color: #3b3b3b;
}

.x-app {
    background-color: #101010;
}

.x-container {
    background: #222;
}

.x-login-container {
    background-color: #101010;
}

.x-aside-container {
    background-color: #171717;
}

.x-friend-list > .x-friend-group {
    color: #fff;
}

.x-friend-item:hover,
.x-change-image-item:hover {
    background: #3e3e3e;
}

.x-friend-item > .avatar.active::after,
.x-friend-item > .avatar.online::after,
.x-friend-item > .avatar.joinme::after,
.x-friend-item > .avatar.askme::after,
.x-friend-item > .avatar.busy::after {
    border: 2px solid #000;
}

.x-friend-item > .detail > .name {
    color: #fff;
}

.x-friend-item > .detail > .extra {
    color: #c7c7c7;
}

.x-login-container p {
    color: #ddd;
}