Remove tables from login pages (hestiacp#3006)

Author: AlecRust

web/css/src/themes/dark.css

@@ -598,10 +598,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .vst-ok a:active {
 }
 
-.login-box td {
-  color: #d4d4d4;
-}
-
 .form-label,
 .form-check label {
   color: #d4d4d4;
@@ -734,7 +730,7 @@ a.vst-text:active b {
   text-transform: none !important;
 }
 
-.login-box .vst-advanced:hover {
+.login .vst-advanced:hover {
   color: #ff3478 !important;
   background-color: transparent;
   border-color: transparent;
@@ -743,7 +739,7 @@ a.vst-text:active b {
   box-shadow: none !important;
 }
 
-.login-box .vst-advanced:active {
+.login .vst-advanced:active {
   color: #be1f54 !important;
   border: none !important;
   background: none !important;
@@ -757,15 +753,15 @@ a.vst-text:active b {
   text-decoration: none;
 }
 
-.login-box .vst-advanced:active,
+.login .vst-advanced:active,
 .vst-advanced:active {
   color: #fff;
   background-color: #be1f54;
   border-color: #be1f54;
   text-decoration: none;
 }
 
-.login-box .vst-advanced {
+.login .vst-advanced {
   border-bottom: none;
   color: #326b9b;
   font-size: 0.85em !important;
@@ -1035,11 +1031,15 @@ a.button.cancel {
 
 .login {
   background-color: #282828;
-  box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%) !important;
+  box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%);
 }
 
-.login-welcome {
-  color: #fff !important;
+.login-title {
+  color: #fff;
+}
+
+.login a.error {
+  color: #f864fa;
 }
 
 .form-title {
@@ -1055,10 +1055,6 @@ a.button.cancel {
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-.login a.error {
-  color: #f864fa;
-}
-
 .hestiacp {
 
 }
@@ -1071,10 +1067,6 @@ a.button.cancel {
   color: #ff3478;
 }
 
-.login-bottom {
-
-}
-
 .l-unit.selected {
   background-color: #454545;
   color: #d4d4d4;

web/css/src/themes/default.css

@@ -1049,6 +1049,8 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .body-login,
 .body-reset {
   height: auto;
+  display: flex;
+  justify-content: center;
   padding-top: 10%;
   background: rgb(102 158 231) !important;
   background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%) !important;
@@ -2158,13 +2160,6 @@ body.mobile .l-icon-shortcuts {
   color: #d53067;
 }
 
-.login-box td {
-  color: #4b4b4b;
-  font-size: 0.85rem;
-  padding-bottom: 4px;
-  font-weight: 600;
-}
-
 .jump-top {
   margin-top: -60px;
 }
@@ -2351,7 +2346,7 @@ a.vst-text:active b {
   text-transform: none;
 }
 
-.login-box .vst-advanced:hover {
+.login .vst-advanced:hover {
   color: #c36;
   background-color: transparent;
   border-color: transparent;
@@ -2368,7 +2363,7 @@ a.vst-text:active b {
   text-decoration: none;
 }
 
-.login-box .vst-advanced:active {
+.login .vst-advanced:active {
   color: #fff;
   background-color: #f7d616;
   border-color: #f7d616;
@@ -2383,7 +2378,7 @@ a.vst-text:active b {
   font-size: unset;
 }
 
-.login-box .vst-advanced {
+.login .vst-advanced {
   border-bottom: none;
   color: #326b9b;
   text-decoration: none;
@@ -2759,13 +2754,25 @@ a.button.cancel {
 }
 
 .login {
+  display: flex;
+  padding: 80px 50px;
   background-color: rgb(255 255 255 / 70%);
+  border-radius: 6px;
   box-shadow:
     0 8px 25px rgb(0 0 0 / 30%),
     inset 0 0 2px rgb(255 255 255 / 100%);
-  vertical-align: top;
-  width: 500px;
-  border-radius: 6px;
+}
+
+.login-title {
+  color: #4b4b4b;
+  font-size: 1.05rem;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
+
+.login a.error {
+  color: #be5abf;
+  font-size: 0.8rem;
 }
 
 .login .form-control {
@@ -2776,13 +2783,8 @@ a.button.cancel {
   font-size: 0.8rem !important;
 }
 
-.login-welcome {
-  font-size: 1.05rem !important;
-  font-weight: 500 !important;
-  padding-bottom: 30px !important;
-}
-
 .form-title {
+  color: #4b4b4b;
   font-size: 1.4rem;
   font-weight: 500;
   padding-bottom: 30px;
@@ -2812,11 +2814,6 @@ a.button.cancel {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
-.login a.error {
-  color: #be5abf;
-  font-size: 0.8rem;
-}
-
 .hestiacp {
   color: #505050;
 }
@@ -2829,14 +2826,6 @@ a.button.cancel {
   color: #c36;
 }
 
-.login-bottom {
-  height: 60px;
-  text-align: right;
-  vertical-align: top;
-  font-size: 0.75rem !important;
-  margin-right: 65px;
-}
-
 .l-unit.selected {
   background-color: #f8f8f8;
   color: #4b4b4b;
@@ -3865,11 +3854,6 @@ li[aria-expanded="true"] a {
   padding-left: 40px !important;
 }
 
-.u-flex-align-center {
-  display: flex !important;
-  justify-content: center !important;
-}
-
 .u-console {
   font-family: Inconsolata, "Lucida Console", Monaco, monospace !important;
   white-space: pre !important;

web/css/src/themes/flat.css

@@ -193,8 +193,8 @@ strong {
 }
 
 .login {
-  background-color: rgb(255 255 255 / 80%) !important;
+  background-color: rgb(255 255 255 / 80%);
   box-shadow:
     0 2px 10px rgb(0 0 0 / 30%),
-    inset 0 0 2px rgb(255 255 255 / 100%) !important;
+    inset 0 0 2px rgb(255 255 255 / 100%);
 }

web/css/src/themes/vestia.css

@@ -254,12 +254,7 @@ strong {
   background: #fff !important;
 }
 
-.login {
-  background-color: rgb(255 255 255 / 80%) !important;
-  box-shadow:
-    0 2px 10px rgb(0 0 0 / 30%),
-    inset 0 0 2px rgb(255 255 255 / 100%) !important;
-}
+
 
 .form-control,
 .form-select {
@@ -661,10 +656,10 @@ a.vst-advanced:focus {
 }
 
 .login {
-  background-color: rgb(255 255 255 / 100%) !important;
-  box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255) !important;
-  font-family: Arial, Helvetica, sans-serif !important;
-  border-radius: 0 !important;
+  background-color: rgb(255 255 255 / 100%);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255);
+  font-family: Arial, Helvetica, sans-serif;
+  border-radius: 0;
 }
 
 .body-login,