More UI refinements (#2983)

web/css/src/dependencies/jquery-ui.custom.css

@@ -1,5 +1,5 @@
 /*!
- * jQuery UI v1.13.2 + few changes
+ * Some parts of jQuery UI v1.13.2
  */
 
 /* Dialog */
@@ -154,15 +154,3 @@
 	width: 100%;
 	height: 100%;
 }
-
-/* NOTE: Custom changes follow */
-
-/* Hide the default close button in dialog header */
-.ui-dialog-titlebar-close {
-	display: none;
-}
-
-/* Set high z-index for dialog to override .l-header */
-.ui-front {
-	z-index: 1000;
-}

web/css/src/themes/dark.css

@@ -219,9 +219,6 @@ a {
 .card .card-thumb img {
 }
 
-.card button {
-}
-
 .l-stat {
   background-color: #282828;
 }
@@ -846,7 +843,7 @@ td.hint {
   box-shadow:
     0 1px 4px rgb(0 0 0 / 10%),
     inset 0 0 1px #000,
-    inset 0 0 3px rgb(0 0 0 / 50%) !important;
+    inset 0 0 3px rgb(0 0 0 / 50%);
 }
 
 .ui-button,
@@ -1304,7 +1301,7 @@ form#vstobjects.suspended {
 }
 
 .ui-dialog .ui-dialog-buttonpane {
-  border-top: 1px solid #404040 !important;
+  border-top: 1px solid #404040;
 }
 
 .shortcuts {
@@ -1415,19 +1412,19 @@ form#vstobjects.suspended {
 }
 
 .ui-dialog {
-  background-color: rgb(45 45 45 / 95%) !important;
-  border: 1px solid rgb(80 80 80 / 97%) !important;
+  background-color: rgb(45 45 45 / 95%);
+  border: 1px solid rgb(80 80 80 / 97%);
   box-shadow:
     inset 0 1px 3px rgb(0 0 0 / 25%),
-    0 8px 25px rgb(0 0 0 / 90%) !important;
+    0 8px 25px rgb(0 0 0 / 90%);
 }
 
 .ui-dialog .ui-dialog-content {
-  color: #dadada !important;
+  color: #dadada;
 }
 
 .ui-dialog .ui-dialog-title {
-  color: #f12569 !important;
+  color: #f12569;
   font-weight: 600;
 }
 

web/css/src/themes/default.css

@@ -196,6 +196,18 @@ body {
   background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%) !important;
 }
 
+p,
+pre {
+  margin: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 a {
   text-decoration: none;
   color: #7c7c7c;
@@ -394,7 +406,6 @@ a {
 .notification-container {
   background-color: rgb(255 255 255 / 95%);
   box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
-  list-style-type: none;
   margin: 0 18px;
   max-height: 90%;
   overflow-y: auto;
@@ -403,7 +414,6 @@ a {
   width: 390px;
   z-index: 300;
   font-size: 0.8rem;
-  padding: 0;
   color: #6f6f6f;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -606,11 +616,10 @@ form#vstobjects .alert {
 }
 
 .card {
-  float: left;
+  box-sizing: border-box;
   overflow: hidden;
   background-color: #f5f5f5;
   border: 1px solid #d3d3d3;
-  box-sizing: border-box;
   width: 200px;
   min-height: 260px;
   margin: 1em;
@@ -648,22 +657,19 @@ form#vstobjects .alert {
 }
 
 .card .card-thumb {
+  box-sizing: border-box;
   background-color: #fff;
-  display: block;
-  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 200px;
-  text-align: center;
+  height: 180px;
+  padding: 20px;
 }
 
 .card .card-thumb img {
-  max-height: 180px;
-  max-width: 200px;
-  height: auto;
-  width: auto;
-}
-
-.card button {
-  margin: 0.3em;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .l-stat {
@@ -728,7 +734,6 @@ form#vstobjects .alert {
 }
 
 .l-stat__col ul {
-  list-style-type: none;
   font-size: 0.75rem;
   padding-left: 0;
   line-height: 14px;
@@ -849,15 +854,12 @@ div.l-content > div.l-separator:nth-of-type(4) {
   position: absolute;
   z-index: 3;
   left: 397px;
-  margin: 0;
   overflow: hidden;
   top: 42px;
   background-color: rgb(255 255 255 / 95%);
-  list-style-type: none;
   box-shadow: 0 2px 14px 0 rgb(20 20 20 / 35%);
   border-radius: 4px;
   border: 1px solid rgb(255 255 255 / 100%);
-  padding: 0;
 }
 
 .context-menu.sort-order li {
@@ -2534,19 +2536,29 @@ td.hint {
   display: none;
 }
 
+/* Hide the default close button in dialog header */
+.ui-dialog-titlebar-close {
+	display: none;
+}
+
+/* Set high z-index for dialog to override .l-header */
+.ui-front {
+	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%) !important;
+    inset 0 0 3px rgb(255 255 255 / 50%);
 }
 
 .ui-dialog .ui-dialog-buttonpane {
-  border-color: #fff !important;
+  border-color: #fff;
   box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
-  margin-top: 0 !important;
-  padding: 0 !important;
+  margin-top: 0;
+  padding: 0;
 }
 
 .ui-button,
@@ -3434,7 +3446,6 @@ form#vstobjects.suspended {
 }
 
 .shortcuts ul {
-  list-style-type: none;
   padding: 30px 20px;
   float: left;
   width: 360px;
@@ -3465,7 +3476,6 @@ form#vstobjects.suspended {
 
 .description ul {
   margin-top: 15px;
-  list-style: none;
   padding-left: 0;
 }
 
@@ -3529,30 +3539,30 @@ form#vstobjects.suspended {
 }
 
 .ui-dialog {
-  font-family: Exo, Arial, Helvetica, sans-serif !important;
-  font-weight: 500 !important;
-  background-color: rgb(255 255 255 / 90%) !important;
+  font-family: Exo, Arial, Helvetica, sans-serif;
+  font-weight: 500;
+  background-color: rgb(255 255 255 / 90%);
   box-shadow:
     inset 0 1px 3px rgb(0 0 0 / 25%),
-    0 8px 40px 0 rgb(0 0 0 / 35%) !important;
-  border-radius: 6px !important;
-  border: 1px solid rgb(255 255 255 / 98%) !important;
-  text-align: center !important;
+    0 8px 40px 0 rgb(0 0 0 / 35%);
+  border-radius: 6px;
+  border: 1px solid rgb(255 255 255 / 98%);
+  text-align: center;
 }
 
 .ui-dialog .ui-dialog-content {
-  color: #535353 !important;
-  padding: 10px 26px 30px !important;
+  color: #535353;
+  padding: 20px 26px 30px;
 }
 
 .ui-dialog .ui-dialog-title {
-  margin: 0 !important;
-  color: #305ba9 !important;
-  font-size: 1.2em !important;
-  text-transform: none !important;
-  letter-spacing: -0.01em !important;
-  text-align: center !important;
-  float: none !important;
+  margin: 0;
+  color: #305ba9;
+  font-size: 1.2em;
+  text-transform: none;
+  letter-spacing: -0.01em;
+  text-align: center;
+  float: none;
   font-weight: 500;
 }
 
@@ -3903,6 +3913,11 @@ li[aria-expanded="true"] a {
   align-items: center !important;
 }
 
+.u-list-bulleted {
+  list-style: disc !important;
+  padding-left: 40px !important;
+}
+
 .u-flex-align-center {
   display: flex !important;
   justify-content: center !important;

web/css/src/themes/flat.css

@@ -164,7 +164,7 @@ strong {
 }
 
 .ui-dialog {
-  box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%) !important;
+  box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 }
 
 .alert {

web/css/src/themes/vestia.css

@@ -233,7 +233,7 @@ strong {
 }
 
 .ui-dialog {
-  box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%) !important;
+  box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 }
 
 .alert {
@@ -425,15 +425,15 @@ a.vst-text:hover b,
 .ui-widget,
 .ui-dialog,
 .ui-dialog .ui-dialog-title {
-  font-family: Arial, Helvetica, sans-serif !important;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 .ui-dialog .ui-dialog-title {
-  color: #111 !important;
+  color: #111;
 }
 
 .ui-dialog .ui-dialog-content {
-  color: #333 !important;
+  color: #333;
 }
 
 .l-unit-toolbar__buttonstrip .ui-button {

web/templates/footer.html

@@ -14,7 +14,7 @@
   }
 ?>
   <div title="<?=_('Confirmation');?>" class="dialog js-confirm-dialog-redirect">
-    <p class="confirmation"><?=_('LEAVE_PAGE_CONFIRMATION')?></p>
+    <p><?=_('LEAVE_PAGE_CONFIRMATION')?></p>
   </div>
 
   <div class="shortcuts animated fadeIn" style="display:none">

web/templates/includes/css.html

@@ -2,6 +2,7 @@
 <link rel="icon" href="/images/logo.svg" type="image/svg+xml">
 <link rel="stylesheet" href="/css/dependencies/normalize.min.css?<?=JS_LATEST_UPDATE?>">
 <link rel="stylesheet" href="/css/dependencies/animate.min.css?<?=JS_LATEST_UPDATE?>">
+<link rel="stylesheet" href="/css/dependencies/jquery-ui.custom.min.css?<?=JS_LATEST_UPDATE?>">
 <link rel="stylesheet" href="/css/themes/default.min.css?<?=JS_LATEST_UPDATE?>">
 <?php
     $selected_theme = (!empty($_SESSION['userTheme'])) ? $_SESSION['userTheme'] : $_SESSION['THEME'];
@@ -25,5 +26,4 @@
         }
     }
 ?>
-<link rel="stylesheet" href="/css/dependencies/jquery-ui.custom.min.css?<?=JS_LATEST_UPDATE?>">
 <link rel="stylesheet" href="/css/dependencies/fontawesome.min.css?<?=JS_LATEST_UPDATE?>">

web/templates/pages/add_cron.html

@@ -30,7 +30,7 @@
 					<input type="hidden" name="h_day" value="*">
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div>
 						<label for="h_min_1" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_min" id="h_min_1">
 							<option value="*" selected="selected"><?=_('every minute');?></option>
@@ -40,10 +40,10 @@
 							<option value="*/15"><?=_('every');?> 15</option>
 							<option value="*/30"><?=_('every');?> 30</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
@@ -52,7 +52,7 @@
 					<input type="hidden" name="h_day" value="*">
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_hour_2" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_hour" id="h_hour_2">
 							<option value="*" selected="selected"><?=_('every hour');?></option>
@@ -60,8 +60,8 @@
 							<option value="*/6"><?=_('every');?> 6</option>
 							<option value="*/12"><?=_('every');?> 12</option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_min_2" class="form-label first"><?=_('Minute');?>:</label>
 						<select class="form-select" name="h_min" id="h_min_2" style="width:70px;">
 							<option value="0" selected="selected">00</option>
@@ -69,10 +69,10 @@
 							<option value="30">30</option>
 							<option value="45">45</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
@@ -80,7 +80,7 @@
 				<form>
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_day_3" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_day" id="h_day_3">
 							<option value="*" selected="selected"><?=_('every day');?></option>
@@ -91,8 +91,8 @@
 							<option value="*/10"><?=_('every');?> 10</option>
 							<option value="*/15"><?=_('every');?> 15</option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_hour_3" class="form-label first"><?=_('Hour');?>:</label>
 						<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;">
 							<option value="0">00</option>
@@ -137,10 +137,10 @@
 							<option value="50">50</option>
 							<option value="55">55</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
@@ -148,7 +148,7 @@
 				<form>
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_day" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_wday_4" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_wday" id="h_wday_4">
 							<option value="*" selected="selected"><?=_('every day');?></option>
@@ -162,8 +162,8 @@
 							<option value="6"><?=_('Saturday');?></option>
 							<option value="0"><?=_('Sunday');?></option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_hour_4" class="form-label first"><?=_('Hour');?>:</label>
 						<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;">
 							<option value="0">00</option>
@@ -208,17 +208,17 @@
 							<option value="50">50</option>
 							<option value="55">55</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
 			<div id="tabs-5">
 				<form>
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_month_5" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_month" id="h_month_5">
 							<option value="*" selected="selected"><?=_('every month');?></option>
@@ -239,8 +239,8 @@
 							<option value="11"><?=_('Nov');?></option>
 							<option value="12"><?=_('Dec');?></option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_day_5" class="form-label first"><?=_('Date');?>:</label>
 						<select class="form-select" name="h_day" id="h_day_5" style="width:70px;">
 							<option value="1" selected="selected">1</option>
@@ -319,10 +319,10 @@
 							<option value="50">50</option>
 							<option value="55">55</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 		</div>

web/templates/pages/add_db.html

@@ -114,8 +114,8 @@
 							</tr>
 							<tr>
 								<td>
-									<?=_('Your password must have at least');?>:
-									<ul>
+									<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+									<ul class="u-list-bulleted u-mb10">
 										<li><?=_('8 characters long');?></li>
 										<li><?=_('1 uppercase & 1 lowercase character');?></li>
 										<li><?=_('1 number');?></li>

web/templates/pages/add_mail_acc.html

@@ -67,8 +67,8 @@
 						</tr>
 						<tr>
 							<td>
-								<?=_('Your password must have at least');?>:
-								<ul>
+								<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+								<ul class="u-list-bulleted u-mb10">
 									<li><?=_('8 characters long');?></li>
 									<li><?=_('1 uppercase & 1 lowercase character');?></li>
 									<li><?=_('1 number');?></li>

web/templates/pages/add_user.html

@@ -72,8 +72,8 @@
 						</tr>
 						<tr>
 							<td>
-								<?=_('Your password must have at least');?>:
-								<ul>
+								<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+								<ul class="u-list-bulleted u-mb10">
 									<li><?=_('8 characters long');?></li>
 									<li><?=_('1 uppercase & 1 lowercase character');?></li>
 									<li><?=_('1 number');?></li>

web/templates/pages/edit_cron.html

@@ -30,7 +30,7 @@
 					<input type="hidden" name="h_day" value="*">
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div>
 						<label for="h_min_1" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_min" id="h_min_1">
 							<option value="*" selected="selected"><?=_('every minute');?></option>
@@ -40,10 +40,10 @@
 							<option value="*/15"><?=_('every');?> 15</option>
 							<option value="*/30"><?=_('every');?> 30</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
@@ -52,7 +52,7 @@
 					<input type="hidden" name="h_day" value="*">
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_hour_2" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_hour" id="h_hour_2">
 							<option value="*" selected="selected"><?=_('every hour');?></option>
@@ -60,8 +60,8 @@
 							<option value="*/6"><?=_('every');?> 6</option>
 							<option value="*/12"><?=_('every');?> 12</option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_min_2" class="form-label first"><?=_('Minute');?>:</label>
 						<select class="form-select" name="h_min" id="h_min_2" style="width:70px;">
 							<option value="0" selected="selected">00</option>
@@ -69,10 +69,10 @@
 							<option value="30">30</option>
 							<option value="45">45</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
@@ -80,7 +80,7 @@
 				<form>
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_day_3" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_day" id="h_day_3">
 							<option value="*" selected="selected"><?=_('every day');?></option>
@@ -91,8 +91,8 @@
 							<option value="*/10"><?=_('every');?> 10</option>
 							<option value="*/15"><?=_('every');?> 15</option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_hour_3" class="form-label first"><?=_('Hour');?>:</label>
 						<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;">
 							<option value="0">00</option>
@@ -137,10 +137,10 @@
 							<option value="50">50</option>
 							<option value="55">55</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
@@ -148,7 +148,7 @@
 				<form>
 					<input type="hidden" name="h_month" value="*">
 					<input type="hidden" name="h_day" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_wday_4" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_wday" id="h_wday_4">
 							<option value="*" selected="selected"><?=_('every day');?></option>
@@ -162,8 +162,8 @@
 							<option value="6"><?=_('Saturday');?></option>
 							<option value="0"><?=_('Sunday');?></option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_hour_4" class="form-label first"><?=_('Hour');?>:</label>
 						<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;">
 							<option value="0">00</option>
@@ -208,17 +208,17 @@
 							<option value="50">50</option>
 							<option value="55">55</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 
 			<div id="tabs-5">
 				<form>
 					<input type="hidden" name="h_wday" value="*">
-					<p>
+					<div class="u-mb10">
 						<label for="h_month_5" class="form-label first"><?=_('Run Command');?>:</label>
 						<select class="form-select" name="h_month" id="h_month_5">
 							<option value="*" selected="selected"><?=_('every month');?></option>
@@ -239,8 +239,8 @@
 							<option value="11"><?=_('Nov');?></option>
 							<option value="12"><?=_('Dec');?></option>
 						</select>
-					</p>
-					<p>
+					</div>
+					<div>
 						<label for="h_day_5" class="form-label first"><?=_('Date');?>:</label>
 						<select class="form-select" name="h_day" id="h_day_5" style="width:70px;">
 							<option value="1" selected="selected">1</option>
@@ -319,10 +319,10 @@
 							<option value="50">50</option>
 							<option value="55">55</option>
 						</select>
-					</p>
-					<p class="u-pt18">
+					</div>
+					<div class="u-pt18">
 						<input type="submit" value="<?=_('generate');?>" class="button">
-					</p>
+					</div>
 				</form>
 			</div>
 		</div>

web/templates/pages/edit_db.html

@@ -75,8 +75,8 @@
 						</tr>
 						<tr>
 							<td>
-								<?=_('Your password must have at least');?>:
-								<ul>
+								<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+								<ul class="u-list-bulleted u-mb10">
 									<li><?=_('8 characters long');?></li>
 									<li><?=_('1 uppercase & 1 lowercase character');?></li>
 									<li><?=_('1 number');?></li>

web/templates/pages/edit_mail_acc.html

@@ -62,8 +62,8 @@
 						</tr>
 						<tr>
 							<td>
-								<?=_('Your password must have at least');?>:
-								<ul>
+								<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+								<ul class="u-list-bulleted u-mb10">
 									<li><?=_('8 characters long');?></li>
 									<li><?=_('1 uppercase & 1 lowercase character');?></li>
 									<li><?=_('1 number');?></li>

web/templates/pages/edit_user.html

@@ -34,7 +34,7 @@
 						<?=_('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 class="confirmation"><?=sprintf(_('DELETE_USER_CONFIRMATION'),htmlentities($v_username))?></p>
+							<p><?=sprintf(_('DELETE_USER_CONFIRMATION'),htmlentities($v_username))?></p>
 						</div>
 					</a>
 			<?php } ?>
@@ -115,8 +115,8 @@
 								<table id="password-details">
 									<tr>
 										<td>
-											<?=_('Your password must have at least');?>:
-											<ul>
+											<p class="u-mb10"><?=_('Your password must have at least');?>:</p>
+											<ul class="u-list-bulleted u-mb10">
 												<li><?=_('8 characters long');?></li>
 												<li><?=_('1 uppercase & 1 lowercase character');?></li>
 												<li><?=_('1 number');?></li>
@@ -144,9 +144,9 @@
 												</label>
 											</div>
 											<?php if (!empty($v_twofa)) { ?>
-											<p><?=_('2FA Reset Code:').' '.$v_twofa; ?></p>
-											<p><?=_('Please scan the code below in your 2FA application:'); ?></p>
-											<div><img class="qr-code" src="<?=htmlentities($v_qrcode); ?>"></div>
+												<p class="u-mb10"><?=_('2FA Reset Code:').' '.$v_twofa; ?></p>
+												<p class="u-mb10"><?=_('Please scan the code below in your 2FA application:'); ?></p>
+												<div><img class="qr-code" src="<?=htmlentities($v_qrcode); ?>"></div>
 											<?php } ?>
 										</td>
 									</tr>

web/templates/pages/list_access_key.html

@@ -81,7 +81,7 @@ if (!empty($_POST['ok'])) {
 						</tr>
 						<tr>
 							<td>
-								<ul>
+								<ul class="u-list-bulleted">
 									<?php
 									foreach ($key_data['PERMISSIONS'] as $api_name) {
 										?>

web/templates/pages/list_access_keys.html

@@ -87,7 +87,7 @@
 									<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/access-key/?key=<?=$key?>&token=<?=$_SESSION['token']?>">
 									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-										<p class="confirmation"><?=sprintf(_('DELETE_ACCESS_KEY_CONFIRMATION'),$key)?></p>
+										<p><?=sprintf(_('DELETE_ACCESS_KEY_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>
 							</div>

web/templates/pages/list_backup.html

@@ -106,7 +106,7 @@
 												<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 												<input type="hidden" name="delete_url" value="/delete/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>">
 												<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-													<p class="confirmation"><?=sprintf(_('DELETE_BACKUP_CONFIRMATION'),$key)?></p>
+													<p><?=sprintf(_('DELETE_BACKUP_CONFIRMATION'),$key)?></p>
 												</div>
 											</a>
 										</div>

web/templates/pages/list_cron.html

@@ -121,7 +121,7 @@
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>">
 										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
 								</div>
@@ -130,7 +130,7 @@
 										<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>">
 										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf(_('DELETE_CRON_CONFIRMATION'),$key)?></p>
+											<p><?=sprintf(_('DELETE_CRON_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>
 								</div>

web/templates/pages/list_db.html

@@ -158,7 +158,7 @@
 											<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 											<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>">
 											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-												<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+												<p><?=sprintf($spnd_confirmation,$key)?></p>
 											</div>
 										</a>
 									</div>
@@ -167,7 +167,7 @@
 											<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 											<input type="hidden" name="delete_url" value="/delete/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>">
 											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-												<p class="confirmation"><?=sprintf(_('DELETE_DATABASE_CONFIRMATION'),$key)?></p>
+												<p><?=sprintf(_('DELETE_DATABASE_CONFIRMATION'),$key)?></p>
 											</div>
 										</a>
 									</div>

web/templates/pages/list_dns.html

@@ -121,7 +121,7 @@
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>">
 										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
 								</div>
@@ -130,7 +130,7 @@
 										<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>">
 										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
+											<p><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>
 								</div>

web/templates/pages/list_dns_rec.html

@@ -122,7 +122,7 @@
 									<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/dns/?domain=<?=htmlspecialchars($_GET['domain'])?>&record_id=<?=$data[$key]['ID']?>&token=<?=$_SESSION['token']?>">
 									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-										<p class="confirmation"><?=sprintf(_('DELETE_RECORD_CONFIRMATION'),$key)?></p>
+										<p><?=sprintf(_('DELETE_RECORD_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>
 							</div>

web/templates/pages/list_firewall.html

@@ -111,7 +111,7 @@
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>">
 										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
 								</div>
@@ -120,7 +120,7 @@
 										<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>">
 										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf(_('DELETE_RULE_CONFIRMATION'),$key)?></p>
+											<p><?=sprintf(_('DELETE_RULE_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>
 								</div>

web/templates/pages/list_firewall_banlist.html

@@ -64,7 +64,7 @@
 									<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/firewall/banlist/?ip=<?=$ip?>&chain=<?=$value['CHAIN']?>&token=<?=$_SESSION['token']?>">
 									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-										<p class="confirmation"><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
+										<p><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>
 							</div>

web/templates/pages/list_firewall_ipset.html

@@ -64,7 +64,7 @@
 									<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/firewall/ipset/?listname=<?=$listname?>&token=<?=$_SESSION['token']?>">
 									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-										<p class="confirmation"><?=sprintf(_('DELETE_IPSET_CONFIRMATION'), $key)?></p>
+										<p><?=sprintf(_('DELETE_IPSET_CONFIRMATION'), $key)?></p>
 									</div>
 								</a>
 							</div>

web/templates/pages/list_ip.html

@@ -85,7 +85,7 @@
 									<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/ip/?ip=<?=$key?>&token=<?=$_SESSION['token']?>">
 									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-										<p class="confirmation"><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
+										<p><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>
 							</div>

web/templates/pages/list_key.html

@@ -47,7 +47,7 @@
 										<input type="hidden" name="delete_url" value="/delete/key/?key=<?=$key?>&token=<?=$_SESSION['token']?>">
 									<?php } ?>
 									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-										<p class="confirmation"><?=sprintf(_('DELETE_KEY_CONFIRM'),$key)?></p>
+										<p><?=sprintf(_('DELETE_KEY_CONFIRM'),$key)?></p>
 									</div>
 								</a>
 							</div>

web/templates/pages/list_log.html

@@ -43,7 +43,7 @@
 								<input type="hidden" name="delete_url" value="/delete/log/?token=<?=$_SESSION['token']?>">
 							<?php } ?>
 							<div class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-								<p class="confirmation"><?=_('DELETE_LOGS_CONFIRMATION');?></p>
+								<p><?=_('DELETE_LOGS_CONFIRMATION');?></p>
 							</div>
 						</a>
 					</div>

web/templates/pages/list_log_auth.html

@@ -23,7 +23,7 @@
 								<input type="hidden" name="delete_url" value="/delete/log/auth/?token=<?=$_SESSION['token']?>">
 							<?php } ?>
 							<div class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-								<p class="confirmation"><?=_('DELETE_LOGS_CONFIRMATION');?></p>
+								<p><?=_('DELETE_LOGS_CONFIRMATION');?></p>
 							</div>
 						</a>
 					</div>

web/templates/pages/list_mail.html

@@ -173,7 +173,7 @@
 											<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 											<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
 											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-												<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+												<p><?=sprintf($spnd_confirmation,$key)?></p>
 											</div>
 										</a>
 									</div>
@@ -182,7 +182,7 @@
 											<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 											<input type="hidden" name="delete_url" value="/delete/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
 											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-												<p class="confirmation"><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
+												<p><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
 											</div>
 										</a>
 									</div>

web/templates/pages/list_mail_acc.html

@@ -165,7 +165,7 @@
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>">
 										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
 								</div>
@@ -174,7 +174,7 @@
 										<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>">
 										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf(_('DELETE_MAIL_ACCOUNT_CONFIRMATION'),$key)?></p>
+											<p><?=sprintf(_('DELETE_MAIL_ACCOUNT_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>
 								</div>

web/templates/pages/list_packages.html

@@ -99,7 +99,7 @@
 										<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>">
 										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf(_('DELETE_PACKAGE_CONFIRMATION'),$key)?></p>
+											<p><?=sprintf(_('DELETE_PACKAGE_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>
 								</div>

web/templates/pages/list_services.html

@@ -14,7 +14,7 @@
 					<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');?>">
-						<p class="confirmation"><?=sprintf(_('RESTART_CONFIRMATION'), 'Server');?></p>
+						<p><?=sprintf(_('RESTART_CONFIRMATION'), 'Server');?></p>
 					</div>
 				</a>
 			</div>
@@ -151,7 +151,7 @@
 								<i class="do_servicerestart data-controls fas fa-undo status-icon highlight status-icon dim icon-large"></i>
 								<input type="hidden" name="servicerestart_url" value="/restart/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
 								<div id="restart_link_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicerestart" title="<?=_('Confirmation');?>">
-									<p class="confirmation"><?=sprintf(_('RESTART_CONFIRMATION'),$key); ?></p>
+									<p><?=sprintf(_('RESTART_CONFIRMATION'),$key); ?></p>
 								</div>
 							</a>
 						</div>
@@ -160,7 +160,7 @@
 								<i class="do_servicestop fas <?=$spnd_icon?> status-icon red status-icon dim icon-large"></i>
 								<input type="hidden" name="servicestop_url" value="/<?=$action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
 								<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicestop" title="<?=_('Confirmation');?>">
-									<p class="confirmation"><?php if($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service'),$key); }else{ echo sprintf(_('Are you sure you want to start service'),$key); }?></p>
+									<p><?php if($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service'),$key); }else{ echo sprintf(_('Are you sure you want to start service'),$key); }?></p>
 								</div>
 							</a>
 						</div>

web/templates/pages/list_user.html

@@ -141,7 +141,7 @@
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>">
 										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
 								</div>
@@ -150,7 +150,7 @@
 										<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>">
 										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-											<p class="confirmation"><?=sprintf(_('DELETE_USER_CONFIRMATION'),$key)?></p>
+											<p><?=sprintf(_('DELETE_USER_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>
 								</div>

web/templates/pages/list_web.html

@@ -211,7 +211,7 @@
 											<i class="fas <?=$spnd_icon?> status-icon highlight status-icon dim do_<?=$spnd_action?>"></i>
 											<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
 											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
-												<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
+												<p><?=sprintf($spnd_confirmation,$key)?></p>
 											</div>
 										</a>
 									</div>
@@ -220,7 +220,7 @@
 											<i class="fas fa-trash status-icon red status-icon dim do_delete"></i>
 											<input type="hidden" name="delete_url" value="/delete/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
 											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
-												<p class="confirmation"><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
+												<p><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
 											</div>
 										</a>
 									</div>

web/templates/pages/list_webapps.html

@@ -39,14 +39,16 @@
 			</span>
 		</div>
 	</div>
-	<div class="app-list cards">
+	<div class="app-list cards u-mb20">
 		<!-- List available web apps -->
 		<?php foreach($v_web_apps as $webapp):?>
-			<div class="card <?=($webapp['enabled']?'':'disable');?>">
-				<span class="card-thumb"><img src="/src/app/WebApp/Installers/<?=$webapp['name'];?>/<?=$webapp['thumbnail'];?>"></span>
+			<div class="card <?=($webapp['enabled'] ? '' : 'disable');?>">
+				<div class="card-thumb">
+					<img src="/src/app/WebApp/Installers/<?=$webapp['name'];?>/<?=$webapp['thumbnail'];?>" alt="<?=$webapp['name'];?>">
+				</div>
 				<div class="card-details">
 					<p class="card-title"><?=$webapp['name'];?></p>
-					<p><?=_('version');?>: <?=$webapp['version'];?></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>
 				</div>
 			</div>