mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-12 19:33:50 +02:00
always show name color, add dark mode
This commit is contained in:
pypy
12
html/app.css
12
html/app.css
@@ -75,12 +75,12 @@ For a copy, see <https://opensource.org/licenses/MIT>.
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
@@ -89,6 +89,10 @@ body, input, textarea, select, button {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.x-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -155,8 +159,8 @@ body, input, textarea, select, button {
|
||||
content: '';
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #EBEEF5;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
325
html/app.dark.css
Normal file
325
html/app.dark.css
Normal file
@@ -0,0 +1,325 @@
|
||||
@charset "utf-8";
|
||||
/*
|
||||
Copyright(c) 2019-2020 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;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: #444444;
|
||||
border: #333333;
|
||||
}
|
||||
|
||||
.el-table td, .el-table th.is-leaf {
|
||||
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 {
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td {
|
||||
background-color: #323232;
|
||||
}
|
||||
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
background-color: #333333;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.el-pagination button:disabled {
|
||||
background-color: #333333;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.el-dialog, .el-pager li {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-pagination__total {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.el-tag--plain.el-tag--info {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.el-tag--plain.el-tag--success {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.el-tag--plain.el-tag--success {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
color: #c5cad6;
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text) {
|
||||
background-color: #353535;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text):focus, .el-button:not(.el-button--text):hover {
|
||||
color: #000000;
|
||||
border-color: #656565;
|
||||
background-color: #737373;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: #444444;
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
.el-popper[x-placement^=bottom] .popper__arrow::after {
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.el-popper[x-placement^=bottom] .popper__arrow {
|
||||
border-bottom-color: #404040;
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
background-color: #333333;
|
||||
border-color: #5f5f5f;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
background: #202020;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.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-left-color: #5f5f5f;
|
||||
}
|
||||
|
||||
.el-tabs--card>.el-tabs__header .el-tabs__nav {
|
||||
border-color: #5f5f5f;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
background-color: inherit;
|
||||
color: #d0d0d0;
|
||||
border-bottom-color: #5f5f5f;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: #333333;
|
||||
border-bottom-color: #5f5f5f;
|
||||
}
|
||||
|
||||
.el-message-box__title {
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
.el-message-box__content {
|
||||
color: #a5a7ad;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
color: #848484;
|
||||
}
|
||||
|
||||
.el-switch__core {
|
||||
background-color: #212121;
|
||||
border-color: #5f5f5f;
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
background-color: #333333;
|
||||
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: #333333;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #353535;
|
||||
}
|
||||
|
||||
.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-tabs--card>.el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #9c9c9c;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.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: #ffffff;
|
||||
}
|
||||
|
||||
.x-friend-item:hover {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.x-friend-item>.avatar.active::after, .x-friend-item>.avatar.joinme::after, .x-friend-item>.avatar.busy::after {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
.x-friend-item>.detail>.name {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.x-friend-item>.detail>.extra {
|
||||
color: #c7c7c7;
|
||||
}
|
||||
|
||||
.x-friend-item>.detail>.name.x-tag-veteran {
|
||||
color: rgb(177, 143, 255);
|
||||
}
|
||||
|
||||
.el-tag.x-tag-veteran {
|
||||
border-color: rgb(177, 143, 255);
|
||||
color: rgb(177, 143, 255);
|
||||
}
|
||||
|
||||
.x-friend-item>.detail>.name.x-tag-legendary {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.el-tag.x-tag-legendary {
|
||||
border-color: rgb(255, 255, 255);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.x-user-dialog .el-textarea__inner {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
body, input, textarea, select, button {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.x-login-container p {
|
||||
color: #dddddd;
|
||||
}
|
||||
18
html/app.js
18
html/app.js
@@ -192,6 +192,11 @@ CefSharp.BindObjectAsync(
|
||||
return v.toString(16);
|
||||
});
|
||||
|
||||
var $appDarkStyle = document.createElement('link');
|
||||
$appDarkStyle.rel = 'stylesheet';
|
||||
$appDarkStyle.href = `app.dark.css?_=${Date.now()}`;
|
||||
document.getElementsByTagName('head')[0].appendChild($appDarkStyle);
|
||||
|
||||
//
|
||||
// API
|
||||
//
|
||||
@@ -5019,14 +5024,11 @@ CefSharp.BindObjectAsync(
|
||||
};
|
||||
$app.watch.openVR = saveOpenVROption;
|
||||
$app.watch.openVRAlways = saveOpenVROption;
|
||||
$app.data.showNameColor = VRCXStorage.GetBool('showNameColor');
|
||||
var $nameColorStyle = document.createElement('style');
|
||||
$nameColorStyle.appendChild(document.createTextNode('.x-friend-item>.detail>.name { color: #303133 !important; }'));
|
||||
document.head.appendChild($nameColorStyle);
|
||||
$nameColorStyle.disabled = VRCXStorage.GetBool('showNameColor');
|
||||
$app.watch.showNameColor = function () {
|
||||
VRCXStorage.SetBool('showNameColor', this.showNameColor);
|
||||
$nameColorStyle.disabled = this.showNameColor;
|
||||
$app.data.isDarkMode = VRCXStorage.GetBool('isDarkMode');
|
||||
$appDarkStyle.disabled = $app.data.isDarkMode === false;
|
||||
$app.watch.isDarkMode = function () {
|
||||
VRCXStorage.SetBool('isDarkMode', this.isDarkMode);
|
||||
$appDarkStyle.disabled = this.isDarkMode === false;
|
||||
};
|
||||
|
||||
API.$on('LOGIN', function () {
|
||||
|
||||
@@ -713,10 +713,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:30px">
|
||||
<span style="font-weight:bold">Show name color by Trust level</span>
|
||||
<span style="font-weight:bold">Dark Mode</span>
|
||||
<div style="font-size:12px;margin-top:5px">
|
||||
<span style="display:inline-block;min-width:150px">Enable</span>
|
||||
<el-switch v-model="showNameColor"></el-switch>
|
||||
<el-switch v-model="isDarkMode"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:30px">
|
||||
|
||||
Reference in New Issue
Block a user