general.less 7 KB
Newer Older
1
2
/* Default Font */

Karl Hasselbring's avatar
Karl Hasselbring committed
3
4
@modal-content-box-shadow-color: fade(@color-black, 30%);
@body-background-color: @background-color;
5
@a-hover-color: red;
6
body {
Karl Hasselbring's avatar
Karl Hasselbring committed
7
    font-family: @metager-font;
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
}

/* Main Containers */

html,
body,
.content-wrapper {
    width: 100%;
}

html {
    min-height: 100%;
    height: auto;
    display: flex;
}

body {
    flex-grow: 1;
    background-image: inherit;
    background-color: @body-background-color;
    background-attachment: fixed;
    min-height: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
41
42
    align-items: center;
    margin-top: 50px;
43
44
45
46
47
48
    padding: 0px 8px;
    overflow: hidden;
    main {
        width: 100%;
        max-width: 1000px;
    }
49
50
}

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
.navbar,
#navbar-static-pages {
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
}

/* Scrollbox Style */

@scrollfade-color: white;
.scrollbox {
    position: relative;
    width: 100%;
    max-width: @results-width-max;
    .scrollfade- {
        &left,
        &right {
            position: absolute;
            width: 20px;
            height: 40px;
            top: 1px;
            pointer-events: none;
        }
        &left {
            background: -webkit-gradient(linear, left top, right top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
            background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
            left: 1px;
        }
        &right {
            background: -webkit-gradient(linear, right top, left top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
            background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
            right: 1px;
        }
    }
    .search-option-frame {
        position: relative;
    }
}

/* General font sizing */

@default-font-size: 15px;
91
92
93
94
95
96
97
98
99
100
.first-last-child-margin-fix() {
    &:first-child {
        margin-top: 0px;
    }
    &:last-child {
        margin-bottom: 0px;
    }
}

h1 {
Karl Hasselbring's avatar
Karl Hasselbring committed
101
    font-size: (@default-font-size * 1.6);
102
103
    .first-last-child-margin-fix;
}
104

105
h2 {
Karl Hasselbring's avatar
Karl Hasselbring committed
106
    font-size: (@default-font-size * 1.4);
107
108
    .first-last-child-margin-fix;
}
109

110
h3 {
Karl Hasselbring's avatar
Karl Hasselbring committed
111
    font-size: (@default-font-size * 1.2);
112
113
    .first-last-child-margin-fix;
}
114

115
116
117
118
p {
    font-size: @default-font-size;
    .first-last-child-margin-fix;
}
119

120
body {
121
122
123
124
125
    font-size: @default-font-size;
    .first-last-child-margin-fix;
}

.page-title {
Karl Hasselbring's avatar
Karl Hasselbring committed
126
    font-size: (@default-font-size * 3);
127
128
129
130
131
132
    text-align: center;
}

.page-subtitle {
    font-size: @default-font-size;
    text-align: center;
133
134
}

135
136
a {
    font-size: 100%;
Karl Hasselbring's avatar
Karl Hasselbring committed
137
    color: @link-color;
138
139
140
141
142
143
144
    &:visited {
        color: @link-color;
    }
    &:hover {
        text-decoration: none;
        color: @a-hover-color;
    }
145
}
146

147
148
/* Logo */

149
.logo {
Karl Hasselbring's avatar
Karl Hasselbring committed
150
    color: @metager-orange;
151
    font-family: Arimo, Liberation Sans, sans-serif;
152
    font-style: italic;
153
    font-weight: bold;
154
    white-space: nowrap;
155
156
}

157
158
#startpage-logo {
    .logo;
159
160
    display: flex;
    justify-content: center;
161
162
    margin: 0px 0px 45px 0px;
    white-space: nowrap;
163
164
    text-align: center;
    &>a {
165
        .logo;
166
        display: block;
167
        width: fit-content;
168
        text-decoration: none;
169
        font-size: 75px;
170
        @media(max-width: @screen-mobile) {
171
172
            font-size: 50px;
        }
173
174
175
    }
}

176
177
178
179
#subpage-logo {
    padding: 5px 0;
    a h1 {
        .logo;
180
        font-size: 30px;
181
        margin: 0;
182
183
184
185
186
187
188
    }
}

/* Links that look like text */

.mutelink {
    &,
189
    &:hover,
190
    &:active,
191
    &:focus,
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
    &:visited {
        color: inherit;
    }
}

/* Summary Elements */

summary {
    cursor: pointer;
    &::-webkit-details-marker {
        display: none;
    }
    &::-moz-details-marker {
        display: none;
    }
    &::-ms-details-marker {
        display: none;
    }
    &::-o-details-marker {
        display: none;
    }
    &::details-marker {
        display: none;
    }
216
217
218
    &:focus {
        outline: none;
    }
219
220
}

221
222
/* Tooltips 
 * 
223
224
 * All elements with a "data-tooltip" attribute show a 
 * tooltip below on hover
225
 */
226

227
*[data-tooltip] {
228
    position: relative;
229
230
231
232
233
    &:hover {
        &:after {
            opacity: 1;
        }
    }
234
235
236
237
238
    &:after {
        content: attr(data-tooltip);
        position: absolute;
        top: 100%;
        left: 0;
239
        z-index: 1;
240
241
242
243
244
245
246
247
248
249
250
251
        color: black;
        background-color: white;
        border: 2px solid @metager-orange;
        border-radius: 6px;
        padding: 3px 8px;
        width: 200px;
        white-space: pre-wrap;
        font-size: 15px;
        font-weight: normal;
        text-decoration: none;
        text-align: center;
        pointer-events: none;
252
        opacity: 0;
253
        transition: opacity 0.3s ease;
254
        text-transform: initial; // Resets specific styles
255
    }
256
257
    &.hide-tooltip-on-resultpage:after {
        /* Auf kleinen Bildschirmen wird der Tooltip nicht angezeigt */
258
259
260
261
        @media (max-width: 700px) {
            display: none;
        }
    }
262
263
264
265
266
267
268
269
    &.delayed:after {
        transition-delay: 0.5s;
    }
    &.delayed-soft:after {
        transition-delay: 0.2s;
    }
    &.delayed-strong:after {
        transition-delay: 1s;
270
    }
271
272
}

273
274
/* For Containers that are supposed to split their content up into two columns */

275
276
277
278
279
.two-col {
    >* {
        width: 50%;
        margin: 0;
        float: left;
280
        @media (max-width: @screen-mobile) {
281
282
            width: 100%;
        }
Karl Hasselbring's avatar
Karl Hasselbring committed
283
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
284
}
285
286
287

/* Links */

288
// Internal, but design differs from other pages
289
290
291
.inlink {
    &:after {
        display: inline-block;
292
        font: normal normal normal 14px/1 'Font Awesome 5 Free';
293
294
295
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
296
        content: "\f35d";
297
298
299
    }
}

300
// External
301
302
303
.outlink {
    &:after {
        display: inline-block;
304
        font: normal normal normal 14px/1 'Font Awesome 5 Free';
305
306
307
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
308
        content: "\f35d";
309
    }
310
311
312
313
}

/* Little helpers */

314
// Bold text
315
316
317
318
.bold {
    font-weight: bold;
}

319
// Do not print this
320
321
.noprint {
    @media print {
Karl Hasselbring's avatar
Karl Hasselbring committed
322
        display: none !important;
323
324
325
    }
}

326
// For print: Start new page after this
327
328
329
330
.newpage {
    page-break-after: always;
}

331
332
333
334
335
336
// For list elements without a dot
li.nodot {
    list-style-type: none;
}

// Disabled elements (only visual)
337
.disabled,
338
339
340
341
:disabled,
.disabled *,
:disabled *,
    {
342
343
344
345
    color: #aaa !important;
    cursor: not-allowed !important;
}

346
// Convert excess text into "..."
347
348
349
350
351
352
.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

353
354
355
356
357
// Used on labels which initiate visual change (e.g. open-sidebar-button)
.navigation-element {
    cursor: pointer;
}

Karl Hasselbring's avatar
Karl Hasselbring committed
358
359
360
361
362
363
/* Button */

button {
    border: none;
    background-color: transparent;
}
364

365
/* Unknown Uses */
366
367
368
369
370
371
372

label a {
    color: inherit;
    &:hover {
        text-decoration: none;
        color: inherit;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
373
}