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