Weitere Optionen
(Hintergrund braun) |
KKeine Bearbeitungszusammenfassung |
||
(74 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
/* | /* Grundlegende Farbpalette */ | ||
:root { | |||
--primary-color: #3E3E3E; /* Dunkleres Grau für Hintergründe */ | |||
--secondary-color: #9E9E9E; /* Mittelgrau für Karten/Boxen */ | |||
--accent-color: #BA6700; /* Dunklere Rostfarbe für Akzente */ | |||
--text-color: #E0E0E0; /* Helles Grau für Text */ | |||
--link-color: #8AB4F8; /* Verblasstes Blau für Links */ | |||
--button-hover-color: #f5d6b0; /* Verblasstes Grün für Button-Hover */ | |||
} | |||
/* | /* Schriftarten und Typografie */ | ||
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); | |||
/* Buttons */ | /* Buttons */ | ||
. | .button { | ||
border: 1px solid var(--accent-color); | |||
background-image: var(--button-texture), linear-gradient(var(--secondary-color), var(--primary-color)); | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); | |||
} | } | ||
. | |||
/* Anwendung der Farben */ | |||
body { | |||
background-color: var(--primary-color); | |||
color: var(--text-color); | |||
background-image: url('https://de.maddraxikon.com//asphalt.png'); | |||
background-repeat: repeat; /* Hintergrundtextur wiederholen */ | |||
background-size: auto; /* Automatische Größe der Textur */ | |||
font-family: 'Abel', sans-serif; | |||
} | } | ||
/* Stile für Links */ | |||
a { | |||
color: var(--secondary-color) | |||
transition: color 0.3s ease; /* Sanfter Farbübergang bei Hover */ | |||
} | |||
a:hover { | |||
color: var(--button-hover-color) | |||
} | |||
.button:hover { | |||
background-color: var(--accent-color); | |||
} | |||
/* Hintergründe für Abschnittstitel */ | |||
#content, | |||
#mw-head, | |||
#mw-panel, | |||
.mw-page-container, | |||
.vector-body, | |||
.section-title { | |||
background-color: var(--secondary-color); | |||
} | |||
/* Hauptmenü-Stil */ | |||
#mw-panel .vector-menu-content-list li { | |||
margin-bottom: 5px; /* Abstand zwischen den Menüpunkten */ | |||
} | |||
#mw-panel .vector-menu-content-list li a { | |||
display: block; | |||
padding: 8px 10px; /* Innenabstand */ | |||
background-color: #333; /* Dunkler Hintergrund für die Buttons */ | |||
color: white; /* Helle Textfarbe */ | |||
text-decoration: none; /* Keine Unterstreichung */ | |||
border-radius: 4px; /* Abgerundete Ecken */ | |||
transition: background-color 0.3s; /* Animation für Hover-Effekt */ | |||
} | |||
#mw-panel .vector-menu-content-list li a:hover { | |||
background-color: #555; /* Hintergrundfarbe beim Überfahren mit der Maus */ | |||
} | |||
/* Stil für die Hauptmenü-Überschriften */ | |||
#mw-panel .vector-menu-portal .vector-menu-heading { | |||
background-color: #444; /* Dunkler Hintergrund */ | |||
color: #c0c0c0; /* Leicht helle Textfarbe */ | |||
padding: 8px 12px; /* Erhöhter Innenabstand */ | |||
font-family: 'Courier New', Courier, monospace; /* Monospaced-Schriftart */ | |||
font-size: 1.1em; /* Vergrößerte Schrift */ | |||
border-bottom: 1px solid #333; /* Untere Grenze für die Trennung */ | |||
text-transform: uppercase; /* Großbuchstaben */ | |||
letter-spacing: 1px; /* Buchstabenabstand */ | |||
text-shadow: 2px 2px 2px #000; /* Textschatten für einen Kontureffekt */ | |||
} | |||
/* Link "Umschalten zum bisherigen Aussehen" im Hauptmenü versteckt */ | |||
.mw-sidebar-action-content { | |||
display: none; | |||
} | |||
/* Hintergrundbild für das Hauptmenü */ | |||
#mw-panel { | |||
background-image: url('https://de.maddraxikon.com//beton.png'); | |||
background-size: cover; /* Stellt sicher, dass das Bild den gesamten Bereich abdeckt */ | |||
background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */ | |||
} | |||
/* | /* Boxen für die Hauptseite */ | ||
. | .Hauptseite-Box { | ||
color:# | background-color: #333; /* Dunkler Hintergrund */ | ||
color: #E0E0E0; /* Helle Textfarbe */ | |||
border: 1px solid #BA6700; /* Rostfarbener Rahmen */ | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefeffekt */ | |||
padding: 20px; /* Innenabstand */ | |||
font-family: 'Special Elite', cursive; /* Passende Schriftart */ | |||
font-size: 1.2em; /* Vergrößerte Schrift */ | |||
text-align: center; /* Zentrierte Ausrichtung */ | |||
} | |||
.Hauptseite-Box h2 { | |||
color: #BA6700; /* Rostfarbener Titel */ | |||
font-size: 1.5em; /* Vergrößerte Titelschrift */ | |||
margin-bottom: 10px; /* Abstand zum Inhalt */ | |||
} | |||
. | .Hauptseite-Box p { | ||
margin-bottom: 10px; /* Abstand zwischen Absätzen */ | |||
} | } | ||
.Hauptseite-Box a { | |||
text-decoration: none; /* Keine Unterstreichung */ | |||
} | |||
.Hauptseite-Box a:hover { | |||
color: #4CAF50; /* Verblasstes Grün beim Überfahren mit der Maus */ | |||
} | |||
.Hauptseite-Inhalt { | |||
font-family: 'Abel', sans-serif; | |||
} | |||
/* Toolbar für Artikelbearbeitung */ | |||
.vector-menu-tabs { | |||
font-family: 'Bree Serif', serif; | |||
text-transform: uppercase; | |||
letter-spacing: 2px; | |||
} | |||
/* Inaktive Tabs */ | |||
.vector-menu-tabs .vector-menu-content-list a { | |||
color: #fff; | |||
text-shadow: 1px 1px 2px #000; | |||
} | |||
/* Aktiver Tab */ | |||
.vector-menu-tabs .selected a { | |||
color: #fff; | |||
text-shadow: 1px 1px 1px #000; | |||
} | |||
/* | /* Hover/Focus */ | ||
.vector-menu-tabs .vector-menu-content-list a:hover, | |||
.vector-menu-tabs .vector-menu-content-list a:focus { | |||
text-shadow: none; | |||
color: #ccc; | |||
} | |||
/* | /* Kategorienmodul anpassen */ | ||
.catlinks { | |||
margin: 10px 0; | |||
padding: 10px; | |||
background: #333; | |||
border: 1px solid #666; | |||
} | |||
/* | /* Titel */ | ||
.catlinks .mw-normal-catlinks { | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
letter-spacing: 1px; | |||
} | |||
/* | /* Liste */ | ||
.catlinks ul { | |||
list-style: none; | |||
margin: 0; | |||
} | padding: 0; | ||
} | |||
.catlinks li { | |||
display: inline-block; | |||
margin-right: 5px; | |||
} | |||
/* | /* Links */ | ||
.catlinks a { | |||
color: #fff; | |||
text-decoration: none; | |||
padding: 3px 5px; | |||
border: 1px solid #666; | |||
transition: background .3s; | |||
} | |||
.catlinks a:hover { | |||
background: #555; | |||
} | |||
/* Anpassung der Infoboxen */ | |||
/* Infobox */ | |||
.infobox { | |||
float:right; | |||
background-color: #555; | |||
color: #ccc; | |||
border: 1px solid #333; | |||
box-shadow: 0 0 10px rgba(0,0,0,0.5); | |||
font-size: 0.7em; | |||
} | |||
.infobox-header { | |||
. | background-color: #444; | ||
color: #fff; | |||
padding: 10px; | |||
font-size: 1.2em; | |||
text-transform: uppercase; | |||
letter-spacing: 2px; | |||
} | } | ||
. | .infobox-data { | ||
padding: 10px; | |||
} | } | ||
. | .infobox-row { | ||
padding: 5px 0; | |||
} | } | ||
.infobox-cell { | |||
padding: 3px 10px; | |||
} | |||
.infobox-below { | |||
. | border-top: 1px solid #666; | ||
padding: 10px; | |||
} | } | ||
. | .infobox-button { | ||
background-color: var(--primary-color); | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); | |||
text-align: center; | |||
font-size: 1.2em; | |||
} | } | ||
. | .infobox-button:hover { | ||
background-color: var(--secondary-color); | |||
} | } | ||
. | /* Hauptseite-Button Anpassung */ | ||
/* Zentrieren der Buttons */ | |||
.Hauptseite-Button { | |||
text-align: center; /* Zentriert den Inhalt */ | |||
} | } | ||
. | .button-container { | ||
display: flex; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
} | } | ||
. | .Hauptseite-Button a { | ||
display: inline-block; /* Damit die Links wie Buttons behandelt werden */ | |||
background-color: var(--secondary-color); /* Mittelgrau für den Button-Hintergrund */ | |||
color: var(--text-color); /* Helles Grau für den Text */ | |||
padding: 10px 20px; /* Innenabstand */ | |||
margin: 5px; /* Außenabstand zwischen den Buttons */ | |||
text-decoration: none; /* Entfernt die Unterstreichung */ | |||
font-family: 'Special Elite', cursive; /* Schriftart */ | |||
font-size: 1.1em; /* Schriftgröße */ | |||
border: 2px solid var(--accent-color); /* Rostfarbener Rahmen */ | |||
border-radius: 5px; /* Abgerundete Ecken für den Button */ | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ | |||
transition: background-color 0.3s, color 0.3s; /* Animation beim Überfahren */ | |||
} | } | ||
. | .Hauptseite-Button a:hover { | ||
background-color: var(--accent-color); /* Dunklere Rostfarbe für Hover */ | |||
color: var(--primary-color); /* Dunkleres Grau für Hover-Text */ | |||
border-color: var(--text-color); /* Helles Grau für den Rahmen beim Hover */ | |||
} | } | ||
. | /* Anpassung der Schriftfarbe für Seiteninhalte */ | ||
#content, .mw-body-content { | |||
color: #F0F0F0; /* Neue helle Schriftfarbe für den Seiteninhalt */ | |||
} | } | ||
. | /* Links innerhalb des Seiteninhalts */ | ||
#content a, .mw-body-content a { | |||
color: #945200; /* Dunkles Rostrot */ | |||
} | } | ||
#content a:hover, .mw-body-content a:hover { | |||
. | color: #f5d6b0; /* Anpassen der Hover-Farbe für Links */ | ||
} | } | ||
. | /* Links zur Neuerstellung von Artikeln */ | ||
.new a { | |||
color: #556b2f; | |||
} | } | ||
/*** | /* Logo ersetzen */ | ||
.mw-logo { | |||
. | display: inline-block; /* oder 'block'? */ | ||
width: 135px; /* Anpassen an die Breite des Logos */ | |||
height: 135px; /* Anpassen an die Höhe des Logos */ | |||
background-image: url('https://de.maddraxikon.com/images/LogoNeu.png'); /* URL des Logos */ | |||
background-size: contain; /* oder 'cover', je nach Bedarf */ | |||
background-repeat: no-repeat; | |||
background-position: center; /* Zentriert das Bild */ | |||
font-size: 0; /* Text unsichtbar */ | |||
overflow: hidden; /* Verhindert, dass Inhalte überlaufen */ | |||
} | } | ||
. | |||
/* Anpassung der Roman-Infobox */ | |||
.heftartikel-tabelle { | |||
width: 100%; /* Stellt sicher, dass die Tabelle die volle Breite nutzt */ | |||
border-collapse: collapse; /* Entfernt doppelte Ränder */ | |||
margin-bottom: 20px; /* Abstand nach unten für Außenabstand */ | |||
background-color: var(--secondary-color); /* Hintergrundfarbe der Infobox */ | |||
color: var(--text-color); /* Textfarbe */ | |||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ | |||
text-transform: none; | |||
font-size: 14px; | |||
} | } | ||
/* | .heftartikel-tabelle th, .heftartikel-tabelle td { | ||
padding: 10px; /* Innenabstand */ | |||
border: 1px solid var(--accent-color); /* Rostfarbener Rahmen */ | |||
} | } | ||
. | |||
.heftartikel-tabelle th { | |||
background-color: var(--primary-color); /* Dunkleres Grau für Überschriften */ | |||
color: var(--text-color); /* Helle Textfarbe für Überschriften */ | |||
text-align: left; /* Ausrichtung des Textes */ | |||
font-family: 'Special Elite', cursive; /* Schriftart für Überschriften */ | |||
} | } | ||
. | .heftartikel-tabelle td { | ||
background-color: var(--secondary-color); /* Mittelgrau für Zellen */ | |||
color: var(--text-color); /* Textfarbe */ | |||
vertical-align: top; /* Ausrichtung des Inhalts in der Zelle */ | |||
} | } | ||
. | /* Anpassung für das Bild im Infobox */ | ||
.heftartikel-tabelle img { | |||
max-width: 100%; /* Stellt sicher, dass das Bild responsive ist */ | |||
height: auto; /* Erhält das Seitenverhältnis des Bildes */ | |||
border: 2px solid var(--accent-color); /* Rahmen um das Bild */ | |||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Schatten für das Bild */ | |||
} | } | ||
. | /* Anpassung für Links innerhalb der Infobox */ | ||
.heftartikel-tabelle a { | |||
color: var(--link-color); /* Farbe für Links */ | |||
text-decoration: none; /* Keine Unterstreichung */ | |||
} | |||
.heftartikel-tabelle a:hover { | |||
color: var(--button-hover-color); /* Farbe beim Überfahren */ | |||
text-decoration: underline; /* Unterstreichung beim Überfahren */ | |||
} | |||
/* Grafiken sollen Platz besser nutzen */ | |||
.thumb { | |||
border: 1px solid #ccc; | |||
padding: 3px !important; | |||
background-color: #f9f9f9 !important; | |||
text-align: center; | |||
overflow: hidden; | |||
} | } | ||
.thumbcaption { | |||
. | color: #252525 !important; | ||
} | } | ||
Version vom 13. April 2024, 21:12 Uhr
/* Grundlegende Farbpalette */ :root { --primary-color: #3E3E3E; /* Dunkleres Grau für Hintergründe */ --secondary-color: #9E9E9E; /* Mittelgrau für Karten/Boxen */ --accent-color: #BA6700; /* Dunklere Rostfarbe für Akzente */ --text-color: #E0E0E0; /* Helles Grau für Text */ --link-color: #8AB4F8; /* Verblasstes Blau für Links */ --button-hover-color: #f5d6b0; /* Verblasstes Grün für Button-Hover */ } /* Schriftarten und Typografie */ @import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); /* Buttons */ .button { border: 1px solid var(--accent-color); background-image: var(--button-texture), linear-gradient(var(--secondary-color), var(--primary-color)); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } /* Anwendung der Farben */ body { background-color: var(--primary-color); color: var(--text-color); background-image: url('https://de.maddraxikon.com//asphalt.png'); background-repeat: repeat; /* Hintergrundtextur wiederholen */ background-size: auto; /* Automatische Größe der Textur */ font-family: 'Abel', sans-serif; } /* Stile für Links */ a { color: var(--secondary-color) transition: color 0.3s ease; /* Sanfter Farbübergang bei Hover */ } a:hover { color: var(--button-hover-color) } .button:hover { background-color: var(--accent-color); } /* Hintergründe für Abschnittstitel */ #content, #mw-head, #mw-panel, .mw-page-container, .vector-body, .section-title { background-color: var(--secondary-color); } /* Hauptmenü-Stil */ #mw-panel .vector-menu-content-list li { margin-bottom: 5px; /* Abstand zwischen den Menüpunkten */ } #mw-panel .vector-menu-content-list li a { display: block; padding: 8px 10px; /* Innenabstand */ background-color: #333; /* Dunkler Hintergrund für die Buttons */ color: white; /* Helle Textfarbe */ text-decoration: none; /* Keine Unterstreichung */ border-radius: 4px; /* Abgerundete Ecken */ transition: background-color 0.3s; /* Animation für Hover-Effekt */ } #mw-panel .vector-menu-content-list li a:hover { background-color: #555; /* Hintergrundfarbe beim Überfahren mit der Maus */ } /* Stil für die Hauptmenü-Überschriften */ #mw-panel .vector-menu-portal .vector-menu-heading { background-color: #444; /* Dunkler Hintergrund */ color: #c0c0c0; /* Leicht helle Textfarbe */ padding: 8px 12px; /* Erhöhter Innenabstand */ font-family: 'Courier New', Courier, monospace; /* Monospaced-Schriftart */ font-size: 1.1em; /* Vergrößerte Schrift */ border-bottom: 1px solid #333; /* Untere Grenze für die Trennung */ text-transform: uppercase; /* Großbuchstaben */ letter-spacing: 1px; /* Buchstabenabstand */ text-shadow: 2px 2px 2px #000; /* Textschatten für einen Kontureffekt */ } /* Link "Umschalten zum bisherigen Aussehen" im Hauptmenü versteckt */ .mw-sidebar-action-content { display: none; } /* Hintergrundbild für das Hauptmenü */ #mw-panel { background-image: url('https://de.maddraxikon.com//beton.png'); background-size: cover; /* Stellt sicher, dass das Bild den gesamten Bereich abdeckt */ background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */ } /* Boxen für die Hauptseite */ .Hauptseite-Box { background-color: #333; /* Dunkler Hintergrund */ color: #E0E0E0; /* Helle Textfarbe */ border: 1px solid #BA6700; /* Rostfarbener Rahmen */ box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefeffekt */ padding: 20px; /* Innenabstand */ font-family: 'Special Elite', cursive; /* Passende Schriftart */ font-size: 1.2em; /* Vergrößerte Schrift */ text-align: center; /* Zentrierte Ausrichtung */ } .Hauptseite-Box h2 { color: #BA6700; /* Rostfarbener Titel */ font-size: 1.5em; /* Vergrößerte Titelschrift */ margin-bottom: 10px; /* Abstand zum Inhalt */ } .Hauptseite-Box p { margin-bottom: 10px; /* Abstand zwischen Absätzen */ } .Hauptseite-Box a { text-decoration: none; /* Keine Unterstreichung */ } .Hauptseite-Box a:hover { color: #4CAF50; /* Verblasstes Grün beim Überfahren mit der Maus */ } .Hauptseite-Inhalt { font-family: 'Abel', sans-serif; } /* Toolbar für Artikelbearbeitung */ .vector-menu-tabs { font-family: 'Bree Serif', serif; text-transform: uppercase; letter-spacing: 2px; } /* Inaktive Tabs */ .vector-menu-tabs .vector-menu-content-list a { color: #fff; text-shadow: 1px 1px 2px #000; } /* Aktiver Tab */ .vector-menu-tabs .selected a { color: #fff; text-shadow: 1px 1px 1px #000; } /* Hover/Focus */ .vector-menu-tabs .vector-menu-content-list a:hover, .vector-menu-tabs .vector-menu-content-list a:focus { text-shadow: none; color: #ccc; } /* Kategorienmodul anpassen */ .catlinks { margin: 10px 0; padding: 10px; background: #333; border: 1px solid #666; } /* Titel */ .catlinks .mw-normal-catlinks { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } /* Liste */ .catlinks ul { list-style: none; margin: 0; padding: 0; } .catlinks li { display: inline-block; margin-right: 5px; } /* Links */ .catlinks a { color: #fff; text-decoration: none; padding: 3px 5px; border: 1px solid #666; transition: background .3s; } .catlinks a:hover { background: #555; } /* Anpassung der Infoboxen */ /* Infobox */ .infobox { float:right; background-color: #555; color: #ccc; border: 1px solid #333; box-shadow: 0 0 10px rgba(0,0,0,0.5); font-size: 0.7em; } .infobox-header { background-color: #444; color: #fff; padding: 10px; font-size: 1.2em; text-transform: uppercase; letter-spacing: 2px; } .infobox-data { padding: 10px; } .infobox-row { padding: 5px 0; } .infobox-cell { padding: 3px 10px; } .infobox-below { border-top: 1px solid #666; padding: 10px; } .infobox-button { background-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); text-align: center; font-size: 1.2em; } .infobox-button:hover { background-color: var(--secondary-color); } /* Hauptseite-Button Anpassung */ /* Zentrieren der Buttons */ .Hauptseite-Button { text-align: center; /* Zentriert den Inhalt */ } .button-container { display: flex; justify-content: center; flex-wrap: wrap; } .Hauptseite-Button a { display: inline-block; /* Damit die Links wie Buttons behandelt werden */ background-color: var(--secondary-color); /* Mittelgrau für den Button-Hintergrund */ color: var(--text-color); /* Helles Grau für den Text */ padding: 10px 20px; /* Innenabstand */ margin: 5px; /* Außenabstand zwischen den Buttons */ text-decoration: none; /* Entfernt die Unterstreichung */ font-family: 'Special Elite', cursive; /* Schriftart */ font-size: 1.1em; /* Schriftgröße */ border: 2px solid var(--accent-color); /* Rostfarbener Rahmen */ border-radius: 5px; /* Abgerundete Ecken für den Button */ box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ transition: background-color 0.3s, color 0.3s; /* Animation beim Überfahren */ } .Hauptseite-Button a:hover { background-color: var(--accent-color); /* Dunklere Rostfarbe für Hover */ color: var(--primary-color); /* Dunkleres Grau für Hover-Text */ border-color: var(--text-color); /* Helles Grau für den Rahmen beim Hover */ } /* Anpassung der Schriftfarbe für Seiteninhalte */ #content, .mw-body-content { color: #F0F0F0; /* Neue helle Schriftfarbe für den Seiteninhalt */ } /* Links innerhalb des Seiteninhalts */ #content a, .mw-body-content a { color: #945200; /* Dunkles Rostrot */ } #content a:hover, .mw-body-content a:hover { color: #f5d6b0; /* Anpassen der Hover-Farbe für Links */ } /* Links zur Neuerstellung von Artikeln */ .new a { color: #556b2f; } /* Logo ersetzen */ .mw-logo { display: inline-block; /* oder 'block'? */ width: 135px; /* Anpassen an die Breite des Logos */ height: 135px; /* Anpassen an die Höhe des Logos */ background-image: url('https://de.maddraxikon.com/images/LogoNeu.png'); /* URL des Logos */ background-size: contain; /* oder 'cover', je nach Bedarf */ background-repeat: no-repeat; background-position: center; /* Zentriert das Bild */ font-size: 0; /* Text unsichtbar */ overflow: hidden; /* Verhindert, dass Inhalte überlaufen */ } /* Anpassung der Roman-Infobox */ .heftartikel-tabelle { width: 100%; /* Stellt sicher, dass die Tabelle die volle Breite nutzt */ border-collapse: collapse; /* Entfernt doppelte Ränder */ margin-bottom: 20px; /* Abstand nach unten für Außenabstand */ background-color: var(--secondary-color); /* Hintergrundfarbe der Infobox */ color: var(--text-color); /* Textfarbe */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ text-transform: none; font-size: 14px; } .heftartikel-tabelle th, .heftartikel-tabelle td { padding: 10px; /* Innenabstand */ border: 1px solid var(--accent-color); /* Rostfarbener Rahmen */ } .heftartikel-tabelle th { background-color: var(--primary-color); /* Dunkleres Grau für Überschriften */ color: var(--text-color); /* Helle Textfarbe für Überschriften */ text-align: left; /* Ausrichtung des Textes */ font-family: 'Special Elite', cursive; /* Schriftart für Überschriften */ } .heftartikel-tabelle td { background-color: var(--secondary-color); /* Mittelgrau für Zellen */ color: var(--text-color); /* Textfarbe */ vertical-align: top; /* Ausrichtung des Inhalts in der Zelle */ } /* Anpassung für das Bild im Infobox */ .heftartikel-tabelle img { max-width: 100%; /* Stellt sicher, dass das Bild responsive ist */ height: auto; /* Erhält das Seitenverhältnis des Bildes */ border: 2px solid var(--accent-color); /* Rahmen um das Bild */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Schatten für das Bild */ } /* Anpassung für Links innerhalb der Infobox */ .heftartikel-tabelle a { color: var(--link-color); /* Farbe für Links */ text-decoration: none; /* Keine Unterstreichung */ } .heftartikel-tabelle a:hover { color: var(--button-hover-color); /* Farbe beim Überfahren */ text-decoration: underline; /* Unterstreichung beim Überfahren */ } /* Grafiken sollen Platz besser nutzen */ .thumb { border: 1px solid #ccc; padding: 3px !important; background-color: #f9f9f9 !important; text-align: center; overflow: hidden; } .thumbcaption { color: #252525 !important; }