CodeDevMLH/Jellyfin-Login-Page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile

Browse Source
This commit is contained in:
MLH
2024-12-07 03:38:24 +01:00
parent 7b4700758a
commit ac320a4ad2
1 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
custom-login-css.css
View File

@@ -14,10 +14,9 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
} }
/* Hide Forgot Password */ /* Hide Forgot Password */
/*
#loginPage .raised.cancel.block.btnForgotPassword.emby-button { #loginPage .raised.cancel.block.btnForgotPassword.emby-button {
display: none; display: none;
} */ }
#loginPage .readOnlyContent { #loginPage .readOnlyContent {
padding: 0 !important; padding: 0 !important;
@@ -86,20 +85,24 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
padding-top: 20px; padding-top: 20px;
} }
@media screen and (max-width: 1165px) { /*Logo verkleinern*/
@media (max-width: 1165px) {
#login-logo { #login-logo {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
} }
@media screen and (max-width: 1050px) { @media (max-width: 1050px) {
/* Login-Container */ /* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page { #loginPage .padded-left.padded-right.padded-bottom-page {
width: 38vw; width: 38vw;
height: 85vh;
max-width: 70%; max-width: 70%;
padding: 2em 2em 1em 2em !important; height: 80dvh;
height: 75lvh;
height: 80vh;
max-height: 80%;
padding: 2em 2em 0em 2em !important;
border-radius: 20px; border-radius: 20px;
} }
@@ -110,25 +113,44 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
/* Square Card */ /* Square Card */
#loginPage .squareCard { #loginPage .squareCard {
width: 26%; width: 24%;
} }
/* Verkleinern der Schriftgröße und Anpassung für andere Elemente */ /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
#loginPage .readOnlyContent { #loginPage .readOnlyContent {
width: 100%; width: 100%;
padding: 1em;
} }
} }
/* Mobile Optimierungen für Tablet */
@media screen and (max-width: 860px) { @media (max-width: 886px) {
/* Login-Container */ @media (orientation: landscape) {
#loginPage .padded-left.padded-right.padded-bottom-page { /* Login-Container */
width: 50vw; #loginPage .padded-left.padded-right.padded-bottom-page {
height: 90vh; width: 32vw;
max-width: 80%; max-width: 55%;
padding: 2em 2em 1em 2em !important; height: 90dvh;
border-radius: 18px; height: 85lvh;
height: 90vh;
max-height: 90%;
padding: 2em 2em 0em 2em !important;
border-radius: 18px;
}
}
@media (orientation: portrait) {
/* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page {
width: 50vw;
max-width: 75%;
height: 50dvh;
height: 45lvh;
height: 50vh;
max-height: 65%;
padding: 2em 2em 0em 2em !important;
border-radius: 18px;
}
} }
/* Schriftgröße der Überschrift */ /* Schriftgröße der Überschrift */
@@ -138,24 +160,26 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
/* Square Card */ /* Square Card */
#loginPage .squareCard { #loginPage .squareCard {
width: 28%; width: 24%;
} }
/* Verkleinern der Schriftgröße und Anpassung für andere Elemente */ /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
#loginPage .readOnlyContent { #loginPage .readOnlyContent {
width: 100%; width: 100%;
padding: 1em;
} }
} }
/* Mobile Optimierungen */ /* Mobile Optimierungen für Smartphone*/
@media screen and (max-width: 768px) { @media (max-width: 768px) {
/* Login-Container */ /* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page { #loginPage .padded-left.padded-right.padded-bottom-page {
width: 80vw; width: 80vw;
height: 90vh;
max-width: 90%; max-width: 90%;
padding: 2em 2em 1em 2em !important; height: 90dvh;
height: 85lvh;
height: 90vh;
max-height: 90%;
padding: 2em 2em 0em 2em !important;
border-radius: 16px; border-radius: 16px;
} }
@@ -166,12 +190,11 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
/* Square Card */ /* Square Card */
#loginPage .squareCard { #loginPage .squareCard {
width: 30%; width: 24%; /* 30% */
} }
/* Verkleinern der Schriftgröße und Anpassung für andere Elemente */ /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
#loginPage .readOnlyContent { #loginPage .readOnlyContent {
width: 100%; width: 100%;
padding: 1em;
} }
} }