hugo-theme-hilfe/src/sass/_base.scss

755 lines
12 KiB
SCSS
Raw Normal View History

2021-04-27 23:44:35 +02:00
:root,
:root[color-theme="light"] {
--code-max-height: none;
@include color_theme_light;
@include code_theme_light;
2021-04-27 23:44:35 +02:00
}
@media (prefers-color-scheme: light) {
:root {
@include color_theme_light;
@include code_theme_light;
2021-04-27 23:44:35 +02:00
}
}
:root[color-theme="dark"] {
@include color_theme_dark;
@include code_theme_dark;
}
:root[code-theme="dark"] {
@include code_theme_dark;
2021-04-27 23:44:35 +02:00
}
@media (prefers-color-scheme: dark) {
:root {
@include color_theme_dark;
@include code_theme_dark;
2021-04-27 23:44:35 +02:00
}
}
2020-01-12 15:33:02 +01:00
html {
font-size: $font-size-base;
letter-spacing: 0.33px;
scroll-behavior: smooth;
2021-04-27 23:44:35 +02:00
&.color-toggle-hidden {
#gdoc-color-theme {
2021-04-27 23:44:35 +02:00
.gdoc_brightness_auto,
.gdoc_brightness_dark,
.gdoc_brightness_light {
display: none;
}
}
}
&.color-toggle-light {
#gdoc-color-theme {
2021-04-27 23:44:35 +02:00
.gdoc_brightness_light {
display: inline-block;
}
.gdoc_brightness_auto,
.gdoc_brightness_dark {
display: none;
}
}
}
&.color-toggle-dark {
#gdoc-color-theme {
2021-04-27 23:44:35 +02:00
.gdoc_brightness_dark {
display: inline-block;
}
.gdoc_brightness_auto,
.gdoc_brightness_light {
display: none;
}
}
}
&.color-toggle-auto {
#gdoc-color-theme {
2021-04-27 23:44:35 +02:00
.gdoc_brightness_light {
display: none;
}
.gdoc_brightness_dark {
display: none;
}
.gdoc_brightness_auto {
display: inline-block;
}
}
}
2020-01-12 15:33:02 +01:00
}
html,
body {
min-width: $body-min-width;
overflow-x: hidden;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
* {
box-sizing: inherit;
}
}
h1,
h2,
h3,
h4,
2020-02-26 23:59:30 +01:00
h5,
h6 {
2020-01-12 15:33:02 +01:00
font-weight: $body-font-weight;
2020-02-26 23:59:30 +01:00
display: flex;
align-items: center;
}
h4,
h5,
h6 {
font-size: 1rem !important;
2020-01-12 15:33:02 +01:00
}
a {
text-decoration: none;
2021-04-27 23:44:35 +02:00
color: var(--link-color);
2020-01-12 15:33:02 +01:00
&:hover {
text-decoration: underline;
}
&:visited {
2021-04-27 23:44:35 +02:00
color: var(--link-color-visited);
2020-01-12 15:33:02 +01:00
}
}
2022-01-12 21:40:57 +01:00
i.gdoc-icon {
font-family: "GeekdocIcons";
font-style: normal;
}
2020-01-12 15:33:02 +01:00
img {
vertical-align: middle;
}
#gdoc-color-theme {
cursor: pointer;
}
.fake-link:hover {
2021-04-27 23:44:35 +02:00
background-image: linear-gradient(var(--link-color), var(--link-color));
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
text-decoration: none;
}
2020-01-12 15:33:02 +01:00
.wrapper {
2020-03-15 18:38:10 +01:00
display: flex;
flex-direction: column;
min-height: 100vh;
2021-04-27 23:44:35 +02:00
color: var(--body-font-color);
background: var(--body-background);
font-weight: $body-font-weight;
2020-01-12 15:33:02 +01:00
}
.container {
width: 100%;
max-width: $container-max-width;
margin: 0 auto;
padding: $padding-16;
2020-01-12 15:33:02 +01:00
}
svg.gdoc-icon {
2020-01-12 15:33:02 +01:00
display: inline-block;
width: $font-size-20;
height: $font-size-20;
vertical-align: middle;
2020-01-12 15:33:02 +01:00
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
position: relative;
}
.gdoc-header {
2021-04-27 23:44:35 +02:00
background: var(--header-background);
color: var(--header-font-color);
border-bottom: 0.3em solid var(--footer-background);
2020-01-12 15:33:02 +01:00
&__link,
&__link:visited {
color: var(--header-font-color);
2020-01-12 15:33:02 +01:00
}
&__link:hover {
text-decoration: none;
}
svg.gdoc-icon {
2021-05-21 13:31:19 +02:00
width: $font-size-32;
height: $font-size-32;
2020-01-12 15:33:02 +01:00
}
}
.gdoc-brand {
2021-05-21 13:31:19 +02:00
font-size: $font-size-32;
line-height: $font-size-32;
2020-01-12 15:33:02 +01:00
&__img {
margin-right: $padding-16;
width: 2rem;
height: 2rem;
2020-01-12 15:33:02 +01:00
}
}
.gdoc-menu-header {
&__items {
display: flex;
2021-10-15 11:50:11 +02:00
> span {
margin-left: $padding-8;
}
}
&__control,
&__home {
display: none;
svg.gdoc-icon {
cursor: pointer;
}
}
}
2020-01-12 15:33:02 +01:00
.gdoc-nav {
flex: 0 0 $menu-width;
font-size: $font-size-14;
nav {
width: $menu-width;
padding: $padding-16 $padding-32 $padding-16 0;
2020-01-12 15:33:02 +01:00
> ul > li > * {
font-weight: normal;
}
2021-11-13 13:57:06 +01:00
> :first-child,
> :first-child > :first-child {
2020-01-12 15:33:02 +01:00
margin-top: 0;
}
2021-11-13 13:57:06 +01:00
section {
margin-top: $padding-32;
}
2020-01-12 15:33:02 +01:00
}
&__control {
display: none;
margin: 0;
padding: 0;
svg.gdoc-icon {
cursor: pointer;
}
svg.gdoc-icon.gdoc_menu {
2020-01-12 15:33:02 +01:00
display: inline-block;
}
svg.gdoc-icon.gdoc_arrow_back {
2020-01-12 15:33:02 +01:00
display: none;
}
}
&__list {
padding-left: 1em;
margin: 0;
padding: 0;
list-style: none;
user-select: none;
2020-01-12 15:33:02 +01:00
ul {
padding-left: $padding-16;
}
li {
margin: $padding-8 0;
}
svg.gdoc-icon {
2020-01-12 15:33:02 +01:00
margin-right: $padding-4;
}
}
&__toggle {
display: none;
& ~ label {
cursor: pointer;
svg.gdoc-icon.toggle {
width: $font-size-16;
height: $font-size-16;
}
}
&:not(:checked) {
& ~ ul,
& ~ label svg.gdoc-icon.gdoc_keyboard_arrow_down {
display: none;
}
& ~ label svg.gdoc-icon.gdoc_keyboard_arrow_left {
display: block;
}
}
&:checked {
& ~ ul,
& ~ label svg.gdoc-icon.gdoc_keyboard_arrow_down {
display: block;
}
& ~ label svg.gdoc-icon.gdoc_keyboard_arrow_left {
display: none;
}
}
}
2020-01-12 15:33:02 +01:00
&--main > ul > li > span,
&--main > ul > li > span > a,
&--main > ul > li > label,
&--main > ul > li > label > a {
2020-01-12 15:33:02 +01:00
font-weight: bold;
}
}
.gdoc-nav__entry,
.gdoc-search__entry,
.gdoc-language__entry {
flex: 1;
2021-04-27 23:44:35 +02:00
color: var(--body-font-color);
&:hover,
&.is-active {
text-decoration: underline;
text-decoration-style: dashed !important;
}
&:visited {
2021-04-27 23:44:35 +02:00
color: var(--body-font-color);
}
}
.gdoc-search__list,
.gdoc-language__list {
background: var(--body-background);
border-radius: $border-radius;
box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
position: absolute;
margin: 0;
padding: $padding-8 !important;
list-style: none;
top: calc(100% + #{$padding-8});
z-index: 2;
}
2020-01-12 15:33:02 +01:00
.gdoc-page {
min-width: calc($body-min-width - $padding-32);
2020-01-12 15:33:02 +01:00
flex-grow: 1;
padding: $padding-16 0;
2020-01-12 15:33:02 +01:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
2020-01-12 15:33:02 +01:00
&__header,
&__footer {
margin-bottom: $padding-24;
2020-01-12 15:33:02 +01:00
svg.gdoc-icon {
2021-04-27 23:44:35 +02:00
color: var(--control-icons);
2020-01-12 15:33:02 +01:00
}
a,
a:visited {
2021-04-27 23:44:35 +02:00
color: var(--link-color);
2020-01-12 15:33:02 +01:00
}
}
&__header {
2021-04-27 23:44:35 +02:00
background: var(--accent-color-lite);
2020-01-12 15:33:02 +01:00
padding: $padding-8 $padding-16;
border-radius: $border-radius;
}
&__nav {
2020-03-15 18:38:10 +01:00
&:hover {
2021-04-27 23:44:35 +02:00
background-image: linear-gradient(var(--link-color), var(--link-color));
2020-03-15 18:38:10 +01:00
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
}
2020-01-12 15:33:02 +01:00
}
2020-02-26 23:59:30 +01:00
&__anchorwrap {
&:hover .gdoc-page__anchor svg.gdoc-icon {
2021-04-27 23:44:35 +02:00
color: var(--control-icons);
}
}
2020-03-15 18:38:10 +01:00
&__anchor {
margin-left: $padding-8;
svg.gdoc-icon {
width: 1.4em;
height: 1.4em;
color: transparent;
}
&:focus {
svg.gdoc-icon {
color: var(--control-icons);
}
}
2020-02-26 23:59:30 +01:00
}
2021-11-24 09:10:26 +01:00
&__footer {
margin-top: $padding-32;
a:hover {
text-decoration: none;
}
}
2020-01-12 15:33:02 +01:00
}
.gdoc-post {
word-wrap: break-word;
border-top: 1px dashed $gray-600;
padding: $padding-32 0;
2020-01-12 15:33:02 +01:00
&:first-of-type {
padding-top: 0;
}
&__header {
h1 {
margin-top: 0;
}
2020-01-12 15:33:02 +01:00
a,
a:visited {
2021-04-27 23:44:35 +02:00
color: var(--body-font-color);
text-decoration: none;
}
a:hover {
background: none;
text-decoration: underline;
2021-04-27 23:44:35 +02:00
color: var(--body-font-color);
2020-01-12 15:33:02 +01:00
}
}
&:first-child {
border-top: 0;
h1 {
2020-06-01 15:59:02 +02:00
margin-top: 0;
2020-01-12 15:33:02 +01:00
}
}
&__readmore {
margin: $padding-32 0;
2020-01-12 15:33:02 +01:00
a,
a:hover,
a:visited {
2021-04-27 23:44:35 +02:00
color: var(--link-color);
text-decoration: none !important;
2020-01-12 15:33:02 +01:00
}
}
2021-09-01 10:18:00 +02:00
&__meta {
span svg.gdoc-icon {
margin-left: -5px;
}
2021-09-01 10:18:00 +02:00
> span {
margin: $padding-4 0;
&:not(:last-child) {
margin-right: $padding-8;
}
2021-09-01 10:18:00 +02:00
}
svg.gdoc-icon {
font-size: $font-size-20;
}
.gdoc-button {
margin: 0 $padding-2 0 0;
}
&--head {
margin-bottom: $padding-32;
2021-09-01 10:18:00 +02:00
}
}
&__codecontainer {
position: relative;
&:hover > .gdoc-post__codecopy {
visibility: visible;
}
}
&__codecopy {
visibility: hidden;
position: absolute;
top: 0.5rem;
right: 1rem;
border: $border-2 solid var(--code-copy-border-color);
border-radius: $border-radius;
background: var(--code-copy-background);
width: 2.2rem;
height: 2.2rem;
svg.gdoc-icon {
top: 0;
width: $font-size-20;
height: $font-size-20;
color: var(--code-copy-font-color);
}
&:hover {
cursor: pointer;
}
&--success {
border-color: var(--code-copy-success-color);
svg.gdoc-icon {
color: var(--code-copy-success-color);
}
}
}
2020-01-12 15:33:02 +01:00
}
.gdoc-footer {
2021-04-27 23:44:35 +02:00
background: var(--footer-background);
color: var(--footer-font-color);
2020-01-12 15:33:02 +01:00
.fake-link:hover {
background-image: linear-gradient(var(--footer-link-color), var(--footer-link-color));
}
&__item {
2020-09-19 22:06:38 +02:00
line-height: 2em;
&--row {
2021-11-24 09:10:26 +01:00
margin-right: $padding-16;
}
}
2020-01-12 15:33:02 +01:00
&__link {
2021-04-27 23:44:35 +02:00
color: var(--footer-link-color);
2020-01-12 15:33:02 +01:00
&:visited {
2021-04-27 23:44:35 +02:00
color: var(--footer-link-color-visited);
2020-01-12 15:33:02 +01:00
}
}
}
.gdoc-search {
position: relative;
svg.gdoc-icon {
2020-01-12 15:33:02 +01:00
position: absolute;
left: $padding-8;
2021-04-27 23:44:35 +02:00
color: var(--control-icons);
2020-01-12 15:33:02 +01:00
width: $font-size-16;
height: $font-size-16;
}
&::after {
display: block;
content: "";
clear: both;
}
&__input {
width: 100%;
padding: $padding-8;
padding-left: $padding-32;
2020-01-12 15:33:02 +01:00
2021-04-27 23:44:35 +02:00
border: $border-1 solid var(--accent-color);
2020-01-12 15:33:02 +01:00
border-radius: $border-radius;
2021-04-27 23:44:35 +02:00
background: var(--accent-color-lite);
color: var(--body-font-color);
2020-01-12 15:33:02 +01:00
&:required + &__spinner {
display: block;
}
}
&__spinner {
position: absolute;
margin: $padding-8;
right: 0;
top: 0;
width: $padding-16;
height: $padding-16;
border: $border-1 solid transparent;
2021-04-27 23:44:35 +02:00
border-top-color: var(--body-font-color);
2020-01-12 15:33:02 +01:00
border-radius: 50%;
@include spin(1s);
}
&__list {
visibility: hidden;
2020-12-20 20:09:49 +01:00
left: 0;
width: 100%;
2020-01-12 15:33:02 +01:00
ul {
2020-12-20 20:09:49 +01:00
list-style: none;
margin-top: $padding-8;
padding-left: 0;
2020-01-12 15:33:02 +01:00
}
li {
margin: $padding-4 0;
}
2020-12-20 20:09:49 +01:00
> li > span {
font-weight: bold;
}
> li + li {
margin-top: $padding-8;
2020-12-20 20:09:49 +01:00
}
svg.gdoc-icon {
2020-01-12 15:33:02 +01:00
margin-right: $padding-4;
}
2020-12-20 20:09:49 +01:00
}
&:focus-within &__list.has-hits,
&__list.has-hits:active {
visibility: visible;
2020-01-12 15:33:02 +01:00
}
}
.gdoc-language {
&__selector {
position: relative;
list-style: none;
user-select: none;
cursor: pointer;
margin: 0;
padding: 0;
width: 100%;
&:focus,
&:focus-within,
&:active {
.gdoc-language__list {
display: block;
}
}
}
&__list {
display: none;
right: 0;
width: auto;
white-space: nowrap;
}
}
2020-01-12 15:33:02 +01:00
.gdoc-error {
padding: $padding-96 $padding-16;
2020-01-12 15:33:02 +01:00
margin: 0 auto;
max-width: 45em;
svg.gdoc-icon {
2021-05-21 13:31:19 +02:00
width: $font-size-128;
height: $font-size-128;
2021-04-27 23:44:35 +02:00
color: var(--body-font-color);
2020-01-12 15:33:02 +01:00
}
&__link,
&__link:visited {
2021-04-27 23:44:35 +02:00
color: var(--link-color);
2020-01-12 15:33:02 +01:00
}
&__message {
padding-left: $padding-64;
2020-01-12 15:33:02 +01:00
}
&__line {
padding: $padding-8 0;
}
&__title {
2021-05-21 13:31:19 +02:00
font-size: $font-size-64;
2020-01-12 15:33:02 +01:00
}
&__code {
font-weight: bolder;
}
}
.gdoc-toc {
// Classes to hide nested levels of ToC/Menu
2020-02-16 23:05:53 +01:00
&__level--1 ul ul,
&__level--2 ul ul ul,
&__level--3 ul ul ul ul,
&__level--4 ul ul ul ul ul,
&__level--5 ul ul ul ul ul ul,
&__level--6 ul ul ul ul ul ul ul {
2020-01-12 15:33:02 +01:00
display: none;
}
a,
a:visited {
2021-04-27 23:44:35 +02:00
color: var(--link-color);
2020-01-12 15:33:02 +01:00
}
}
// Responsive styles
.gdoc-nav nav,
.gdoc-page,
.markdown {
transition: 0.2s ease-in-out;
transition-property: transform, margin-left, opacity;
2020-05-31 18:20:39 +02:00
will-change: transform, margin-left;
2020-01-12 15:33:02 +01:00
}
// Breadcrumbs styles
.breadcrumb {
display: inline;
padding: 0;
margin: 0;
li {
display: inline;
}
}