me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] styling for login popup

Browse Source
This commit is contained in:
Matthew Grove
2022-02-22 10:57:27 +00:00
parent 500a79fcbc
commit 8dc5db3fa5
1 changed files with 11 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/css/Login.css
View File

@@ -1,8 +1,9 @@
.login-overlay-content { .login-overlay-content {
width: 40%; max-width: min(450px,80%);
max-width: 500px; }
height: 60%;
max-height: 500px; #firebaseui_container {
width: 100%;
} }
.firebaseui-container form button.mdl-button, .firebaseui-container form .firebaseui-idp-button, .firebaseui-button.mdl-button { .firebaseui-container form button.mdl-button, .firebaseui-container form .firebaseui-idp-button, .firebaseui-button.mdl-button {
@@ -81,62 +82,27 @@
text-align: center !important; text-align: center !important;
} }
@media screen and (max-width: 1080px) { .firebaseui-card-header {
.login-overlay-content { border-bottom: none !important;
width: 50%; margin-bottom: 0 !important;
}
}
@media screen and (max-width: 860px) {
.login-overlay-content {
width: 80%;
}
}
@media screen and (max-width: 680px) {
.login-overlay-content {
width: 70%;
}
} }
@media screen and (max-width: 420px) { @media screen and (max-width: 420px) {
.firebaseui-card-content, .firebaseui-card-actions { .firebaseui-card-header, .firebaseui-card-content, .firebaseui-card-actions {
padding-left: 8px !important; padding-left: 8px !important;
padding-right: 8px !important; padding-right: 8px !important;
} }
} }
@media screen and (max-width: 300px) { @media screen and (max-width: 300px) {
.firebaseui-card-content, .firebaseui-card-actions { .firebaseui-card-header, .firebaseui-card-content, .firebaseui-card-actions {
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
} }
} }
@media screen and (max-height: 800px) {
.login-overlay-content {
height: 70%;
}
}
@media screen and (max-height: 700px) {
.login-overlay-content {
height: 80%;
}
}
@media screen and (max-height: 570px) { @media screen and (max-height: 570px) {
.login-overlay-content { .login-overlay-content {
display: block; display: block;
width: 70%; width: 70%;
} }
} }
@media screen and (max-height: 420px) {
.login-overlay-content {
height: 70%;
}
}
@media screen and (max-height: 300px) {
.login-overlay-content {
height: 60%;
}
}
@media screen and (max-height: 200px) {
.login-overlay-content {
height: 50%;
}
}