95 lines
1.7 KiB
CSS
95 lines
1.7 KiB
CSS
.account-setting-content {
|
|
overflow: hidden;
|
|
border-radius: var(--big-radius);
|
|
position: fixed;
|
|
animation-name: fade-in;
|
|
animation-duration: 0.4s;
|
|
border: 2px solid var(--light-grey);
|
|
background: var(--black);
|
|
right: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.invisible {
|
|
display: none;
|
|
}
|
|
|
|
.login-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px 6px;
|
|
gap: 20px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.login-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: fit-content;
|
|
}
|
|
|
|
::deep .input-text {
|
|
background: var(--light-grey);
|
|
border: 2px solid rgb(255, 255, 255, 0.3);
|
|
border-radius: var(--small-radius);
|
|
padding: 6px;
|
|
color: var(--white);
|
|
}
|
|
|
|
::deep .input-text:focus-visible {
|
|
border: 2px solid var(--violet) !important;
|
|
}
|
|
|
|
.login-button {
|
|
background: var(--violet);
|
|
border: none;
|
|
border-radius: 100px;
|
|
height: 32px;
|
|
color: var(--white);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.login-button:hover {
|
|
background: var(--violet-selected);
|
|
cursor:pointer;
|
|
}
|
|
|
|
.login-button:disabled {
|
|
background: var(--violet-selected);
|
|
cursor: wait;
|
|
}
|
|
|
|
.loading {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
border: 3px solid var(--line-black);
|
|
border-top-color: var(--white);
|
|
animation: loading 1s linear infinite;
|
|
justify-self: center;
|
|
}
|
|
|
|
.settings-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.line {
|
|
margin: 0 6px;
|
|
border-bottom: 2px solid var(--light-grey);
|
|
}
|
|
|
|
.settings-element {
|
|
max-width: 140px;
|
|
height: 40px;
|
|
padding: 0 26px;
|
|
align-content: center;
|
|
}
|
|
|
|
.settings-element:hover {
|
|
background: var(--light-grey)
|
|
}
|
|
|
|
|