Projekt

Obecné

Profil

Stáhnout (29.2 KB) Statistiky
| Větev: | Tag: | Revize:
1 4bb8ff64 zabran
// Variables
2
@import 'variables';
3 1c3121fe zabran
4 c4f6e57a Adam Mištera
body {
5 c38f4c3a zabran
    background-color: $theme-color-five;
6 83496d8e zabran
    font-family: $font-family-one;
7 d79e27be Marek Lovčí
    padding-top: 5.1rem;
8 34c0b905 rizir01
9 c4f6e57a Adam Mištera
    .head-title h1 {
10 c38f4c3a zabran
        color: $theme-color-one;
11 83496d8e zabran
        font-weight: $font-weight-one;
12 c4f6e57a Adam Mištera
        font-size: 60pt;
13 83496d8e zabran
        //font-weight: bold;
14 c4f6e57a Adam Mištera
        letter-spacing: 3px;
15
    }
16 34c0b905 rizir01
17 c4f6e57a Adam Mištera
    .carousel {
18 d79e27be Marek Lovčí
        margin-top: - 5.1rem;
19
20 c4f6e57a Adam Mištera
        .carousel-inner {
21 d668e889 Adam Mištera
            .museum-logo {
22
                display: flex;
23
                justify-content: center;
24
                position: absolute;
25
                top: 5%;
26
                width: 100%;
27
                z-index: 1;
28 f5ea2a43 Adam Mištera
29
                img {
30
                    width: 7.5rem;
31
                }
32 d668e889 Adam Mištera
            }
33
34
            .social-logo {
35
                text-align: center;
36 f5ea2a43 Adam Mištera
                justify-content: space-around;
37 d668e889 Adam Mištera
                flex-wrap: nowrap;
38
                position: absolute;
39
                top: 25%;
40
                padding-left: 25px;
41
                width: 100%;
42
                z-index: 1;
43 f5ea2a43 Adam Mištera
44
                img {
45
                    width: 2.0625rem;
46
                }
47 d668e889 Adam Mištera
            }
48
49
            .carousel-button {
50
                bottom: 10%;
51
                left: 50%;
52
                transform: translateX(-50%);
53
                position: absolute;
54
                z-index: 1;
55
            }
56
57
            .carousel-item {
58
                height: 100vh;
59
                min-height: 350px;
60
                background: no-repeat center center scroll;
61
                -webkit-background-size: cover;
62
                -moz-background-size: cover;
63
                -o-background-size: cover;
64
                background-size: cover;
65 c4f6e57a Adam Mištera
            }
66
        }
67
68
        .carousel-caption {
69 d668e889 Adam Mištera
            top: 50%;
70
            bottom: auto;
71 8bb7ed68 Marek Lovčí
            padding-left: 1rem;
72
            padding-right: 1rem;
73 d668e889 Adam Mištera
            transform: translateY(-50%);
74 d79e27be Marek Lovčí
            background-color: rgba(239, 218, 179, 0.5);
75 c4f6e57a Adam Mištera
        }
76
    }
77 3b97c440 zabran
78 2b1ca67d zabran
    /////////text types
79
    //většina běžných textů
80
    .text {
81 83496d8e zabran
        font-weight: $font-weight-one;
82 2b1ca67d zabran
        font-size: 8pt;
83
        line-height: 9pt;
84
    }
85
86
    //text inputu a název artefaktů
87 d79e27be Marek Lovčí
    .text2 {
88 83496d8e zabran
        font-weight: $font-weight-two;
89 2b1ca67d zabran
        font-size: 8pt;
90
    }
91
92
    //název "kaplicky" a "choose a few" v categories (tam má jinou barvu)
93 d79e27be Marek Lovčí
    .kaplicky {
94 2b1ca67d zabran
        color: $theme-color-one;
95
        font-size: 11pt;
96 83496d8e zabran
        font-weight: $font-weight-three;
97 2b1ca67d zabran
        letter-spacing: 3pt;
98
    }
99
100
    //autor artefaktu
101 d79e27be Marek Lovčí
    .text-author {
102 83496d8e zabran
        font-weight: $font-weight-one;
103 2b1ca67d zabran
        font-size: 7pt;
104
        color: $theme-color-four;
105
    }
106
107
    //počet lajků
108 d79e27be Marek Lovčí
    .text-number {
109 83496d8e zabran
        font-weight: $font-weight-two;
110 2b1ca67d zabran
        font-size: 5pt;
111
        color: $theme-color-four;
112
    }
113
114
    //notes u metadat, about v about, text levého menu
115 d79e27be Marek Lovčí
    .text-headline {
116 83496d8e zabran
        font-weight: $font-weight-two;
117 2b1ca67d zabran
        font-size: 12pt;
118
        color: $theme-color-four;
119
    }
120
121 79e22cad zabran
    //notes u metadat, about v about, text levého menu
122
    .text-headline-desktop {
123
        font-weight: $font-weight-two;
124
        font-size: 24pt;
125
        color: $theme-color-four;
126
    }
127
128 2b1ca67d zabran
    //název metadata, text pravého menu
129 d79e27be Marek Lovčí
    .text-page {
130 83496d8e zabran
        font-weight: $font-weight-two;
131 2b1ca67d zabran
        font-size: 7pt;
132
    }
133
134 aee27358 zabran
    ////color pro změnu jen barvy
135 d79e27be Marek Lovčí
    .black {
136 aee27358 zabran
        color: $theme-color-five;
137
    }
138 d79e27be Marek Lovčí
139
    .white {
140 aee27358 zabran
        color: $theme-color-one;
141
    }
142 d79e27be Marek Lovčí
143
    .colored {
144 aee27358 zabran
        color: $theme-color-four;
145
    }
146
147 2b1ca67d zabran
148
    ////login
149 d79e27be Marek Lovčí
    .auth {
150
        .card {
151 3b97c440 zabran
            border: none;
152
            text-align: center;
153
            font-size: 8pt;
154
        }
155 3b397a49 zabran
156 d79e27be Marek Lovčí
        .col-form-label {
157 3b397a49 zabran
            text-align: left;
158 c0265e9e zabran
            padding-top: 0;
159
            padding-bottom: 0;
160 3b397a49 zabran
        }
161 d79e27be Marek Lovčí
162
        .form-control {
163 c0265e9e zabran
            padding: 0;
164 3b397a49 zabran
            height: 17pt;
165 c0265e9e zabran
            border-radius: 0;
166 d79e27be Marek Lovčí
167
            &:focus {
168 7929abb4 zabran
                border-color: $theme-color-one;
169
                -webkit-box-shadow: none;
170
                box-shadow: none;
171
            }
172
        }
173 3b97c440 zabran
    }
174
175 76a0a13d zabran
    //Oprava barev pro Chrom
176
    input:-webkit-autofill {
177 d79e27be Marek Lovčí
        -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
178 76a0a13d zabran
        -webkit-text-fill-color: $theme-color-one;
179 7929abb4 zabran
        background-color: $theme-color-five !important;
180
        //outline: none !important;
181 d79e27be Marek Lovčí
        &:active, &:focus, &:visited, &:hover {
182
            -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
183 76a0a13d zabran
            -webkit-text-fill-color: $theme-color-one;
184 7929abb4 zabran
            background-color: $theme-color-five !important;
185
            //outline: none !important;
186 76a0a13d zabran
        }
187
    }
188
189 5481d358 Adam Mištera
    .card-body {
190 d79e27be Marek Lovčí
        background-color: $theme-color-five;
191
        font-weight: $font-weight-one;
192
        color: $theme-color-four;
193
    }
194
195
    .form-control {
196
        background-color: $theme-color-five;
197
        margin-top: -1px;
198
        border-top-color: $theme-color-five;
199
        border-left-color: $theme-color-five;
200
        border-right-color: $theme-color-five;
201
        border-bottom-color: 0.5pt $theme-color-one;
202
        color: $theme-color-one;
203 3b97c440 zabran
        box-shadow: none;
204
        font-size: 8pt;
205 7929abb4 zabran
        outline: none;
206 4bb8ff64 zabran
207 d79e27be Marek Lovčí
        &:active, &:focus, &:visited, &:hover {
208 7929abb4 zabran
            outline: none;
209 4bb8ff64 zabran
            background-color: $theme-color-five;
210
            margin-top: -1px;
211
            border-top-color: $theme-color-five;
212
            border-left-color: $theme-color-five;
213
            border-right-color: $theme-color-five;
214
            border-bottom-color: 0.5pt $theme-color-one;
215
            color: $theme-color-one;
216
            box-shadow: none;
217
        }
218
219 d79e27be Marek Lovčí
    }
220
221
    .form-control.is-invalid {
222 4bb8ff64 zabran
        box-shadow: none;
223
        border-color: $theme-color-four;
224
        background-image: none;
225 d79e27be Marek Lovčí
226
        &:active, &:focus, &:visited {
227 4bb8ff64 zabran
            box-shadow: none;
228
            border-color: $theme-color-four;
229
        }
230
    }
231 34c0b905 rizir01
232 c4f6e57a Adam Mištera
    .button-square {
233 d668e889 Adam Mištera
        font-size: 8pt;
234 c38f4c3a zabran
        background-color: $theme-color-five;
235
        color: $theme-color-one;
236
        border: 0.5pt solid $theme-color-one;
237 c4f6e57a Adam Mištera
        border-radius: 0;
238 2696c864 Adam Mištera
        width: 6.5rem;
239
        height: 2rem;
240 83496d8e zabran
        font-weight: $font-weight-one;
241 2696c864 Adam Mištera
242 eeaf2e21 zabran
        &:active, &:focus, &:visited, &:hover {
243 2696c864 Adam Mištera
            outline: none;
244
            box-shadow: none;
245 eeaf2e21 zabran
            color: $theme-color-one;
246
        }
247 d79e27be Marek Lovčí
248
        &:hover {
249 eeaf2e21 zabran
            color: $theme-color-four;
250 2696c864 Adam Mištera
        }
251 c4f6e57a Adam Mištera
    }
252 34c0b905 rizir01
253 aee27358 zabran
    //spendlik
254
    .pin-left:before {
255
        content: '';
256
        position: relative;
257
        height: 0.35433rem;
258
        width: 0.35433rem;
259
        background-color: $theme-color-one;
260
        border-radius: 50%;
261
        display: inline-block;
262
        top: -0.35433rem;
263
        left: -0.2rem;
264
    }
265
266
    .pin-left {
267
        border-left: .5pt solid $theme-color-four;
268 8075a85b zabran
        position: fixed;
269
        bottom: 0;
270 aee27358 zabran
        text-align: left;
271 d79e27be Marek Lovčí
272
        // center fixed div
273
        left: 50%;
274
        transform: translateX(-50%);
275
        width: 70%;
276
277
        .text {
278 83496d8e zabran
            margin-left: 0.5rem;
279 d79e27be Marek Lovčí
            margin-bottom: 0.2rem; // looks fugly without margin
280 83496d8e zabran
        }
281 d79e27be Marek Lovčí
282
        p {
283 c0265e9e zabran
            margin-top: 0;
284
            margin-bottom: 0;
285 83496d8e zabran
        }
286 aee27358 zabran
    }
287
288 d79e27be Marek Lovčí
    li {
289 b711d297 zabran
        list-style-type: none;
290
    }
291
292 c4f6e57a Adam Mištera
    .button-image {
293
        background-color: transparent;
294
        border-color: transparent;
295
296
        &:before {
297
            content: "";
298
            width: 100px;
299
            height: 100px;
300
            display: inline-block;
301
            margin-right: 5px;
302
            vertical-align: text-top;
303
            background-color: transparent;
304 d79e27be Marek Lovčí
            background-position: center center;
305
            background-repeat: no-repeat;
306 c4f6e57a Adam Mištera
        }
307
    }
308 34c0b905 rizir01
309 8bb7ed68 Marek Lovčí
    .fav-cat-mybooks {
310
        color: $theme-color-two;
311 b4965c0b rizir01
        text-align: center;
312
        font-size: 1.9rem;
313
    }
314
315 8bb7ed68 Marek Lovčí
    .fav-cat-nofav {
316 b4965c0b rizir01
        text-align: center;
317 8bb7ed68 Marek Lovčí
        color: $theme-color-three;
318 b4965c0b rizir01
        background-color: $theme-color-five;
319
        border-color: $theme-color-three;
320
    }
321
322 70f69b41 Adam Mištera
    .artefacts-area, .artefact-area {
323 084eca03 Adam Mištera
324 b56b3d9b Adam Mištera
        h5 {
325
            color: $theme-color-two;
326 b4965c0b rizir01
            //font-weight: $font-weight-two;
327
            text-overflow: ellipsis;
328
            overflow: hidden;
329
            white-space: nowrap;
330
            line-height: 0.9rem;
331
            font-size: 1.1rem;
332 b56b3d9b Adam Mištera
        }
333 084eca03 Adam Mištera
334 b56b3d9b Adam Mištera
        h6 {
335
            color: $theme-color-two;
336 b4965c0b rizir01
            font-size: 0.9rem;
337 83496d8e zabran
            //font-weight: lighter;
338
            font-weight: $font-weight-one;
339 b56b3d9b Adam Mištera
        }
340 084eca03 Adam Mištera
341 b56b3d9b Adam Mištera
        img {
342
            border: transparent;
343
            border-radius: 1px;
344
        }
345 084eca03 Adam Mištera
346 b56b3d9b Adam Mištera
        .card {
347
            margin: 10px;
348
            border: none !important;
349
        }
350 084eca03 Adam Mištera
351 b56b3d9b Adam Mištera
        .left_panel_info {
352
            margin-top: 15px;
353 8bb7ed68 Marek Lovčí
            max-width: 70%; //250px
354 b56b3d9b Adam Mištera
        }
355
356
        .right_panel_info {
357
            margin-top: 15px;
358 b4965c0b rizir01
        }
359
360 8bb7ed68 Marek Lovčí
        .likes_text {
361 b4965c0b rizir01
            text-align: center;
362 b56b3d9b Adam Mištera
        }
363
364
        .card-cus-bottom {
365
            background-color: $theme-color-five;
366 b4965c0b rizir01
            padding-right: 0;
367
            padding-left: 0;
368 b56b3d9b Adam Mištera
        }
369
370
        .inter_info {
371
            &:before {
372 b4965c0b rizir01
                //background-image: url(../images/interface/Button_Info_50.png);
373
                background-image: url(../images/interface/Button_Info.svg);
374
                //width: 60px;
375
                //height: 60px;
376 8bb7ed68 Marek Lovčí
                width: 8vw;
377
                height: 8vw;
378 b56b3d9b Adam Mištera
            }
379
        }
380
381
        .inter_like {
382
            display: none;
383 d79e27be Marek Lovčí
384 b56b3d9b Adam Mištera
            &:before {
385 b4965c0b rizir01
                //background-image: url(../images/interface/Hearth_Empty_50.png);
386
                background-image: url(../images/interface/Heart_Empty.svg);
387
                //width: 60px;
388
                //height: 60px;
389 8bb7ed68 Marek Lovčí
                width: 8vw;
390
                height: 8vw;
391 b56b3d9b Adam Mištera
            }
392
        }
393
394
        .inter_like_filled {
395
            &:before {
396 b4965c0b rizir01
                //background-image: url(../images/interface/Hearth_Filled_50.png);
397
                background-image: url(../images/interface/Heart_Filled.svg);
398
                //width: 60px;
399
                //height: 60px;
400 8bb7ed68 Marek Lovčí
                width: 8vw;
401
                height: 8vw;
402 b56b3d9b Adam Mištera
            }
403
        }
404
405
        .inter_info, .inter_like, .inter_like_filled {
406
            padding: 0;
407 d79e27be Marek Lovčí
408 b56b3d9b Adam Mištera
            &:focus, &:active, &:hover {
409
                background-color: transparent !important;
410
                border-color: transparent !important;
411
                outline: none !important;
412
                box-shadow: none !important;
413 d79e27be Marek Lovčí
            }
414
        ;
415 b56b3d9b Adam Mištera
        }
416
    }
417 34c0b905 rizir01
418 bfa73340 Adam Mištera
    // Artefact area
419 70f69b41 Adam Mištera
    .artefact-area {
420
421
        .card-cus-bottom {
422
            .left_panel_info, .right_panel_info {
423
                margin: 0.9375rem 0 0 0;
424
            }
425
426
            .right_panel_info {
427
                .float-right {
428
                    margin-right: -0.35rem;
429
                }
430
            }
431
        }
432
433
        .artefact-name {
434
            font-weight: $font-weight-two;
435
            font-size: 8pt;
436
            line-height: 10pt;
437
            margin-bottom: 0;
438
        }
439
440
        .artefact-author {
441
            font-size: 7pt;
442
            line-height: 8pt;
443
        }
444
445
        .inter_like {
446
            display: block;
447
448
            &:before {
449 bfa73340 Adam Mištera
                background-image: url(../images/interface/Heart_Empty.svg);
450
                width: 1.563rem;
451
                height: 1.25rem;
452 b4965c0b rizir01
453 bfa73340 Adam Mištera
            }
454
        }
455
456
        .inter_like_filled {
457
            &:before {
458 d79e27be Marek Lovčí
                background-image: url(../images/interface/Heart_Filled.svg);
459 bfa73340 Adam Mištera
                width: 1.563rem;
460
                height: 1.25rem;
461 70f69b41 Adam Mištera
            }
462
        }
463
464
        .inter_info {
465
466
            padding-right: 1rem;
467 d79e27be Marek Lovčí
468 70f69b41 Adam Mištera
            &:before {
469 bfa73340 Adam Mištera
                background-image: url(../images/interface/Button_Info.svg);
470
                width: 1.875rem;
471
                height: 1.875rem;
472 70f69b41 Adam Mištera
            }
473
        }
474
475
        .artefact-likes {
476
            font-weight: $font-weight-two;
477
            font-size: 5pt;
478
            padding-right: 0.25rem;
479
        }
480
    }
481
482 3e4f999e Adam Mištera
    // Metadata area
483 3c062db9 Adam Mištera
    .metadata-area {
484
485
        h2 {
486 1bcdcb05 Adam Mištera
            color: $theme-color-two;
487 3c062db9 Adam Mištera
            font-weight: $font-weight-two;
488
            font-size: 12pt;
489
        }
490
491 3e4f999e Adam Mištera
        .arrow-down {
492 3dfc8d9f Adam Mištera
            position: fixed;
493 3e4f999e Adam Mištera
            top: 0.25rem;
494
            right: 0;
495
            margin: 2rem;
496
            width: 0;
497
            height: 0;
498
            border-left: 0.59055rem solid transparent;
499
            border-right: 0.59055rem solid transparent;
500
            border-top: 0.59055rem solid $theme-color-two;
501 3c062db9 Adam Mištera
        }
502
503
        .pin-horizontal {
504 3e4f999e Adam Mištera
            color: $theme-color-two;
505
            border-bottom: .042rem solid $theme-color-two;
506 3c062db9 Adam Mištera
            display: inline-block;
507 26e128a8 Adam Mištera
            margin: 2.75rem 3.125rem 0 0;
508 3e4f999e Adam Mištera
509 d79e27be Marek Lovčí
            &:after {
510 3c062db9 Adam Mištera
                content: '';
511 d79e27be Marek Lovčí
                background-color: #ddd1b9;
512 3c062db9 Adam Mištera
                position: relative;
513
                height: .5rem;
514
                width: .5rem;
515
                border-radius: 50%;
516 d79e27be Marek Lovčí
                display: block;
517
                margin-left: auto;
518
                top: .25rem;
519 3c062db9 Adam Mištera
            }
520
521 3e4f999e Adam Mištera
            .metadata {
522
                position: relative;
523
                display: flex;
524
                align-items: baseline;
525
526
                span {
527
                    font-weight: $font-weight-two;
528
                }
529
530
                .arrow-down {
531
                    position: relative;
532
                    top: 0;
533
                    right: 0;
534
                    width: 0;
535
                    height: 0;
536
                    border-left: 0.25rem solid transparent;
537
                    border-right: 0.25rem solid transparent;
538
                    border-top: 0.25rem solid $theme-color-two;
539
                    margin: 0 0.5rem 0 0.5rem;
540
                }
541 3c062db9 Adam Mištera
            }
542 3e4f999e Adam Mištera
        }
543
544
        .white-pin {
545
            color: $theme-color-one;
546
            border-bottom: .042rem solid $theme-color-one;
547 3c062db9 Adam Mištera
548 3e4f999e Adam Mištera
            &:before {
549
                content: '';
550
                background-color: $theme-color-one;
551
            }
552 3c062db9 Adam Mištera
553 3e4f999e Adam Mištera
            .metadata {
554
                .arrow-down {
555
                    border-top: 0.25rem solid $theme-color-one;
556
                }
557
            }
558 3c062db9 Adam Mištera
        }
559
560
        .metadata-text {
561 3e4f999e Adam Mištera
            font-size: 8pt;
562 3c062db9 Adam Mištera
            color: $theme-color-one;
563
            padding-top: 10px;
564
            padding-left: 25px;
565
            padding-right: 25px;
566
567
            .artefact-info {
568
                color: $theme-color-two;
569
                margin-top: 10px;
570
571
                .artefact-name {
572 3e4f999e Adam Mištera
                    font-weight: $font-weight-two;
573 3c062db9 Adam Mištera
                    font-size: 8pt;
574
                }
575
576
                .artefact-author {
577 3e4f999e Adam Mištera
                    font-weight: $font-weight-one;
578 3c062db9 Adam Mištera
                    font-size: 7pt;
579
                }
580 3e4f999e Adam Mištera
581 1bcdcb05 Adam Mištera
                .inter_like {
582
583
                    &:before {
584
                        background-image: url(../images/interface/Heart_Empty.svg);
585
                        width: 3.125rem;
586
                        height: 3.125rem;
587
                        margin-right: 0;
588
                    }
589
590
                    &:hover, &:focus, &:active {
591
                        background-color: transparent !important;
592
                        border-color: transparent !important;
593
                        outline: none !important;
594
                        box-shadow: none !important;
595
                    }
596
                }
597
598 3e4f999e Adam Mištera
                .inter_like_filled {
599
600
                    &:before {
601 d79e27be Marek Lovčí
                        background-image: url(../images/interface/Heart_Filled.svg);
602 26e128a8 Adam Mištera
                        width: 3.125rem;
603
                        height: 3.125rem;
604
                        margin-right: 0;
605 3e4f999e Adam Mištera
                    }
606
607
                    &:hover, &:focus, &:active {
608
                        background-color: transparent !important;
609
                        border-color: transparent !important;
610
                        outline: none !important;
611
                        box-shadow: none !important;
612
                    }
613
                }
614 3c062db9 Adam Mištera
            }
615
        }
616
    }
617
618 bfa73340 Adam Mištera
    // Modal
619
    .modal {
620
        font-weight: $font-weight-one;
621
        color: $theme-color-two;
622
        font-size: 8pt;
623
624
        .modal-header {
625
            border-bottom: 1px solid $theme-color-two;
626
627
            .close {
628
                color: $theme-color-two;
629
                text-shadow: none;
630
            }
631
        }
632
633
        .modal-content {
634
            background-color: $theme-color-five;
635
        }
636
637
        .modal-footer {
638
            border-top: 1px solid $theme-color-two;
639
640
            .btn {
641
                background-color: $theme-color-two;
642
                color: $theme-color-five;
643
644
            }
645
        }
646
    }
647
648
    .image-modal {
649
        .close {
650
            font-size: 24pt;
651
            color: $theme-color-two;
652
            text-shadow: none;
653
            position: absolute;
654
            top: 1rem;
655
            right: 0.125rem;
656
            opacity: 1;
657
            cursor: pointer;
658
            pointer-events: initial;
659
        }
660
    }
661
662 c0265e9e zabran
    /*.content {
663 977060b9 rizir01
        position: relative;
664 31d75014 rizir01
665 977060b9 rizir01
        //Circle style button
666
        .btn-circle.rounded-circle {
667
            padding: 6px 0px;
668
            font-size: 16px;
669
            text-align: center;
670
        }
671
        .btn-categories
672 c38f4c3a zabran
        {
673 977060b9 rizir01
            position: absolute;
674
            border-width: 5px;
675
            background-color: $theme-color-five;
676 c38f4c3a zabran
            border-color: $theme-color-four;
677 977060b9 rizir01
            color:$theme-color-four;
678 c4f6e57a Adam Mištera
            outline: none !important;
679
            box-shadow: none !important;
680 977060b9 rizir01
            font-weight: $font-weight-two;
681
682
            &:active
683
            {
684
                background-color: $theme-color-three;
685
                border-color: $theme-color-four;
686
                outline: none !important;
687
                box-shadow: none !important;
688
                color:$theme-color-five;
689
            }
690
        }
691 c0265e9e zabran
    }*/
692 977060b9 rizir01
693 6c518068 rizir01
    //CATEGORIES - TILES
694 d79e27be Marek Lovčí
    .btn.btn-dark.cat-tile {
695 6c518068 rizir01
        //STYLING
696
        border-color: $theme-color-four;
697
        border-radius: 0;
698
        border-style: solid;
699
        border-width: 2px;
700
        color: $theme-color-four;
701
        background-color: $theme-color-five;
702
        text-align: center;
703
        outline: none !important;
704
        box-shadow: none !important;
705
706 25ec2fab Marek Lovčí
        //TEXT OVERFLOW
707
        overflow: hidden;
708
        text-overflow: ellipsis;
709
710 6c518068 rizir01
        //FONT
711 25ec2fab Marek Lovčí
        font-size: 22pt;
712 6c518068 rizir01
713
        //SPACING
714 8bb7ed68 Marek Lovčí
        padding: 4rem 1rem;
715 6c518068 rizir01
716 d79e27be Marek Lovčí
        &:active, &:focus {
717 6c518068 rizir01
            background-color: $theme-color-three;
718
            border-color: $theme-color-four;
719
            outline: none !important;
720
            box-shadow: none !important;
721
            color: $theme-color-five;
722 c4f6e57a Adam Mištera
        }
723 6c518068 rizir01
    }
724 c38f4c3a zabran
725 fb354d59 rizir01
    //CATEGORY/{id} -h2 title NO ARTEFACTS
726 d79e27be Marek Lovčí
    .category-h2 {
727 fb354d59 rizir01
        color: $theme-color-four;
728 c4f6e57a Adam Mištera
    }
729 c74e9df8 rizir01
730
    //CATEGORIES - Choose a topic TITLE
731 8bb7ed68 Marek Lovčí
    .head-title.text-center.cat-main-topic {
732 c74e9df8 rizir01
733 8bb7ed68 Marek Lovčí
        h1 {
734 c74e9df8 rizir01
            font-size: 1.9rem;
735
        }
736
    }
737 34c0b905 rizir01
}
738
739 d79e27be Marek Lovčí
.top-bar {
740 927fb559 zabran
    background-color: $theme-color-five;
741 693a0a6d zabran
    min-height: 5rem;
742 927fb559 zabran
    position: fixed;
743
    width: 100%;
744
    top: 0;
745 d79e27be Marek Lovčí
    z-index: 2;
746 8bb7ed68 Marek Lovčí
747 54610fab zabran
    .shadow {
748
        box-shadow: none;
749
    }
750 8baafb46 zabran
}
751
752 1c3121fe zabran
.sidenav {
753
    height: 100%;
754 79e22cad zabran
    width: 0;
755
    //width: 250px;
756 1c3121fe zabran
    position: fixed;
757 d79e27be Marek Lovčí
    z-index: 4;
758 1c3121fe zabran
    top: 0;
759
    left: 0;
760 8075a85b zabran
    background-color: $theme-color-four;
761 1c3121fe zabran
    overflow-x: hidden;
762
    transition: 0.5s;
763
}
764
765
.sidenav a {
766
    text-decoration: none;
767 8075a85b zabran
    color: $theme-color-five;
768 1c3121fe zabran
    display: block;
769
    transition: 0.3s;
770 d79e27be Marek Lovčí
771
    &:hover {
772 927fb559 zabran
        color: $theme-color-four;
773
        background-color: $theme-color-one;
774
    }
775 d79e27be Marek Lovčí
776
    &:active, &:focus, .active {
777 927fb559 zabran
        color: $theme-color-one;
778
        background-color: $theme-color-four;
779
    }
780 1c3121fe zabran
}
781
782 8bb7ed68 Marek Lovčí
.bar-desktop {
783 79e22cad zabran
    display: flex;
784
    align-items: center;
785 c9a0c0b2 zabran
    text-align: center;
786
    min-width: 100%;
787 693a0a6d zabran
    padding-top: 2rem;
788
    padding-bottom: 2rem;
789 79e22cad zabran
}
790
791 54610fab zabran
.down {
792
    position: absolute;
793
    z-index: 5;
794
    bottom: 0;
795
    left: 0;
796
    width: 100%;
797
    margin-bottom: 3rem;
798
}
799
800 8bb7ed68 Marek Lovčí
.menu-item {
801
    padding: 0.25rem 1rem;
802 54610fab zabran
    width: 100%;
803
    border: 0;
804 8bb7ed68 Marek Lovčí
805
    &:active, &.active, &:focus {
806 79e22cad zabran
        color: $theme-color-one;
807 d7feebff zabran
        //background-color: $theme-color-five;
808 79e22cad zabran
        border: none;
809
        outline: none;
810
        box-shadow: none;
811
    }
812 1c3121fe zabran
}
813
814 d79e27be Marek Lovčí
.logo-kaplicky {
815
    text-align: center;
816 79e22cad zabran
    display: none;
817 8bb7ed68 Marek Lovčí
818
    &:active, &.active, &:focus {
819 79e22cad zabran
        outline: none;
820
        box-shadow: none;
821
    }
822 927fb559 zabran
}
823
824 8bb7ed68 Marek Lovčí
.navbar {
825 c9a0c0b2 zabran
    padding: unset;
826
}
827
828 749ca4c4 Marek Lovčí
.vertical-center {
829 d79e27be Marek Lovčí
    margin-top: -5.1rem; // fixed navbar correction
830 749ca4c4 Marek Lovčí
    min-height: 100vh;
831
    display: flex;
832
    align-items: center;
833
}
834
835
.error {
836
    color: $theme-color-one;
837
    font-size: xx-large;
838
    display: block;
839
    text-align: center;
840
}
841
842 d79e27be Marek Lovčí
// login and registration alert bottom margin
843
.al {
844
    margin-bottom: 3rem;
845
}
846
847 0218d5c7 Adam Mištera
// books component
848
.books-component {
849
850
    .book-area {
851
        .card-cus-bottom {
852
853
            display: flex;
854
            justify-content: space-between;
855
            align-items: baseline;
856
857
            .book-arrow {
858
                &:after {
859
                    content: '';
860
                    bottom: 3rem;
861
                    position: absolute;
862
                    border-top: 1.25rem solid transparent;
863
                    border-bottom: 1.25rem solid transparent;
864
                }
865
            }
866
867
            .book-arrow-left {
868
                &:after {
869
                    left: 25%;
870
                    border-right: 1.25rem solid $theme-color-two;
871
                }
872
            }
873
874
            .book-arrow-right {
875 8bb7ed68 Marek Lovčí
                &:after {
876
                    right: 25%;
877
                    border-left: 1.25rem solid $theme-color-two;
878
                }
879 0218d5c7 Adam Mištera
            }
880
881
            .likes {
882
                display: flex;
883
                flex-direction: column;
884
                align-items: center;
885
886
                .inter_like, .inter_like_filled {
887
                    margin: 0 auto;
888 8bb7ed68 Marek Lovčí
889 0218d5c7 Adam Mištera
                    &:before {
890
                        margin-right: 0;
891
                        height: 5rem;
892
                        width: 5rem;
893
                    }
894
                }
895
896
                .artefact-likes {
897
                    font-size: 12pt;
898
                    padding: 0;
899
                }
900
            }
901
        }
902
    }
903
904
    .info-area {
905
        color: $theme-color-two;
906
        margin-top: 0.625rem;
907
        padding-left: 5rem;
908
909
        /* could be use to hide overflowing notes
910
        max-height: 80vh;
911
        overflow-y: scroll;
912
        scrollbar-width: none;
913
        -ms-overflow-style: none;
914
915
        &::-webkit-scrollbar {
916
            width: 0 !important
917
        } */
918
919
        h3 {
920
            font-weight: $font-weight-two;
921
        }
922
923
        .switch-view {
924
            float: right;
925
            color: $theme-color-one;
926
            cursor: pointer;
927
        }
928
929
        .artefact-notes {
930
            display: none;
931
            color: $theme-color-two;
932
933
            .pin-horizontal {
934
                border-bottom: .042rem solid $theme-color-two;
935
                display: inline-block;
936
                margin: 2.75rem 2rem 0 0;
937
938
                &:after {
939
                    content: '';
940
                    background-color: #ddd1b9;
941
                    position: relative;
942
                    height: .5rem;
943
                    width: .5rem;
944
                    border-radius: 50%;
945
                    display: block;
946
                    margin-left: auto;
947
                    top: .25rem;
948
                }
949
950
                .metadata {
951
                    position: relative;
952
                    display: flex;
953
                    align-items: baseline;
954
955
                    span {
956
                        font-size: 12pt;
957
                        font-weight: $font-weight-two;
958
                    }
959
960
                    .arrow-down {
961
                        position: relative;
962
                        top: 0;
963
                        right: 0;
964
                        width: 0;
965
                        height: 0;
966
                        border-left: 0.25rem solid transparent;
967
                        border-right: 0.25rem solid transparent;
968
                        border-top: 0.25rem solid $theme-color-two;
969
                        margin: 0 0.5rem 0 0.5rem;
970
                    }
971
                }
972
            }
973
974
            .white-pin {
975
                color: $theme-color-one;
976
                border-bottom: .042rem solid $theme-color-one;
977
978
                &:before {
979
                    content: '';
980
                    background-color: $theme-color-one;
981
                }
982
983
                .metadata {
984
                    .arrow-down {
985
                        border-top: 0.25rem solid $theme-color-one;
986
                    }
987
                }
988
            }
989
990
            .metadata-text {
991
                font-size: 12pt;
992
                color: $theme-color-one;
993
                padding-top: 10px;
994
                padding-left: 25px;
995
                padding-right: 25px;
996
997
                .inter_like {
998
999
                    &:before {
1000
                        background-image: url(../images/interface/Heart_Empty.svg);
1001
                        width: 5rem;
1002
                        height: 5rem;
1003
                    }
1004
1005
                    &:hover, &:focus, &:active {
1006
                        background-color: transparent !important;
1007
                        border-color: transparent !important;
1008
                        outline: none !important;
1009
                        box-shadow: none !important;
1010
                    }
1011
                }
1012
1013
                .inter_like_filled {
1014
1015
                    &:before {
1016
                        background-image: url(../images/interface/Heart_Filled.svg);
1017
                        width: 5rem;
1018
                        height: 5rem;
1019
                    }
1020
1021
                    &:hover, &:focus, &:active {
1022
                        background-color: transparent !important;
1023
                        border-color: transparent !important;
1024
                        outline: none !important;
1025
                        box-shadow: none !important;
1026
                    }
1027
                }
1028
            }
1029
        }
1030
1031
        .inter_info {
1032
1033
            float: right;
1034
            color: $theme-color-one;
1035
            padding-right: 1rem;
1036
1037
            &:before {
1038
                background-image: url(../images/interface/Button_Info_White.svg);
1039
                width: 1.875rem;
1040
                height: 1.875rem;
1041
            }
1042
1043
            &:hover, &:focus, &:active {
1044
                background-color: transparent !important;
1045
                border-color: transparent !important;
1046
                outline: none !important;
1047
                box-shadow: none !important;
1048
            }
1049
        }
1050
    }
1051
}
1052
1053 1c3121fe zabran
@media screen and (max-height: 450px) {
1054 d79e27be Marek Lovčí
    .sidenav a {
1055
        font-size: 18px;
1056
    }
1057 54610fab zabran
    .down {
1058
        bottom: unset;
1059
        margin-bottom: unset;
1060
    }
1061 1c3121fe zabran
}
1062
1063 c9a0c0b2 zabran
@media (min-width: 1300px) {
1064
    .bar-desktop {
1065
        margin-left: 8vw;
1066
        margin-right: 8vw;
1067
        min-width: 84vw;
1068
    }
1069 d79e27be Marek Lovčí
}
1070 8075a85b zabran
1071 c9a0c0b2 zabran
@media (max-width: 990px) {
1072 aee27358 zabran
}
1073
1074 c9a0c0b2 zabran
@media (max-width: 770px) {
1075 8bb7ed68 Marek Lovčí
    .logo-kaplicky {
1076
        margin: 0 auto;
1077 79e22cad zabran
        display: block;
1078
    }
1079
    .arrow {
1080
        position: absolute;
1081
        width: 0;
1082
        height: 0;
1083
        margin: 2rem;
1084
        cursor: pointer;
1085
        border: 0.59055rem solid transparent;
1086 8bb7ed68 Marek Lovčí
1087
        &:active, &.active, &:focus {
1088 79e22cad zabran
            outline: none;
1089
            box-shadow: none;
1090
        }
1091
    }
1092
    .arrow-left {
1093
        margin-left: 80%;
1094 6c518068 rizir01
1095 79e22cad zabran
        border-right: 0.59055rem solid $theme-color-five;
1096
        background-color: $theme-color-four !important;
1097 34c0b905 rizir01
    }
1098 79e22cad zabran
    .arrow-right {
1099
        border-left: 0.59055rem solid $theme-color-four;
1100 6c518068 rizir01
1101 79e22cad zabran
        position: fixed;
1102
        z-index: 3;
1103
        top: 0;
1104
        left: 0;
1105 34c0b905 rizir01
    }
1106 8bb7ed68 Marek Lovčí
    .bar-desktop {
1107 79e22cad zabran
        display: none;
1108
    }
1109 8bb7ed68 Marek Lovčí
    .menu-item:active, .menu-item.active {
1110 79e22cad zabran
        color: $theme-color-five;
1111
        background-color: $theme-color-one;
1112
    }
1113 0218d5c7 Adam Mištera
    .books-component {
1114 8bb7ed68 Marek Lovčí
        .info-area {
1115 0218d5c7 Adam Mištera
            padding-left: 1.5625rem;
1116
        }
1117
    }
1118 c9a0c0b2 zabran
}
1119
1120
@media only screen and (max-width: 540px) {
1121
    .sidenav {
1122
        width: 0;
1123
    }
1124
    .head-title.text-center h1 {
1125
        font-size: 23pt;
1126
        padding-top: 50pt;
1127
        white-space: nowrap;
1128
    }
1129
1130 79e22cad zabran
1131 c0265e9e zabran
    /*.btn-circle.rounded-circle.btn-sm
1132 34c0b905 rizir01
    {
1133
        width: 90px;
1134
        height: 90px;
1135
    }
1136
1137
    .btn-circle.rounded-circle.btn-dm
1138
    {
1139
        width: 130px;
1140
        height: 130px;
1141
    }
1142
1143
    .btn-circle.rounded-circle.btn-xl
1144
    {
1145
        width: 180px;
1146
        height: 180px;
1147 c0265e9e zabran
    }*/
1148 d668e889 Adam Mištera
1149 d79e27be Marek Lovčí
    body {
1150 d668e889 Adam Mištera
        .carousel {
1151
            .carousel-inner {
1152
                .social-logo {
1153
                    padding-left: 30px;
1154
                    top: 20%;
1155
                }
1156
            }
1157
        }
1158
    }
1159
}
1160
1161 d79e27be Marek Lovčí
@media (min-width: 330px) and (max-height: 900px) {
1162
    body {
1163 d668e889 Adam Mištera
        .carousel {
1164
            .carousel-inner {
1165
                .social-logo {
1166
                    top: 25%;
1167
                }
1168
            }
1169
        }
1170
    }
1171
}
1172 f5ea2a43 Adam Mištera
1173
@media (min-width: 1024px) {
1174
1175
    body {
1176 8bb7ed68 Marek Lovčí
        .kaplicky {
1177 f5ea2a43 Adam Mištera
            text-align: left !important;
1178
            font-size: 24pt;
1179
            line-height: 24pt;
1180
        }
1181
1182
        .text {
1183
            text-align: left;
1184
            font-size: 18pt;
1185
            line-height: 26pt;
1186
        }
1187
1188
        .carousel {
1189
            .carousel-inner {
1190
                .social-logo {
1191
                    justify-content: center;
1192
                    top: 90%;
1193
1194
                    .logo {
1195
                        margin-left: 10rem;
1196
1197
                        img {
1198
                            width: 3.125rem;
1199
                        }
1200
1201
                        &:first-child {
1202
                            margin-left: 0;
1203
                        }
1204
                    }
1205
                }
1206 8bb7ed68 Marek Lovčí
1207 f5ea2a43 Adam Mištera
                .carousel-button {
1208 c6265547 Adam Mištera
                    bottom: 15%;
1209 f5ea2a43 Adam Mištera
                }
1210
            }
1211
1212 8bb7ed68 Marek Lovčí
            .carousel-caption {
1213 c6265547 Adam Mištera
                padding: 3.75rem 6.25rem 5em;
1214 f5ea2a43 Adam Mištera
1215
                h2 {
1216
                    margin-bottom: 1rem;
1217
                }
1218
            }
1219
        }
1220
1221
        .button-square {
1222
            font-size: 18pt;
1223
            width: 10.875rem;
1224
            height: 2.938rem;
1225
        }
1226
    }
1227
}
1228 c6265547 Adam Mištera
1229
@media (min-width: 1575px) {
1230
    body {
1231
        .carousel {
1232
            .carousel-inner {
1233
                .carousel-button {
1234
                    bottom: 20%;
1235
                }
1236
            }
1237
        }
1238
    }
1239
}