summaryrefslogtreecommitdiff
path: root/addons/website_event_track/static/src/scss/event_track_templates_online.scss
blob: 170bc4c8028e75abeef7589871632220b348e2d0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.o_wesession_index {

    /*
     * COMMON
     */

    .o_wesession_gradient {
        background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
        opacity: 0.8;
    }

    /*
     * MAIN PAGE: LIST
     */

    // Track card
    .o_wesession_track_card {
        .card-body {
            padding: 1rem;
        }

        .card-footer {
            padding: 0.75rem 1rem;
        }

        .o_wesession_track_card_header_badge {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: $card-spacer-y $card-spacer-x;
            text-align: right;
        }
        &.o_wesession_track_card_unpublished {
            opacity: 0.8;
        }
    }

    /*
     * TRACK PAGE: VIEW
     */

    .o_wevent_online_page_container {
        // Main panel: current track
        .o_wesession_track_main {
            // Force side panel min-width to account for potential Youtube chat
            // And adapt main panel max-width accordingly.
            @include media-breakpoint-up(md) {
                max-width: calc(100% - 22rem);
            }

            @media screen and (min-width: 1900px) {
                // return to bootstrap value for col-lg-9 / 10 breakpoint if screen is big enough
                &.col-lg-9 {
                    max-width: 75%;
                }

                &.col-lg-10 {
                    max-width: 83.33333333%;
                }
            }
        }

        // Left panel: other tracks
        .o_wesession_track_aside {
            // Force side panel min-width to account for potential Youtube chat
            @include media-breakpoint-up(md) {
                min-width: 22rem;
            }

            @media screen and (min-width: 1900px) {
                min-width: auto;
            }

            // Navigation: keel layout simple
            .o_wesession_track_aside_nav {
                .nav-link {
                    background-color: transparent;
                    border: 0;
                    color: $gray-600;

                    &.active {
                        color: $gray-800;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}