mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-27 18:53:47 +02:00
refactor: Organize Project Structure (#1211)
* refactor: Organize Project Structure * fix * fix * rm security * fix
This commit is contained in:
pa
GitHub
6431
src/assets/scss/animated-emoji.scss
Normal file
6431
src/assets/scss/animated-emoji.scss
Normal file
File diff suppressed because it is too large
Load Diff
40
src/assets/scss/emoji.font.scss
Normal file
40
src/assets/scss/emoji.font.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
body,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC',
|
||||
'Noto Color Emoji', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
--md-sys-typescale-headline-medium-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
--md-sys-typescale-headline-small-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
--md-sys-typescale-title-medium-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
--md-sys-typescale-label-large-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
--md-sys-typescale-label-medium-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
--md-sys-typescale-body-large-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
--md-sys-typescale-body-medium-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
--md-sys-typescale-body-small-font: 'Google Sans', 'Noto Sans',
|
||||
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji',
|
||||
'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font: 'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
|
||||
'Noto Sans SC', 'Noto Color Emoji', sans-serif;
|
||||
}
|
||||
189
src/assets/scss/flags.scss
Normal file
189
src/assets/scss/flags.scss
Normal file
@@ -0,0 +1,189 @@
|
||||
:root {
|
||||
--offx: 20px; /* flag size */
|
||||
--offy: calc(var(--offx) / 72 * 52);
|
||||
}
|
||||
.flags {
|
||||
background: url('/images/flags.png') no-repeat;
|
||||
background-size: calc(var(--offx) * 6);
|
||||
width: var(--offx);
|
||||
height: var(--offy);
|
||||
transform: translateY(2px); /* move flag down */
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -4);
|
||||
}
|
||||
span[class='flags'] {
|
||||
background-position: calc(var(--offx) * 1) 0;
|
||||
}
|
||||
.flags.us {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.flags.usw {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.flags.kr {
|
||||
background-position: calc(var(--offx) * -1) 0;
|
||||
}
|
||||
.flags.ru {
|
||||
background-position: calc(var(--offx) * -2) 0;
|
||||
}
|
||||
.flags.es {
|
||||
background-position: calc(var(--offx) * -3) 0;
|
||||
}
|
||||
.flags.pt {
|
||||
background-position: calc(var(--offx) * -4) 0;
|
||||
}
|
||||
.flags.cn {
|
||||
background-position: calc(var(--offx) * -5) 0;
|
||||
}
|
||||
.flags.de {
|
||||
background-position: 0 calc(var(--offy) * -1);
|
||||
}
|
||||
.flags.jp {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -1);
|
||||
}
|
||||
.flags.fr {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -1);
|
||||
}
|
||||
.flags.se {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -1);
|
||||
}
|
||||
.flags.nl {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -1);
|
||||
}
|
||||
.flags.pl {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -1);
|
||||
}
|
||||
.flags.dk {
|
||||
background-position: 0 calc(var(--offy) * -2);
|
||||
}
|
||||
.flags.no {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -2);
|
||||
}
|
||||
.flags.it {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -2);
|
||||
}
|
||||
.flags.th {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -2);
|
||||
}
|
||||
.flags.fi {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -2);
|
||||
}
|
||||
.flags.hu {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -2);
|
||||
}
|
||||
.flags.cz {
|
||||
background-position: 0 calc(var(--offy) * -3);
|
||||
}
|
||||
.flags.tr {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -3);
|
||||
}
|
||||
.flags.ae {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -3);
|
||||
}
|
||||
.flags.ro {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -3);
|
||||
}
|
||||
.flags.vn {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -3);
|
||||
}
|
||||
.flags.ua {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -3);
|
||||
}
|
||||
.flags.gb {
|
||||
background-position: 0 calc(var(--offy) * -4);
|
||||
}
|
||||
.flags.use {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -4);
|
||||
}
|
||||
.flags.eu {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -4);
|
||||
}
|
||||
.flags.tw {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -4);
|
||||
}
|
||||
.flags.mt {
|
||||
background-position: 0 calc(var(--offy) * -5);
|
||||
}
|
||||
.flags.id {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -5);
|
||||
}
|
||||
.flags.hr {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -5);
|
||||
}
|
||||
.flags.he {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -5);
|
||||
}
|
||||
.flags.af {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -5);
|
||||
}
|
||||
.flags.be {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -5);
|
||||
}
|
||||
.flags.bg {
|
||||
background-position: 0 calc(var(--offy) * -6);
|
||||
}
|
||||
.flags.cy {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -6);
|
||||
}
|
||||
.flags.el {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -6);
|
||||
}
|
||||
.flags.et {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -6);
|
||||
}
|
||||
.flags.ph {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -6);
|
||||
}
|
||||
.flags.gd {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -6);
|
||||
}
|
||||
.flags.ga {
|
||||
background-position: 0 calc(var(--offy) * -7);
|
||||
}
|
||||
.flags.hi {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -7);
|
||||
}
|
||||
.flags.hy {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -7);
|
||||
}
|
||||
.flags.is {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -7);
|
||||
}
|
||||
.flags.lv {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -7);
|
||||
}
|
||||
.flags.lt {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -7);
|
||||
}
|
||||
.flags.lb {
|
||||
background-position: 0 calc(var(--offy) * -8);
|
||||
}
|
||||
.flags.mk {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -8);
|
||||
}
|
||||
.flags.sk {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -8);
|
||||
}
|
||||
.flags.sl {
|
||||
background-position: calc(var(--offx) * -3) calc(var(--offy) * -8);
|
||||
}
|
||||
.flags.nz {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -8);
|
||||
}
|
||||
.flags.au {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -8);
|
||||
}
|
||||
.flags.eo {
|
||||
background-position: 0 calc(var(--offy) * -9);
|
||||
}
|
||||
.flags.tok {
|
||||
background-position: calc(var(--offx) * -1) calc(var(--offy) * -9);
|
||||
}
|
||||
.flags.my {
|
||||
background-position: calc(var(--offx) * -2) calc(var(--offy) * -9);
|
||||
}
|
||||
.flags.blank {
|
||||
background-position: calc(var(--offx) * -4) calc(var(--offy) * -4);
|
||||
}
|
||||
.flags.unknown {
|
||||
background-position: calc(var(--offx) * -5) calc(var(--offy) * -4);
|
||||
}
|
||||
486
src/assets/scss/themes/theme.dark.scss
Normal file
486
src/assets/scss/themes/theme.dark.scss
Normal file
@@ -0,0 +1,486 @@
|
||||
@charset "utf-8";
|
||||
|
||||
//
|
||||
// Copyright(c) 2019-2025 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;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.x-friend-item .el-textarea .el-input__count {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
// User dialog memo: input count background color
|
||||
.x-friend-item:hover .el-input__count {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
color: #fff;
|
||||
background-color: #666;
|
||||
border: #555;
|
||||
}
|
||||
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
background: unset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input-number__decrease {
|
||||
border-right: 1px solid #dcdfe633;
|
||||
}
|
||||
|
||||
.el-input-number__increase {
|
||||
border-left: 1px solid #dcdfe633;
|
||||
}
|
||||
|
||||
.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-collapse-item .el-tag--mini {
|
||||
background-color: #333;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.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 i {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.el-menu-item.notify::after {
|
||||
background: #ebeef5;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active::before {
|
||||
background: #dcdfe6;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #c8c8c8;
|
||||
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-radio-button.is-disabled .el-radio-button__inner {
|
||||
background-color: unset;
|
||||
border-color: unset;
|
||||
border: 1px solid #666666;
|
||||
}
|
||||
|
||||
.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 > .detail > .name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.x-friend-item > .detail > .extra,
|
||||
.extra {
|
||||
color: #c7c7c7;
|
||||
}
|
||||
|
||||
.x-login-container p {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.x-menu-container {
|
||||
background: #303133;
|
||||
}
|
||||
|
||||
.x-grey {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.el-color-picker__panel {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.x-text-removed {
|
||||
text-decoration: line-through;
|
||||
color: #ff4444;
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
padding: 2px 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.x-text-added {
|
||||
color: rgb(76, 255, 80);
|
||||
background-color: rgba(76, 255, 80, 0.2);
|
||||
padding: 2px 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-divider {
|
||||
background-color: #606266;
|
||||
}
|
||||
.el-divider__text {
|
||||
background: #222;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-backtop {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
// Date picker
|
||||
.el-date-picker {
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-table td.disabled div {
|
||||
background-color: #333;
|
||||
color: #606266;
|
||||
}
|
||||
.el-date-table td.next-month,
|
||||
.el-date-table td.prev-month {
|
||||
color: #606266;
|
||||
}
|
||||
.el-picker-panel__icon-btn {
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-table th {
|
||||
border-bottom: 1px solid #555;
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-picker__header-label {
|
||||
color: #fff;
|
||||
}
|
||||
.el-picker-panel {
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.el-year-table td.disabled .cell {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.el-month-table td.disabled .cell {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
// Date picker end
|
||||
|
||||
// el-skeleton
|
||||
.el-skeleton.is-animated .el-skeleton__item {
|
||||
background: linear-gradient(90deg, #333 25%, #555 37%, #333 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: el-skeleton-loading 1.4s ease infinite;
|
||||
}
|
||||
// el-sekeleton end
|
||||
748
src/assets/scss/themes/theme.darkvanilla.scss
Normal file
748
src/assets/scss/themes/theme.darkvanilla.scss
Normal file
@@ -0,0 +1,748 @@
|
||||
/*
|
||||
* VRCX Dark-Vanilla theme by MintLily
|
||||
* https://github.com/MintLily/Dark-Vanilla
|
||||
*/
|
||||
|
||||
:root {
|
||||
--ThemeName: 'Dark Vanilla';
|
||||
--ThemeVers: '2.0.2';
|
||||
--ThemeAuth: 'MintLily';
|
||||
|
||||
--dv_bright: #eecce0;
|
||||
--dv_muted: #906d92;
|
||||
--dv_bright-rgb: 238, 204, 224;
|
||||
--dv_muted-rgb: 144, 109, 146;
|
||||
--dv_bg-top: #1e2427;
|
||||
--dv_bg-mid: #191f22;
|
||||
--dv_bg-bot: #131719;
|
||||
--dv_lg-rounded: 1rem;
|
||||
--dv_md-rounded: 0.6rem;
|
||||
--dv_sm-rounded: 0.45rem;
|
||||
--dv_background-modifier-selected: rgba(var(--dv_bright-rgb), 0.2);
|
||||
--dv_background-modifier-hover: rgba(var(--dv_bright-rgb), 0.3);
|
||||
--font-primary:
|
||||
'Encode Sans', 'Tofu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--shadow: 0 0 15px 5px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* MAIN */
|
||||
html,
|
||||
body,
|
||||
.x-menu-container {
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Encode Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-stretch: 100%;
|
||||
src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLR8A6WQw.woff2)
|
||||
format('woff2');
|
||||
unicode-range:
|
||||
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
|
||||
U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Encode Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-stretch: 100%;
|
||||
src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLRsA6WQw.woff2)
|
||||
format('woff2');
|
||||
unicode-range:
|
||||
U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
|
||||
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Encode Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-stretch: 100%;
|
||||
src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLSMA6.woff2)
|
||||
format('woff2');
|
||||
unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
|
||||
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
body,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
/* Side Bar */
|
||||
.x-menu-container {
|
||||
border-top-right-radius: var(--dv_lg-rounded);
|
||||
border-bottom-right-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-menu-item.is-active::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-menu-item:focus,
|
||||
.el-menu-item:hover {
|
||||
background-color: var(--dv_background-modifier-hover);
|
||||
}
|
||||
|
||||
li[class='el-menu-item is-active'] {
|
||||
background-color: var(--dv_background-modifier-selected);
|
||||
}
|
||||
|
||||
.el-menu-item:hover i {
|
||||
color: #eee;
|
||||
transition: 0.3s !important;
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-dark,
|
||||
.el-tooltip__popper[x-placement^='right'] .popper__arrow::after {
|
||||
background-color: var(--dv_bg-top);
|
||||
border-radius: var(--dv_md-rounded);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.el-tooltip__popper[x-placement^='right'] .popper__arrow::after {
|
||||
background-color: var(--dv_bg-top);
|
||||
}
|
||||
|
||||
/* Main Window Content */
|
||||
/* Feed */
|
||||
.x-app {
|
||||
background-color: var(--dv_bg-top);
|
||||
}
|
||||
|
||||
.x-container {
|
||||
background-color: var(--dv_bg-top);
|
||||
}
|
||||
|
||||
.x-container {
|
||||
border-top-left-radius: var(--dv_lg-rounded);
|
||||
border-bottom-left-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
.el-select:hover .el-input__inner {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-select > .el-input input,
|
||||
.el-select .el-input input {
|
||||
background-color: var(--dv_bg-bot);
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: var(--dv_bg-top);
|
||||
border: none;
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: var(--dv_background-modifier-hover);
|
||||
transition: 0.2s;
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-popper[x-placement^='bottom'] .popper__arrow,
|
||||
.el-popper[x-placement^='bottom'] .popper__arrow::after {
|
||||
border-bottom-color: var(--dv_bg-top);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: var(--dv_bg-bot);
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
.el-table thead {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.el-table .descending .sort-caret.descending,
|
||||
.el-table .ascending .sort-caret.ascending {
|
||||
border-top-color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom-color: #5f5f5f;
|
||||
}
|
||||
|
||||
.el-table tr,
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell {
|
||||
background-color: var(--dv_bg-top);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: var(--dv_bg-top);
|
||||
border: none;
|
||||
}
|
||||
|
||||
table.el-table__body[style^='width:'] tr[class='el-table__row']:hover td,
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td {
|
||||
background-color: var(--dv_background-modifier-hover);
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_1_column_1'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_1_column_1'] {
|
||||
border-top-left-radius: var(--dv_md-rounded);
|
||||
border-bottom-left-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_1_column_5'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_1_column_5'] {
|
||||
border-top-right-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
tr[class='el-table__row']:hover .el-table__expand-icon,
|
||||
tr[class='el-table__row el-table__row--striped']:hover .el-table__expand-icon {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.el-table__expanded-cell:hover {
|
||||
background-color: var(--dv_background-modifier-hover) !important;
|
||||
transition: 0.1s;
|
||||
border-bottom-left-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: var(--dv_background-modifier-selected);
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
padding: 8px;
|
||||
|
||||
> button.btn-prev {
|
||||
border-top-left-radius: var(--dv_sm-rounded);
|
||||
border-bottom-left-radius: var(--dv_sm-rounded);
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
> button.btn-next {
|
||||
border-top-right-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_sm-rounded);
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
> ul > li,
|
||||
button:disabled {
|
||||
background-color: var(--dv_bg-bot);
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
> button:hover {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination .el-select .el-input .el-input__inner {
|
||||
border-radius: var(--dv_sm-rounded);
|
||||
}
|
||||
|
||||
.el-pager li.active,
|
||||
.el-pager li:hover,
|
||||
.el-button--text:hover {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
background-color: var(--dv_bg-top);
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
border-color: transparent;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* Game Log */
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_2_column_6'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_2_column_6'] {
|
||||
border-top-left-radius: var(--dv_md-rounded);
|
||||
border-bottom-left-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_2_column_11'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_2_column_11'] {
|
||||
border-top-right-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav:first-child,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav:first-child:hover {
|
||||
border-top-left-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom: 2px solid var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-tabs__item:hover {
|
||||
border-bottom: 2px solid var(--dv_muted);
|
||||
}
|
||||
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav:last-child,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav:last-child:hover {
|
||||
border-top-right-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active,
|
||||
.el-tabs__item:hover {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:focus,
|
||||
.el-button.is-disabled:hover,
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
|
||||
background-color: var(--dv_background-modifier-hover);
|
||||
}
|
||||
|
||||
.el-button-group > .el-button:first-child {
|
||||
border-top-left-radius: var(--dv_md-rounded);
|
||||
border-bottom-left-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-button-group > .el-button:last-child {
|
||||
border-top-right-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-button-group > .el-button,
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text, .el-button--primary) {
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
|
||||
.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: #eee;
|
||||
}
|
||||
|
||||
.x-friend-item:hover,
|
||||
.x-change-image-item:hover {
|
||||
background-color: var(--dv_background-modifier-hover);
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
/* Favorites */
|
||||
.el-switch.is-checked .el-switch__core,
|
||||
span[class='el-switch__core'][style*='border-color'] {
|
||||
background-color: var(--dv_muted) !important;
|
||||
border-color: var(--dv_muted) !important;
|
||||
}
|
||||
|
||||
.el-switch__label.is-active {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: var(--dv_bg-top);
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
/* Friend Log */
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_4_column_21'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_4_column_21'] {
|
||||
border-top-left-radius: var(--dv_md-rounded);
|
||||
border-bottom-left-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_4_column_24'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_4_column_24'] {
|
||||
border-top-right-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
/* Moderation */
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_4_column_25'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_4_column_25'] {
|
||||
border-top-right-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
/* Notification */
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row']:hover
|
||||
td[class^='el-table_4_column_26'],
|
||||
table.el-table__body[style^='width:']
|
||||
tr[class='el-table__row el-table__row--striped']:hover
|
||||
td[class^='el-table_4_column_26'] {
|
||||
border-top-right-radius: var(--dv_md-rounded);
|
||||
border-bottom-right-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
/* Profile */
|
||||
.el-tree {
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
div[role='treeitem'][class*='is-focusable'] {
|
||||
background-color: var(--dv_bg-mid);
|
||||
}
|
||||
|
||||
.el-switch__core {
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
.el-radio-group label,
|
||||
.el-radio-button__inner {
|
||||
background-color: var(--dv_bg-bot);
|
||||
border: none;
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: var(--dv_muted);
|
||||
border-color: var(--dv_muted);
|
||||
box-shadow: none;
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-radio-button__inner:hover {
|
||||
color: #eee;
|
||||
background-color: var(--dv_background-modifier-hover);
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;']:after {
|
||||
content: var(--ThemeName) ' v' var(--ThemeVers) ' by ' var(--ThemeAuth);
|
||||
color: var(--dv_bright);
|
||||
float: right;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
.el-slider__bar {
|
||||
background-color: var(--dv_muted);
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
border-color: var(--dv_muted);
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
background-color: var(--dv_bg-top);
|
||||
border: none;
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: #eee;
|
||||
background-color: var(--dv_background-modifier-hover);
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-input-number__decrease:hover,
|
||||
.el-input-number__increase:hover {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager
|
||||
li:not(li.number, li[class*='btn-quicknext'], li[class*='btn-quickprev']) {
|
||||
background-color: var(--dv_bg-top);
|
||||
border: none;
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background-color: var(--dv_muted);
|
||||
border-color: var(--dv_muted);
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-button--primary:focus,
|
||||
.el-button--primary:hover {
|
||||
background-color: rgba(var(--dv_muted-rgb), 0.6);
|
||||
border-color: var(--dv_muted);
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
.el-textarea__inner:hover {
|
||||
background-color: var(--dv_bg-mid);
|
||||
}
|
||||
|
||||
.el-textarea .el-input__count {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
background-color: var(--dv_bg-top);
|
||||
border: none;
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
box-shadow: var(--shadow);
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.el-popper[x-placement^='top'] .popper__arrow,
|
||||
.el-popper[x-placement^='left'] .popper__arrow,
|
||||
.el-popper[x-placement^='right'] .popper__arrow,
|
||||
.el-popper[x-placement^='bottom'] .popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img.x-link,
|
||||
img.friends-list-avatar {
|
||||
border-radius: var(--dv_lg-rounded) !important;
|
||||
}
|
||||
|
||||
.el-tag--mini {
|
||||
height: 30px;
|
||||
padding: 5px 15px;
|
||||
font-size: 10pt;
|
||||
border-radius: var(--dv_md-rounded);
|
||||
}
|
||||
|
||||
.el-tag.el-tag--info,
|
||||
.el-tag--plain.el-tag--success {
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
.el-tag--plain.el-tag--warning,
|
||||
.el-tag--plain.el-tag--danger,
|
||||
.el-tag--plain {
|
||||
background-color: var(--dv_bg-mid);
|
||||
}
|
||||
|
||||
.el-tag--plain.el-tag--info {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--dv_muted);
|
||||
}
|
||||
|
||||
.el-input--mini .el-textarea__inner:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
i[class='el-icon-delete'],
|
||||
i[class='el-icon-switch-button'],
|
||||
.el-dropdown-menu--small
|
||||
.el-dropdown-menu__item.el-dropdown-menu__item--divided:has(
|
||||
i[class='el-icon-switch-button']
|
||||
) {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
i[class='el-icon-star-off']:not(.el-menu-item div.el-tooltip i) {
|
||||
color: #ffd000;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item--divided {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
background-color: var(--dv_bg-top);
|
||||
}
|
||||
|
||||
.el-tab-pane .el-radio-group[style^='margin-left: '] label {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked + .el-radio__label {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: var(--dv_bright);
|
||||
background-color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
background-color: var(--dv_bg-mid);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.el-input-group__append:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: var(--dv_bright);
|
||||
}
|
||||
|
||||
.x-aside-container {
|
||||
background-color: var(--dv_bg-bot);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--dv_bg-top) 0%,
|
||||
var(--dv_bg-bot) 25%,
|
||||
var(--dv_bg-bot) 100%
|
||||
);
|
||||
border-top-left-radius: 2rem;
|
||||
border-bottom-left-radius: var(--dv_lg-rounded);
|
||||
}
|
||||
|
||||
.el-dialog__wrapper[style^='z-index: '] {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.noty_theme__mint.noty_type__error,
|
||||
.noty_theme__mint.noty_type__success,
|
||||
.noty_theme__mint.noty_type__alert,
|
||||
.noty_theme__mint.noty_type__notification,
|
||||
.noty_theme__mint.noty_type__warning,
|
||||
.noty_theme__mint.noty_type__info,
|
||||
.noty_theme__mint.noty_type__information {
|
||||
border-radius: var(--dv_lg-rounded);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.noty_theme__mint.noty_type__success {
|
||||
color: #fff;
|
||||
background-color: var(--dv_muted);
|
||||
border-bottom: 1px solid var(--dv_bright);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--dv_bg-mid);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--dv_bg-bot);
|
||||
}
|
||||
|
||||
// User dialog memo: input count background color
|
||||
.x-friend-item:hover .el-input__count {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-collapse-item .el-tag--mini {
|
||||
border: transparent;
|
||||
background-color: var(--dv_bg-bot);
|
||||
}
|
||||
.el-color-picker__panel {
|
||||
background-color: var(--dv_bg-top);
|
||||
}
|
||||
.el-divider {
|
||||
background-color: #606266;
|
||||
}
|
||||
.el-divider__text {
|
||||
background: var(--dv_bg-top);
|
||||
color: #efefef;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.el-backtop {
|
||||
background-color: var(--dv_bg-top);
|
||||
color: var(--dv_muted);
|
||||
}
|
||||
|
||||
// Date picker
|
||||
.el-date-picker {
|
||||
background-color: var(--dv_bg-top);
|
||||
}
|
||||
.el-date-table td.current:not(.disabled) span {
|
||||
background-color: var(--dv_muted);
|
||||
}
|
||||
.el-date-table td.today span {
|
||||
color: var(--dv_muted);
|
||||
}
|
||||
.el-date-table td.available:hover span {
|
||||
background-color: var(--dv_muted);
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-table td.available:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.el-year-table td .cell:hover,
|
||||
.el-year-table td.current:not(.disabled) .cell {
|
||||
color: var(--dv_muted);
|
||||
}
|
||||
.el-month-table td.current:not(.disabled) .cell {
|
||||
color: var(--dv_muted);
|
||||
}
|
||||
.el-date-picker__header-label.active,
|
||||
.el-date-picker__header-label:hover {
|
||||
color: var(--dv_muted);
|
||||
}
|
||||
.el-picker-panel__icon-btn:hover {
|
||||
color: var(--dv_muted);
|
||||
}
|
||||
// Date picker end
|
||||
357
src/assets/scss/themes/theme.darkvanillaold.scss
Normal file
357
src/assets/scss/themes/theme.darkvanillaold.scss
Normal file
@@ -0,0 +1,357 @@
|
||||
/*
|
||||
* VRCX Dark-Vanilla theme by MintLily
|
||||
* https://github.com/MintLily/Dark-Vanilla
|
||||
*/
|
||||
@import 'theme.dark';
|
||||
:root {
|
||||
--ThemeName: 'Dark Vanilla';
|
||||
--ThemeVersion: 'v1.7';
|
||||
--ThemeAuthor: 'MintLily'; /* Discord: MintLily#0001 */
|
||||
|
||||
--blur: 3px;
|
||||
--blur-more: 8px;
|
||||
--farback: #131719;
|
||||
--mid: #191f22;
|
||||
--top: #1e2427;
|
||||
--top-border: #151a1c;
|
||||
--theme-text: #eecce0;
|
||||
--theme-text-muted: #906d92;
|
||||
--theme-text-rgb: 238, 204, 224;
|
||||
--theme-text-muted-rgb: 144, 109, 146;
|
||||
}
|
||||
|
||||
div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;']:after {
|
||||
content: var(--ThemeName) ' ' var(--ThemeVersion) ' by ' var(--ThemeAuthor);
|
||||
color: var(--theme-text);
|
||||
float: right;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
.x-menu-container {
|
||||
background: var(--top) !important;
|
||||
}
|
||||
.x-container {
|
||||
background: var(--farback) !important;
|
||||
}
|
||||
.x-aside-container {
|
||||
background: var(--mid) !important;
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-dark {
|
||||
background: rgba(var(--theme-text-muted-rgb), 0.2) !important;
|
||||
backdrop-filter: blur(var(--blur));
|
||||
}
|
||||
|
||||
.el-menu-item:focus,
|
||||
.el-menu-item:hover {
|
||||
background: var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
.el-menu-item.is-active::before {
|
||||
background: var(--theme-text) !important;
|
||||
}
|
||||
.el-menu-item.notify::after {
|
||||
background: var(--theme-text) !important;
|
||||
}
|
||||
.el-collapse-item__content,
|
||||
.el-collapse-item__wrap {
|
||||
background: var(--mid) !important;
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
|
||||
background: var(--top) !important;
|
||||
border: var(--top-border) !important;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner,
|
||||
.el-textarea .el-input__count,
|
||||
.el-input .el-input__count .el-input__count-inner {
|
||||
background: transparent;
|
||||
border: var(--top-border) !important;
|
||||
}
|
||||
|
||||
// User dialog memo: input count background color
|
||||
.x-friend-item:hover .el-input__count {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table th.is-leaf {
|
||||
background: var(--top) !important;
|
||||
/*border: 1px solid var(--top-border) !important;*/
|
||||
}
|
||||
|
||||
.el-table td,
|
||||
.el-table th.is-leaf {
|
||||
background: var(--top) !important;
|
||||
}
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background: var(--mid) !important;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .btn-prev {
|
||||
background: var(--mid) !important;
|
||||
}
|
||||
.el-pager li.active {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
.el-pager li.btn-quicknext,
|
||||
.el-pager li.btn-quickprev {
|
||||
color: var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-pager li:hover,
|
||||
.el-pagination button:hover {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.x-friend-item:hover,
|
||||
.x-change-image-item:hover {
|
||||
background: var(--theme-text-muted) !important;
|
||||
}
|
||||
|
||||
.el-popover,
|
||||
.el-dropdown-menu {
|
||||
background: var(--top) !important;
|
||||
border: var(--top-border) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background: var(--top) !important;
|
||||
border: var(--top-border) !important;
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
|
||||
background: var(--mid) !important;
|
||||
}
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
|
||||
background: var(--farback) !important;
|
||||
border: var(--top-border) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-tree,
|
||||
.el-message-box {
|
||||
background: rgba(38, 50, 56, 0.2) !important;
|
||||
border-color: rgba(38, 50, 56, 0.2) !important;
|
||||
backdrop-filter: blur(var(--blur));
|
||||
}
|
||||
.el-tree-node__content:hover {
|
||||
background: rgba(58, 69, 74, 0.6) !important;
|
||||
backdrop-filter: blur(var(--blur-more));
|
||||
}
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active,
|
||||
.el-radio__input.is-checked + .el-radio__label {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--theme-text) !important;
|
||||
}
|
||||
.el-tabs__item:hover {
|
||||
color: var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: var(--theme-text) !important;
|
||||
background: var(--theme-text) !important;
|
||||
}
|
||||
.el-radio__inner:hover {
|
||||
border-color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
border-color: var(--theme-text-muted) !important;
|
||||
background: var(--theme-text-muted) !important;
|
||||
}
|
||||
|
||||
.el-icon-star-on {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--info {
|
||||
background: var(--farback) !important;
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.noty_theme__mint.noty_type__success {
|
||||
background-color: var(--theme-text-muted) !important;
|
||||
border-bottom: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.noty_theme__mint.noty_type__error {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
border-color: var(--theme-text) !important;
|
||||
background: var(--theme-text) !important;
|
||||
color: black !important;
|
||||
}
|
||||
.el-button--primary:focus,
|
||||
.el-button--primary:hover {
|
||||
border-color: var(--theme-text-muted) !important;
|
||||
background: var(--theme-text-muted) !important;
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
|
||||
border-color: var(--theme-text-muted) !important;
|
||||
background: var(--theme-text-muted) !important;
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.el-radio-button__inner {
|
||||
background-color: var(--top) !important;
|
||||
border-color: var(--top) !important;
|
||||
}
|
||||
.el-radio-button__inner:hover {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: var(--theme-text-muted) !important;
|
||||
border-color: var(--theme-text-muted) !important;
|
||||
box-shadow: -1px 0 0 0 var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
background-color: var(--theme-text-muted) !important;
|
||||
border-color: var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-switch__label.is-active {
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
.el-tag {
|
||||
background: var(--farback);
|
||||
border-color: var(--farback);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: var(--theme-text);
|
||||
}
|
||||
|
||||
.toggle-switch li[data-v-3cf97114] > label {
|
||||
background-color: var(--top) !important;
|
||||
border-color: var(--top) !important;
|
||||
color: lightgrey !important;
|
||||
}
|
||||
|
||||
.toggle-switch li[data-v-3cf97114] > label:hover {
|
||||
background-color: var(--mid) !important;
|
||||
border-color: var(--mid) !important;
|
||||
color: var(--theme-text-muted) !important;
|
||||
}
|
||||
|
||||
.toggle-switch li[data-v-3cf97114] > label.selected {
|
||||
background-color: var(--mid) !important;
|
||||
border-color: var(--mid) !important;
|
||||
color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.el-slider__bar {
|
||||
background-color: var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-slider__button {
|
||||
border-color: var(--theme-text-muted) !important;
|
||||
}
|
||||
.el-table .descending .sort-caret.descending,
|
||||
.el-table .ascending .sort-caret.ascending {
|
||||
border-top-color: var(--theme-text) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: var(--farback);
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
background-color: var(--farback);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.el-progress-bar__inner {
|
||||
background-color: var(--theme-text);
|
||||
}
|
||||
.el-progress-bar__outer {
|
||||
background-color: var(--farback);
|
||||
}
|
||||
.el-button--text:focus,
|
||||
.el-button--text:hover {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
path[stroke='#20a0ff'] {
|
||||
stroke: var(--theme-text) !important;
|
||||
}
|
||||
path[stroke='#e5e9f2'] {
|
||||
stroke: var(--farback) !important;
|
||||
}
|
||||
|
||||
.el-collapse-item .el-tag--mini {
|
||||
border: transparent;
|
||||
background-color: #333 !important;
|
||||
}
|
||||
.el-divider {
|
||||
background-color: #606266;
|
||||
}
|
||||
.el-divider__text {
|
||||
background: var(--farback);
|
||||
color: #efefef;
|
||||
}
|
||||
.el-backtop {
|
||||
color: var(--theme-text-muted)
|
||||
}
|
||||
|
||||
// Date picker
|
||||
.el-date-table td.current:not(.disabled) span {
|
||||
background-color: var(--theme-text-muted);
|
||||
}
|
||||
.el-date-table td.today span {
|
||||
color: var(--theme-text-muted);
|
||||
}
|
||||
.el-date-table td.available:hover span {
|
||||
background-color: var(--theme-text-muted);
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-table td.available:hover {
|
||||
color: #fff
|
||||
}
|
||||
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
|
||||
color: var(--theme-text-muted);
|
||||
}
|
||||
.el-month-table td.current:not(.disabled) .cell {
|
||||
color: var(--theme-text-muted);
|
||||
}
|
||||
.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
|
||||
color: var(--theme-text-muted);
|
||||
}
|
||||
.el-picker-panel__icon-btn:hover {
|
||||
color: var(--theme-text-muted);
|
||||
}
|
||||
2070
src/assets/scss/themes/theme.material3.scss
Normal file
2070
src/assets/scss/themes/theme.material3.scss
Normal file
File diff suppressed because it is too large
Load Diff
421
src/assets/scss/themes/theme.pink.scss
Normal file
421
src/assets/scss/themes/theme.pink.scss
Normal file
@@ -0,0 +1,421 @@
|
||||
/*
|
||||
* VRCX Pink theme by Kamiya
|
||||
* https://github.com/kamiya10/VRCX-theme
|
||||
*/
|
||||
@import 'theme.dark';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
|
||||
:root {
|
||||
--theme: #dfa2a2;
|
||||
--bg: #322525;
|
||||
--light-bg: #443030;
|
||||
--lighter-bg: #554040;
|
||||
--lighter-lighter-bg: #655050;
|
||||
--lighter-lighter-lighter-bg: #756060;
|
||||
--lighter-lighter-lighter-lighter-bg: #857070;
|
||||
--lighter-border: #aa6065;
|
||||
--font: 'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
|
||||
'Noto Sans SC', sans-serif;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: var(--font);
|
||||
}
|
||||
.el-collapse-item__wrap,
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell,
|
||||
.el-table tr,
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table--mini .el-table__expanded-cell[class*='cell']:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:focus,
|
||||
.el-button.is-disabled:hover,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .btn-prev,
|
||||
.el-switch__core,
|
||||
.el-tree,
|
||||
.x-aside-container,
|
||||
.x-container,
|
||||
.x-login-container {
|
||||
background-color: var(--bg);
|
||||
}
|
||||
.el-pager li,
|
||||
.el-pager li.btn-quicknext,
|
||||
.el-pager li.btn-quickprev {
|
||||
color: #cbb;
|
||||
transition: color ease-in-out 0.1s;
|
||||
}
|
||||
.el-pager li:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.el-tree-node:focus > .el-tree-node__content,
|
||||
.el-tree-node__content:hover {
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled),
|
||||
.el-color-picker__panel,
|
||||
.el-dialog,
|
||||
.el-input .el-input__count .el-input__count-inner,
|
||||
.el-input__inner,
|
||||
.el-message-box,
|
||||
.el-pager li,
|
||||
.el-radio-button__inner,
|
||||
.el-select-dropdown,
|
||||
.el-textarea .el-input__count,
|
||||
.el-textarea__inner,
|
||||
.x-menu-container {
|
||||
background-color: var(--lighter-bg);
|
||||
}
|
||||
.el-color-picker__panel {
|
||||
border-color: var(--lighter-bg);
|
||||
}
|
||||
.el-button,
|
||||
.el-radio-button__inner {
|
||||
color: #dcc;
|
||||
}
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
|
||||
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
|
||||
.el-dropdown-menu,
|
||||
.x-change-image-item:hover,
|
||||
.x-friend-item:hover {
|
||||
background-color: var(--lighter-lighter-bg);
|
||||
color: #fff;
|
||||
}
|
||||
.el-button--primary {
|
||||
background-color: var(--theme);
|
||||
border-color: var(--theme);
|
||||
color: #fff;
|
||||
}
|
||||
.el-tooltip__popper.is-dark {
|
||||
background-color: var(--lighter-lighter-lighter-bg);
|
||||
}
|
||||
.el-button--primary:focus,
|
||||
.el-button--primary:hover {
|
||||
background-color: var(--lighter-lighter-lighter-lighter-bg);
|
||||
border-color: var(--lighter-lighter-lighter-lighter-bg);
|
||||
}
|
||||
.el-dialog,
|
||||
.el-dropdown-menu,
|
||||
.el-tooltip__popper.is-dark {
|
||||
box-shadow:
|
||||
0 3px 6px rgba(0, 0, 0, 0.16),
|
||||
0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.el-dropdown-menu__item,
|
||||
.x-friend-item {
|
||||
transition:
|
||||
background-color ease-in-out 0.1s,
|
||||
color ease-in-out 0.1s;
|
||||
}
|
||||
.el-dropdown-menu__item:focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: #fff;
|
||||
background-color: var(--lighter-lighter-lighter-bg);
|
||||
}
|
||||
.el-popper[x-placement^='bottom'] .popper__arrow,
|
||||
.el-popper[x-placement^='bottom'] .popper__arrow::after,
|
||||
.el-table th.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom-color: var(--lighter-lighter-bg);
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table tr {
|
||||
border-color: transparent;
|
||||
}
|
||||
.el-popper .popper__arrow,
|
||||
.el-popper .popper__arrow::after,
|
||||
.el-popper[x-placement^='top'] .popper__arrow,
|
||||
.el-popper[x-placement^='top'] .popper__arrow::after {
|
||||
border-top-color: var(--lighter-lighter-bg);
|
||||
}
|
||||
.el-dropdown-menu__item--divided::before,
|
||||
.el-menu-item:focus,
|
||||
.el-menu-item:hover,
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover,
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: var(--lighter-lighter-bg);
|
||||
}
|
||||
.el-input .el-input__count .el-input__count-inner,
|
||||
.el-input__inner,
|
||||
.el-textarea .el-input__count,
|
||||
.el-textarea__inner {
|
||||
border: var(--lighter-border);
|
||||
}
|
||||
.el-input-number {
|
||||
background-color: var(--lighter-bg);
|
||||
border: 1px solid #404040;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.el-input-number__decrease {
|
||||
border-right: 1px solid #404040;
|
||||
}
|
||||
.el-input-number__increase {
|
||||
border-left: 1px solid #404040;
|
||||
}
|
||||
.el-dropdown-menu__item--divided {
|
||||
border-top: 2px solid var(--lighter-lighter-lighter-lighter-bg);
|
||||
}
|
||||
.el-radio-button__inner {
|
||||
border: 1px solid var(--lighter-lighter-bg);
|
||||
}
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label,
|
||||
.el-menu-item.is-active,
|
||||
.el-pagination .btn-next:not(:disabled):hover .el-icon,
|
||||
.el-pagination .btn-prev:not(:disabled):hover .el-icon,
|
||||
.el-radio__input.is-checked + .el-radio__label,
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
|
||||
.el-tabs__item.is-active {
|
||||
color: var(--theme);
|
||||
transition: color ease-in-out 0.1s;
|
||||
}
|
||||
.el-pager .number:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.el-pager .number:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.el-menu-item i,
|
||||
.el-tabs__item,
|
||||
i.el-icon-close:hover {
|
||||
color: #cbb;
|
||||
transition: color ease-in-out 0.1s;
|
||||
}
|
||||
.el-button--text:focus,
|
||||
.el-button--text:hover,
|
||||
.el-tabs__item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.el-slider__bar,
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--theme);
|
||||
}
|
||||
.el-slider__button {
|
||||
border: 2px solid var(--theme);
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner,
|
||||
.el-radio__input.is-checked .el-radio__inner,
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
background-color: var(--theme);
|
||||
border-color: var(--theme);
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: -1px 0 0 0 var(--theme);
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.el-pager li.active,
|
||||
.el-radio-button__inner:not(.is-disabled):hover,
|
||||
.el-select-dropdown__item.selected,
|
||||
.el-switch__label.is-active {
|
||||
color: var(--theme);
|
||||
}
|
||||
.el-tag.el-tag--info {
|
||||
color: #baa;
|
||||
background-color: var(--lighter-lighter-bg);
|
||||
border: 1px solid var(--lighter-lighter-lighter-lighter-bg);
|
||||
}
|
||||
.el-collapse-item__header > span + span,
|
||||
.el-form-item__label,
|
||||
.el-pagination__total,
|
||||
.el-table th.el-table__cell > .cell,
|
||||
.el-table__expand-icon > .el-icon,
|
||||
.x-login-container div[style='text-align: center; font-size: 12px;'] > * {
|
||||
color: #baa !important;
|
||||
}
|
||||
.el-table .ascending .sort-caret.ascending {
|
||||
border-bottom-color: var(--theme);
|
||||
}
|
||||
.el-table .descending .sort-caret.descending {
|
||||
border-top-color: var(--theme);
|
||||
}
|
||||
.el-pagination button:disabled,
|
||||
.el-pagination button:disabled:focus,
|
||||
.el-pagination button:disabled:hover {
|
||||
background-color: transparent;
|
||||
color: transparent !important;
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after,
|
||||
.el-table::before,
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.options-container-item .name {
|
||||
color: #eeeaea;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border-color: transparent;
|
||||
}
|
||||
.options-container .header,
|
||||
h2 {
|
||||
color: #faeeee;
|
||||
}
|
||||
.options-container .sub-header {
|
||||
color: #988;
|
||||
}
|
||||
.el-table__row td:first-child {
|
||||
padding-left: 5px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.el-table__row td:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
border-color: var(--lighter-bg);
|
||||
}
|
||||
.el-popover {
|
||||
background-color: var(--lighter-bg);
|
||||
border-color: var(--lighter-border);
|
||||
}
|
||||
.x-menu-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.el-radio-button__orig-radio:disabled + .el-radio-button__inner {
|
||||
color: var(--lighter-lighter-lighter-bg);
|
||||
background-color: var(--light-bg);
|
||||
border-color: var(--lighter-bg);
|
||||
}
|
||||
.el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
|
||||
color: var(--lighter-lighter-lighter-bg);
|
||||
background-color: var(--lighter-bg);
|
||||
border-color: var(--lighter-bg);
|
||||
}
|
||||
.el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
|
||||
box-shadow: none;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.extra,
|
||||
.dialog-title,
|
||||
.x-link,
|
||||
.el-tree,
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
user-select: text;
|
||||
}
|
||||
.avatar-info-public::selection {
|
||||
color: hsl(100, 54%, 64%);
|
||||
}
|
||||
.avatar-info-own::selection {
|
||||
color: hsl(36, 77%, 72%);
|
||||
}
|
||||
::selection {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
||||
background-color: var(--lighter-lighter-lighter-bg);
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
|
||||
background-color: var(--lighter-lighter-bg);
|
||||
}
|
||||
.el-select .el-tag__close.el-icon-close {
|
||||
background-color: var(--lighter-lighter-bg);
|
||||
}
|
||||
input[type='checkbox'] + .el-switch__core {
|
||||
width: 36px !important;
|
||||
}
|
||||
input[type='checkbox']:checked + .el-switch__core {
|
||||
border-color: var(--theme) !important;
|
||||
background-color: var(--theme) !important;
|
||||
}
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--theme);
|
||||
}
|
||||
|
||||
// User dialog memo: input count background color
|
||||
.x-friend-item:hover .el-input__count {
|
||||
background-color: var(--lighter-lighter-bg);
|
||||
}
|
||||
|
||||
.el-collapse-item .el-tag--mini {
|
||||
border: transparent;
|
||||
background-color: #333;
|
||||
}
|
||||
.el-divider {
|
||||
background-color: #606266;
|
||||
}
|
||||
.el-divider__text {
|
||||
background: var(--bg);
|
||||
color: #efefef;
|
||||
}
|
||||
.el-backtop {
|
||||
background: var(--lighter-bg);
|
||||
color: var(--theme)
|
||||
}
|
||||
|
||||
// Date picker
|
||||
.el-date-picker {
|
||||
background-color: var(--lighter-bg);
|
||||
}
|
||||
.el-date-table td.current:not(.disabled) span {
|
||||
background-color: var(--lighter-bg);
|
||||
}
|
||||
.el-date-table td.today span {
|
||||
color: var(--theme);
|
||||
}
|
||||
.el-date-table td.available:hover span {
|
||||
background-color: var(--lighter-bg);
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-table td.available:hover {
|
||||
color: #fff
|
||||
}
|
||||
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
|
||||
color: var(--theme);
|
||||
}
|
||||
.el-month-table td.current:not(.disabled) .cell {
|
||||
color: var(--theme);
|
||||
}
|
||||
.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
|
||||
color: var(--theme);
|
||||
}
|
||||
.el-picker-panel__icon-btn:hover {
|
||||
color: var(--theme);
|
||||
}
|
||||
.el-month-table td .cell:hover {
|
||||
color: var(--theme);
|
||||
}
|
||||
.el-date-table td.disabled div {
|
||||
background-color: #3a2b2b
|
||||
}
|
||||
|
||||
.el-skeleton.is-animated .el-skeleton__item {
|
||||
background: linear-gradient(90deg, #4a3d3d 25%, #665252 37%, #4a3d3d 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: el-skeleton-loading 1.4s ease infinite;
|
||||
}
|
||||
Reference in New Issue
Block a user