boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-09-18 12:40:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

New: Style the login page to be more like jellyseerr (#26)

Browse Source 
* New: Style the login page to be more like jellyseerr

* fix: add margin right and left no mobile screen sizes

* fix: initialize variable with an empty string & fallback to gradient

* Fix: loginPageBgUrl syntax

* Style: visualLoginForm
This commit is contained in:
KeyboardDabbler
2025-01-05 07:45:00 +13:00
committed by GitHub
parent 639180fd33
commit 40e7f6431a
1 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
Theme/ElegantFin-theme-nightly.css
View File

@@ -32,6 +32,8 @@
--smallRadius: .5em; --smallRadius: .5em;
--smallerRadius: .375em; --smallerRadius: .375em;
--borderWidth: 0.075em; --borderWidth: 0.075em;
--loginPageBgUrl: url("");
--loginPageText: "Sign in to continue";
} }
html { html {
@@ -1360,3 +1362,92 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
.progressring-spiner { .progressring-spiner {
border-color: var(--btnSubmitBorderColor); border-color: var(--btnSubmitBorderColor);
} }
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.semiTransparent.noHeaderRight {
display: none;
}
#loginPage {
padding-top: 20em !important;
}
@media (max-height: 890px) {
#loginPage {
padding-top: 6.5em !important;
}
}
@media (max-height: 1300px) {
#loginPage:has(.padded-left.padded-right.padded-bottom-page .visualLoginForm:not(.hide)) {
padding-top: 6.5em !important;
}
}
#loginPage .readOnlyContent {
margin: .5em auto 0em !important;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
margin: 2em auto 0;
width: 28em;
background: rgba(30, 40, 54, 0.7);
padding: 2em 2em 1em 2em !important;
border-radius: var(--largerRadius);
backdrop-filter: blur(5px);
box-sizing: border-box;
}
#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
width: 80em;
}
@media (max-width: 640px) {
#loginPage .padded-left.padded-right.padded-bottom-page {
width: 100%;
margin: 2em;
}
}
@media (max-width: 1300px) {
#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
width: 100%;
margin: 2em;
}
}
#loginPage {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 2em 0;
overflow-y: auto;
background:
var(--loginPageBgUrl, linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.manualLoginForm .sectionTitle,
.visualLoginForm>h1 {
display: none;
}
.manualLoginForm::before,
.visualLoginForm::before {
content: var(--loginPageText);
position: relative;
display: block;
top: -3.5em;
margin-bottom: -1em;
font-size: 1.875em;
font-weight: 800;
color: white;
text-align: center;
}
.manualLoginForm,
.visualLoginForm {
position: relative;
}