chore: Add loading and login screen

This commit is contained in:
Rene Hampölz 2023-02-19 15:33:57 +00:00
parent 6564e825ec
commit a4158393ea

View file

@ -92,6 +92,67 @@ html.rl-left-panel-disabled #rl-app #rl-left {
margin-left: unset; margin-left: unset;
} }
/*
* loading and login screen
*/
#rl-app #rl-loading,
#rl-app #rl-loading-error,
#rl-app #V-Login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
top: unset;
position: unset;
min-width: unset;
max-width: unset;
transform: unset;
text-shadow: none;
transition: none;
background-color: var(--color-main-background-blur, var(--color-main-background));
-webkit-backdrop-filter: var(--filter-background-blur, none);
backdrop-filter: var(--filter-background-blur, none);
color: var(--color-main-text);
width: 100%;
height: 100%;
}
#rl-app .LoginView .descWrapper {
color: var(--color-main-text);
}
#rl-app .LoginView .alert {
position: unset;
}
#rl-app .LoginView form {
min-width: 250px;
max-width: 500px;
width: 90%;
background-color: var(--color-main-background);
border: unset;
border-radius: var(--border-radius-large);
box-shadow: 0 0 10px var(--color-box-shadow);
color: var(--color-main-text);
}
#rl-app .LoginView .controls > .fontastic:first-child {
padding: unset;
left: 10px;
}
#rl-app #rl-loading[hidden],
#rl-app #rl-loading-error[hidden],
#rl-app .LoginView .alert[hidden] {
display: none;
}
/* /*
* icons * icons
*/ */
@ -160,6 +221,11 @@ html.rl-left-panel-disabled #rl-app #rl-left {
border-color: var(--color-error); border-color: var(--color-error);
} }
#rl-app .alert .close {
top: -0.6rem;
right: unset;
}
#rl-app .alert br { #rl-app .alert br {
display: none; display: none;
} }
@ -328,13 +394,16 @@ html.rl-left-panel-disabled #rl-app #rl-left {
box-sizing: content-box !important; box-sizing: content-box !important;
} }
#rl-app button.btn.buttonLogin,
#rl-app .btn.btn-success { #rl-app .btn.btn-success {
color: var(--color-primary-element-text); color: var(--color-primary-element-text);
background-color: var(--color-primary-element); background-color: var(--color-primary-element);
border-color: var(--color-primary-element) !important; border-color: var(--color-primary-element) !important;
} }
#rl-app button.btn.buttonLogin:hover,
#rl-app .btn.btn-success:hover, #rl-app .btn.btn-success:hover,
#rl-app button.btn.buttonLogin:focus,
#rl-app .btn.btn-success:focus { #rl-app .btn.btn-success:focus {
background-color: var(--color-primary-element-hover) !important; background-color: var(--color-primary-element-hover) !important;
border-color: var(--color-primary-element-hover) !important; border-color: var(--color-primary-element-hover) !important;