general.less 8.19 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
@body-background-color-mobile: @background-color-mobile;
6
@a-hover-color: red;
7
body {
Karl Hasselbring's avatar
Karl Hasselbring committed
8
    font-family: @metager-font;
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
}

/* 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;
35 36 37
    @media(max-width: @screen-mobile){
        background-color: @body-background-color-mobile
    }
38 39 40 41 42 43 44
}

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

55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
.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;
72
            height: 95%;
73 74 75 76 77 78 79
            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;
80
            margin-left: -20px;
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
        }
        &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;
96 97 98 99 100 101 102 103 104 105
.first-last-child-margin-fix() {
    &:first-child {
        margin-top: 0px;
    }
    &:last-child {
        margin-bottom: 0px;
    }
}

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

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

115
h3 {
Karl Hasselbring's avatar
Karl Hasselbring committed
116
    font-size: (@default-font-size * 1.2);
117 118
    .first-last-child-margin-fix;
}
119

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

125
body {
126 127 128 129 130
    font-size: @default-font-size;
    .first-last-child-margin-fix;
}

.page-title {
Karl Hasselbring's avatar
Karl Hasselbring committed
131
    font-size: (@default-font-size * 3);
132 133 134 135 136 137
    text-align: center;
}

.page-subtitle {
    font-size: @default-font-size;
    text-align: center;
138 139
}

Karl Hasselbring's avatar
Karl Hasselbring committed
140 141 142
.subheading {
    font-size: 20px;
    margin: 20px 0px;
Karl Hasselbring's avatar
Karl Hasselbring committed
143
    white-space: center;
Karl Hasselbring's avatar
Karl Hasselbring committed
144 145
}

146 147
a {
    font-size: 100%;
Karl Hasselbring's avatar
Karl Hasselbring committed
148
    color: @link-color;
149 150 151 152 153 154 155
    &:visited {
        color: @link-color;
    }
    &:hover {
        text-decoration: none;
        color: @a-hover-color;
    }
156
}
157

Karl Hasselbring's avatar
Karl Hasselbring committed
158 159 160 161
i.fa {
    background-color: transparent;
}

162 163
/* Logo */

164
.logo {
Karl Hasselbring's avatar
Karl Hasselbring committed
165
    color: @metager-orange;
166
    font-family: Arimo, Liberation Sans, sans-serif;
167
    font-style: italic;
168
    font-weight: bold;
169
    white-space: nowrap;
170 171
}

172 173
#startpage-logo {
    .logo;
174 175
    display: flex;
    justify-content: center;
176 177
    margin: 0px 0px 45px 0px;
    white-space: nowrap;
178
    text-align: center;
179 180 181
    @media(max-width: @screen-mobile){
        margin-bottom: 25px;
    }
182
    &>a {
183
        .logo;
184
        display: block;
185
        width: fit-content;
186
        text-decoration: none;
187
        font-size: 75px;
188
        @media(max-width: @screen-mobile) {
189 190
            font-size: 50px;
        }
191 192 193
    }
}

194 195
#subpage-logo {
    padding: 5px 0;
196 197 198 199 200 201 202 203 204 205 206 207
    .navbar-brand {
        .noprint;
        line-height: 100% !important;
        padding: 0;
        position: absolute;
        z-index: 5;
        left: 10px;
        h1 {
            .logo;
            font-size: 30px;
            margin: 0;
        }
208 209 210 211 212 213 214
    }
}

/* Links that look like text */

.mutelink {
    &,
215
    &:hover,
216
    &:active,
217
    &:focus,
218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
    &: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;
    }
242 243 244
    &:focus {
        outline: none;
    }
245 246
}

247 248
/* Tooltips 
 * 
249 250
 * All elements with a "data-tooltip" attribute show a 
 * tooltip below on hover
251
 */
252

253
*[data-tooltip] {
254
    position: relative;
255 256 257 258 259
    &:hover {
        &:after {
            opacity: 1;
        }
    }
260 261 262 263 264
    &:after {
        content: attr(data-tooltip);
        position: absolute;
        top: 100%;
        left: 0;
265
        z-index: 1;
266 267 268 269 270 271 272 273 274 275 276 277
        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;
278
        opacity: 0;
279
        transition: opacity 0.3s ease;
280
        text-transform: initial; // Resets specific styles
281
    }
282 283
    &.hide-tooltip-on-resultpage:after {
        /* Auf kleinen Bildschirmen wird der Tooltip nicht angezeigt */
284 285 286 287
        @media (max-width: 700px) {
            display: none;
        }
    }
288 289 290 291 292 293 294 295
    &.delayed:after {
        transition-delay: 0.5s;
    }
    &.delayed-soft:after {
        transition-delay: 0.2s;
    }
    &.delayed-strong:after {
        transition-delay: 1s;
296
    }
297 298
}

299 300
/* For Containers that are supposed to split their content up into two columns */

301 302 303 304
.two-col {
    >* {
        width: 50%;
        margin: 0;
305
        padding: 0;
306
        float: left;
307
        @media (max-width: @screen-mobile) {
308 309
            width: 100%;
        }
Karl Hasselbring's avatar
Karl Hasselbring committed
310
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
311
}
312 313 314

/* Links */

315
// Internal, but design differs from other pages
316 317 318
.inlink {
    &:after {
        display: inline-block;
319
        font: normal normal normal 14px/1 'Font Awesome 5 Free';
320 321 322
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
323
        content: "\f35d";
324 325 326
    }
}

327
// External
328 329 330
.outlink {
    &:after {
        display: inline-block;
331
        font: normal normal normal 14px/1 'Font Awesome 5 Free';
332 333 334
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
335
        content: "\f35d";
336
    }
337 338 339 340
}

/* Little helpers */

341
// Bold text
342 343 344 345
.bold {
    font-weight: bold;
}

346
// Do not print this
347 348
.noprint {
    @media print {
Karl Hasselbring's avatar
Karl Hasselbring committed
349
        display: none !important;
350 351 352
    }
}

353
// For print: Start new page after this
354 355 356 357
.newpage {
    page-break-after: always;
}

358 359 360 361 362 363
// For list elements without a dot
li.nodot {
    list-style-type: none;
}

// Disabled elements (only visual)
364
.disabled,
365 366
:disabled,
.disabled *,
367
:disabled * {
368 369 370 371
    color: #aaa !important;
    cursor: not-allowed !important;
}

372
// Convert excess text into "..."
373 374 375 376 377 378
.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

379 380 381 382 383
// Used on labels which initiate visual change (e.g. open-sidebar-button)
.navigation-element {
    cursor: pointer;
}

Karl Hasselbring's avatar
Karl Hasselbring committed
384 385 386 387 388 389
/* Button */

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

Karl Hasselbring's avatar
Karl Hasselbring committed
391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414
/* Lists with dots */

.dotlist {
    list-style-type: disc;
    text-align: left;
    li {
        margin-bottom: 5px !important;
    }
}

/* Code */

code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Adresses */

address {
    white-space: pre;
}

415
/* Unknown Uses */
416 417 418 419 420 421 422

label a {
    color: inherit;
    &:hover {
        text-decoration: none;
        color: inherit;
    }
423 424
}

425 426 427
// For Elements where newlines should actually be displayed
.wrap {
    white-space: pre-wrap;
428 429 430 431 432 433 434
}

// When the content should be centerd horizontally
.center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
435 436 437 438 439 440
}

#impressum, #kontakt, #team, #about {
    .card-heavy {
        margin: 8px 0;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
441
}