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

add mobile

Browse Source
This commit is contained in:
MLH
2024-12-01 02:01:21 +01:00
parent 648de70686
commit 238da5af88
1 changed files with 66 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
custom-login-css.css
View File

@ -86,21 +86,77 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
padding-top: 20px;
}
@media screen and (min-width: 1165px) {
@media screen and (max-width: 1165px) {
#login-logo {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width: 1050px) {
/* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page {
width: 38vw;
height: 85vh;
max-width: 70%;
padding: 2em 2em 1em 2em !important;
border-radius: 20px;
}
/* Schriftgröße der Überschrift */
#loginPage h1::after {
font-size: 28px;
}
/* Square Card */
#loginPage .squareCard {
width: 26%;
}
/* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
#loginPage .readOnlyContent {
width: 100%;
padding: 1em;
}
}
@media screen and (max-width: 860px) {
/* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page {
width: 50vw;
height: 95vh;
max-width: 80%;
padding: 2em 2em 1em 2em !important;
border-radius: 18px;
}
/* Schriftgröße der Überschrift */
#loginPage h1::after {
font-size: 26px;
}
/* Square Card */
#loginPage .squareCard {
width: 28%;
}
/* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
#loginPage .readOnlyContent {
width: 100%;
padding: 1em;
}
}
/* Mobile Optimierungen */
@media screen and (max-width: 768px) {
/* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page {
width: 80vw; /* Setze die Breite auf 80% des Viewports */
height: auto; /* Höhe automatisch basierend auf Inhalt */
max-width: 90%; /* Maximalbreite für kleine Bildschirme */
padding: 2em 2em 1em 2em !important; /* Weniger Padding auf kleineren Geräten */
transform: translate(-50%, -20%); /* Veränderte Position für mobiles Design */
border-radius: 16px; /* Kleine Rundung für kleinere Bildschirme */
width: 80vw;
height: 95vh;
max-width: 90%;
padding: 2em 2em 1em 2em !important;
border-radius: 16px;
}
/* Schriftgröße der Überschrift */
@ -110,12 +166,12 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
/* Square Card */
#loginPage .squareCard {
width: 30%; /* Breite der Card anpassen für mobile Geräte */
width: 30%;
}
/* Verkleinern der Schriftgröße und Anpassung für andere Elemente */
#loginPage .readOnlyContent {
width: 100%; /* Volle Breite für kleinere Geräte */
width: 100%;
padding: 1em;
}
}