VRCX/html/src/theme.pink.scss

/*
 * VRCX Pink theme by Kamiya
 * https://github.com/kamiya10/VRCX-theme
 */
@import 'theme.dark.scss';
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
:root {
    --theme: #dfa2a2;
    --bg: #322525;
    --light-bg: #443030;
    --lighter-bg: #554040;
    --lighter-lighter-bg: #655050;
    --lighter-lighter-lighter-bg: #756060;
    --lighter-lighter-lighter-lighter-bg: #857070;
    --lighter-border: #aa6065;
    --font: 'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
        'Noto Sans SC', sans-serif;
}
body,
button,
input,
select,
textarea {
    font-family: var(--font);
}
.el-collapse-item__wrap,
.el-table td.el-table__cell,
.el-table th.el-table__cell,
.el-table tr,
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: transparent;
}
.el-table--mini .el-table__expanded-cell[class*='cell']:hover {
    background-color: transparent !important;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover,
.el-pagination .btn-next,
.el-pagination .btn-prev,
.el-switch__core,
.el-tree,
.x-aside-container,
.x-container,
.x-login-container {
    background-color: var(--bg);
}
.el-pager li,
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
    color: #cbb;
    transition: color ease-in-out 0.1s;
}
.el-pager li:hover {
    color: #fff;
}
.el-tree-node:focus > .el-tree-node__content,
.el-tree-node__content:hover {
    background-color: var(--light-bg);
}
.el-button:not(.el-button--text, .el-button--primary, .is-disabled),
.el-color-picker__panel,
.el-dialog,
.el-input .el-input__count .el-input__count-inner,
.el-input__inner,
.el-message-box,
.el-pager li,
.el-radio-button__inner,
.el-select-dropdown,
.el-textarea .el-input__count,
.el-textarea__inner,
.x-menu-container {
    background-color: var(--lighter-bg);
}
.el-color-picker__panel {
    border-color: var(--lighter-bg);
}
.el-button,
.el-radio-button__inner {
    color: #dcc;
}
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
.el-dropdown-menu,
.x-change-image-item:hover,
.x-friend-item:hover {
    background-color: var(--lighter-lighter-bg);
    color: #fff;
}
.el-button--primary {
    background-color: var(--theme);
    border-color: var(--theme);
    color: #fff;
}
.el-tooltip__popper.is-dark {
    background-color: var(--lighter-lighter-lighter-bg);
}
.el-button--primary:focus,
.el-button--primary:hover {
    background-color: var(--lighter-lighter-lighter-lighter-bg);
    border-color: var(--lighter-lighter-lighter-lighter-bg);
}
.el-dialog,
.el-dropdown-menu,
.el-tooltip__popper.is-dark {
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(0, 0, 0, 0.23);
}
.el-dropdown-menu__item,
.x-friend-item {
    transition:
        background-color ease-in-out 0.1s,
        color ease-in-out 0.1s;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    color: #fff;
    background-color: var(--lighter-lighter-lighter-bg);
}
.el-popper[x-placement^='bottom'] .popper__arrow,
.el-popper[x-placement^='bottom'] .popper__arrow::after,
.el-table th.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border-bottom-color: var(--lighter-lighter-bg);
}
.el-table td.el-table__cell,
.el-table tr {
    border-color: transparent;
}
.el-popper .popper__arrow,
.el-popper .popper__arrow::after,
.el-popper[x-placement^='top'] .popper__arrow,
.el-popper[x-placement^='top'] .popper__arrow::after {
    border-top-color: var(--lighter-lighter-bg);
}
.el-dropdown-menu__item--divided::before,
.el-menu-item:focus,
.el-menu-item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: var(--lighter-lighter-bg);
}
.el-input .el-input__count .el-input__count-inner,
.el-input__inner,
.el-textarea .el-input__count,
.el-textarea__inner {
    border: var(--lighter-border);
}
.el-input-number {
    background-color: var(--lighter-bg);
    border: 1px solid #404040;
    border-radius: 5px;
}
.el-input-number__decrease {
    border-right: 1px solid #404040;
}
.el-input-number__increase {
    border-left: 1px solid #404040;
}
.el-dropdown-menu__item--divided {
    border-top: 2px solid var(--lighter-lighter-lighter-lighter-bg);
}
.el-radio-button__inner {
    border: 1px solid var(--lighter-lighter-bg);
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-menu-item.is-active,
.el-pagination .btn-next:not(:disabled):hover .el-icon,
.el-pagination .btn-prev:not(:disabled):hover .el-icon,
.el-radio__input.is-checked + .el-radio__label,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
.el-tabs__item.is-active {
    color: var(--theme);
    transition: color ease-in-out 0.1s;
}
.el-pager .number:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.el-pager .number:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.el-menu-item i,
.el-tabs__item,
i.el-icon-close:hover {
    color: #cbb;
    transition: color ease-in-out 0.1s;
}
.el-button--text:focus,
.el-button--text:hover,
.el-tabs__item:hover {
    color: #fff;
}
.el-slider__bar,
.el-tabs__active-bar {
    background-color: var(--theme);
}
.el-slider__button {
    border: 2px solid var(--theme);
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio-button__orig-radio:checked + .el-radio-button__inner,
.el-radio__input.is-checked .el-radio__inner,
.el-switch.is-checked .el-switch__core {
    background-color: var(--theme);
    border-color: var(--theme);
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: -1px 0 0 0 var(--theme);
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner:hover {
    color: #fff;
}
.el-pager li.active,
.el-radio-button__inner:not(.is-disabled):hover,
.el-select-dropdown__item.selected,
.el-switch__label.is-active {
    color: var(--theme);
}
.el-tag.el-tag--info {
    color: #baa;
    background-color: var(--lighter-lighter-bg);
    border: 1px solid var(--lighter-lighter-lighter-lighter-bg);
}
.el-collapse-item__header > span + span,
.el-form-item__label,
.el-pagination__total,
.el-table th.el-table__cell > .cell,
.el-table__expand-icon > .el-icon,
.x-login-container div[style='text-align: center; font-size: 12px;'] > * {
    color: #baa !important;
}
.el-table .ascending .sort-caret.ascending {
    border-bottom-color: var(--theme);
}
.el-table .descending .sort-caret.descending {
    border-top-color: var(--theme);
}
.el-pagination button:disabled,
.el-pagination button:disabled:focus,
.el-pagination button:disabled:hover {
    background-color: transparent;
    color: transparent !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before,
.el-tabs__nav-wrap::after {
    background-color: transparent;
}
.options-container-item .name {
    color: #eeeaea;
}
.el-tabs--card > .el-tabs__header,
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-color: transparent;
}
.options-container .header,
h2 {
    color: #faeeee;
}
.options-container .sub-header {
    color: #988;
}
.el-table__row td:first-child {
    padding-left: 5px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.el-table__row td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.el-select-dropdown {
    border-color: var(--lighter-bg);
}
.el-popover {
    background-color: var(--lighter-bg);
    border-color: var(--lighter-border);
}
.x-menu-container::-webkit-scrollbar {
    display: none;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
    background: transparent;
}
.el-radio-button__orig-radio:disabled + .el-radio-button__inner {
    color: var(--lighter-lighter-lighter-bg);
    background-color: var(--light-bg);
    border-color: var(--lighter-bg);
}
.el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
    color: var(--lighter-lighter-lighter-bg);
    background-color: var(--lighter-bg);
    border-color: var(--lighter-bg);
}
.el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
    box-shadow: none;
}
body,
button,
input,
select,
textarea {
    font-variant-numeric: tabular-nums;
}
.extra,
.dialog-title,
.x-link,
.el-tree,
input[type='text'],
input[type='password'] {
    user-select: text;
}
.avatar-info-public::selection {
    color: hsl(100, 54%, 64%);
}
.avatar-info-own::selection {
    color: hsl(36, 77%, 72%);
}
::selection {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    transition: background-color 0.1s ease-in-out;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background-color: var(--lighter-lighter-lighter-bg);
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
    background-color: var(--lighter-lighter-bg);
}
.el-select .el-tag__close.el-icon-close {
    background-color: var(--lighter-lighter-bg);
}
input[type='checkbox'] + .el-switch__core {
    width: 36px !important;
}
input[type='checkbox']:checked + .el-switch__core {
    border-color: var(--theme) !important;
    background-color: var(--theme) !important;
}
.el-loading-spinner .path {
    stroke: var(--theme);
}