improve efficiency of the LCARS login screen error message

Signed-off-by: Iksas <Iksas@users.noreply.github.com>
pi-hole · Jan 24, 2022 · c71e022 · c71e022
1 parent 8fa0d8d
commit c71e022
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 21 deletions.
diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -45,17 +45,25 @@
   }
 }
 
+p#dhcpnotice[hidden] {
+  display: none;
+}
+
+.lookatme #dhcpnotice {
+  display: block;
+}
+
+td.lookatme {
+  display: table-cell;
+}
+
 .lookatme {
   color: #630030;
   opacity: 1;
   position: relative;
   display: inline-block;
 }
 
-td.lookatme {
-  display: table-cell;
-}
-
 /* this pseudo element will be faded in and out in front /*
 /* of the lookatme element to create an efficient animation. */
 .lookatme:after {

diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -312,6 +312,13 @@ label {
   font-weight: bold !important;
 }
 
+div .panel-title,
+p.login-box-msg,
+.form-group.has-error label {
+  position: relative;
+  z-index: 1;
+}
+
 .form-control::placeholder {
   color: #456;
 }
@@ -329,24 +336,32 @@ label {
 
 .form-group.has-error.login-box-msg::before {
   content: "ACCESS DENIED";
-  display: block;
   margin: -20px -20px 20px;
   padding: calc(45px + 0.7em) 0 0;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 130px;
-  color: #d43;
-  font-size: 3.825em;
+  inset: 0 0 0 0;
+  color: #630030;
   font-size: calc((100vw - var(--sidebar-width) - 60px) / 12);
   line-height: 1;
-  animation: 3s infinite Pulse;
   background: rgba(0, 0, 0, 0.88);
-  z-index: 0;
 }
 
-.layout-boxed .form-group.has-error.login-box-msg::before {
+.form-group.has-error.login-box-msg::after {
+  content: "ACCESS DENIED";
+  margin: -20px -20px 20px;
+  padding: calc(45px + 0.7em) 0 0;
+  position: absolute;
+  inset: 0 0 0 0;
+  color: #e33100;
+  font-size: calc((100vw - var(--sidebar-width) - 60px) / 12);
+  line-height: 1;
+  text-shadow: 0 0 5px #e33100;
+  animation: 3s infinite Pulse steps(30);
+  z-index: 1;
+}
+
+.layout-boxed .form-group.has-error.login-box-msg::before,
+.layout-boxed .form-group.has-error.login-box-msg::after {
   padding: calc(50% - 0.5em) 0 0;
 }
 
@@ -1506,7 +1521,8 @@ table.dataTable {
 
 /*--- Media - max-width ---*/
 @media (max-width: 991px) {
-  .form-group.has-error.login-box-msg::before {
+  .form-group.has-error.login-box-msg::before,
+  .form-group.has-error.login-box-msg::after {
     font-size: calc((100vw - var(--sidebar-width) - 60px) / 9);
   }
 }
@@ -1597,7 +1613,8 @@ table.dataTable {
   .main-footer {
     margin-left: 0;
   }
-  .form-group.has-error.login-box-msg::before {
+  .form-group.has-error.login-box-msg::before,
+  .form-group.has-error.login-box-msg::after {
     font-size: calc((100vw - 60px) / 6);
   }
 }
@@ -1668,18 +1685,18 @@ table.dataTable {
 }
 
 @media (min-width: 1320px) {
-  .layout-boxed .form-group.has-error.login-box-msg::before {
+  .layout-boxed .form-group.has-error.login-box-msg::before,
+  .layout-boxed .form-group.has-error.login-box-msg::after {
     font-size: calc((1320px - var(--sidebar-width) - 60px) / 12);
   }
 }
 
-@media (min-width: 1920px) {
-  .layout-boxed .form-group.has-error.login-box-msg::before {
+@media (min-width: 1960px) {
+  .layout-boxed .form-group.has-error.login-box-msg::before,
+  .layout-boxed .form-group.has-error.login-box-msg::after {
     font-size: calc((1920px - var(--sidebar-width) - 60px) / 12);
   }
-}
 
-@media (min-width: 1960px) {
   .layout-boxed .wrapper {
     box-shadow: none;
     max-width: 1920px;