xref: /template/wikiweko/static/mobile.less (revision 9d29d10a541435626dd613710cd4c04ced792a54) 
1div.mobile-hamburger,
2div.mobile-menu,
3div.mobile-logo {
4    display: none;
5}
6
7
8@media only screen and (max-width: 750px) {
9
10    div.mobile-hamburger {
11        display: block;
12        position: absolute;
13        top: 0;
14        right: 0;
15        z-index: 1000;
16
17        cursor: pointer;
18        font-size: 2.5rem;
19        line-height: 3rem;
20
21        width: 3rem;
22        height: 3rem;
23        text-align: center;
24
25        &::before {
26            content: '☰';
27        }
28    }
29
30    div.mobile-hamburger.open {
31        background-color: @ini_background;
32        &::before {
33            content: '✕';
34        }
35    }
36
37    div.mobile-logo {
38        display: block;
39        a {
40            display: block;
41            width: 100%;
42            height: 3rem;
43            background-size: contain;
44            background-repeat: no-repeat;
45            background-position: left;
46        }
47    }
48
49    div.mobile-menu {
50        position: absolute;
51        top: 0;
52        right: 0;
53
54        height: 100%;
55        overflow-y: auto;
56        -ms-overflow-style: none;  // IE 10+
57        overflow: -moz-scrollbars-none;  // Firefox
58        &::-webkit-scrollbar {
59            display: none;  // Safari and Chrome
60        }
61
62        z-index: 500;
63        background-color: @ini_background;
64        box-shadow: -5px 0 5px @ini_border;
65
66        padding-top: 3rem;
67
68        a {
69            color: @ini_existing;
70        }
71
72        .mobile-search {
73            display: block;
74            margin: 0.25em;
75            div {
76                display: flex;
77
78                input,
79                button {
80                    line-height: inherit;
81                    flex-grow: 0;
82                }
83                input {
84                    flex-grow: 1;
85                }
86            }
87        }
88
89        ul {
90            padding: 0;
91            list-style-type: none;
92            list-style-image: none !important;
93            margin: 0.25em 0;
94
95            border-bottom: 1px solid @ini_border;
96
97            li {
98                margin: 0;
99                padding: 0.25em;
100            }
101        }
102    }
103
104    div.mobile-menu.open {
105        display: block;
106    }
107
108    #page-base,
109    #head-base,
110    #head,
111    #panel {
112        display: none;
113    }
114
115    div#content,
116    div#footer {
117        margin-left: 0;
118    }
119
120}
121
122// translation plugin adjustment
123div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:before,
124div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:before,
125div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:after,
126div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:after {
127    content: '';
128}
129