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

logo always dynamicialy

Browse Source
This commit is contained in:
MLH
2024-12-07 03:44:04 +01:00
parent ac320a4ad2
commit 073b703427
1 changed files with 61 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
custom-login-css.css
View File

@@ -18,32 +18,32 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
display: none; display: none;
} }
#loginPage .readOnlyContent { #loginPage .readOnlyContent {
padding: 0 !important; padding: 0 !important;
width: 90% !important; width: 90% !important;
} }
#loginPage .padded-left.padded-right.padded-bottom-page { #loginPage .padded-left.padded-right.padded-bottom-page {
background: #000000bf; background: #000000bf;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: 0; margin: 0;
position: absolute; position: absolute;
border-radius: 24px; border-radius: 24px;
width: 30vw; width: 30vw;
height: 74vh; height: 74vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
align-content: center; align-content: center;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 3em 3em 1em 3em !important; padding: 3em 3em 1em 3em !important;
max-width: 28em; max-width: 28em;
max-height: 55em; max-height: 55em;
overflow-y: auto; overflow-y: auto;
} }
#loginPage .squareCard { #loginPage .squareCard {
@@ -51,15 +51,15 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
} }
.cardText { .cardText {
overflow: hidden; overflow: hidden;
padding: .06em .0em; padding: .06em .0em;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.manualLoginForm { .manualLoginForm {
height: 100%; height: 100%;
width: 90%; width: 90%;
} }
/* Hintergrund */ /* Hintergrund */
@@ -86,14 +86,13 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
} }
/*Logo verkleinern*/ /*Logo verkleinern*/
@media (max-width: 1165px) { #login-logo {
#login-logo { max-width: 100%;
max-width: 100%; height: auto;
height: auto;
}
} }
@media (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;
@@ -125,31 +124,33 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
/* Mobile Optimierungen für Tablet */ /* Mobile Optimierungen für Tablet */
@media (max-width: 886px) { @media (max-width: 886px) {
@media (orientation: landscape) { @media (orientation: landscape) {
/* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page { /* Login-Container */
width: 32vw; #loginPage .padded-left.padded-right.padded-bottom-page {
max-width: 55%; width: 32vw;
height: 90dvh; max-width: 55%;
height: 85lvh; height: 90dvh;
height: 90vh; height: 85lvh;
max-height: 90%; height: 90vh;
padding: 2em 2em 0em 2em !important; max-height: 90%;
border-radius: 18px; padding: 2em 2em 0em 2em !important;
} border-radius: 18px;
}
} }
@media (orientation: portrait) { @media (orientation: portrait) {
/* Login-Container */
#loginPage .padded-left.padded-right.padded-bottom-page { /* Login-Container */
width: 50vw; #loginPage .padded-left.padded-right.padded-bottom-page {
max-width: 75%; width: 50vw;
height: 50dvh; max-width: 75%;
height: 45lvh; height: 50dvh;
height: 50vh; height: 45lvh;
max-height: 65%; height: 50vh;
padding: 2em 2em 0em 2em !important; max-height: 65%;
border-radius: 18px; padding: 2em 2em 0em 2em !important;
} border-radius: 18px;
}
} }
@@ -171,6 +172,7 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
/* Mobile Optimierungen für Smartphone*/ /* Mobile Optimierungen für Smartphone*/
@media (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;
@@ -190,7 +192,8 @@ body:not(:has(#loginPage:not(.hide))) .skinHeader {
/* Square Card */ /* Square Card */
#loginPage .squareCard { #loginPage .squareCard {
width: 24%; /* 30% */ width: 24%;
/* 30% */
} }
/* Verkleinern der Schriftgröße und Anpassung für andere Elemente */ /* Verkleinern der Schriftgröße und Anpassung für andere Elemente */