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;