diff --git a/src/app.css b/src/app.css index 2336e7a1..ed934950 100644 --- a/src/app.css +++ b/src/app.css @@ -39,125 +39,7 @@ 'Noto Sans TC Variable', 'Noto Sans JP Variable', 'Noto Sans KR Variable', 'Noto Sans SC Variable'; } -:root { - --el-color-primary-light-9: color-mix( - in oklch, - var(--el-color-primary) 12%, - transparent - ); - --el-bg-color: var(--color-white); - --el-bg-color-page: var(--color-zinc-50); - --el-bg-color-overlay: var(--color-white); - --el-text-color-secondary: var(--color-zinc-700); - --el-text-color-placeholder: var(--color-zinc-500); - --el-text-color-disabled: var(--color-zinc-400); - - --el-border-color: var(--color-zinc-200); - --el-border-color-light: var(--color-zinc-200); - - --el-border-color-lighter: var(--color-zinc-100); - --el-border-color-extra-light: var(--color-zinc-50); - - --el-border-color-dark: var(--color-zinc-300); - --el-border-color-darker: var(--color-zinc-400); - - --el-fill-color: var(--color-zinc-50); - --el-fill-color-light: var(--color-zinc-50); - --el-fill-color-lighter: var(--color-white); - --el-fill-color-extra-light: var(--color-zinc-50); - - --el-fill-color-dark: var(--color-zinc-100); - --el-fill-color-darker: var(--color-zinc-200); - - --el-color-success: var(--color-emerald-500); - --el-color-success-light-3: var(--color-emerald-400); - --el-color-success-light-5: var(--color-emerald-300); - --el-color-success-light-7: var(--color-emerald-200); - --el-color-success-dark-2: var(--color-emerald-600); - - --el-color-warning: var(--color-amber-500); - --el-color-warning-light-3: var(--color-amber-400); - --el-color-warning-light-5: var(--color-amber-300); - --el-color-warning-light-7: var(--color-amber-200); - --el-color-warning-dark-2: var(--color-amber-600); - - --el-color-danger: var(--color-red-500); - --el-color-danger-light-3: var(--color-red-400); - --el-color-danger-light-5: var(--color-red-300); - --el-color-danger-light-7: var(--color-red-200); - --el-color-danger-dark-2: var(--color-red-600); - - --el-color-info: var(--color-zinc-500); - --el-color-info-light-3: var(--color-zinc-400); - --el-color-info-light-5: var(--color-zinc-300); - --el-color-info-light-7: var(--color-zinc-200); - --el-color-info-dark-2: var(--color-zinc-600); - - --el-border-radius-small: var(--radius-sm); - --el-border-radius-base: var(--radius-lg); - --el-border-radius-round: var(--radius-xl); - - --el-box-shadow: var(--shadow-md); - --el-box-shadow-light: var(--shadow-sm); - --el-box-shadow-lighter: var(--shadow-xs); - - --el-component-size-small: 30px; - --el-component-size: 36px; - --el-component-size-large: 40px; - - --el-font-size-base: 14px; - - --el-text-color-primary: var(--color-zinc-950); - --el-text-color-regular: var(--color-zinc-800); - - --el-border-color-hover: var(--el-color-primary); - --el-input-focus-border-color: var(--el-color-primary); - - --el-disabled-bg-color: var(--color-zinc-100); - --el-disabled-text-color: var(--color-zinc-400); - --el-disabled-border-color: var(--color-zinc-200); - - --el-mask-color: color-mix(in oklch, var(--color-white) 72%, transparent); - - --el-menu-hover-bg-color: color-mix( - in oklch, - var(--el-text-color-primary) 6%, - transparent - ); - - --x-scrollbar-size: 6px; - --x-scrollbar-radius: 4px; - --x-scrollbar-track-color: transparent; - --x-scrollbar-thumb-color: color-mix( - in oklch, - var(--el-text-color-secondary) 30%, - transparent - ); - --x-scrollbar-thumb-hover-color: color-mix( - in oklch, - var(--el-text-color-secondary) 50%, - transparent - ); - --x-scrollbar-thumb-active-color: color-mix( - in oklch, - var(--el-text-color-secondary) 60%, - transparent - ); - - --x-table-user-text-color: var(--color-zinc-900); - - --x-popper-bg: var(--el-bg-color-overlay); - --x-popper-border-color: var(--el-border-color-light); - --x-popper-text-color: var(--el-text-color-regular); - --x-popper-shadow: var(--el-box-shadow-light); - --x-tooltip-border-color: var(--color-zinc-700); - - --el-popover-bg-color: var(--x-popper-bg); - --el-popover-border-color: var(--x-popper-border-color); - --el-tooltip-bg-color: var(--color-zinc-900); - --el-tooltip-text-color: var(--color-zinc-100); -} html { overflow: hidden; @@ -167,689 +49,17 @@ body { font-family: var(--font-western), var(--font-symbol), var(--font-primary-cjk), var(--font-fallback-cjk); - background-color: var(--el-bg-color-page); - background-image: - radial-gradient( - circle at 14% 18%, - color-mix(in oklch, var(--el-color-primary) 18%, transparent), - transparent 28% - ), - radial-gradient( - circle at 88% 4%, - color-mix(in oklch, var(--el-color-primary) 14%, transparent), - transparent 24% - ), - linear-gradient( - 180deg, - color-mix(in oklch, var(--color-white) 70%, transparent), - color-mix(in oklch, var(--color-white) 92%, transparent) - ); - color: var(--el-text-color-primary); + margin: 0; } -html.dark, -:root.dark, -:root[data-theme='dark'] { - --el-bg-color: var(--color-neutral-950); - --el-bg-color-page: var(--color-neutral-950); - --el-bg-color-overlay: var(--color-neutral-900); - - --el-text-color-primary: var(--color-neutral-50); - --el-text-color-regular: var(--color-neutral-200); - --el-text-color-secondary: var(--color-neutral-400); - --el-text-color-placeholder: var(--color-neutral-500); - --el-text-color-disabled: var(--color-neutral-600); - - --el-border-color: var(--color-neutral-800); - --el-border-color-light: var(--color-neutral-800); - --el-border-color-lighter: var(--color-neutral-900); - --el-border-color-extra-light: var(--color-neutral-950); - --el-border-color-dark: var(--color-neutral-700); - --el-border-color-darker: var(--color-neutral-600); - --el-border-color-hover: var(--el-color-primary-dark-2); - --el-input-focus-border-color: var(--el-color-primary-dark-2); - - --el-fill-color: var(--color-neutral-900); - --el-fill-color-light: var(--color-neutral-800); - --el-fill-color-lighter: var(--color-neutral-700); - --el-fill-color-extra-light: var(--color-neutral-800); - - --el-fill-color-dark: var(--color-neutral-950); - --el-fill-color-darker: var(--color-neutral-950); - - --el-color-info: var(--color-neutral-300); - --el-color-info-light-3: var(--color-neutral-200); - --el-color-info-light-5: var(--color-neutral-300); - --el-color-info-light-7: var(--color-neutral-400); - --el-color-info-dark-2: var(--color-neutral-200); - - --el-tooltip-bg-color: var(--color-neutral-100); - --el-tooltip-text-color: var(--color-neutral-900); - --x-tooltip-border-color: var(--color-neutral-300); - - --el-disabled-bg-color: var(--color-neutral-900); - --el-disabled-text-color: var(--color-neutral-600); - --el-disabled-border-color: var(--color-neutral-800); - - --el-menu-hover-bg-color: color-mix( - in oklch, - var(--color-white) 16%, - transparent - ); - - --el-mask-color: color-mix( - in oklch, - var(--color-neutral-950) 30%, - transparent - ); - - --x-el-hover-bg-color-dark: color-mix( - in oklch, - var(--el-color-primary-dark-2) 30%, - transparent - ); - - --x-scrollbar-thumb-color: color-mix( - in oklch, - var(--el-text-color-secondary) 40%, - transparent - ); - --x-scrollbar-thumb-hover-color: color-mix( - in oklch, - var(--el-text-color-secondary) 60%, - transparent - ); - --x-scrollbar-thumb-active-color: color-mix( - in oklch, - var(--el-text-color-secondary) 70%, - transparent - ); - - --x-table-user-text-color: var(--color-white); - - .el-button { - --el-button-disabled-bg-color: var(--color-neutral-900); - --el-button-disabled-border-color: var(--color-neutral-800); - --el-button-hover-bg-color: var(--x-el-hover-bg-color-dark); - --el-button-hover-border-color: var(--el-color-primary-dark-2); - --el-button-hover-text-color: var(--el-color-primary-dark-2); - box-shadow: none; - } - - --x-el-button-plain-border-color: color-mix( - in oklch, - var(--el-color-primary) 55%, - var(--el-bg-color) 45% - ); - - .el-button--primary.is-plain { - --el-button-border-color: var(--x-el-button-plain-border-color); - } - - .el-menu-item { - color: var(--color-neutral-200); - } - - .el-table { - background-color: var(--el-bg-color-page); - } - - .el-table .el-table__empty-block { - background-color: var(--el-bg-color-page); - } - - --x-dark-surface-border-color: color-mix( - in oklch, - var(--color-white) 10%, - transparent - ); - - #x-app .x-container { - border-radius: var(--el-border-radius-round); - border: 0.666667px solid var(--x-dark-surface-border-color) !important; - box-shadow: none !important; - } - - .el-dialog, - .el-message-box { - border: 0.666667px solid var(--x-dark-surface-border-color) !important; - box-shadow: none !important; - } - - .el-dialog { - --el-dialog-border-radius: var(--el-border-radius-base); - background-color: var(--color-neutral-950) !important; - } - - .el-message-box { - --el-messagebox-border-radius: var(--el-border-radius-small); - background-color: var(--color-neutral-950) !important; - } - - .el-button:not(.is-disabled):not(.el-button--primary):not( - .el-button--success - ):not(.el-button--warning):not(.el-button--danger):not( - .el-button--info - ):not(.el-button--text):not(.el-button--link):not(.is-text):not( - .is-link - ):hover { - background-color: var(--el-button-hover-bg-color) !important; - border-color: var(--el-button-hover-border-color) !important; - color: var(--el-button-hover-text-color) !important; - } - - .el-pagination .el-pager li.is-active { - background-color: color-mix( - in oklch, - var(--el-color-primary) 18%, - transparent - ) !important; - color: var(--el-color-primary) !important; - } - - .el-select-dropdown__item.is-hovering, - .el-select-dropdown__item:hover { - background-color: var(--x-el-hover-bg-color-dark) !important; - } - - .el-dropdown-menu__item:not(.is-disabled):hover, - .el-dropdown-menu__item:not(.is-disabled):focus, - .el-dropdown-menu__item:not(.is-disabled).is-focus { - background-color: color-mix( - in oklch, - var(--color-white) 8%, - transparent - ) !important; - } - - .el-splitter-bar__dragger:hover:not(.is-disabled)::before { - background-color: var(--el-color-primary-dark-2); - } - - .el-pagination .btn-prev:disabled, - .el-pagination .btn-next:disabled { - background-color: transparent; - } -} - -/* :root[data-theme='dark'] { - --el-bg-color: var(--color-neutral-900); - --el-bg-color-page: var(--color-neutral-900); - --el-bg-color-overlay: var(--color-neutral-800); - - .el-dialog { - background-color: var(--el-bg-color-overlay) !important; - } - - .el-message-box { - background-color: var(--el-bg-color-overlay) !important; - } -} */ - -html.dark body, -:root.dark body, -:root[data-theme='dark'] body { - background-image: - radial-gradient( - circle at 14% 18%, - color-mix(in oklch, var(--el-color-primary) 16%, transparent), - transparent 30% - ), - radial-gradient( - circle at 88% 4%, - color-mix(in oklch, var(--el-color-primary) 12%, transparent), - transparent 26% - ), - linear-gradient( - 180deg, - color-mix(in oklch, var(--el-bg-color-page) 92%, transparent), - var(--el-bg-color-page) - ); -} - -html.dark .el-overlay, -:root.dark .el-overlay, -:root[data-theme='dark'] .el-overlay { - background-color: var(--el-mask-color) !important; -} - -html.dark .notify::after, -:root.dark .notify::after, -:root[data-theme='dark'] .notify::after { - background: var(--color-white); -} - -html.dark .x-friend-item > .detail > .extra, -:root.dark .x-friend-item > .detail > .extra, -:root[data-theme='dark'] .x-friend-item > .detail > .extra { - color: var(--color-neutral-300); -} - -#x-app { - background: var(--el-bg-color-page); - color: var(--el-text-color-primary); -} - -#x-app .x-container { - padding: 14px; - border-radius: 16px; - background-color: var(--el-bg-color); - height: calc(100% - 20px); - margin: 10px 6px 10px 1px; - - --tw-shadow: - 0 1px 3px 0 - var( - --tw-shadow-color, - color-mix(in oklch, var(--color-zinc-950) 10%, transparent) - ), - 0 1px 2px -1px - var( - --tw-shadow-color, - color-mix(in oklch, var(--color-zinc-950) 10%, transparent) - ); - box-shadow: - var(--tw-inset-shadow), var(--tw-inset-ring-shadow), - var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); -} - -#x-app .x-aside-container { - background: var(--el-bg-color-page); -} - -#x-app a { - color: var(--el-color-primary); -} - -#x-app a:hover { - color: var(--el-color-primary-dark-2); -} - -.el-select__wrapper { - padding: 4px 12px; -} - -.el-table { - --el-table-row-hover-bg-color: color-mix( - in oklch, - var(--el-text-color-primary) 6%, - transparent - ); - --el-table-border-color: var(--el-border-color); - background-color: var(--el-bg-color-overlay); - border: 1px solid var(--el-border-color); - border-radius: 10px; - overflow: hidden; -} - -.el-input__wrapper:focus-within, -.el-textarea__inner:focus, -.el-select__wrapper.is-focused, -.el-select__wrapper:focus-within, -.el-button:focus-visible { - border-color: var(--el-input-focus-border-color); - box-shadow: 0 0 0 1px - color-mix(in oklch, var(--el-input-focus-border-color) 70%, transparent); -} - -.el-table td.el-table__cell, -.el-table th.el-table__cell.is-leaf { - border-bottom: 1px solid var(--el-border-color-light); -} - -.el-table__expand-column.el-table__cell { - padding: 8px 0 8px 12px !important; - & > .cell { - & i { - color: var(--el-text-color-placeholder); - } - } -} - -.el-table .el-table__cell:not(.el-table__expand-column.el-table__cell) { - padding: 8px 10px; - border-bottom: 1px solid var(--el-border-color-light); - font-size: 13px; - color: var(--el-text-color-regular); -} - -.el-message-box { - --el-messagebox-border-radius: var(--el-border-radius-base); -} - -.el-button { - --el-button-font-weight: 500; - --el-button-disabled-bg-color: var(--color-zinc-100); - --el-button-disabled-border-color: var(--color-zinc-200); - - --el-button-hover-bg-color: var(--el-color-primary-light-9); - --el-button-hover-border-color: var(--el-color-primary); - --el-button-hover-text-color: var(--el-color-primary); - - --tw-shadow: 0 1px 2px 0 - var( - --tw-shadow-color, - color-mix(in oklch, var(--color-zinc-950) 5%, transparent) - ); - box-shadow: - var(--tw-inset-shadow), var(--tw-inset-ring-shadow), - var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); -} - -.el-button:not(.is-disabled):not(.el-button--primary):not( - .el-button--success - ):not(.el-button--warning):not(.el-button--danger):not( - .el-button--info - ):not(.el-button--text):not(.el-button--link):not(.is-text):not( - .is-link - ):hover { - background-color: var(--el-button-hover-bg-color) !important; - border-color: var(--el-button-hover-border-color) !important; - color: var(--el-button-hover-text-color) !important; -} - -.el-tag { - --el-tag-border-radius: var(--el-border-radius-round); - transition: none; - --el-tag-font-size: 12px; - border-color: var(--el-border-color); -} - -.is-compact-table - .el-table - .el-table__cell:not( - .el-table_1_column_1.el-table__expand-column.el-table__cell - ) { - padding: 4px 10px !important; -} - -.is-compact-table .el-table_1_column_1.el-table__expand-column.el-table__cell { - padding: 4px 0 4px 6px !important; -} - -.el-menu-item { - color: var(--color-zinc-800); -} - -.el-table .cell { - padding-left: 4px; - padding-right: 4px; -} - -.el-table th.el-table__cell { - font-weight: 400; - font-size: 13px; - color: var(--el-text-color-secondary); - letter-spacing: 0.3px; - background: var(--el-table-header-bg-color); -} - -.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { - background-color: var(--el-table-row-hover-bg-color); -} - -.el-table__row:hover > .el-table__cell, -.el-table__row.hover-row > .el-table__cell { - background-color: var(--el-table-row-hover-bg-color) !important; -} - -.el-table .cell, -.data-table tr > td > span, -.data-table tr > td > div > span { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - line-clamp: 1; -} - -.el-table__row:hover .el-table__cell .cell, -.data-table tr:hover > td > span, -.data-table tr:hover > td > div > span { - display: revert; - -webkit-line-clamp: unset; - line-clamp: unset; - white-space: pre-line; -} - -.el-tabs__content { - overflow-y: auto; -} - -.el-dialog, -.el-message-box { - word-break: break-word; -} - -.el-popper.x-quick-search .el-select-dropdown__item { - width: 100%; - height: auto; - padding: 0 10px; - font-size: 12px; - line-height: normal; -} - -.el-menu { - background-color: transparent; -} - -.el-menu-item i { - color: var(--el-text-color-primary); -} - -.el-menu-item::before { - content: ''; - position: absolute; - left: -4px; - top: 50%; - height: 36px; - width: 2px; - translate: 0 -50%; - border-radius: 4px; - background: var(--el-color-primary); - transition: - background-color 0.4s, - left 0.2s; -} - -.el-menu-item.is-active::before { - left: 4px; - transition: left 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.552); -} - -.el-menu.el-menu--popup .el-menu-item::before { - opacity: 0; -} - -.el-menu.el-menu--popup .el-menu-item.is-active::before { - opacity: 1; -} - -.el-menu.el-menu--popup .el-menu-item > i { - margin-right: 0.75rem; - font-size: 18px; -} - -.el-sub-menu .el-menu-item.notify::after { - left: 18px; -} - -.el-dialog__body { - padding: 20px; - word-break: break-word; - overflow-wrap: break-word; -} - -.el-dialog { - box-shadow: var(--shadow-md) !important; - overflow: hidden; - --el-dialog-border-radius: var(--el-border-radius-round); -} - -.el-dialog__header { - margin-right: 0; - padding-bottom: 10px; - border-bottom: none !important; -} - -.el-overlay { - backdrop-filter: blur(4px); - background-color: color-mix( - in oklch, - var(--color-zinc-950) 10%, - transparent - ) !important; -} - -.el-loading-mask { - backdrop-filter: blur(4px); - background-color: var(--el-mask-color) !important; -} - -.el-splitter-bar__dragger::before, -.el-splitter-bar__dragger::after { - background-color: transparent; -} - -.el-splitter-bar__dragger:hover:not(.is-disabled)::before { - background-color: var(--el-color-primary-light-3); -} - -.el-splitter-bar__dragger-horizontal:hover:not(.is-disabled)::before { - width: 1px; -} - -.el-splitter-bar__dragger-vertical:hover:not(.is-disabled)::before { - height: 1px; -} - -.el-pagination { - --el-pagination-bg-color: transparent; - --el-pagination-button-bg-color: transparent; - font-weight: normal; -} - -.el-pagination button { - border: none !important; -} - -.el-pagination .el-pager li { - background: transparent !important; - border-radius: 6px; - border: none !important; - color: var(--el-text-color-secondary); - min-width: 32px; - height: 32px; - line-height: 32px; -} - -.el-pagination .el-pager li.is-active { - background-color: var(--el-color-primary-light-9) !important; - color: var(--el-color-primary) !important; - font-weight: bold; -} - -.el-popper__arrow { - display: none !important; -} - -.el-tooltip__popper, -.el-popper[role='tooltip'] { - border-radius: var(--el-border-radius-base); -} - -.el-popover, -.el-popover.el-popper, -.el-popper[role='dialog'] { - background: var(--x-popper-bg) !important; - border: 1px solid var(--x-popper-border-color) !important; - color: var(--x-popper-text-color) !important; - box-shadow: var(--x-popper-shadow) !important; - border-radius: var(--el-border-radius-base); -} - -.el-tooltip__popper .el-popper__arrow::before, -.el-popper[role='tooltip'] .el-popper__arrow::before { - background: var(--el-tooltip-bg-color); - border: 1px solid var(--x-tooltip-border-color); -} -.el-popover .el-popper__arrow::before, -.el-popover.el-popper .el-popper__arrow::before, -.el-popper[role='dialog'] .el-popper__arrow::before { - background: var(--x-popper-bg); - border: 1px solid var(--x-popper-border-color); -} - -.el-select__popper .el-select-dropdown, -.el-dropdown__popper .el-dropdown-menu, -.el-popper[role='listbox'] { - background: var(--el-bg-color-overlay) !important; - border: 1px solid var(--el-border-color-light) !important; - color: var(--el-text-color-primary) !important; -} - -* { - scrollbar-width: thin; - scrollbar-color: var(--x-scrollbar-thumb-color) - var(--x-scrollbar-track-color); -} - -::-webkit-scrollbar { - width: var(--x-scrollbar-size); - height: var(--x-scrollbar-size); -} - -::-webkit-scrollbar-track { - background: var(--x-scrollbar-track-color); - border-radius: var(--x-scrollbar-radius); -} - -::-webkit-scrollbar-thumb { - background: var(--x-scrollbar-thumb-color); - border-radius: var(--x-scrollbar-radius); - transition: background-color var(--el-transition-duration); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--x-scrollbar-thumb-hover-color); -} - -::-webkit-scrollbar-thumb:active { - background-color: var(--x-scrollbar-thumb-active-color); -} - -::-webkit-scrollbar-button { - display: none !important; - width: 0; - height: 0; -} - -::-webkit-scrollbar-corner { - background: transparent; -} - -.color-palettes { - background: var(--el-color-primary); - background: var(--el-color-success); - background: var(--el-color-warning); - background: var(--el-color-danger); - background: var(--el-color-info); - background: var(--el-color-warning); - background: var(--color-zinc-200); - background: var(--color-zinc-300); -} .lucide.is-loading { animation: rotating 2s linear infinite; } -.el-dialog__footer > .el-button + .el-button { - margin-left: 8px; -} -.x-link { - cursor: pointer; -} + .x-ellipsis { overflow: hidden; @@ -870,7 +80,6 @@ html.dark .x-friend-item > .detail > .extra, flex: 1; padding: 10px; overflow: hidden auto; - background: var(--el-bg-color-page); box-sizing: border-box; height: 100%; } @@ -882,7 +91,6 @@ html.dark .x-friend-item > .detail > .extra, justify-content: center; width: 100%; height: 100%; - background: var(--el-bg-color-page); } .x-login { @@ -921,7 +129,6 @@ hr.x-vertical-divider { width: 100%; margin: 0; border: 0; - background: var(--el-border-color-light); } .x-saved-account-list { @@ -939,7 +146,6 @@ hr.x-vertical-divider { .x-menu-container { flex: none; overflow: hidden auto; - background: var(--el-bg-color-page); } .notify::after { @@ -949,7 +155,6 @@ hr.x-vertical-divider { width: 4px; height: 4px; content: ''; - background: var(--el-text-color-secondary); border-radius: 50%; } @@ -963,7 +168,6 @@ hr.x-vertical-divider { display: flex; flex: none; flex-direction: column; - background: var(--el-bg-color-page); padding: 13px 5px 5px 5px; order: 99; height: 100%; @@ -1132,13 +336,11 @@ img.friends-list-avatar { .x-friend-item > .detail > .name { font-weight: 500; - color: var(--el-text-color-primary); line-height: 16px; } .x-friend-item > .detail > .extra, .extra { - color: var(--el-text-color-secondary); font-size: 12px; & > span > span:first-child { scale: 0.9; @@ -1147,7 +349,6 @@ img.friends-list-avatar { } .x-friend-item > .vrcplus-icon { - border: 4px solid var(--el-border-color); border-radius: 20px; width: 200px; height: 200px; @@ -1155,7 +356,6 @@ img.friends-list-avatar { } .x-friend-item > .current-vrcplus-icon { - border: 4px solid var(--el-color-success); cursor: default; } @@ -1167,7 +367,6 @@ img.friends-list-avatar { } .x-friend-item:hover { - background: var(--el-menu-hover-bg-color); border-radius: 8px; } @@ -1183,8 +382,6 @@ img.friends-list-avatar { } .x-aside-container > .x-friend-list > .x-friend-item:hover { - background: var(--el-bg-color-overlay); - border-radius: var(--el-border-radius-base); } .x-dialog .x-friend-item { @@ -1205,17 +402,10 @@ img.friends-list-avatar { } .x-change-image-item:hover { - background: var(--el-menu-hover-bg-color); border-radius: 2px; } -.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; -} + i.x-user-status, i.x-status-icon { @@ -1280,10 +470,6 @@ i.x-status-icon.red { border-color: var(--color-amber-400) !important; } -.x-tag-mutual-friend { - color: var(--el-color-success); - border-color: var(--el-color-success) !important; -} .x-tag-age-verification { color: #3b82f6; @@ -1297,9 +483,7 @@ i.x-status-icon.red { padding-bottom: 0.5px; } -.x-grey { - color: var(--el-text-color-secondary); -} + .x-popover-image { max-width: 100%; @@ -1368,20 +552,7 @@ i.x-status-icon.red { vertical-align: top; } -.avatar-info-own { - display: inline-block; - color: var(--el-color-warning); -} -.avatar-info-public { - display: inline-block; - color: var(--el-color-success); -} - -.avatar-info-unknown { - display: inline-block; - color: var(--el-color-danger); -} .photon-event-table { margin-top: 20px; @@ -1406,12 +577,7 @@ i.x-status-icon.red { top: 0 !important; } -.x-aside-container .el-tabs, -.x-aside-container .el-tabs__nav-wrap, -.x-aside-container .el-tabs__item { - padding: 0 !important; - font-size: 13px; -} + .x-app > .x-container { padding-top: 15px; @@ -1419,49 +585,14 @@ i.x-status-icon.red { .x-text-removed { text-decoration: line-through; - color: var(--el-color-danger); - background-color: color-mix( - in oklch, - var(--el-color-danger) 20%, - transparent - ); + padding: 2px 2px; border-radius: 4px; } .x-text-added { - color: var(--el-color-success); - background-color: color-mix( - in oklch, - var(--el-color-success) 20%, - transparent - ); padding: 2px 2px; border-radius: 4px; } -.el-carousel__mask { - display: none; -} -.el-dropdown-menu__item { - padding: 2px 12px; - font-size: 12px; -} - -.el-dropdown-menu__item--divided { - margin: 0; - padding-top: 8px; - border-top-color: var(--el-border-color-light); -} - -.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/components/AvatarInfo.vue b/src/components/AvatarInfo.vue index bf49f282..d78a9b3b 100644 --- a/src/components/AvatarInfo.vue +++ b/src/components/AvatarInfo.vue @@ -5,7 +5,7 @@ {{ avatarName }} - {{ avatarTags }} + {{ avatarTags }} diff --git a/src/components/InstanceInfo.vue b/src/components/InstanceInfo.vue index a4d80ab5..749da48e 100644 --- a/src/components/InstanceInfo.vue +++ b/src/components/InstanceInfo.vue @@ -49,17 +49,13 @@ >{{ props.instance.userCount }}/{{ props.instance.capacity }} ({{ props.friendcount }}) - {{ t('dialog.user.info.instance_full') }} + {{ + t('dialog.user.info.instance_full') + }} {{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }} - {{ - t('dialog.user.info.instance_age_gated') - }} + {{ t('dialog.user.info.instance_age_gated') }} diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue index 5e23b07b..26b359aa 100644 --- a/src/components/NavMenu.vue +++ b/src/components/NavMenu.vue @@ -42,7 +42,9 @@ + :default-open=" + activeMenuIndex && item.children?.some((e) => e.index === activeMenuIndex) + "> @@ -712,7 +719,6 @@ inline-size: 14px; block-size: 14px; border-radius: 4px; - border: 1px solid var(--el-border-color-lighter); flex: none; } @@ -726,7 +732,6 @@ .nav-menu-theme__custom-label { font-size: 13px; - color: var(--el-text-color-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue index bb8f6732..f14d3913 100644 --- a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue +++ b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue @@ -79,12 +79,10 @@ diff --git a/src/components/dialogs/CustomNavDialog.vue b/src/components/dialogs/CustomNavDialog.vue index 5593b182..24afa52a 100644 --- a/src/components/dialogs/CustomNavDialog.vue +++ b/src/components/dialogs/CustomNavDialog.vue @@ -548,7 +548,6 @@ } .custom-nav-entry { - border: 1px solid var(--el-border-color); border-radius: 8px; padding: 10px 12px; display: flex; @@ -606,7 +605,6 @@ .custom-nav-entry__folder-empty { font-size: 12px; - color: var(--el-text-color-secondary); } .custom-nav-dialog__footer { @@ -645,13 +643,11 @@ } .folder-editor__column { - border: 1px solid var(--el-border-color); border-radius: 8px; padding: 10px; min-height: 220px; display: flex; flex-direction: column; - background: var(--el-fill-color-blank); } .folder-editor__column-title { @@ -665,7 +661,6 @@ align-items: center; justify-content: center; font-size: 12px; - color: var(--el-text-color-secondary); text-align: center; } @@ -692,7 +687,6 @@ align-items: center; gap: 12px; padding: 6px 0; - border-bottom: 1px solid var(--el-border-color-light); } .folder-editor__selected-item:last-child { diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue index 7a0e95fd..9122110a 100644 --- a/src/components/dialogs/UserDialog/UserDialog.vue +++ b/src/components/dialogs/UserDialog/UserDialog.vue @@ -410,13 +410,10 @@
{{ t('dialog.user.info.avatar_cloning') }} - {{ t('dialog.user.info.avatar_cloning_allow') }} - {{ + {{ + t('dialog.user.info.avatar_cloning_allow') + }} + {{ t('dialog.user.info.avatar_cloning_deny') }}
@@ -424,13 +421,10 @@
{{ t('dialog.user.info.booping') }} - {{ t('dialog.user.info.avatar_cloning_allow') }} - {{ + {{ + t('dialog.user.info.avatar_cloning_allow') + }} + {{ t('dialog.user.info.avatar_cloning_deny') }}
@@ -438,13 +432,10 @@
{{ t('dialog.user.info.show_mutual_friends') }} - {{ t('dialog.user.info.avatar_cloning_allow') }} - {{ + {{ + t('dialog.user.info.avatar_cloning_allow') + }} + {{ t('dialog.user.info.avatar_cloning_deny') }}
@@ -454,13 +445,10 @@
{{ t('dialog.user.info.avatar_cloning') }} - {{ t('dialog.user.info.avatar_cloning_allow') }} - {{ + {{ + t('dialog.user.info.avatar_cloning_allow') + }} + {{ t('dialog.user.info.avatar_cloning_deny') }}
@@ -622,7 +610,7 @@ {{ t('dialog.user.groups.hold_shift') }} @@ -871,8 +859,7 @@ {{ t('dialog.user.groups.own_groups') }} - {{ userGroups.ownGroups.length }}/{{ cachedConfig?.constants?.GROUPS?.MAX_OWNED }}{{ t('dialog.user.groups.mutual_groups') }} - {{ userGroups.mutualGroups.length }} + {{ + userGroups.mutualGroups.length + }}
@@ -963,12 +949,7 @@ {{ t('dialog.user.groups.groups') }} - + {{ userGroups.remainingGroups.length }}