Skip to content

Commit 9c2004f

Browse files
AlecRustAlecRust
authored
Replace jQuery UI dialogs with <dialog> (hestiacp#3401)
1 parent 7237caf commit 9c2004f

33 files changed

+218
-348
lines changed

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

Lines changed: 1 addition & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,7 @@
11
/*
2-
* Some parts of jQuery UI v1.13.2
2+
* "Tabs" CSS from jQuery UI v1.13.2
33
*/
44

5-
/* Dialog */
6-
.ui-dialog {
7-
position: absolute;
8-
top: 0;
9-
left: 0;
10-
padding: 0.2em;
11-
outline: 0;
12-
}
13-
.ui-dialog .ui-dialog-titlebar {
14-
padding: 0.4em 1em;
15-
position: relative;
16-
}
17-
.ui-dialog .ui-dialog-title {
18-
float: left;
19-
margin: 0.1em 0;
20-
white-space: nowrap;
21-
width: 90%;
22-
overflow: hidden;
23-
text-overflow: ellipsis;
24-
}
25-
.ui-dialog .ui-dialog-titlebar-close {
26-
position: absolute;
27-
right: 0.3em;
28-
top: 50%;
29-
width: 20px;
30-
margin: -10px 0 0 0;
31-
padding: 1px;
32-
height: 20px;
33-
}
34-
.ui-dialog .ui-dialog-content {
35-
position: relative;
36-
border: 0;
37-
padding: 0.5em 1em;
38-
background: none;
39-
overflow: auto;
40-
}
41-
.ui-dialog .ui-dialog-buttonpane {
42-
text-align: left;
43-
border-width: 1px 0 0 0;
44-
background-image: none;
45-
margin-top: 0.5em;
46-
padding: 0.3em 1em 0.5em 0.4em;
47-
}
48-
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
49-
float: right;
50-
}
51-
.ui-dialog .ui-dialog-buttonpane button {
52-
margin: 0.5em 0.4em 0.5em 0;
53-
cursor: pointer;
54-
}
55-
.ui-dialog .ui-resizable-n {
56-
height: 2px;
57-
top: 0;
58-
}
59-
.ui-dialog .ui-resizable-e {
60-
width: 2px;
61-
right: 0;
62-
}
63-
.ui-dialog .ui-resizable-s {
64-
height: 2px;
65-
bottom: 0;
66-
}
67-
.ui-dialog .ui-resizable-w {
68-
width: 2px;
69-
left: 0;
70-
}
71-
.ui-dialog .ui-resizable-se,
72-
.ui-dialog .ui-resizable-sw,
73-
.ui-dialog .ui-resizable-ne,
74-
.ui-dialog .ui-resizable-nw {
75-
width: 7px;
76-
height: 7px;
77-
}
78-
.ui-dialog .ui-resizable-se {
79-
right: 0;
80-
bottom: 0;
81-
}
82-
.ui-dialog .ui-resizable-sw {
83-
left: 0;
84-
bottom: 0;
85-
}
86-
.ui-dialog .ui-resizable-ne {
87-
right: 0;
88-
top: 0;
89-
}
90-
.ui-dialog .ui-resizable-nw {
91-
left: 0;
92-
top: 0;
93-
}
94-
95-
/* Tabs */
965
.ui-tabs {
976
position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
987
padding: 0.2em;
@@ -145,12 +54,3 @@
14554
.ui-helper-clearfix:after {
14655
clear: both;
14756
}
148-
149-
/* Overlays */
150-
.ui-widget-overlay {
151-
position: fixed;
152-
top: 0;
153-
left: 0;
154-
width: 100%;
155-
height: 100%;
156-
}

‎web/css/src/themes/dark.css‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -566,7 +566,7 @@ strong {
566566
text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
567567
font-weight: 400;
568568
border-color: #707070;
569-
background: rgb(48 48 48);
569+
background: #303030;
570570
background: linear-gradient(
571571
0deg,
572572
rgb(48 48 48 / 100%) 0%,
@@ -591,8 +591,22 @@ strong {
591591
inset 0 0 3px rgb(0 0 0 / 65%);
592592
}
593593

594-
&:active,
595594
&:focus {
595+
color: #eee;
596+
text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
597+
border-color: #0090ff;
598+
background: #303030;
599+
background: linear-gradient(
600+
0deg,
601+
rgb(48 48 48 / 100%) 0%,
602+
rgb(53 53 53 / 100%) 35%,
603+
rgb(69 69 69 / 100%) 100%
604+
);
605+
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px rgb(20 20 20 / 100%),
606+
inset 0 0 3px rgb(0 0 0 / 50%);
607+
}
608+
609+
&:active {
596610
color: #d4d4d4;
597611
text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
598612
border-color: #0066b4;
@@ -760,31 +774,22 @@ strong {
760774
/* Modals
761775
========================================================================== */
762776

763-
.ui-dialog .ui-dialog-buttonpane {
764-
border-top: 1px solid #404040;
765-
}
766-
767-
.ui-dialog .ui-dialog-buttonpane button {
768-
box-shadow: 0 1px 4px rgb(0 0 0 / 10%), inset 0 0 1px #000, inset 0 0 3px rgb(0 0 0 / 50%);
769-
}
770-
771-
.ui-dialog {
777+
.modal {
772778
background-color: rgb(45 45 45 / 95%);
773-
border: 1px solid rgb(80 80 80 / 97%);
779+
border-color: rgb(80 80 80 / 97%);
774780
box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 25px rgb(0 0 0 / 90%);
775-
}
776781

777-
.ui-dialog .ui-dialog-content {
778-
color: #dadada;
782+
& p {
783+
color: #dadada;
784+
}
779785
}
780786

781-
.ui-dialog .ui-dialog-title {
787+
.modal-title {
782788
color: #f12569;
783-
font-weight: 600;
784789
}
785790

786-
.ui-widget-header a {
787-
color: #cacaca;
791+
.modal-options {
792+
border-top: 1px solid #404040;
788793
}
789794

790795
/* Shortcuts panel

‎web/css/src/themes/default.css‎

Lines changed: 20 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1719,60 +1719,38 @@
17191719
/* Modals
17201720
========================================================================== */
17211721

1722-
.dialog {
1723-
display: none;
1724-
}
1725-
1726-
/* Hide the default close button in dialog header */
1727-
.ui-dialog-titlebar-close {
1728-
display: none;
1729-
}
1730-
1731-
/* Set dialog z-index */
1732-
.ui-front {
1733-
z-index: 2;
1734-
}
1735-
1736-
.ui-dialog {
1737-
font-family: Exo, system-ui;
1738-
font-weight: 500;
1739-
background-color: rgb(255 255 255 / 90%);
1722+
.modal {
1723+
text-transform: none;
1724+
border-radius: var(--border-radius-base);
17401725
box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
1741-
border-radius: 6px;
1726+
background-color: rgb(255 255 255 / 90%);
17421727
border: 1px solid rgb(255 255 255 / 98%);
1743-
text-align: center;
1744-
}
1728+
min-width: 360px;
1729+
max-width: 550px;
17451730

1746-
.ui-dialog .ui-dialog-content {
1747-
color: #535353;
1748-
padding: 20px 26px 30px;
1731+
& p {
1732+
color: #535353;
1733+
text-align: center;
1734+
padding: 10px 20px 30px;
1735+
}
17491736
}
17501737

1751-
.ui-dialog .ui-dialog-title {
1752-
margin: 0;
1738+
.modal-title {
17531739
color: #305ba9;
17541740
font-size: 1rem;
1755-
text-transform: none;
1756-
letter-spacing: -0.01em;
17571741
text-align: center;
1758-
float: none;
1759-
font-weight: 500;
1760-
}
1761-
1762-
.ui-widget-overlay {
1763-
background-color: rgb(0 0 0 / 60%);
1742+
padding: 15px;
17641743
}
17651744

1766-
.ui-dialog .ui-dialog-buttonpane {
1767-
border-color: #fff;
1745+
.modal-options {
17681746
box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
1769-
margin-top: 0;
1770-
padding: 0;
1771-
}
1747+
display: flex;
1748+
justify-content: flex-end;
1749+
padding: 10px;
17721750

1773-
.ui-dialog .ui-dialog-buttonpane button {
1774-
margin: 0.5em 0.5em 0.5em 0;
1775-
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px #fff, inset 0 0 3px rgb(255 255 255 / 50%);
1751+
& button {
1752+
margin-left: 6px;
1753+
}
17761754
}
17771755

17781756
/* Shortcuts panel

‎web/css/src/themes/flat.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -156,12 +156,8 @@ strong {
156156
/* Modals
157157
========================================================================== */
158158

159-
.ui-dialog {
159+
.modal {
160160
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
161-
162-
& .ui-dialog-buttonpane button:nth-of-type(2) {
163-
box-shadow: none;
164-
}
165161
}
166162

167163
/* Login

‎web/css/src/themes/vestia.css‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -316,28 +316,18 @@ strong {
316316
/* Modals
317317
========================================================================== */
318318

319-
.ui-dialog {
319+
.modal {
320320
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
321321

322-
& .ui-dialog-buttonpane button {
323-
box-shadow: none;
322+
& p {
323+
color: #333;
324324
}
325325
}
326326

327-
.ui-widget,
328-
.ui-dialog,
329-
.ui-dialog .ui-dialog-title {
330-
font-family: var(--font-family);
331-
}
332-
333-
.ui-dialog .ui-dialog-title {
327+
.modal-title {
334328
color: #111;
335329
}
336330

337-
.ui-dialog .ui-dialog-content {
338-
color: #333;
339-
}
340-
341331
/* Forms
342332
========================================================================== */
343333

‎web/css/themes/dark.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/flat.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/vestia.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)