diff --git a/scripts/pi-hole/php/loginpage.php b/scripts/pi-hole/php/loginpage.php index 94368c23..6a2339c0 100644 --- a/scripts/pi-hole/php/loginpage.php +++ b/scripts/pi-hole/php/loginpage.php @@ -10,7 +10,7 @@
- Pi-hole logo +

@@ -26,31 +26,24 @@
-
- - -
-
-
- + -
-
- -
-
- - -
-
+
+
-
+ +
diff --git a/style/pi-hole.css b/style/pi-hole.css index a9e33184..1196bbe5 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -495,11 +495,64 @@ td.details-control { } } -/* Fix the icon position (login password field) */ +/*** Login form ***/ .form-control-feedback { right: 12px; } +.loginpage-logo { + width: 30%; +} +.layout-boxed .loginpage-logo { + width: 50%; +} + +.login-options { + display: flex; + margin: 0 0 15px -15px; + flex-wrap: wrap; +} + +.login-options div { + position: relative; + margin-left: 15px; +} + +.login-options div:last-child { + margin-right: 2px; + margin-bottom: 0 !important; + flex: 0 1 auto; + font-size: 95%; +} + +.pwd-field { + flex: 1 0 auto; +} + +.login-help { + padding: 6px; + background: rgba(127, 127, 127,0.05); + text-align: center; +} + +.login-help p { + margin: 0; + font-size: 15px; + line-height: 1.6; +} + +@media screen and (min-width: 768px) { + .layout-boxed:not(.sidebar-collapse) .login-help p { + font-size: clamp(12px, (min(100vw, 1250px) - 230px) / 60, 15px); + } +} + +/*** Accessibility - Add focus for checkboxes and radio buttons (icheck) ***/ +[class*=icheck-]>input:first-child:focus+label::before { + outline: 1px #3c8dbc solid; + border-color: #3c8dbc; +} + /* Fix some datatables layout on small screens */ @media screen and (max-width: 660px), screen and (min-width: 767px) and (max-width: 960px) { #domainsTable_wrapper .table-responsive { diff --git a/style/themes/lcars.css b/style/themes/lcars.css index 2e3b99f2..d1ba3937 100644 --- a/style/themes/lcars.css +++ b/style/themes/lcars.css @@ -381,6 +381,10 @@ p.login-box-msg, background: #f00; } +.login-help p { + font-size: 13px; +} + .input-group .input-group-addon { border-radius: 8px 0 0 8px; border-right: none;