byte/imprink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change auth0 template to satisfy safe mobile render areas

Browse Source
This commit is contained in:
lumijiez
2025-06-06 18:53:17 +03:00
parent 61ec568db1
commit e90cc93e9f
1 changed files with 843 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
webui/auth0-templates/login.html
View File

@@ -3,9 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="icon" href="https://i.ibb.co/gbthcbnP/logo-sm.png" type="image/png" /> <link rel="icon" href="https://i.ibb.co/gbthcbnP/logo-sm.png" type="image/png" />
<title>Sign In | Imprink</title> <title>Sign In | Imprink</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -16,7 +16,8 @@
} }
body, html { body, html {
height: 100%; height: 100dvh;
min-height: 100dvh;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f9f9f9; background-color: #f9f9f9;
@@ -53,7 +54,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100dvh;
min-height: 100dvh;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -64,6 +66,10 @@
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
gap: clamp(20px, 5vw, 150px); gap: clamp(20px, 5vw, 150px);
padding-top: max(0px, env(safe-area-inset-top));
padding-bottom: max(0px, env(safe-area-inset-bottom));
padding-left: max(5%, env(safe-area-inset-left));
padding-right: max(5%, env(safe-area-inset-right));
} }
.logo-section { .logo-section {
@@ -103,7 +109,7 @@
max-width: 400px; max-width: 400px;
min-width: 360px; min-width: 360px;
animation: fadeIn 0.5s ease-out; animation: fadeIn 0.5s ease-out;
max-height: 90vh; max-height: 90dvh;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
} }
@@ -400,7 +406,8 @@
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100dvh;
min-height: 100dvh;
} }
.login-container { .login-container {
@@ -410,6 +417,12 @@
align-items: center; align-items: center;
position: fixed; position: fixed;
inset: 0; inset: 0;
height: 100dvh;
min-height: 100dvh;
padding-top: max(8px, env(safe-area-inset-top));
padding-bottom: max(8px, env(safe-area-inset-bottom));
padding-left: max(8px, env(safe-area-inset-left));
padding-right: max(8px, env(safe-area-inset-right));
} }
.logo-section { .logo-section {
@@ -432,7 +445,7 @@
animation: none; animation: none;
margin: 0; margin: 0;
padding: 24px; padding: 24px;
max-height: calc(100vh - 32px); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
overflow-y: auto; overflow-y: auto;
} }
@@ -481,9 +494,17 @@
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.login-container {
padding-top: max(6px, env(safe-area-inset-top));
padding-bottom: max(6px, env(safe-area-inset-bottom));
padding-left: max(4px, env(safe-area-inset-left));
padding-right: max(4px, env(safe-area-inset-right));
}
.login-box { .login-box {
width: calc(100% - 16px); width: calc(100% - 16px);
padding: 20px; padding: 20px;
max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
} }
.form-control { .form-control {
@@ -522,6 +543,44 @@
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
margin: 24px 0; margin: 24px 0;
} }
@supports not (height: 100dvh) {
html, body {
height: 100vh;
min-height: 100vh;
}
.login-container {
height: 100vh;
min-height: 100vh;
}
.login-box {
max-height: 90vh;
}
@media (max-width: 992px) {
html, body {
height: 100vh;
min-height: 100vh;
}
.login-container {
height: 100vh;
min-height: 100vh;
}
.login-box {
max-height: calc(100vh - 64px);
}
}
@media (max-width: 480px) {
.login-box {
max-height: calc(100vh - 48px);
}
}
}
</style> </style>
<body> <body>
<div class="login-container"> <div class="login-container">