Add modular SCSS structure and lightbox functionality
Introduce a modular SCSS structure to improve maintainability and organization of stylesheets. Add lightbox functionality for homepage screenshots, including responsive JavaScript behavior and custom styling for enhanced user experience. Update tasks documentation with improvement initiatives for the project.
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
// Base HTML and root settings
|
||||
|
||||
html {
|
||||
font-size: 100% !important;
|
||||
}
|
||||
|
||||
// Schriftart auf "Assistant" setzen
|
||||
:root {
|
||||
--md-text-font: "Assistant";
|
||||
--md-code-font: "Assistant";
|
||||
}
|
||||
|
||||
// Transition mixin for reuse
|
||||
@mixin transition {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
// General layout settings
|
||||
.md-grid {
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
||||
.satag--padding-container {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.satag-trademark {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// Button styling
|
||||
|
||||
// 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;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.5s ease, border-color 0.5s ease, background-color 0.5s ease !important;
|
||||
font-size: 1.1rem;
|
||||
border: .15rem solid;
|
||||
|
||||
&:hover {
|
||||
border-color: #8a44bd !important;
|
||||
transform: translateY(8px) !important;
|
||||
}
|
||||
|
||||
&.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;
|
||||
transform: translateY(8px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// Code styling
|
||||
|
||||
// Verbessere Lesbarkeit von Code auf dunklem Hintergrund
|
||||
.md-typeset code {
|
||||
background-color: rgba(255, 255, 255, 0.07);
|
||||
color: #e2e2e2;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* Cookie Consent Styling
|
||||
* Position the cookie consent container at the top of the website, 20px from the top edge
|
||||
*/
|
||||
|
||||
.satag--cookie-consent-container {
|
||||
position: fixed !important;
|
||||
top: 20px !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
z-index: 9999 !important; /* Ensure it appears above other content */
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Direct targeting of Usercentrics elements
|
||||
* These selectors target various elements that Usercentrics might create
|
||||
*/
|
||||
#usercentrics-root,
|
||||
[class*="usercentrics"],
|
||||
[id*="usercentrics"],
|
||||
.uc-banner-content,
|
||||
.uc-container,
|
||||
#uc-center-container,
|
||||
[class*="banner"],
|
||||
[class*="consent"],
|
||||
[class*="cookie"] {
|
||||
top: 20px !important;
|
||||
bottom: auto !important;
|
||||
position: fixed !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* Specific targeting for the center container */
|
||||
#uc-center-container {
|
||||
position: absolute !important;
|
||||
top: 40px !important;
|
||||
margin: 0 auto !important;
|
||||
text-align: left !important;
|
||||
left: 35% !important;
|
||||
}
|
||||
|
||||
[id*="center-container"]:not(#uc-center-container),
|
||||
[class*="center-container"] {
|
||||
top: 0 !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Special styling for landscape mode on smaller height screens
|
||||
* This targets the Usercentrics container element
|
||||
*/
|
||||
@media (max-height: 768px) and (orientation: landscape) {
|
||||
.gtPQAC,
|
||||
[class*="usercentrics"],
|
||||
[id*="usercentrics"],
|
||||
.uc-banner-content,
|
||||
.uc-container,
|
||||
#uc-center-container {
|
||||
border-bottom: 0 !important;
|
||||
max-height: 100vh !important;
|
||||
max-width: 625px !important;
|
||||
top: 0 !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional styling to ensure the cookie consent is at the top */
|
||||
body iframe[id^="usercentrics-"],
|
||||
body [class*="usercentrics"],
|
||||
body [id*="usercentrics"] {
|
||||
top: 20px !important;
|
||||
bottom: auto !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
/* 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+ */
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// Header logo and title styling
|
||||
|
||||
// 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%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// Lightbox styling for the homepage screenshot
|
||||
|
||||
// Lightbox container - positioned directly over the original image
|
||||
.satag-lightbox {
|
||||
display: none;
|
||||
position: fixed !important;
|
||||
z-index: 9999; // Use a very high z-index to ensure it's above everything
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
background-color: transparent;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Close button - positioned in the top-right corner
|
||||
.satag-lightbox-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--md-primary-fg-color--light);
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// Lightbox image
|
||||
.satag-lightbox-img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border: 2px solid var(--md-primary-fg-color--light);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.4s ease;
|
||||
display: block; // Ensure proper display
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Transform scale is now handled by JavaScript for better responsive control
|
||||
// &.active .satag-lightbox-img {
|
||||
// transform: scale(1.3);
|
||||
// }
|
||||
|
||||
// Responsive styles for medium screens (max-width: 1219px)
|
||||
@media (max-width: 1219px) {
|
||||
.satag-lightbox-close {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 22px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.satag-lightbox-img {
|
||||
border-width: 1px; // Thinner border
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive styles for tablets and smaller devices (max-width: 959px)
|
||||
@media (max-width: 959px) {
|
||||
.satag-lightbox-close {
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
font-size: 20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.satag-lightbox-img {
|
||||
border-width: 1px; // Thinner border
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25); // Lighter shadow
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive styles for mobile phones (max-width: 479px)
|
||||
@media (max-width: 479px) {
|
||||
.satag-lightbox-close {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 18px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.satag-lightbox-img {
|
||||
border-width: 1px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); // Lighter shadow
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make the screenshot container image clickable only on screens > 768px
|
||||
.screenshot-container {
|
||||
img {
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
// Cursor styling is handled by JavaScript for better control
|
||||
// Default cursor is used for screens <= 768px
|
||||
// Pointer cursor is used for screens > 768px
|
||||
|
||||
// Hover effect only for screens > 768px
|
||||
@media (min-width: 769px) {
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We want the lightbox to scroll with the page, so we don't need to prevent scrolling
|
||||
// body.lightbox-active {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
@@ -0,0 +1,110 @@
|
||||
// Navigation and tabs styling
|
||||
|
||||
// Tabs styling
|
||||
.md-tabs {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.md-tabs__item {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 22px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: -0.2rem;
|
||||
opacity: 0;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: .3s all ease;
|
||||
|
||||
&:after {
|
||||
opacity: .7;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-tabs__item--active {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tabs__list {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.md-tabs__link {
|
||||
opacity: 1;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
// Navigation styling
|
||||
.md-nav__container > .md-nav__link:first-child {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.md-nav__title {
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-nav__container>.md-nav__link {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
// Footer navigation
|
||||
.md-footer__title {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.md-footer__direction {
|
||||
font-size: 100%;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
// 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-footer-meta.md-typeset a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content inner margin
|
||||
.md-content__inner {
|
||||
margin: 0 0 1.2rem;
|
||||
padding-top: .6rem;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Scrollbar styling
|
||||
|
||||
// Selection color
|
||||
::-moz-selection {
|
||||
background: var(--md-primary-fg-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--md-primary-fg-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Scrollbar width
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #d0d0d0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--md-primary-fg-color);
|
||||
}
|
||||
|
||||
// Scrollwrap for search
|
||||
.md-search__scrollwrap {
|
||||
tabindex: 0; /* Macht das Element fokussierbar */
|
||||
}
|
||||
|
||||
// Back to top button
|
||||
.md-top {
|
||||
border-radius: 0;
|
||||
top: 4vh !important;
|
||||
font-size: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
|
||||
svg {
|
||||
vertical-align: -.15rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// Search functionality styling
|
||||
|
||||
// Search form
|
||||
.md-search__form {
|
||||
input::placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Search input
|
||||
.md-search__input {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Search results meta
|
||||
.md-search-result__meta {
|
||||
background-color: #000;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Hide search suggestions when search is active
|
||||
[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Social links
|
||||
.md-social__link {
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
text-align: center;
|
||||
width: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
// 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
|
||||
}
|
||||
|
||||
// Header and tabs background
|
||||
.md-header,
|
||||
.md-tabs {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
// Footer background
|
||||
.md-footer-meta {
|
||||
background-color: #000;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
// Typography styling
|
||||
|
||||
body {
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
|
||||
.md-typeset,
|
||||
.md-nav {
|
||||
font-size: 1.3rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Underline for headings
|
||||
h1, h2, h3 {
|
||||
&:after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 85px;
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: -0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// H1 styling
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// H2 styling
|
||||
.md-typeset h2,
|
||||
h2 {
|
||||
line-height: 3rem;
|
||||
font-size: 2.7rem;
|
||||
|
||||
&:after {
|
||||
margin-top: .6rem;
|
||||
height: 7px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// H3 styling
|
||||
.md-typeset h3,
|
||||
h3 {
|
||||
font-size: 2.1rem;
|
||||
|
||||
&:after {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 1rem;
|
||||
height: 4px;
|
||||
width: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
// List styling
|
||||
.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-bottom: 0;
|
||||
}
|
||||
|
||||
// Link styling
|
||||
a.headerlink {
|
||||
color: var(--md-primary-fg-color) !important;
|
||||
}
|
||||
|
||||
// Tooltip styling for MkDocs Material
|
||||
.md-tooltip {
|
||||
// Increase the z-index to ensure tooltips appear above other elements
|
||||
z-index: 10;
|
||||
|
||||
// Style the tooltip content
|
||||
.md-tooltip__inner {
|
||||
font-size: .9rem !important;
|
||||
padding: 0.5rem !important;
|
||||
background-color: rgba(0, 0, 0, 0.8) !important;
|
||||
border-radius: 4px !important;
|
||||
color: white !important;
|
||||
max-width: 300px !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide source file info
|
||||
.md-source-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Code styling in search results
|
||||
.md-search-result .md-typeset {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Remove underline in search results
|
||||
.md-search-result__list {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// Webinar form styling
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user