UI tidy (#2995)

* Remove tables from Add/Edit Cron forms

* Remove dead .data-count class

* Tidy some CSS

web/css/src/themes/dark.css

@@ -4,10 +4,15 @@
     Website:     www.hestiacp.com
 */
 
-.debug-panel-contents {
+body {
+  color: #cdcdcd;
   background-color: #282828;
 }
 
+a {
+  color: #cdcdcd;
+}
+
 b,
 strong {
   color: #cacaca;
@@ -18,21 +23,6 @@ select {
   text-shadow: 0 0 0 #d4d4d4 !important;
 }
 
-body {
-  color: #cdcdcd;
-  background-color: #282828;
-}
-
-.body-login,
-.body-reset {
-  background: #303030 !important;
-  background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%) !important;
-}
-
-a {
-  color: #cdcdcd;
-}
-
 .l-header {
   background: #454545;
   border-bottom: 1px solid #505050;
@@ -608,17 +598,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .vst-ok a:active {
 }
 
-.login-box td,
-.data td {
+.login-box td {
   color: #d4d4d4;
 }
 
-.data input[type="checkbox"] {
-}
-
-.data a {
-}
-
 .form-control {
   background-color: #454545;
   border: 1px solid #606060;
@@ -999,22 +982,6 @@ a.button.cancel {
 
 }
 
-.data-active b {
-
-}
-
-.data-suspended b {
-
-}
-
-.data-date {
-
-}
-
-.data-dotted {
-
-}
-
 .mail-infoblock-td {
 
 }
@@ -1072,11 +1039,11 @@ a.button.cancel {
 }
 
 .page-title {
-  color: #e8e8e8 !important;
+  color: #e8e8e8;
 }
 
 .section-title {
-  border-bottom-color: #484848 !important;
+  border-bottom-color: #484848;
 }
 
 .qr-code {
@@ -1470,6 +1437,16 @@ li[aria-expanded="true"] a {
   border-radius: 8px;
 }
 
+.body-login,
+.body-reset {
+  background: #303030 !important;
+  background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%) !important;
+}
+
+.debug-panel-contents {
+  background-color: #282828;
+}
+
 .body-rrd .units .l-unit {
   background-color: #282828 !important;
   border-left: 1px solid transparent !important;

web/css/src/themes/default.css

@@ -8,8 +8,8 @@
   font-style: normal;
   font-weight: 300;
   src: local('Exo Light'), local('Exo-Light'),
-	   url('/webfonts/exo-v8-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -19,8 +19,8 @@
   font-style: italic;
   font-weight: 300;
   src: local('Exo Light Italic'), local('Exo-LightItalic'),
-	   url('/webfonts/exo-v8-latin-ext_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -30,8 +30,8 @@
   font-style: normal;
   font-weight: 400;
   src: local('Exo Regular'), local('Exo-Regular'),
-	   url('/webfonts/exo-v8-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -41,8 +41,8 @@
   font-style: italic;
   font-weight: 400;
   src: local('Exo Italic'), local('Exo-Italic'),
-	   url('/webfonts/exo-v8-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -52,8 +52,8 @@
   font-style: normal;
   font-weight: 500;
   src: local('Exo Medium'), local('Exo-Medium'),
-	   url('/webfonts/exo-v8-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -63,8 +63,8 @@
   font-style: italic;
   font-weight: 500;
   src: local('Exo Medium Italic'), local('Exo-MediumItalic'),
-	   url('/webfonts/exo-v8-latin-ext_latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -74,8 +74,8 @@
   font-style: normal;
   font-weight: 600;
   src: local('Exo SemiBold'), local('Exo-SemiBold'),
-	   url('/webfonts/exo-v8-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -85,8 +85,8 @@
   font-style: italic;
   font-weight: 600;
   src: local('Exo SemiBold Italic'), local('Exo-SemiBoldItalic'),
-	   url('/webfonts/exo-v8-latin-ext_latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -96,8 +96,8 @@
   font-style: normal;
   font-weight: 700;
   src: local('Exo Bold'), local('Exo-Bold'),
-	   url('/webfonts/exo-v8-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -107,8 +107,8 @@
   font-style: italic;
   font-weight: 700;
   src: local('Exo Bold Italic'), local('Exo-BoldItalic'),
-	   url('/webfonts/exo-v8-latin-ext_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	   url('/webfonts/exo-v8-latin-ext_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+     url('/webfonts/exo-v8-latin-ext_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('/webfonts/exo-v8-latin-ext_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   font-display: swap;
 }
 
@@ -121,8 +121,8 @@
 @font-face {
   font-family: 'Inconsolata';
   src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
-	  url('/webfonts/Inconsolata-Bold.woff2') format('woff2'),
-	  url('/webfonts/Inconsolata-Bold.woff') format('woff');
+    url('/webfonts/Inconsolata-Bold.woff2') format('woff2'),
+    url('/webfonts/Inconsolata-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
@@ -132,33 +132,16 @@
 @font-face {
   font-family: 'Inconsolata';
   src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
-	  url('/webfonts/Inconsolata-Regular.woff2') format('woff2'),
-	  url('/webfonts/Inconsolata-Regular.woff') format('woff');
+    url('/webfonts/Inconsolata-Regular.woff2') format('woff2'),
+    url('/webfonts/Inconsolata-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }
 
-/* Extend animate.css
-   ========================================================================== */
-
-.animated {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-}
-
-.animated.extended {
-  -webkit-animation-duration: 0.6s;
-  animation-duration: 0.6s;
-}
-
 /* Base
    ========================================================================== */
 
-.debug-panel-contents {
-  background-color: #fff;
-}
-
 * {
   -webkit-tap-highlight-color: transparent;
 }
@@ -178,7 +161,6 @@ html {
 
 body {
   font-family: Exo, Arial, sans-serif;
-  overflow-x: hidden;
   font-size: 0.9rem;
   height: 100%;
   color: #7c7c7c;
@@ -188,14 +170,6 @@ body {
 :focus { outline: none; }
 ::-moz-focus-inner { border: 0; }
 
-.body-login,
-.body-reset {
-  height: auto;
-  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;
-}
-
 h1,
 h2,
 h3,
@@ -1076,6 +1050,14 @@ div.l-content > div.l-separator:nth-of-type(4) {
   padding-right: 6px;
 }
 
+.body-login,
+.body-reset {
+  height: auto;
+  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;
+}
+
 .body-user .l-unit.animated.fadeIn {
   line-height: 2rem;
 }
@@ -1968,10 +1950,6 @@ body.mobile .l-icon-shortcuts {
   text-align: center;
 }
 
-#vstobjects {
-  /*  margin-top: -1px; */
-}
-
 #vstobjects .l-center {
   padding-top: 20px;
   padding-bottom: 30px;
@@ -2131,10 +2109,6 @@ body.mobile .l-icon-shortcuts {
   animation-play-state: paused;
 }
 
-.uppercase {
-  text-transform: uppercase;
-}
-
 .title b,
 .title {
   color: #c36;
@@ -2187,24 +2161,7 @@ body.mobile .l-icon-shortcuts {
   color: #d53067;
 }
 
-.data {
-  margin: 0 0 90px;
-}
-
-.data-col1 {
-  width: 148px;
-}
-
-.data-col1 td {
-  padding: 10px 0 0 5px;
-}
-
-.data-col1 tr:first-child td {
-  padding: 59px 0 0 5px;
-}
-
-.login-box td,
-.data td {
+.login-box td {
   color: #4b4b4b;
   font-size: 0.85rem;
   padding-bottom: 4px;
@@ -2219,8 +2176,9 @@ body.mobile .l-icon-shortcuts {
   margin-top: -12px;
 }
 
-.data a {
-  text-decoration: none;
+.form-label {
+  margin-bottom: 6px;
+  display: inline-block;
 }
 
 .form-control {
@@ -2249,6 +2207,63 @@ body.mobile .l-icon-shortcuts {
   color: #333;
 }
 
+.form-control.list-editor {
+  border: none;
+  box-shadow: none;
+  position: absolute;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  width: auto;
+  top: 2px;
+  left: 2px;
+  right: 23px;
+}
+
+.form-control.list-editor:focus {
+  background-color: #fff;
+}
+
+.form-select {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  font-weight: normal;
+  font-size: .8rem;
+  padding: 8px 30px 8px 12px;
+  line-height: 1.5;
+  border-radius: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  color: #4e4e4e;
+  appearance: none;
+  background-image: url(/images/arrow.png);
+  background-repeat: no-repeat;
+  background-position: right 9px center;
+  text-shadow: 0 0 0 #4b4b4b;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
+}
+
+.form-select:hover {
+  border: 1px solid #94c8f0;
+}
+
+.form-select:focus {
+  border: 1px solid #008fee;
+}
+
+.form-check {
+  position: relative;
+  padding-left: 20px;
+  margin-left: 3px;
+  min-height: 24px;
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: 3px;
+  margin-left: -20px;
+}
+
 .form-control:disabled,
 .form-select:disabled {
   background-color: #e7e7e7;
@@ -2266,22 +2281,6 @@ body.mobile .l-icon-shortcuts {
   border-color: #cfcfcf;
 }
 
-.form-control.list-editor {
-  border: none;
-  box-shadow: none;
-  position: absolute;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  width: auto;
-  top: 2px;
-  left: 2px;
-  right: 23px;
-}
-
-.form-control.list-editor:focus {
-  background-color: #fff;
-}
-
 a.vst-text,
 a.vst-text b {
   color: #326b9b;
@@ -2394,52 +2393,6 @@ a.vst-text:active b {
   border: none !important;
 }
 
-.form-label {
-  margin-bottom: 6px;
-  display: inline-block;
-}
-
-.form-select {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  font-weight: normal;
-  font-size: .8rem;
-  padding: 8px 30px 8px 12px;
-  line-height: 1.5;
-  border-radius: 4px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  color: #4e4e4e;
-  appearance: none;
-  background-image: url(/images/arrow.png);
-  background-repeat: no-repeat;
-  background-position: right 9px center;
-  text-shadow: 0 0 0 #4b4b4b;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-}
-
-.form-select:hover {
-  border: 1px solid #94c8f0;
-}
-
-.form-select:focus {
-  border: 1px solid #008fee;
-}
-
-.form-check {
-  position: relative;
-  padding-left: 20px;
-  margin-left: 3px;
-  min-height: 24px;
-}
-
-.form-check-input {
-  position: absolute;
-  margin-top: 3px;
-  margin-left: -20px;
-}
-
 .lets-encrypt-note {
   color: #89a40a !important;
   font-style: italic;
@@ -2516,8 +2469,7 @@ a.vst-text:active b {
 }
 
 .ftp-path-value,
-.hint,
-td.hint {
+.hint {
   color: #777;
   font-size: 0.8rem;
   font-style: italic;
@@ -2532,12 +2484,12 @@ td.hint {
 
 /* Hide the default close button in dialog header */
 .ui-dialog-titlebar-close {
-	display: none;
+  display: none;
 }
 
 /* Set high z-index for dialog to override .l-header */
 .ui-front {
-	z-index: 1000;
+  z-index: 1000;
 }
 
 .ui-dialog .ui-dialog-buttonpane button {
@@ -2735,30 +2687,6 @@ a.button.cancel {
   font-weight: normal;
 }
 
-.data-active b {
-  color: #3b9de8;
-  font-size: 0.8rem;
-  text-transform: uppercase;
-}
-
-.data-suspended b {
-  color: #a3a3a3;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.data-date {
-  font-weight: normal;
-  color: #777;
-  font-size: 0.8rem;
-  line-height: 23px;
-}
-
-.data-dotted {
-  vertical-align: top;
-}
-
 .mail-infoblock-td {
   vertical-align: top;
 }
@@ -2856,27 +2784,26 @@ a.button.cancel {
 }
 
 .page-title {
-  font-size: 1.4rem !important;
-  font-weight: 500 !important;
-  padding-bottom: 20px !important;
+  font-size: 1.4rem;
+  font-weight: 500;
+  padding-bottom: 20px;
   letter-spacing: -0.01em;
 }
 
 .section-title {
-  position: relative;
-  font-size: 1.05rem !important;
-  font-weight: 600 !important;
-  padding-bottom: 12px !important;
-  padding-top: 28px !important;
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1.05rem;
+  font-weight: 600;
+  padding-top: 28px;
+  padding-bottom: 12px;
   letter-spacing: -0.01em;
   border-bottom: 1px solid #ccc;
-  cursor: pointer;
-  min-width: 390px;
 }
 
 .section-hide-button {
-  position: absolute;
-  right: 0;
   font-size: 13.6px;
 }
 
@@ -3251,8 +3178,6 @@ form#vstobjects.suspended {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   border-right: 0;
-
-  /*  visibility: hidden; */
   transition: width 0.2s ease-out;
 }
 
@@ -3269,10 +3194,6 @@ form#vstobjects.suspended {
   visibility: visible;
 }
 
-.search-input:focus {
-  /*  Adjusts elements of search box when focused/selected */
-}
-
 .lang-fr .search-input,
 .lang-de .search-input,
 .lang-nl .search-input {
@@ -3572,7 +3493,7 @@ form#vstobjects.suspended {
 .helper-container {
   float: right;
   margin-bottom: -450px;
-  margin-top: 410px;
+  margin-top: 423px;
   margin-right: 22px;
   padding-top: 0;
   width: 600px;
@@ -3682,10 +3603,6 @@ li[aria-expanded="true"] a {
   filter: none;
 }
 
-.server-info {
-  /* empty element */
-}
-
 .server-info-output {
   color: #c36;
   padding: 10px 0 20px 20px;
@@ -3733,7 +3650,6 @@ li[aria-expanded="true"] a {
 }
 
 .debug-panel-header {
-  width: 100%;
   text-align: center;
   border-bottom: 1px solid rgb(255 255 255 / 25%);
   box-shadow: 0 -2px 4px rgb(0 0 0 / 40%);
@@ -3752,7 +3668,8 @@ li[aria-expanded="true"] a {
 }
 
 .debug-panel-contents {
-  font-size: 12px !important;
+  background-color: #fff;
+  font-size: 12px;
   padding: 18px;
   position: absolute;
   top: 0;
@@ -3813,6 +3730,19 @@ li[aria-expanded="true"] a {
 .password-meter[value="3"]::-moz-meter-bar { background: yellow; }
 .password-meter[value="4"]::-moz-meter-bar { background: green; }
 
+/* Extend animate.css
+   ========================================================================== */
+
+.animated {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+}
+
+.animated.extended {
+  -webkit-animation-duration: 0.6s;
+  animation-duration: 0.6s;
+}
+
 /* Global utilities
    ========================================================================== */
 

web/css/src/themes/vestia.css

@@ -4,16 +4,6 @@
     Website:     www.hestiacp.com
 */
 
-/* Extend animate.css
-   ========================================================================== */
-
-.animated {
-  -webkit-animation-duration: 0s !important;
-  animation-duration: 0s !important;
-  -webkit-animation-fill-mode: none !important;
-  animation-fill-mode: none !important;
-}
-
 /* Base
    ========================================================================== */
 
@@ -374,8 +364,8 @@ a.vst-text:hover b,
 }
 
 .page-title {
-  font-weight: 600 !important;
-  font-size: 1.2rem !important;
+  font-weight: 600;
+  font-size: 1.2rem;
 }
 
 .l-sort-toolbar__filter-apply {
@@ -736,9 +726,9 @@ a.vst-advanced:focus {
 }
 
 .helper-container {
-  margin-top: 406px !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
+  margin-top: 412px;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .cron-helper-tabs .ui-tabs-selected a,
@@ -757,3 +747,13 @@ li[aria-expanded="true"] a {
 a.vst-advanced {
   margin-left: -10px;
 }
+
+/* Extend animate.css
+   ========================================================================== */
+
+.animated {
+  -webkit-animation-duration: 0s !important;
+  animation-duration: 0s !important;
+  -webkit-animation-fill-mode: none !important;
+  animation-fill-mode: none !important;
+}

web/templates/pages/add_cron.html

@@ -331,67 +331,36 @@
   <form id="vstobjects" name="v_add_cron" method="post">
     <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
     <input type="hidden" name="ok" value="Add">
-    <table class="data">
-      <tr class="data-add">
-        <td class="data-dotted">
-          <table class="data-col1">
-            <tr>
-              <td></td>
-            </tr>
-          </table>
-        </td>
-        <td class="data-dotted">
-          <table class="data-col2" width="850px">
-            <tr>
-              <td class="u-pt18">
-                <span class="page-title"><?=_('Adding Cron Job');?></span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <?php show_alert_message($_SESSION);?>
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_cmd" class="form-label"><?=_('Command');?></label>
-                <input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt18">
-                <label for="v_min" class="form-label"><?=_('Minute');?></label>
-                <input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?=htmlentities(trim($v_min, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_hour" class="form-label"><?=_('Hour');?></label>
-                <input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?=htmlentities(trim($v_hour, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_day" class="form-label"><?=_('Day');?></label>
-                <input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?=htmlentities(trim($v_day, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_month" class="form-label"><?=_('Month');?></label>
-                <input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_wday" class="form-label"><?=_('Day of week');?></label>
-                <input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?=htmlentities(trim($v_wday, "'"))?>">
-              </td>
-            </tr>
-          </table>
-          <table class="data-col2"></table>
-        </td>
-      </tr>
-    </table>
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Adding Cron Job');?></h1>
+      <?php show_alert_message($_SESSION);?>
+      <div class="u-mb20">
+        <label for="v_cmd" class="form-label"><?=_('Command');?></label>
+        <input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_min" class="form-label"><?=_('Minute');?></label>
+        <input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?=htmlentities(trim($v_min, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_hour" class="form-label"><?=_('Hour');?></label>
+        <input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?=htmlentities(trim($v_hour, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_day" class="form-label"><?=_('Day');?></label>
+        <input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?=htmlentities(trim($v_day, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_month" class="form-label"><?=_('Month');?></label>
+        <input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_wday" class="form-label"><?=_('Day of week');?></label>
+        <input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?=htmlentities(trim($v_wday, "'"))?>">
+      </div>
+    </div>
+
   </form>
+
 </div>

web/templates/pages/add_db.html

@@ -32,7 +32,7 @@
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
             <div><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></div>
-            <div style="margin-left: 3px;"><a href="/add/db/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <div class="u-ml10"><a href="/add/db/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>

web/templates/pages/add_dns.html

@@ -32,7 +32,7 @@
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
             <div><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></div>
-            <div style="margin-left: 3px;"><a href="/add/dns/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <div class="u-ml10"><a href="/add/dns/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>

web/templates/pages/add_mail.html

@@ -32,7 +32,7 @@
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
             <div><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></div>
-            <div style="margin-left: 3px;"><a href="/add/mail/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <div class="u-ml10"><a href="/add/mail/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>

web/templates/pages/add_web.html

@@ -34,7 +34,7 @@
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
             <div><a href="/add/user/" class="vst-advanced admin-warning-button"><?=_('Add User');?></a></div>
-            <div style="margin-left: 3px;"><a href="/add/web/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <div class="u-ml10"><a href="/add/web/?accept=true" class="vst-advanced button danger admin-warning-button"><?=_('Continue');?></a></div>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>

web/templates/pages/debug_panel.html

@@ -13,11 +13,11 @@
   <?php
     echo "<h3>POST Variables</h3>";
     foreach ($_POST as $key=>$val)
-    echo "<b>".$key."= </b> ".$val."  ";  
+    echo "<b>".$key."= </b> ".$val."  ";
   ?>
   <?php
     echo "<h3>GET Variables</h3>";
     foreach ($_GET as $key=>$val)
     echo "<b>".$key."= </b> ".$val."  ";
   ?>
-</div>
+</div>

web/templates/pages/edit_cron.html

@@ -331,67 +331,36 @@
   <form id="vstobjects" name="v_edit_cron" method="post" class="<?=$v_status?>">
     <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
     <input type="hidden" name="save" value="save">
-    <table class="data">
-      <tr class="data-add">
-        <td class="data-dotted">
-          <table class="data-col1">
-            <tr>
-              <td></td>
-            </tr>
-          </table>
-        </td>
-        <td class="data-dotted">
-          <table class="data-col2" width="850px">
-            <tr>
-              <td class="u-pt18">
-                <span class="page-title"><?=_('Editing Cron Job');?></span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <?php show_alert_message($_SESSION);?>
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_cmd" class="form-label"><?=_('Command');?></label>
-                <input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt18">
-                <label for="v_min" class="form-label"><?=_('Minute');?></label>
-                <input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?=htmlentities(trim($v_min, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_hour" class="form-label"><?=_('Hour');?></label>
-                <input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?=htmlentities(trim($v_hour, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_day" class="form-label"><?=_('Day');?></label>
-                <input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?=htmlentities(trim($v_day, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_month" class="form-label"><?=_('Month');?></label>
-                <input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
-              </td>
-            </tr>
-            <tr>
-              <td class="u-pt6">
-                <label for="v_wday" class="form-label"><?=_('Day of week');?></label>
-                <input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?=htmlentities(trim($v_wday, "'"))?>">
-              </td>
-            </tr>
-          </table>
-          <table class="data-col2 u-mb20"></table>
-        </td>
-      </tr>
-    </table>
+
+    <div class="app-form">
+      <h1 class="page-title"><?=_('Editing Cron Job');?></h1>
+      <?php show_alert_message($_SESSION);?>
+      <div class="u-mb20">
+        <label for="v_cmd" class="form-label"><?=_('Command');?></label>
+        <input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_min" class="form-label"><?=_('Minute');?></label>
+        <input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?=htmlentities(trim($v_min, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_hour" class="form-label"><?=_('Hour');?></label>
+        <input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?=htmlentities(trim($v_hour, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_day" class="form-label"><?=_('Day');?></label>
+        <input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?=htmlentities(trim($v_day, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_month" class="form-label"><?=_('Month');?></label>
+        <input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
+      </div>
+      <div class="u-mb10">
+        <label for="v_wday" class="form-label"><?=_('Day of week');?></label>
+        <input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?=htmlentities(trim($v_wday, "'"))?>">
+      </div>
+    </div>
+
   </form>
+
 </div>

web/templates/pages/list_access_keys.html

@@ -107,7 +107,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d Access Key', '%d Access Keys', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_backup.html

@@ -130,7 +130,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d backup', '%d backups', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_backup_detail.html

@@ -249,10 +249,10 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right total clearfix">
+      <div class="l-unit__col l-unit__col--right total clearfix">
         <?php printf(ngettext('%d item', '%d items', $i),$i); ?>
       </div>
-      <div class="data-count l-unit__col l-unit__col--right back clearfix">
+      <div class="l-unit__col l-unit__col--right back clearfix">
       </div>
     </div>
   </div>

web/templates/pages/list_backup_exclusions.html

@@ -61,7 +61,7 @@
     <div class="l-separator"></div>
     <div class="l-center">
       <div class="l-unit-ft">
-        <div class="data-count l-unit__col l-unit__col--right total clearfix">
+        <div class="l-unit__col l-unit__col--right total clearfix">
         </div>
       </div>
     </div>

web/templates/pages/list_cron.html

@@ -153,7 +153,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d cron job', '%d cron jobs', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_db.html

@@ -191,7 +191,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d SQL database', '%d SQL databases', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_dns.html

@@ -166,7 +166,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d DNS zone', '%d DNS zones', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_dns_rec.html

@@ -146,10 +146,10 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right total clearfix">
+      <div class="l-unit__col l-unit__col--right total clearfix">
         <?php printf(ngettext('%d DNS record', '%d DNS records', $i),$i); ?>
       </div>
-      <div class="data-count l-unit__col l-unit__col--right back clearfix">
+      <div class="l-unit__col l-unit__col--right back clearfix">
       </div>
     </div>
   </div>

web/templates/pages/list_firewall.html

@@ -142,7 +142,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d firewall rule', '%d firewall rules', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_firewall_banlist.html

@@ -84,7 +84,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php
           if ( $i == 0) {
             echo _('There are currently no banned IP addresses.');
@@ -93,7 +93,7 @@
           }
         ?>
       </div>
-      <div class="data-count l-unit__col l-unit__col--right back clearfix">
+      <div class="l-unit__col l-unit__col--right back clearfix">
       </div>
     </div>
   </div>

web/templates/pages/list_firewall_ipset.html

@@ -92,7 +92,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php
           if ( $i == 0) {
             echo _('There are currently no IP lists defined.');
@@ -101,7 +101,7 @@
           }
         ?>
       </div>
-      <div class="data-count l-unit__col l-unit__col--right back clearfix">
+      <div class="l-unit__col l-unit__col--right back clearfix">
       </div>
     </div>
   </div>

web/templates/pages/list_ip.html

@@ -107,7 +107,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d IP address', '%d IP addresses', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_key.html

@@ -64,7 +64,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d SSH Key', '%d SSH Keys', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_log.html

@@ -101,7 +101,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d log record', '%d log records', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_log_auth.html

@@ -88,7 +88,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit_col l-unit_col--right clearfix">
+      <div class="l-unit_col l-unit_col--right clearfix">
         <?php printf(ngettext('%d log record', '%d log records', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_mail.html

@@ -227,7 +227,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d mail domain', '%d mail domains', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_mail_acc.html

@@ -204,10 +204,10 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d mail account', '%d mail accounts', $i),$i); ?>
       </div>
-      <div class="data-count l-unit__col l-unit__col--right back clearfix">
+      <div class="l-unit__col l-unit__col--right back clearfix">
       </div>
     </div>
   </div>

web/templates/pages/list_mail_dns.html

@@ -121,9 +121,9 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
       </div>
-      <div class="data-count l-unit__col l-unit__col--right back clearfix">
+      <div class="l-unit__col l-unit__col--right back clearfix">
       </div>
     </div>
   </div>

web/templates/pages/list_packages.html

@@ -223,7 +223,7 @@
   <div class="l-separator visible"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d package', '%d packages', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_search.html

@@ -163,7 +163,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d object', '%d objects', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_server_preview.html

@@ -41,7 +41,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
       </div>
     </div>
   </div>

web/templates/pages/list_services.html

@@ -180,7 +180,7 @@
   <div class="l-center">
     <div class="l-unit-ft">
       <div class="l-unit__col l-unit__col--left clearfix"></div>
-      <div class="data-count l-unit__col l-unit__col--right clearfix"></div>
+      <div class="l-unit__col l-unit__col--right clearfix"></div>
     </div>
   </div>
 </div>

web/templates/pages/list_stats.html

@@ -238,7 +238,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d month', '%d months', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_user.html

@@ -187,7 +187,7 @@
   <div class="l-separator visible"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d user account', '%d user accounts', $i),$i); ?>
       </div>
     </div>

web/templates/pages/list_web.html

@@ -248,7 +248,7 @@
   <div class="l-separator"></div>
   <div class="l-center">
     <div class="l-unit-ft">
-      <div class="data-count l-unit__col l-unit__col--right clearfix">
+      <div class="l-unit__col l-unit__col--right clearfix">
         <?php printf(ngettext('%d web domain', '%d web domains', $i),$i); ?>
       </div>
     </div>