aboutsummaryrefslogtreecommitdiffhomepage
path: root/app.scss
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
commitb9c5fcf085bed9c6100283133531b36bfbb06cf0 (patch)
tree7baa4d16c9d6c06745727c7c273065a29b8fc1d7 /app.scss
parentab7ac44c191e3b7dea696e76b74097e23f73b18c (diff)
downloadhomer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.gz
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.zst
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.zip
Build system integration using vue-cli.
Diffstat (limited to 'app.scss')
-rw-r--r--app.scss395
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
92html {
93 height: 100%;
94}
95
96body {
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}