Skip to content

Commit a2a6fc5

Browse files
Fernando-A-RochaFernando-A-Rocha
committed
Add light/dark mode (dark is default)
1 parent ad5cb1b commit a2a6fc5

File tree

9 files changed

+324
-111
lines changed

9 files changed

+324
-111
lines changed

Diff for: ‎web/resources/article.html

+10-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1+
{{ article.content_html }}
12

2-
<div style="float: right; text-align: right; margin-bottom: 10px;">
3-
<div style="color: #fff; font-size: 1em;">
4-
Article: <strong>{{ article.title }}</strong>
5-
<a style="margin-left: 2px;" href="https://github.com/multitheftauto/mtasa-wiki/blob/main/CONTRIBUTING.md" rel="noopener" target="_blank">
6-
<i class="fa-regular fa-pen-to-square"></i>
7-
</a>
8-
</div>
9-
<div style="color: #b5b5b5; font-size: 0.8em; margin-top: 0.5em;">
10-
Written by <i class="fab fa-github"></i> <a href="https://github.com/{{ article.author }}" rel="noopener" target="_blank">{{ article.author }}</a> on {{ article.date }}
11-
</div>
3+
<br><br>
4+
<div style="text-align: right; color: var(--text-color-primary); font-size: 1em;">
5+
Article: <strong>{{ article.title }}</strong>
6+
<a style="margin-left: 2px;" href="https://github.com/multitheftauto/mtasa-wiki/blob/main/CONTRIBUTING.md" rel="noopener" target="_blank">
7+
<i class="fa-regular fa-pen-to-square"></i>
8+
</a>
9+
</div>
10+
<div style="text-align: right; color: var(--text-color-secondary); font-size: 0.8em; margin-top: 0.5em;">
11+
Written by <i class="fab fa-github"></i> <a href="https://github.com/{{ article.author }}" rel="noopener" target="_blank">{{ article.author }}</a> on {{ article.date }}
1212
</div>
13-
14-
{{ article.content_html }}

Diff for: ‎web/resources/assets/mta_nav.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/* Stylesheet for the MTA Navbar shared across multiple sites */
2+
3+
:root {
4+
--mtanav-bg-color: #0B0B0F;
5+
--mtanav-text-color: #9F9FA2;
6+
--mtanav-text-color-hover: #fff;
7+
--mtanav-green-color: lightgreen;
8+
}
9+
.light_mode {
10+
--mtanav-bg-color: #d1d1d1;
11+
--mtanav-text-color: #414141;
12+
--mtanav-text-color-hover: #000000;
13+
--mtanav-green-color: #00a21b;
14+
}
15+
16+
#mta-global-navbar {
17+
align-items: center;
18+
background: var(--mtanav-bg-color);
19+
color: var(--mtanav-text-color);
20+
display: flex;
21+
gap: 20px;
22+
height: 40px;
23+
padding: 0 1em;
24+
white-space: nowrap;
25+
overflow-x: scroll;
26+
overflow-y: hidden;
27+
scrollbar-width: none;
28+
-ms-overflow-style: none;
29+
}
30+
31+
#mta-global-navbar::-webkit-scrollbar {
32+
display: none;
33+
}
34+
35+
#mta-global-navbar a {
36+
color: var(--mtanav-text-color);
37+
padding: 7px 0;
38+
}
39+
40+
#mta-global-navbar a:hover {
41+
color: var(--mtanav-text-color-hover);
42+
}
43+
44+
#onlinePlayers {
45+
margin-left: auto;
46+
position: relative;
47+
}
48+
49+
@keyframes onlinePlayers {
50+
from { opacity: 0; }
51+
to { opacity: 1; }
52+
}
53+
54+
#onlinePlayers:not(:empty)::before {
55+
animation: onlinePlayers 1s infinite forwards alternate;
56+
background: var(--mtanav-green-color);
57+
border-radius: 100px;
58+
content: " ";
59+
display: inline-block;
60+
height: 6px;
61+
top: 50%;
62+
left: -6px;
63+
margin-left: 10px;
64+
opacity: 0;
65+
position: relative;
66+
transform: translate(-50%, -50%);
67+
width: 6px;
68+
}
69+

Diff for: ‎web/resources/assets/prism.css

-3
This file was deleted.

Diff for: ‎web/resources/assets/prism.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎web/resources/assets/prism_custom.css

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/* PrismJS 1.29.0
2+
/**
3+
* https://prismjs.com/
4+
* This is dark and light themes combined in one CSS file
5+
* toggleable with .light_mode class on body
6+
*/
7+
8+
:root {
9+
--prismjs_color-1: #f8f8f2;
10+
--prismjs_color-2: rgba(0, 0, 0, 0.3);
11+
--prismjs_color-3: #272822;
12+
--prismjs_color-4: #8292a2;
13+
--prismjs_color-5: #f92672;
14+
--prismjs_color-6: #ae81ff;
15+
--prismjs_color-7: #a6e22e;
16+
--prismjs_color-8: #e6db74;
17+
--prismjs_color-9: #66d9ef;
18+
--prismjs_color-10: #fd971f;
19+
}
20+
.light_mode {
21+
--prismjs_color-1: black;
22+
--prismjs_color-2: white;
23+
--prismjs_color-3: #f5f5f5;
24+
--prismjs_color-4: #8292a2;
25+
--prismjs_color-5: #905;
26+
--prismjs_color-6: #d1740a;
27+
--prismjs_color-7: #690;
28+
--prismjs_color-8: rgb(192, 125, 0);
29+
--prismjs_color-9: #07a;
30+
--prismjs_color-10: #d1740a;
31+
}
32+
33+
code[class*="language-"],
34+
pre[class*="language-"] {
35+
color: var(--prismjs_color-1);
36+
background: none;
37+
text-shadow: 0 1px var(--prismjs_color-2);
38+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
39+
font-size: 1em;
40+
text-align: left;
41+
white-space: pre;
42+
word-spacing: normal;
43+
word-break: normal;
44+
word-wrap: normal;
45+
line-height: 1.5;
46+
47+
-moz-tab-size: 4;
48+
-o-tab-size: 4;
49+
tab-size: 4;
50+
51+
-webkit-hyphens: none;
52+
-moz-hyphens: none;
53+
-ms-hyphens: none;
54+
hyphens: none;
55+
}
56+
57+
/* Code blocks */
58+
pre[class*="language-"] {
59+
padding: 1em;
60+
margin: .5em 0;
61+
overflow: auto;
62+
border-radius: 0.3em;
63+
}
64+
65+
:not(pre) > code[class*="language-"],
66+
pre[class*="language-"] {
67+
background: var(--prismjs_color-3);
68+
}
69+
70+
/* Inline code */
71+
:not(pre) > code[class*="language-"] {
72+
padding: .1em;
73+
border-radius: .3em;
74+
white-space: normal;
75+
}
76+
77+
.token.comment,
78+
.token.prolog,
79+
.token.doctype,
80+
.token.cdata {
81+
color: var(--prismjs_color-4);
82+
}
83+
84+
.token.punctuation {
85+
color: var(--prismjs_color-1);
86+
}
87+
88+
.token.namespace {
89+
opacity: .7;
90+
}
91+
92+
.token.property,
93+
.token.tag,
94+
.token.constant,
95+
.token.symbol,
96+
.token.deleted {
97+
color: var(--prismjs_color-5);
98+
}
99+
100+
.token.boolean,
101+
.token.number {
102+
color: var(--prismjs_color-6);
103+
}
104+
105+
.token.selector,
106+
.token.attr-name,
107+
.token.string,
108+
.token.char,
109+
.token.builtin,
110+
.token.inserted {
111+
color: var(--prismjs_color-7);
112+
}
113+
114+
.token.operator,
115+
.token.entity,
116+
.token.url,
117+
.language-css .token.string,
118+
.style .token.string,
119+
.token.variable {
120+
color: var(--prismjs_color-1);
121+
}
122+
123+
.token.atrule,
124+
.token.attr-value,
125+
.token.function,
126+
.token.class-name {
127+
color: var(--prismjs_color-8);
128+
}
129+
130+
.token.keyword {
131+
color: var(--prismjs_color-9);
132+
}
133+
134+
.token.regex,
135+
.token.important {
136+
color: var(--prismjs_color-10);
137+
}
138+
139+
.token.important,
140+
.token.bold {
141+
font-weight: bold;
142+
}
143+
.token.italic {
144+
font-style: italic;
145+
}
146+
147+
.token.entity {
148+
cursor: help;
149+
}
150+
151+
152+
153+

0 commit comments

Comments
 (0)