1/**
2 * This file provides the design styles for the page header.
3 */
4
5#dokuwiki__header {
6    @header-font-opacity: 1;
7
8    @media @screen_max-xs {
9        min-height: 120px;
10    }
11
12    /* + + +  wiki logo  + + + */
13    @media @screen_min-md {
14        .logo {
15            padding: 1rem 0 .3rem;
16
17            img {
18                height: 4.6rem;
19                width: auto;
20                border-style: solid;
21                border-color: transparent;
22                border-width: 2px 0;
23            }
24
25            a:hover,
26            a:focus,
27            a:active {
28                img {
29                    border-width: 0;
30                }
31            }
32        }
33    }
34
35    @media @screen_max-md {
36        .logo {
37            display: table-cell;
38
39            .mobile-only {
40                margin: .8rem 1rem .6rem 0;
41            }
42        }
43    }
44
45    /* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
46    .main-title.desktop-only {
47        @media @screen_min-md {
48            display: table-cell;
49            vertical-align: middle;
50        }
51
52        @media @screen_max-md {
53            display: block;
54        }
55
56        p.title {
57            @media @screen_max-md {
58                display: none;
59            }
60        }
61
62        p.claim {
63            @media @screen_max-md {
64                display: block;
65                padding-bottom: 1rem;
66            }
67
68            @media @screen_max-xs {
69                padding-right: (@toggle-size + @headericons-margin-xxs);
70            }
71        }
72    }
73
74    /* + + + + +  MOBILE  -  wiki title wrapper  + + + + + */
75    .main-title:not([class*="desktop-only"]) {
76        @media @screen_max-md {
77            display: table-cell;
78            vertical-align: middle;
79        }
80
81        @media @screen_max-xs {
82            padding-right: (@toggle-size + @headericons-margin-xxs);
83        }
84    }
85
86    /* + + +  wiki title  + + + */
87    p.title {
88        background-color: @ini_background_site;
89        opacity: @header-font-opacity;
90        color: @ini_text_webframe;
91        line-height: @line-height-default;
92        margin-bottom: .5rem;
93
94        @media @screen_min-md {
95            font-size: @font-size-big;
96        }
97
98        @media @screen_max-md {
99            font-size: (@font-size-default + .25);
100            padding-top: .5rem;
101            padding-left: 1rem;
102        }
103    }
104
105    /* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
106    @media @screen_min-md {
107        div.claim {
108            display: table-cell;
109            height: 100%;
110            vertical-align: middle;
111        }
112    }
113
114    /* + + +  wiki claim  + + + */
115    p.claim {
116        opacity: @header-font-opacity;
117        color: @ini_text_webframe;
118        font-size: @font-size-default;
119        margin-bottom: 0;
120
121        @media @screen_max-md {
122            padding-top: .5rem;
123        }
124    }
125
126    /* + + +  mobile nav togglelink  + + + */
127    .menu-togglelink {
128        position: relative;
129        margin: @headericons-margin-xxs -(@very-small-spacing) 0 0;
130
131        a {
132            .fontello();
133            .icon-menu();
134            .btn-hover();
135
136            display: block;
137            min-height: @toggle-size;
138            min-width: @toggle-size;
139            box-sizing: border-box;
140            border: 1px solid @ini_border;
141            border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
142            font-size: 1rem;
143            text-align: center;
144            text-decoration: none;
145            line-height: 1;
146
147            &::before {
148                font-size: 1.5rem;
149                margin: .1rem 0 0;
150            }
151        }
152    }
153
154    /* + + +  mobile select for doku wiki tools   + + + */
155    .menu-tool-select {
156        position: relative;
157        z-index: 1000;
158        display: none;
159        @media @screen_max-xxs {
160            display: block;
161        }
162
163        select {
164            display:  block;
165            width:100%;
166        }
167    }
168
169    /* + + + + +  with magic matcher  + + + + + */
170    &.has-magicmatcher {
171        .logo {
172            @media @screen_min-md {
173                padding-top: 3rem;
174            }
175        }
176
177        .main-title.desktop-only {
178            @media @screen_min-md {
179                vertical-align: bottom;
180                padding-top: @height-context-bar;
181                padding-bottom: 1rem;
182            }
183
184            p.title {
185                @media @screen_min-md {
186                    margin-right: 16rem;
187                }
188            }
189
190            p.claim {
191                @media @screen_max-md {
192                    display: block;
193                    padding-bottom: 1rem;
194                }
195            }
196        }
197    }
198}
199
200/* + + + + +  layout option compact  + + + + + */
201.header-compact {
202    #dokuwiki__header {
203        min-height: 2.7rem;
204        margin-bottom: 0.5rem;
205
206        .main-title.desktop-only p.claim,
207        p.claim {
208            white-space: nowrap;
209            text-overflow: ellipsis;
210            overflow: hidden;
211            max-width: 35em;
212        }
213
214        // desktop
215        @media @screen_min-md {
216            div.claim {
217                vertical-align: top;
218            }
219
220            .main-title.desktop-only {
221                vertical-align: top;
222            }
223
224            .main-title.desktop-only,
225            .logo {
226                padding-top: 0.4rem;
227            }
228
229            .logo img {
230                height: 3.6rem;
231            }
232        }
233
234        // mobile middle
235        @media @screen_max-md {
236
237            .main-title.desktop-only p.claim,
238            p.claim {
239                display: none;
240            }
241
242            .logo {
243                display: block;
244                position: absolute;
245                top: 0;
246                left: 3rem;
247
248                .mobile-only {
249                    margin: .4rem;
250                    height: 1.75rem;
251                }
252            }
253
254            .main-title:not([class*="desktop-only"]) {
255                display: inline-block;
256                vertical-align: top;
257                padding-left: 1.75rem;
258            }
259
260            p.title {
261                font-size: 1rem;
262            }
263        }
264
265        @media @screen_max-xxs {
266            min-height: 70px; // needed for menu select toolbar
267
268            .logo {
269                left: 2rem;
270            }
271
272            .menu-tool-select {
273                padding-top: .3rem;
274            }
275        }
276    }
277}
278