diff options
Diffstat (limited to 'app.scss')
-rw-r--r-- | app.scss | 395 |
1 files changed, 0 insertions, 395 deletions
diff --git a/app.scss b/app.scss deleted file mode 100644 index 51110e1..0000000 --- a/app.scss +++ /dev/null | |||
@@ -1,395 +0,0 @@ | |||
1 | $primary-color: #3367d6; | ||
2 | $secondary-color: #4285f4; | ||
3 | |||
4 | |||
5 | // /!\ Keep background colors sync with `theme-color` meta info | ||
6 | $theme-light: ( | ||
7 | background: #f5f5f5, | ||
8 | card-background: #ffffff, | ||
9 | text: #363636, | ||
10 | text-title: #303030, | ||
11 | text-subtitle: #424242, | ||
12 | card-shadow: rgba(0, 0, 0, 0.1), | ||
13 | a-hover: #363636 | ||
14 | ); | ||
15 | $theme-dark: ( | ||
16 | background: #131313, | ||
17 | card-background: #2b2b2b, | ||
18 | text: #eaeaea, | ||
19 | text-title: #fafafa, | ||
20 | text-subtitle: #f5f5f5, | ||
21 | card-shadow: rgba(0, 0, 0, 0.4), | ||
22 | a-hover: #ffdd57 | ||
23 | ); | ||
24 | |||
25 | /* raleway-regular - latin */ | ||
26 | @font-face { | ||
27 | font-family: 'Raleway'; | ||
28 | font-style: normal; | ||
29 | font-weight: 400; | ||
30 | font-display: swap; | ||
31 | src: local('Raleway'), local('Raleway-Regular'), | ||
32 | url('./webfonts/raleway/raleway-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | ||
33 | url('./webfonts/raleway/raleway-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | ||
34 | } | ||
35 | |||
36 | /* lato-regular - latin */ | ||
37 | @font-face { | ||
38 | font-family: 'Lato'; | ||
39 | font-style: normal; | ||
40 | font-weight: 400; | ||
41 | font-display: swap; | ||
42 | src: local('Lato Regular'), local('Lato-Regular'), | ||
43 | url('./webfonts/lato/lato-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | ||
44 | url('./webfonts/lato/lato-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | ||
45 | } | ||
46 | |||
47 | @mixin theme($theme) { | ||
48 | background-color: map-get($theme, "background"); | ||
49 | color: map-get($theme, "text"); | ||
50 | a { | ||
51 | &:hover { | ||
52 | color: map-get($theme, "a-hover"); | ||
53 | } | ||
54 | } | ||
55 | |||
56 | .title { | ||
57 | color: map-get($theme, "text-title"); | ||
58 | } | ||
59 | .subtitle { | ||
60 | color: map-get($theme, "text-subtitle"); | ||
61 | } | ||
62 | |||
63 | .card { | ||
64 | background-color: map-get($theme, "card-background"); | ||
65 | box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow"); | ||
66 | &:hover { | ||
67 | background-color: map-get($theme, "card-background"); | ||
68 | } | ||
69 | } | ||
70 | |||
71 | .message { | ||
72 | background-color: map-get($theme, "card-background"); | ||
73 | .message-body { | ||
74 | color: map-get($theme, "text"); | ||
75 | } | ||
76 | } | ||
77 | |||
78 | .footer { | ||
79 | background-color: map-get($theme, "card-background"); | ||
80 | box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow"); | ||
81 | } | ||
82 | } | ||
83 | |||
84 | |||
85 | @mixin ellipsis() { | ||
86 | white-space: nowrap; | ||
87 | overflow: hidden; | ||
88 | text-overflow: ellipsis; | ||
89 | } | ||
90 | |||
91 | |||
92 | html { | ||
93 | height: 100%; | ||
94 | } | ||
95 | |||
96 | body { | ||
97 | font-family: 'Raleway', sans-serif; | ||
98 | height: 100%; | ||
99 | |||
100 | #app { | ||
101 | min-height: 100%; | ||
102 | transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; | ||
103 | |||
104 | // Default theme | ||
105 | @include theme($theme-light); | ||
106 | |||
107 | // System pref theme | ||
108 | @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { | ||
109 | @include theme($theme-light); | ||
110 | } | ||
111 | @media (prefers-color-scheme: dark) { | ||
112 | @include theme($theme-dark); | ||
113 | } | ||
114 | |||
115 | // User override theme | ||
116 | &.is-light { | ||
117 | @include theme($theme-light); | ||
118 | } | ||
119 | &.is-dark { | ||
120 | @include theme($theme-dark); | ||
121 | } | ||
122 | } | ||
123 | |||
124 | h1, h2, h3, h4, h5, h6 { | ||
125 | font-family: 'Lato', sans-serif; | ||
126 | } | ||
127 | |||
128 | h1 { | ||
129 | font-size: 2rem; | ||
130 | } | ||
131 | |||
132 | h2 { | ||
133 | font-size: 1.7rem; | ||
134 | margin-top: 2rem; | ||
135 | margin-bottom: 1rem; | ||
136 | |||
137 | .fas, .fab, .far { | ||
138 | margin-right: 10px; | ||
139 | } | ||
140 | |||
141 | span { | ||
142 | font-weight: bold; | ||
143 | color: $secondary-color; | ||
144 | } | ||
145 | } | ||
146 | |||
147 | [v-cloak] { | ||
148 | display: none | ||
149 | } | ||
150 | |||
151 | #bighead { | ||
152 | color: #ffffff; | ||
153 | |||
154 | .dashboard-title { | ||
155 | padding: 6px 0 0 80px; | ||
156 | } | ||
157 | |||
158 | .first-line { | ||
159 | height: 100px; | ||
160 | vertical-align: center; | ||
161 | background-color: $primary-color; | ||
162 | |||
163 | h1 { | ||
164 | margin-top: -12px; | ||
165 | font-size: 2rem; | ||
166 | } | ||
167 | |||
168 | .headline { | ||
169 | margin-top: 5px; | ||
170 | font-size: 0.9rem; | ||
171 | } | ||
172 | |||
173 | .container { | ||
174 | height: 80px; | ||
175 | padding: 10px 0; | ||
176 | } | ||
177 | |||
178 | .logo { | ||
179 | float: left; | ||
180 | i { | ||
181 | vertical-align: top; | ||
182 | padding: 8px 15px; | ||
183 | font-size: 50px | ||
184 | } | ||
185 | |||
186 | img { | ||
187 | padding: 10px; | ||
188 | max-height: 70px; | ||
189 | max-width: 70px; | ||
190 | } | ||
191 | } | ||
192 | } | ||
193 | .navbar, .navbar-menu { | ||
194 | background-color: $secondary-color; | ||
195 | |||
196 | a { | ||
197 | color: #ffffff; | ||
198 | &:hover, &:focus { | ||
199 | color: #ffffff; | ||
200 | background-color: lighten( $secondary-color, 5% ); | ||
201 | } | ||
202 | } | ||
203 | } | ||
204 | .navbar-end { | ||
205 | text-align: right; | ||
206 | } | ||
207 | } | ||
208 | |||
209 | #main-section { | ||
210 | margin-bottom: 2rem; | ||
211 | padding: 0; | ||
212 | |||
213 | h2 { | ||
214 | border-bottom: 1px dashed #ccc; | ||
215 | padding-bottom: 10px; | ||
216 | @include ellipsis(); | ||
217 | } | ||
218 | |||
219 | .title { | ||
220 | font-size: 1.1em; | ||
221 | @include ellipsis(); | ||
222 | } | ||
223 | |||
224 | .subtitle { | ||
225 | font-size: .9em; | ||
226 | @include ellipsis(); | ||
227 | } | ||
228 | |||
229 | .container { | ||
230 | padding: 1.2rem .75rem; | ||
231 | } | ||
232 | |||
233 | .message { | ||
234 | margin-top: 45px; | ||
235 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); | ||
236 | |||
237 | .message-header { | ||
238 | font-weight: bold; | ||
239 | } | ||
240 | |||
241 | .message-body { | ||
242 | border: none; | ||
243 | } | ||
244 | } | ||
245 | } | ||
246 | |||
247 | .media-content { | ||
248 | overflow: hidden; | ||
249 | text-overflow: inherit; | ||
250 | } | ||
251 | |||
252 | .tag { | ||
253 | color: $secondary-color; | ||
254 | background-color: $secondary-color; | ||
255 | position: absolute; | ||
256 | top: 1rem; | ||
257 | right: -0.2rem; | ||
258 | width: 3px; | ||
259 | overflow: hidden; | ||
260 | transition: all 0.2s ease-out; | ||
261 | padding: 0; | ||
262 | |||
263 | .tag-text { | ||
264 | display: none; | ||
265 | } | ||
266 | } | ||
267 | |||
268 | .card { | ||
269 | border-radius: 5px; | ||
270 | border: none; | ||
271 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); | ||
272 | transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; | ||
273 | |||
274 | a { | ||
275 | outline: none; | ||
276 | } | ||
277 | } | ||
278 | |||
279 | .card:hover { | ||
280 | transform: translate(0, -3px); | ||
281 | |||
282 | .tag { | ||
283 | width: auto; | ||
284 | color: #ffffff; | ||
285 | padding: 0 0.75em; | ||
286 | |||
287 | .tag-text { | ||
288 | display: block; | ||
289 | } | ||
290 | } | ||
291 | } | ||
292 | |||
293 | .card-content { | ||
294 | height: 85px; | ||
295 | padding: 1.3rem; | ||
296 | } | ||
297 | |||
298 | .layout-vertical { | ||
299 | .card { | ||
300 | border-radius: 0; | ||
301 | } | ||
302 | |||
303 | .column div:first-of-type .card { | ||
304 | border-radius: 5px 5px 0 0; | ||
305 | } | ||
306 | |||
307 | .column div:last-child .card { | ||
308 | border-radius: 0 0 5px 5px; | ||
309 | } | ||
310 | } | ||
311 | |||
312 | .footer { | ||
313 | position: fixed; | ||
314 | left: 0; | ||
315 | right: 0; | ||
316 | bottom: 0; | ||
317 | padding: 0.5rem; | ||
318 | text-align: left; | ||
319 | color: #676767; | ||
320 | font-size: 0.85rem; | ||
321 | transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; | ||
322 | } | ||
323 | |||
324 | .no-footer { | ||
325 | #main-section { | ||
326 | margin-bottom: 0; | ||
327 | } | ||
328 | |||
329 | .footer { | ||
330 | display: none; | ||
331 | } | ||
332 | } | ||
333 | |||
334 | .search-bar { | ||
335 | position: relative; | ||
336 | display: inline-block; | ||
337 | #search { | ||
338 | border: none; | ||
339 | background-color: lighten( $secondary-color, 6% ); | ||
340 | border-radius: 5px; | ||
341 | padding: 2px 12px 2px 30px; | ||
342 | margin: 0 0 0 12px; | ||
343 | transition: all 100ms linear; | ||
344 | color: #ffffff; | ||
345 | height: 30px; | ||
346 | width: 100px; | ||
347 | |||
348 | |||
349 | &:focus { | ||
350 | color: #000000; | ||
351 | width: 250px; | ||
352 | background-color: #ffffff; | ||
353 | } | ||
354 | } | ||
355 | |||
356 | .search-label::before { | ||
357 | font-family: 'Font Awesome 5 Free'; | ||
358 | position: absolute; | ||
359 | top: 4px; | ||
360 | left: 16px; | ||
361 | content: "\f002"; | ||
362 | font-weight: 900; | ||
363 | width: 20px; | ||
364 | height: 20px; | ||
365 | color: #ffffff; | ||
366 | } | ||
367 | |||
368 | &:focus-within .search-label::before { | ||
369 | color: #4a4a4a; | ||
370 | } | ||
371 | } | ||
372 | |||
373 | .icon-button { | ||
374 | display: inline-block; | ||
375 | padding: 0 12px; | ||
376 | } | ||
377 | |||
378 | .offline-message { | ||
379 | text-align: center; | ||
380 | margin: 35px 0; | ||
381 | |||
382 | i { | ||
383 | font-size: 2rem; | ||
384 | } | ||
385 | |||
386 | i.fa-redo-alt { | ||
387 | font-size: 1.3rem; | ||
388 | line-height: 1rem; | ||
389 | vertical-align: middle; | ||
390 | cursor: pointer; | ||
391 | color: #3273dc; | ||
392 | } | ||
393 | } | ||
394 | |||
395 | } | ||