diff --git a/client/src/app/site/login/components/login-mask/login-mask.component.html b/client/src/app/site/login/components/login-mask/login-mask.component.html index b51af06e4..d8df26e3f 100644 --- a/client/src/app/site/login/components/login-mask/login-mask.component.html +++ b/client/src/app/site/login/components/login-mask/login-mask.component.html @@ -27,14 +27,14 @@ [type]="!hide ? 'password' : 'text'" [errorStateMatcher]="parentErrorStateMatcher" /> - {{ hide ? 'visibility_off' : 'visibility_on' }} + {{ hide ? 'visibility_off' : 'visibility_on' }} {{ loginErrorMsg | translate }}
- diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html index 6c493032f..dd67b0661 100644 --- a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html +++ b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html @@ -1,24 +1,25 @@ - -
- - OpenSlides-logo - -
+
+
+ -
- -
+
+ +
-
diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss index 152660595..69bbb7363 100644 --- a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss +++ b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss @@ -1,25 +1,46 @@ -header { - width: 100%; - flex: 1; - mat-toolbar { - min-height: 200px !important; - } - .login-logo-bar a { - margin-left: auto; - margin-right: auto; +html, +body { + height: 100%; +} - img { - width: 90%; - height: 90%; - max-width: 400px; +.main-login-wrapper { + position: fixed; + width: 100%; + height: 100%; + + .content-wrapper { + display: flex; + flex-direction: column; + height: 100%; + overflow: auto; + + .login-logo-bar { + min-height: 80px !important; + max-height: 200px !important; + height: 20vh !important; + + a { + margin-left: auto; + margin-right: auto; + + img { + width: 100%; + max-width: 400px; + display: block; + } + } + } + + .main-router { + flex: 1 0 auto; + } + + .footer { + flex-shrink: 0; + margin-left: auto; + margin-right: auto; + font-size: 12px; + text-align: center; } } } - -.footer { - margin-left: auto; - margin-right: auto; - margin-top: 80px; - font-size: 12px; - text-align: center; -} diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss new file mode 100644 index 000000000..d9098c0db --- /dev/null +++ b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss @@ -0,0 +1,9 @@ +@import '~@angular/material/theming'; + +@mixin os-login-wrapper-theme($theme) { + $background: map-get($theme, background); + + .main-login-wrapper { + background-color: mat-color($background, background); + } +} diff --git a/client/src/styles.scss b/client/src/styles.scss index c1229a129..2920d54d9 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -35,6 +35,7 @@ @import './app/shared/components/jitsi/jitsi.component.scss-theme.scss'; @import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss'; @import './app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss'; +@import './app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss'; /** fonts */ @import './assets/styles/fonts.scss'; @@ -73,6 +74,8 @@ $narrow-spacing: ( @include os-jitsi-theme($theme); @include os-list-view-table-theme($theme); @include os-user-statistics-style($theme); + @include os-user-statistics-style($theme); + @include os-login-wrapper-theme($theme); } /** Load projector specific SCSS values */ @@ -104,6 +107,7 @@ $narrow-spacing: ( .openslides-dark-theme, .openslides-developer-dark-theme { + color: white; .logo-container { img.dark { display: inherit;