119 lines
2.4 KiB
CSS
119 lines
2.4 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
font-family: "Questrial", Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
#root {
|
|
background: var(--theme-bg);
|
|
color: var(--theme-text);
|
|
min-width: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--theme-bg);
|
|
}
|
|
|
|
main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.shell {
|
|
width: var(--container-wide);
|
|
margin: 0 auto;
|
|
padding: 0 0 clamp(2.2rem, 6vw, 5rem);
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.page,
|
|
.detail-page,
|
|
.discovery-page,
|
|
.about-page,
|
|
.support-page,
|
|
.small-page,
|
|
.impressum-page,
|
|
.datenschutz-page {
|
|
isolation: isolate;
|
|
}
|
|
|
|
.detail-page .navbar--light,
|
|
.discovery-page .navbar--light,
|
|
.about-page .navbar--light,
|
|
.support-page .navbar--light,
|
|
.small-page .navbar--light,
|
|
.impressum-page .navbar--light,
|
|
.datenschutz-page .navbar--light {
|
|
position: fixed;
|
|
top: clamp(0.75rem, 2.1vw, 1.4rem);
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 998;
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.detail-page .navbar--light .nav-pill,
|
|
.discovery-page .navbar--light .nav-pill,
|
|
.about-page .navbar--light .nav-pill,
|
|
.support-page .navbar--light .nav-pill,
|
|
.small-page .navbar--light .nav-pill,
|
|
.impressum-page .navbar--light .nav-pill,
|
|
.datenschutz-page .navbar--light .nav-pill {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.navbar--light .nav-pill,
|
|
.navbar--light .nav-link,
|
|
.shell,
|
|
[class*="-page"],
|
|
[class*="-shell"],
|
|
[class*="-card"],
|
|
[class*="-panel"],
|
|
[class*="-box"],
|
|
button,
|
|
input,
|
|
textarea {
|
|
transition:
|
|
background-color var(--duration-med) var(--ease-out),
|
|
border-color var(--duration-med) var(--ease-out),
|
|
color var(--duration-med) var(--ease-out),
|
|
box-shadow var(--duration-med) var(--ease-out);
|
|
}
|
|
|
|
body.theme-dark .navbar--light .nav-pill {
|
|
background: rgba(38, 38, 38, 0.88);
|
|
border-color: rgba(234, 234, 234, 0.26);
|
|
}
|
|
|
|
body.theme-dark .navbar--light .nav-link {
|
|
color: var(--theme-white);
|
|
}
|
|
|
|
body.theme-dark .navbar--light .nav-link:hover,
|
|
body.theme-dark .navbar--light .nav-link.active {
|
|
background: rgba(234, 234, 234, 0.15);
|
|
}
|
|
|
|
body.theme-dark .navbar--light .nav-theme-switch__track {
|
|
border-color: rgba(234, 234, 234, 0.3);
|
|
background: rgba(234, 234, 234, 0.14);
|
|
}
|
|
|
|
body.theme-dark .navbar--light .nav-brand-logo {
|
|
filter: invert(1) brightness(1.08);
|
|
}
|
|
|
|
body.theme-light .navbar--light .nav-link:hover,
|
|
body.theme-light .navbar--light .nav-link.active {
|
|
background: var(--theme-surface-soft);
|
|
}
|