Skip to content

Commit fe654fa

Browse files
GhzGarageGhzGarage
committed
Styling update
1 parent bb56120 commit fe654fa

File tree

8 files changed

+287
-253
lines changed

8 files changed

+287
-253
lines changed

‎html/css/drawtext.css‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap");
2-
31
:root {
2+
/* Typography */
3+
--font-primary: "Exo 2", sans-serif;
4+
--font-weight-regular: 400;
5+
--font-weight-medium: 500;
6+
--font-weight-bold: 700;
7+
--font-weight-light: 300;
8+
/* Colors */
9+
--md-primary: #1c75d2;
10+
--md-primary-container: #6facec;
11+
--md-error: #c10114;
12+
--md-error-container: #fe4255;
13+
--md-success: #20bb44;
14+
--md-success-container: #6ae587;
15+
--md-warning: #ff9800;
16+
--md-warning-container: #ffc107;
17+
--md-info: #2197f2;
18+
--md-info-container: #7ac1f7;
19+
--md-surface: #fffbff;
20+
--md-on-surface: #1c1b1f;
21+
22+
/* Custom Variables */
423
--primary-bg: rgba(23, 23, 23, 90%);
5-
--active-bg: #dc143c;
24+
--active-bg: var(--md-error);
625
--font-color: white;
26+
27+
/* Elevation */
28+
--md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
29+
30+
/* Border Radius */
31+
--md-radius-small: 5px;
32+
--md-radius-medium: 10px;
33+
--md-radius-extra-small: 0.15rem;
734
}
835

936
#drawtext-container {
@@ -13,8 +40,8 @@
1340
overflow: hidden;
1441
padding: 0;
1542
margin: 0;
16-
font-family: "Poppins", sans-serif !important;
17-
font-weight: 300;
43+
font-family: var(--font-primary) !important;
44+
font-weight: var(--font-weight-light);
1845
}
1946

2047
.text {
@@ -23,8 +50,8 @@
2350
color: var(--font-color);
2451
margin-top: 0.5rem;
2552
padding: 0.45rem;
26-
border-radius: 0.15rem;
27-
box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
53+
border-radius: var(--md-radius-extra-small);
54+
box-shadow: var(--md-elevation-1);
2855
}
2956

3057
@media (width: 3840px) and (height: 2160px) {
@@ -35,8 +62,8 @@
3562
overflow: hidden;
3663
padding: 0;
3764
margin: 0;
38-
font-family: "Poppins", sans-serif !important;
39-
font-weight: 300;
65+
font-family: var(--font-primary) !important;
66+
font-weight: var(--font-weight-light);
4067
font-size: 1.5vh;
4168
}
4269
}
@@ -94,4 +121,4 @@
94121
transition: 0.5s;
95122
left: -100px;
96123
opacity: 0;
97-
}
124+
}

‎html/css/style.css‎

Lines changed: 100 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,148 @@
1+
:root {
2+
/* Typography */
3+
--font-primary: "Exo 2", sans-serif;
4+
--font-weight-regular: 400;
5+
--font-weight-medium: 500;
6+
--font-weight-bold: 700;
7+
--font-weight-light: 300;
8+
9+
/* Colors */
10+
--md-primary: #0061a4;
11+
--md-on-primary: #ffffff;
12+
--md-primary-container: #d1e4ff;
13+
--md-on-primary-container: #001d36;
14+
15+
--md-error: #ba1a1a;
16+
--md-on-error: #ffffff;
17+
--md-error-container: #ffdad6;
18+
--md-on-error-container: #410002;
19+
20+
--md-success: #006e1c;
21+
--md-on-success: #ffffff;
22+
--md-success-container: #9df996;
23+
--md-on-success-container: #002106;
24+
25+
--md-warning: #7d5800;
26+
--md-on-warning: #ffffff;
27+
--md-warning-container: #ffdf93;
28+
--md-on-warning-container: #271900;
29+
30+
--md-info: #0062a1;
31+
--md-on-info: #ffffff;
32+
--md-info-container: #d0e4ff;
33+
--md-on-info-container: #001d35;
34+
35+
/* Surface colors */
36+
--md-surface: #fcfcff;
37+
--md-on-surface: #1a1c1e;
38+
--md-surface-variant: #dfe2eb;
39+
--md-on-surface-variant: #43474e;
40+
41+
/* Elevation */
42+
--md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
43+
44+
/* Border Radius */
45+
--md-radius-small: 4px;
46+
--md-radius-medium: 8px;
47+
}
48+
49+
* {
50+
font-family: var(--font-primary);
51+
font-weight: var(--font-weight-regular);
52+
}
53+
154
html::-webkit-scrollbar {
255
display: none;
356
}
457

558
@media (width: 3840px) and (height: 2160px) {
659
.success {
760
background-color: rgba(23, 23, 23, 90%);
8-
border-radius: 10px;
9-
box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
10-
border-left: 0.5rem solid #20bb44;
61+
color: var(--md-on-surface);
62+
box-shadow: var(--md-elevation-1);
63+
border-left: 0.5rem solid var(--md-success);
1164
font-size: 1.5vh;
1265
}
1366

1467
.primary {
1568
background-color: rgba(23, 23, 23, 90%);
16-
border-radius: 10px;
17-
box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
18-
border-left: 5px solid #1c75d2;
69+
color: var(--md-on-surface);
70+
box-shadow: var(--md-elevation-1);
71+
border-left: 5px solid var(--md-primary);
1972
font-size: 1.5vh;
2073
}
2174

2275
.error {
2376
background-color: rgba(23, 23, 23, 90%);
24-
border-radius: 10px;
25-
box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
26-
border-left: 5px solid #c10114;
77+
color: var(--md-on-surface);
78+
box-shadow: var(--md-elevation-1);
79+
border-left: 5px solid var(--md-error);
80+
font-size: 1.5vh;
81+
}
82+
83+
.warning {
84+
background-color: rgba(23, 23, 23, 90%);
85+
color: var(--md-on-surface);
86+
box-shadow: var(--md-elevation-1);
87+
border-left: 5px solid var(--md-warning);
2788
font-size: 1.5vh;
2889
}
2990

3091
.police {
3192
background-color: rgba(23, 23, 23, 90%);
32-
border-radius: 10px;
33-
box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
34-
border-left: 5px solid #2197f2;
93+
color: var(--md-on-surface);
94+
box-shadow: var(--md-elevation-1);
95+
border-left: 5px solid var(--md-info);
3596
font-size: 1.5vh;
3697
}
3798

3899
.ambulance {
39100
background-color: rgba(23, 23, 23, 90%);
40-
border-radius: 10px;
41-
box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
42-
border-left: 5px solid #f44236;
101+
color: var(--md-on-surface);
102+
box-shadow: var(--md-elevation-1);
103+
border-left: 5px solid var(--md-error);
43104
font-size: 1.5vh;
44105
}
45106
}
46107

47108
.success {
48-
background-color: #20bb44;
49-
border-radius: 5px;
50-
border: 1px solid #6ae587;
109+
background-color: var(--md-success-container);
110+
color: var(--md-on-success-container);
111+
padding: 12px 16px;
112+
font-weight: var(--font-weight-medium);
51113
}
52114

53115
.primary {
54-
background-color: #1c75d2;
55-
border-radius: 5px;
56-
border: 1px solid #6facec;
116+
background-color: var(--md-primary-container);
117+
color: var(--md-on-primary-container);
118+
padding: 12px 16px;
119+
font-weight: var(--font-weight-medium);
57120
}
58121

59122
.warning {
60-
background-color: #ff9800;
61-
border-radius: 5px;
62-
border: 1px solid #ffc107;
123+
background-color: var(--md-warning-container);
124+
color: var(--md-on-warning-container);
125+
padding: 12px 16px;
126+
font-weight: var(--font-weight-medium);
63127
}
64128

65129
.error {
66-
background-color: #c10114;
67-
border-radius: 5px;
68-
border: 1px solid #fe4255;
130+
background-color: var(--md-error-container);
131+
color: var(--md-on-error-container);
132+
padding: 12px 16px;
133+
font-weight: var(--font-weight-medium);
69134
}
70135

71136
.police {
72-
background-color: #2197f2;
73-
border-radius: 5px;
74-
border: 1px solid #7ac1f7;
137+
background-color: var(--md-info-container);
138+
color: var(--md-on-info-container);
139+
padding: 12px 16px;
140+
font-weight: var(--font-weight-medium);
75141
}
76142

77143
.ambulance {
78-
background-color: #f44236;
79-
border-radius: 5px;
80-
border: 1px solid #f88e86;
144+
background-color: var(--md-error-container);
145+
color: var(--md-on-error-container);
146+
padding: 12px 16px;
147+
font-weight: var(--font-weight-medium);
81148
}

‎html/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
3+
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
44
<link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
55
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
66
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
@@ -11,7 +11,7 @@
1111
<script src="js/drawtext.js"></script>
1212
<link rel="stylesheet" href="css/drawtext.css" />
1313
</head>
14-
<body style="font-family: 'Poppins', sans-serif">
14+
<body>
1515
<div id="q-app" style="min-height: 100vh"></div>
1616
<div id="drawtext-container">
1717
<div id="text" class="text"></div>

‎html/js/app.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
1-
import { registerWindowMethods } from "./testing.js";
2-
import { isEnvBrowser } from "./utils.js";
3-
import { determineStyleFromVariant, DEV_MODE, fetchNotifyConfig, NOTIFY_CONFIG } from "./config.js";
1+
import { determineStyleFromVariant, fetchNotifyConfig, NOTIFY_CONFIG } from "./config.js";
42

53
const { useQuasar } = Quasar;
64
const { onMounted, onUnmounted } = Vue;
75

6+
const fetchNui = async (evName, data) => {
7+
const resourceName = window.GetParentResourceName();
8+
9+
const rawResp = await fetch(`https://${resourceName}/${evName}`, {
10+
body: JSON.stringify(data),
11+
headers: {
12+
"Content-Type": "application/json; charset=UTF8",
13+
},
14+
method: "POST",
15+
});
16+
17+
return await rawResp.json();
18+
};
19+
20+
window.fetchNui = fetchNui;
21+
822
const app = Vue.createApp({
923
setup() {
1024
const $q = useQuasar();
1125

1226
const showNotif = async ({ data }) => {
13-
// Otherwise we process any old MessageEvent with a data property
1427
if (data?.action !== "notify") return;
1528

1629
const { text, length, type, caption, icon: dataIcon } = data;
@@ -20,21 +33,15 @@ const app = Vue.createApp({
2033
icon = dataIcon;
2134
}
2235

23-
// Make sure we have sucessfully fetched out config properly
2436
if (!NOTIFY_CONFIG) {
2537
console.error("The notification config did not load properly, trying again for next time");
26-
// Lets check again to see if it exists
2738
await fetchNotifyConfig();
28-
// If we have a config lets re-run notification with same data, this
29-
// isn't recursive though.
3039
if (NOTIFY_CONFIG) return showNotif({ data });
3140
}
3241

3342
$q.notify({
3443
message: text,
3544
multiLine: text.length > 100,
36-
// If our text is larger than a 100 characters,
37-
// we should use multiline notifications
3845
group: NOTIFY_CONFIG.NotificationStyling.group ?? false,
3946
progress: NOTIFY_CONFIG.NotificationStyling.progress ?? true,
4047
position: NOTIFY_CONFIG.NotificationStyling.position ?? "right",
@@ -56,7 +63,3 @@ const app = Vue.createApp({
5663

5764
app.use(Quasar, { config: {} });
5865
app.mount("#q-app");
59-
60-
if (DEV_MODE || isEnvBrowser()) {
61-
registerWindowMethods();
62-
}

0 commit comments

Comments
 (0)