Changeset View
Changeset View
Standalone View
Standalone View
_sass/base.scss
- This file was added.
1 | body { | ||||
---|---|---|---|---|---|
2 | font-family: 'Noto Sans', sans-serif; | ||||
3 | } | ||||
4 | | ||||
5 | p { | ||||
6 | line-height: 2em; | ||||
7 | } | ||||
8 | | ||||
9 | h1, h2, h3 { | ||||
10 | line-height: 1.5em; | ||||
11 | } | ||||
12 | | ||||
13 | ul > li { | ||||
14 | line-height: 2em; | ||||
15 | } | ||||
16 | | ||||
17 | .header { | ||||
18 | position: sticky; | ||||
19 | top: 0; | ||||
20 | display: block; | ||||
21 | z-index: 2; | ||||
22 | background-color: rgb(255, 255, 255); | ||||
23 | } | ||||
24 | | ||||
25 | .header > * { | ||||
26 | margin: auto; | ||||
27 | max-width: 1140px; | ||||
28 | } | ||||
29 | | ||||
30 | .header::after { | ||||
31 | content: ""; | ||||
32 | clear: both; | ||||
33 | display: block; | ||||
34 | background-size: 100% 5px; | ||||
35 | position: absolute; | ||||
36 | height: 5px; | ||||
37 | width: 100%; | ||||
38 | left: 0; | ||||
39 | bottom: 0; | ||||
40 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAFCAYAAACzSkmrAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACkSURBVDiN7dExDsIwDEbh9we1soXE6eCEbJyInQNwgKgxQ9WWFrIShr7ZkewvYm/V5fbwLj8NoKTec0lGzp66ZAzJS8jQ4EKG5KLY+FIeYBAOMoRHyFC4YJwpcqVixGYWnHHG1ebs700YHxBAHWM6DqoYHxBvswvGEegbnL1q/pAqxgQB1DE2EEAdY4aABeMEHH57+n+m8/UerZfYW0qtF9hb9wI2bU03vw4M8QAAAABJRU5ErkJggg=="); | ||||
41 | z-index: -1; | ||||
42 | } | ||||
43 | | ||||
44 | #kHeaderNav { | ||||
45 | padding: 0; | ||||
46 | position: relative; | ||||
47 | | ||||
48 | button { | ||||
49 | outline: 0; | ||||
50 | } | ||||
51 | | ||||
52 | .navbar-toggler { | ||||
53 | position: relative; | ||||
54 | } | ||||
55 | | ||||
56 | .navbar-toggler:before { | ||||
57 | position: absolute; | ||||
58 | top: 0; | ||||
59 | left: 50%; | ||||
60 | width: 42px; | ||||
61 | margin-left: -21px; | ||||
62 | content: "="; | ||||
63 | color: #4d4d4d; | ||||
64 | font-family: "glyph"; | ||||
65 | font-size: 22px; | ||||
66 | font-weight: normal; | ||||
67 | text-indent: 0px; | ||||
68 | text-align: center; | ||||
69 | line-height: 50px; | ||||
70 | display: inline-block; | ||||
71 | text-decoration: none !important; | ||||
72 | } | ||||
73 | | ||||
74 | a.nav-link, | ||||
75 | a.dropdown-item { | ||||
76 | color: #334545; | ||||
77 | height: 50px; | ||||
78 | line-height: 50px; | ||||
79 | padding: 0 20px; | ||||
80 | } | ||||
81 | | ||||
82 | a:hover { | ||||
83 | color: #3daefd; | ||||
84 | } | ||||
85 | | ||||
86 | .dropdown-menu { | ||||
87 | padding: 0; | ||||
88 | } | ||||
89 | | ||||
90 | a.active:hover, | ||||
91 | .dropdown-menu.show a.nav-link { | ||||
92 | color: #334545; | ||||
93 | } | ||||
94 | | ||||
95 | a:active, | ||||
96 | .active, | ||||
97 | a.dropdown-item:active, | ||||
98 | .navbar-brand-active, | ||||
99 | .dropdown-toggle.show a.nav-link { | ||||
100 | background: #54a3d8; | ||||
101 | color: #FFF; | ||||
102 | } | ||||
103 | | ||||
104 | .dropdown-toggle.show { | ||||
105 | position: relative; | ||||
106 | } | ||||
107 | | ||||
108 | .dropdown-toggle::after { | ||||
109 | content: "" !important; | ||||
110 | display: none; | ||||
111 | } | ||||
112 | | ||||
113 | .dropdown-toggle .nav-link::after { | ||||
114 | display: inline-block; | ||||
115 | width: 0; | ||||
116 | height: 0; | ||||
117 | margin-left: .5em; | ||||
118 | vertical-align: .255em; | ||||
119 | content: ""; | ||||
120 | border-top: .3em solid; | ||||
121 | border-right: .3em solid transparent; | ||||
122 | border-bottom: 0; | ||||
123 | border-left: .3em solid transparent; | ||||
124 | } | ||||
125 | | ||||
126 | .dropdown-menu { | ||||
127 | border-radius: 0px; | ||||
128 | border: 1px solid #54a3d8; | ||||
129 | border-top: none; | ||||
130 | margin: 0; | ||||
131 | padding: 0; | ||||
132 | background-color: initial; | ||||
133 | | ||||
134 | @media(min-width: 575px) { | ||||
135 | background-color: #fff; | ||||
136 | } | ||||
137 | | ||||
138 | a { | ||||
139 | display: block; | ||||
140 | text-align: center; | ||||
141 | text-decoration: none; | ||||
142 | background-size: 100%; | ||||
143 | background-position: center; | ||||
144 | background-repeat: no-repeat; | ||||
145 | transition: background-size 0.4s; | ||||
146 | position: relative; | ||||
147 | } | ||||
148 | | ||||
149 | a::before { | ||||
150 | content: ''; | ||||
151 | width: 100%; | ||||
152 | height: 100%; | ||||
153 | top: 0; | ||||
154 | left: 0; | ||||
155 | position: absolute; | ||||
156 | background-repeat: no-repeat; | ||||
157 | background-position: center; | ||||
158 | background-size: 101%; | ||||
159 | z-index: -1; | ||||
160 | transition: background-size 0.3s; | ||||
161 | } | ||||
162 | } | ||||
163 | | ||||
164 | a.kontact-menu-features::before { | ||||
165 | background-image: url(/assets/img/kontact-menu-features.png); | ||||
166 | } | ||||
167 | | ||||
168 | a.kontact-menu-features:hover::before { | ||||
169 | background-size: 150%; | ||||
170 | } | ||||
171 | | ||||
172 | a.kontact-menu-features { | ||||
173 | min-width: 360px; | ||||
174 | min-height: 150px; | ||||
175 | line-height: 150px; | ||||
176 | color: #334545; | ||||
177 | font-size: 1.5em; | ||||
178 | } | ||||
179 | | ||||
180 | .kontact-menu-apps { | ||||
181 | display: flex; | ||||
182 | flex-wrap: wrap; | ||||
183 | | ||||
184 | a { | ||||
185 | width: 50%; | ||||
186 | height: auto; | ||||
187 | position: relative; | ||||
188 | min-height: 100px; | ||||
189 | line-height: 100px; | ||||
190 | font-size: 1.3em; | ||||
191 | color: #334545; | ||||
192 | } | ||||
193 | | ||||
194 | a::before { | ||||
195 | background-size: 155%; | ||||
196 | opacity: 0.3; | ||||
197 | } | ||||
198 | | ||||
199 | a:hover::before { | ||||
200 | background-size: 65%; | ||||
201 | transition: background-size 0.3s; | ||||
202 | } | ||||
203 | } | ||||
204 | | ||||
205 | a.kontact-menu-apps-kmail::before { | ||||
206 | background-image: url(/assets/img/icon-kmail.svg); | ||||
207 | } | ||||
208 | a.kontact-menu-apps-korganizer::before { | ||||
209 | background-image: url(/assets/img/icon-korganizer.svg); | ||||
210 | } | ||||
211 | a.kontact-menu-apps-kaddressbook::before { | ||||
212 | background-image: url(/assets/img/icon-kaddressbook.svg); | ||||
213 | } | ||||
214 | a.kontact-menu-apps-akregator::before { | ||||
215 | background-image: url(/assets/img/icon-akregator.svg); | ||||
216 | } | ||||
217 | a.kontact-menu-apps-knotes::before { | ||||
218 | background-image: url(/assets/img/icon-knotes.svg); | ||||
219 | } | ||||
220 | a.kontact-menu-apps-akonadi::before { | ||||
221 | background-image: url(/assets/img/icon-akonadi.png); | ||||
222 | } | ||||
223 | | ||||
224 | .navbar-toggler { | ||||
225 | order: 2; | ||||
226 | } | ||||
227 | | ||||
228 | } /* #kHeaderNav */ | ||||
229 | | ||||
230 | #KontactGlobalLogo { | ||||
231 | margin: 0; | ||||
232 | margin-top: -3px; | ||||
233 | text-align: center; | ||||
234 | line-height: 50px; | ||||
235 | height: 50px; | ||||
236 | padding: 0 10px; | ||||
237 | order: 1; | ||||
238 | } | ||||
239 | | ||||
240 | #KontactGlobalLogo > img { | ||||
241 | width: 70%; | ||||
242 | margin-top: -3px; | ||||
243 | } | ||||
244 | | ||||
245 | #kMainNavbar { | ||||
246 | order: 4; | ||||
247 | | ||||
248 | @media(min-width: 768px) { | ||||
249 | order: 3; | ||||
250 | } | ||||
251 | } | ||||
252 | | ||||
253 | #KMadeByKDE { | ||||
254 | order: 3; | ||||
255 | padding-right: 15px; | ||||
256 | | ||||
257 | span { | ||||
258 | display: none; | ||||
259 | | ||||
260 | @media (min-width: 768px) { | ||||
261 | display: inline; | ||||
262 | } | ||||
263 | } | ||||
264 | | ||||
265 | @media (min-width: 768px) { | ||||
266 | order: 4; | ||||
267 | } | ||||
268 | } | ||||
269 | | ||||
270 | | ||||
271 | #KGlobalLogo::before { | ||||
272 | position: absolute; | ||||
273 | top: 0; | ||||
274 | width: 42px; | ||||
275 | margin-left: -21px; | ||||
276 | content: "K"; | ||||
277 | color: #4d4d4d; | ||||
278 | font-family: "glyph"; | ||||
279 | font-size: 32px; | ||||
280 | font-weight: normal; | ||||
281 | text-indent: 0px; | ||||
282 | text-align: center; | ||||
283 | line-height: 50px; | ||||
284 | display: inline-block; | ||||
285 | text-decoration: none !important; | ||||
286 | } | ||||
287 | | ||||
288 | main.main { | ||||
289 | margin: auto; | ||||
290 | margin-bottom: 50px; | ||||
291 | width: 100%; | ||||
292 | max-width: 1140px; | ||||
293 | padding: 0 30px; | ||||
294 | | ||||
295 | @media (min-width: 1140px) { | ||||
296 | padding-left: 0; | ||||
297 | padding-right: 0; | ||||
298 | } | ||||
299 | } | ||||
300 | | ||||
301 | main .block { | ||||
302 | padding: 30px 20px; | ||||
303 | } | ||||
304 | | ||||
305 | main.navfix { | ||||
306 | margin-top: 50px; /* compensate for sticky header */ | ||||
307 | } | ||||
308 | | ||||
309 | | ||||
310 | | ||||
311 | #kWelcome { | ||||
312 | font-size: 18px; | ||||
313 | border-radius: 2px; | ||||
314 | border: solid 1px #abdaf9; | ||||
315 | background-color: #e1f2ff; | ||||
316 | color: #375a7d; | ||||
317 | padding: 10px 20px; | ||||
318 | margin-top: 60px; | ||||
319 | margin-bottom: 60px; | ||||
320 | text-align: center; | ||||
321 | | ||||
322 | p { | ||||
323 | padding: 0; | ||||
324 | margin: 0; | ||||
325 | } | ||||
326 | } | ||||
327 | | ||||
328 | #kFooter { | ||||
329 | background-color: #eff1f1; | ||||
330 | color: #7f8c8d; | ||||
331 | position: relative; | ||||
332 | padding-top: 12px; | ||||
333 | font-size: 12px; | ||||
334 | width: 100%; | ||||
335 | clear: both; | ||||
336 | | ||||
337 | a { | ||||
338 | text-decoration: none; | ||||
339 | color: #2980b9; | ||||
340 | } | ||||
341 | | ||||
342 | section { | ||||
343 | width: 100%; | ||||
344 | max-width: 1140px; | ||||
345 | margin: auto; | ||||
346 | padding: 0 20px; | ||||
347 | } | ||||
348 | | ||||
349 | #KSiteDonateForm { | ||||
350 | background-color: #abf9c7; | ||||
351 | border: solid 1px #7ceca4; | ||||
352 | border-radius: 2px; | ||||
353 | margin-top: 10px; | ||||
354 | padding-top: 10px; | ||||
355 | padding-bottom: 10px; | ||||
356 | | ||||
357 | h3 { | ||||
358 | font-size: 14px; | ||||
359 | font-weight: bold; | ||||
360 | color: #377d50; | ||||
361 | padding: 0 0 10px; | ||||
362 | margin: 0; | ||||
363 | | ||||
364 | a { | ||||
365 | font-width: normal; | ||||
366 | margin-left: 20px; | ||||
367 | color: #2980b9; | ||||
368 | } | ||||
369 | | ||||
370 | a::before { | ||||
371 | content: "( "; | ||||
372 | color: #377d50; | ||||
373 | } | ||||
374 | | ||||
375 | a::after { | ||||
376 | content: " )"; | ||||
377 | color: #377d50; | ||||
378 | } | ||||
379 | } | ||||
380 | | ||||
381 | #otherWaysDonate { | ||||
382 | display: inline-block; | ||||
383 | font-size: 14px; | ||||
384 | margin-top: 10px; | ||||
385 | } | ||||
386 | } | ||||
387 | | ||||
388 | #KGlobalContributorLinks { | ||||
389 | padding: 0 20px; | ||||
390 | box-sizing: border-box; | ||||
391 | max-width: 100%; | ||||
392 | background-color: rgba(0, 0, 0, 0.05); | ||||
393 | position: relative; | ||||
394 | margin: auto; | ||||
395 | | ||||
396 | nav { | ||||
397 | max-width: 1100px; | ||||
398 | padding: 0; | ||||
399 | line-height: 50px; | ||||
400 | margin: auto; | ||||
401 | font-size: 14px; | ||||
402 | width: 100%; | ||||
403 | position: relative; | ||||
404 | } | ||||
405 | } | ||||
406 | | ||||
407 | #KGlobalLegalInfo { | ||||
408 | padding: 20px; | ||||
409 | | ||||
410 | small { | ||||
411 | font-size: 12px; | ||||
412 | } | ||||
413 | | ||||
414 | figure { | ||||
415 | display: inline-block; | ||||
416 | padding: 0; | ||||
417 | margin: 0; | ||||
418 | } | ||||
419 | | ||||
420 | small + small::before { | ||||
421 | content: " | "; | ||||
422 | color: #bdc3c7; | ||||
423 | margin: 0 10px; | ||||
424 | } | ||||
425 | } | ||||
426 | | ||||
427 | } /* #kFotter */ | ||||
428 | | ||||
429 | #kLinks { | ||||
430 | padding: 30px 20px 30px 0; | ||||
431 | | ||||
432 | nav { | ||||
433 | width: 20%; | ||||
434 | display: inline-block; | ||||
435 | box-sizing: border-box; | ||||
436 | vertical-align: top; | ||||
437 | font-size: 12px; | ||||
438 | padding: 10px 0 10px 20px; | ||||
439 | | ||||
440 | h3 { | ||||
441 | font-size: 14px; | ||||
442 | color: #95a5a6; | ||||
443 | margin: 0 0 10px 0; | ||||
444 | font-weight: bold; | ||||
445 | } | ||||
446 | } | ||||
447 | | ||||
448 | a { | ||||
449 | display: block; | ||||
450 | line-height: 150%; | ||||
451 | } | ||||
452 | | ||||
453 | a::after { | ||||
454 | color: #7f8c8d; | ||||
455 | position: relative; | ||||
456 | content: ">"; | ||||
457 | font-family: "glyph"; | ||||
458 | vertical-align: baseline; | ||||
459 | top: .1em; | ||||
460 | padding-left: 10px; | ||||
461 | } | ||||
462 | | ||||
463 | } /* kLinks */ | ||||
464 | | ||||
465 | .konqi { | ||||
466 | float: right; | ||||
467 | width: 250px; | ||||
468 | margin-top: -50px; | ||||
469 | margin-left: 40px; | ||||
470 | } | ||||
471 | | ||||
472 | .icon { | ||||
473 | margin-left: 20px; | ||||
474 | } | ||||
475 | | ||||
476 | .icon::before { | ||||
477 | content: ""; | ||||
478 | position: absolute; | ||||
479 | display: block; | ||||
480 | width: 32px; | ||||
481 | height: 50px; | ||||
482 | left: 5px; | ||||
483 | background-repeat: no-repeat; | ||||
484 | background-size: 24px; | ||||
485 | background-position: center; | ||||
486 | } | ||||
487 | | ||||
488 | .icon-kontact::before { | ||||
489 | background-image: url(/assets/img/icon-kontact.svg); | ||||
490 | } | ||||
491 | .icon-kmail::before { | ||||
492 | background-image: url(/assets/img/icon-kmail.svg); | ||||
493 | } | ||||
494 | .icon-korganizer::before { | ||||
495 | background-image: url(/assets/img/icon-korganizer.svg); | ||||
496 | } | ||||
497 | .icon-kaddressbook::before { | ||||
498 | background-image: url(/assets/img/icon-kaddressbook.svg); | ||||
499 | } | ||||
500 | .icon-knotes::before { | ||||
501 | background-image: url(/assets/img/icon-knotes.svg) | ||||
502 | } | ||||
503 | .icon-akregator::before { | ||||
504 | background-image: url(/assets/img/icon-akregator.svg) | ||||
505 | } | ||||
506 | | ||||
507 | .preview { | ||||
508 | cursor: pointer; | ||||
509 | } | ||||
510 | | ||||
511 | #kImagePreview { | ||||
512 | text-align: center; | ||||
513 | | ||||
514 | img { | ||||
515 | margin: auto; | ||||
516 | cursor: pointer; | ||||
517 | max-width: 100%; | ||||
518 | } | ||||
519 | } | ||||
520 | | ||||
521 | #kImagePreviewContainer { | ||||
522 | width: 100%; | ||||
523 | height: 100%; | ||||
524 | display: flex; | ||||
525 | flex-direction: column; | ||||
526 | align-items: center; | ||||
527 | pointer-events: none; | ||||
528 | } | ||||
529 | | ||||
530 | .konsole { | ||||
531 | display: block; | ||||
532 | background-color: #31363b; | ||||
533 | padding: 1px; | ||||
534 | color: #eff0f1; | ||||
535 | } | ||||
536 | .konsole .konsole-red { | ||||
537 | color: #da4453; | ||||
538 | } |