Skip to content

Commit

Permalink
Update custom.css
Browse files Browse the repository at this point in the history
  • Loading branch information
k3rokami committed Nov 18, 2023
1 parent e007fea commit 21239f8
Showing 1 changed file with 216 additions and 39 deletions.
255 changes: 216 additions & 39 deletions custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ body,button,input,select,textarea {
width: auto !important;
max-width: 1000px !important
}

.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
background-color: transparent;
width:auto !important
}
.el-table--mini .el-table__expanded-cell[class*=cell]:hover {
background-color: transparent!important
Expand All @@ -42,32 +44,25 @@ body,button,input,select,textarea {
/* .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); */
border-radius: 10px;
color: #fff

.el-input--suffix .el-input__inner{
border: 2px solid rgb(237, 216, 255)
}
.el-button--primary {
background-color: var(--theme);
border-color: var(--theme);
color: #fff

.el-input--suffix .el-input__inner:hover {
border: 2px solid rgb(var(--md-sys-color-primary));
}
.el-tooltip__popper.is-dark {
background-color: var(--lighter-lighter-lighter-bg)

.el-input--suffix .el-input__inner:focus-visible {
border: 2px solid rgb(var(--md-sys-color-primary));
}
.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-color-picker__panel {
border-color: var(--lighter-bg)
}

.el-dialog,.el-dropdown-menu,.el-tooltip__popper.is-dark {
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)
box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
}
.el-dropdown-menu__item,.x-friend-item {
transition: background-color ease-in-out .1s,color ease-in-out .1s
Expand Down Expand Up @@ -113,28 +108,18 @@ body,button,input,select,textarea {
color: #cbb;
transition: color ease-in-out .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);
Expand Down Expand Up @@ -339,13 +324,205 @@ body {
.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);
}

/* ---------- 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 .1s ease-in-out,
border-color .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, .5, .5, 1.5),
background-color .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:active input:not(:disabled)+.el-switch__core::before {
padding: 5px;
margin: 0px;
top: -1px;
left: -1px
}

.el-switch.is-checked:active input:not(:disabled)+.el-switch__core::before {
padding: 1px;
margin: 0px;
top: -1px;
left: 19px
}

/* active click thumb */
.el-switch.is-checked: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), .12) !important;
border-color: rgba(var(--md-sys-color-on-surface), .12) !important;
}

.el-switch.is-checked.is-disabled .el-switch__core {
background-color: rgba(var(--md-sys-color-on-surface), .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), .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), .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 .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), .12);
}
.el-switch.is-disabled .el-switch__label.is-active {
color: rgba(var(--md-sys-color-on-surface), .38);
}

.el-switch__core:after {
display: none;
transition: left 200ms cubic-bezier(0, .5, .5, 1.5);
}

/* ---------- Filled button ---------- */

.el-button {
position: relative;
}
.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 .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 .1s ease-in-out,
color .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), .12);
color: rgba(var(--md-sys-color-on-surface), .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), .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):active::after {
background-color: rgba(var(--md-sys-color-on-primary), .12);
}

0 comments on commit 21239f8

Please sign in to comment.