diff --git a/src/styles/themes/_theme.dark_styles.scss b/src/styles/themes/_theme.dark_styles.scss deleted file mode 100644 index ec7ba29c..00000000 --- a/src/styles/themes/_theme.dark_styles.scss +++ /dev/null @@ -1,645 +0,0 @@ -@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 . -// - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.02); - border-radius: 8px; -} - -::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.1); - border-radius: 8px; -} - -::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.15); -} - -:root { - color-scheme: dark; - --el-button-hover-border-color: #{$--theme-primary}; -} - -html, -body { - background-color: $--theme-bg-1; -} - -body, -input, -textarea, -select, -button { - color: $--theme-text-1; -} - -.el-dialog, -.el-message-box { - border-radius: 28px !important; -} - -.el-dropdown-menu, -.el-select-dropdown, -.el-popover, -.el-picker-panel { - border: 1px solid hsl($--theme-hue, $--theme-saturation, 14%) !important; - box-shadow: 0 2px 12px hsla($--theme-hue, $--theme-saturation, 0%, 0.3) !important; -} - -.el-message-box { - border: 0px !important; - box-shadow: none !important; -} - -.el-loading-mask { - background-color: hsla( - $--theme-hue, - $--theme-saturation, - 0%, - 0.6 - ) !important; -} - -.el-textarea .el-input__count, -.el-input .el-input__count .el-input__count-inner { - background-color: $--theme-bg-5; -} - -.x-friend-item .el-textarea .el-input__count { - background-color: $--theme-bg-5; -} - -// User dialog memo: input count background color -.x-friend-item:hover .el-input__count { - background: hsl($--theme-hue, $--theme-saturation, 24%); -} - -.el-input-group__append, -.el-input-group__prepend { - color: $--theme-text-1; - background-color: $--theme-border-1; - border-color: $--theme-border-1; -} - -.el-input-number__decrease, -.el-input-number__increase { - background: unset; - color: $--theme-text-1; -} - -.el-input-number__decrease { - border-right: 1px solid hsla($--theme-hue, 20%, 87%, 0.2); -} - -.el-input-number__increase { - border-left: 1px solid hsla($--theme-hue, 20%, 87%, 0.2); -} - -.el-table tr, -.el-table td.el-table__cell, -.el-table th.el-table__cell { - background-color: hsl($--theme-hue, $--theme-saturation, 15%); - border-bottom: 1px solid $--theme-border-2; -} - -.el-table--border::after, -.el-table--group::after, -.el-table::before { - background-color: $--theme-border-2; -} - -.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { - background-color: $--theme-bg-3; -} - -.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { - background-color: hsl($--theme-hue, $--theme-saturation, 18%); -} - -.friend-view { - color: $--theme-text-2; - - .friend-view__toolbar, - .friend-view__loading-text, - .friend-view__slider-label, - .friend-view__settings-label { - color: $--theme-text-2; - } - - .friend-view__search .el-input__wrapper { - background: $--theme-bg-4; - box-shadow: inset 0 0 0 1px $--theme-border-2; - } - - .friend-view__instances { - background: none; - } - - .friend-view__instance { - background: hsla($--theme-hue, $--theme-saturation, 18%, 0.28); - border-radius: 14px; - border: 1px solid hsla($--theme-hue, $--theme-saturation, 42%, 0.15); - box-sizing: border-box; - } - - .friend-view__instance-header, - .friend-view__divider { - color: $--theme-text-1; - } - - .friend-view__instance-count { - color: rgba($--theme-text-1, 0.6); - } - - .friend-view__divider::before, - .friend-view__divider::after { - background: hsla($--theme-hue, $--theme-saturation, 48%, 0.15); - } - - .friend-view__empty { - color: rgba($--theme-text-1, 0.45); - } - - .friend-view__loading { - color: $--theme-text-2; - } -} - -.friend-view .friend-card { - background: hsla($--theme-hue, $--theme-saturation, 18%, 0.72) !important; - border: 1px solid hsla($--theme-hue, $--theme-saturation, 50%, 0.18) !important; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); - - &:hover { - box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); - } - - .friend-card__name { - color: $--theme-text-1; - } - - .friend-card__signature { - color: rgba($--theme-text-1, 0.65); - } - - .friend-card__world { - background: hsla($--theme-hue, $--theme-saturation, 44%, 0.22); - color: rgba($--theme-text-1, 0.8); - } - - .friend-card__location { - color: rgba($--theme-text-1, 0.85); - } - - .friend-card__status-dot { - border: 2px solid rgba(0, 0, 0, 0.55); - } - - .friend-card__avatar { - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.55); - } -} - -.el-pagination .btn-next, -.el-pagination .btn-prev { - color: $--theme-text-2; - background-color: $--theme-bg-4; -} - -.el-pagination button:disabled { - color: hsl($--theme-hue, $--theme-saturation, 40%); - background-color: $--theme-bg-4; -} - -.el-dialog { - background-color: $--theme-bg-4; -} - -div.x-friend-list - > div:nth-child(1) - > div - > div.el-textarea.el-input--small - > span.el-input__count { - background-color: $--theme-bg-4; -} - -.el-pager li { - background-color: $--theme-bg-5; - color: $--theme-text-2; -} - -.el-table { - color: $--theme-text-1; -} - -.el-pagination__total { - color: hsl($--theme-hue, $--theme-saturation, 73%); - margin: 0 10px; -} - -.el-tag--plain.el-tag--info { - background-color: $--theme-bg-5; -} - -.el-collapse-item .el-tag--small { - background-color: $--theme-bg-5; - border: transparent; -} - -.el-button { - color: $--theme-text-2; - background-color: transparent; -} - -.el-button.el-button--primary { - background-color: $--theme-primary !important; -} - -.el-button:not(.el-button--text, .el-button--primary, .is-disabled) { - // background-color: $--theme-bg-5; - border-color: $--theme-border-2; -} - -.el-button.is-text:not(.is-disabled):hover { - background-color: unset; -} - -.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: $--theme-text-1 !important; - background-color: $--theme-border-2; - border-color: var(--el-button-hover-border-color); -} - -.el-button.is-disabled, -.el-button.is-disabled:focus, -.el-button.is-disabled:hover { - color: hsl($--theme-hue, $--theme-saturation, 53%); - background-color: hsl($--theme-hue, $--theme-saturation, 15%); - border-color: $--theme-bg-5; -} - -.el-tabs--card > .el-tabs__header { - border-bottom-color: $--theme-border-2; -} - -.el-dropdown-menu { - background-color: $--theme-bg-4; - border-color: $--theme-border-2; -} - -.el-dropdown-menu__item--divided::before { - background-color: $--theme-border-2; -} - -.el-dropdown-menu__item { - color: hsl($--theme-hue, $--theme-saturation, 83%); -} - -.el-dropdown-menu__item:focus, -.el-dropdown-menu__item:not(.is-disabled):hover { - color: $--theme-primary; - background-color: hsl($--theme-hue, $--theme-saturation, 27%); -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::after { - border-bottom-color: $--theme-bg-5; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow { - border-bottom-color: $--theme-border-2; -} - -.el-form-item { - margin-bottom: 4px; -} - -.el-message-box { - background-color: $--theme-bg-4; -} - -.el-tree { - background: hsl($--theme-hue, $--theme-saturation, 12%); -} - -.el-menu-item i { - color: $--theme-info; -} - -.nav-menu-container { - .bottom-button { - color: $--theme-info; - } -} - -.el-menu-item.notify::after { - background: hsl($--theme-hue, 0%, 92%); -} - -.el-menu-item.is-active::before { - background: hsl($--theme-hue, 0%, 87%); -} - -.el-menu-item:focus, -.el-menu-item:hover { - background-color: $--theme-border-3; -} - -.el-tabs--card > .el-tabs__header .el-tabs__item { - border-left-color: $--theme-border-2; -} - -.el-tabs--card > .el-tabs__header .el-tabs__item.is-active { - border-bottom-color: hsl($--theme-hue, $--theme-saturation, 40%); - border-left-color: $--theme-border-2; -} - -.el-tabs--card > .el-tabs__header .el-tabs__nav { - border-color: $--theme-border-2; -} - -.el-collapse-item__header { - background-color: inherit; -} - -.el-collapse-item__wrap { - background-color: hsl($--theme-hue, $--theme-saturation, 16%); -} - -.el-message-box__title { - color: $--theme-text-2; -} - -.el-dialog__title { - color: $--theme-text-2; -} - -.el-message-box__content { - color: $--theme-text-2; -} - -.el-switch__core { - background-color: hsl($--theme-hue, $--theme-saturation, 13%); - border-color: hsl($--theme-hue, $--theme-saturation, 37%); -} - -.el-popover { - text-align: left; - word-break: break-word; - color: $--theme-text-2; - background-color: $--theme-bg-4; - border-color: hsl($--theme-hue, $--theme-saturation, 37%); -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow::after { - border-right-color: hsl($--theme-hue, $--theme-saturation, 37%); -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow { - border-right-color: hsl($--theme-hue, $--theme-saturation, 37%); -} - -.el-switch__label { - color: hsl($--theme-hue, $--theme-saturation, 63%); -} - -.el-table, -.el-table__expanded-cell { - background-color: inherit; -} - -.el-tree-node:focus > .el-tree-node__content { - background-color: hsl($--theme-hue, $--theme-saturation, 16%); -} - -.el-select-dropdown__item { - color: $--theme-text-2; -} - -.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { - background-color: $--theme-border-2; -} - -.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover { - background-color: $--theme-border-2; -} - -.el-select-dropdown__item.hover, -.el-select-dropdown__item:hover { - background-color: hsl($--theme-hue, $--theme-saturation, 24%); -} - -.el-tag { - background-color: $--theme-bg-5; - border-color: $--theme-border-2; - color: $--theme-primary; -} - -.el-tag.el-tag--success { - background-color: $--theme-bg-5; - border-color: $--theme-border-2; - color: $--theme-success; -} - -.el-tag.el-tag--info { - background-color: $--theme-bg-5; - border-color: $--theme-border-2; - color: $--theme-text-2; -} - -.el-tag.el-tag--warning { - background-color: $--theme-bg-5; - border-color: $--theme-border-2; - color: $--theme-warning; -} - -.el-tag.el-tag--danger { - background-color: $--theme-bg-5; - border-color: $--theme-border-2; - color: $--theme-danger; -} - -.el-table__expanded-cell:hover { - background-color: hsl($--theme-hue, $--theme-saturation, 19%) !important; -} - -.el-dialog__body { - color: $--theme-text-1; - word-break: break-word; - overflow-wrap: break-word; -} - -.el-radio { - color: $--theme-text-1; -} - -.el-radio-button__inner { - color: $--theme-text-1; - background: hsl($--theme-hue, $--theme-saturation, 34%); - border: 1px solid hsl($--theme-hue, $--theme-saturation, 40%); -} - -.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 hsl($--theme-hue, $--theme-saturation, 40%); -} - -.el-button { - color: $--theme-text-1; -} - -.el-form-item__label { - color: $--theme-text-2; -} - -.el-checkbox { - color: $--theme-text-2; -} - -.el-input.is-disabled .el-input__inner, -.el-input.is-disabled .el-input__wrapper { - background-color: hsl($--theme-hue, $--theme-saturation, 23%); -} - -.x-app { - background-color: $--theme-bg-1; -} - -.x-container { - background: $--theme-bg-3; -} - -.x-app > .x-container { - overflow: hidden auto !important; -} - -.x-login-container { - background-color: $--theme-bg-1; -} - -.x-aside-container { - background-color: $--theme-bg-2; -} - -.x-friend-list { - overflow: hidden auto !important; -} - -.x-friend-list > .x-friend-group { - color: $--theme-text-1; -} - -.x-friend-item:hover, -.x-change-image-item:hover { - background: hsl($--theme-hue, $--theme-saturation, 24%); -} - -.x-friend-item > .detail > .name { - color: $--theme-text-1; -} - -.x-friend-item > .detail > .extra, -.extra { - color: hsl($--theme-hue, 4%, 78%); -} - -.x-login-container p { - color: hsl($--theme-hue, 5%, 87%); -} - -.x-menu-container { - background: $--theme-bg-2; - overflow: hidden auto !important; -} - -.x-grey { - color: $--theme-text-3; -} - -.el-color-picker__panel { - background-color: $--theme-bg-3; -} - -.x-text-removed { - text-decoration: line-through; - color: hsl(0, 100%, 64%); - background-color: hsla(0, 100%, 50%, 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: $--theme-text-4; -} - -.el-divider__text { - background: $--theme-bg-3; - color: $--theme-text-1; -} - -.el-tabs__content { - overflow-y: auto !important; -} - -.el-date-picker { - background-color: $--theme-bg-3; -} - -.el-date-table td.disabled div { - background-color: hsl($--theme-hue, $--theme-saturation, 16%); - color: $--theme-text-4; -} - -.el-date-table td.next-month, -.el-date-table td.prev-month { - color: $--theme-text-4; -} - -.el-date-table th { - border-bottom: 1px solid hsl($--theme-hue, $--theme-saturation, 33%); -} - -.el-picker-panel { - border: 1px solid $--theme-border-2; - background-color: $--theme-bg-4; -} - -.el-year-table td.disabled .cell { - background-color: hsla($--theme-hue, $--theme-saturation, 0%, 0.2); -} - -.el-month-table td.disabled .cell { - background-color: hsla($--theme-hue, $--theme-saturation, 0%, 0.2); -} - -.el-color-picker__trigger { - border: none; -} - -.el-tooltip__popper { - box-shadow: $--box-shadow-dark !important; -} diff --git a/src/styles/themes/app_legacy.scss b/src/styles/themes/app_legacy.scss deleted file mode 100644 index fa105e71..00000000 --- a/src/styles/themes/app_legacy.scss +++ /dev/null @@ -1,1052 +0,0 @@ -@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 . -// - -@use '../fonts.css'; -@use '../flags.css'; -@use '../animated-emoji.css'; -@use 'index' as *; - -@use 'css-vars'; -@use '../../../node_modules/animate.css/animate.min.css'; -@use '../../../node_modules/noty/lib/noty.css'; -@use '../../../node_modules/remixicon/fonts/remixicon.css'; - -:root { - --font-western: - 'ellipsis-font', -apple-system, 'Inter', 'Segoe UI', 'Roboto', 'Ubuntu', - 'Cantarell', 'DejaVu Sans', sans-serif; - --font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - --font-fallback-cjk: sans-serif; - --font-primary-cjk: - 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR', 'Noto Sans TC'; -} -:root[lang='zh-CN'] { - --font-primary-cjk: - 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC'; -} -:root[lang='ja'] { - --font-primary-cjk: - 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC'; -} -:root[lang='ko'] { - --font-primary-cjk: - 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC'; -} -:root[lang='zh-TW'] { - --font-primary-cjk: - 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC'; -} -body { - font-family: - var(--font-western), var(--font-symbol), var(--font-primary-cjk), - var(--font-fallback-cjk); -} - -:root { - text-autospace: normal; -} - -html { - overflow: hidden; -} - -body { - margin: 0; -} - -a { - color: #409eff; -} - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.05); - border-radius: 16px; -} - -::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.2); - border-radius: 16px; -} - -.color-palettes { - background: #409eff; - background: #67c23a; - background: #e6a23c; - background: #f56c6c; - background: #909399; - background: #fd9200; - background: #e6e6e6; - background: #c0c4cc; -} - -.el-icon.is-loading { - animation: rotating 2s linear infinite; -} - -.noty_layout { - word-break: break-all; -} - -.noty_theme__mint.noty_bar { - position: relative; - margin: 4px 0; - overflow: hidden; - border-radius: 2px; -} - -.noty_theme__mint.noty_bar .noty_body { - padding: 10px; - font-size: 14px; -} - -.noty_theme__mint.noty_bar .noty_buttons { - padding: 10px; -} - -.noty_theme__mint.noty_type__alert, -.noty_theme__mint.noty_type__notification { - color: #2f2f2f; - background-color: #fff; - border-bottom: 1px solid #d1d1d1; -} - -.noty_theme__mint.noty_type__warning { - color: #fff; - background-color: #ffae42; - border-bottom: 1px solid #e89f3c; -} - -.noty_theme__mint.noty_type__error { - color: #fff; - background-color: #de636f; - border-bottom: 1px solid #ca5a65; -} - -.noty_theme__mint.noty_type__info, -.noty_theme__mint.noty_type__information { - color: #fff; - background-color: #7f7eff; - border-bottom: 1px solid #7473e8; -} - -.noty_theme__mint.noty_type__success { - color: #fff; - background-color: #afc765; - border-bottom: 1px solid #a0b55c; -} - -// .el-table + .pagination-bar { -// margin-top: 15px; -// } - -.el-table__expanded-cell[class*='cell'] { - padding: 20px 30px; -} - -.el-table--small .cell { - // fix expand arrow position - padding: 0px; -} - -// .el-table--mini .el-table__cell { -// padding: 5px 0; -// } - -// .el-table .cell { -// display: -webkit-box; -// -webkit-box-orient: vertical; -// -webkit-line-clamp: 1; -// } - -// .el-table__row:hover .el-table__cell .cell { -// display: revert; -// -webkit-line-clamp: unset; -// } - -// .el-table th.is-sortable .cell { -// display: flex; -// align-items: center; -// } - -// .el-table .caret-wrapper { -// margin-top: 4.5px; -// } - -// .notification-table .el-table .cell { -// -webkit-line-clamp: 2; -// } - -.el-dialog__body { - padding: 20px; - word-break: break-word; - overflow-wrap: break-word; -} - -.el-dialog__footer > .el-button + .el-button { - margin-left: 5px; -} - -.x-link { - cursor: pointer; -} - -.x-link:hover { - text-decoration: underline; -} - -.x-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.x-app { - display: flex; - width: 100vw; - height: 100vh; - overflow: hidden; - cursor: default; -} - -.x-container { - position: relative; - flex: 1; - padding: 10px; - overflow: hidden auto; - background: #fff; - box-sizing: border-box; - height: 100%; -} - -.x-login-container { - position: absolute; - // modal 시작이 2000이라서 - z-index: 1999; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background: #fff; -} - -.x-login { - display: grid; - grid-template-rows: repeat(2, auto); - align-items: center; - max-width: clamp(600px, 60svw, 800px); -} - -.x-login-form-container { - display: grid; - gap: 8px; - height: 380px; -} - -.x-login-form-container:has(> div:nth-child(3)) { - grid-template-columns: 1fr 1px 1fr; -} - -.x-login-form-container > div { - display: flex; - flex-direction: column; - min-height: 0; - padding: 16px; - overflow-y: auto; -} - -.x-scroll-wrapper { - width: 100%; - height: 100%; - overflow-y: auto; -} - -hr.x-vertical-divider { - height: 100%; - width: 100%; - margin: 0; - border: 0; - background: rgb(255 255 255 / 16%); -} - -.x-saved-account-list { - display: grid; - - > .x-friend-item { - width: 100%; - } -} - -.x-legal-notice-container { - margin-top: 8px; -} - -.x-menu-container { - flex: none; - overflow: hidden auto; - background: #f8f8f8; -} - -.el-menu-item i { - color: #000; -} - -.el-menu-item::before { - content: ''; - position: absolute; - left: -4px; - top: 50%; - height: 36px; - width: 3px; - translate: 0 -50%; - border-radius: 4px; - background: #303133; - transition: - background-color 0.4s, - left 0.2s; -} - -.el-menu-item.is-active::before { - left: 2px; - transition: left 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.552); -} - -.el-menu-item.notify::after { - position: absolute; - top: 4px; - right: 4px; - width: 4px; - height: 4px; - content: ''; - background: #303133; - border-radius: 50%; -} - -.pending-update { - height: 56px; - width: 64px; - cursor: pointer; -} - -.x-aside-container { - display: flex; - flex: none; - flex-direction: column; - background: #f8f8f8; - padding: 5px; - order: 99; - height: 100%; - box-sizing: border-box; -} - -// .el-popper.x-quick-search { -// width: 225px; -// min-width: 0 !important; -// border: none; -// } - -.el-popper.x-quick-search .el-select-dropdown__item { - width: 100%; - height: auto; - padding: 0 10px; - font-size: 12px; - line-height: normal; -} - -.x-friend-list { - padding: 0 10px; - overflow: hidden auto; -} - -.x-friend-group > .el-icon-arrow-right { - transition: transform 0.3s; -} - -.x-friend-group > .el-icon-arrow-right.rotate { - transform: rotate(90deg); -} - -.x-aside-container > .x-friend-list { - flex: 1; -} - -.x-dialog .x-friend-list { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - max-height: 300px; -} - -.x-friend-list > .x-friend-group { - padding: 20px 0 5px; - font-size: 12px; - font-weight: bold; -} - -.x-friend-item { - box-sizing: border-box; - display: flex; - align-items: center; - padding: 5px; - font-size: 12px; - cursor: pointer; -} - -.x-friend-item:hover { - background: #f0f0f0; - border-radius: 2px; -} - -.x-friend-item-no-hover:hover { - background: unset !important; -} - -.x-friend-item-border:hover { - border-top-left-radius: 25px; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 25px; -} - -.x-aside-container > .x-friend-list > .x-friend-item:hover { - background: #fff; - border-radius: 2px; -} - -// .el-select-dropdown__item .x-friend-item:hover { -// background: none; -// border-radius: 0; -// } - -.x-dialog .x-friend-item { - width: 167px; -} - -.x-friend-item > .avatar { - position: relative; - display: inline-block; - flex: none; - width: 40px; - height: 40px; - margin-right: 8px; -} - -.x-friend-item > img.avatar, -img.friends-list-avatar { - width: unset; - height: 22.5px; - margin-right: 0; - margin-left: 5px; - border-radius: 2px; -} - -.x-friend-item > .avatar > img { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; -} - -.x-friend-item > .avatar.active > img { - filter: grayscale(1); -} - -.x-friend-item:hover > .avatar.offline > img, -.x-friend-item:hover > .avatar.active > img { - filter: none; -} - -.x-user-badge-hidden { - filter: grayscale(1); -} - -.x-user-badge:hover { - filter: none; -} - -.x-friend-item > .avatar.online.mobile > img, -.x-friend-item > .avatar.joinme.mobile > img, -.x-friend-item > .avatar.askme.mobile > img, -.x-friend-item > .avatar.busy.mobile > img { - mask-image: url(./assets/images/masks/usercutoutmobile.svg); -} - -.x-friend-item > .avatar.online.mobile::after, -.x-friend-item > .avatar.joinme.mobile::after, -.x-friend-item > .avatar.askme.mobile::after, -.x-friend-item > .avatar.busy.mobile::after { - position: absolute; - right: -2px; - bottom: 0px; - width: 14px; - height: 14px; - content: ''; - border-radius: 0px; - mask-image: url(./assets/images/masks/phone.svg); -} - -.x-friend-item > .avatar.active > img, -.x-friend-item > .avatar.online > img, -.x-friend-item > .avatar.joinme > img, -.x-friend-item > .avatar.askme > img, -.x-friend-item > .avatar.busy > img, -.x-friend-item > .avatar.offline > img { - mask-image: url(./assets/images/masks/usercutout.svg); -} - -.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, -.x-friend-item > .avatar.offline::after { - position: absolute; - right: 1px; - bottom: 1px; - width: 9px; - height: 9px; - content: ''; - background: #909399; - border-radius: 50%; -} - -.x-friend-item > .avatar.active::after { - background: #f4e05e; -} - -.x-friend-item > .avatar.online::after { - background: #67c23a; -} - -.x-friend-item > .avatar.joinme::after { - background: #409eff; - mask-image: url(./assets/images/masks/joinme.svg); -} - -.x-friend-item > .avatar.askme::after { - background: #ff9500; - mask-image: url(./assets/images/masks/askme.svg); -} - -.x-friend-item > .avatar.busy::after { - background: #ff2c2c; - mask-image: url(./assets/images/masks/busy.svg); -} - -.x-friend-item > .avatar.offline::after { - background: #909399; -} - -.x-friend-item.offline > .avatar::after { - display: none; -} - -.x-friend-item > .detail { - flex: 1; - overflow: hidden; -} - -.x-friend-item > .detail > .name, -.x-friend-item > .detail > .extra { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.x-friend-item > .detail > .name { - font-weight: bold; - color: #303133; -} - -.x-friend-item > .detail > .extra, -.extra { - font-weight: normal; - color: #606266; -} - -.x-friend-item > .vrcplus-icon { - border: 4px solid #dcdfe6; - border-radius: 20px; - width: 200px; - height: 200px; - cursor: pointer; -} - -.x-friend-item > .current-vrcplus-icon { - border: 4px solid #67c23a; - cursor: default; -} - -.x-friend-item > .vrcplus-icon > img { - width: 100%; - height: 100%; - border-radius: 15px; - object-fit: cover; -} - -.x-change-image-item { - display: inline-block; - padding: 4px 4px 0 4px; -} - -.x-change-image-item:hover { - background: #f0f0f0; - border-radius: 2px; -} - -// .x-change-image-item > img, -// .x-change-image-item > .el-popover__reference-wrapper > img { -// width: 240px; -// height: 180px; -// } - -// .x-dialog { -// max-width: 100%; -// } - -.x-user-dialog > .el-dialog__header, -.x-world-dialog > .el-dialog__header, -.x-avatar-dialog > .el-dialog__header, -.x-group-dialog > .el-dialog__header { - display: none; - padding: 0; -} - -// .x-user-dialog > .el-dialog__body, -// .x-world-dialog > .el-dialog__body, -// .x-avatar-dialog > .el-dialog__body, -// .x-group-dialog > .el-dialog__body { -// padding: 20px; -// } - -// .el-popper.hex { -// min-width: auto; -// padding: 10px; -// font-family: monospace; -// text-align: center; -// } - -i.x-user-status, -i.x-status-icon { - display: inline-block; - width: 10px; - height: 10px; - background: #808080; - border-radius: 50%; -} - -i.x-user-status.active { - background: #f4e05e; -} - -i.x-user-status.online { - background: #67c23a; -} - -i.x-user-status.joinme { - background: #409eff; - mask-image: url(./assets/images/masks/joinme.svg); -} - -i.x-user-status.askme { - background: #ff9500; - mask-image: url(./assets/images/masks/askme.svg); -} - -i.x-user-status.busy { - background: #ff2c2c; - mask-image: url(./assets/images/masks/busy.svg); -} - -i.x-status-icon.green { - background: #67c23a; -} - -i.x-status-icon.blue { - background: #409eff; -} - -i.x-status-icon.orange { - background: #ff9500; -} - -i.x-status-icon.red { - background: #ff2c2c; -} - -.x-tag-friend { - color: rgb(255, 208, 0); - border-color: rgb(255, 208, 0) !important; -} - -.x-tag-mutual-friend { - color: #67c23a; - border-color: #67c23a !important; -} - -.x-tag-platform-pc { - color: #409eff; - border-color: #409eff !important; -} - -.x-tag-platform-quest { - color: #67c23a; - border-color: #67c23a !important; -} - -.x-tag-platform-ios { - color: #c7c7ce; - border-color: #c7c7ce !important; -} - -.x-tag-platform-other { - color: #ff4177; - border-color: #ff4177 !important; -} - -.x-tag-age-verification { - color: #5c70ec; - border-color: #5c70ec !important; -} - -.x-tag-border-left { - border-left: 0.8px solid; - margin-left: 5px; - padding-left: 5px; - padding-bottom: 0.5px; -} - -.x-grey { - color: #909399; -} - -.x-popover-image { - max-width: 100%; - max-height: 100%; -} - -.el-card.x-image-selected { - border-color: var(--el-color-primary) !important; -} - -// .el-tree-node { -// white-space: normal; -// } - -// .el-tree-node__content { -// height: auto; -// } - -// .el-progress-bar { -// padding-right: 80px; -// margin-right: -85px; -// } - -// .el-progress__text { -// color: #c8c8c8; -// } - -// .x-user-dialog .el-textarea__inner { -// padding: 0; -// background: none; -// border: 0; -// border-radius: 2px; -// } - -.options-container { - margin-top: 30px; - padding: 0px 10px 10px 10px; -} - -.options-container .header-bar { - display: flex; - align-items: center; -} - -.options-container .header { - font-weight: bold; - font-size: 20px; -} - -.options-container .sub-header { - font-weight: bold; - font-size: 15px; -} - -.options-container-item { - font-size: 12px; - margin-top: 5px; -} - -.options-container-item .name { - display: inline-block; - width: 235px; -} - -.toggle-switch { - display: inline-block; -} - -.toggle-list { - font-size: 15px; -} - -.toggle-list .toggle-item { - margin-bottom: 5px; -} - -.toggle-list .toggle-name { - display: inline-block; - min-width: 190px; - padding-right: 10px; - text-align: right; -} - -.color-picker { - font-size: 18px; - vertical-align: top; -} - -// .el-color-picker__trigger { -// border: unset; -// } - -// .el-color-picker__color { -// border: 0.5px solid #999; -// } - -.x-dialog .el-button--success { - background-color: #67c23a !important; - border-color: #67c23a !important; -} - -.x-dialog .el-button--danger { - background-color: #f56c6c !important; - border-color: #f56c6c !important; -} - -.x-dialog .el-button--warning { - background-color: #e6a23c !important; - border-color: #e6a23c !important; -} - -.avatar-info { - cursor: pointer; - width: fit-content; - vertical-align: top; -} - -.avatar-info-own { - display: inline-block; - color: #e6a23c; -} - -.avatar-info-public { - display: inline-block; - color: #67c23a; -} - -.avatar-info-unknown { - display: inline-block; - color: #f56c6c; -} - -// .el-form-item { -// margin-bottom: 4px; -// } - -// .photon-event-table .el-table--mini .el-table__cell, -// .current-instance-table .el-table--mini .el-table__cell { -// padding: 0; -// } - -.photon-event-table { - margin-top: 20px; -} - -.current-instance-table img.friends-list-avatar { - width: unset; - height: 16px; - margin-right: 0; - margin-left: 1px; - margin-top: 4px; - border-radius: 2px; - margin-bottom: -1px; -} - -// .el-pagination .el-select .el-input .el-input__inner, -// .el-input--mini .el-input__icon { -// height: 22px; -// } - -// .el-pagination .btn-next { -// margin-right: 10px; -// } - -.el-dialog, -.el-message-box { - border-radius: 28px; - word-break: break-word; -} - -// .el-tabs__nav-wrap::after { -// background-color: #e4e7ed14; -// } - -.dialog-title { - font-weight: bold; -} - -.vrc-instance-queue-message { - padding: 3px; - top: 0 !important; -} - -// .vrc-instance-queue-message .el-message__content { -// margin-right: 20px; -// } - -// .el-tabs { -// display: flex; -// flex-direction: column; -// } - -.el-tabs__content { - // flex: 1; - // max-height: 100%; - overflow-y: auto; -} - -.x-aside-container .el-tabs, -.x-aside-container .el-tabs__nav-wrap, -.x-aside-container .el-tabs__item { - padding: 0 !important; - font-size: 13px; -} - -// .el-tabs__header { -// padding: 0 1px; -// } - -// .zero-margin-tabs .el-tabs__header { -// margin-bottom: 0; -// } - -// .x-friend-item .el-checkbox__inner, -// .el-table__row .el-checkbox__inner { -// width: 28px; -// height: 28px; -// border-radius: 4px; -// } - -// .x-friend-item .el-checkbox__inner::after, -// .el-table__row .el-checkbox__inner::after { -// width: 8px; -// height: 14px; -// left: 8px; -// top: 2px; -// } - -// .el-pagination .el-input .el-input__icon { -// line-height: 22px; -// } - -// .el-dialog__body .el-tag--mini { -// line-height: 17px; -// } - -// .el-table__expanded-cell .el-tag--mini { -// line-height: 18px; -// } - -// .x-friend-item:hover .el-input__count { -// background: #f0f0f0; -// } - -.x-app > .x-container { - padding-top: 15px; -} - -// .el-collapse-item .el-tag--mini { -// line-height: 17px; -// } - -.x-text-removed { - text-decoration: line-through; - color: #ff0000; - background-color: rgba(255, 0, 0, 0.2); - padding: 2px 2px; - border-radius: 4px; -} - -.x-text-added { - color: rgb(35, 188, 35); - background-color: rgba(76, 255, 80, 0.2); - padding: 2px 2px; - border-radius: 4px; -} - -// expand table cell on hover, TODO: replace with a better solution -.el-table .cell { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; -} - -.el-table__row:hover .el-table__cell .cell { - display: revert; - -webkit-line-clamp: unset; -} - -.el-carousel__mask { - // looks bad - display: none; -} - -// FIXME -// Something changed the CSS of element-ui -// The other parts are the same -// It feels like can't fundamentally modify it -// And can only fix it bit by bit by overriding -// .el-switch__core:after { -// top: 1.5px; -// } - -// .el-popover { -// text-align: left; -// word-break: break-word; -// } - -.el-dropdown-menu__item:not(.is-disabled):focus { - // dropdown item focus blue background looks bad - background-color: unset; -} - -:root { - --el-overlay-color-lighter: rgba(0, 0, 0, 0.15); -} - -// fix fullscreen image viewer colors in dark mode -.toolbar-icon, -.el-image-viewer__actions, -.el-image-viewer__close { - color: var(--el-color-info-dark-2); - background-color: var(--el-bg-color); -} - -.el-alert__title { - padding: 5px; -} diff --git a/src/styles/themes/theme.amoled.scss b/src/styles/themes/theme.amoled.scss deleted file mode 100644 index e6749d84..00000000 --- a/src/styles/themes/theme.amoled.scss +++ /dev/null @@ -1,334 +0,0 @@ -@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 . -// - -@use 'sass:color'; - -$--theme-hue: 0; -$--theme-saturation: 0%; - -// AMOLED background tones -// #0f0f0f -$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%); -$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 6%); -$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 6%); -$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 7%); -$--theme-bg-5: hsl($--theme-hue, $--theme-saturation, 9%); - -$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 8%); -$--theme-border-2: hsla($--theme-hue, $--theme-saturation, 6%, 0.5); -$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 12%); - -$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 85%); -$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 70%); -$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 68%); -$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%); - -$--theme-primary: #b18fff; -$--theme-success: #67c23a; -$--theme-warning: #e6a23c; -$--theme-danger: #f56c6c; -$--theme-info: #909399; - -$--border-color-lighter: hsl($--theme-hue, $--theme-saturation, 16%); -$--border-color-extra-light: hsl($--theme-hue, $--theme-saturation, 15%); -$--background-color-base: hsl($--theme-hue, $--theme-saturation, 16%); -$--input-focus-border: hsl($--theme-hue, $--theme-saturation, 33%); -$--table-header-background-color: hsl($--theme-hue, $--theme-saturation, 15%); -$--table-row-hover-background-color: hsl( - $--theme-hue, - $--theme-saturation, - 18% -); -$--skeleton-to-color: hsl($--theme-hue, $--theme-saturation, 33%); -$--tree-node-hover-background-color: hsl( - $--theme-hue, - $--theme-saturation, - 16% -); -$--collapse-content-font-color: hsl($--theme-hue, $--theme-saturation, 66%); -$--message-close-icon-color: hsl($--theme-hue, $--theme-saturation, 60%); -$--dropdown-menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); -$--box-shadow-base: 0 1px 2px hsla($--theme-hue, $--theme-saturation, 0%, 0.1); -$--box-shadow-dark: 0 1px 3px hsla($--theme-hue, $--theme-saturation, 0%, 0.15); -$--calendar-selected-background-color: rgba($--theme-primary, 0.1); - -@forward 'var' with ( - $colors: ( - 'white': $--theme-text-1, - 'black': $--theme-bg-1, - 'primary': ( - 'base': $--theme-primary - ), - 'success': ( - 'base': $--theme-success - ), - 'warning': ( - 'base': $--theme-warning - ), - 'danger': ( - 'base': $--theme-danger - ), - 'error': ( - 'base': $--theme-danger - ), - 'info': ( - 'base': $--theme-info - ) - ), - $text-color: ( - 'primary': $--theme-text-1, - 'regular': $--theme-text-2, - 'secondary': $--theme-info, - 'placeholder': $--theme-text-4, - 'disabled': $--theme-text-4 - ), - $border-color: ( - '': $--theme-border-1, - 'light': $--theme-border-2, - 'lighter': $--border-color-lighter, - 'extra-light': $--border-color-extra-light, - 'dark': $--theme-border-1, - 'darker': $--theme-border-2 - ), - $fill-color: ( - '': $--background-color-base, - 'light': $--theme-bg-4, - 'lighter': $--theme-bg-5, - 'extra-light': $--border-color-extra-light, - 'dark': $--theme-bg-2, - 'darker': $--theme-bg-1, - 'blank': $--theme-bg-4 - ), - $bg-color: ( - '': $--theme-bg-2, - 'page': $--theme-bg-1, - 'overlay': $--theme-bg-4 - ), - $box-shadow: ( - '': ( - 0px 12px 32px 4px rgba(0, 0, 0, 0.36), - 0px 8px 20px rgba(0, 0, 0, 0.72) - ), - 'light': ( - 0px 0px 12px rgba(0, 0, 0, 0.72) - ), - 'lighter': ( - 0px 0px 6px rgba(0, 0, 0, 0.72) - ), - 'dark': ( - 0px 16px 48px 16px rgba(0, 0, 0, 0.72), - 0px 12px 32px rgba(0, 0, 0, 0.72), - 0px 8px 16px -8px rgba(0, 0, 0, 0.96) - ) - ), - $disabled: ( - 'bg-color': $--theme-bg-5, - 'text-color': $--theme-text-4, - 'border-color': $--theme-border-2 - ) -); - -$--color-primary: $--theme-primary; -$--color-success: $--theme-success; -$--color-warning: $--theme-warning; -$--color-danger: $--theme-danger; -$--color-info: $--theme-info; - -$--color-white: $--theme-text-1; -$--color-black: $--theme-bg-1; - -$--color-text-primary: $--theme-text-1; -$--color-text-regular: $--theme-text-2; -$--color-text-secondary: $--theme-info; -$--color-text-placeholder: $--theme-text-4; - -$--border-color-base: $--theme-border-1; -$--border-color-light: $--theme-bg-5; - -$--button-default-background-color: $--theme-bg-5; -$--button-default-border-color: $--theme-border-2; -$--button-default-font-color: $--theme-text-2; - -$--input-background-color: $--theme-bg-5; -$--input-border-color: $--theme-border-1; -$--input-font-color: $--theme-text-1; - -$--select-input-focus-border-color: $--input-focus-border; - -$--dialog-background-color: $--theme-bg-4; -$--popover-background-color: $--theme-bg-4; - -$--table-border-color: $--theme-border-2; - -$--pagination-font-color: $--theme-text-2; -$--pagination-background-color: $--theme-bg-4; - -$--tooltip-fill: $--theme-bg-4; -$--tooltip-color: $--theme-text-1; -$--tooltip-border-color: $--theme-bg-4; - -$--backtop-background-color: $--theme-bg-5; -$--backtop-font-color: $--theme-text-2; -$--backtop-hover-background-color: $--theme-border-2; - -$--datepicker-font-color: $--theme-text-1; -$--datepicker-header-font-color: $--theme-text-1; -$--datepicker-icon-color: $--theme-text-1; - -$--skeleton-color: $--theme-bg-5; - -$--select-dropdown-background: $--theme-bg-4; -$--select-dropdown-border: 1px solid $--theme-border-1; - -$--tree-font-color: $--theme-text-2; - -$--menu-item-font-color: $--theme-text-2; -$--menu-background-color: $--theme-bg-2; - -$--collapse-header-background-color: $--theme-bg-5; -$--collapse-content-background-color: $--theme-bg-4; -$--collapse-border-color: $--theme-border-2; -$--collapse-header-font-color: $--theme-text-2; - -$--message-background-color: $--theme-bg-5; -$--message-close-hover-color: $--theme-text-2; -$--message-success-font-color: #52c41a; -$--message-info-font-color: #1890ff; -$--message-warning-font-color: #faad14; -$--message-danger-font-color: #ff4d4f; - -$--pagination-hover-color: $--theme-text-4; - -$--card-background-color: $--theme-bg-4; - -:root { - --group-calendar-event-bg: #{$--calendar-selected-background-color}; - --group-calendar-badge-following: #{color.adjust( - $--theme-primary, - $lightness: 20% - )}; - --group-calendar-badge-normal: #{$--theme-info}; -} - -@import 'theme.dark_styles'; - -.el-table tr, -.el-table td.el-table__cell, -.el-table th.el-table__cell { - background-color: hsl($--theme-hue, $--theme-saturation, 6%); -} - -.el-radio-button__inner { - background: hsl($--theme-hue, $--theme-saturation, 9%); - border: 1px solid hsl($--theme-hue, $--theme-saturation, 12%); -} - -.el-tree { - background: hsl($--theme-hue, $--theme-saturation, 9%); -} - -.x-menu-container { - border-right: 1px solid $--theme-bg-5; -} - -.x-aside-container { - border-left: 1px solid $--theme-bg-5; -} - -.x-friend-item:hover, -.x-change-image-item:hover, -.el-select-dropdown__item.hover, -.el-select-dropdown__item:hover, -.el-dropdown-menu__item:focus, -.el-dropdown-menu__item:not(.is-disabled):hover, -.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell, -.x-friend-item:hover .el-input__count { - background: hsl($--theme-hue, $--theme-saturation, 9%); - color: $--color-primary; -} - -.x-friend-item:hover, -.x-change-image-item:hover { - color: $--color-primary; -} - -// Tag background variants -@each $type in success, warning, danger { - .el-tag--plain.el-tag--#{$type} { - background-color: hsl($--theme-hue, $--theme-saturation, 9%); - } -} - -.el-calendar { - background-color: $--theme-bg-4 !important; -} - -.el-calendar__title { - color: $--theme-text-1 !important; -} - -.el-card { - background-color: $--theme-bg-5 !important; - border-color: $--theme-border-1 !important; -} - -.el-descriptions__body { - background-color: $--theme-bg-4 !important; - color: $--theme-text-1 !important; -} - -.el-timeline-item__tail { - border-left-color: #{color.adjust($--theme-primary, $lightness: 20%)} !important; -} - -.el-timeline-item__node { - background-color: #{color.adjust($--theme-primary, $lightness: 20%)} !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow { - border-top-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow::after { - border-top-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow { - border-bottom-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::after { - border-bottom-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow { - border-left-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow::after { - border-left-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow { - border-right-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow::after { - border-right-color: $--theme-bg-4 !important; -} - -// Group Calendar Dialog borders -.search-container { - border-bottom-color: $--border-color-light !important; -} - -.group-header { - border-bottom-color: $--border-color-light !important; -} diff --git a/src/styles/themes/theme.dark.scss b/src/styles/themes/theme.dark.scss deleted file mode 100644 index 33aa8dd5..00000000 --- a/src/styles/themes/theme.dark.scss +++ /dev/null @@ -1,281 +0,0 @@ -@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 . -// - -$--theme-hue: 0; -$--theme-saturation: 0%; - -$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%); // #101010 -$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 9%); // #171717 -$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 13%); // #222222 -$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 17%); // #2b2b2b -$--theme-bg-5: hsl($--theme-hue, $--theme-saturation, 20%); // #333333 - -$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 23%); // #3a3a3a -$--theme-border-2: hsl($--theme-hue, $--theme-saturation, 25%); // #404040 -$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 31%); // #505050 - -$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 100%); // #ffffff -$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 78%); // #c8c8c8 -$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 70%); // #b3b3b3 -$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%); // #606266 - -$--theme-primary: #66b1ff; -$--theme-success: #67c23a; -$--theme-warning: #e6a23c; -$--theme-danger: #f56c6c; -$--theme-info: #909399; - -$--border-color-lighter: hsl($--theme-hue, $--theme-saturation, 16%); -$--border-color-extra-light: hsl($--theme-hue, $--theme-saturation, 15%); -$--background-color-base: hsl($--theme-hue, $--theme-saturation, 16%); -$--input-focus-border: hsl($--theme-hue, $--theme-saturation, 33%); -$--table-header-background-color: hsl($--theme-hue, $--theme-saturation, 15%); -$--table-row-hover-background-color: hsl( - $--theme-hue, - $--theme-saturation, - 18% -); -$--skeleton-to-color: hsl($--theme-hue, $--theme-saturation, 33%); -$--tree-node-hover-background-color: hsl( - $--theme-hue, - $--theme-saturation, - 16% -); -$--collapse-content-font-color: hsl($--theme-hue, $--theme-saturation, 66%); -$--message-close-icon-color: hsl($--theme-hue, $--theme-saturation, 60%); -$--dropdown-menu-box-shadow: 0 2px 12px - hsla($--theme-hue, $--theme-saturation, 0%, 0.15); -$--box-shadow-base: 0 1px 2px hsla($--theme-hue, $--theme-saturation, 0%, 0.1); -$--box-shadow-dark: 0 1px 3px hsla($--theme-hue, $--theme-saturation, 0%, 0.15); -$--calendar-selected-background-color: rgba($--theme-primary, 0.1); - -@forward 'var' with ( - $colors: ( - 'white': $--theme-text-1, - 'black': $--theme-bg-1, - 'primary': ( - 'base': $--theme-primary - ), - 'success': ( - 'base': $--theme-success - ), - 'warning': ( - 'base': $--theme-warning - ), - 'danger': ( - 'base': $--theme-danger - ), - 'error': ( - 'base': $--theme-danger - ), - 'info': ( - 'base': $--theme-info - ) - ), - $text-color: ( - 'primary': $--theme-text-1, - 'regular': $--theme-text-2, - 'secondary': $--theme-info, - 'placeholder': $--theme-text-4, - 'disabled': $--theme-text-4 - ), - $border-color: ( - '': $--theme-border-1, - 'light': $--theme-border-2, - 'lighter': $--border-color-lighter, - 'extra-light': $--border-color-extra-light, - 'dark': $--theme-border-1, - 'darker': $--theme-border-2 - ), - $fill-color: ( - '': $--background-color-base, - 'light': $--theme-bg-4, - 'lighter': $--theme-bg-5, - 'extra-light': $--border-color-extra-light, - 'dark': $--theme-bg-2, - 'darker': $--theme-bg-1, - 'blank': $--theme-bg-4 - ), - $bg-color: ( - '': $--theme-bg-2, - 'page': $--theme-bg-1, - 'overlay': $--theme-bg-4 - ), - $box-shadow: ( - '': ( - 0px 12px 32px 4px rgba(0, 0, 0, 0.36), - 0px 8px 20px rgba(0, 0, 0, 0.72) - ), - 'light': ( - 0px 0px 12px rgba(0, 0, 0, 0.72) - ), - 'lighter': ( - 0px 0px 6px rgba(0, 0, 0, 0.72) - ), - 'dark': ( - 0px 16px 48px 16px rgba(0, 0, 0, 0.72), - 0px 12px 32px rgba(0, 0, 0, 0.72), - 0px 8px 16px -8px rgba(0, 0, 0, 0.96) - ) - ), - $disabled: ( - 'bg-color': $--theme-bg-5, - 'text-color': $--theme-text-4, - 'border-color': $--theme-border-2 - ) -); - -$--color-primary: $--theme-primary; -$--color-success: $--theme-success; -$--color-warning: $--theme-warning; -$--color-danger: $--theme-danger; -$--color-info: $--theme-info; - -$--color-white: $--theme-text-1; -$--color-black: $--theme-bg-1; - -$--color-text-primary: $--theme-text-1; -$--color-text-regular: $--theme-text-2; -$--color-text-secondary: $--theme-info; -$--color-text-placeholder: $--theme-text-4; - -$--border-color-base: $--theme-border-1; -$--border-color-light: $--theme-bg-5; - -$--button-default-background-color: $--theme-bg-5; -$--button-default-border-color: $--theme-border-2; -$--button-default-font-color: $--theme-text-2; - -$--input-background-color: $--theme-bg-5; -$--input-border-color: $--theme-border-1; -$--input-font-color: $--theme-text-1; - -$--select-input-focus-border-color: $--input-focus-border; - -$--dialog-background-color: $--theme-bg-4; -$--popover-background-color: $--theme-bg-4; - -$--table-border-color: $--theme-border-2; - -$--pagination-font-color: $--theme-text-2; -$--pagination-background-color: $--theme-bg-4; - -$--tooltip-fill: $--theme-bg-4; -$--tooltip-color: $--theme-text-1; -$--tooltip-border-color: $--theme-bg-4; - -$--backtop-background-color: $--theme-bg-5; -$--backtop-font-color: $--theme-text-2; -$--backtop-hover-background-color: $--theme-border-2; - -$--datepicker-font-color: $--theme-text-1; -$--datepicker-header-font-color: $--theme-text-1; -$--datepicker-icon-color: $--theme-text-1; - -$--skeleton-color: $--theme-bg-5; - -$--select-dropdown-background: $--theme-bg-4; -$--select-dropdown-border: 1px solid $--theme-border-1; - -$--tree-font-color: $--theme-text-2; - -$--menu-item-font-color: $--theme-text-2; -$--menu-background-color: $--theme-bg-2; - -$--collapse-header-background-color: $--theme-bg-5; -$--collapse-content-background-color: $--theme-bg-4; -$--collapse-border-color: $--theme-border-2; -$--collapse-header-font-color: $--theme-text-2; - -$--message-background-color: $--theme-bg-5; -$--message-close-hover-color: $--theme-text-2; -$--message-success-font-color: #52c41a; -$--message-info-font-color: #1890ff; -$--message-warning-font-color: #faad14; -$--message-danger-font-color: #ff4d4f; - -$--pagination-hover-color: $--theme-text-4; - -$--card-background-color: $--theme-bg-4; - -:root { - --group-calendar-event-bg: #{$--calendar-selected-background-color}; - --group-calendar-badge-following: #{$--color-success}; - --group-calendar-badge-normal: #{$--color-primary}; -} - -@import 'theme.dark_styles'; - -.el-calendar { - background-color: $--theme-bg-4 !important; -} - -.el-calendar__title { - color: $--theme-text-1 !important; -} - -.el-card { - background-color: $--theme-bg-5 !important; - border-color: $--theme-border-1 !important; -} - -.el-descriptions__body { - background-color: $--theme-bg-4 !important; - color: $--theme-text-1 !important; -} - -.el-timeline-item__tail { - border-left-color: $--theme-border-2 !important; -} - -.el-timeline-item__node { - background-color: $--theme-border-2 !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow { - border-top-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow::after { - border-top-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow { - border-bottom-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::after { - border-bottom-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow { - border-left-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow::after { - border-left-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow { - border-right-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow::after { - border-right-color: $--theme-bg-4 !important; -} - -// Group Calendar Dialog borders -.search-container { - border-bottom-color: $--border-color-light !important; -} - -.group-header { - border-bottom-color: $--border-color-light !important; -} diff --git a/src/styles/themes/theme.darkblue.scss b/src/styles/themes/theme.darkblue.scss deleted file mode 100644 index 12a1d902..00000000 --- a/src/styles/themes/theme.darkblue.scss +++ /dev/null @@ -1,281 +0,0 @@ -@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 . -// - -$--theme-hue: 210; -$--theme-saturation: 15%; - -$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%); // #101010 -$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 9%); // #171717 -$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 13%); // #222222 -$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 17%); // #2b2b2b -$--theme-bg-5: hsl($--theme-hue, $--theme-saturation, 20%); // #333333 - -$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 23%); // #3a3a3a -$--theme-border-2: hsl($--theme-hue, $--theme-saturation, 25%); // #404040 -$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 31%); // #505050 - -$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 100%); // #ffffff -$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 78%); // #c8c8c8 -$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 70%); // #b3b3b3 -$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%); // #606266 - -$--theme-primary: #66b1ff; -$--theme-success: #67c23a; -$--theme-warning: #e6a23c; -$--theme-danger: #f56c6c; -$--theme-info: #909399; - -$--border-color-lighter: hsl($--theme-hue, $--theme-saturation, 16%); -$--border-color-extra-light: hsl($--theme-hue, $--theme-saturation, 15%); -$--background-color-base: hsl($--theme-hue, $--theme-saturation, 16%); -$--input-focus-border: hsl($--theme-hue, $--theme-saturation, 33%); -$--table-header-background-color: hsl($--theme-hue, $--theme-saturation, 15%); -$--table-row-hover-background-color: hsl( - $--theme-hue, - $--theme-saturation, - 18% -); -$--skeleton-to-color: hsl($--theme-hue, $--theme-saturation, 33%); -$--tree-node-hover-background-color: hsl( - $--theme-hue, - $--theme-saturation, - 16% -); -$--collapse-content-font-color: hsl($--theme-hue, $--theme-saturation, 66%); -$--message-close-icon-color: hsl($--theme-hue, $--theme-saturation, 60%); -$--dropdown-menu-box-shadow: 0 2px 12px - hsla($--theme-hue, $--theme-saturation, 0%, 0.15); -$--box-shadow-base: 0 1px 2px hsla($--theme-hue, $--theme-saturation, 0%, 0.1); -$--box-shadow-dark: 0 1px 3px hsla($--theme-hue, $--theme-saturation, 0%, 0.15); -$--calendar-selected-background-color: rgba($--theme-primary, 0.1); - -@forward 'var' with ( - $colors: ( - 'white': $--theme-text-1, - 'black': $--theme-bg-1, - 'primary': ( - 'base': $--theme-primary - ), - 'success': ( - 'base': $--theme-success - ), - 'warning': ( - 'base': $--theme-warning - ), - 'danger': ( - 'base': $--theme-danger - ), - 'error': ( - 'base': $--theme-danger - ), - 'info': ( - 'base': $--theme-info - ) - ), - $text-color: ( - 'primary': $--theme-text-1, - 'regular': $--theme-text-2, - 'secondary': $--theme-info, - 'placeholder': $--theme-text-4, - 'disabled': $--theme-text-4 - ), - $border-color: ( - '': $--theme-border-1, - 'light': $--theme-border-2, - 'lighter': $--border-color-lighter, - 'extra-light': $--border-color-extra-light, - 'dark': $--theme-border-1, - 'darker': $--theme-border-2 - ), - $fill-color: ( - '': $--background-color-base, - 'light': $--theme-bg-4, - 'lighter': $--theme-bg-5, - 'extra-light': $--border-color-extra-light, - 'dark': $--theme-bg-2, - 'darker': $--theme-bg-1, - 'blank': $--theme-bg-4 - ), - $bg-color: ( - '': $--theme-bg-2, - 'page': $--theme-bg-1, - 'overlay': $--theme-bg-4 - ), - $box-shadow: ( - '': ( - 0px 12px 32px 4px hsla($--theme-hue, $--theme-saturation, 0%, 0.36), - 0px 8px 20px hsla($--theme-hue, $--theme-saturation, 0%, 0.72) - ), - 'light': ( - 0px 0px 12px hsla($--theme-hue, $--theme-saturation, 0%, 0.72) - ), - 'lighter': ( - 0px 0px 6px hsla($--theme-hue, $--theme-saturation, 0%, 0.72) - ), - 'dark': ( - 0px 16px 48px 16px hsla($--theme-hue, $--theme-saturation, 0%, 0.72), - 0px 12px 32px hsla($--theme-hue, $--theme-saturation, 0%, 0.72), - 0px 8px 16px -8px hsla($--theme-hue, $--theme-saturation, 0%, 0.96) - ) - ), - $disabled: ( - 'bg-color': $--theme-bg-5, - 'text-color': $--theme-text-4, - 'border-color': $--theme-border-2 - ) -); - -$--color-primary: $--theme-primary; -$--color-success: $--theme-success; -$--color-warning: $--theme-warning; -$--color-danger: $--theme-danger; -$--color-info: $--theme-info; - -$--color-white: $--theme-text-1; -$--color-black: $--theme-bg-1; - -$--color-text-primary: $--theme-text-1; -$--color-text-regular: $--theme-text-2; -$--color-text-secondary: $--theme-info; -$--color-text-placeholder: $--theme-text-4; - -$--border-color-base: $--theme-border-1; -$--border-color-light: $--theme-bg-5; - -$--button-default-background-color: $--theme-bg-5; -$--button-default-border-color: $--theme-border-2; -$--button-default-font-color: $--theme-text-2; - -$--input-background-color: $--theme-bg-5; -$--input-border-color: $--theme-border-1; -$--input-font-color: $--theme-text-1; - -$--select-input-focus-border-color: $--input-focus-border; - -$--dialog-background-color: $--theme-bg-4; -$--popover-background-color: $--theme-bg-4; - -$--table-border-color: $--theme-border-2; - -$--pagination-font-color: $--theme-text-2; -$--pagination-background-color: $--theme-bg-4; - -$--tooltip-fill: $--theme-bg-4; -$--tooltip-color: $--theme-text-1; -$--tooltip-border-color: $--theme-bg-4; - -$--backtop-background-color: $--theme-bg-5; -$--backtop-font-color: $--theme-text-2; -$--backtop-hover-background-color: $--theme-border-2; - -$--datepicker-font-color: $--theme-text-1; -$--datepicker-header-font-color: $--theme-text-1; -$--datepicker-icon-color: $--theme-text-1; - -$--skeleton-color: $--theme-bg-5; - -$--select-dropdown-background: $--theme-bg-4; -$--select-dropdown-border: 1px solid $--theme-border-1; - -$--tree-font-color: $--theme-text-2; - -$--menu-item-font-color: $--theme-text-2; -$--menu-background-color: $--theme-bg-2; - -$--collapse-header-background-color: $--theme-bg-5; -$--collapse-content-background-color: $--theme-bg-4; -$--collapse-border-color: $--theme-border-2; -$--collapse-header-font-color: $--theme-text-2; - -$--message-background-color: $--theme-bg-5; -$--message-close-hover-color: $--theme-text-2; -$--message-success-font-color: #52c41a; -$--message-info-font-color: #1890ff; -$--message-warning-font-color: #faad14; -$--message-danger-font-color: #ff4d4f; - -$--pagination-hover-color: $--theme-text-4; - -$--card-background-color: $--theme-bg-4; - -:root { - --group-calendar-event-bg: #{$--calendar-selected-background-color}; - --group-calendar-badge-following: #{$--color-success}; - --group-calendar-badge-normal: #{$--color-primary}; -} - -@import 'theme.dark_styles'; - -.el-calendar { - background-color: $--theme-bg-4 !important; -} - -.el-calendar__title { - color: $--theme-text-1 !important; -} - -.el-card { - background-color: $--theme-bg-5 !important; - border-color: $--theme-border-1 !important; -} - -.el-descriptions__body { - background-color: $--theme-bg-4 !important; - color: $--theme-text-1 !important; -} - -.el-timeline-item__tail { - border-left-color: $--theme-border-2 !important; -} - -.el-timeline-item__node { - background-color: $--theme-border-2 !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow { - border-top-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow::after { - border-top-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow { - border-bottom-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::after { - border-bottom-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow { - border-left-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow::after { - border-left-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow { - border-right-color: $--theme-bg-4 !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow::after { - border-right-color: $--theme-bg-4 !important; -} - -// Group Calendar Dialog borders -.search-container { - border-bottom-color: $--border-color-light !important; -} - -.group-header { - border-bottom-color: $--border-color-light !important; -} diff --git a/src/styles/themes/theme.darkvanilla.scss b/src/styles/themes/theme.darkvanilla.scss deleted file mode 100644 index b859cb8b..00000000 --- a/src/styles/themes/theme.darkvanilla.scss +++ /dev/null @@ -1,857 +0,0 @@ -/* - * 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); - transition: none !important; -} - -.el-table thead { - color: #eee; -} - -.el-table .ascending .sort-caret.ascending { - border-bottom-color: var(--dv_bright); -} -.el-table .descending .sort-caret.descending { - 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-popover { - background-color: var(--dv_bg-top) !important; - border-color: var(--dv_bg-mid) !important; -} - -.el-popper[x-placement^='top'] .popper__arrow { - border-top-color: var(--dv_bg-top) !important; -} - -.el-popper[x-placement^='top'] .popper__arrow::after { - border-top-color: var(--dv_bg-top) !important; -} - -.el-popper[x-placement^='bottom'] .popper__arrow { - border-bottom-color: var(--dv_bg-top) !important; -} - -.el-popper[x-placement^='bottom'] .popper__arrow::after { - border-bottom-color: var(--dv_bg-top) !important; -} - -.el-popper[x-placement^='left'] .popper__arrow { - border-left-color: var(--dv_bg-top) !important; -} - -.el-popper[x-placement^='left'] .popper__arrow::after { - border-left-color: var(--dv_bg-top) !important; -} - -.el-popper[x-placement^='right'] .popper__arrow { - border-right-color: var(--dv_bg-top) !important; -} - -.el-popper[x-placement^='right'] .popper__arrow::after { - border-right-color: var(--dv_bg-top) !important; -} - -img.x-link, -img.friends-list-avatar { - border-radius: var(--dv_lg-rounded) !important; -} - -.el-tag--small { - height: 30px; - padding: 5px 15px; - font-size: 10pt; - border-radius: var(--dv_md-rounded); -} - -.el-tag, -.el-tag.el-tag--success, -.el-tag.el-tag--info, -.el-tag.el-tag--warning, -.el-tag.el-tag--danger { - 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--small .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--small { - 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 - -div.x-friend-list - > div:nth-child(1) - > div - > div.el-textarea.el-input--small - > span.el-input__count { - background-color: var(--mid) !important; -} - -:root { - --group-calendar-event-bg: rgba(var(--dv_bright-rgb), 0.1); - --group-calendar-badge-following: var(--dv_muted); - --group-calendar-badge-normal: var(--dv_bright); -} - -.el-calendar { - background-color: var(--dv_bg-top) !important; -} - -.el-calendar__title { - color: var(--dv_bright) !important; -} - -.el-card { - background-color: var(--dv_bg-mid) !important; - border-color: var(--dv_bg-bot) !important; -} - -.el-descriptions__body { - background-color: var(--dv_bg-top) !important; - color: var(--dv_bright) !important; -} - -.el-timeline-item__tail { - border-left-color: var(--dv_muted) !important; -} - -.el-timeline-item__node { - background-color: var(--dv_muted) !important; -} - -// Group Calendar Dialog borders -.search-container { - border-bottom: 1px solid var(--dv_muted) !important; -} - -.group-header { - border-bottom: 2px solid var(--dv_muted) !important; -} - -.el-select__wrapper { - background-color: var(--dv_bg-top) !important; - border: 1px solid var(--dv_muted) !important; - color: var(--dv_bright); -} - -.el-select__wrapper.is-focused { - border-color: var(--dv_bright) !important; -} - -.el-select__wrapper.is-disabled { - background-color: var(--dv_bg-bot) !important; - color: var(--dv_muted) !important; -} - -.el-input__wrapper { - background-color: var(--dv_bg-top) !important; - border: 1px solid var(--dv_muted) !important; -} - -.el-input__wrapper.is-focus { - border-color: var(--dv_bright) !important; -} diff --git a/src/styles/themes/theme.darkvanillaold.scss b/src/styles/themes/theme.darkvanillaold.scss deleted file mode 100644 index 539c0c36..00000000 --- a/src/styles/themes/theme.darkvanillaold.scss +++ /dev/null @@ -1,428 +0,0 @@ -/* - * VRCX Dark-Vanilla theme by MintLily - * https://github.com/MintLily/Dark-Vanilla - */ - -: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; - - --group-calendar-event-bg: rgba(var(--theme-text-muted-rgb), 0.1); - --group-calendar-badge-following: var(--theme-text-muted); - --group-calendar-badge-normal: var(--theme-text); -} - -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.el-tag--success, -.el-tag.el-tag--info, -.el-tag.el-tag--warning, -.el-tag.el-tag--danger { - 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 .ascending .sort-caret.ascending { - border-bottom-color: var(--theme-text) !important; -} -.el-table .descending .sort-caret.descending { - 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--small { - 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); -} - -div.x-friend-list - > div:nth-child(1) - > div - > div.el-textarea.el-input--small - > span.el-input__count { - background-color: var(--mid) !important; -} - -.el-calendar { - background-color: var(--mid) !important; -} - -.el-calendar__title { - color: var(--theme-text) !important; -} - -.el-card { - background-color: var(--top) !important; - border-color: var(--top-border) !important; -} - -.el-descriptions__body { - background-color: var(--top) !important; - color: var(--theme-text) !important; -} - -.el-timeline-item__tail { - border-left-color: var(--theme-text-muted) !important; -} - -.el-timeline-item__node { - background-color: var(--theme-text-muted) !important; -} - -.el-select__wrapper { - background-color: var(--top) !important; - border: 1px solid var(--top-border) !important; - color: var(--theme-text); -} - -.el-select__wrapper.is-focused { - border-color: var(--theme-text) !important; -} - -.el-select__wrapper.is-disabled { - background-color: var(--farback) !important; - color: var(--theme-text-muted) !important; -} - -.el-input__wrapper { - background-color: var(--top) !important; - border: 1px solid var(--top-border) !important; -} - -.el-input__wrapper.is-focus { - border-color: var(--theme-text) !important; -} diff --git a/src/styles/themes/theme.material3.scss b/src/styles/themes/theme.material3.scss deleted file mode 100644 index 417e8d1e..00000000 --- a/src/styles/themes/theme.material3.scss +++ /dev/null @@ -1,2448 +0,0 @@ -/* - * VRCX Material-You-like theme by Kamiya - * https://github.com/kamiya10/VRCX-theme - */ - -body { - --md-sys-color-primary: 208, 188, 255; - --md-sys-color-on-primary: 55, 30, 115; - --md-sys-color-primary-container: 79, 55, 139; - --md-sys-color-on-primary-container: 234, 221, 255; - --md-sys-color-secondary: 204, 194, 220; - --md-sys-color-secondary-container: 74, 68, 88; - --md-sys-color-on-secondary-container: 232, 222, 248; - --md-sys-color-error: 242, 184, 181; - --md-sys-color-surface: 28, 27, 31; - --md-sys-color-on-surface: 230, 225, 229; - --md-sys-color-surface-variant: 73, 69, 79; - --md-sys-color-on-surface-variant: 220, 213, 227; - --md-sys-color-background: 28, 27, 31; - --md-sys-color-on-background: 230, 225, 229; - --md-sys-color-outline: 147, 143, 153; - --md-sys-color-outline-variant: 68, 71, 70; - --md-sys-color-inverse-surface: 230, 225, 229; - --md-sys-color-inverse-on-surface: 49, 48, 51; - --md-sys-color-inverse-primary: 103, 80, 164; - - --md-sys-color-inverse-surface: 236, 223, 224; - --md-sys-color-inverse-on-surface: 54, 47, 48; - --md-sys-color-inverse-primary: 154, 64, 88; - --md-sys-color-surface-1: - linear-gradient( - 0deg, - rgba(var(--md-sys-color-primary), 0.05), - rgba(var(--md-sys-color-primary), 0.05) - ), - rgb(var(--md-sys-color-surface)); - --md-sys-color-surface-2: - linear-gradient( - 0deg, - rgba(var(--md-sys-color-primary), 0.08), - rgba(var(--md-sys-color-primary), 0.08) - ), - rgb(var(--md-sys-color-surface)); - --md-sys-color-surface-3: - linear-gradient( - 0deg, - rgba(var(--md-sys-color-primary), 0.11), - rgba(var(--md-sys-color-primary), 0.11) - ), - rgb(var(--md-sys-color-surface)); - --md-sys-color-surface-4: - linear-gradient( - 0deg, - rgba(var(--md-sys-color-primary), 0.14), - rgba(var(--md-sys-color-primary), 0.14) - ), - rgb(var(--md-sys-color-surface)); - --md-sys-typescale-headline-medium-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-headline-medium-line-height: 36px; - --md-sys-typescale-headline-medium-size: 28px; - --md-sys-typescale-headline-medium-weight: 500; - --md-sys-typescale-headline-medium-tracking: 0; - --md-sys-typescale-headline-small-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-headline-small-line-height: 32px; - --md-sys-typescale-headline-small-size: 24px; - --md-sys-typescale-headline-small-weight: 500; - --md-sys-typescale-headline-small-tracking: 0; - --md-sys-typescale-title-medium-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-title-medium-line-height: 24px; - --md-sys-typescale-title-medium-size: 16px; - --md-sys-typescale-title-medium-weight: 600; - --md-sys-typescale-title-medium-tracking: 0.15px; - --md-sys-typescale-label-large-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-label-large-line-height: 20px; - --md-sys-typescale-label-large-size: 14px; - --md-sys-typescale-label-large-weight: 600; - --md-sys-typescale-label-large-tracking: 0.1px; - --md-sys-typescale-label-medium-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-label-medium-line-height: 16px; - --md-sys-typescale-label-medium-size: 12px; - --md-sys-typescale-label-medium-weight: 600; - --md-sys-typescale-label-medium-tracking: 0.5px; - --md-sys-typescale-body-large-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-body-large-line-height: 24px; - --md-sys-typescale-body-large-size: 16px; - --md-sys-typescale-body-large-weight: 400; - --md-sys-typescale-body-large-tracking: 0.5px; - --md-sys-typescale-body-medium-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-body-medium-line-height: 20px; - --md-sys-typescale-body-medium-size: 14px; - --md-sys-typescale-body-medium-weight: 400; - --md-sys-typescale-body-medium-tracking: 0.25px; - --md-sys-typescale-body-small-font: - 'Google Sans', 'Noto Sans', 'Noto Sans TC Variable', 'Noto Sans JP Variable', - 'Noto Sans SC Variable', 'Roboto', sans-serif; - --md-sys-typescale-body-small-line-height: 16px; - --md-sys-typescale-body-small-size: 12px; - --md-sys-typescale-body-small-weight: 400; - --md-sys-typescale-body-small-tracking: 0.4px; - user-select: none; - font-family: var(--md-sys-typescale-body-small-font); - font-variant-numeric: tabular-nums; - - --group-calendar-event-bg: rgba(var(--md-sys-color-primary), 0.05); - --group-calendar-badge-following: rgb( - var(--md-sys-color-primary-container) - ); - --group-calendar-badge-normal: rgb(var(--md-sys-color-secondary)); -} - -::selection { - background-color: rgb(var(--md-sys-color-primary-container)); - mix-blend-mode: hard-light; -} - -::-webkit-scrollbar { - width: 6px; - height: 8px; -} - -::-webkit-scrollbar-track { - background-color: rgba(var(--md-sys-color-outline-variant), 0); - transition: background-color 0.2s ease-in-out; -} - -*:hover::-webkit-scrollbar-track, -*:focus::-webkit-scrollbar-track, -*.is-active::-webkit-scrollbar-track { - background-color: rgba(var(--md-sys-color-outline-variant), 0.2); -} - -::-webkit-scrollbar-thumb { - background-color: rgba(var(--md-sys-color-surface-variant), 0); - transition: background-color 0.2s ease-in-out; -} -*:hover::-webkit-scrollbar-thumb, -*:focus::-webkit-scrollbar-thumb, -*.is-active::-webkit-scrollbar-thumb { - background-color: rgb(var(--md-sys-color-surface-variant)); -} -::-webkit-scrollbar-thumb:hover { - background-color: rgb(var(--md-sys-color-secondary-container)); -} - -a { - color: rgb(var(--md-sys-color-primary)); -} - -div[style*='margin: 0px 0px 10px;'] { - margin-bottom: 16px !important; -} - -.el-tabs--card > .el-tabs__header .el-tabs__item, -.el-tabs--card > .el-tabs__header .el-tabs__nav, -.el-tabs--card > .el-tabs__header { - border: none; -} - -.x-app, -.x-container, -.el-collapse-item__wrap, -.x-login-container { - background-color: rgba(var(--md-sys-color-background)); -} - -.x-aside-container { - background: var(--md-sys-color-surface-1); -} - -.x-aside-container .el-select { - padding: 3px !important; -} - -.x-login-container p { - color: rgb(var(--md-sys-color-on-background)); -} - -.el-tabs--card > .el-tabs__header .el-tabs__item { - height: 40px; - border-radius: 20px; - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-label-large-font); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - padding: 0 24px; - transition: - background-color 0.2s ease-in-out, - color 0.2s ease-in-out; -} - -.el-tabs--card > .el-tabs__header .el-tabs__item.is-active { - background-color: rgba(var(--md-sys-color-secondary-container)); - color: rgb(var(--md-sys-color-on-surface)); -} - -.el-tab-pane .options-container { - flex-direction: column; - justify-content: center; -} - -.options-container-item { - margin: 6px 0; - display: flex; - flex-wrap: wrap; -} - -.options-container-item br + span { - flex-basis: 100%; -} - -.options-container-item .name:first-child { - flex: 1; -} - -.options-container-item > :not(.el-color-picker__color-inner):last-child { - margin-right: 4px; -} - -.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;'] { - border-top: 1px solid rgb(var(--md-sys-color-outline-variant)) !important; -} - -#x-app .x-container { - padding: 20px; -} - -#x-app .x-aside-container { - padding: 10px; -} - -/* Input filter */ -.el-input-number--small, -.el-input--small, -.el-input__inner { - line-height: 45px !important; -} - -.el-input__inner { - height: 48px; -} - -.el-input__inner, -.el-textarea__inner { - position: relative; - background-color: transparent; - border: 1px solid rgb(var(--md-sys-color-outline)); - border-radius: 8px; - padding: 12px; - width: 100%; -} -.el-select__tags { - margin: 0 12px; -} -.el-select .el-input__inner:focus, -.el-textarea__inner:hover, -.el-select:hover .el-input__inner, -.el-pagination__sizes .el-input .el-input__inner:hover { - border: 1px solid rgb(var(--md-sys-color-on-surface)) !important; -} - -.el-input__wrapper.is-focus { - box-shadow: none !important; -} - -.el-range-editor.is-active, -.el-range-editor.is-active:hover, -.el-select .el-input.is-focus .el-input__inner, -.el-input.is-active .el-input__inner, -.el-textarea__inner:focus { - border: 2px solid rgb(var(--md-sys-color-primary)) !important; - box-shadow: none !important; -} -input[type='text']::placeholder, -input[type='number']::placeholder, -.el-textarea__inner::placeholder { - color: rgb(var(--md-sys-color-on-surface-variant)); -} -input[type='text'], -input[type='number'], -.el-textarea__inner { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-body-large-font); - line-height: var(--md-sys-typescale-body-large-line-height); - font-size: var(--md-sys-typescale-body-large-size); - font-weight: var(--md-sys-typescale-body-large-weight); - letter-spacing: var(--md-sys-typescale-body-large-tracking); -} -.el-input--small .el-input__inner { - height: 36px; -} -.el-pagination--small button, -.el-pagination--small span:not([class*='suffix']), -.el-pagination .el-select .el-input .el-input__inner, -.el-input--small .el-input__icon, -.el-pagination--small .btn-next, -.el-pagination--small .btn-prev, -.el-pagination--small .el-pager li, -.el-pagination--small .el-pager li.btn-quicknext, -.el-pagination--small .el-pager li.btn-quickprev, -.el-pagination--small .el-pager li:last-child { - height: 32px !important; - line-height: 32px !important; -} -.el-pagination .el-select .el-input .el-input__inner, -.el-input--small .el-input__icon { - border-radius: 8px; -} -.el-pagination button.btn-prev, -.el-pagination button.btn-next { - position: relative; - background-color: rgb(var(--md-sys-color-secondary-container)); - transition: - background-color 0.1s ease-in-out, - color 0.1s ease-in-out; -} -.el-pagination button:not(:disabled):hover.btn-prev::after, -.el-pagination button:not(:disabled):hover.btn-next::after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08); -} -.el-pagination button:not(:disabled):focus.btn-prev::after, -.el-pagination button:not(:disabled):focus.btn-next::after, -.el-pagination button:not(:disabled).is-active.btn-prev::after, -.el-pagination button:not(:disabled).is-active.btn-next::after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12); -} -.el-pagination button:disabled.btn-prev, -.el-pagination button:disabled.btn-next { - background-color: rgba(var(--md-sys-color-on-surface), 0.12); - color: rgba(var(--md-sys-color-on-surface), 0.38); -} -.el-pagination button.btn-prev { - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - padding-left: 12px; - padding-right: 8px; -} -.el-pagination button.btn-prev::after { - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; -} -.el-pagination button.btn-next { - border-top-right-radius: 16px; - border-bottom-right-radius: 16px; - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - padding-left: 8px; - padding-right: 8px; -} -.el-pagination button.btn-next::after { - border-top-right-radius: 16px; - border-bottom-right-radius: 16px; - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; -} -.el-pager li, -.el-pager li.btn-quicknext, -.el-pager li.btn-quickprev { - position: relative; - padding: 0 8px; - font-weight: 500; - border-radius: 0px; - background-color: rgb(var(--md-sys-color-secondary-container)); - color: rgb(var(--md-sys-color-on-secondary-container)); -} -.el-pager li::after, -.el-pagination button.btn-prev::after, -.el-pagination button.btn-next::after, -.el-tabs__item::after { - position: absolute; - content: ''; - height: 100%; - width: 100%; - background-color: transparent; - border: none; - left: 0; - top: 0; - transition: background-color 0.1s ease-in-out; -} -.el-pager li:hover::after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08); -} -.el-pager li:focus::after, -.el-pager li.is-active:after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12); -} -.el-pager li.is-active { - font-weight: 600; - color: rgb(var(--md-sys-color-primary)); -} -.el-pager li:hover, -.el-pagination button:not(:disabled):hover { - color: rgb(var(--md-sys-color-on-primary-container)); -} -.el-form-item.is-error .el-input__inner, -.el-form-item.is-error .el-input__inner:focus, -.el-form-item.is-error .el-textarea__inner, -.el-form-item.is-error .el-textarea__inner:focus, -.el-message-box__input input.invalid, -.el-message-box__input input.invalid:focus { - border-color: rgb(var(--md-sys-color-error)); -} - -.el-message-box__errormsg { - height: 18px; - opacity: 1; - color: rgb(var(--md-sys-color-error)); - margin: 2px 12px; - font-family: var(--md-sys-typescale-body-small-font); - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-size); - font-weight: var(--md-sys-typescale-body-small-weight); - letter-spacing: var(--md-sys-typescale-body-small-tracking); - transition: - height 0.1s ease-out, - min-height 0.1s ease-out, - opacity 0.1s ease-out; -} -.el-message-box__errormsg[style='visibility: hidden;'] { - height: 0; - min-height: 0; - opacity: 0; -} -.vrc-instance-queue-message { - padding: 10px !important; - background: #f0f9eb !important; -} - -.el-message.is-closable .el-message__content { - padding-right: 16px; -} - -/* Typography */ - -.x-container > .options-container:first-child .header { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-headline-medium-font); - line-height: var(--md-sys-typescale-headline-medium-line-height); - font-size: var(--md-sys-typescale-headline-medium-size); - font-weight: var(--md-sys-typescale-headline-medium-weight); - letter-spacing: var(--md-sys-typescale-headline-medium-tracking); -} -.options-container .header { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-headline-small-font); - line-height: var(--md-sys-typescale-headline-small-line-height); - font-size: var(--md-sys-typescale-headline-small-size); - font-weight: var(--md-sys-typescale-headline-small-weight); - letter-spacing: var(--md-sys-typescale-headline-small-tracking); -} -.options-container-item .name { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-body-medium-font); - line-height: var(--md-sys-typescale-body-medium-line-height); - font-size: var(--md-sys-typescale-body-medium-size); - font-weight: var(--md-sys-typescale-body-medium-weight); - letter-spacing: var(--md-sys-typescale-body-medium-tracking); - min-width: auto; - margin: auto; -} -.options-container .sub-header { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-title-medium-font); - line-height: var(--md-sys-typescale-title-medium-line-height); - font-size: var(--md-sys-typescale-title-medium-size); - font-weight: var(--md-sys-typescale-title-medium-weight); - letter-spacing: var(--md-sys-typescale-title-medium-tracking); -} -[style='color: rgb(245, 108, 108);'], -[style='color: rgb(245, 108, 108);'] i[class^='el-icon']::before { - color: rgb(var(--md-sys-color-error)) !important; -} -[style*='color: rgb(144, 147, 153);'] { - color: rgb(var(--md-sys-color-outline)) !important; -} - -/* ---------- Navigation rail ----------*/ -.x-menu-container { - background: var(--md-sys-color-surface-2); - /* display: flex; */ - vertical-align: middle; -} -.x-menu-container, -.el-menu--collapse { - width: 70px; -} -.x-menu-container > div > .el-menu { - margin: auto 0; - display: grid; -} -.x-menu-container > div > .el-menu > .el-menu-item { - height: 56px; -} -.x-menu-container > div > .el-menu > .el-menu-item > div, -.x-menu-container > div > .el-menu > .el-menu-item { - position: relative !important; - padding: 0 !important; -} -.x-menu-container > div > .el-menu > .el-menu-item > div > i, -.x-menu-container > div > .el-menu > .el-menu-item > i { - position: absolute; - left: 50%; - top: 14px; - font-size: 24px; - transform: translate(-50%); - color: rgb(var(--md-sys-color-on-surface-variant)); -} -.el-menu-item::before { - display: none; -} -.el-menu-item:focus, -.el-menu-item:hover, -.bottom-button:hover { - background-color: rgba( - var(--md-sys-color-on-surface-variant), - 0.08 - ) !important; -} -.bottom-button { - width: 70px !important; -} -.el-menu-item.is-active::before { - width: 56px; - height: 56px; - border-radius: 28px; - left: 50%; - transform: translateX(-50%); - background-color: rgb(var(--md-sys-color-secondary-container)); -} -.el-menu-item { - color: rgb(var(--md-sys-color-on-surface-variant)) !important; -} -.el-menu-item i { - color: rgv(var(--md-sys-color-on-surface-variant)) !important; -} -.x-menu-container > div > .el-menu > .el-menu-item.is-active > div > i, -.x-menu-container > div > .el-menu > .el-menu-item.is-active > i { - color: rgb(var(--md-sys-color-primary)) !important; -} -.el-menu-item.notify::after { - background: rgb(var(--md-sys-color-error)); - height: 6px; - width: 6px; - border-radius: 3px; - right: 25%; - top: 25%; -} - -/* ---------- Table ---------- */ - -.el-table { - max-width: calc(100vw - 2 * 40px); - margin: 8px 0; - border: 1px solid rgb(var(--md-sys-color-surface-variant)); - border-radius: 24px; - overflow-x: auto; - white-space: normal; - user-select: text; -} -.el-table .el-table__body-wrapper table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; -} -.el-table tr, -.el-table td.el-table__cell, -.el-table th.el-table__cell, -.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { - background-color: transparent; - transition: background-color 0.1s ease-in-out; -} -.el-table td.el-table__cell, -.el-table th.el-table__cell.is-leaf { - border-bottom: 1px solid rgb(var(--md-sys-color-surface-variant)); -} -.el-table .el-table__header-wrapper table tr th { - color: rgb(var(--md-sys-color-on-surface-variant)); - background: rgba(var(--md-sys-color-primary), 0.05); - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); -} -.el-table .el-table__body-wrapper table tr td .cell, -.el-table__expanded-cell { - color: rgb(var(--md-sys-color-on-background)); - font-family: var(--md-sys-typescale-body-small-font); - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-size); - font-weight: var(--md-sys-typescale-body-small-weight); - letter-spacing: var(--md-sys-typescale-body-small-tracking); -} - -// unset table word break, breaks words such as the "note export" menus last cell. -.el-table .cell { - word-break: unset; -} - -.el-table .el-table__body-wrapper table tr:first-child th, -.el-table table tr:first-child td { - border-top: none; -} -.el-table .el-table__body-wrapper table tr th:first-child, -.el-table table tr td:first-child { - border-left: none; -} -.feed .el-table .el-table_1_column_5.el-table__cell > div { - display: flex; - align-items: center; -} -.el-table .el-table__body-wrapper table tr:last-child th, -.el-table table tr:last-child td, -.el-table tr, -.el-table td.el-table__cell, -.el-table th.el-table__cell { - border-bottom: none; -} -.el-table .el-table__body-wrapper table tr:last-child th:first-child, -.el-table table tr:last-child td:first-child { - border-bottom-left-radius: 16px; -} -.el-table .el-table__body-wrapper table tr:last-child th:last-child, -.el-table table tr:last-child td:last-child { - border-bottom-right-radius: 16px; -} -.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { - background-color: rgba(var(--md-sys-color-on-surface), 0.08); -} -.el-table .ascending .sort-caret.ascending { - border-bottom-color: rgb(var(--md-sys-color-primary)); -} -.el-table .sort-caret.ascending { - border-bottom-color: rgb(var(--md-sys-color-outline-variant)); -} -.el-table .descending .sort-caret.descending { - border-top-color: rgb(var(--md-sys-color-primary)); -} -.el-table .sort-caret.descending { - border-top-color: rgb(var(--md-sys-color-outline-variant)); -} -.el-popover__reference-wrapper > img.friends-list-avatar { - height: 48px; - width: 48px; - margin: auto; - object-fit: cover; - border-radius: 8px; - margin-left: 0; -} -.el-table::before { - display: none; -} -.el-table__expand-icon { - display: flex; - height: 100%; -} -.el-table__expand-icon--expanded, -.x-friend-group > .el-icon-arrow-right.rotate { - transform: rotate(270deg); -} -.el-table__expand-icon--expanded, -.x-friend-group > .el-icon-arrow-right { - transform: rotate(90deg); -} -.el-table .el-table__body-wrapper table tr th, -.el-table .el-table__body-wrapper table tr > td:not(.is-right) > .cell { - /* it's too ugly - border-top: 1px solid rgb(var(--md-sys-color-surface-variant)); - border-left: 1px solid rgb(var(--md-sys-color-surface-variant)); - */ - padding: 8px 10px; - display: flex; - align-items: center; -} -/* ---------- Switch ---------- */ - -.el-switch { - height: 28px; -} - -/* track */ -.el-switch__core { - position: relative; - width: 48px !important; - height: 28px; - border-radius: 28px; - background-color: rgb(var(--md-sys-color-surface-variant)) !important; - border: 2px solid rgb(var(--md-sys-color-outline)) !important; - transition: - background-color 0.1s ease-in-out, - border-color 0.1s ease-in-out; -} - -/* active track */ -.el-switch.is-checked .el-switch__core { - background-color: rgb(var(--md-sys-color-primary)) !important; - border-color: transparent !important; -} - -/* thumb */ -.el-switch__core::before { - position: absolute; - content: ''; - height: 16px; - width: 16px; - left: 0px; - margin: 4px; - background-color: rgb(var(--md-sys-color-outline)); - border-radius: 28px; - transition: - left 200ms cubic-bezier(0, 0.5, 0.5, 1.5), - background-color 0.1s ease-in-out, - height 50ms ease-out, - width 50ms ease-out, - padding 50ms ease-out, - margin 50ms ease-out; -} - -/* active thumb */ -.el-switch.is-checked .el-switch__core::before { - content: 'Done'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - text-align: center; - line-height: 24px; - background-color: rgb(var(--md-sys-color-on-primary)); - height: 24px; - width: 24px; - left: 20px; - margin: 0; -} - -/* hover thumb */ -.el-switch:hover input:not(:disabled) + .el-switch__core::before { - background-color: rgb(var(--md-sys-color-on-surface-variant)); -} - -/* active hover thumb */ -.el-switch.is-checked:hover input:not(:disabled) + .el-switch__core::before { - background-color: rgb(var(--md-sys-color-primary-container)); -} - -/* click thumb */ -.el-switch.is-active input:not(:disabled) + .el-switch__core::before { - padding: 5px; - margin: 0px; - top: -1px; - left: -1px; -} - -.el-switch.is-checked.is-active - input:not(:disabled) - + .el-switch__core::before { - padding: 1px; - margin: 0px; - top: -1px; - left: 19px; -} - -/* active click thumb */ -.el-switch.is-checked.is-active - input:not(:disabled) - + .el-switch__core::before { - background-color: rgb(var(--md-sys-color-primary-container)); -} - -/* disabled track */ -.el-switch.is-disabled .el-switch__core { - background-color: rgba( - var(--md-sys-color-surface-variant), - 0.12 - ) !important; - border-color: rgba(var(--md-sys-color-on-surface), 0.12) !important; -} - -.el-switch.is-checked.is-disabled .el-switch__core { - background-color: rgba(var(--md-sys-color-on-surface), 0.12); - border-color: rgba(var(--md-sys-color-on-surface), 0); -} - -/* disabled thumb */ -.el-switch.is-disabled .el-switch__core::before { - background-color: rgba(var(--md-sys-color-on-surface), 0.38); -} - -.el-switch.is-disabled.is-checked .el-switch__core::before { - background-color: rgba(var(--md-sys-color-surface), 1); -} - -/* disabled icon */ -.el-switch.is-disabled.is-disabled.is-checked .el-switch__core::before { - color: rgba(var(--md-sys-color-on-surface), 0.38); -} - -/* active label */ -.el-switch__label { - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - transition: color 0.1s ease-in-out; -} -.el-switch__label.is-active { - color: rgb(var(--md-sys-color-primary)); -} -.el-switch.is-disabled .el-switch__label { - color: rgba(var(--md-sys-color-on-surface), 0.12); -} -.el-switch.is-disabled .el-switch__label.is-active { - color: rgba(var(--md-sys-color-on-surface), 0.38); -} - -.el-switch__core:after { - display: none; - transition: left 200ms cubic-bezier(0, 0.5, 0.5, 1.5); -} - -// Fix the white toggle -.el-switch__action { - background: transparent !important; - box-shadow: none !important; - display: none !important; -} - -/* ---------- Segmented buttons ---------- */ - -.el-radio-button__inner, -.el-radio-group { - height: 32px; -} - -.el-radio-group { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: 1fr; -} - -.el-radio-button--small .el-radio-button__inner { - width: 100%; - padding: 6px; - border: none; - border-top: 1px solid rgb(var(--md-sys-color-outline)); - border-bottom: 1px solid rgb(var(--md-sys-color-outline)); - border-left: 1px solid rgb(var(--md-sys-color-outline)) !important; - background: transparent; - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - transition: - background-color 0.1s ease-in-out, - color 0.1s ease-in-out; -} - -.el-radio-group > *:first-child > .el-radio-button__inner { - border-top-left-radius: 18px; - border-bottom-left-radius: 18px; -} - -.el-radio-group > *:last-child > .el-radio-button__inner { - border-top-right-radius: 18px; - border-bottom-right-radius: 18px; - border-right: 1px solid rgb(var(--md-sys-color-outline)); -} - -.el-radio-button--small - .el-radio-button__orig-radio:not(:disabled):checked - + .el-radio-button__inner { - background-color: rgb(var(--md-sys-color-secondary-container)); - color: rgb(var(--md-sys-color-on-secondary-container)); - border-color: rgb(var(--md-sys-color-outline)); - box-shadow: none; -} - -.el-radio-button--small - .el-radio-button__orig-radio:not(:checked) - + .el-radio-button__inner { - padding: 6px 16px; -} - -/* icon */ -.el-radio-button--small - .el-radio-button__orig-radio:not(:disabled):checked - + .el-radio-button__inner:before { - content: 'done'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - font-size: 18px; - margin-right: 2px; -} - -/* hover */ -.el-radio-button--small:hover .el-radio-button__inner { - background: rgba(var(--md-sys-color-on-surface), 0.08); -} -.el-radio-button--small:hover - .el-radio-button__orig-radio:not(:disabled):checked - + .el-radio-button__inner { - background: rgb(87, 80, 101); -} - -/* focus */ -.el-radio-button:focus:not(.is-focus):not(.is-active):not(.is-disabled) { - box-shadow: none; -} - -/* press */ -.el-radio-button--small.is-active - .el-radio-button__orig-radio:not(:disabled) - + .el-radio-button__inner { - background: rgba(var(--md-sys-color-on-surface), 0.12); -} -.el-radio-button--small.is-active - .el-radio-button__orig-radio:not(:disabled):checked - + .el-radio-button__inner { - background: rgb(93, 86, 107); -} - -// Override all element-plus theme coloring -.el-radio-button__inner { - --el-radio-button-checked-bg-color: rgb( - var(--md-sys-color-secondary-container) - ); - --el-radio-button-checked-text-color: rgb( - var(--md-sys-color-on-secondary-container) - ); - --el-radio-button-checked-border-color: rgb(var(--md-sys-color-outline)); -} - -/* ---------- Filled button ---------- */ - -.el-button { - position: relative; -} - -.el-button .el-icon { - width: 100%; -} - -.el-button--small.is-circle, -.el-button.is-circle, -.el-button--small.is-text, -.el-button.is-text { - width: 40px !important; -} - -.el-button::after { - position: absolute; - content: ''; - height: 100%; - width: 100%; - background-color: transparent; - border: none; - left: 0; - top: 0; - border-radius: 20px; - transition: background-color 0.1s ease-in-out; -} - -.el-button.el-button--primary:not(.el-button--text) { - height: 40px; - padding: 0; - margin: 0 4px; - border-radius: 20px; - background-color: rgb(var(--md-sys-color-primary)); - color: rgb(var(--md-sys-color-on-primary)); - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - border: none; - transition: - background-color 0.1s ease-in-out, - color 0.1s ease-in-out; -} -.el-button.el-button--primary:not(.el-button--text).is-disabled { - cursor: not-allowed; - background-color: rgba(var(--md-sys-color-on-surface), 0.12); - color: rgba(var(--md-sys-color-on-surface), 0.38); -} -.el-button.el-button--primary:not(.el-button--text) > i { - font-size: 18px; -} -.el-button.el-button--primary:not(.el-button--text) > i:first-child:last-child { - padding: 0 11px; -} -.el-button.el-button--primary:not(.el-button--text) > i:first-child { - padding-left: 16px; - padding-right: 8px; -} -.el-button.el-button--primary:not(.el-button--text) > *:not(i):first-child { - padding-left: 24px; -} -.el-button.el-button--primary:not(.el-button--text) > span:last-child { - padding-right: 24px; -} -.el-button.el-button--primary:not(.el-button--text, .is-disabled):hover::after { - background-color: rgba(var(--md-sys-color-on-primary), 0.08); -} -.el-button.el-button--primary:not(.el-button--text, .is-disabled):focus::after, -.el-button.el-button--primary:not( - .el-button--text, - .is-disabled - ).is-active::after { - background-color: rgba(var(--md-sys-color-on-primary), 0.12); -} - -/* ---------- Filled tonal button ---------- */ - -.el-button:not(.el-button--text, .el-button--primary), -.el-button-group > .el-button:first-child:last-child { - height: 40px; - padding: 0; - margin: 2px 4px; - border-radius: 20px; - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - border: none; - transition: - background-color 0.1s ease-in-out, - color 0.1s ease-in-out; -} - -.pending-update button { - border-radius: 10px !important; - height: 44px !important; - margin: 14px !important; -} - -.pending-update button::after { - border-radius: 10px !important; -} - -.pending-update { - height: 70px; -} - -.el-button:not(.el-button--text, .el-button--primary, .is-disabled), -.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).is-active { - background-color: rgb(var(--md-sys-color-secondary-container)); - color: rgb(var(--md-sys-color-on-secondary-container)); -} -.el-button:not(.el-button--text, .el-button--primary).is-disabled { - cursor: not-allowed; - background-color: rgba(var(--md-sys-color-on-surface), 0.12); - color: rgba(var(--md-sys-color-on-surface), 0.38); -} -.el-button:not(.el-button--text, .el-button--primary) > i { - font-size: 18px; -} -.el-button:not(.el-button--text, .el-button--primary) - > i:first-child:last-child { - padding: 5px 10px; -} -.el-button:not(.el-button--text, .el-button--primary) > i:first-child { - padding-left: 16px; - padding-right: 8px; -} -.el-button:not(.el-button--text, .el-button--primary) > *:not(i):first-child { - padding-left: 24px; -} -:not(.el-dropdown) - > .el-button:not(.el-button--text, .el-button--primary) - > span:last-child { - padding-right: 24px; -} -.el-dropdown - > .el-button:not(.el-button--text, .el-button--primary) - i:last-child { - padding-right: 12px; -} -.el-button:not( - .el-button--text, - .el-button--primary, - .is-disabled - ):hover::after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08); -} -.el-button:not( - .el-button--text, - .el-button--primary, - .is-disabled - ):focus::after, -.el-button:not( - .el-button--text, - .el-button--primary, - .is-disabled - ).is-active::after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12); -} - -/* ---------- Text button ---------- */ - -.el-button.el-button--text:not(.el-button--primary) { - height: 40px; - padding: 0; - margin: 0 4px; - border-radius: 20px; - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - border: none; - transition: - background-color 0.1s ease-in-out, - color 0.1s ease-in-out; -} -.el-button.el-button--text:not(.el-button--primary) > i { - font-size: 15px; -} -.el-button.el-button--text:not(.el-button--primary, .is-disabled), -.el-button.el-button--text:not(.el-button--primary, .is-disabled):hover, -.el-button.el-button--text:not(.el-button--primary, .is-disabled):focus, -.el-button.el-button--text:not(.el-button--primary, .is-disabled).is-active { - background-color: transparent; - color: rgb(var(--md-sys-color-on-secondary-container)); -} -.el-button.el-button--text:not(.el-button--primary).is-disabled { - cursor: not-allowed; - background-color: rgba(var(--md-sys-color-on-surface), 0.12); - color: rgba(var(--md-sys-color-on-surface), 0.38); -} -.el-button.el-button--text:not(.el-button--primary, .is-disabled):hover::after { - background-color: rgba(var(--md-sys-color-primary), 0.08); -} -.el-button.el-button--text:not(.el-button--primary, .is-disabled):focus::after, -.el-button.el-button--text:not( - .el-button--primary, - .is-disabled - ).is-active::after { - background-color: rgba(var(--md-sys-color-primary), 0.12); -} - -/* ---------- Chip ---------- */ - -.el-select .el-tag, -.el-tag { - border: 1px solid rgb(var(--md-sys-color-outline)); - background-color: transparent; - border-radius: 8px; - height: 28px; - padding: 0 12px; - // margin-top: 8px !important; - // margin-right: 8px !important; - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-label-large-font); - line-height: 28px; - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); -} -.el-tag.el-tag--info .el-tag__close { - font-size: 18px; - color: rgb(var(--md-sys-color-on-surface-variant)); -} -.el-select .el-tag__close.el-icon-close, -.el-select .el-tag__close.el-icon-close:hover, -.el-select .el-tag__close.el-icon-close:focus, -.el-select .el-tag__close.el-icon-close.is-active, -.el-tag.el-tag--info, -.el-tag--plain.el-tag--danger { - background-color: transparent; -} -.el-tag--plain.el-tag--danger { - color: rgb(var(--md-sys-color-error)); - border-color: rgb(var(--md-sys-color-error)); -} - -.el-tag, -.el-tag.el-tag--success, -.el-tag.el-tag--info, -.el-tag.el-tag--warning, -.el-tag.el-tag--danger { - border-color: rgb(var(--md-sys-color-outline)); - background-color: transparent; -} - -/* Friend */ - -.el-tab-pane .x-friend-list { - padding: 0; -} - -.x-friend-item { - padding: 8px; - border-radius: 25px; - transition: background-color 0.1s ease-in-out; -} - -.x-friend-item:hover { - background-color: rgba(var(--md-sys-color-on-surface-variant), 0.08); - border-radius: 25px; -} - -.x-friend-item .el-input__count { - background-color: transparent; -} - -// User dialog memo: input count background color -.x-friend-item:hover .el-input__count { - background-color: transparent; -} - -.x-friend-item .detail { - margin: 0 -2px; -} - -.x-friend-item > .detail > .name { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); -} -.x-friend-item > .detail > .extra { - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-body-small-font); - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-size); - font-weight: var(--md-sys-typescale-body-small-weight); - letter-spacing: var(--md-sys-typescale-body-small-tracking); - user-select: text; -} - -/* friend dialog bar */ - -.dialog-title { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-title-medium-font); - line-height: var(--md-sys-typescale-title-medium-line-height); - font-size: var(--md-sys-typescale-title-medium-size); - font-weight: var(--md-sys-typescale-title-medium-weight); - letter-spacing: var(--md-sys-typescale-title-medium-tracking); - user-select: text; -} - -.el-tabs__active-bar, -.el-tabs__nav-wrap::after { - display: none; -} - -.el-tabs__header { - padding: 5px; - border-bottom: 1px solid rgb(var(--md-sys-color-outline-variant)); -} - -.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), -.el-tabs--bottom .el-tabs__item.is-top:nth-child(2), -.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), -.el-tabs--top .el-tabs__item.is-top:nth-child(2), -.el-tabs--bottom .el-tabs__item.is-bottom:last-child, -.el-tabs--bottom .el-tabs__item.is-top:last-child, -.el-tabs--top .el-tabs__item.is-bottom:last-child, -.el-tabs--top .el-tabs__item.is-top:last-child { - padding: 0 24px; -} - -img.x-link.el-popover__reference { - border-radius: 24px !important; -} - -.el-popover, -.nav-menu-popover { - background: var(--md-sys-color-surface-4); - border: none; - border-radius: 12px; - box-shadow: - 0 3px 6px rgba(0, 0, 0, 0.16), - 0 3px 6px rgba(0, 0, 0, 0.23); -} - -.el-popover img, -.nav-menu-popover img { - border-radius: 12px; -} - -.el-tabs__item, -.nav-menu-settings__item, -.nav-menu-theme__item { - position: relative; - height: 40px; - border-radius: 20px; - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-label-large-font); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - padding: 0 24px; - transition: - background-color 0.2s ease-in-out, - color 0.2s ease-in-out; -} - -.el-tabs__item:not(:last-child) { - margin-right: 4px; -} - -.el-tabs__item::after { - border-radius: 20px; -} - -.el-tabs__item:hover, -.el-tabs__item:focus, -.el-tabs__item.is-active { - color: rgb(var(--md-sys-color-on-surface)); -} - -.el-tabs__item:hover::after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08); -} - -.el-tabs__item:focus::after, -.el-tabs__item.is-active::after { - background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12); -} - -.el-tabs__item.is-active { - background-color: rgba(var(--md-sys-color-secondary-container)); - color: rgb(var(--md-sys-color-on-surface)); -} - -.el-tree { - background: var(--md-sys-color-surface-1); - border-radius: 24px; - user-select: text; -} - -.el-tree span { - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-body-small-font); - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-size); - font-weight: var(--md-sys-typescale-body-small-weight); - letter-spacing: var(--md-sys-typescale-body-small-tracking); -} - -.el-tree span[style*='font-weight: bold;'] { - color: rgb(var(--md-sys-color-secondary)); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - margin-right: 8px !important; -} - -.el-tree .el-tree-node__content:hover { - background: var(--md-sys-color-surface-2); -} - -.el-tree-node:focus > .el-tree-node__content { - background: var(--md-sys-color-surface-3); -} - -/* ---------- Friend Locations -------- */ - -.friend-card__name { - color: rgb(var(--md-sys-color-on-primary-container)) !important; -} -.friend-card__avatar { - border: 1px solid rgb(var(--md-sys-color-outline-variant)) !important; -} -.friend-card__signature { - color: rgb(var(--md-sys-color-on-surface-variant)) !important; -} -.friend-card__world { - background: rgb(var(--md-sys-color-secondary-container)) !important; -} -.friend-card__location { - color: rgb(var(--md-sys-color-on-secondary-container)); -} -.x-friend-item > .detail > .extra, -.extra, -.friend-view__divider-text { - color: rgb(var(--md-sys-color-on-background)); -} -.friend-card__status-dot { - border: calc(2px * var(--card-scale)) solid - rgb(var(--md-sys-color-outline-variant)) !important; -} -.friend-view__divider:before, -.friend-view__divider:after { - background: rgb(var(--md-sys-color-outline-variant)) !important; -} - -/* ---------- Segmented Item -------- */ - -.el-segmented { - background: rgb(var(--md-sys-color-secondary-container)) !important; - border-radius: 16px !important; - overflow: hidden; - padding: unset; -} -.el-segmented__item { - color: rgb(var(--md-sys-color-on-surface-variant)); - border-radius: 0px; -} -.el-segmented__item-selected { - background: rgba(var(--md-sys-color-on-secondary-container), 0.12); - border-radius: 0px; -} -.el-segmented__item.is-selected { - color: rgb(var(--md-sys-color-primary)); - border-radius: 0px; -} -.el-segmented__item.is-selected:hover { - color: rgb(var(--md-sys-color-on-primary-container)); -} -.el-segmented__item:not(.is-selected):hover { - background-color: rgba( - var(--md-sys-color-on-secondary-container), - 0.08 - ) !important; - color: rgb(var(--md-sys-color-on-primary-container)) !important; -} -.el-segmented__item:first-child, -/* Select second child because for some reason first child of el-segmented is the "-selected" with a translate that moves it, I guess that's so it can be animated well */ -.el-segmented__item:nth-child(2):hover, -.el-segmented__item-selected[style*='translateX(0px)'] { - border-top-left-radius: 16px !important; - border-bottom-left-radius: 16px !important; -} -.el-segmented__item:last-child, -.el-segmented__item-selected[style*='translateX(197px)'] { - border-top-right-radius: 16px !important; - border-bottom-right-radius: 16px !important; -} - -/* ---------- Radio Button -------- */ - -.el-radio__inner, -.el-radio__input.is-checked .el-radio__inner, -.el-radio__input.is-disabled .el-radio__inner, -.el-radio__input.is-disabled .el-radio__inner::after, -.el-radio__input.is-disabled.is-checked .el-radio__inner, -.el-radio__input.is-disabled.is-checked .el-radio__inner::after { - all: initial; - background-color: transparent; -} - -.el-radio__inner::after { - all: unset; - height: 20px; - width: 20px; - content: 'radio_button_unchecked'; - font-family: 'Material Symbols Rounded'; - font-size: 20px; - line-height: 20px; - vertical-align: bottom; - background-color: transparent !important; - color: rgb(var(--md-sys-color-on-surface-variant)); - transition: color 0.1s ease-in-out; - font-variation-settings: 'FILL' 0; -} -.el-radio__input.is-checked .el-radio__inner::after { - content: 'radio_button_checked'; - color: rgb(var(--md-sys-color-primary)); - font-variation-settings: 'FILL' 0; -} -.el-radio__input.is-disabled.is-checked .el-radio__inner::after { - height: 20px; - width: 20px; - content: 'radio_button_checked'; - font-family: 'Material Symbols Rounded'; - font-size: 20px; - line-height: 20px; - vertical-align: bottom; - color: rgba(var(--md-sys-color-on-surface), 0.38); - font-variation-settings: 'FILL' 0; -} -.el-radio__input.is-disabled .el-radio__inner::after { - height: 20px; - width: 20px; - content: 'radio_button_unchecked'; - font-family: 'Material Symbols Rounded'; - font-size: 20px; - line-height: 20px; - vertical-align: bottom; - color: rgba(var(--md-sys-color-on-surface), 0.38); - font-variation-settings: 'FILL' 0; -} -.el-radio__label { - color: rgb(var(--md-sys-color-on-surface-variant)); - transition: color 0.1s ease-in-out; -} -.el-radio__input.is-checked + .el-radio__label { - color: rgb(var(--md-sys-color-primary)); -} -.el-radio__input.is-disabled + span.el-radio__label { - color: rgba(var(--md-sys-color-on-surface), 0.38); -} -.el-radio-group { - align-items: center; -} - -/* popup */ - -.el-tooltip__popper.is-dark { - background-color: rgb(var(--md-sys-color-inverse-surface)); - border-radius: 8px; - color: rgb(var(--md-sys-color-inverse-on-surface)); - font-family: var(--md-sys-typescale-label-medium-font); - line-height: var(--md-sys-typescale-label-medium-line-height); - font-size: var(--md-sys-typescale-label-medium-size); - font-weight: var(--md-sys-typescale-label-medium-weight); - letter-spacing: var(--md-sys-typescale-label-medium-tracking); -} - -/* Dialog / Message box */ - -.el-dialog__wrapper::-webkit-scrollbar, -.x-menu-container::-webkit-scrollbar { - display: none; -} -.el-dialog__wrapper { - display: grid; -} - -/* Notification position box (for some reason?!) */ - -// this is awful never do this -*:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog) - > .el-dialog:not([aria-label*='Notification Position']):not( - [aria-label*='Launch'] - ):not([aria-label*='VRCX Updater']):not([aria-label*='Social Status']) { - max-width: 1125px !important; - width: 1125px !important; -} -*:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog) - > .el-dialog - > .el-dialog__body { - overflow-y: auto; - max-height: 825px; -} -.el-dialog { - border-radius: 28px; - padding: 24px; - background: var(--md-sys-color-surface-3); - margin-top: 3%; -} -.el-dialog__body { - padding: 0 !important; -} -.el-message-box { - background: var(--md-sys-color-surface-3); - border: none; - border-radius: 28px; - padding: 24px; - width: 500px; - word-break: break-all; -} -.el-message-box > *, -.el-dialog > * { - padding: 0; -} -.el-message-box__status.el-icon-info { - color: rgb(var(--md-sys-color-secondary)); -} -.el-message-box__headerbtn, -.el-dialog__headerbtn { - display: none; -} -.el-message-box > .el-message-box__header, -.el-dialog__header { - text-align: center; - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-headline-small-font); - line-height: var(--md-sys-typescale-headline-small-line-height); - font-size: var(--md-sys-typescale-headline-small-size); - font-weight: var(--md-sys-typescale-headline-small-weight); - letter-spacing: var(--md-sys-typescale-headline-small-tracking); - margin-bottom: 16px; -} -.x-user-dialog > .el-dialog > .el-dialog__body, -.x-world-dialog > .el-dialog > .el-dialog__body, -.x-avatar-dialog > .el-dialog > .el-dialog__body, -.x-group-dialog > .el-dialog > .el-dialog__body { - margin-bottom: 0; - max-height: unset; -} -.el-message-box__content, -.el-dialog__body { - color: rgb(var(--md-sys-color-on-surface-variant)); - font-family: var(--md-sys-typescale-body-medium-font); - line-height: var(--md-sys-typescale-body-medium-line-height); - font-size: var(--md-sys-typescale-body-medium-size); - font-weight: var(--md-sys-typescale-body-medium-weight); - letter-spacing: var(--md-sys-typescale-body-medium-tracking); - margin-bottom: 24px; - max-height: 500px; - scroll-margin-left: 8px; - word-break: break-word; -} -.el-message-box__content > *, -.el-dialog__body > * { - height: 0% !important; -} - -.el-message-box__btns .el-button, -.el-dialog__footer .el-button { - background-color: transparent; -} - -.x-user-dialog - [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;'] - > :last-child, -.x-world-dialog - [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;'] - > :last-child, -.x-avatar-dialog - [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;'] - > :last-child, -.x-group-dialog - [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;'] - > :last-child { - width: 40px; - display: flex; - flex-direction: column; - align-items: center; -} -[style='flex: 0 0 auto; margin-left: 10px;'] > .el-dropdown { - margin: 0 !important; -} - -/* ---------- Slider ---------- */ - -.el-slider__runway { - background-color: rgb(var(--md-sys-color-surface-variant)); - height: 4px; - border-radius: 2px; -} -.el-slider__bar { - background-color: rgb(var(--md-sys-color-primary)); - height: 4px; -} -.el-slider__stop { - background-color: rgba(var(--md-sys-color-on-primary), 0.38); - height: 4px; - width: 4px; -} -.el-slider__button { - position: relative; - height: 20px; - width: 20px; - border: none; - background-color: rgb(var(--md-sys-color-primary)); -} -.el-slider__button.dragging, -.el-slider__button.hover, -.el-slider__button:hover { - transform: none; -} -.el-slider__button::after { - position: absolute; - content: ''; - height: 0; - width: 0; - border-radius: 20px; - top: -10px; - transform: translate(-50%); - transition: - height 0.1s ease-in-out, - width 0.1s ease-in-out; -} -.el-slider__button:hover::after, -.el-slider__button:focus::after { - height: 40px; - width: 40px; - background-color: rgba(var(--md-sys-color-primary), 0.08); -} -.el-slider__button.is-active:after { - height: 40px; - width: 40px; - background-color: rgba(var(--md-sys-color-primary), 0.12); -} - -/* ---------- Color picker---------- */ - -.color-picker { - line-height: 32px; - margin-right: 16px !important; - margin-left: 10px !important; -} -.el-color-picker { - padding: 5px; -} -.el-color-picker__trigger { - border: none; -} -.el-color-picker--small .el-color-picker__trigger { - height: 32px; - width: 32px; -} -.el-color-picker__color { - border: 1px solid rgb(var(--md-sys-color-outline)); - border-radius: 5px; -} -.el-color-picker__color-inner { - border-radius: 4px; -} -.el-color-picker__panel { - background: var(--md-sys-color-surface-3); - border: none; - border-radius: 12px; - padding: 12px; -} -.el-color-dropdown__value { - width: 120px; -} - -/* ---------- Menu ---------- */ - -.el-popper.is-light { - border: 12px !important; - background: rgb(var(--md-sys-color-surface)) !important; - border-radius: 12px !important; -} -.el-popper[x-placement^='top'], -.el-popper[x-placement^='bottom'] { - margin: 0; -} -.el-dropdown-menu, -.el-select-dropdown { - padding: 8px 0; - border: none; - border-radius: 8px; - background: var(--md-sys-color-surface-2); - overflow: auto; - max-height: 90%; -} - -.el-dropdown-menu__item { - height: 36px; - padding: 0 12px; - display: flex; - align-items: center; - color: rgb(var(--md-sys-color-on-surface)) !important; - font-family: var(--md-sys-typescale-label-large-font); - line-height: var(--md-sys-typescale-label-large-line-height); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); -} -.el-dropdown-menu__item > i { - color: rgb(var(--md-sys-color-on-surface-variant)); - margin-right: 12px; - font-size: 24px; -} -.el-dropdown-menu--small - .el-dropdown-menu__item.el-dropdown-menu__item--divided:before { - margin: 0; -} -.el-dropdown-menu__item:not(.is-disabled):hover, -.el-select-dropdown__item.hover, -.el-dropdown-menu__item:focus { - background-color: rgba(var(--md-sys-color-on-surface), 0.08) !important; - color: rgb(var(--md-sys-color-on-surface)) !important; -} -.el-dropdown-menu__item.is-active, -.el-select-dropdown.is-multiple .el-select-dropdown__item.selected, -.el-select-dropdown__item.selected { - background-color: rgba(var(--md-sys-color-on-surface), 0.12) !important; - color: rgb(var(--md-sys-color-on-surface)) !important; -} -.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover { - background-color: rgba(var(--md-sys-color-on-surface), 0.16) !important; -} -.el-dropdown-menu--small - .el-dropdown-menu__item.el-dropdown-menu__item--divided { - border-top: 1px solid rgb(var(--md-sys-color-outline-variant)); - margin-top: 8px; -} - -.el-popover { - background: var(--md-sys-color-surface-3) !important; - border-color: rgb(var(--md-sys-color-outline-variant)) !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow { - border-top-color: var(--md-sys-color-surface-3) !important; -} - -.el-popper[data-popper-placement^='top'] .el-popper__arrow::after { - border-top-color: var(--md-sys-color-surface-3) !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow { - border-bottom-color: var(--md-sys-color-surface-3) !important; -} - -.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::after { - border-bottom-color: var(--md-sys-color-surface-3) !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow { - border-left-color: var(--md-sys-color-surface-3) !important; -} - -.el-popper[data-popper-placement^='left'] .el-popper__arrow::after { - border-left-color: var(--md-sys-color-surface-3) !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow { - border-right-color: var(--md-sys-color-surface-3) !important; -} - -.el-popper[data-popper-placement^='right'] .el-popper__arrow::after { - border-right-color: var(--md-sys-color-surface-3) !important; -} - -/* Status icon */ -i.x-user-status { - height: 12px; - width: 12px; -} - -/* ---------- Flags ---------- */ - -/* Navigation rail */ -.el-icon-news::before { - content: 'feed'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-s-data::before { - content: 'leaderboard'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-search::before { - content: 'search'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-notebook-2::before { - content: 'group'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-finished::before { - content: 'security'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-bell::before { - content: 'notifications'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-s-management::before { - content: 'bookmark'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-user::before { - content: 'account_circle'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-s-tools::before { - content: 'settings'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* star */ -.el-icon-star-off::before { - content: 'star'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 0; -} -.el-icon-star-on::before { - content: 'star'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* right arrow */ -.el-icon-right::before { - content: 'arrow_right_alt'; - font-family: 'Material Symbols Rounded'; - vertical-align: -7px; - margin: 0 4px; - font-size: 24px; - font-variation-settings: 'FILL' 1; - color: rgb(var(--md-sys-color-primary)); -} - -/* close */ -.el-icon-close::before { - content: 'close'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* more */ -.el-icon-more::before { - content: 'more_horiz'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* direct access */ -.el-icon-discover::before { - content: 'explore'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* refresh */ -.el-icon-refresh::before { - content: 'refresh'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* User Menu */ -.el-icon-s-order::before { - content: 'content_copy'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-s-custom::before { - content: 'person'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-edit::before { - content: 'edit'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-switch-button::before { - content: 'logout'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* World Menu */ -.el-icon-s-flag::before { - content: 'flag'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-s-home::before { - content: 'home'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-tickets::before { - content: 'library_books'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 0; -} -.el-icon-picture-outline::before { - content: 'photo_library'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 0; -} - -/* info */ -.el-icon-warning::before, -.el-icon-info::before { - content: 'info'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* delete */ -.el-icon-delete::before, -.el-icon-delete-solid::before { - content: 'delete'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* Profile panel */ -.el-icon-printer::before { - content: 'print'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-chat-dot-round::before { - content: 'badge'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-postcard::before { - content: 'contact_mail'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-circle-close::before { - content: 'block'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-turn-off-microphone::before { - content: 'mic_off'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* Setting */ -.el-icon-notebook-1::before { - content: 'table'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-rank::before { - content: 'open_with'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-time::before { - content: 'schedule'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-chat-square::before { - content: 'filter_alt'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-s-operation::before { - content: 'tune'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-caret-right::before { - content: 'play_arrow'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} -.el-icon-download::before { - content: 'download'; - font-family: 'Material Symbols Rounded'; - vertical-align: bottom; - margin: 0; - font-variation-settings: 'FILL' 1; -} - -/* Checkbox */ -.el-checkbox__inner, -.el-checkbox__inner::after, -.el-checkbox__input.is-checked .el-checkbox__inner, -.el-checkbox__input.is-indeterminate .el-checkbox__inner { - color: unset; - background-color: unset; - border: unset; -} - -.el-checkbox__inner::after { - all: unset; - height: 20px; - width: 20px; - content: 'check_box_outline_blank'; - font-family: 'Material Symbols Rounded'; - font-size: 20px; - line-height: 20px; - color: rgb(var(--md-sys-color-on-surface-variant)); - transition: color 0.1s ease-in-out; - font-variation-settings: 'FILL' 0; -} -.el-checkbox__input.is-checked .el-checkbox__inner::after { - content: 'check_box'; - color: rgb(var(--md-sys-color-primary)); -} -.el-checkbox__input.is-checked + .el-checkbox__label { - color: rgb(var(--md-sys-color-primary)); -} -.el-checkbox__input.is-indeterminate .el-checkbox__inner { - content: 'indeterminate_check_box'; - color: rgb(var(--md-sys-color-on-surface)); -} -.el-checkbox__label { - font-family: var(--md-sys-typescale-label-large-font); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); -} -.x-friend-list > .x-friend-group:first-child { - color: rgb(var(--md-sys-color-on-surface)); - font-family: var(--md-sys-typescale-label-large-font); - font-size: var(--md-sys-typescale-label-large-size); - font-weight: var(--md-sys-typescale-label-large-weight); - letter-spacing: var(--md-sys-typescale-label-large-tracking); - margin-bottom: 6px; -} -.x-friend-list > .x-friend-group > .x-link { - color: rgb(var(--md-sys-color-outline)); - font-family: var(--md-sys-typescale-label-medium-font); - font-size: var(--md-sys-typescale-label-medium-size); - font-weight: var(--md-sys-typescale-label-medium-weight); - letter-spacing: var(--md-sys-typescale-label-medium-tracking); -} - -.el-table__cell { - text-align: center !important; -} - -.el-collapse-item .el-tag--small { - background-color: transparent; - border: transparent; - padding-top: 6px; -} -.simple-switch { - justify-content: space-between; -} - -.el-dialog__body .el-tag--small { - line-height: 28px; -} -.el-divider { - border-top: 1px rgb(var(--md-sys-color-outline-variant)) - var(--el-border-style); -} -.el-divider__text { - background: rgba(var(--md-sys-color-background)); - color: #efefef; -} -.el-backtop { - background: var(--md-sys-color-surface-1); - color: rgb(var(--md-sys-color-primary)); -} - -// Date picker -.el-date-table td.available:hover span { - color: #fff; -} -.el-date-table td.available:hover { - color: #fff; -} -.el-date-table td.disabled div { - background-color: rgb(48, 46, 53); -} -.el-date-table td.current:not(.disabled) span { - background: var(--md-sys-color-surface-2); - color: #fff; -} -.el-date-table td.today span { - color: rgb(var(--md-sys-color-primary-container)); -} -.el-year-table td .cell:hover, -.el-year-table td.current:not(.disabled) .cell { - color: rgb(48, 46, 53); -} -.el-month-table td.current:not(.disabled) .cell { - color: rgb(48, 46, 53); -} -.el-date-picker__header-label.active, -.el-date-picker__header-label:hover { - color: rgb(48, 46, 53); -} -.el-picker-panel__icon-btn:hover { - color: rgb(48, 46, 53); -} -.el-month-table td .cell:hover { - color: rgb(48, 46, 53); -} -.el-skeleton.is-animated .el-skeleton__item { - background: linear-gradient(90deg, #302e34 25%, #423f46 37%, #302e34 63%); - background-size: 400% 100%; - animation: el-skeleton-loading 1.4s ease infinite; -} -.el-table .el-table__body-wrapper .el-table__row .cell > span { - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -.el-dialog[aria-label='Launch'] .el-form .el-form-item__content { - display: flex; - align-items: center; -} -.el-dialog[aria-label='Launch'] - .el-form - > .el-form-item:nth-child(2) - .el-form-item__label { - display: flex; - align-items: center; -} - -div.x-friend-list - > div:nth-child(1) - > div - > div.el-textarea.el-input--small - > span.el-input__count { - background-color: var(--md-sys-color-surface-3) !important; -} - -.el-calendar { - background: var(--md-sys-color-surface-3) !important; - --el-calendar-selected-bg-color: rgb( - var(--md-sys-color-secondary-container) - ) !important; -} - -.el-calendar__title { - color: rgb(var(--md-sys-color-on-surface)) !important; -} - -.el-calendar-table td.is-selected { - background-color: rgb(var(--md-sys-color-secondary-container)); -} - -.el-calendar-table td.is-today { - color: rgb(var(--md-sys-color-primary)); -} - -.el-card { - background: var(--md-sys-color-surface-2) !important; - border-color: rgb(var(--md-sys-color-outline-variant)) !important; -} - -.el-descriptions__body { - background: var(--md-sys-color-surface-3) !important; - color: rgb(var(--md-sys-color-on-surface)) !important; -} - -.el-timeline-item__tail { - border-left-color: rgb(var(--md-sys-color-outline-variant)) !important; -} - -.el-timeline-item__node { - background-color: rgb(var(--md-sys-color-outline)) !important; -} - -.x-dialog .top-content { - height: 640px !important ; -} - -// Group Calendar Dialog borders -.search-container { - border-bottom: 1px solid rgba(var(--md-sys-color-outline), 0.5) !important; -} - -.group-header { - border-bottom: 2px solid rgba(var(--md-sys-color-outline), 0.5) !important; -} - -.el-select__wrapper { - background-color: rgb(var(--md-sys-color-surface-variant)) !important; - border: 1px solid rgb(var(--md-sys-color-outline-variant)) !important; -} - -.el-select__wrapper.is-focused { - border-color: rgb(var(--md-sys-color-primary)) !important; - box-shadow: none !important; -} - -.el-select__wrapper.is-disabled { - background-color: rgba(var(--md-sys-color-on-surface), 0.12) !important; - color: rgba(var(--md-sys-color-on-surface), 0.38) !important; -} - -.el-input__wrapper { - background-color: rgb(var(--md-sys-color-surface-variant)) !important; - border: 1px solid rgb(var(--md-sys-color-outline-variant)) !important; -} - -.el-input__wrapper.is-focus { - border-color: rgb(var(--md-sys-color-primary)) !important; -} - -// Fix the height difference of search bar -.el-select__wrapper, -.el-input__wrapper { - height: 32px !important; - box-sizing: border-box !important; - padding: 0 8px !important; -} -.el-select__wrapper .el-input__inner, -.el-input__wrapper .el-input__inner { - height: 100% !important; - line-height: 32px !important; -} - -.el-input__inner { - border: none !important; - background: transparent !important; - box-shadow: none !important; -} - -.el-table { - background-color: rgb(var(--md-sys-color-surface)) !important; -} - -.el-table tr, -.el-table td.el-table__cell, -.el-table th.el-table__cell { - background-color: transparent !important; -} - -.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { - background-color: rgba(var(--md-sys-color-primary), 0.05) !important; -} - -.el-table__body-wrapper .el-table__row:hover > .el-table__cell { - background-color: rgba(var(--md-sys-color-primary), 0.08) !important; -} - -.category-header { - background-color: rgba(var(--md-sys-color-primary), 0.05) !important; -} - -.category-title, -.tool-name { - color: rgv(var(--md-sys-color-on-surface-variant)) !important; -} - -.tool-icon { - background-color: rgba(var(--md-sys-color-primary), 0.05) !important; -} - -.tool-icon > * { - color: rgv(var(--md-sys-color-on-surface-variant)) !important; -} - -/* Settings Menu Button */ -.nav-menu-settings__item, -.nav-menu-theme__item, -.nav-menu-popover__menu-item { - border-radius: 12px !important; - color: rgb(var(--md-sys-color-on-secondary-container)) !important; -} -.nav-menu-theme__check { - color: rgb(var(--md-sys-color-primary)) !important; -} -.nav-menu-settings__item--danger { - color: rgb(var(--md-sys-color-error)) !important; -} -.nav-menu-settings__item:hover:not(.nav-menu-settings__item--danger), -.nav-menu-theme__item:hover, -.nav-menu-popover__menu-item:hover { - background-color: rgb(var(--md-sys-color-secondary-container)) !important; -} -.nav-menu-theme__item.is-active { - background-color: rgb(var(--md-sys-color-surface-variant)) !important; -} - -/* New Social Menu */ -.nav-menu-popover { - background: var(--md-sys-color-surface-2); -} -.nav-menu-popover__header i { - color: rgb(var(--md-sys-color-secondary)) !important; -} diff --git a/src/styles/themes/theme.pink.scss b/src/styles/themes/theme.pink.scss deleted file mode 100644 index bfe0cda7..00000000 --- a/src/styles/themes/theme.pink.scss +++ /dev/null @@ -1,550 +0,0 @@ -/* - * VRCX Pink theme by Kamiya - * https://github.com/kamiya10/VRCX-theme - */ - -@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 Variable', 'Noto Sans KR Variable', 'Noto Sans TC Variable', - 'Noto Sans SC Variable', sans-serif; - - --group-calendar-event-bg: rgba(223, 162, 162, 0.1); - --group-calendar-badge-following: var(--theme); - --group-calendar-badge-normal: var(--lighter-border); -} -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--small.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) !important; -} -.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; -} - -.el-tag, -.el-tag.el-tag--success, -.el-tag.el-tag--info, -.el-tag.el-tag--warning, -.el-tag.el-tag--danger { - 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--small { - border: transparent; - background-color: var(--lighter-lighter-bg); -} -.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; -} - -.el-calendar { - background-color: var(--lighter-bg) !important; -} - -.el-calendar__title { - color: var(--theme) !important; -} - -.el-card { - background-color: var(--light-bg) !important; - border-color: var(--lighter-bg) !important; -} - -.el-descriptions__body { - background-color: var(--bg) !important; - color: var(--theme) !important; -} - -.el-timeline-item__tail { - border-left-color: var(--lighter-border) !important; -} - -.el-timeline-item__node { - background-color: var(--lighter-border) !important; -} - -.el-popover { - background-color: var(--bg) !important; - border-color: var(--lighter-bg) !important; -} - -.el-popper[x-placement^='top'] .popper__arrow { - border-top-color: var(--bg) !important; -} - -.el-popper[x-placement^='top'] .popper__arrow::after { - border-top-color: var(--bg) !important; -} - -.el-popper[x-placement^='bottom'] .popper__arrow { - border-bottom-color: var(--bg) !important; -} - -.el-popper[x-placement^='bottom'] .popper__arrow::after { - border-bottom-color: var(--bg) !important; -} - -.el-popper[x-placement^='left'] .popper__arrow { - border-left-color: var(--bg) !important; -} - -.el-popper[x-placement^='left'] .popper__arrow::after { - border-left-color: var(--bg) !important; -} - -.el-popper[x-placement^='right'] .popper__arrow { - border-right-color: var(--bg) !important; -} - -.el-popper[x-placement^='right'] .popper__arrow::after { - border-right-color: var(--bg) !important; -} - -// Group Calendar Dialog borders -.search-container { - border-bottom: 1px solid var(--lighter-bg) !important; -} - -.group-header { - border-bottom: 2px solid var(--lighter-bg) !important; -} - -.el-select__wrapper { - background-color: var(--light-bg) !important; - border: 1px solid var(--lighter-bg) !important; - color: var(--theme); -} - -.el-select__wrapper.is-focused { - border-color: var(--theme) !important; -} - -.el-select__wrapper.is-disabled { - background-color: var(--bg) !important; - color: var(--lighter-border) !important; -} - -.el-input__wrapper { - background-color: var(--light-bg) !important; - border: 1px solid var(--lighter-bg) !important; -} - -.el-input__wrapper.is-focus { - border-color: var(--theme) !important; -} - -.el-table { - background-color: var(--bg) !important; -} - -.el-table tr, -.el-table td.el-table__cell, -.el-table th.el-table__cell { - background-color: transparent !important; -} - -.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { - background-color: var(--light-bg) !important; -} - -.el-table__body-wrapper .el-table__row:hover > .el-table__cell { - background-color: var(--lighter-bg) !important; -}