Atlas - template.css
Home / ext / SDL / examples
Lines: 1 | Size: 4017 bytes
[Download] [Show on GitHub] [Search similar files] [Raw] [Raw (proxy)] 
[FILE BEGIN]
1/** from ghwikipp.css */
2:root {
3  color-scheme: dark light; /* both supported */
4}
5
6body {
7  background-color: white;
8  padding: 2vw;
9  color: #333;
10  max-width: 1200px;
11  margin: 0 auto;
12  font-size: 16px;
13  line-height: 1.5;
14  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
15    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
16  overflow-wrap: break-word;
17}
18
19a {
20  color: #0969da;
21  /* text-decoration: none; */
22}
23
24a:visited {
25  color: #064998;
26}
27
28h1 {
29  border-bottom: 2px solid #efefef;
30}
31
32h2 {
33  border-bottom: 1px solid #efefef;
34}
35
36p {
37  max-width: 85ch;
38}
39
40li {
41  max-width: 85ch;
42}
43
44div.sourceCode {
45  background-color: #f6f8fa;
46  max-width: 100%;
47  padding: 16px;
48}
49
50code {
51  background-color: #f6f8fa;
52  padding: 0px;
53  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
54    "Liberation Mono", monospace;
55}
56
57table {
58  border: 1px solid #808080;
59  border-collapse: collapse;
60}
61
62td {
63  border: 1px solid #808080;
64  padding: 5px;
65}
66
67tr:nth-child(even) {
68  background-color: #f6f8fa;
69}
70
71.wikitopbanner {
72  background-color: #efefef;
73  padding: 10px;
74  margin-bottom: 10px;
75  width: auto;
76}
77
78.wikibottombanner {
79  background-color: #efefef;
80  padding: 10px;
81  margin-top: 10px;
82  width: auto;
83}
84
85.alertBox {
86  background-color: #f8d7da;
87  border: 1px solid #f5c6cb;
88  max-width: 60%;
89  padding: 10;
90  margin: auto;
91}
92
93.anchorImage {
94  visibility: hidden;
95  padding-left: 0.2em;
96  color: #fff;
97}
98
99.anchorText:hover .anchorImage {
100  visibility: visible;
101}
102
103hr {
104  display: block;
105  height: 1px;
106  border: 0;
107  border-top: 1px solid #efefef;
108  margin: 1em 0;
109  padding: 0;
110}
111
112/* Text and background color for dark mode */
113@media (prefers-color-scheme: dark) {
114  body {
115    color: #e6edf3;
116    background-color: #0d1117;
117  }
118
119  h1 {
120    border-color: rgba(48, 54, 61, 0.7);
121  }
122
123  h2 {
124    border-color: rgba(48, 54, 61, 0.7);
125  }
126
127  hr {
128    border-color: rgba(48, 54, 61, 0.7);
129  }
130
131  div.sourceCode {
132    background-color: #161b22;
133  }
134
135  code {
136    background-color: #161b22;
137  }
138
139  a {
140    color: #4493f8;
141  }
142
143  a:visited {
144    color: #2f66ad;
145  }
146
147  table {
148    border-color: rgba(48, 54, 61, 0.7);
149  }
150
151  td {
152    border-color: rgba(48, 54, 61, 0.7);
153  }
154
155  tr:nth-child(even) {
156    background-color: #161b22;
157  }
158
159  .wikitopbanner {
160    background-color: #263040;
161  }
162
163  .wikibottombanner {
164    background-color: #263040;
165  }
166
167  .anchorText:hover .anchorImage {
168    filter: invert(100%);
169  }
170}
171
172@media print {
173  body {
174    font-size: 12px;
175  }
176
177  table {
178    font-size: inherit;
179  }
180
181  a:visited {
182    color: #0969da;
183  }
184
185  .wikitopbanner,
186  .anchorText,
187  .wikibottombanner {
188    display: none;
189  }
190}
191
192/** additional (& overrides) for examples */
193header {
194  background-color: #efefef;
195  padding: 10px;
196  font-size: 2rem;
197}
198
199header > a,
200header > a:hover,
201header > a:visited {
202  color: inherit;
203  text-decoration: none;
204}
205
206.breadcrumb {
207  padding: 0.75rem 0.75rem;
208}
209
210.breadcrumb ul {
211  display: flex;
212  flex-wrap: wrap;
213  list-style: none;
214  margin: 0;
215  padding: 0;
216}
217
218.breadcrumb li:not(:last-child)::after {
219  display: inline-block;
220  margin: 0 0.25rem;
221  content: "»";
222}
223
224.list {
225  display: flex;
226  flex-flow: row wrap;
227  gap: 24px;
228}
229
230.list > a > div {
231  width: 200px;
232  border: 5px solid #efefef;
233  border-radius: 5px;
234  background: #efefef;
235
236  display: flex;
237  flex-flow: column nowrap;
238
239  transition: border 0.25s;
240}
241
242.list > a > div:hover {
243  border-color: #064998;
244}
245
246.list > a > div > img {
247  width: 100%;
248  border-radius: 5px;
249}
250
251.list > a > div > div {
252  text-align: center;
253}
254
255.list > a,
256.list > a:visited {
257  display: block;
258  color: inherit;
259  text-decoration: none;
260}
261.list > a:hover {
262  color: #0969da;
263}
264
265@media (prefers-color-scheme: dark) {
266  header {
267    background-color: #263040;
268  }
269
270  .breadcrumb li:not(:last-child)::after {
271    color: #efefef;
272  }
273
274  .list > a > div {
275    border-color: #333;
276    background: #333;
277  }
278}
279
280@media only screen and (max-width: 992px) {
281  .list > a > div {
282    width: 150px;
283  }
284}
285
[FILE END]
(C) 2025 0x4248
(C) 2025 4248 Media and 4248 Systems, All part of 0x4248
See LICENCE files for more information. Not all files are by 0x4248 always check Licencing.