Fixed login screen.

This commit is contained in:
Magnus Åhall 2023-07-18 07:09:03 +02:00
parent 2cd17871b5
commit cc9c1ca82e
7 changed files with 154 additions and 80 deletions

View file

@ -1,44 +1,61 @@
@import "theme.less";
#login {
display: grid;
justify-items: center;
height: 100%;
background: #eee;
input {
max-width: 300px;
margin-bottom: 32px;
.header {
background: @theme_gradient;
width: 100%;
border: 0px;
border-bottom: 1px solid #444;
font-size: 18pt;
background-color: @background;
&:focus {
outline: none;
}
}
button {
max-width: 300px;
border: 1px solid #666;
background: @background;
color: #444;
padding: 16px 32px;
font-size: 1em;
align-self: center;
&:hover {
background: #ddd;
}
}
.auth-failed {
margin-top: 32px;
color: #a00;
background: #fff;
padding: 16px;
border-radius: 8px;
text-align: center;
color: #fff;
h1 {
margin-bottom: 0px;
}
}
.fields {
display: grid;
justify-items: center;
padding: 32px;
input {
margin-bottom: 32px;
border: 0px;
border: 1px solid #444;
padding: 8px;
width: 100%;
font-size: 1.25em;
background-color: @background;
&:focus {
outline: none;
}
}
button {
border: 1px solid #666;
background: @background;
color: #444;
padding: 12px 24px;
font-size: 1.25em;
align-self: center;
&:hover {
background: #ddd;
}
}
.auth-failed {
margin-top: 32px;
color: #a00;
background: #fff;
padding: 16px;
border-radius: 8px;
}
}
}

View file

@ -156,15 +156,9 @@ header {
grid-area: header;
grid-template-columns: min-content 1fr repeat(3, min-content);
align-items: center;
//background: @accent_1;
padding: 8px 0px;
color: darken(@accent_1, 35%);
background: linear-gradient(to right, #009fff, #ec2f4b);
background: linear-gradient(to right, #f5af19, #f12711);
background: linear-gradient(to right, #fdc830, #f37335);
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
background: linear-gradient(to right, #659999, #f4791f);
background: linear-gradient(to right, #3e5151, #decba4);
background: @theme_gradient;
color: #fff;
&.modified {
@ -606,7 +600,15 @@ header {
#keys { display: block }
}
#app {
#app.login {
padding-top: 64px;
display: grid;
grid-template-columns: minmax(min-content, 300px);
justify-content: center;
}
#app.node {
.layout-tree();
&.toggle-tree {
@ -616,7 +618,7 @@ header {
}
@media only screen and (max-width: 932px) {
#app {
#app.node {
.layout-crumbs();
&.toggle-tree {

View file

@ -3,3 +3,12 @@
@accent_1: #abc837;
@accent_2: #ecbf00;
@accent_3: #c84a37;
/*
@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
@theme_gradient: linear-gradient(to right, #659999, #f4791f);
*/
@theme_gradient: linear-gradient(to right, #3e5151, #decba4);