K (Schatten vom Startseitentext (Déjà-vu?)) |
(Versuch #2) |
||
Zeile 13: | Zeile 13: | ||
border-radius: 4px; |
border-radius: 4px; |
||
margin: 0; |
margin: 0; |
||
− | box-shadow: 0 4px 10px 0 rgba(var(--theme-page-dynamic-color-1 |
+ | box-shadow: 0 4px 10px 0 rgba(var(--theme-page-dynamic-color-1--rgb), 0.2); |
background-image: linear-gradient(-90deg,var(--theme-accent-color),var(--theme-accent-color--hover)); |
background-image: linear-gradient(-90deg,var(--theme-accent-color),var(--theme-accent-color--hover)); |
||
} |
} |
||
div.startseite { |
div.startseite { |
||
− | text-shadow: 2px 0px 5px var(--theme-page-dynamic-color- |
+ | text-shadow: 2px 0px 5px var(--theme-page-dynamic-color-1--inverted); |
color: var(--theme-body-dynamic-color-2) !important; |
color: var(--theme-body-dynamic-color-2) !important; |
||
} |
} |
Version vom 13. Januar 2022, 20:00 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/****************************************/
/* Globale Schriftarten (überschreibt Theme-Einstellungen) */
/*:root {
--theme-page-headings-font: "Times New Roman";
}*/
/****************************************/
/* Formatierung der Startseiten-Panels. Dies wird künftig auf Theme-Farben umgestellt. */
.startseite-container {
width: 100%;
border-radius: 4px;
margin: 0;
box-shadow: 0 4px 10px 0 rgba(var(--theme-page-dynamic-color-1--rgb), 0.2);
background-image: linear-gradient(-90deg,var(--theme-accent-color),var(--theme-accent-color--hover));
}
div.startseite {
text-shadow: 2px 0px 5px var(--theme-page-dynamic-color-1--inverted);
color: var(--theme-body-dynamic-color-2) !important;
}
/* Überschrift eines Startseiten-Panels. */
.startseite:nth-child(1) {
font-size: 1.7rem;
line-height: 100%;
padding: 1rem 1.5rem 0.5rem 1.5rem;
}
.startseite:nth-child(2) {
font-size: 1.2rem;
line-height: 140%;
padding: 0rem 1.5rem 1.5rem 1.5rem;
}
div.startseite * {
background: none !important;
}
div.startseite a {
color: var(--theme-body-dynamic-color-2) !important;
}
/****************************************/
/* Alle Arten von Hinweisbannern. */
.banner {
background-color: var(--theme-page-accent-mix-color);
font-size: 110%;
text-shadow: 0 0 12px var(--theme-accent-dynamic-color-2);
}
/* Alle Arten von Hinweisbannern, die nicht als Tabellen gebildet werden. */
div.banner {
margin: 0 1em 1em 1em;
padding: 0 10px;
border: 4px double var(--theme-border-color);
border-radius: 5% 5% 5% 5% / 50% 50% 50% 50%;
text-align: center;
}
div.banner>*:nth-child(1) {
margin-top: 1em;
}
/* Diverse Formatierungen für Kinder in .banner */
.banner strong, .banner b {
color: var(--theme-accent-color);
}
/* Warnungsbanner. */
.banner-warning {
color: var(--theme-warning-color);
background-color: var(--theme-page-background-color--secondary);
}
/* Starker Warnungsbanner, z.B. für Spoiler. */
.banner-alert {
color: var(--theme-alert-color);
background-color: var(--theme-alert-label);
text-shadow: var(--theme-alert-label);
}
/****************************************/
/* Navigationsboxen. */
.navbox {
font-size: 130%;
text-decoration: none;
border: 1px solid var(--theme-border-color);
background: var(--theme-sticky-nav-background-color);
color: var(--theme-sticky-nav-text-color);
width: 100%;
text-align: center;
}
.navbox a {
color: var(--theme-page-accent-color);
}
.navbox th, .navbox td {
padding-left: 0.5em;
padding-right: 0.5em;
}
.navbox th {
color: var(--theme-sticky-nav-text-color);
font-size: 115%;
}
/* Große Überschriften für den Beginn von Navboxen. */
.navbox th.navbox-header {
font-size: 140%;
text-align: center;
}
/* Linke Spalte der Navboxen dient zur Beschreibung. */
.navbox th:not(.navbox-header):nth-child(1) {
width: min-content;
text-align: left;
}
/****************************************/
/* Akzentuierte Artikeltabellen. */
table.accent {
border: 3px groove var(--theme-border-color);
min-width:50em;
}
.accent, .accent caption, .accent thead, .accent *:not(a) {
background-color: var(--theme-accent-color) !important;
color: var(--theme-accent-label-color);
}
.accent a {
color: var(--theme-accent-dynamic-color-1);
}
.accent a:hover {
color: var(--theme-accent-dynamic-color-2);
}