general.less 7.6 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
}

Karl Hasselbring's avatar
Karl Hasselbring committed
135 136 137 138 139 140
.subheading {
    font-size: 20px;
    margin: 20px 0px;
    white-space: pre-wrap;
}

141 142
a {
    font-size: 100%;
Karl Hasselbring's avatar
Karl Hasselbring committed
143
    color: @link-color;
144 145 146 147 148 149 150
    &:visited {
        color: @link-color;
    }
    &:hover {
        text-decoration: none;
        color: @a-hover-color;
    }
151
}
152

Karl Hasselbring's avatar
Karl Hasselbring committed
153 154 155 156
i.fa {
    background-color: transparent;
}

157 158
/* Logo */

159
.logo {
Karl Hasselbring's avatar
Karl Hasselbring committed
160
    color: @metager-orange;
161
    font-family: Arimo, Liberation Sans, sans-serif;
162
    font-style: italic;
163
    font-weight: bold;
164
    white-space: nowrap;
165 166
}

167 168
#startpage-logo {
    .logo;
169 170
    display: flex;
    justify-content: center;
171 172
    margin: 0px 0px 45px 0px;
    white-space: nowrap;
173 174
    text-align: center;
    &>a {
175
        .logo;
176
        display: block;
177
        width: fit-content;
178
        text-decoration: none;
179
        font-size: 75px;
180
        @media(max-width: @screen-mobile) {
181 182
            font-size: 50px;
        }
183 184 185
    }
}

186 187
#subpage-logo {
    padding: 5px 0;
188 189 190 191 192 193 194 195 196 197 198 199
    .navbar-brand {
        .noprint;
        line-height: 100% !important;
        padding: 0;
        position: absolute;
        z-index: 5;
        left: 10px;
        h1 {
            .logo;
            font-size: 30px;
            margin: 0;
        }
200 201 202 203 204 205 206
    }
}

/* Links that look like text */

.mutelink {
    &,
207
    &:hover,
208
    &:active,
209
    &:focus,
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
    &: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;
    }
234 235 236
    &:focus {
        outline: none;
    }
237 238
}

239 240
/* Tooltips 
 * 
241 242
 * All elements with a "data-tooltip" attribute show a 
 * tooltip below on hover
243
 */
244

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

291 292
/* For Containers that are supposed to split their content up into two columns */

293 294 295 296 297
.two-col {
    >* {
        width: 50%;
        margin: 0;
        float: left;
298
        @media (max-width: @screen-mobile) {
299 300
            width: 100%;
        }
Karl Hasselbring's avatar
Karl Hasselbring committed
301
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
302
}
303 304 305

/* Links */

306
// Internal, but design differs from other pages
307 308 309
.inlink {
    &:after {
        display: inline-block;
310
        font: normal normal normal 14px/1 'Font Awesome 5 Free';
311 312 313
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
314
        content: "\f35d";
315 316 317
    }
}

318
// External
319 320 321
.outlink {
    &:after {
        display: inline-block;
322
        font: normal normal normal 14px/1 'Font Awesome 5 Free';
323 324 325
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
326
        content: "\f35d";
327
    }
328 329 330 331
}

/* Little helpers */

332
// Bold text
333 334 335 336
.bold {
    font-weight: bold;
}

337
// Do not print this
338 339
.noprint {
    @media print {
Karl Hasselbring's avatar
Karl Hasselbring committed
340
        display: none !important;
341 342 343
    }
}

344
// For print: Start new page after this
345 346 347 348
.newpage {
    page-break-after: always;
}

349 350 351 352 353 354
// For list elements without a dot
li.nodot {
    list-style-type: none;
}

// Disabled elements (only visual)
355
.disabled,
356 357 358 359
:disabled,
.disabled *,
:disabled *,
    {
360 361 362 363
    color: #aaa !important;
    cursor: not-allowed !important;
}

364
// Convert excess text into "..."
365 366 367 368 369 370
.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

371 372 373 374 375
// Used on labels which initiate visual change (e.g. open-sidebar-button)
.navigation-element {
    cursor: pointer;
}

Karl Hasselbring's avatar
Karl Hasselbring committed
376 377 378 379 380 381
/* Button */

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

Karl Hasselbring's avatar
Karl Hasselbring committed
383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406
/* 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;
}

407
/* Unknown Uses */
408 409 410 411 412 413 414

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