Skip to content

Commit 867fdeb

Browse files
JanHolgerJanHolger
committed
Added another theme by saitama called flat
1 parent 1ab3aef commit 867fdeb

9 files changed

Lines changed: 512 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,18 @@ AddEvent("OnDialogSubmit", function(dialog, button, firstName, lastName, gender)
2727
end)
2828
```
2929
![image](/screenshots/character-menu.png)
30+
31+
## Themes
32+
There are multiple themes and you can create your own ones.
33+
- default-dark
34+
- saitama
35+
- flat
36+
37+
To set the global theme:
38+
```lua
39+
Dialog.setGlobalTheme("flat")
40+
```
41+
To set a theme for just one dialog
42+
```lua
43+
Dialog.setDialogTheme(dialog, "flat")
44+
```

‎client.lua‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -266,9 +266,9 @@ AddEvent("OnKeyPress", function(key)
266266
end)
267267

268268
AddEvent("OnDialogUIReady", function()
269-
if lastOpened ~= -1 then
270-
showDialog(lastOpened)
271-
end
269+
if lastOpened ~= -1 then
270+
showDialog(lastOpened)
271+
end
272272
end)
273273

274274
AddFunctionExport("create", createDialog)

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
"dialog.js",
1212
"themes/default-dark.css",
1313
"themes/saitama.css",
14+
"themes/flat.css",
15+
"themes/fonts/source-sans-pro/SourceSansPro-Regular.ttf",
16+
"themes/fonts/source-sans-pro/SourceSansPro-Bold.ttf",
17+
"themes/fonts/JosefinSans/JosefinSans-Bold.ttf",
1418
"grid.css"
1519
]
1620
}

‎themes/flat.css‎

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
/* Theme made by Saitama__ */
2+
@font-face {
3+
font-family: SourceSansPro-Regular;
4+
src: url('fonts/source-sans-pro/SourceSansPro-Regular.ttf');
5+
}
6+
@font-face {
7+
font-family: SourceSansPro-Bold;
8+
src: url('fonts/source-sans-pro/SourceSansPro-Bold.ttf');
9+
}
10+
@font-face {
11+
font-family: JosefinSans-Bold;
12+
src: url('fonts/JosefinSans/JosefinSans-Bold.ttf');
13+
}
14+
* {
15+
font-family: sans-serif;
16+
}
17+
.input-c2 {
18+
padding-left: 1%;
19+
padding-right: 1%;
20+
width: 48%;
21+
}
22+
.input-c1 {
23+
padding: 0px;
24+
width: 100%;
25+
}
26+
.input-c3 {
27+
padding-left: 1%;
28+
padding-right: 1%;
29+
width: 31.333333%;
30+
}
31+
.spl-c1-1 {
32+
padding: 0px;
33+
width: 100%;
34+
}
35+
.spl-c2-1 {
36+
padding-left: 0%;
37+
padding-right: 1%;
38+
width: 49%;
39+
}
40+
.spl-c2-2 {
41+
padding-left: 1%;
42+
padding-right: 0%;
43+
width: 49%;
44+
}
45+
.spl-c3-1 {
46+
padding-left: 0%;
47+
padding-right: 1%;
48+
width: 32%;
49+
}
50+
.spl-c3-2 {
51+
padding-left: 1%;
52+
padding-right: 1%;
53+
width: 32%;
54+
}
55+
.spl-c3-3 {
56+
padding-left: 1%;
57+
padding-right: 0%;
58+
width: 32%;
59+
}
60+
.wrapper {
61+
width: 100vw;
62+
height: 100vh;
63+
text-align: center;
64+
}
65+
body {
66+
margin: 0px;
67+
}
68+
.menu {
69+
border-color: white;
70+
border-width: 2px;
71+
margin: 40px 0;
72+
top: 50%;
73+
position: relative;
74+
transform: translateY(-50%);
75+
padding: 50px;
76+
padding-top: 35px;
77+
background: rgba(25,25,25,0.9);
78+
border-radius: 10px;
79+
text-align: left;
80+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
81+
opacity: 0.90;
82+
}
83+
.menu-button {
84+
font-family: SourceSansPro-Regular;
85+
user-select: none;
86+
position: relative;
87+
width: 100%;
88+
margin-bottom: 5px;
89+
border:0;
90+
cursor: pointer;
91+
background: none;
92+
display: block;
93+
margin: 20px auto;
94+
text-align: center;
95+
border: 2px solid #3f72af;
96+
padding: 14px 40px;
97+
outline: none;
98+
color: white;
99+
border-radius: 24px;
100+
transition: 0.25s;
101+
font-size: 18px;
102+
}
103+
.menu-button:hover {
104+
background: #3f72af;
105+
}
106+
.menu-label {
107+
font-family: SourceSansPro-Bold;
108+
margin: 5px;
109+
font-weight: 800;
110+
color: white;
111+
text-transform: uppercase;
112+
font-size: 15px;
113+
pointer-events: none;
114+
user-select: none;
115+
margin-top: 100px;
116+
}
117+
.menu-title {
118+
font-family: SourceSansPro-Bold;
119+
margin: 5px;
120+
text-align: left;
121+
color: white;
122+
text-transform: uppercase;
123+
font-weight: 300;
124+
}
125+
.menu-info {
126+
text-align: center;
127+
color: white;
128+
font-size: 12px;
129+
}
130+
.menu-input-text {
131+
margin-bottom: 5px;
132+
width: calc(100% - 25px);
133+
margin-bottom: 5px;
134+
outline: none;
135+
color: #fff;
136+
border-color: white;
137+
border-width: 2px;
138+
font-size: 15px;
139+
margin-top: 10px;
140+
background: none;
141+
text-align: center;
142+
border: 2px solid #dbe2ef;
143+
outline: none;
144+
color: white;
145+
border-radius: 24px;
146+
transition: 0.25s;
147+
padding: 14px 10px;
148+
}
149+
/* .menu-input-text:focus {
150+
width: calc(100% - 15px);
151+
}
152+
*/
153+
hr {
154+
visibility: hidden;
155+
}
156+
.menu-select {
157+
-webkit-appearance: none;
158+
outline: none;
159+
width: 100%;
160+
padding: 3px;
161+
margin-bottom: 5px;
162+
border:0;
163+
background: none;
164+
text-align: center;
165+
border: 2px solid #dbe2ef;
166+
outline: none;
167+
color: white;
168+
border-radius: 24px;
169+
transition: 0.25s;
170+
padding: 14px 10px;
171+
margin-top: 10px;
172+
margin-bottom: 10px;
173+
}
174+
select{
175+
-webkit-appearance: none;
176+
outline: none;
177+
width: 100%;
178+
padding: 3px;
179+
margin-bottom: 5px;
180+
border:0;
181+
background: none;
182+
text-align: center;
183+
border: 2px solid #3f72af;
184+
outline: none;
185+
color: white;
186+
border-radius: 24px;
187+
transition: 0.25s;
188+
padding: 14px 10px;
189+
margin-top: 10px;
190+
margin-bottom: 10px;
191+
}
192+
select option{
193+
-webkit-appearance: none;
194+
outline: none;
195+
position: relative;
196+
width: 100%;
197+
height: 20px;
198+
display: flex;
199+
align-items: center;
200+
padding: 7px 7px;
201+
color: white;
202+
font-size: 13px;
203+
margin-bottom: 2px;
204+
}
205+
select option:active{
206+
-webkit-appearance: none;
207+
outline: none;
208+
background: #3f72af;
209+
color: white;
210+
border-radius: 10px;
211+
}
212+
.menu-select option {
213+
-webkit-appearance: none;
214+
outline: none;
215+
position: relative;
216+
width: 100%;
217+
height: 20px;
218+
display: flex;
219+
align-items: center;
220+
padding: 7px 7px;
221+
color: white;
222+
font-size: 13px;
223+
margin-bottom: 2px;
224+
}
225+
.menu-select option:hover {
226+
-webkit-appearance: none;
227+
outline: none;
228+
background: #3f72af;
229+
color: white;
230+
border-radius: 10px;
231+
}
232+
.menu-select option:active {
233+
-webkit-appearance: none;
234+
outline: none;
235+
background: #3f72af;
236+
color: white;
237+
border-radius: 10px;
238+
}
239+
.menu-select option:focus {
240+
-webkit-appearance: none;
241+
outline: none;
242+
background: #3f72af;
243+
color: white;
244+
border-radius: 10px;
245+
}
246+
.menu-select option:visited {
247+
-webkit-appearance: none;
248+
outline: none;
249+
background: #3f72af;
250+
color: white;
251+
border-radius: 10px;
252+
}
253+
.menu-select option::after {
254+
-webkit-appearance: none;
255+
outline: none;
256+
background: #3f72af;
257+
color: white;
258+
border-radius: 10px;
259+
}
260+
.menu-select option::before {
261+
-webkit-appearance: none;
262+
outline: none;
263+
background: #3f72af;
264+
color: white;
265+
border-radius: 10px;
266+
}
267+
input[type=checkbox] {
268+
-webkit-appearance: none;
269+
outline: none;
270+
margin-bottom: -5px;
271+
margin-top: 10px;
272+
padding: 10px;
273+
border-radius: 21px;
274+
border: 2px solid #3f72af;
275+
}
276+
input[type=checkbox]:checked {
277+
outline: none;
278+
background-color: #3f72af;
279+
background-image: linear-gradient(315deg, #7cffcb 0%, #74f2ce 74%);
280+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
281+
color: #99a1a7;
282+
}
283+
284+
select option:hover,
285+
select option:focus,
286+
select option:active,
287+
select option:checked
288+
{
289+
-webkit-appearance: none;
290+
background: linear-gradient(#3498db,#3498db);
291+
background-color: #3498db !important;
292+
border-radius: 10px;
293+
color:white;
294+
}
295+
296+
::-webkit-scrollbar {
297+
visibility: hidden;
298+
}
299+
::-webkit-scrollbar-track {
300+
visibility: hidden;
301+
}
302+
::-webkit-scrollbar-thumb {
303+
visibility: hidden;
304+
}

‎themes/fonts/JosefinSans/JosefinSans-Bold.ttf‎

84.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)