diff --git a/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.scss b/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.scss index f5dd7eb..1748654 100644 --- a/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.scss +++ b/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.scss @@ -41,6 +41,7 @@ mat-radio-button { color: var(--Black, #000); font-size: 1.125rem; line-height: normal; + letter-spacing: normal; } &:hover:not(.mat-mdc-radio-checked) { @@ -116,6 +117,7 @@ mat-chip-row { white-space: break-spaces; text-align: start; max-width: 11vw; + letter-spacing: normal; } } diff --git a/src/app/dialog-add-channel/dialog-add-channel.component.scss b/src/app/dialog-add-channel/dialog-add-channel.component.scss index a7f41b1..07fc6f7 100644 --- a/src/app/dialog-add-channel/dialog-add-channel.component.scss +++ b/src/app/dialog-add-channel/dialog-add-channel.component.scss @@ -127,6 +127,7 @@ Mat-dialog-actions { font-style: normal; font-weight: 700; line-height: normal; + letter-spacing: normal; } &:hover { diff --git a/src/app/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.scss b/src/app/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.scss index 6f3335a..92639fb 100644 --- a/src/app/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.scss +++ b/src/app/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.scss @@ -72,6 +72,7 @@ mat-chip-row { white-space: break-spaces; text-align: start; max-width: 11vw; + letter-spacing: normal; } } diff --git a/src/app/start/login/login.component.scss b/src/app/start/login/login.component.scss index eb6eaef..45ccd41 100644 --- a/src/app/start/login/login.component.scss +++ b/src/app/start/login/login.component.scss @@ -98,6 +98,7 @@ form { padding: 0.3125rem 0.9375rem; border-radius: 1.875rem; transition: 100ms ease-out; + height: unset; ::ng-deep::ng-deep .mdc-button__label { @@ -107,6 +108,7 @@ form { font-weight: 400; line-height: 120%; transition: 100ms ease-out; + letter-spacing: normal; /* 1.35rem */ } @@ -219,6 +221,7 @@ form { font-size: 1.125rem; font-weight: 400; transition: 100ms ease-out; + letter-spacing: normal; } &:hover { @@ -311,7 +314,7 @@ form { transition: 100ms ease-out; letter-spacing: normal; } - + &:hover { border-color: var(--purple-3); @@ -337,4 +340,79 @@ form { to { opacity: 1; } +} + +// Media Queries + +@media (max-width: 431px) { + app-start { + ::ng-deep::ng-deep .content { + width: calc(92.5vw - 1.25rem - 1.25rem); + height: unset; + padding: 2.1875rem 1.25rem; + gap: 1.25rem; + } + } + + .description { + gap: 0.9375rem; + + >h1 { + font-size: 2rem; + } + + >p { + font-size: 1.0625rem; + } + } + + .upper-container { + gap: 1.25rem; + + >div:first-child { + margin-bottom: 0.625rem; + } + + >div { + >input { + padding: 0.8125rem 2rem 0.8125rem 5.375rem; + } + } + } + + .forgot-pw { + ::ng-deep::ng-deep .mdc-button__label { + font-size: 1.0625rem; + letter-spacing: normal; + } + } + + form { + gap: 1.25rem; + } + + .middle-container { + margin-bottom: unset; + + >span { + font-size: 1.0625rem; + } + } + + .google { + height: 3.125rem; + + ::ng-deep::ng-deep .mdc-button__label { + font-size: 1.0625rem; + letter-spacing: normal; + } + } + + .lower-container { + gap: 1.25rem; + + >div { + gap: 1.25rem; + } + } } \ No newline at end of file diff --git a/src/app/start/reset-password/reset-password.component.scss b/src/app/start/reset-password/reset-password.component.scss index 575806a..80958de 100644 --- a/src/app/start/reset-password/reset-password.component.scss +++ b/src/app/start/reset-password/reset-password.component.scss @@ -139,5 +139,6 @@ form { ::ng-deep::ng-deep .mdc-button__label { font-weight: 400; + letter-spacing: normal; } } \ No newline at end of file diff --git a/src/app/start/signup/signup.component.scss b/src/app/start/signup/signup.component.scss index fdf23a1..7e32958 100644 --- a/src/app/start/signup/signup.component.scss +++ b/src/app/start/signup/signup.component.scss @@ -153,6 +153,7 @@ mat-checkbox { font-style: normal; font-weight: 400; line-height: 120%; + letter-spacing: normal; /* 1.2rem */ } diff --git a/src/app/start/start.component.scss b/src/app/start/start.component.scss index f1660ac..e55e30b 100644 --- a/src/app/start/start.component.scss +++ b/src/app/start/start.component.scss @@ -46,7 +46,8 @@ .animation-logo { z-index: 99; position: absolute; - top: 40%; + top: auto; + bottom: auto; animation: 500ms slideUpLeft 2500ms ease-out forwards; display: flex; opacity: 1; @@ -121,6 +122,41 @@ } } +@keyframes slideInRightMobile { + from { + transform: translateX(calc((16.36313rem - 4.41588rem) / 2)); + } + + to { + transform: translateX(0); + } +} + +@keyframes slideUpMobile { + 0% { + /* Start in der Mitte des Bildschirms */ + transform: translate(-50%, -50%) scale(1); + opacity: 1; + position: fixed; + left: 50%; + top: 50%; + z-index: 2; + } + + 75% { + z-index: 2; + } + + 100% { + transform: translate(calc(16.36313rem / 4), calc((-50% + (4.34556rem / 2)) + 3vh)) scale(0.5); + opacity: 0; + position: fixed; + left: 0; + top: 0; + z-index: 0; + } +} + main { display: flex; flex-direction: column; @@ -158,11 +194,12 @@ main { transition: 100ms ease-out; ::ng-deep::ng-deep .mdc-button__label { - color: var(--Purple-2, #797EF3); + color: var(--purple-2); font-family: Figtree; font-size: 1.125rem; font-weight: 400; line-height: 120%; + letter-spacing: normal; transition: 100ms ease-out; /* 1.35rem */ } @@ -179,17 +216,17 @@ main { border-color: var(--light-purple-line) !important; ::ng-deep::ng-deep .mdc-button__label { - color: var(--purple-1); - font-weight: 500; + color: var(--purple-1); + font-weight: 500; } ::ng-deep::ng-deep .mat-mdc-button-persistent-ripple { - &::before { - opacity: 0; - } + &::before { + opacity: 0; + } } -} + } } .footer { @@ -208,22 +245,90 @@ main { .content { position: relative; - width: calc(37.875rem - 3.3125rem - 3.3125rem); - height: calc(41.8125rem - 2.5rem - 2.5rem); - padding: 2.5rem 3.3125rem; - flex-shrink: 0; - border-radius: 1.875rem; - background: var(--white); - position: relative; - width: calc(37.875rem - 3.3125rem - 3.3125rem); - height: calc(41.8125rem - 2.5rem - 2.5rem); - padding: 2.5rem 3.3125rem; flex-shrink: 0; border-radius: 1.875rem; background: var(--white); - - /* header */ - box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08); /* header */ box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08); +} + +// Media Queries + +@media (max-width: 431px) { + .animation-logo { + gap: 0.8rem; + animation: 500ms slideUpMobile 2500ms ease-out forwards; + + + >img:first-child { + width: 4.41588rem; + height: 4.34556rem; + animation: 300ms slideInRightMobile 500ms ease-out forwards; + transform: translateX(calc((16.36313rem - 4.41588rem) / 2)); + } + + >div { + >img { + width: 11.14725rem; + height: 1.70044rem; + } + } + } + + .content { + width: unset; + } + + .header { + z-index: unset; + inset: 5vh auto; + flex-direction: column; + align-items: center; + + >div:not(.logo) { + align-items: center; + gap: 1.25rem; + } + } + + .logo { + gap: 0.8rem; + + >img:first-child { + width: 3.5rem; + height: 3.5rem; + } + + >img:last-child { + width: 8.45575rem; + height: 1.3rem; + } + } + + .footer { + display: none; + } + + .secondary-button { + border: 1px solid var(--purple-2) !important; + + ::ng-deep::ng-deep .mdc-button__label { + font-weight: 700; + color: var(--purple-1); + font-family: Nunito; + line-height: normal; + letter-spacing: normal; + } + + &:hover, + &:active { + border-color: var(--purple-1) !important; + background-color: var(--purple-1); + + ::ng-deep::ng-deep .mdc-button__label { + font-weight: 700; + color: var(--white); + } + } + } } \ No newline at end of file