Replace jQuery UI dialogs with <dialog> (hestiacp#3401) (hestiacp#3403)

* Replace jQuery UI dialogs with <dialog> (hestiacp#3401)

* Fix "active" state of RRD filters

* Refine/ensure title

* Refactor

* Tidy

* Use window.addEventListener('load') over window.onload

* Refine

* Fix input focus causing page zoom in Mobile Safari

---------

Co-authored-by: Alec Rust <me@alecrust.com>

Author: jaapmarcus

.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -22,7 +22,7 @@ body:
     attributes:
       label: Tell us how to replicate the bug
       description: |
-        What steps did you take when the bug occured or things did not work as you expected?
+        What steps did you take when the bug occurred or things did not work as you expected?
       placeholder: |
         1. Click on the Web tab.
         2. Click on Add Web Domain.

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

@@ -1,98 +1,7 @@
 /*
- * Some parts of jQuery UI v1.13.2
+ * "Tabs" CSS from jQuery UI v1.13.2
  */
 
-/* Dialog */
-.ui-dialog {
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding: 0.2em;
-	outline: 0;
-}
-.ui-dialog .ui-dialog-titlebar {
-	padding: 0.4em 1em;
-	position: relative;
-}
-.ui-dialog .ui-dialog-title {
-	float: left;
-	margin: 0.1em 0;
-	white-space: nowrap;
-	width: 90%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.ui-dialog .ui-dialog-titlebar-close {
-	position: absolute;
-	right: 0.3em;
-	top: 50%;
-	width: 20px;
-	margin: -10px 0 0 0;
-	padding: 1px;
-	height: 20px;
-}
-.ui-dialog .ui-dialog-content {
-	position: relative;
-	border: 0;
-	padding: 0.5em 1em;
-	background: none;
-	overflow: auto;
-}
-.ui-dialog .ui-dialog-buttonpane {
-	text-align: left;
-	border-width: 1px 0 0 0;
-	background-image: none;
-	margin-top: 0.5em;
-	padding: 0.3em 1em 0.5em 0.4em;
-}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
-	float: right;
-}
-.ui-dialog .ui-dialog-buttonpane button {
-	margin: 0.5em 0.4em 0.5em 0;
-	cursor: pointer;
-}
-.ui-dialog .ui-resizable-n {
-	height: 2px;
-	top: 0;
-}
-.ui-dialog .ui-resizable-e {
-	width: 2px;
-	right: 0;
-}
-.ui-dialog .ui-resizable-s {
-	height: 2px;
-	bottom: 0;
-}
-.ui-dialog .ui-resizable-w {
-	width: 2px;
-	left: 0;
-}
-.ui-dialog .ui-resizable-se,
-.ui-dialog .ui-resizable-sw,
-.ui-dialog .ui-resizable-ne,
-.ui-dialog .ui-resizable-nw {
-	width: 7px;
-	height: 7px;
-}
-.ui-dialog .ui-resizable-se {
-	right: 0;
-	bottom: 0;
-}
-.ui-dialog .ui-resizable-sw {
-	left: 0;
-	bottom: 0;
-}
-.ui-dialog .ui-resizable-ne {
-	right: 0;
-	top: 0;
-}
-.ui-dialog .ui-resizable-nw {
-	left: 0;
-	top: 0;
-}
-
-/* Tabs */
 .ui-tabs {
 	position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
 	padding: 0.2em;
@@ -145,12 +54,3 @@
 .ui-helper-clearfix:after {
 	clear: both;
 }
-
-/* Overlays */
-.ui-widget-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}

web/css/src/themes/dark.css

@@ -566,7 +566,7 @@ strong {
 	text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
 	font-weight: 400;
 	border-color: #707070;
-	background: rgb(48 48 48);
+	background: #303030;
 	background: linear-gradient(
 		0deg,
 		rgb(48 48 48 / 100%) 0%,
@@ -591,8 +591,22 @@ strong {
 			inset 0 0 3px rgb(0 0 0 / 65%);
 	}
 
-	&:active,
 	&:focus {
+		color: #eee;
+		text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
+		border-color: #0090ff;
+		background: #303030;
+		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 / 20%), inset 0 0 1px rgb(20 20 20 / 100%),
+			inset 0 0 3px rgb(0 0 0 / 50%);
+	}
+
+	&:active {
 		color: #d4d4d4;
 		text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
 		border-color: #0066b4;
@@ -760,31 +774,22 @@ strong {
 /* Modals
    ========================================================================== */
 
-.ui-dialog .ui-dialog-buttonpane {
-	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%);
-}
-
-.ui-dialog {
+.modal {
 	background-color: rgb(45 45 45 / 95%);
-	border: 1px solid rgb(80 80 80 / 97%);
+	border-color: rgb(80 80 80 / 97%);
 	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 25px rgb(0 0 0 / 90%);
 }
 
-.ui-dialog .ui-dialog-content {
-	color: #dadada;
+.modal-title {
+	color: #f12569;
 }
 
-.ui-dialog .ui-dialog-title {
-	color: #f12569;
-	font-weight: 600;
+.modal-message {
+	color: #dadada;
 }
 
-.ui-widget-header a {
-	color: #cacaca;
+.modal-options {
+	border-top: 1px solid #404040;
 }
 
 /* Shortcuts panel

web/css/src/themes/default.css

@@ -1445,7 +1445,7 @@
 	display: block;
 	width: 100%;
 	padding: 8px 12px;
-	font-size: 0.8rem;
+	font-size: 16px;
 	font-weight: normal;
 	color: #4e4e4e;
 	border-radius: var(--border-radius-base);
@@ -1488,13 +1488,17 @@
 		color: #444;
 		background-color: #fff7b6;
 	}
+
+	@media (--viewport-small) {
+		font-size: 0.8rem;
+	}
 }
 
 .form-select {
 	display: block;
 	width: 100%;
 	font-weight: normal;
-	font-size: 0.8rem;
+	font-size: 16px;
 	padding: 8px 30px 8px 12px;
 	line-height: 1.5;
 	border-radius: var(--border-radius-base);
@@ -1516,6 +1520,10 @@
 	&:focus {
 		border-color: #008fee;
 	}
+
+	@media (--viewport-small) {
+		font-size: 0.8rem;
+	}
 }
 
 .form-check {
@@ -1719,60 +1727,36 @@
 /* Modals
    ========================================================================== */
 
-.dialog {
-	display: none;
-}
-
-/* Hide the default close button in dialog header */
-.ui-dialog-titlebar-close {
-	display: none;
-}
-
-/* Set dialog z-index */
-.ui-front {
-	z-index: 2;
-}
-
-.ui-dialog {
-	font-family: Exo, system-ui;
-	font-weight: 500;
-	background-color: rgb(255 255 255 / 90%);
+.modal {
+	border-radius: var(--border-radius-base);
 	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
-	border-radius: 6px;
+	background-color: rgb(255 255 255 / 90%);
 	border: 1px solid rgb(255 255 255 / 98%);
-	text-align: center;
-}
 
-.ui-dialog .ui-dialog-content {
-	color: #535353;
-	padding: 20px 26px 30px;
+	@media (--viewport-small) {
+		min-width: 360px;
+		max-width: 550px;
+	}
 }
 
-.ui-dialog .ui-dialog-title {
-	margin: 0;
+.modal-title {
 	color: #305ba9;
 	font-size: 1rem;
-	text-transform: none;
-	letter-spacing: -0.01em;
 	text-align: center;
-	float: none;
-	font-weight: 500;
+	padding: 15px 20px 0;
 }
 
-.ui-widget-overlay {
-	background-color: rgb(0 0 0 / 60%);
+.modal-message {
+	color: #535353;
+	text-align: center;
+	padding: 25px 20px;
 }
 
-.ui-dialog .ui-dialog-buttonpane {
-	border-color: #fff;
+.modal-options {
 	box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
-	margin-top: 0;
-	padding: 0;
-}
-
-.ui-dialog .ui-dialog-buttonpane button {
-	margin: 0.5em 0.5em 0.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%);
+	display: flex;
+	justify-content: flex-end;
+	padding: 10px;
 }
 
 /* Shortcuts panel

web/css/src/themes/flat.css

@@ -156,12 +156,8 @@ strong {
 /* Modals
    ========================================================================== */
 
-.ui-dialog {
+.modal {
 	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
-
-	& .ui-dialog-buttonpane button:nth-of-type(2) {
-		box-shadow: none;
-	}
 }
 
 /* Login

web/css/src/themes/vestia.css

@@ -316,25 +316,15 @@ strong {
 /* Modals
    ========================================================================== */
 
-.ui-dialog {
+.modal {
 	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
-
-	& .ui-dialog-buttonpane button {
-		box-shadow: none;
-	}
-}
-
-.ui-widget,
-.ui-dialog,
-.ui-dialog .ui-dialog-title {
-	font-family: var(--font-family);
 }
 
-.ui-dialog .ui-dialog-title {
+.modal-title {
 	color: #111;
 }
 
-.ui-dialog .ui-dialog-content {
+.modal-message {
 	color: #333;
 }