Skip to content

Commit 54f4a2a

Browse files
Kr3muKr3mu
committed
Updates the UI of esx_menu_dialog to match esx_menu_default, replace absolute units with vh
1 parent d95daf1 commit 54f4a2a

File tree

2 files changed

+86
-87
lines changed

2 files changed

+86
-87
lines changed

‎[core]/esx_menu_dialog/html/css/app.css‎

Lines changed: 86 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,132 @@
1-
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
22

33
#controls {
4-
font-family: montserrat;
5-
font-size: 3em;
6-
color: #fff;
7-
position: absolute;
8-
bottom: 40;
9-
right: 40;
4+
font-family: "Poppins", sans-serif;
5+
font-size: 2.77vh;
6+
color: #fff;
7+
position: absolute;
8+
bottom: 3.7vh;
9+
right: 3.7vh;
1010
}
1111

1212
.controls {
13-
display: none;
13+
display: none;
1414
}
1515

1616
.dialog {
17-
font-family: montserrat;
18-
background: rgba(33, 33, 33, 0.8);
19-
color: #fff;
20-
position: absolute;
21-
border-top-left-radius: 5px;
22-
border-top-right-radius: 5px;
23-
overflow: hidden;
24-
top: 50%;
25-
left: 50%;
26-
width: 600px;
27-
height: 152px;
28-
transform: translate(-50%, -50%);
17+
font-family: "Poppins", sans-serif;
18+
background: #212121;
19+
color: #fff;
20+
position: absolute;
21+
border-radius: 0.46vh;
22+
overflow: hidden;
23+
top: 50%;
24+
left: 50%;
25+
width: 55.6vh;
26+
height: 14.1vh;
27+
padding-bottom: 1vh;
28+
transform: translate(-50%, -50%);
2929
}
3030

3131
.head {
32-
display: flex;
33-
flex-basis: 100%;
34-
align-items: center;
35-
color: #fff;
32+
display: flex;
33+
flex-basis: 100%;
34+
align-items: center;
35+
justify-content: center;
36+
color: #fff;
37+
font-size: 1.6vh;
38+
font-weight: 500;
39+
text-transform: uppercase;
3640
}
3741

3842
.dialog.big {
39-
height: 200px;
43+
height: 18.5vh;
4044
}
4145

4246
.dialog .head {
43-
background: rgba(25, 25, 25, 0.9);
44-
text-align: center;
45-
height: 40px;
47+
background: #161616;
48+
text-align: center;
49+
height: 3.7vh;
4650
}
4751

4852
.dialog .head span::before {
49-
content: "";
50-
display: inline-block;
51-
height: 100%;
52-
vertical-align: middle;
53+
content: "";
54+
display: inline-block;
55+
height: 100%;
56+
vertical-align: middle;
5357
}
5458

5559
.dialog input[type="text"] {
56-
width: 60%;
57-
height: 32px;
58-
outline: 0;
59-
background: none;
60-
text-align: center;
61-
margin-top: 26px;
62-
margin-left: 125px;
63-
font-size: large;
64-
transition: all 0.2s ease-in-out;
65-
color: white;
66-
border: 0.5px solid #ffffff3b;
67-
border-radius: 0px;
60+
width: 60%;
61+
height: 2.96vh;
62+
outline: 0;
63+
background: none;
64+
text-align: center;
65+
margin-top: 2.4vh;
66+
margin-left: 11.6vh;
67+
font-size: 1.48vh;
68+
transition: all 0.2s ease-in-out;
69+
color: white;
70+
border: 0.05vh solid #ffffff3b;
71+
border-radius: 0.3vh;
6872
}
6973

7074
.dialog input[type="text"]:active,
7175
.dialog input[type="text"]:hover {
72-
color: white;
76+
color: white;
7377
}
7478

7579
.dialog textarea {
76-
width: 100%;
77-
height: 128px;
80+
width: 100%;
81+
height: 11.85vh;
7882
}
7983

8084
.dialog button[name="submit"] {
81-
width: 17.6%;
82-
height: 32px;
83-
margin-left: 160px;
84-
font-weight: 300;
85-
color: rgb(37, 34, 53);
86-
border-radius: 10px;
87-
text-transform: uppercase;
88-
background: rgb(50, 79, 208);
89-
outline: 0;
90-
border: none;
91-
transition: all 0.2s ease-in-out;
85+
width: 17.6%;
86+
height: 2.96vh;
87+
margin-left: 14.8vh;
88+
font-weight: 500;
89+
90+
color: #fb9b04;
91+
border-radius: 0.5vh;
92+
font-size: 1.2vh;
93+
background: #fb9c0433;
94+
outline: 0;
95+
border: none;
96+
transition: all 0.2s ease-in-out;
9297
}
9398

9499
.dialog button {
95-
z-index: 9999;
96-
transform: translate(-0%, 50%);
100+
z-index: 9999;
101+
transform: translate(-0%, 50%);
97102
}
98103

99104
.dialog button[name="cancel"] {
100-
width: 17.6%;
101-
height: 32px;
102-
margin-left: 60px;
103-
border: none;
104-
text-transform: uppercase;
105-
font-weight: 200;
106-
border-radius: 10px;
107-
color: rgb(53, 34, 34);
108-
outline: 0;
109-
background: #c74545;
110-
transition: all 0.2s ease-in-out;
105+
width: 17.6%;
106+
height: 2.96vh;
107+
margin-left: 5.6vh;
108+
109+
font-weight: 500;
110+
111+
color: #fefefe;
112+
border-radius: 0.5vh;
113+
font-size: 1.2vh;
114+
background: #94949433;
115+
outline: 0;
116+
border: none;
117+
transition: all 0.2s ease-in-out;
111118
}
112119

113120
.dialog button[name="cancel"]:hover {
114-
letter-spacing: 1px;
115-
color: #ffffff;
116-
width: 17.6%;
121+
letter-spacing: 0.09vh;
122+
transform: scale(1.05) translate(-0%, 50%);
117123
}
118124

119125
.dialog button[name="submit"]:hover {
120-
letter-spacing: 1px;
121-
color: white;
122-
width: 17.6%;
123-
}
124-
125-
.head::before,
126-
.head::after {
127-
content: "";
128-
flex-grow: 1;
129-
background: #00e1ff;
130-
height: 2px;
131-
margin: 0px 3px;
126+
letter-spacing: 0.09vh;
127+
transform: scale(1.05) translate(-0%, 50%);
128+
}
129+
130+
* {
131+
font-family: Poppins !important;
132132
}

‎[core]/esx_menu_dialog/html/ui.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<meta charset="utf-8" />
44
<link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css" />
55
<link rel="preconnect" href="https://fonts.gstatic.com" />
6-
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
76
</head>
87

98
<body>

0 commit comments

Comments
 (0)