1.dokuwiki > nav.notos ul {
2    display: flex;
3    flex-wrap: wrap;
4    list-style: none;
5    margin: 1rem 0 0 0;
6    padding: 0;
7
8    li {
9        padding: 0;
10        margin: 0;
11        box-sizing: border-box;
12    }
13
14    &.navtabs {
15        span.curid,
16        a {
17            display: block;
18            height: 100%;
19            width: 100%;
20            text-align: center;
21            box-sizing: border-box;
22        }
23
24        a {
25            padding: 0.5rem;
26        }
27
28        li.primary {
29            flex-grow: 1;
30            display: flex;
31            justify-content: center;
32            align-items: center;
33            position: relative;
34
35            border-right: 1px solid @ini_border;
36            border-bottom: 1px solid @ini_border;
37
38            &.active {
39                a {
40                    color: @ini_highlight;
41                }
42
43                border-bottom: none;
44                background-color: @ini_background;
45            }
46
47            &:hover {
48                background-color: @ini_accent;
49            }
50
51            a {
52                font-weight: bold;
53
54                &:hover {
55                    color: unset;
56                }
57            }
58
59            span.opener {
60                display: none; // only visible in mobile
61            }
62        }
63
64        li.secondary {
65            display: none;
66
67            &.active {
68                // move to end and put in new line:
69                order: 9999;
70                flex: 0 0 100%;
71                display: flex;
72            }
73
74            ul {
75                width: 100%;
76                flex-wrap: wrap;
77                background-color: @ini_background;
78
79                li {
80                    flex: 1 1 8rem;
81                    padding: 0.5rem 1rem;
82                    text-align: center;
83                    border-radius: 5px;
84
85                    &:hover {
86                        background-color: @ini_accent;
87
88                        a {
89                            color: unset;
90                        }
91                    }
92                }
93            }
94        }
95
96        li:last-child,
97        li:nth-last-child(2) {
98            border-right: none;
99        }
100    }
101}
102
103// mobile toggle mechanism on desktop
104.dokuwiki > nav.notos {
105    label {
106        display: none;
107    }
108
109    input {
110        display: none;
111    }
112}
113
114@media screen and (max-width: @ini_phone_width) {
115    @menu-pos-x: 1rem;
116    @menu-pos-y: -4rem;
117
118    // mobile menu
119    .dokuwiki > nav.notos {
120        position: relative;
121
122        ul.navtabs {
123            position: absolute;
124            left: @menu-pos-x;
125            top: @menu-pos-y;
126            width: 90vw;
127            z-index: 100;
128            background-color: @ini_header_text;
129            box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
130
131            padding-top: 3rem; // space for menu button
132            margin: 0;
133
134            flex-direction: column;
135            border-bottom: 1px solid @ini_border;
136
137            li.primary {
138                border: none;
139                border-top: 1px solid @ini_border;
140
141                span.opener {
142                    display: block;
143                    position: absolute;
144                    top: 0.25rem;
145                    right: 0.25rem;
146
147                    cursor: pointer;
148
149                    svg {
150                        width: 1.5em;
151                        height: 1.5em;
152                        fill: @ini_text;
153                    }
154                }
155
156                // we only open, but don't close
157                &.active span.opener {
158                    display: none;
159                }
160            }
161
162            li.secondary {
163                &.active {
164                    order: unset;
165                }
166
167                ul {
168                    margin: 0;
169
170                    li {
171                        text-align: left;
172                        flex: 1 1 40%;
173                    }
174                }
175            }
176        }
177    }
178
179    // mobile toggle mechanism
180    .dokuwiki > nav.notos {
181        label {
182            position: absolute;
183            left: @menu-pos-x;
184            top: @menu-pos-y;
185            z-index: 105; // above the menu
186            display: block;
187            cursor: pointer;
188
189            svg {
190                width: 3rem;
191                height: 3rem;
192            }
193
194            .open {
195                display: block;
196
197                svg {
198                    fill: @ini_header_text;
199                }
200            }
201
202            .close {
203                display: none;
204            }
205        }
206
207        input:checked ~ ul {
208            display: flex;
209        }
210
211        input:checked ~ label {
212            .open {
213                display: none;
214            }
215
216            .close {
217                display: block;
218            }
219        }
220
221        ul.navtabs {
222            display: none;
223        }
224
225
226    }
227
228}
229