resources/assets/stylesheets/scss/fullscreen.scss


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

.fullscreen-container {
    flex-grow: 1;
    margin-right: 12px;
}

.fullscreen-toggle {
    background: none;
    border: none;
    cursor: pointer;
    height: 28px;

    @include icon(before, zoom-in2);

    text-indent: 200%;
    overflow: hidden;

    clear: both;
    float: right;

    position: relative;
    top: 1px;
    right: 12px;

    z-index: 100;
}

html:not(.is-fullscreen-immediately) {
    #top-bar,
    #navigation-level-1,
    #navigation-level-2 {
        transition: top var(--transition-duration), margin-bottom var(--transition-duration), opacity var(--transition-duration);
    }
    #sidebar {
        transition: left var(--transition-duration), margin-right var(--transition-duration), opacity var(--transition-duration);
    }
    #main-footer {
        transition: opacity var(--transition-duration), max-height var(--transition-duration), padding var(--transition-duration);
    }
}

html.is-fullscreen {
    #top-bar,
    #navigation-level-1,
    #navigation-level-2 {
        margin-bottom: -70px;
        opacity: 0;
        top: -142px;
    }

    #sidebar {
        left: -300px;
        margin-right: -270px;
        opacity: 0;
    }

    #main-footer {
        opacity: 0;
        max-height: 0;
        padding: 0;
    }

    .fullscreen-toggle.unfullscreen {
        display: block;
    }
}