Refactor button CSS (#3032)

web/css/src/themes/dark.css

@@ -18,11 +18,6 @@ strong {
   color: #cacaca;
 }
 
-button,
-select {
-  text-shadow: 0 0 0 #d4d4d4 !important;
-}
-
 .l-header {
   background: #454545;
   border-bottom: 1px solid #505050;
@@ -377,15 +372,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #ff3478;
 }
 
-.l-unit-toolbar__buttonstrip {
-}
-
-.l-unit-toolbar__buttonstrip a {
-}
-
-.l-unit-toolbar__buttonstrip .fas {
-}
-
 .l-select {
   border: 1px solid #454545;
   box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
@@ -677,54 +663,8 @@ textarea:focus::placeholder {
   border-color: #be1f54;
 }
 
-.vst-advanced {
-  border-bottom: 0 solid #326b9b;
-  color: #0094f7;
-  font-size: 0.8rem;
-  text-decoration: none;
-  border-radius: 4px;
-  text-transform: none !important;
-}
-
-.vst-advanced:hover {
-  color: #fff;
-  background-color: #ff3478;
-  border-color: #ff3478;
-  text-decoration: none;
-}
-
-.vst-advanced:active {
-  color: #fff;
-  background-color: #be1f54;
-  border-color: #be1f54;
-  text-decoration: none;
-}
-
 .lets-encrypt-note {}
 
-.additional-control {
-  color: #09f;
-}
-
-.additional-control:hover {
-  background-color: #ff3478;
-  border-color: #ff3478;
-}
-
-.additional-control:active {}
-
-.additional-control.ftp-remove-user {}
-
-.additional-control.delete:hover,
-.additional-control.ftp-remove-user:hover {}
-
-.additional-control.delete:active,
-.additional-control.ftp-remove-user:active {}
-
-.additional-control.add:hover {}
-
-.additional-control.add:active {}
-
 .toggle-psw-visibility-icon {}
 
 .show-passwords-enabled-action {}
@@ -742,17 +682,75 @@ td.hint {
   color: #555;
 }
 
-.ui-dialog .ui-dialog-buttonpane button {
+/* Buttons
+   ========================================================================== */
+
+.button {
+  color: #eee;
+  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
+  font-weight: 400;
+  border-color: #707070;
+  background: rgb(48 48 48);
+  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%);
   box-shadow:
-    0 1px 4px rgb(0 0 0 / 10%),
-    inset 0 0 1px #000,
+    0 1px 4px rgb(0 0 0 / 20%),
+    inset 0 0 1px rgb(20 20 20 / 100%),
     inset 0 0 3px rgb(0 0 0 / 50%);
 }
 
-.ui-button,
-.button,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit,
-.vst-advanced,
+.button:hover {
+  color: #fff;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
+  border-color: #0098ff;
+  background: linear-gradient(0deg, rgb(58 58 58 / 100%) 0%, rgb(68 68 68 / 100%) 35%, rgb(79 79 79 / 100%) 100%);
+  background-color: #454545;
+  box-shadow:
+    0 1px 3px rgb(0 0 0 / 35%),
+    inset 0 0 1px rgb(0 0 0 / 100%),
+    inset 0 0 3px rgb(0 0 0 / 65%);
+  transition: 0.2s;
+}
+
+.button:active,
+.button:focus {
+  color: #d4d4d4;
+  text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
+  border-color: #0066b4;
+  background: linear-gradient(0deg, rgb(69 69 69 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(48 48 48 / 100%) 100%);
+  box-shadow:
+    0 1px 3px rgb(0 0 0 / 30%),
+    inset 0 0 1px rgb(0 0 0 / 100%),
+    inset -1px -1px 4px rgb(30 30 30 / 40%);
+}
+
+.button-secondary {
+  border-color: #454545;
+  background-color: #343434;
+  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 100%, rgb(69 69 69 / 100%) 100%);
+}
+
+.button-secondary:hover {
+  background-color: #343434;
+  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 100%, rgb(69 69 69 / 100%) 100%);
+}
+
+.button-danger:hover {
+  background: rgb(133 0 0);
+  background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
+  color: #fff;
+  text-shadow: 0 1px rgb(0 0 0 / 45%);
+  border-color: rgb(170 0 0);
+}
+
+.button-danger:active,
+.button-danger:focus {
+  background: rgb(133 0 0);
+  background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
+  color: #4d0000;
+  text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
+  border-color: rgb(251 71 51);
+}
+
 .to-shortcuts,
 .to-top {
   font-size: 0.85rem !important;
@@ -768,12 +766,6 @@ td.hint {
   text-shadow: 0 1px 1px rgb(0 0 0 / 35%) !important;
 }
 
-.ui-button:hover,
-.button:hover,
-.ui-button.cancel:hover,
-.button.cancel:hover,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:hover,
-.vst-advanced:hover,
 .to-shortcuts:hover,
 .to-top:hover {
   color: #fff !important;
@@ -788,16 +780,6 @@ td.hint {
   transition: 0.2s;
 }
 
-.ui-button:focus,
-.ui-button:active,
-.button:active,
-.button:focus,
-.ui-button.cancel:focus,
-.ui-button.cancel:active,
-.button.cancel:active,
-.button.cancel:focus,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:active,
-.vst-advanced:active,
 .to-shortcuts:active,
 .to-top:active,
 .to-shortcuts:focus,
@@ -812,95 +794,28 @@ td.hint {
     inset -1px -1px 4px rgb(30 30 30 / 40%) !important;
 }
 
-.ui-button-text-only {
-  text-shadow: 0 1px rgb(0 0 0 / 50%);
-}
-
-.ui-dialog .ui-dialog-buttonpane button span.ui-button-text {
-
-}
-
-.ui-dialog .ui-button:hover span {
-  color: #fafafa !important;
-}
-
-.ui-button-text-only .selected {
-
-}
-
-.ui-button.cancel,
-.button.cancel {
-  color: #eee !important;
-  border: 1px solid #454545 !important;
-  background: rgb(48 48 48) !important;
-  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%) !important;
-}
-
-.ui-button-text {
-  color: #eee !important;
-}
-
-.ui-button.cancel:active,
-.button.cancel:active {
-
-}
-
-a.button.cancel {
-
-}
-
-.ui-dialog button.cancel {
-  border: 1px solid #d4d4d4;
-  background-color: #d4d4d4;
-}
-
-.ui-button.danger:hover,
-.button.danger:hover {
-  background: rgb(133 0 0);
-  background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%) !important;
+.ui-dialog button.cancel span {
   color: #fff !important;
-  text-shadow: 0 1px rgb(0 0 0 / 45%) !important;
-  border: 1px solid rgb(170 0 0) !important;
-}
-
-.ui-button.danger:active,
-.button.danger:active,
-.ui-button.danger:focus,
-.button.danger:focus {
-  background: rgb(133 0 0);
-  background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%) !important;
-  color: #4d0000 !important;
-  text-shadow: 0 -1px 1px rgb(255 255 255 / 30%) !important;
-  border: 1px solid rgb(251 71 51) !important;
-}
-
-.ui-button span {
-
 }
 
-.ui-button:hover span {
-  color: #d4d4d4 !important;
-}
-
-.ui-button:active span {
-  color: #d4d4d4;
+.additional-control {
+  color: #09f;
 }
 
-.ui-button.cancel span {
-
+.additional-control:hover {
+  background-color: #ff3478;
+  border-color: #ff3478;
 }
 
-.ui-button:hover span {
+.additional-control:active {}
 
-}
+.additional-control.delete:hover,
 
-.ui-button:active span {
+.additional-control.delete:active,
 
-}
+.additional-control.add:hover {}
 
-.ui-dialog button.cancel span {
-  color: #fff !important;
-}
+.additional-control.add:active {}
 
 .unlim-trigger {
 
@@ -1191,6 +1106,13 @@ form#vstobjects.suspended {
   border-top: 1px solid #404040;
 }
 
+.ui-dialog .ui-dialog-buttonpane button {
+  box-shadow:
+    0 1px 4px rgb(0 0 0 / 10%),
+    inset 0 0 1px #000,
+    inset 0 0 3px rgb(0 0 0 / 50%);
+}
+
 .shortcuts {
   background: rgb(30 30 30 / 95%);
   border: 1px solid rgb(255 255 255 / 25%);
@@ -1315,14 +1237,6 @@ li[aria-expanded="true"] a {
   }
 }
 
-.ui-button.button-suspended {
-  color: #999 !important;
-}
-
-.ui-button.button-suspended i {
-  color: #999 !important;
-}
-
 /* Collapse component
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -602,6 +602,10 @@ table {
   color: #fff;
 }
 
+.alert a:hover {
+  text-decoration: underline;
+}
+
 .app-list.cards {
   display: flex;
   flex-wrap: wrap;
@@ -784,12 +788,15 @@ div.l-content > div.l-separator:nth-of-type(4) {
 
 .l-sort {
   position: fixed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
   max-width: 1020px;
   background-color: #fff;
   z-index: 120;
   margin-top: 181px;
-  height: 43px;
+  height: 44px;
 }
 
 .l-sort__create-btn {
@@ -919,16 +926,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .l-sort-toolbar {
-  float: right;
-  padding-top: 6px;
   text-transform: uppercase;
   font-size: 0.8rem;
 }
 
-.l-sort-toolbar table {
-  float: right;
-}
-
 .l-sort-toolbar td.toggle-all {
   padding-top: 7px;
   padding-right: 10px;
@@ -1049,21 +1050,12 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #c36;
 }
 
-.l-unit-toolbar__buttonstrip {
-  margin-top: 11px;
-  display: inline-block;
-  font-size: 0.9em;
-}
-
-.l-unit-toolbar__buttonstrip a {
-  padding: 2px 10px 3px;
+.l-unit-toolbar__buttonstrip .button {
+  min-width: 0;
+  padding: 2px 10px;
   margin-right: 5px;
 }
 
-.l-unit-toolbar__buttonstrip .fas {
-  padding-right: 6px;
-}
-
 .body-user .l-unit.animated.fadeIn {
   line-height: 2rem;
 }
@@ -1382,7 +1374,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .l-unit__col--left {
-  width: 100px;
+  width: 110px;
   padding-right: 10px;
 }
 
@@ -1759,113 +1751,6 @@ body.mobile .l-unit-toolbar__col--right {
   margin-right: 6px;
 }
 
-.l-icon-up-arrow,
-.l-icon-down-arrow,
-.l-icon-star,
-.l-icon-to-top,
-.l-icon-shortcuts,
-.l-icon-star-orange,
-.l-icon-star-blue {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.l-icon-down-arrow {
-  width: 7px;
-  height: 15px;
-  background-position: -280px -128px;
-}
-
-.l-icon-up-arrow {
-  width: 7px;
-  height: 15px;
-  background-position: -299px -129px;
-}
-
-.l-icon-star {
-  width: 36px;
-  height: 36px;
-  background-position: -216px 560px;
-  cursor: pointer;
-  visibility: hidden;
-}
-
-.l-unit--starred .l-icon-star {
-  background-position: -174px 560px;
-  visibility: visible;
-}
-
-.selected .l-icon-star {
-  filter: contrast(70%);
-}
-
-.units.compact .l-icon-star {
-  margin-top: -14px;
-}
-
-.l-icon-star:hover {
-  background-position: 0 560px;
-}
-
-.l-icon-star:active {
-  -background-position: -174px 560px;
-  background-position: -80px 562px;
-}
-
-.l-unit:hover .l-icon-star {
-  visibility: visible;
-}
-
-.l-icon-to-top {
-  width: 35px;
-  height: 35px;
-  background-position: -330px -68px;
-}
-
-.l-icon-to-top:hover {
-  background-position: -366px -68px;
-}
-
-.l-icon-to-top:active {
-  background-position: -402px -68px;
-}
-
-.l-icon-shortcuts {
-  width: 35px;
-  height: 35px;
-  background-position: -240px -281px;
-  border-radius: 18px;
-}
-
-.l-icon-shortcuts:hover {
-  background-position: -160px -281px;
-}
-
-.l-icon-shortcuts:active {
-  background-position: -198px -281px;
-}
-
-body.mobile .l-icon-to-top,
-body.mobile .l-icon-shortcuts {
-  display: none;
-}
-
-.l-icon-star-orange {
-  width: 13px;
-  height: 13px;
-  background-position: -178px -97px;
-}
-
-.l-icon-star-blue {
-  width: 13px;
-  height: 13px;
-  background-position: -134px -97px;
-}
-
-.media-top {
-  vertical-align: top;
-}
-
 .l-unit__stat-cols {
   padding-right: 10px;
 }
@@ -1904,44 +1789,6 @@ body.mobile .l-icon-shortcuts {
   padding-right: 4px;
 }
 
-.to-top {
-  display: inline-block;
-  position: fixed;
-  top: 90%;
-  right: 4%;
-  border: 1px solid #ddd;
-  padding: 8px;
-  border-radius: 50%;
-  background-color: #eee;
-  text-shadow: 1px 1px #fff;
-  box-shadow:
-    0 2px 4px rgb(120 120 120 / 25%),
-    inset 0 0 1px rgb(255 255 255 / 90%);
-  z-index: 200;
-  width: 34px;
-  height: 34px;
-  text-align: center;
-}
-
-.to-shortcuts {
-  display: inline-block;
-  position: fixed;
-  top: 90%;
-  right: 8%;
-  border: 1px solid #ddd;
-  padding: 8px;
-  border-radius: 50%;
-  background-color: #eee;
-  text-shadow: 1px 1px #fff;
-  box-shadow:
-    0 2px 4px rgb(120 120 120 / 25%),
-    inset 0 0 1px rgb(255 255 255 / 90%);
-  z-index: 200;
-  height: 34px;
-  width: 34px;
-  text-align: center;
-}
-
 #vstobjects .l-center {
   padding-top: 20px;
   padding-bottom: 30px;
@@ -2286,26 +2133,6 @@ body.mobile .l-icon-shortcuts {
   border-color: #f7d616;
 }
 
-.vst-advanced {
-  border-bottom: 0 solid #326b9b;
-  color: #326b9b;
-  font-size: 0.8rem;
-  padding: 2px 2px 0;
-  text-decoration: none;
-  text-transform: none;
-}
-
-.vst-advanced:hover {
-  color: #fff;
-  background-color: #c36;
-  border-color: #c36;
-  text-decoration: none;
-}
-
-.vst-advanced:active {
-  font-size: unset;
-}
-
 .lets-encrypt-note {
   color: #89a40a !important;
   font-style: italic;
@@ -2315,54 +2142,6 @@ body.mobile .l-icon-shortcuts {
   vertical-align: top;
 }
 
-.additional-control {
-  color: #326b9b;
-  border-bottom: 0 solid #326b9b;
-  font-size: 0.8rem;
-  cursor: pointer;
-  text-transform: uppercase;
-  font-weight: 600;
-  padding: 2px 2px 0;
-  text-decoration: none;
-}
-
-.additional-control:hover {
-  background-color: #c36;
-  border-color: #c36;
-  color: #fff;
-}
-
-.additional-control:active {
-  color: #fff;
-  background-color: #aaa;
-}
-
-.additional-control.ftp-remove-user {
-  padding: 2px 0 0;
-}
-
-.additional-control.delete:hover,
-.additional-control.ftp-remove-user:hover {
-  background-color: #ff3438;
-  border-color: #ff3438;
-}
-
-.additional-control.delete:active,
-.additional-control.ftp-remove-user:active {
-  background-color: #ff5f5f;
-  border-color: #ff5f5f;
-}
-
-.additional-control.add:hover {
-  background-color: #3b9de8;
-  border-color: #3b9de8;
-}
-
-.additional-control.add:active {
-  background-color: #54a6e5;
-  border-color: #54a6e5;
-}
-
 .toggle-password {
   color: #aaa;
   z-index: 1;
@@ -2409,183 +2188,177 @@ body.mobile .l-icon-shortcuts {
   z-index: 1000;
 }
 
-.ui-dialog .ui-dialog-buttonpane button {
-  margin-bottom: 4px;
-  box-shadow:
-    0 1px 4px rgb(0 0 0 / 20%),
-    inset 0 0 1px #fff,
-    inset 0 0 3px rgb(255 255 255 / 50%);
-}
-
-.ui-dialog .ui-dialog-buttonpane {
-  border-color: #fff;
-  box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
-  margin-top: 0;
-  padding: 0;
-}
+/* Buttons
+   ========================================================================== */
 
-.ui-button,
-.button,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit,
-.vst-advanced {
-  filter: chroma(color=#000);
+.button {
   cursor: pointer;
-  border-radius: 3px !important;
-  font-size: 1.05em !important;
-  font-weight: 500 !important;
-  padding: 3px 20px;
-  min-width: 100px !important;
-  color: #30659d !important;
-  border: 1px solid #0083db !important;
-  background-color: #3b9de8 !important;
-  background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(192 216 236 / 100%) 51%, rgb(223 235 245 / 100%) 100%) !important;
+  display: inline-block;
+  line-height: 1.5;
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 3px 25px;
+  user-select: none;
+  color: #30659d;
+  min-width: 100px;
+  text-align: center;
+  text-shadow: 0 1px 1px rgb(255 255 255 / 85%);
+  border: 1px solid #0083db;
+  border-radius: 3px;
+  background-color: #3b9de8;
+  background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(192 216 236 / 100%) 51%, rgb(223 235 245 / 100%) 100%);
   box-shadow:
     0 1px 3px rgb(0 0 0 / 25%),
     inset 0 0 1px #fff,
-    inset 0 0 3px rgb(255 255 255 / 50%) !important;
-  text-shadow: 0 1px 1px rgb(255 255 255 / 85%) !important;
+    inset 0 0 3px rgb(255 255 255 / 50%);
 }
 
-.ui-button:hover,
-.button:hover,
-.ui-button.cancel:hover,
-.button.cancel:hover,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:hover,
-.vst-advanced:hover,
-.to-top:hover,
-.to-shortcuts:hover {
-  color: #0077c6 !important;
-  text-shadow: 1px 1px rgb(255 255 255 / 50%) !important;
-  border: 1px solid #54a6e5 !important;
-  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(190 221 246 / 100%) 51%, rgb(227 240 251 / 100%) 100%) !important;
+.button .fas {
+  margin-right: 6px;
+}
+
+.button:hover {
+  color: #0077c6;
+  text-shadow: 1px 1px rgb(255 255 255 / 50%);
+  border-color: #54a6e5;
+  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(190 221 246 / 100%) 51%, rgb(227 240 251 / 100%) 100%);
   box-shadow:
     0 1px 3px rgb(0 0 0 / 25%),
     inset 0 0 1px #fff,
-    inset 0 0 6px rgb(255 255 255 / 60%) !important;
+    inset 0 0 6px rgb(255 255 255 / 60%);
   transition: 0.2s;
 }
 
-.ui-button:focus,
-.ui-button:active,
 .button:active,
-.button:focus,
-.ui-button.cancel:focus,
-.ui-button.cancel:active,
-.button.cancel:active,
-.button.cancel:focus,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:active,
-.vst-advanced:active,
-.to-top:focus,
-.to-shortcuts:focus {
-  border: 1px solid #0066b4 !important;
-  background: linear-gradient(to bottom, rgb(194 224 248 / 100%) 0%, rgb(162 207 244 / 100%) 51%, rgb(210 232 250 / 100%) 100%) !important;
-  color: #517bab !important;
-  text-shadow: 0 -1px 2px rgb(255 255 255 / 85%) !important;
+.button:focus {
+  color: #517bab;
+  text-shadow: 0 -1px 2px rgb(255 255 255 / 85%);
+  border-color: #0066b4;
+  background: linear-gradient(to bottom, rgb(194 224 248 / 100%) 0%, rgb(162 207 244 / 100%) 51%, rgb(210 232 250 / 100%) 100%);
   box-shadow:
     0 1px 2px rgb(0 0 0 / 20%),
     inset 0 0 1px #fff,
-    inset -1px -1px 4px rgb(220 220 220 / 40%) !important;
+    inset -1px -1px 4px rgb(220 220 220 / 40%);
 }
 
-.ui-button-text-only {
-  border: 0 !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  text-shadow: 0 1px rgb(255 255 255 / 50%);
+.button-secondary {
+  color: #717171;
+  border-color: #aaa;
+  background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(230 230 230 / 100%) 51%, rgb(242 242 242 / 100%) 100%);
 }
 
-.ui-dialog .ui-dialog-buttonpane button span.ui-button-text {
-  padding: 2px !important;
-  font-size: 0.85rem !important;
-}
+.button-secondary:hover {}
 
-.ui-dialog .ui-button:hover span {
-  color: #046c98 !important;
+.button-secondary:active,
+.button-secondary:focus {}
+
+.button-danger:hover {
+  background: linear-gradient(to bottom, #fbf2f1 0%, #f6b4ac 51%, #fde6e3 100%);
+  color: #f4301a;
+  text-shadow: 0 1px rgb(255 255 255 / 50%);
+  border-color: #f27e71;
 }
 
-.ui-button-text-only .selected {
-  font-weight: 600 !important;
+.button-danger:active,
+.button-danger:focus {
+  background: linear-gradient(to bottom, #fcd0ca 0%, #f5a69d 50%, #f9e3df 100%);
+  color: #ce1500;
+  text-shadow:
+    0 1px 1px rgb(255 255 255 / 20%),
+    0 -1px 1px rgb(255 255 255 / 60%);
+  border-color: #f4301a;
 }
 
-.ui-button.cancel,
-.button.cancel,
 .to-top,
 .to-shortcuts {
-  color: #717171 !important;
-  border: 1px solid #aaa !important;
-  background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(230 230 230 / 100%) 51%, rgb(242 242 242 / 100%) 100%) !important;
+  display: flex;
+  position: fixed;
+  border-radius: 50%;
+  background-color: #eee;
+  justify-content: center;
+  align-items: center;
+  z-index: 200;
+  width: 34px;
+  height: 34px;
+  text-shadow: 1px 1px #fff;
+  box-shadow:
+    0 2px 4px rgb(120 120 120 / 25%),
+    inset 0 0 1px rgb(255 255 255 / 90%);
+  top: 90%;
+  color: #717171;
+  border: 1px solid #aaa;
+  background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(230 230 230 / 100%) 51%, rgb(242 242 242 / 100%) 100%);
 }
 
-.ui-button-text {
-  padding: 0 !important;
-  color: #30659d !important;
+.to-top {
+  right: 4%;
 }
 
-.ui-button.cancel:active,
-.button.cancel:active,
-.to-top:active,
-.to-shortcuts:active {
-  border: 1px solid #378ccd;
-  background-color: #378ccd;
+.to-shortcuts {
+  right: 8%;
 }
 
-a.button.cancel {
-  padding: 8px 38px;
-  text-transform: capitalize;
+.to-top:hover,
+.to-shortcuts:hover {
+  color: #0077c6;
+  text-shadow: 1px 1px rgb(255 255 255 / 50%);
+  border: 1px solid #54a6e5;
+  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(190 221 246 / 100%) 51%, rgb(227 240 251 / 100%) 100%);
+  box-shadow:
+    0 1px 3px rgb(0 0 0 / 25%),
+    inset 0 0 1px #fff,
+    inset 0 0 6px rgb(255 255 255 / 60%);
+  transition: 0.2s;
 }
 
-.ui-dialog button.cancel {
-  color: #000;
-  border: 1px solid #4b4b4b;
-  background-color: #4b4b4b;
+.to-top:focus,
+.to-shortcuts:focus {
+  border: 1px solid #0066b4;
+  background: linear-gradient(to bottom, rgb(194 224 248 / 100%) 0%, rgb(162 207 244 / 100%) 51%, rgb(210 232 250 / 100%) 100%);
+  color: #517bab;
+  text-shadow: 0 -1px 2px rgb(255 255 255 / 85%);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 20%),
+    inset 0 0 1px #fff,
+    inset -1px -1px 4px rgb(220 220 220 / 40%);
 }
 
-.ui-button.danger:hover,
-.button.danger:hover {
-  background: linear-gradient(to bottom, #fbf2f1 0%, #f6b4ac 51%, #fde6e3 100%) !important;
-  color: #f4301a !important;
-  text-shadow: 0 1px rgb(255 255 255 / 50%) !important;
-  border: 1px solid #f27e71 !important;
+.to-top:active,
+.to-shortcuts:active {
+  border: 1px solid #378ccd;
+  background-color: #378ccd;
 }
 
-.ui-button.danger:active,
-.button.danger:active,
-.ui-button.danger:focus,
-.button.danger:focus {
-  background: linear-gradient(to bottom, #fcd0ca 0%, #f5a69d 50%, #f9e3df 100%) !important;
-  color: #ce1500 !important;
-  text-shadow:
-    0 1px 1px rgb(255 255 255 / 20%),
-    0 -1px 1px rgb(255 255 255 / 60%) !important;
-  border: 1px solid #f4301a !important;
+.additional-control {
+  color: #326b9b;
+  border-bottom: 0 solid #326b9b;
+  font-size: 0.8rem;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 2px 2px 0;
+  text-decoration: none;
 }
 
-.ui-button span {
+.additional-control:hover {
+  background-color: #c36;
+  border-color: #c36;
   color: #fff;
 }
 
-.ui-button:hover span {
-  color: #4b4b4b !important;
-}
-
-.ui-button:active span {
-  color: #4b4b4b;
-}
-
-.ui-button.cancel span {
-  color: #777;
-}
-
-.ui-button:hover span {
+.additional-control:active {
   color: #fff;
+  background-color: #aaa;
 }
 
-.ui-button:active span {
-  color: #fff;
+.additional-control.add:hover {
+  background-color: #3b9de8;
+  border-color: #3b9de8;
 }
 
-.ui-dialog button.cancel span {
-  color: #777 !important;
+.additional-control.add:active {
+  background-color: #54a6e5;
+  border-color: #54a6e5;
 }
 
 .unlim-trigger {
@@ -2688,7 +2461,7 @@ a.button.cancel {
 
 .login {
   font-size: 0.85rem;
-  padding: 80px 50px;
+  padding: 60px 50px;
   min-width: 320px;
   margin-bottom: 20%;
   background-color: rgb(255 255 255 / 70%);
@@ -2733,14 +2506,6 @@ a.button.cancel {
   color: #0077c6;
 }
 
-.login .form-control {
-  border-color: #5787c8;
-}
-
-.login .button {
-  font-size: 0.8rem !important;
-}
-
 .form-title {
   color: #4b4b4b;
   font-size: 1.4rem;
@@ -2763,7 +2528,7 @@ a.button.cancel {
   border-bottom: 1px solid #ccc;
 }
 
-.section-hide-button {
+.section-toggle-icon {
   font-size: 13.6px;
 }
 
@@ -3097,12 +2862,8 @@ form#vstobjects.suspended {
   text-shadow: 0 !important;
 }
 
-.noselect {
-  -webkit-touch-callout: none;
-  user-select: none;
-}
-
 .search-input {
+  color: inherit;
   background-color: #fff;
   border: 1px solid #ddd;
   height: 30px;
@@ -3139,11 +2900,6 @@ form#vstobjects.suspended {
   max-width: 140px;
 }
 
-.admin-warning-button {
-  padding-left: 65px !important;
-  padding-right: 65px !important;
-}
-
 .footer-banner {
   width: 100%;
   text-align: center;
@@ -3220,8 +2976,19 @@ form#vstobjects.suspended {
   padding-right: 0 !important;
 }
 
-.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
-  -background-color: #dfdedd;
+.ui-dialog .ui-dialog-buttonpane {
+  border-color: #fff;
+  box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
+  margin-top: 0;
+  padding: 0;
+}
+
+.ui-dialog .ui-dialog-buttonpane button {
+  margin: .5em .5em .5em 0;
+  box-shadow:
+    0 1px 4px rgb(0 0 0 / 20%),
+    inset 0 0 1px #fff,
+    inset 0 0 3px rgb(255 255 255 / 50%);
 }
 
 .shortcuts {
@@ -3404,23 +3171,6 @@ li[aria-expanded="true"] a {
   width: 384px;
 }
 
-.cron-helper-tabs .button {
-  width: auto;
-  background-color: #3b9de8;
-  border: 1px solid #3b9de8;
-  text-transform: capitalize;
-}
-
-.cron-helper-tabs .button:hover {
-  background-color: #5bd8cf;
-  border: 1px solid #5bd8cf;
-}
-
-.cron-helper-tabs .button:active {
-  background-color: #4fbcb4;
-  border: 1px solid #4fbcb4;
-}
-
 .context-helper-close {
   cursor: pointer;
   float: right;
@@ -3518,14 +3268,6 @@ li[aria-expanded="true"] a {
   box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
 }
 
-.ui-button.button-suspended {
-  color: #aaa !important;
-}
-
-.ui-button.button-suspended i {
-  color: #aaa !important;
-}
-
 @media screen and (max-width: 950px) {
   .helper-container {
     display: none;
@@ -3652,6 +3394,10 @@ li[aria-expanded="true"] a {
   float: right !important;
 }
 
+.u-noselect {
+  user-select: none !important;
+}
+
 .text-right {
   text-align: right !important;
 }
@@ -3688,6 +3434,10 @@ li[aria-expanded="true"] a {
   margin-left: 10px !important;
 }
 
+.u-mr5 {
+  margin-right: 5px !important;
+}
+
 .u-mr15 {
   margin-right: 15px !important;
 }
@@ -3708,6 +3458,10 @@ li[aria-expanded="true"] a {
   margin-bottom: 20px !important;
 }
 
+.u-mb40 {
+  margin-bottom: 40px !important;
+}
+
 .u-pt10 {
   padding-top: 10px !important;
 }
@@ -3728,6 +3482,10 @@ li[aria-expanded="true"] a {
   position: relative !important;
 }
 
+.u-width-full {
+  width: 100% !important;
+}
+
 .u-input-width {
   width: 400px !important;
 }

web/css/src/themes/flat.css

@@ -23,17 +23,6 @@ strong {
   background: #fafafa !important;
 }
 
-.to-top,
-.to-shortcuts,
-.to-top:hover,
-.to-shortcuts:hover,
-.to-top:active,
-.to-shortcuts:active {
-  box-shadow: none !important;
-  background: none !important;
-  background-color: #eee !important;
-}
-
 .l-header {
   box-shadow: none;
   background: #5070a6;
@@ -90,28 +79,61 @@ strong {
   box-shadow: none;
 }
 
-.ui-button,
-.button,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit,
-.vst-advanced {
+/* Buttons
+   ========================================================================== */
+
+.button {
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);
+}
+
+.button:hover {
+  color: #6986b7;
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
+}
+
+.button:active,
+.button:focus {
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
+}
+
+.button-secondary {
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(241 241 241 / 100%) 100%);
+}
+
+.button-danger:hover {
+  background: #fcd3cf;
+  color: #f4301a;
+  border-color: #f27e71;
+}
+
+.button-danger:active,
+.button-danger:focus {
+  background: #a91200;
+  color: #fff;
+  border-color: #f4301a;
+}
+
+.to-top,
+.to-shortcuts,
+.to-top:hover,
+.to-shortcuts:hover,
+.to-top:active,
+.to-shortcuts:active {
   box-shadow: none !important;
-  background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%) !important;
+  background: none !important;
+  background-color: #eee !important;
 }
 
-.ui-button.cancel,
-.button.cancel,
 .to-top,
 .to-shortcuts {
   box-shadow: none !important;
   background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(241 241 241 / 100%) 100%) !important;
 }
 
-.ui-button:hover,
-.button:hover,
-.ui-button.cancel:hover,
-.button.cancel:hover,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:hover,
-.vst-advanced:hover,
 .to-top:hover,
 .to-shortcuts:hover {
   color: #6986b7 !important;
@@ -119,40 +141,14 @@ strong {
   background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%) !important;
 }
 
-.ui-button:focus,
-.ui-button:active,
-.button:active,
-.button:focus,
-.ui-button.cancel:focus,
-.ui-button.cancel:active,
-.button.cancel:active,
-.button.cancel:focus,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:active,
-.vst-advanced:active,
 .to-top:focus,
 .to-shortcuts:focus {
   box-shadow: none !important;
   background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%) !important;
 }
 
-.ui-button.danger:hover,
-.button.danger:hover {
-  background: #fcd3cf !important;
-  color: #f4301a !important;
-  border: 1px solid #f27e71 !important;
-}
-
-.ui-button.danger:active,
-.button.danger:active,
-.ui-button.danger:focus,
-.button.danger:focus {
-  background: #a91200 !important;
-  color: #fff !important;
-  border: 1px solid #f4301a !important;
-}
-
 .ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
-  box-shadow: none !important;
+  box-shadow: none;
 }
 
 .ui-dialog {

web/css/src/themes/vestia.css

@@ -102,111 +102,81 @@ strong {
   border-bottom: 4px solid #ff6701;
 }
 
-.card a.ui-button {
-  line-height: 2rem !important;
-}
-
 .l-menu .fas {
   display: none !important;
 }
 
-.ui-dialog .ui-dialog-buttonpane button span.ui-button-text {
-  padding: 0 !important;
-  color: #fff !important;
-}
+/* Buttons
+   ========================================================================== */
 
-.ui-button-text,
-.ui-dialog button.cancel span {
-  color: #fff !important;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 40%) !important;
+.button {
+  border-color: transparent;
+  color: #fff;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
+  text-transform: uppercase;
+  font-weight: 600;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  background: #a0c105;
+  background-color: #a0c105;
+  border-radius: 2px;
+  box-shadow: none;
 }
 
-.ui-button-text:hover,
-.ui-dialog button.cancel span:hover {
-  color: #fff !important;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 30%) !important;
+.button .fas {
+  display: none;
 }
 
-.ui-button-text:focus,
-.ui-dialog button.cancel span:focus,
-.ui-button-text:actove,
-.ui-dialog button.cancel span:active {
-  color: #fff !important;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 20%) !important;
+.button:hover {
+  border-color: transparent;
+  color: #fff;
+  background: #a9cc06;
+  background-color: #a9cc06;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
+  transition: none;
+  box-shadow: none;
 }
 
-.ui-button,
-.button,
-.ui-button.cancel,
-.button.cancel,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit,
-.vst-advanced,
-.ui-dialog button.cancel,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:focus {
-  border: none !important;
-  color: #fff !important;
-  background: #a0c105 !important;
-  background-color: #a0c105 !important;
-  text-shadow: none !important;
-  padding: 6px 10px !important;
-  border-radius: 2px !important;
-  box-shadow: none !important;
-  font-size: 1em !important;
+.button:active,
+.button:focus {
+  border-color: transparent;
+  color: #fff;
+  background: #809c00;
+  background-color: #809c00;
+  text-shadow: 0 0 2px rgb(0 0 0 / 20%);
+  box-shadow: none;
 }
 
-.ui-button:hover,
-.button:hover,
-.ui-button.cancel:hover,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:hover,
-.vst-advanced:hover,
-.ui-dialog button.cancel:hover {
-  box-shadow: none !important;
-  border: none !important;
-  background: #a9cc06 !important;
-  background-color: #a9cc06 !important;
-  color: #fff !important;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 30%) !important;
-  transition: none !important;
+.button-secondary {
+  color: #414141;
+  text-shadow: none;
+  text-transform: none;
+  border-color: #bbb;
+  background: #fff;
 }
 
-.ui-button:active,
-.button:active,
-.ui-button.cancel:active,
-.ui-button.cancel:focus,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:active,
-.vst-advanced:active,
-.ui-dialog button.cancel:active,
-.ui-button:focus,
-.button:focus,
-.vst-advanced:focus,
-.ui-dialog button.cancel:focus {
-  border: none !important;
-  color: #fff !important;
-  background: #809c00 !important;
-  background-color: #809c00 !important;
-  text-shadow: 0 0 2px rgb(0 0 0 / 20%) !important;
-  box-shadow: none !important;
-  transition: none !important;
+.button-secondary:hover {
+  color: #326b9b;
+  text-shadow: none;
+  border-color: #bbb;
+  background: #f5f5f5;
 }
 
-.ui-button.danger:hover,
-.button.danger:hover {
-  background: none !important;
-  color: #f4301a !important;
-  border: none !important;
+.button-secondary:active,
+.button-secondary:focus {
+  color: #326b9b;
+  text-shadow: none;
+  border-color: #aaa;
+  background: #f5f5f5;
 }
 
-.ui-button.danger:active,
-.button.danger:active,
-.ui-button.danger:focus,
-.button.danger:focus {
-  background: none !important;
-  color: #a91200 !important;
-  border: none !important;
+.button-danger:hover {
+  color: #f4301a;
+  text-shadow: none;
 }
 
-.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
-  box-shadow: none !important;
+.ui-dialog .ui-dialog-buttonpane button {
+  box-shadow: none;
 }
 
 .ui-dialog {
@@ -350,27 +320,6 @@ strong {
   color: #a9cc06;
 }
 
-.ui-button:hover,
-.button:hover,
-.ui-button.cancel:hover,
-.button.cancel:hover,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:hover,
-.vst-advanced:hover {
-  border: none !important;
-  background: none !important;
-  background-color: #a9cc06 !important;
-  color: #fff !important;
-  box-shadow: none !important;
-}
-
-.ui-button,
-.button,
-.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit,
-.vst-advanced {
-  font-weight: 600 !important;
-  font-size: 1.05em !important;
-}
-
 .ui-widget,
 .ui-dialog,
 .ui-dialog .ui-dialog-title {
@@ -385,32 +334,27 @@ strong {
   color: #333;
 }
 
-.l-unit-toolbar__buttonstrip .ui-button {
-  border: none !important;
-  color: #fff !important;
-  background: #a0c105 !important;
-  padding: 6px 10px !important;
-  border-radius: 2px !important;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 40%) !important;
-  box-shadow: none;
+.l-unit-toolbar__buttonstrip .button {
+  border-color: transparent;
+  color: #fff;
   text-transform: uppercase;
-  font-size: 1em !important;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
+  margin-right: 15px;
+  background: #a0c105;
+  background-color: #a0c105;
 }
 
-.l-unit-toolbar__buttonstrip .ui-button:hover {
-  background: #a9cc06 !important;
-  color: #fff !important;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 30%) !important;
-  transition: none !important;
+.l-unit-toolbar__buttonstrip .button:hover {
+  border-color: transparent;
+  color: #fff;
+  background: #a9cc06;
+  background-color: #a9cc06;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
 }
 
-.l-unit-toolbar__buttonstrip .ui-button:focus,
-.l-unit-toolbar__buttonstrip .ui-button:active {
-  border: none !important;
-  color: #fff !important;
-  background: #809c00 !important;
-  text-shadow: 0 0 2px rgb(0 0 0 / 20%) !important;
-  box-shadow: none !important;
+.l-unit-toolbar__buttonstrip .button-danger:hover {
+  color: #f4301a;
+  text-shadow: none;
 }
 
 .l-sort-toolbar .sort-by {
@@ -510,14 +454,6 @@ strong {
   display: none !important;
 }
 
-.l-unit-toolbar__buttonstrip .fas {
-  display: none;
-}
-
-.l-unit-toolbar__buttonstrip a {
-  margin-right: 15px;
-}
-
 a#btn-back {
   color: #30659d !important;
   background: none !important;
@@ -542,43 +478,6 @@ a#btn-back:focus {
   text-transform: none !important;
 }
 
-a.ui-button:hover,
-a.ui-button:active,
-a.ui-button:focus {
-  background: none !Important;
-}
-
-a.vst-advanced {
-  text-transform: uppercase;
-  font-size: 0.9em !important;
-  letter-spacing: 0.08em;
-  text-decoration: underline;
-  background: none !important;
-  text-shadow: none !important;
-  color: #30659d !important;
-}
-
-a.vst-advanced:hover {
-  text-transform: uppercase;
-  font-size: 0.9em !important;
-  letter-spacing: 0.08em;
-  text-decoration: underline;
-  background: none !important;
-  text-shadow: none !important;
-  color: #3888dd !important;
-}
-
-a.vst-advanced:active,
-a.vst-advanced:focus {
-  text-transform: uppercase;
-  font-size: 0.9em !important;
-  letter-spacing: 0.08em;
-  text-decoration: underline;
-  background: none !important;
-  text-shadow: none !important;
-  color: #367ac1 !important;
-}
-
 .to-shortcuts,
 .to-top,
 .to-shortcuts:active,
@@ -618,39 +517,6 @@ a.vst-advanced:focus {
   border-radius: 0;
 }
 
-.login .button {
-  background: #94be00 !important;
-  text-shadow: none !important;
-  color: #fff !important;
-  border: none !important;
-  border-radius: 0 !important;
-}
-
-.body-login input.button.cancel,
-.body-login input.button.cancel:hover,
-.body-login input.button.cancel:active,
-.body-login input.button.cancel:focus,
-.body-reset input.button.cancel,
-.body-reset input.button.cancel:hover,
-.body-reset input.button.cancel:active,
-.body-reset input.button.cancel:focus {
-  background: none !important;
-  text-transform: none !important;
-  text-shadow: none !important;
-  border: none !important;
-}
-
-.body-login input.button.cancel,
-.body-reset input.button.cancel {
-  color: #414141 !important;
-  box-shadow: none !important;
-}
-
-.body-login input.button.cancel:hover,
-.body-reset input.button.cancel:hover {
-  color: #326b9b !important;
-}
-
 .l-logo {
   height: 24px !important;
   margin-top: 8px !important;
@@ -666,7 +532,7 @@ a.vst-advanced:focus {
 }
 
 .helper-container {
-  margin-top: 422px;
+  margin-top: 420px;
   border-radius: 0;
   box-shadow: none;
 }
@@ -684,10 +550,6 @@ li[aria-expanded="true"] a {
   color: #e95e00;
 }
 
-a.vst-advanced {
-  margin-left: -10px;
-}
-
 /* Collapse component
    ========================================================================== */
 

web/js/app.js

@@ -1066,7 +1066,7 @@ function elementHideShow(elementToHideOrShow,trigger){
     el.style.display = el.style.display === 'none' ? 'block' : 'none';
 
     if (typeof trigger !== 'undefined') {
-        trigger.querySelector('.section-hide-button').classList.toggle('fa-minus-square');
-        trigger.querySelector('.section-hide-button').classList.toggle('fa-plus-square');
+        trigger.querySelector('.section-toggle-icon').classList.toggle('fa-minus-square');
+        trigger.querySelector('.section-toggle-icon').classList.toggle('fa-plus-square');
     }
 }

web/js/events.js

@@ -141,13 +141,9 @@ VE.helpers.createConfirmationDialog = function(elm, dialog_title, confirmed_loca
             }
         },
         create:function () {
-            $(this).closest(".ui-dialog")
-                .find(".ui-button:first")
-                .addClass("submit");
-            $(this).closest(".ui-dialog")
-                .find(".ui-button")
-                .eq(1) // the first button
-                .addClass("cancel");
+            var buttonGroup = $(this).closest(".ui-dialog").find('.ui-dialog-buttonset');
+            buttonGroup.find('button:first').addClass('button submit')
+            buttonGroup.find('button:last').addClass('button button-secondary cancel');
         }
     }
 

web/js/init.js

@@ -12,10 +12,11 @@ $(document).ready(function(){
         $(this).next(".holder").text(selectedOption);
     }).trigger('change');
     $('.to-top').on('click', function(evt) {
+        evt.preventDefault();
         $("html, body").animate({ scrollTop: 0 }, "normal");
     });
 
-    $('.ui-button').on('click',function(evt){
+    $('.button').on('click',function(evt){
         var action = $(this).data('action');
         var id = $(this).data('id');
         if(action=='submit' && document.getElementById(id)){
@@ -160,7 +161,7 @@ $(document).ready(function(){
               );
 
               shortcut.add("Ctrl+Backspace", function(){
-                var redirect = $('a.ui-button#btn-back').attr('href')
+                var redirect = $('a.button#btn-back').attr('href')
                 if(VE.tmp.form_changed && redirect){
                   VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', redirect);
                 } else if($('form#vstobjects .button.cancel')[0]){
@@ -193,8 +194,8 @@ $(document).ready(function(){
                       evt.preventDefault();
                       if (!evt.ctrlKey && !evt.shiftKey) {
                           //if ($('.l-sort__create-btn')[0]) {
-                          if ($('.ui-button#btn-create').length) {
-                              location.href=$('.ui-button#btn-create').attr('href');
+                          if ($('.button#btn-create').length) {
+                              location.href=$('.button#btn-create').attr('href');
                           }
                       }
                       else {
@@ -629,15 +630,15 @@ $(document).ready(function(){
                 $('.l-unit.selected').find('.ch-toggle').prop('checked', true);
             });
             // todo: maybe give the save button id?
-            $(".ui-button[data-id=vstobjects][data-action=submit]").on('click', function(ev){
+            $(".button[data-id=vstobjects][data-action=submit]").on('click', function(ev){
               let loadingAnimationEle = document.createElement("div");
               loadingAnimationEle.innerHTML = '<div class="timer-container" style="float:right;"><div class="timer-button spinner"><div class="spinner-inner"></div><div class="spinner-mask"></div> <div class="spinner-mask-two"></div></div></div>';
               // improve alignment
               var buttonStrip = this.closest(".l-unit-toolbar__buttonstrip");
               buttonStrip.style.marginTop = "8px";
               // this both gives an indication that we've clicked and is loading, also prevents double-clicking/clicking-on-something-else while loading.
-              $(".ui-button[data-id=vstobjects][data-action=submit]").replaceWith(loadingAnimationEle);
-              $(".ui-button").replaceWith('');
+              $(".button[data-id=vstobjects][data-action=submit]").replaceWith(loadingAnimationEle);
+              $(".button").replaceWith('');
               // workaround a render bug on Safari (loading icon doesn't render without this)
               ev.preventDefault();
               $('#vstobjects').submit();

web/js/pages/add_cron.js

@@ -1,6 +1,6 @@
 $(document).ready(function(){
-    $( "#tabs" ).tabs();
-    $('.context-helper').click(function(){ $('#tabs').toggle(); $('.context-helper').toggle();  });
+    $('#tabs').tabs();
+    $('.context-helper').click(function(){ $('#tabs').toggle(); $('.context-helper').toggle(); });
     $('.context-helper-close').click(function(){ $('#tabs').toggle(); $('.context-helper').toggle(); });
 
     $('.helper-container form').submit(function(){
@@ -13,4 +13,3 @@ $(document).ready(function(){
         return false;
     });
 })
-

web/js/pages/edit_cron.js

@@ -1,6 +1,6 @@
 $(document).ready(function(){
-    $( "#tabs" ).tabs();
-    $('.context-helper').click(function(){ $('#tabs').toggle(); $('.context-helper').toggle();  });
+    $('#tabs').tabs();
+    $('.context-helper').click(function(){ $('#tabs').toggle(); $('.context-helper').toggle(); });
     $('.context-helper-close').click(function(){ $('#tabs').toggle(); $('.context-helper').toggle(); });
 
     $('.helper-container form').submit(function(){
@@ -13,4 +13,3 @@ $(document).ready(function(){
         return false;
     });
 })
-

web/js/pages/edit_web.js

@@ -151,14 +151,14 @@ App.Actions.WEB.remove_ftp_user = function(elm) {
     });
 
     if ($('.js-ftp-account-nrm:visible').length == 0) {
-        $('.add-new-ftp-user-button').hide();
+        $('.js-add-new-ftp-user-button').hide();
         $('input[name="v_ftp"]').prop('checked', false);
     }
 }
 
 App.Actions.WEB.toggle_additional_ftp_accounts = function(elm) {
     if ($(elm).prop('checked')) {
-        $('.js-ftp-account-nrm, .v-add-new-user, .add-new-ftp-user-button').show();
+        $('.js-ftp-account-nrm, .v-add-new-user, .js-add-new-ftp-user-button').show();
         $('.js-ftp-account-nrm').each(function(i, elm) {
             var login = $(elm).find('.v-ftp-user');
             if (login.val().trim() != '') {
@@ -167,7 +167,7 @@ App.Actions.WEB.toggle_additional_ftp_accounts = function(elm) {
         });
     }
     else {
-        $('.js-ftp-account-nrm, .v-add-new-user, .add-new-ftp-user-button').hide();
+        $('.js-ftp-account-nrm, .v-add-new-user, .js-add-new-ftp-user-button').hide();
         $('.js-ftp-account-nrm').each(function(i, elm) {
             var login = $(elm).find('.v-ftp-user');
             if (login.val().trim() != '') {

web/templates/includes/end_js.html

@@ -36,10 +36,9 @@
             }
           },
           create: function() {
-            $(this)
-            .closest('.ui-dialog')
-            .find('.ui-button:first')
-            .addClass('submit');
+            var buttonGroup = $(this).closest(".ui-dialog").find('.ui-dialog-buttonset');
+            buttonGroup.find('button:first').addClass('button submit')
+            buttonGroup.find('button:last').addClass('button button-secondary cancel');
           }
         });
       });

web/templates/includes/panel.html

@@ -12,7 +12,7 @@
     <a href="<?=htmlspecialchars($home_url)?>" class="l-logo" title="<?=_('Hestia Control Panel');?>"></a>
 
     <!-- Left Menu -->
-    <div class="l-menu clearfix noselect">
+    <div class="l-menu clearfix u-noselect">
       <!-- Records tab -->
       <div class="l-menu__item <?php if(in_array($TAB, ['WEB', 'DNS', 'MAIL', 'DB', 'BACKUP', 'CRON', 'PACKAGE', 'USER', 'LOG'])) echo 'l-menu__item--active' ?>"><a href="<?=htmlspecialchars($home_url)?>"><i class="fas fa-tasks panel-icon"></i><?=_('Records');?></a></div>
 
@@ -30,7 +30,7 @@
     </div>
 
     <!-- Right Menu -->
-    <div class="l-profile noselect">
+    <div class="l-profile u-noselect">
       <div class="l-menu__item">
         <!-- Logged in as / Usage Statistics Overview -->
         <span class="pill usage">

web/templates/pages/add_access_key.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
+      <a class="button button-secondary" id="btn-back" href="/list/access-key/">
         <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
       </a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects">
+      <a href="#" class="button" data-action="submit" data-id="vstobjects">
         <i class="fas fa-save status-icon purple"></i><?= _('Save'); ?>
       </a>
     </div>

web/templates/pages/add_cron.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/cron/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/cron/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -42,7 +42,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -71,7 +71,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -139,7 +139,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -210,7 +210,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -321,7 +321,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>

web/templates/pages/add_db.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/db/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/db/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -31,8 +31,8 @@
         <?php } ?>
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
-            <div><a href="/add/user/" class="button admin-warning-button"><?=_('Add User');?></a></div>
-            <div><a href="/add/db/?accept=true" class="button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <a href="/add/user/" class="button u-width-full u-mr5"><?=_('Add User');?></a>
+            <a href="/add/db/?accept=true" class="button button-danger u-width-full u-ml5"><?=_('Continue');?></a>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
@@ -87,7 +87,7 @@
             <input type="email" class="form-control" name="v_db_email" id="v_db_email" value="<?=htmlentities(trim($v_db_email, "'"))?>">
           </div>
           <div class="u-mb20">
-            <a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
+            <a href="javascript:elementHideShow('advanced-opts');" class="button button-secondary"><?=_('Advanced options');?></a>
           </div>
           <div id="advanced-opts" style="display: none;">
             <div class="u-mb10">

web/templates/pages/add_dns.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/dns/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/dns/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -31,8 +31,8 @@
         <?php } ?>
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
-            <div><a href="/add/user/" class="button admin-warning-button"><?=_('Add User');?></a></div>
-            <div><a href="/add/dns/?accept=true" class="button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <a href="/add/user/" class="button u-width-full u-mr5"><?=_('Add User');?></a>
+            <a href="/add/dns/?accept=true" class="button button-danger u-width-full u-ml5"><?=_('Continue');?></a>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
@@ -75,7 +75,7 @@
             </div>
           <?php } ?>
           <div class="u-mb20 u-mt20">
-            <a href="javascript:elementHideShow('advtable');" class="vst-advanced"><?=_('Advanced options');?></a>
+            <a href="javascript:elementHideShow('advtable');" class="button button-secondary"><?=_('Advanced options');?></a>
           </div>
           <div id="advtable" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
             <div class="form-check u-mb10">

web/templates/pages/add_dns_rec.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/dns/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/dns/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/add_firewall.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/add_firewall_banlist.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/banlist/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/firewall/banlist/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/add_firewall_ipset.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/ipset/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/firewall/ipset/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/add_ip.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/ip/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/ip/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/add_key.html

@@ -1,15 +1,15 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
-        <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/?user=<?=htmlentities($_GET['user']);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+        <a class="button button-secondary" id="btn-back" href="/list/key/?user=<?=htmlentities($_GET['user']);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php } else { ?>
-        <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/key/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+        <a class="button button-secondary" id="btn-back" href="/list/key/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php } ?>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/add_mail.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -31,8 +31,8 @@
         <?php } ?>
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
-            <div><a href="/add/user/" class="button admin-warning-button"><?=_('Add User');?></a></div>
-            <div><a href="/add/mail/?accept=true" class="button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <a href="/add/user/" class="button u-width-full u-mr5"><?=_('Add User');?></a>
+            <a href="/add/mail/?accept=true" class="button button-danger u-width-full u-ml5"><?=_('Continue');?></a>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>

web/templates/pages/add_mail_acc.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -50,7 +50,7 @@
             <li><?=_('1 number');?></li>
           </ul>
           <div class="u-pt18 u-mb20">
-            <a href="javascript:elementHideShow('advtable');" class="vst-advanced"><?=_('Advanced options');?></a>
+            <a href="javascript:elementHideShow('advtable');" class="button button-secondary"><?=_('Advanced options');?></a>
           </div>
           <div id="advtable" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
             <div class="u-mb10">

web/templates/pages/add_package.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/package/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/package/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -51,7 +51,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('web-options',this)">
           <?=_('Web');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="web-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -126,7 +126,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('dns-options',this)">
           <?=_('DNS');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="dns-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -214,7 +214,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('mail-options',this)">
           <?=_('Mail');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="mail-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -242,7 +242,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('database-options',this)">
           <?=_('Databases');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="database-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -255,7 +255,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('system-options',this)">
           <?=_('System');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="system-options" style="display: none;">
           <div class="u-mt15 u-mb10">

web/templates/pages/add_user.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/add_web.html

@@ -1,12 +1,12 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
       <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
-        <a href="#" class="ui-button" title="<?=_('Save');?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+        <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
       <?php } ?>
     </div>
   </div>
@@ -33,8 +33,8 @@
         <?php } ?>
         <?php if (($user_plain == 'admin') && (empty($_GET['accept']))) {?>
           <div class="u-side-by-side u-pt18">
-            <div><a href="/add/user/" class="button admin-warning-button"><?=_('Add User');?></a></div>
-            <div><a href="/add/web/?accept=true" class="button danger admin-warning-button"><?=_('Continue');?></a></div>
+            <a href="/add/user/" class="button u-width-full u-mr5"><?=_('Add User');?></a>
+            <a href="/add/web/?accept=true" class="button button-danger u-width-full u-ml5"><?=_('Continue');?></a>
           </div>
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>

web/templates/pages/edit_backup_exclusions.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/backup/exclusions/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/backup/exclusions/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_cron.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/cron/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/cron/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -42,7 +42,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -71,7 +71,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -139,7 +139,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -210,7 +210,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>
@@ -321,7 +321,7 @@
             </select>
           </div>
           <div class="u-pt10">
-            <input type="submit" value="<?=_('generate');?>" class="button">
+            <input type="submit" value="<?=_('generate');?>" class="button button-secondary">
           </div>
         </form>
       </div>

web/templates/pages/edit_db.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/db/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/db/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_dns.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/dns/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/dns/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_dns_rec.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/dns/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/dns/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_firewall.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_ip.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/ip/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/ip/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_mail.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_mail_acc.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/mail/?domain=<?=htmlentities(trim($v_domain, "'"))?>&token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_package.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/package/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/package/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -52,7 +52,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('web-options',this)">
           <?=_('Web');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="web-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -126,7 +126,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('dns-options',this)">
           <?=_('DNS');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="dns-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -217,7 +217,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('mail-options',this)">
           <?=_('Mail');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="mail-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -245,7 +245,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('database-options',this)">
           <?=_('Databases');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="database-options" style="display: none;">
           <div class="u-mt15 u-mb10">
@@ -258,7 +258,7 @@
         </div>
         <h2 class="section-title" onclick="javascript:elementHideShow('system-options',this)">
           <?=_('System');?>
-          <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+          <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
         </h2>
         <div id="system-options" style="display: none;">
           <div class="u-mt15 u-mb10">

web/templates/pages/edit_server.html

@@ -1,15 +1,15 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/list/ip/" class="ui-button cancel" dir="ltr"><i class="fas fa-ethernet status-icon blue"></i><?=_('IP');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/list/ip/" class="button button-secondary"><i class="fas fa-ethernet status-icon blue"></i><?=_('IP');?></a>
       <?php if ((isset($_SESSION['FIREWALL_SYSTEM'])) && (!empty($_SESSION['FIREWALL_SYSTEM']))) {?>
-        <a href="/list/firewall/" class="ui-button cancel" dir="ltr"><i class="fas fa-shield-alt status-icon red"></i><?=_('Firewall');?></a>
+        <a href="/list/firewall/" class="button button-secondary"><i class="fas fa-shield-alt status-icon red"></i><?=_('Firewall');?></a>
       <?php }?>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -622,7 +622,7 @@
             <div class="u-input-width">
               <h3 class="section-title" onclick="javascript:elementHideShow('security-system-table',this);">
                 <?=_('System');?>
-                <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+                <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
               </h3>
               <div id="security-system-table" style="display: none;">
                 <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">
@@ -690,7 +690,7 @@
               <?php if (($_SESSION['userContext'] === "admin") && ($_SESSION['user'] === 'admin')) {?>
                 <h3 class="section-title" onclick="javascript:elementHideShow('security-sysadminprotect-table',this);">
                   <?=_('System Protection');?>
-                  <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+                  <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
                 </h3>
                 <div id="security-sysadminprotect-table" style="display: none;">
                   <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">
@@ -721,7 +721,7 @@
               <?php } ?>
               <h3 class="section-title" onclick="javascript:elementHideShow('security-policies-table',this);">
                 <?=_('Policies');?>
-                <i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
+                <i class="fas fa-plus-square status-icon dim maroon section-toggle-icon"></i>
               </h3>
               <div id="security-policies-table" style="display: none;">
                 <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">

web/templates/pages/edit_server_bind9.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_server_dovecot.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_server_httpd.html

@@ -1,12 +1,12 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/edit/server/php/" class="ui-button cancel" dir="ltr"><i class="fas fa-pencil-alt status-icon orange"></i><?=_('Configure');?> PHP</a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/edit/server/php/" class="button button-secondary"><i class="fas fa-pencil-alt status-icon orange"></i><?=_('Configure');?> PHP</a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_server_mysql.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -44,12 +44,12 @@
           <input type="text" class="form-control" regexp="max_allowed_packet" prev_value="<?=htmlentities($v_max_allowed_packet)?>" name="v_display_errors" id="v_display_errors" value="<?=htmlentities($v_max_allowed_packet)?>">
         </div>
         <div class="u-mb20">
-          <a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Advanced options');?></a>
+          <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Advanced options');?></a>
         </div>
       </div>
       <div id="advanced-options" class="u-wide-input-width" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
         <div class="u-mb20">
-          <a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Basic options');?></a>
+          <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Basic options');?></a>
         </div>
         <div class="u-mb20">
           <label for="v_config" class="form-label"><?=$v_config_path;?></label>

web/templates/pages/edit_server_nginx.html

@@ -1,12 +1,12 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/edit/server/php/" class="ui-button cancel" dir="ltr"><i class="fas fa-pencil-alt status-icon orange"></i> <?=_('Configure');?> PHP</a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/edit/server/php/" class="button button-secondary"><i class="fas fa-pencil-alt status-icon orange"></i> <?=_('Configure');?> PHP</a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -65,12 +65,12 @@
           <input type="text" class="form-control" regexp="charset" prev_value="<?=htmlentities($v_charset)?>" name="v_charset" id="v_charset" value="<?=htmlentities($v_charset)?>">
         </div>
         <div class="u-mb20">
-          <a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Advanced options');?></a>
+          <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Advanced options');?></a>
         </div>
       </div>
       <div id="advanced-options" class="u-wide-input-width" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
         <div class="u-mb20">
-          <a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Basic options');?></a>
+          <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Basic options');?></a>
         </div>
         <div class="u-mb20">
           <label for="v_config" class="form-label"><?=$v_config_path;?></label>

web/templates/pages/edit_server_pgsql.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_server_php.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -52,12 +52,12 @@
           <input type="text" class="form-control" regexp="upload_max_filesize" prev_value="<?=htmlentities($v_upload_max_filesize)?>" name="v_upload_max_filesize" id="v_upload_max_filesize" value="<?=htmlentities($v_upload_max_filesize)?>">
         </div>
         <div class="u-mb20">
-          <a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Advanced options');?></a>
+          <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Advanced options');?></a>
         </div>
       </div>
       <div id="advanced-options" class="u-wide-input-width" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
         <div class="u-mb20">
-          <a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Basic options');?></a>
+          <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Basic options');?></a>
         </div>
         <div class="u-mb20">
           <label for="v_config" class="form-label"><?=$v_config_path;?></label>

web/templates/pages/edit_server_service.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>

web/templates/pages/edit_user.html

@@ -1,8 +1,8 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php
         if (($_SESSION['userContext'] === 'admin') && (!isset($_SESSION['look'])) && ($_SESSION['user'] !== $v_username)) {
           $ssh_key_url = "/list/key/?user=".htmlentities($user_plain)."&token=".$_SESSION['token']."";
@@ -14,31 +14,31 @@
           $keys_url = "/list/access-key/";
         }
       ?>
-      <a href="<?=$ssh_key_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Manage SSH keys');?>"><i class="fas fa-key status-icon orange"></i><?=_('Manage SSH keys');?></a>
+      <a href="<?=$ssh_key_url; ?>" class="button button-secondary" id="btn-create" title="<?=_('Manage SSH keys');?>"><i class="fas fa-key status-icon orange"></i><?=_('Manage SSH keys');?></a>
       <?php if (($_SESSION['userContext'] == 'admin') || ($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_VIEW_LOGS'] !== 'no')) {?>
-        <a href="<?=$log_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Logs');?>"><i class="fas fa-history status-icon maroon"></i><?=_('Logs');?></a>
+        <a href="<?=$log_url; ?>" class="button button-secondary" id="btn-create" title="<?=_('Logs');?>"><i class="fas fa-history status-icon maroon"></i><?=_('Logs');?></a>
       <?php } ?>
       <?php
         $api_status = (!empty($_SESSION['API_SYSTEM']) && is_numeric($_SESSION['API_SYSTEM'])) ? $_SESSION['API_SYSTEM'] : 0;
         if (($user_plain == 'admin' && $api_status > 0) || ($user_plain != 'admin' && $api_status > 1)) { ?>
-        <a href="<?=$keys_url; ?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('Access Keys');?>"><i class="fas fa-key status-icon purple"></i><?=_('Access Keys');?></a>
+        <a href="<?=$keys_url; ?>" class="button button-secondary" id="btn-create" title="<?=_('Access Keys');?>"><i class="fas fa-key status-icon purple"></i><?=_('Access Keys');?></a>
       <?php } ?>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
       <?php if (($_SESSION['user'] == $v_username) || (isset($_SESSION['look']))) {?>
         <!-- Do not show delete button for currently logged in user-->
       <?} else {?>
-        <a href="/login/?loginas=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>" id="btn-create" class="ui-button cancel" dir="ltr" title="<?=_('login as');?>"><i class="fas fa-sign-in-alt status-icon maroon"></i><?=_('login as');?></a>
-          <a class="data-controls do_delete ui-button danger cancel">
-            <i class="do_delete fas fa-times-circle status-icon red"></i>
-            <?=_('Delete');?>
-            <input type="hidden" name="delete_url" value="/delete/user/?user=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>">
-            <div class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-              <p><?=sprintf(_('DELETE_USER_CONFIRMATION'),htmlentities($v_username))?></p>
-            </div>
-          </a>
+        <a href="/login/?loginas=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>" class="button button-secondary" id="btn-create" title="<?=_('login as');?>"><i class="fas fa-sign-in-alt status-icon maroon"></i><?=_('login as');?></a>
+        <a class="data-controls do_delete button button-secondary button-danger">
+          <i class="do_delete fas fa-times-circle status-icon red"></i>
+          <?=_('Delete');?>
+          <input type="hidden" name="delete_url" value="/delete/user/?user=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>">
+          <div class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
+            <p><?=sprintf(_('DELETE_USER_CONFIRMATION'),htmlentities($v_username))?></p>
+          </div>
+        </a>
       <?php } ?>
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -199,7 +199,7 @@
             </select>
           </div>
           <div class="u-mb20">
-            <a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
+            <a href="javascript:elementHideShow('advanced-opts');" class="button button-secondary"><?=_('Advanced options');?></a>
           </div>
           <div id="advanced-opts" style="display: none;">
             <div class="u-mb10">

web/templates/pages/edit_web.html

@@ -1,19 +1,19 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/web/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="/delete/web/cache/?domain=<?=htmlentities($v_domain);?>&token=<?=$_SESSION['token'];?>" class="ui-button cancel <?php if ( $v_nginx_cache == 'yes' || (($v_proxy_template == 'caching' || is_int(strpos($v_proxy_template, 'caching-'))) && $_SESSION['PROXY_SYSTEM'] == 'nginx')) { echo "block"; } else{ echo "u-hidden"; }?>" id="v-clear-cache">
+      <a href="/delete/web/cache/?domain=<?=htmlentities($v_domain);?>&token=<?=$_SESSION['token'];?>" class="button button-secondary <?php if ( $v_nginx_cache == 'yes' || (($v_proxy_template == 'caching' || is_int(strpos($v_proxy_template, 'caching-'))) && $_SESSION['PROXY_SYSTEM'] == 'nginx')) { echo "block"; } else{ echo "u-hidden"; }?>" id="v-clear-cache">
         <i class="fas fa-trash status-icon red"></i><?=_('Purge Nginx Cache');?>
       </a>
       <?php if ($_SESSION['PLUGIN_APP_INSTALLER'] !== 'false') {?>
-        <a href="/add/webapp/?domain=<?=htmlentities($v_domain);?>" class="ui-button cancel" dir="ltr">
+        <a href="/add/webapp/?domain=<?=htmlentities($v_domain);?>" class="button button-secondary">
           <i class="fas fa-magic status-icon blue"></i> <?=_('Quick Install App');?>
         </a>
       <?php } ?>
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i><?=_('Save');?></a>
     </div>
   </div>
 </div>
@@ -256,7 +256,7 @@
           <? } // if ssl is enabled ?>
         </div>
         <div class="u-mt15 u-mb20">
-          <a href="javascript:elementHideShow('advanced-opts');" class="vst-advanced"><?=_('Advanced options');?></a>
+          <a href="javascript:elementHideShow('advanced-opts');" class="button button-secondary"><?=_('Advanced options');?></a>
         </div>
         <div id="advanced-opts" style="display: none;">
           <?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_WEB_TEMPLATES'] === 'yes')) { ?>
@@ -398,7 +398,7 @@
               ?>
               <div class="js-ftp-account js-ftp-account-nrm" name="v_add_domain_ftp" style="display:<?php if (empty($v_ftp_user)) { echo 'none';} else {echo 'block';}?> ;">
                 <div class="u-mb10">
-                  <?=_('FTP');?> #<span class="ftp-user-number"><?=$i + 1; ?></span> <a class="ftp-remove-user additional-control" onclick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
+                  <?=_('FTP');?> #<span class="ftp-user-number"><?=$i + 1; ?></span> <a class="additional-control delete" onclick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
                   <input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[<?=$i ?>][delete]" value="0">
                   <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[<?=$i ?>][is_new]" value="<?=htmlentities($ftp_user['is_new']) ?>">
                 </div>
@@ -435,9 +435,9 @@
               <?php endforeach; ?>
             </div>
 
-            <div class="add-new-ftp-user-button" style="<?=!empty($v_ftp_user) ? '' : 'display:none;' ?>">
-              <div class="u-pt18 v-add-new-user step-bottom">
-                <a class="additional-control vst-advanced" onclick="App.Actions.WEB.add_ftp_user_form()"><?=_('Add one more FTP Account');?></a>
+            <div class="js-add-new-ftp-user-button" style="<?=!empty($v_ftp_user) ? '' : 'display:none;' ?>">
+              <div class="u-pt18 v-add-new-user">
+                <a class="additional-control add" onclick="App.Actions.WEB.add_ftp_user_form()"><?=_('Add one more FTP Account');?></a>
               </div>
             </div>
           <?php } ?>
@@ -452,7 +452,7 @@
 <div id="templates" class="u-hidden">
   <div class="js-ftp-account js-ftp-account-nrm" name="v_add_domain_ftp">
     <div class="u-mb10">
-      <?=_('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control" onclick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
+      <?=_('FTP') ?> #<span class="ftp-user-number"></span> <a class="additional-control delete" onclick="App.Actions.WEB.remove_ftp_user(this)"><?=_('delete');?></a>
       <input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[%INDEX%][delete]" value="0">
       <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[%INDEX%][is_new]" value="1">
     </div>

web/templates/pages/generate_ssl.html

@@ -1,5 +1,5 @@
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-sort-toolbar clearfix u-float-left">
       <?php show_alert_message($_SESSION);?>
     </div>
@@ -59,7 +59,7 @@
         </div>
         <div class="u-side-by-side">
           <div><input type="submit" class="button" name="generate" value="<?=_('Ok');?>"></div>
-          <div><input type="button" class="button cancel" value="<?=_('Back');?>" onclick="<?=$back?>"></div>
+          <div><input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="<?=$back?>"></div>
         </div>
       </div>
     </div>

web/templates/pages/list_access_key.html

@@ -11,9 +11,9 @@ if (!empty($_POST['ok'])) {
 
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
+      <a class="button button-secondary" id="btn-back" href="/list/access-key/">
         <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
       </a>
     </div>

web/templates/pages/list_access_keys.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/edit/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/add/access-key/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Access Key');?></a>
+      <a class="button button-secondary" id="btn-back" href="/edit/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/add/access-key/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Access Key');?></a>
     </div>
 
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
@@ -80,7 +80,7 @@
 
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left compact text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
                 <a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">

web/templates/pages/list_backup.html

@@ -1,10 +1,10 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if ($read_only !== 'true') {?>
-        <a href="/schedule/backup/?token=<?=$_SESSION['token']?>" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Create Backup');?></a>
-        <a href="/list/backup/exclusions/" class="ui-button cancel" dir="ltr"><i class="fas fa-folder-minus status-icon orange"></i><?=_('backup exclusions');?></a>
+        <a href="/schedule/backup/?token=<?=$_SESSION['token']?>" class="button button-secondary"><i class="fas fa-plus-circle status-icon green"></i><?=_('Create Backup');?></a>
+        <a href="/list/backup/exclusions/" class="button button-secondary"><i class="fas fa-folder-minus status-icon orange"></i><?=_('backup exclusions');?></a>
       <?php } ?>
     </div>
     <div class="l-sort-toolbar clearfix">
@@ -92,7 +92,7 @@
           </div>
           <!-- START QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-            <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+            <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
               <div class="actions-panel clearfix">
                 <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['look'] === 'admin') && ($read_only === 'true')) {?>
                   <!-- Restrict ability to restore or delete backups when impersonating 'admin' account -->

web/templates/pages/list_backup_detail.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/backup/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/schedule/restore/?token=<?=$_SESSION['token']?>&backup=<?=htmlentities($_GET['backup'])?>" class="ui-button cancel" dir="ltr"><i class="fas fa-undo status-icon green"></i><?=_('Restore All');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/backup/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/schedule/restore/?token=<?=$_SESSION['token']?>&backup=<?=htmlentities($_GET['backup'])?>" class="button button-secondary"><i class="fas fa-undo status-icon green"></i><?=_('Restore All');?></a>
     </div>
     <div class="l-sort-toolbar clearfix">
       <table>
@@ -71,7 +71,7 @@
           <div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?=$key?></b></div>
         </div>
         <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__list shortcut-enter" key-action="href">
                 <a href="/schedule/restore/?backup=<?=$backup?>&type=web&object=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Restore');?>">
@@ -103,7 +103,7 @@
           <div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?=$key?></b></div>
         </div>
         <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__list shortcut-enter" key-action="href">
                 <a href="/schedule/restore/?backup=<?=$backup?>&type=mail&object=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Restore');?>">
@@ -135,7 +135,7 @@
           <div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?=$key?></b></div>
         </div>
         <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__list shortcut-enter" key-action="href">
                 <a href="/schedule/restore/?backup=<?=$backup?>&type=dns&object=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Restore');?>">
@@ -167,7 +167,7 @@
           <div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?=$key?></b></div>
         </div>
         <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__list shortcut-enter" key-action="href">
                 <a href="/schedule/restore/?backup=<?=$backup?>&type=db&object=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Restore');?>">
@@ -198,7 +198,7 @@
           <div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?='cron '._('records');?></b></div>
         </div>
         <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__list shortcut-enter" key-action="href">
                 <a href="/schedule/restore/?backup=<?=$backup?>&type=cron&object=records&token=<?=$_SESSION['token']?>" title="<?=_('Restore');?>">
@@ -230,7 +230,7 @@
           <div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?=$key?></b></div>
         </div>
         <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__list shortcut-enter" key-action="href">
                 <a href="/schedule/restore/?backup=<?=$backup?>&type=udir&object=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Restore');?>">

web/templates/pages/list_backup_exclusions.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/backup/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/edit/backup/exclusions/" class="ui-button cancel" dir="ltr"><i class="fas fa-pencil-alt status-icon orange"></i><?=_('Editing Backup Exclusions');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/backup/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/edit/backup/exclusions/" class="button button-secondary"><i class="fas fa-pencil-alt status-icon orange"></i><?=_('Editing Backup Exclusions');?></a>
     </div>
     <div class="l-sort-toolbar clearfix">
       <table>

web/templates/pages/list_cron.html

@@ -1,13 +1,13 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if ($read_only !== 'true') {?>
-        <a href="/add/cron/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Cron Job');?></a>
+        <a href="/add/cron/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Cron Job');?></a>
         <?php if($panel[$user_plain]['CRON_REPORTS'] == 'yes') { ?>
-          <a class="ui-button cancel" dir="ltr" href="/delete/cron/reports/?token=<?=$_SESSION['token'];?>"><i class="fas fa-toggle-off status-icon green"></i><?=_('turn off notifications');?></a>
+          <a class="button button-secondary" href="/delete/cron/reports/?token=<?=$_SESSION['token'];?>"><i class="fas fa-toggle-off status-icon green"></i><?=_('turn off notifications');?></a>
         <?php } else { ?>
-          <a class="ui-button cancel" dir="ltr" href="/add/cron/reports/?token=<?=$_SESSION['token'];?>"><i class="fas fa-toggle-off status-icon grey"></i><?=_('turn on notifications');?></a>
+          <a class="button button-secondary" href="/add/cron/reports/?token=<?=$_SESSION['token'];?>"><i class="fas fa-toggle-off status-icon grey"></i><?=_('turn on notifications');?></a>
         <?php } ?>
       <?php } ?>
     </div>
@@ -107,7 +107,7 @@
         </div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left compact-2 text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <?php if ($read_only === 'true') {?>
                 <!-- Restrict other administrators from editing, deleting, or suspending 'admin' user cron jobs -->

web/templates/pages/list_db.html

@@ -13,15 +13,15 @@
 
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if ($read_only !== 'true') {?>
-        <a href="/add/db/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Database');?></a>
+        <a href="/add/db/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Database');?></a>
         <?php if (($_SESSION['DB_SYSTEM'] === 'mysql') || ($_SESSION['DB_SYSTEM'] === 'mysql,pgsql') || ($_SESSION['DB_SYSTEM'] === 'pgsql,mysql')) {?>
-          <a class="ui-button cancel <?=(ipUsed() ? 'button-suspended':'');?>" dir="ltr" href="<?=$db_myadmin_link; ?>" target="_blank"><i class="fas fa-database status-icon orange"></i>phpMyAdmin</a>
+          <a class="button button-secondary <?=(ipUsed() ? 'button-suspended':'');?>" href="<?=$db_myadmin_link; ?>" target="_blank"><i class="fas fa-database status-icon orange"></i>phpMyAdmin</a>
         <?php } ?>
         <?php if (($_SESSION['DB_SYSTEM'] === 'pgsql') || ($_SESSION['DB_SYSTEM'] === 'mysql,pgsql') || ($_SESSION['DB_SYSTEM'] === 'pgsql,mysql')) {?>
-          <a class="ui-button cancel <?=(ipUsed() ? 'button-suspended':'');?>" dir="ltr" href="<?=$db_pgadmin_link; ?>" target="_blank"><i class="fas fa-database status-icon orange"></i>phpPgAdmin</a>
+          <a class="button button-secondary <?=(ipUsed() ? 'button-suspended':'');?>" href="<?=$db_pgadmin_link; ?>" target="_blank"><i class="fas fa-database status-icon orange"></i>phpPgAdmin</a>
         <?php } ?>
         <?php if(ipUsed()){
         ?>
@@ -141,7 +141,7 @@
           </div>
           <!-- START QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left text-right compact-3">
-            <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+            <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
               <div class="actions-panel clearfix">
                 <?php if ($read_only === 'true') {?>
                   <!-- Restrict the ability to edit, delete, or suspend domain items when impersonating 'admin' user -->

web/templates/pages/list_dns.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if ($read_only !== 'true') {?>
-        <a href="/add/dns/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add DNS Domain');?></a>
+        <a href="/add/dns/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add DNS Domain');?></a>
       <?php } ?>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display: none;">
@@ -111,7 +111,7 @@
         </div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <?php if ($read_only === 'true') {?>
                 <!-- Restrict administrators from editing domain items when impersonating the 'admin' user -->

web/templates/pages/list_dns_public.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if ($read_only !== 'true') {?>
-        <a href="/add/dns/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add DNS Domain');?></a>
+        <a href="/add/dns/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add DNS Domain');?></a>
       <?php } ?>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display: none;">

web/templates/pages/list_dns_rec.html

@@ -1,11 +1,11 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/dns/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/dns/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php if ($read_only !== 'true') {?>
-        <a href="/add/dns/?domain=<?=htmlentities($_GET['domain'])?>" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i> <?=_('Add Record');?></a>
-        <a href="/edit/dns/?domain=<?=htmlentities($_GET['domain'])?>" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-pencil-alt status-icon blue"></i> <?=_('Editing DNS Domain');?></a>
+        <a href="/add/dns/?domain=<?=htmlentities($_GET['domain'])?>" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i> <?=_('Add Record');?></a>
+        <a href="/edit/dns/?domain=<?=htmlentities($_GET['domain'])?>" class="button button-secondary" id="btn-create"><i class="fas fa-pencil-alt status-icon blue"></i> <?=_('Editing DNS Domain');?></a>
       <?php } ?>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
@@ -108,7 +108,7 @@
         </div>
       <!-- START QUICK ACTION TOOLBAR AREA -->
       <div class="clearfix l-unit__stat-col--left super-compact text-right">
-        <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+        <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
           <div class="actions-panel clearfix">
             <?php if ($read_only === 'true') {?>
               <!-- Restrict editing of DNS records when impersonating 'admin' account -->

web/templates/pages/list_firewall.html

@@ -1,12 +1,12 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/edit/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/add/firewall/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Rule');?></a>
+      <a class="button button-secondary" id="btn-back" href="/edit/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/add/firewall/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Rule');?></a>
       <?php if(!empty($_SESSION['FIREWALL_EXTENSION'])): ?>
-        <a class="ui-button cancel" dir="ltr" href="/list/firewall/banlist/"><i class="fas fa-eye status-icon red"></i><?=_('list fail2ban');?></a>
-        <a class="ui-button cancel" dir="ltr" href="/list/firewall/ipset/"><i class="fas fa-list status-icon blue"></i><?=_('list ipset');?></a>
+        <a class="button button-secondary" href="/list/firewall/banlist/"><i class="fas fa-eye status-icon red"></i><?=_('list fail2ban');?></a>
+        <a class="button button-secondary" href="/list/firewall/ipset/"><i class="fas fa-list status-icon blue"></i><?=_('list ipset');?></a>
       <?php endif; ?>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
@@ -103,7 +103,7 @@
           </div>
           <!-- START QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left compact-2 text-right">
-            <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+            <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
               <div class="actions-panel clearfix" style="padding-right: 10px;">
                 <div class="actions-panel__col actions-panel__logs shortcut-enter" key-action="href"><a href="/edit/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Firewall Rule');?>"><i class="fas fa-pencil-alt status-icon orange status-icon dim"></i></a></div>
                 <div class="actions-panel__col actions-panel__suspend shortcut-s" key-action="js">

web/templates/pages/list_firewall_banlist.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/add/firewall/banlist/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Ban IP Address');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/add/firewall/banlist/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Ban IP Address');?></a>
     </div>
     <div class="l-sort-toolbar clearfix">
       <table>
@@ -57,7 +57,7 @@
         <div class="clearfix l-unit__stat-col--left wide-3"><b><?=$ip?></b></div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left compact-4">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
                 <a id="delete_link_<?=$i?>" class="data-controls do_delete">

web/templates/pages/list_firewall_ipset.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/add/firewall/ipset/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add IP list');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/add/firewall/ipset/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add IP list');?></a>
     </div>
     <div class="l-sort-toolbar clearfix">
       <table>
@@ -57,7 +57,7 @@
         <div class="clearfix l-unit__stat-col--left wide-3"><b><?=$listname?></b></div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left compact-4">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
                 <a id="delete_link_<?=$i?>" class="data-controls do_delete">

web/templates/pages/list_ip.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/edit/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/add/ip/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add IP');?></a>
+      <a class="button button-secondary" id="btn-back" href="/edit/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/add/ip/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add IP');?></a>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
       <li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-sort-alpha-down"></i></span><span class="up"><i class="fas fa-sort-alpha-up"></i></span></li>
@@ -77,7 +77,7 @@
         </div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left compact text-right">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__logs shortcut-enter" key-action="href"><a href="/edit/ip/?ip=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing IP Address');?>"><i class="fas fa-pencil-alt status-icon orange status-icon dim"></i></a></div>
               <div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">

web/templates/pages/list_key.html

@@ -1,12 +1,12 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/edit/user/?token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/edit/user/?token=<?=$_SESSION['token']?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
             <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
-            <a href="/add/key/?user=<?=htmlentities($_GET['user']);?>" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add SSH Key');?></a>
+            <a href="/add/key/?user=<?=htmlentities($_GET['user']);?>" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add SSH Key');?></a>
             <?php } else { ?>
-      <a href="/add/key/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add SSH Key');?></a>
+      <a href="/add/key/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add SSH Key');?></a>
             <?php } ?>
     </div>
   </div>
@@ -36,7 +36,7 @@
       <div class="l-unit__col l-unit__col--right">
         <div class="clearfix l-unit__stat-col--left wide-3"><b><?=htmlspecialchars($data[$key]['ID']);?></b></div>
         <div class="clearfix l-unit__stat-col--left text-left compact-2">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
                 <a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">

web/templates/pages/list_log.html

@@ -1,41 +1,41 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['look'] === 'admin')) {?>
-        <a href="/list/user/" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+        <a href="/list/user/" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php } else if (($_SESSION['userContext'] === 'admin') && (htmlentities($_GET['user']) === 'system')) { ?>
-        <a href="/list/server/" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+        <a href="/list/server/" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php } else { ?>
         <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && ($_GET['user'] !== 'admin')) { ?>
-          <a href="/edit/user/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+          <a href="/edit/user/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
         <?php } else { ?>
-          <a href="/edit/user/?token=<?=$_SESSION['token']?>" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+          <a href="/edit/user/?token=<?=$_SESSION['token']?>" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
         <?php } ?>
       <?php } ?>
       <?php if ($_SESSION['DEMO_MODE'] != "yes"){
       if (($_SESSION['userContext'] === 'admin') && (htmlentities($_GET['user']) !== 'admin')) { ?>
         <?php if (($_SESSION['userContext'] === 'admin') && ($_GET['user'] != '') && (htmlentities($_GET['user']) !== 'admin')) { ?>
           <?php if (htmlentities($_GET['user']) !== 'system') {?>
-            <a href="/list/log/auth/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" id="btn-back" class="ui-button cancel" dir="ltr" title="<?=_('Login history');?>"><i class="fas fa-binoculars status-icon green"></i><?=_('Login history');?></a>
+            <a href="/list/log/auth/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" class="button button-secondary" id="btn-back" title="<?=_('Login history');?>"><i class="fas fa-binoculars status-icon green"></i><?=_('Login history');?></a>
           <?php } ?>
         <?php } else { ?>
-          <a href="/list/log/auth/" id="btn-back" class="ui-button cancel" dir="ltr" title="<?=_('Login history');?>"><i class="fas fa-binoculars status-icon green"></i><?=_('Login history');?></a>
+          <a href="/list/log/auth/" class="button button-secondary" id="btn-back" title="<?=_('Login history');?>"><i class="fas fa-binoculars status-icon green"></i><?=_('Login history');?></a>
         <?php } ?>
       <?php } ?>
       <?php if ($_SESSION['userContext'] === 'user') {?>
-        <a href="/list/log/auth/" id="btn-back" class="ui-button cancel" dir="ltr" title="<?=_('Login history');?>"><i class="fas fa-binoculars status-icon green"></i><?=_('Login history');?></a>
+        <a href="/list/log/auth/" class="button button-secondary" id="btn-back" title="<?=_('Login history');?>"><i class="fas fa-binoculars status-icon green"></i><?=_('Login history');?></a>
       <?php }
       } ?>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="javascript:location.reload();" class="ui-button cancel" dir="ltr"><i class="fas fa-redo status-icon green"></i><?=_('Refresh');?></a>
+      <a href="javascript:location.reload();" class="button button-secondary"><i class="fas fa-redo status-icon green"></i><?=_('Refresh');?></a>
       <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['look'] === 'admin') && ($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] === 'yes')) {?>
         <!-- Hide delete buttons-->
       <?php } else { ?>
         <?php if (($_SESSION['userContext'] === 'admin') || (($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_DELETE_LOGS'] !== 'no'))) {?>
           <div class="actions-panel u-inline-block" key-action="js">
-            <a class="data-controls do_delete ui-button danger cancel">
+            <a class="data-controls do_delete button button-secondary button-danger">
               <i class="do_delete fas fa-times-circle status-icon red"></i><?=_('Delete');?>
               <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user']))) {?>
                 <input type="hidden" name="delete_url" value="/delete/log/?user=<?=htmlentities($_GET['user']);?>&token=<?=$_SESSION['token']?>">

web/templates/pages/list_log_auth.html

@@ -1,21 +1,21 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user'])) && (htmlentities($_GET['user']) !== 'admin')) { ?>
-        <a href="/list/log/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+        <a href="/list/log/?user=<?=htmlentities($_GET['user']); ?>&token=<?=$_SESSION['token']?>" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php } else { ?>
-        <a href="/list/log/" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+        <a href="/list/log/" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php } ?>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
-      <a href="javascript:location.reload();" class="ui-button cancel" dir="ltr"><i class="fas fa-redo status-icon green"></i><?=_('Refresh');?></a>
+      <a href="javascript:location.reload();" class="button button-secondary"><i class="fas fa-redo status-icon green"></i><?=_('Refresh');?></a>
       <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['look'] === 'admin') && ($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] === 'yes')) {?>
         <!-- Hide delete buttons-->
       <?php } else { ?>
         <?php if (($_SESSION['userContext'] === 'admin') || (($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_DELETE_LOGS'] !== 'no'))) {?>
           <div class="actions-panel u-inline-block" key-action="js">
-            <a class="data-controls do_delete ui-button danger cancel">
+            <a class="data-controls do_delete button button-secondary button-danger">
               <i class="do_delete fas fa-times-circle status-icon red"></i><?=_('Delete');?>
               <?php if (($_SESSION['userContext'] === 'admin') && (isset($_GET['user']))) {?>
                 <input type="hidden" name="delete_url" value="/delete/log/auth/?user=<?=htmlentities($_GET['user']);?>&token=<?=$_SESSION['token']?>">

web/templates/pages/list_mail.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if ($read_only !== 'true') {?>
-        <a href="/add/mail/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Mail Domain');?></a>
+        <a href="/add/mail/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Mail Domain');?></a>
       <?php } ?>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
@@ -148,7 +148,7 @@
           <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('mail accounts');?>: <?=$key?>"><?=$key?></a></b></div>
           <!-- START QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left text-right compact-5">
-            <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+            <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
               <div class="actions-panel clearfix">
                 <?php if ($read_only === 'true') {?>
                   <!-- Restrict ability to edit, delete, or suspend domain items when impersonating 'admin' account -->

web/templates/pages/list_mail_acc.html

@@ -4,12 +4,12 @@
 ?>
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php if ($read_only !== 'true') { ?>
-        <a href="/add/mail/?domain=<?=htmlentities($_GET['domain'])?>" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Mail Account');?></a>
-        <a href="/edit/mail/?domain=<?=htmlentities($_GET['domain'])?>" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-pencil-alt status-icon blue"></i><?=_('Editing Mail Domain');?></a>
+        <a href="/add/mail/?domain=<?=htmlentities($_GET['domain'])?>" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Mail Account');?></a>
+        <a href="/edit/mail/?domain=<?=htmlentities($_GET['domain'])?>" class="button button-secondary" id="btn-create"><i class="fas fa-pencil-alt status-icon blue"></i><?=_('Editing Mail Domain');?></a>
       <?php } ?>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
@@ -142,7 +142,7 @@
         </div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left text-right compact-4">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <?php if ($read_only === 'true') { ?>
                 <!-- Restrict the ability to edit, delete, or suspend domain items when impersonating 'admin' account -->

web/templates/pages/list_mail_dns.html

@@ -3,9 +3,9 @@
   if (!empty($_SESSION['WEBMAIL_ALIAS'])) $v_webmail_alias = $_SESSION['WEBMAIL_ALIAS'];
 ?>
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/mail/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-sort-toolbar clearfix">
       <table>

web/templates/pages/list_packages.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/add/package/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Package');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/user/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/add/package/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Package');?></a>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
       <li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-sort-alpha-down"></i></span><span class="up"><i class="fas fa-sort-alpha-up"></i></span></li>
@@ -83,7 +83,7 @@
         <?php } ?>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left text-right compact-3">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <?php if (($key == 'system')) { ?>
                 <!-- Restrict editing system package -->

web/templates/pages/list_rrd.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="/list/server/?cpu" class="ui-button cancel" dir="ltr"><i class="fas fa-chart-pie status-icon green"></i><?=_('show: CPU / MEM / NET / DISK');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/list/server/?cpu" class="button button-secondary"><i class="fas fa-chart-pie status-icon green"></i><?=_('show: CPU / MEM / NET / DISK');?></a>
     </div>
     <div class="l-sort-toolbar clearfix">
       <table>

web/templates/pages/list_search.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a href="javascript:window.history.back();" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
-      <a href="javascript:location.reload();" class="ui-button cancel" dir="ltr"><i class="fas fa-sync status-icon green"></i> <?=_('Refresh');?></a>
+      <a href="javascript:window.history.back();" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="javascript:location.reload();" class="button button-secondary"><i class="fas fa-sync status-icon green"></i> <?=_('Refresh');?></a>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
       <li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-sort-alpha-down"></i></span><span class="up"><i class="fas fa-sort-alpha-up"></i></span></li>
@@ -135,7 +135,7 @@
           </b>
         </div>
         <div class="clearfix l-unit__stat-col--left text-right compact-3">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               &nbsp;
             </div>

web/templates/pages/list_server_info.html

@@ -42,7 +42,7 @@
         <?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['mail'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mail"><i class="fas fa-mail-bulk panel-icon"></i><?=_('Mail');?></a></div><?php }?>
         <?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['db'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?db"><i class="fas fa-database panel-icon"></i><?=_('DB');?></a></div><?php }?>
       </div>
-      <div class="l-profile noselect">
+      <div class="l-profile u-noselect">
         <div class="l-menu__item"><a href="javascript:location.reload();" title="<?=_('Refresh');?>"><i class="fas fa-redo"></i></a></div>
         <div class="l-menu__item"><a href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?>" class="l-profile__logout"><i class="fas fa-sign-out-alt"></i></a></div>
       </div>

web/templates/pages/list_server_preview.html

@@ -1,8 +1,8 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a href="/edit/server/" id="btn-back" class="ui-button cancel" dir="ltr"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a href="/edit/server/" class="button button-secondary" id="btn-back"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
     </div>

web/templates/pages/list_services.html

@@ -1,16 +1,16 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a href="/edit/server/" class="ui-button cancel" dir="ltr"><i class="fas fa-cog status-icon maroon"></i><?=_('Configure');?></a>
-      <a href="/list/rrd/" class="ui-button cancel" dir="ltr"><i class="fas fa-chart-area status-icon blue"></i><?=_('Graphs');?></a>
-            <a href="/list/updates/" class="ui-button cancel" dir="ltr"><i class="fas fa-sync status-icon green"></i><?=_('Updates');?></a>
+      <a href="/edit/server/" class="button button-secondary"><i class="fas fa-cog status-icon maroon"></i><?=_('Configure');?></a>
+      <a href="/list/rrd/" class="button button-secondary"><i class="fas fa-chart-area status-icon blue"></i><?=_('Graphs');?></a>
+      <a href="/list/updates/" class="button button-secondary"><i class="fas fa-sync status-icon green"></i><?=_('Updates');?></a>
       <?php if (!empty($_SESSION['FIREWALL_SYSTEM']) && $_SESSION['FIREWALL_SYSTEM'] == "iptables" ) {?>
-      <a href="/list/firewall/" class="ui-button cancel" dir="ltr"><i class="fas fa-shield-alt status-icon red"></i><?=_('Firewall');?></a>
+      <a href="/list/firewall/" class="button button-secondary"><i class="fas fa-shield-alt status-icon red"></i><?=_('Firewall');?></a>
       <?php }?>
-      <a href="/list/log/?user=system&token=<?=$_SESSION['token']?>" class="ui-button cancel" dir="ltr"><i class="fas fa-binoculars status-icon orange"></i><?=_('Logs');?></a>
+      <a href="/list/log/?user=system&token=<?=$_SESSION['token']?>" class="button button-secondary"><i class="fas fa-binoculars status-icon orange"></i><?=_('Logs');?></a>
       <div class="actions-panel u-inline-block" key-action="js">
-        <a class="data-controls do_servicerestart ui-button danger cancel">
+        <a class="data-controls do_servicerestart button button-secondary button-danger">
           <i class="do_servicerestart fas fa-undo status-icon red"></i><?=_('Restart');?>
           <input type="hidden" name="servicerestart_url" value="/restart/system/?hostname=<?=$sys['sysinfo']['HOSTNAME'] ?>&token=<?=$_SESSION['token']?>&system_reset_token=<?=time(); ?>">
           <div class="dialog js-confirm-dialog-servicerestart" title="<?=_('Confirmation');?>">

web/templates/pages/list_ssl.html

@@ -1,6 +1,6 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-sort-toolbar clearfix u-float-left">
 
     </div>
@@ -41,7 +41,7 @@
           <textarea class="form-control u-min-height100" name="v_csr" id="v_csr"><?=$v_csr ?></textarea>
         </div>
         <div>
-          <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="<?=$back ?>">
+          <input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="<?=$back ?>">
         </div>
       </div>
     </div>

web/templates/pages/list_stats.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if (($_SESSION['userContext'] === 'admin') && (!isset($_SESSION['look']))) { ?>
-        <a class="ui-button cancel" dir="ltr" href='/list/stats/'><i class="fas fa-binoculars status-icon lightblue"></i><?=_('Overall Statistics');?></a>
+        <a class="button button-secondary" href='/list/stats/'><i class="fas fa-binoculars status-icon lightblue"></i><?=_('Overall Statistics');?></a>
       <?php } ?>
     </div>
     <div class="l-sort-toolbar clearfix">

web/templates/pages/list_updates.html

@@ -1,8 +1,8 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/list/server/"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
       <?php
         if($autoupdate == 'Enabled') {
           $btn_url = '/delete/cron/autoupdate/?token='.$_SESSION['token'].'';
@@ -14,7 +14,7 @@
           $btn_label = _('Enable automatic updates');
         }
       ?>
-      <a class="ui-button cancel" dir="ltr" href="<?=$btn_url;?>"><i class="fas <?=$btn_icon;?>"></i><?=$btn_label;?></a>
+      <a class="button button-secondary" href="<?=$btn_url;?>"><i class="fas <?=$btn_icon;?>"></i><?=$btn_label;?></a>
     </div>
   </div>
 </div>
@@ -52,7 +52,7 @@
     ?>
     <div class="l-unit<?php if ($status == 'suspended') echo ' l-unit--outdated';?> animated fadeIn">
       <div class="l-unit-toolbar clearfix">
-        <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+        <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
         </div>
       </div>
 

web/templates/pages/list_user.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a href="/add/user/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add User');?></a>
-      <a href="/list/package/" class="ui-button cancel" dir="ltr"><i class="fas fa-box-open status-icon orange"></i><?=_('Packages');?></a>
+      <a href="/add/user/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add User');?></a>
+      <a href="/list/package/" class="button button-secondary"><i class="fas fa-box-open status-icon orange"></i><?=_('Packages');?></a>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
       <li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=_('Bandwidth');?> <i class="fas fa-sort-alpha-down"></i></span><span class="up"><i class="fas fa-sort-alpha-up"></i></span></li>
@@ -117,7 +117,7 @@
         </div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left text-right compact-3">
-          <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+          <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
             <div class="actions-panel clearfix">
               <?php if ($key == $user_plain) { ?>
                 <i class="fas fa-user-check status-icon status-icon dim icon-large" title="<?=$key?> (<?=$data[$key]['NAME']?>)"></i>

web/templates/pages/list_web.html

@@ -1,9 +1,9 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix noselect">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
       <?php if ($read_only !== 'true') {?>
-        <a href="/add/web/" id="btn-create" class="ui-button cancel" dir="ltr"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Web Domain');?></a>
+        <a href="/add/web/" class="button button-secondary" id="btn-create"><i class="fas fa-plus-circle status-icon green"></i><?=_('Add Web Domain');?></a>
       <?php } ?>
     </div>
     <ul class="context-menu sort-order animated fadeIn" style="display:none;">
@@ -192,7 +192,7 @@
           </div>
           <!-- START QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left compact-4 text-right">
-            <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
+            <div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
               <div class="actions-panel clearfix">
                 <?php if (!empty($data[$key]['STATS'])) { ?>
                   <div class="actions-panel__col actions-panel__logs shortcut-w" key-action="href"><a href="http://<?=$key?>/vstats/" rel="noopener" target="_blank" rel="noopener" title="<?=_('Statistics');?>"><i class="fas fa-chart-bar status-icon maroon status-icon dim"></i></a></div>

web/templates/pages/list_webapps.html

@@ -1,8 +1,8 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/edit/web/?domain=<?=htmlentities($v_domain)?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/edit/web/?domain=<?=htmlentities($v_domain)?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
     </div>
@@ -47,7 +47,7 @@
         <div class="card-details">
           <p class="card-title"><?=$webapp['name'];?></p>
           <p class="u-mb10"><?=_('version');?>: <?=$webapp['version'];?></p>
-          <a href="/add/webapp/?app=<?=$webapp['name'];?>&domain=<?=htmlentities($v_domain)?>" class="ui-button cancel" dir="ltr"><?=_('Setup');?></a>
+          <a href="/add/webapp/?app=<?=$webapp['name'];?>&domain=<?=htmlentities($v_domain)?>" class="button"><?=_('Setup');?></a>
         </div>
       </div>
     <?php endforeach; ?>

web/templates/pages/login/login.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <form id="form_login" method="post" action="/login/">
@@ -14,7 +14,7 @@
       <input type="text" class="form-control" name="user" id="user" tabindex="1" autofocus>
     </div>
     <button tabindex="3" type="submit" class="button">
-      <?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i>
+      <i class="fas fa-sign-in-alt"></i><?=_('Next');?>
     </button>
   </form>
 </div>

web/templates/pages/login/login_1.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <form id="form_login" method="post" action="/login/">
@@ -20,9 +20,11 @@
       </label>
       <input type="password" class="form-control" name="password" id="password" tabindex="2" autofocus>
     </div>
-    <div>
-      <button tabindex="3" type="submit" class="button"><?=_('Login');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>&nbsp;&nbsp;
-      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout=true'">
+    <div class="u-side-by-side">
+      <button tabindex="3" type="submit" class="button">
+        <i class="fas fa-sign-in-alt"></i><?=_('Login');?>
+      </button>
+      <input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="location.href='/login/?logout=true'">
     </div>
   </form>
 </div>

web/templates/pages/login/login_2.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <form id="form_login" method="post" action="/login/">
@@ -18,9 +18,11 @@
       </label>
       <input type="text" class="form-control" name="twofa" id="twofa" tabindex="2" autofocus>
     </div>
-    <div>
-      <button tabindex="3" type="submit" class="button"><?=_('Login');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i></button>&nbsp;&nbsp;
-      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
+    <div class="u-side-by-side">
+      <button tabindex="3" type="submit" class="button">
+        <i class="fas fa-sign-in-alt"></i><?=_('Login');?>
+      </button>
+      <input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
     </div>
   </form>
 </div>

web/templates/pages/login/login_a.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <form id="form_login" method="post" action="/login/">
@@ -25,7 +25,7 @@
       <input type="password" class="form-control" name="password" id="password" tabindex="2" autofocus>
     </div>
     <button tabindex="3" type="submit" class="button">
-      <?=_('Next');?>&nbsp;&nbsp;&nbsp;<i class="fas fa-sign-in-alt"></i>
+      <i class="fas fa-sign-in-alt"></i><?=_('Next');?>
     </button>
   </form>
 </div>

web/templates/pages/login/reset2fa.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <?php if ($success) {?>
@@ -27,9 +27,9 @@
         <label for="twofa" class="form-label"><?=_('2FA Reset Code');?></label>
         <input type="text" class="form-control" name="twofa" id="twofa" tabindex="1">
       </div>
-      <div>
-        <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;
-        <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
+      <div class="u-side-by-side">
+        <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">
+        <input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
       </div>
     </form>
   <?php } ?>

web/templates/pages/login/reset_1.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <form method="post" action="/reset/">
@@ -16,9 +16,9 @@
       <label for="email" class="form-label"><?=_('Email');?></label>
       <input type="email" class="form-control" name="email" id="email" tabindex="1">
     </div>
-    <div>
-      <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">&nbsp;&nbsp;
-      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
+    <div class="u-side-by-side">
+      <input tabindex="2" type="submit" value="<?=_('Submit');?>" class="button">
+      <input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="location.href='/login/?logout'">
     </div>
   </form>
 </div>

web/templates/pages/login/reset_2.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <form method="get" action="/reset/">
@@ -17,9 +17,9 @@
       <label for="code" class="form-label"><?=_('Reset Code');?></label>
       <input type="text" class="form-control" name="code" id="code" tabindex="1">
     </div>
-    <div>
-      <input tabindex="2" type="submit" value="<?=_('Confirm');?>" class="button">&nbsp;&nbsp;
-      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/reset/'">
+    <div class="u-side-by-side">
+      <input tabindex="2" type="submit" value="<?=_('Confirm');?>" class="button">
+      <input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="location.href='/reset/'">
     </div>
   </form>
 </div>

web/templates/pages/login/reset_3.html

@@ -1,5 +1,5 @@
 <div class="login animated zoomIn">
-  <a href="/" class="u-block u-mr30">
+  <a href="/" class="u-block u-mr30 u-mb40">
     <img src="/images/logo.svg" alt="<?=_('Hestia Control Panel');?>" width="100" height="120">
   </a>
   <form method="post">
@@ -19,9 +19,9 @@
       <label for="password_confirm" class="form-label"><?=_('Confirm Password');?></label>
       <input type="password" class="form-control" name="password_confirm" id="password_confirm" tabindex="2">
     </div>
-    <div>
-      <input tabindex="3" type="submit" value="<?=_('Reset');?>" class="button">&nbsp;&nbsp;
-      <input type="button" class="button cancel" value="<?=_('Back');?>" onclick="location.href='/login/'">
+    <div class="u-side-by-side">
+      <input tabindex="3" type="submit" value="<?=_('Reset');?>" class="button">
+      <input type="button" class="button button-secondary" value="<?=_('Back');?>" onclick="location.href='/login/'">
     </div>
   </form>
 </div>

web/templates/pages/setup_webapp.html

@@ -1,8 +1,8 @@
 <!-- Begin toolbar -->
 <div class="l-center">
-  <div class="l-sort clearfix">
+  <div class="l-sort">
     <div class="l-unit-toolbar__buttonstrip">
-      <a class="ui-button cancel" dir="ltr" id="btn-back" href="/add/webapp/?domain=<?=htmlentities($v_domain);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
+      <a class="button button-secondary" id="btn-back" href="/add/webapp/?domain=<?=htmlentities($v_domain);?>"><i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?></a>
     </div>
     <div class="l-unit-toolbar__buttonstrip u-float-right">
       <?php
@@ -14,7 +14,7 @@
           }
         }
       ?>
-      <a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=_('Install');?></a>
+      <a href="#" class="button" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=_('Install');?></a>
     </div>
   </div>
 </div>