tfw
801738558a
Refined CSS to enhance responsiveness, typography, and layout, including new media query adjustments and visual tweaks. These changes optimize the UI for various devices and ensure consistent styling across components.
584 lines
10 KiB
SCSS
584 lines
10 KiB
SCSS
//Fontawesome importieren
|
|
|
|
@import "fontawesome/fontawesome";
|
|
@import "fontawesome/regular";
|
|
@import "fontawesome/solid";
|
|
@import "fontawesome/brands";
|
|
@import "fontawesome/light";
|
|
@import "fontawesome/sharp-light";
|
|
@import "fontawesome/sharp-thin";
|
|
|
|
// Module importieren
|
|
@import "modules/consent";
|
|
@import 'modules/team';
|
|
@import "modules/header";
|
|
@import 'modules/footer';
|
|
@import 'modules/home';
|
|
@import 'modules/testimonials';
|
|
@import "modules/faq";
|
|
|
|
//Responsive Design
|
|
|
|
@import "responsive/medium";
|
|
@import "responsive/mobile";
|
|
|
|
@mixin transition {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
// satware.ai CI-Anpassungen
|
|
|
|
/* assistant-300 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url('../assets/fonts/assistant-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
url('../assets/fonts/assistant-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
|
}
|
|
|
|
/* assistant-regular - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('../assets/fonts/assistant-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
url('../assets/fonts/assistant-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
|
}
|
|
|
|
/* assistant-700 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('../assets/fonts/assistant-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
url('../assets/fonts/assistant-v19-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
|
}
|
|
|
|
html {
|
|
|
|
font-size: 100% !important;
|
|
|
|
}
|
|
|
|
// Schriftart auf "Assistant" setzen
|
|
:root {
|
|
--md-text-font: "Assistant";
|
|
--md-code-font: "Assistant";
|
|
}
|
|
|
|
// Dark Theme optimieren (schwarzer Hintergrund nach CI)
|
|
[data-md-color-scheme="slate"] {
|
|
--md-default-bg-color: #000000;
|
|
--md-default-fg-color: #ffffff;
|
|
--md-default-fg-color--light: rgba(255, 255, 255, 0.8);
|
|
--md-default-fg-color--lighter: rgba(255, 255, 255, 0.54);
|
|
--md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
|
|
|
|
// Primär- und Akzentfarben gemäß satware CI
|
|
--md-primary-fg-color: #521370; // Primärfarbe: satware Violett
|
|
--md-primary-fg-color--light: #7e3a9e; // Helle Variante
|
|
--md-primary-fg-color--dark: #3c0e52; // Dunkle Variante
|
|
--md-accent-fg-color: #8a44bd; // Akzentfarbe: Helleres Violett
|
|
|
|
// Link-Farbe anpassen
|
|
--md-typeset-a-color: #9d65cf; // Helleres Violett für Links
|
|
}
|
|
|
|
.md-search__scrollwrap {
|
|
tabindex: 0; /* Macht das Element fokussierbar */
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--md-primary-fg-color);;
|
|
color: #fff;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--md-primary-fg-color);;
|
|
color: #fff;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: #d0d0d0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--md-primary-fg-color);
|
|
}
|
|
|
|
|
|
body {
|
|
font-weight: 300;
|
|
font-size: 1.3rem;
|
|
line-height: 2rem;
|
|
|
|
.md-typeset,
|
|
.md-nav {
|
|
font-size: 1.3rem;
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #fff;
|
|
|
|
a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
&:after {
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
display: block;
|
|
height: 12px;
|
|
width: 85px;
|
|
margin-top: 1.3rem;
|
|
margin-bottom: -0.2rem;
|
|
}
|
|
}
|
|
|
|
.md-typeset ul {
|
|
list-style-type: none;
|
|
padding: 0 0 0 2rem;
|
|
|
|
li {
|
|
&:before {
|
|
|
|
content: "\f00c";
|
|
font-family: "Font Awesome 6 Pro";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
padding-right: 0.5rem;
|
|
color: var(--md-primary-fg-color);
|
|
margin-left: -1.5rem;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
[dir=ltr] .md-typeset ul li {
|
|
margin-left: -1em;
|
|
//margin-top: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.md-typeset h1,
|
|
h1 {
|
|
color: #fff;
|
|
margin-bottom: 1.75rem;
|
|
text-align: left;
|
|
font-size: 8rem;
|
|
line-height: 1.1;
|
|
|
|
a.headerlink {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.md-typeset h2,
|
|
h2 {
|
|
line-height: 3rem;
|
|
font-size: 2.7rem;
|
|
|
|
&:after {
|
|
margin-top: .6rem;
|
|
height: 7px;
|
|
width: 50px;
|
|
|
|
}
|
|
}
|
|
|
|
.md-typeset h3,
|
|
h3 {
|
|
|
|
font-size: 2.1rem;
|
|
|
|
&:after {
|
|
margin-top: 5px;
|
|
margin-bottom: 1rem;
|
|
height: 4px;
|
|
width: 33px;
|
|
}
|
|
}
|
|
|
|
.md-search-result .md-typeset {
|
|
color: #fff;
|
|
}
|
|
|
|
.md-tabs {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.md-nav__container>.md-nav__link{
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
.md-tabs__item {
|
|
|
|
&:after {
|
|
opacity: 0;
|
|
transition: .3s all ease;
|
|
}
|
|
|
|
&:hover {
|
|
transition: .3s all ease;
|
|
|
|
&:after {
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
display: block;
|
|
height: 4px;
|
|
width: 22px;
|
|
margin-top: 6px;
|
|
margin-bottom: -0.2rem;
|
|
opacity: .7;
|
|
transition: .3s all ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.md-tabs__item--active {
|
|
|
|
|
|
&:after {
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
display: block;
|
|
height: 4px;
|
|
width: 22px;
|
|
margin-top: 6px;
|
|
margin-bottom: -0.2rem;
|
|
opacity: 1;
|
|
transition: .3s all ease;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.md-tabs__list {
|
|
height: 4rem;
|
|
}
|
|
|
|
.md-tabs__link {
|
|
opacity: 1;
|
|
font-size: 1.2rem;
|
|
|
|
}
|
|
|
|
.md-search__form {
|
|
input::placeholder {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
|
|
.md-search-result__meta {
|
|
background-color: #000;
|
|
}
|
|
|
|
.md-source-file {
|
|
display: none;
|
|
}
|
|
|
|
.md-grid {
|
|
max-width: 1080px;
|
|
}
|
|
|
|
.satag--padding-container {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
a.headerlink {
|
|
color: var(--md-primary-fg-color) !important;
|
|
}
|
|
|
|
.satag-trademark {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.md-header,
|
|
.md-tabs {
|
|
background-color: #000;
|
|
}
|
|
|
|
.md-tabs__item {
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.md-search__input {
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
|
|
.md-search-result__list {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.md-social__link {
|
|
display: inline-block;
|
|
height: 1rem;
|
|
text-align: center;
|
|
width: 1rem;
|
|
}
|
|
|
|
.md-search-result__meta {
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.satag--webinar-form-container {
|
|
#nextcloud-form {
|
|
width: 100%;
|
|
border: none;
|
|
min-height: 3500px;
|
|
transition: height .3s ease;
|
|
color-scheme: dark;
|
|
|
|
.ng-csp {
|
|
background-color: #000 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Footer Navigation für zusätzliche Links
|
|
.md-footer-meta .md-footer-meta__inner {
|
|
.md-footer-copyright {
|
|
width: auto;
|
|
margin: auto 1rem 0.5rem 0;
|
|
}
|
|
}
|
|
|
|
.md-content__inner {
|
|
margin: 0 0 1.2rem;
|
|
padding-top: .6rem;
|
|
}
|
|
|
|
.md-footer-meta.md-typeset a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.md-footer-meta {
|
|
background-color: #000;
|
|
}
|
|
|
|
|
|
// Füge zusätzliche Navigation im Footer hinzu
|
|
.md-footer-custom-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 0;
|
|
text-transform: uppercase;
|
|
|
|
a {
|
|
color: var(--md-footer-fg-color);
|
|
margin-right: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
|
|
&:hover {
|
|
color: var(--md-footer-fg-color--light);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Verbessere Lesbarkeit von Code auf dunklem Hintergrund
|
|
.md-typeset code {
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
color: #e2e2e2;
|
|
}
|
|
|
|
.md-nav__container > .md-nav__link:first-child {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.md-nav__title {
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
}
|
|
|
|
.md-search__form {
|
|
&:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
.md-footer__title {
|
|
|
|
font-size: 100%;
|
|
}
|
|
|
|
.md-footer__direction {
|
|
font-size: 100%;
|
|
opacity: .7;
|
|
}
|
|
|
|
.md-top {
|
|
border-radius: 0;
|
|
top: 4vh !important;
|
|
font-size: 100%;
|
|
padding: 0.8rem 1rem;
|
|
|
|
svg {
|
|
vertical-align: -.15rem;
|
|
}
|
|
}
|
|
|
|
// Buttons im CI-Design
|
|
.md-button {
|
|
|
|
border-radius: 0 !important;
|
|
color: #fff !important;
|
|
border-color: var(--md-primary-fg-color) !important;
|
|
border-width: .15rem !important;
|
|
|
|
padding: 1.7em 2.9em !important;
|
|
letter-spacing: 0.2rem !important;
|
|
font-weight: 400 !important;
|
|
|
|
@include transition;
|
|
|
|
&:hover {
|
|
border-color: #8a44bd !important;
|
|
transform: translateY(8px);
|
|
@include transition;
|
|
}
|
|
|
|
|
|
&.md-button--primary {
|
|
background-color: var(--md-primary-fg-color);
|
|
border-color: var(--md-primary-fg-color);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--md-primary-fg-color--light);
|
|
border-color: var(--md-primary-fg-color--light);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Karten-Styling für die Startseite
|
|
.grid.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 2rem 0;
|
|
|
|
> * {
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 1.5rem;
|
|
background-color: rgba(82, 19, 112, 0.05);
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-3px);
|
|
background-color: rgba(82, 19, 112, 0.1);
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0.5rem;
|
|
|
|
color: var(--md-primary-fg-color);
|
|
}
|
|
|
|
.icon-card {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
// Button-Styling
|
|
.md-button {
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
font-size: 1.1rem;
|
|
border: .15rem solid;
|
|
|
|
&.md-button--primary {
|
|
background-color: var(--md-primary-fg-color);
|
|
border-color: var(--md-primary-fg-color);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--md-primary-fg-color--light);
|
|
border-color: var(--md-primary-fg-color--light) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Header-Anpassungen
|
|
|
|
// Seitentitel ausblenden
|
|
.md-header__title {
|
|
.md-header__topic {
|
|
// Der erste Eintrag (Seitenname) wird ausgeblendet
|
|
&:first-child {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Logo vergrößern
|
|
.md-header__button.md-logo {
|
|
padding: 0.2rem;
|
|
padding-left: 0;
|
|
|
|
|
|
img, svg {
|
|
width: 325px; // Größeres Logo (Standardwert ist 40px)
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// Navigationsleiste anpassen
|
|
.md-header {
|
|
height: auto;
|
|
|
|
&__inner {
|
|
padding: 0.5rem;
|
|
max-width: 98%;
|
|
}
|
|
}
|