MediaWiki:Widget Dialog.css und MediaWiki:Common.css: Unterschied zwischen den Seiten
Aus ZUM-Unterrichten
(Unterschied zwischen Seiten)
(Die Seite wurde neu angelegt: „ →* Styles for the Widget:Dialog-* widgets. *: dialog.zum-dialog.popup { all:revert; →we want the popup class to get the MW styling in cascaded childs, but the dialog itself should be native: border:0; padding:0; box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.5); min-width:95vw; max-width:95vw; } dialog.zum-dialog.popup[open] { display:flex; flex-direction:column; } @media (min-width: 851px) { dialog.zum-dialog.popup { min-wid…“) |
KKeine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_Farben.css"); | |||
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_Box.css"); | |||
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_Lernpfad.css"); | |||
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Widget_Dialog.css"); | |||
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:RQuiz.css"); | |||
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:zum_mw-collapsible.css"); | |||
/** | |||
* | |||
*/ | |||
.mediawiki audio { | |||
height:1.5em !important; | |||
display:inline-block; | |||
} | |||
/** | |||
* | |||
* | |||
*/ | |||
body.not-logged-in .hidden-not-logged-in { | |||
display:none; | |||
} | |||
body:not(.not-logged-in) .hidden-logged-in { | |||
display:none; | |||
} | |||
/** | |||
* use correct icon for `Englisch` classes | |||
* | |||
* CS | |||
* 2020-06-23 | |||
*/ | |||
.mediawiki #fu-menu li#f\ächer #n-Englisch a:before, | |||
.mediawiki #fu-offcanvas li#f\ächer #n-Englisch a:before { | |||
content: '\e629'; | |||
} | |||
/** | |||
* use correct icon for `Latein` classes | |||
* | |||
* CS | |||
* 2022-09-18 | |||
*/ | |||
.mediawiki #fu-menu li#f\ächer #n-Latein a:before, | |||
.mediawiki #fu-offcanvas li#f\ächer #n-Latein a:before { | |||
content: '\e669'; | |||
} | |||
/** | |||
* Black color for `misc` classes | |||
* | |||
* CS | |||
* 2023-04-23 | |||
* | |||
*/ | |||
.mediawiki .subjects.misc a span, | |||
.mediawiki .subjects.misc a.new span { | |||
color: hsla(0, 0%, 0%, 0.8); | |||
} | |||
.mediawiki .misc .portal > span { | |||
background: hsla(0, 0%, 0%, 0.8); | |||
} | |||
/** | |||
* Sidebar Hilfen ausgeklappt für eingeloggte Nutzer | |||
* CS | |||
* 2019-04-24 | |||
*/ | |||
body:not(.not-logged-in) #fu-menu li#hilfen > div, | |||
body:not(.not-logged-in) #fu-offcanvas li#hilfen > div { | |||
display: block !important; | |||
visibility: visible !important; | |||
height: auto !important; | |||
} | |||
/* | /* | ||
* | body:not(.not-logged-in) #fu-menu li#hilfen > a, | ||
body:not(.not-logged-in) #fu-offcanvas li#hilfen > a { | |||
background: rgba(0, 0, 0, 0.05); | |||
} | |||
*/ | |||
/* hide the toogle */ | |||
body:not(.not-logged-in) #fu-menu li#hilfen > a:after, | |||
body:not(.not-logged-in) #fu-offcanvas li#hilfen > a:after { | |||
display: none; | |||
} | |||
/** | |||
* remove interferring default styles from #siteNotice and #localNotice | |||
* uses .mediawiki selector to increase specifity | |||
*/ | |||
.mediawiki #siteNotice a { display:inline-block; } | |||
.mediawiki #siteNotice, .mediawiki #localNotice { | |||
text-align:initial; | |||
} | |||
.mediawiki #siteNotice { | |||
margin: -1.5rem -1.5rem -1.5rem -1.5rem; | |||
} | |||
.mediawiki #localNotice { | |||
margin: initial; | |||
} | |||
/* Kennzeichnung externer Links, hinzugefügt [[Benutzer:m.scharwies]] 7. Apr. 2018 */ | |||
div#content a.external { | |||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat; | |||
padding-right: 13px; | |||
} | |||
/* Floaten von Bildern, TOC, etc , hinzugefügt [[Benutzer:m.scharwies]] 7. Apr. 2018 */ | |||
div.float-right, table.float-right, ul.float-right, .float-right { | |||
clear: right; | |||
float: right; | |||
margin: 1em 0 1em 1em; | |||
} | |||
/******************* | |||
* Fix Geogebra Styling | |||
* | |||
* Die Standardstyles greifen in das Geogebra Applet rein und sorgen für Darstellungsprobleme bei den Toolbars. | |||
* | |||
* Wir fügen .GeoGebraFrame in die Selektorkette um mit einer höheren Spezifizität drüber zukommen. | |||
*/ | |||
#mw-content-text .GeoGebraFrame ul { margin:0; } | |||
/****************** | |||
* | |||
* ZUM-Layout | |||
* | |||
******************/ | |||
.zum-block { | |||
padding:0.5em; | |||
margin-top:0.5em; | |||
margin-bottom:0.5em; | |||
} | |||
/*********** | |||
* | |||
* Mediawiki Indicators | |||
* - container floats on the right | |||
* - individual indicators are flex elements | |||
* | |||
***********/ | |||
.mw-indicators { | |||
float:right; | |||
display:flex; | |||
} | |||
.mw-indicators > .mw-indicator { | |||
flex: 1; | |||
} | |||
/* ZUM Portalseite Highlight Element | |||
* | |||
* Relevant Markup Sketch | |||
* <>.zum-portalseite-highlight | |||
* a | |||
*. <>.zum-portalseite-highlight--icon | |||
* a | |||
*. p | |||
*/ | |||
.zum-portalseite-highlight { | |||
display:grid; | |||
--icon-size: 2rem; | |||
grid-gap:0.2rem; | |||
grid-template-columns: var(--icon-size); | |||
} | |||
.zum-portalseite-highlight > a { | |||
grid-column: 2; | |||
} | |||
.zum-portalseite-highlight > a:first-child { | |||
grid-column: 1; | |||
grid-row: 1 / 3; | |||
margin-right:0.2rem; | |||
margin-right:calc(var(--icon-size) / 10); | |||
} | |||
.zum-portalseite-highlight > p { | |||
grid-column: 1 / 3; | |||
} | |||
.zum-portalseite-highlight > p:first-of-type { | |||
margin-top:0; | |||
} | |||
.zum-portalseite-highlight .zum-portalseite-highlight--icon { | |||
max-width:var(--icon-size); | |||
max-height:var(--icon-size); | |||
font-size: var(--icon-size); | |||
} | |||
@media (min-width: 851px) { | |||
.zum-portalseite-highlight { | |||
--icon-size:5rem; | |||
} | |||
.zum-portalseite-highlight > p { | |||
grid-column: 2; | |||
} | |||
} | |||
/* ZUM Portalseite Spotlight Element | |||
* | * | ||
* Relevant Markup Sketch | |||
* <>.zum-portalseite-spotlight | |||
* <>.zum-portalseite-spotlight--icon__container | |||
* a | |||
*. <>.zum-portalseite-highlight--icon | |||
*. a | |||
* p | |||
*/ | */ | ||
.zum-portalseite-spotlight { | |||
display:grid; | |||
--icon-size: 2rem; | |||
grid-template-columns:min-content; | |||
} | |||
.zum-portalseite-spotlight > p { | |||
grid-row: 2; | |||
grid-column: 1 / 3; | |||
} | |||
.zum-portalseite-spotlight > p:first-of-type { | |||
margin-top:0; | |||
} | } | ||
.zum-portalseite-spotlight .zum-portalseite-spotlight--icon { | |||
max-width:var(--icon-size) !important; /* use !important to break MW styles */ | |||
max-height:var(--icon-size); | |||
font-size: var(--icon-size); | |||
margin:0.2rem; | |||
} | } | ||
@media (min-width: 851px) { | @media (min-width: 851px) { | ||
.zum-portalseite-spotlight { | |||
--icon-size:5rem; | |||
justify-items: center; | |||
grid-template-columns:unset; | |||
} | |||
.zum-portalseite-spotlight--icon_container { | |||
grid-row:unset; | |||
grid-column:unset; | |||
} | |||
.zum-portalseite-spotlight > p { | |||
grid-row: 3; | |||
grid-column: 1; | |||
} | } | ||
} | } | ||
.zum- | |||
/* | |||
* ZUM Toggle | |||
*/ | |||
[data-zum-toggle-target]:not(.zum-toggle__invisible) { | |||
background: var(--zum-farbe-links--x-heller); | |||
outline:1px solid var(--zum-farbe-links--heller); | |||
margin-inline:0.3em; | |||
padding-inline: 0.3em; | |||
border-radius: 0.3em; | |||
display: inline-block; | |||
cursor:pointer; | cursor:pointer; | ||
} | |||
[data-zum-toggle-target]::after { | |||
cursor:pointer; | |||
color:var(--zum-farbe-links--heller); | |||
margin-inline-start:max(0.25em, 0.25rem); | |||
display:inline-block; | |||
} | |||
[data-zum-toggle-target]:not([data-zum-toggle-value=true])::after { | |||
content:'▿'; | |||
} | |||
[data-zum-toggle-target][data-zum-toggle-value=true]::after { | |||
content:'▵'; | |||
} | |||
[data-zum-toggle-target]:not([data-zum-toggle-value=true]).zum-toggle__invisible::after { | |||
content:'aufdecken ▿'; | |||
font-size:max(0.5em, 0.66rem); | |||
} | |||
[data-zum-toggle-target][data-zum-toggle-value=true].zum-toggle__invisible::after { | |||
content:'verbergen ▵'; | |||
font-size:max(0.5em, 0.66rem); | |||
} | |||
.zum-toggle--content { | |||
display:none; | |||
} | |||
.zum-toggle--content[data-zum-toggle-visible="true"] { | |||
display:revert; | |||
} | |||
.zum-toggle--content__partial { | |||
max-height:20em; | |||
overflow:hidden; | |||
position:relative; | |||
} | |||
.zum-toggle--content__partial:not([data-zum-toggle-visible="true"])::after { | |||
content: ''; | |||
position: absolute; | |||
bottom:0;left:0;right:0; | |||
height:100px; | |||
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); | |||
pointer-events:none; | |||
} | } | ||
.zum-toggle--content__partial[data-zum-toggle-visible="true"] { | |||
.zum- | max-height: 1000em;transition:max-height 0.15s ease-in; | ||
} | } | ||
. | |||
. | |||
margin: | /* .button -> Vorlage:Button */ | ||
.button { | |||
display: inline flow-root; | |||
} | |||
.button-left, | |||
.button-center, | |||
.button-right | |||
{ | |||
display: flex; | |||
} | |||
@media(min-width:1360px) { | |||
.button-right a, | |||
.button-right:not(:has(> a)) { | |||
margin-inline-start: auto; | |||
} | |||
.button-center a, | |||
.button-center:not(:has(> a)) { | |||
margin-inline: auto; | |||
} | |||
.button-left a, | |||
.button-left:not(:has(> a)) { | |||
margin-inline-end: auto; | |||
} | |||
} | |||
:is(.button, .button-left, .button-center, .button-right).button__small a, | |||
:is(.button, .button-left, .button-center, .button-right).button__small:not(:has(> a)) { | |||
padding-block:0; | |||
padding-inline:0.4em; | |||
} | |||
.button a, | |||
.button:not(:has(> a)), | |||
.button-left a, | |||
.button-left:not(:has(> a)), | |||
.button-center a, | |||
.button-center:not(:has(> a)), | |||
.button-right a, | |||
.button-right:not(:has(> a)) { | |||
padding-inline:0.6em; | |||
padding-block:0.2em; | |||
display:inline flow-root; | |||
outline: 1px solid transparent; | |||
border-radius: 0.2em; | |||
} | |||
.button-left a .fa, | |||
.button-left:not(:has(> a)) .fa, | |||
.button-center a .fa, | |||
.button-center:not(:has(> a)) .fa, | |||
.button-right a .fa, | |||
.button-right:not(:has(> a)) .fa { | |||
margin-inline:0.2em; | |||
} | |||
.mediawiki .button a, | |||
.mediawiki .button:not(:has(> a)), | |||
.mediawiki .button-left a, | |||
.mediawiki .button-left:not(:has(> a)), | |||
.mediawiki .button-center a, | |||
.mediawiki .button-center:not(:has(> a)), | |||
.mediawiki .button-right a, | |||
.mediawiki .button-right:not(:has(> a)) { | |||
color: hsl(0,0%,20%); | |||
background-color: var(--zum-farbe-grau--hell); | |||
outline-color: var(--zum-farbe-grau-dunkel); | |||
} | |||
.mediawiki .button:not(:has(> a)):hover, | |||
.mediawiki .button:not(:has(> a)):focus, | |||
.mediawiki .button-left:not(:has(> a)):hover, | |||
.mediawiki .button-left:not(:has(> a)):focus, | |||
.mediawiki .button-center:not(:has(> a)):hover, | |||
.mediawiki .button-center:not(:has(> a)):focus, | |||
.mediawiki .button-right:not(:has(> a)):hover, | |||
.mediawiki .button-right:not(:has(> a)):focus { | |||
text-decoration:underline; | |||
} | |||
.mediawiki .button a:hover, | |||
.mediawiki .button a:focus, | |||
.mediawiki .button:not(:has(> a)):hover, | |||
.mediawiki .button:not(:has(> a)):focus, | |||
.mediawiki .button-left a:hover, | |||
.mediawiki .button-left a:focus, | |||
.mediawiki .button-left:not(:has(> a)):hover, | |||
.mediawiki .button-left:not(:has(> a)):focus, | |||
.mediawiki .button-center a:hover, | |||
.mediawiki .button-center a:focus, | |||
.mediawiki .button-center:not(:has(> a)):hover, | |||
.mediawiki .button-center:not(:has(> a)):focus, | |||
.mediawiki .button-right a:hover, | |||
.mediawiki .button-right a:focus, | |||
.mediawiki .button-right:not(:has(> a)):hover, | |||
.mediawiki .button-right:not(:has(> a)):focus { background-color: var(--zum-farbe-grau--x-heller); } | |||
.mediawiki .button.button-primary a, | |||
.mediawiki .button.button-primary:not(:has(> a)), | |||
.mediawiki .button-left.button-primary a, | |||
.mediawiki .button-left.button-primary:not(:has(> a)), | |||
.mediawiki .button-center.button-primary a, | |||
.mediawiki .button-center.button-primary:not(:has(> a)), | |||
.mediawiki .button-right.button-primary a, | |||
.mediawiki .button-right.button-primary:not(:has(> a)) { | |||
color: hsl(0,0%,20%); | |||
background-color: var(--zum-farbe-links--heller); | |||
outline-color: var(--zum-farbe-links); | |||
} | |||
.mediawiki .button.button-primary a:hover, | |||
.mediawiki .button.button-primary a:focus, | |||
.mediawiki .button.button-primary:not(:has(> a)):hover, | |||
.mediawiki .button.button-primary:not(:has(> a)):focus, | |||
.mediawiki .button-left.button-primary a:hover, | |||
.mediawiki .button-left.button-primary a:focus, | |||
.mediawiki .button-left.button-primary:not(:has(> a)):hover, | |||
.mediawiki .button-left.button-primary:not(:has(> a)):focus, | |||
.mediawiki .button-center.button-primary a:hover, | |||
.mediawiki .button-center.button-primary a:focus, | |||
.mediawiki .button-center.button-primary:not(:has(> a)):hover, | |||
.mediawiki .button-center.button-primary:not(:has(> a)):focus, | |||
.mediawiki .button-right.button-primary a:hover, | |||
.mediawiki .button-right.button-primary a:focus, | |||
.mediawiki .button-right.button-primary:not(:has(> a)):hover, | |||
.mediawiki .button-right.button-primary:not(:has(> a)):focus { background-color: var(--zum-farbe-links--x-heller); } | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary a, | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)) { | |||
color:hsl(0, 0%, 20%); | |||
outline-color: var(--zum-farbe-sekund\är-2); | |||
background-color: var(--zum-farbe-sekund\är-2--x-heller); | |||
} | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary :is(a:hover, a:focus), | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)):is(:hover, :focus) { | |||
background-color: var(--zum-farbe-sekund\är-2--xx-heller); | |||
} | |||
/* | |||
* Vorlage:Fortsetzung | |||
*/ | |||
.zum-fortsetzung { | |||
display: grid; | |||
grid-template-areas: | |||
"titel titel titel" | |||
"vorher übersicht weiter"; | |||
grid-auto-columns: 1fr; | |||
} | |||
.zum-fortsetzung--titel { | |||
grid-area: titel; | |||
} | |||
.zum-fortsetzung--vorher { | |||
grid-area: vorher; | |||
margin-inline-end: auto; | |||
} | |||
.zum-fortsetzung--\übersicht { | |||
grid-area: \übersicht; | |||
margin-inline:auto; | |||
} | |||
.zum-fortsetzung--weiter { | |||
grid-area: weiter; | |||
margin-inline-start: auto; | |||
} | } |
Version vom 18. Februar 2024, 20:08 Uhr
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_Farben.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_Box.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_Lernpfad.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Widget_Dialog.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:RQuiz.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:zum_mw-collapsible.css");
/**
*
*/
.mediawiki audio {
height:1.5em !important;
display:inline-block;
}
/**
*
*
*/
body.not-logged-in .hidden-not-logged-in {
display:none;
}
body:not(.not-logged-in) .hidden-logged-in {
display:none;
}
/**
* use correct icon for `Englisch` classes
*
* CS
* 2020-06-23
*/
.mediawiki #fu-menu li#f\ächer #n-Englisch a:before,
.mediawiki #fu-offcanvas li#f\ächer #n-Englisch a:before {
content: '\e629';
}
/**
* use correct icon for `Latein` classes
*
* CS
* 2022-09-18
*/
.mediawiki #fu-menu li#f\ächer #n-Latein a:before,
.mediawiki #fu-offcanvas li#f\ächer #n-Latein a:before {
content: '\e669';
}
/**
* Black color for `misc` classes
*
* CS
* 2023-04-23
*
*/
.mediawiki .subjects.misc a span,
.mediawiki .subjects.misc a.new span {
color: hsla(0, 0%, 0%, 0.8);
}
.mediawiki .misc .portal > span {
background: hsla(0, 0%, 0%, 0.8);
}
/**
* Sidebar Hilfen ausgeklappt für eingeloggte Nutzer
* CS
* 2019-04-24
*/
body:not(.not-logged-in) #fu-menu li#hilfen > div,
body:not(.not-logged-in) #fu-offcanvas li#hilfen > div {
display: block !important;
visibility: visible !important;
height: auto !important;
}
/*
body:not(.not-logged-in) #fu-menu li#hilfen > a,
body:not(.not-logged-in) #fu-offcanvas li#hilfen > a {
background: rgba(0, 0, 0, 0.05);
}
*/
/* hide the toogle */
body:not(.not-logged-in) #fu-menu li#hilfen > a:after,
body:not(.not-logged-in) #fu-offcanvas li#hilfen > a:after {
display: none;
}
/**
* remove interferring default styles from #siteNotice and #localNotice
* uses .mediawiki selector to increase specifity
*/
.mediawiki #siteNotice a { display:inline-block; }
.mediawiki #siteNotice, .mediawiki #localNotice {
text-align:initial;
}
.mediawiki #siteNotice {
margin: -1.5rem -1.5rem -1.5rem -1.5rem;
}
.mediawiki #localNotice {
margin: initial;
}
/* Kennzeichnung externer Links, hinzugefügt [[Benutzer:m.scharwies]] 7. Apr. 2018 */
div#content a.external {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
padding-right: 13px;
}
/* Floaten von Bildern, TOC, etc , hinzugefügt [[Benutzer:m.scharwies]] 7. Apr. 2018 */
div.float-right, table.float-right, ul.float-right, .float-right {
clear: right;
float: right;
margin: 1em 0 1em 1em;
}
/*******************
* Fix Geogebra Styling
*
* Die Standardstyles greifen in das Geogebra Applet rein und sorgen für Darstellungsprobleme bei den Toolbars.
*
* Wir fügen .GeoGebraFrame in die Selektorkette um mit einer höheren Spezifizität drüber zukommen.
*/
#mw-content-text .GeoGebraFrame ul { margin:0; }
/******************
*
* ZUM-Layout
*
******************/
.zum-block {
padding:0.5em;
margin-top:0.5em;
margin-bottom:0.5em;
}
/***********
*
* Mediawiki Indicators
* - container floats on the right
* - individual indicators are flex elements
*
***********/
.mw-indicators {
float:right;
display:flex;
}
.mw-indicators > .mw-indicator {
flex: 1;
}
/* ZUM Portalseite Highlight Element
*
* Relevant Markup Sketch
* <>.zum-portalseite-highlight
* a
*. <>.zum-portalseite-highlight--icon
* a
*. p
*/
.zum-portalseite-highlight {
display:grid;
--icon-size: 2rem;
grid-gap:0.2rem;
grid-template-columns: var(--icon-size);
}
.zum-portalseite-highlight > a {
grid-column: 2;
}
.zum-portalseite-highlight > a:first-child {
grid-column: 1;
grid-row: 1 / 3;
margin-right:0.2rem;
margin-right:calc(var(--icon-size) / 10);
}
.zum-portalseite-highlight > p {
grid-column: 1 / 3;
}
.zum-portalseite-highlight > p:first-of-type {
margin-top:0;
}
.zum-portalseite-highlight .zum-portalseite-highlight--icon {
max-width:var(--icon-size);
max-height:var(--icon-size);
font-size: var(--icon-size);
}
@media (min-width: 851px) {
.zum-portalseite-highlight {
--icon-size:5rem;
}
.zum-portalseite-highlight > p {
grid-column: 2;
}
}
/* ZUM Portalseite Spotlight Element
*
* Relevant Markup Sketch
* <>.zum-portalseite-spotlight
* <>.zum-portalseite-spotlight--icon__container
* a
*. <>.zum-portalseite-highlight--icon
*. a
* p
*/
.zum-portalseite-spotlight {
display:grid;
--icon-size: 2rem;
grid-template-columns:min-content;
}
.zum-portalseite-spotlight > p {
grid-row: 2;
grid-column: 1 / 3;
}
.zum-portalseite-spotlight > p:first-of-type {
margin-top:0;
}
.zum-portalseite-spotlight .zum-portalseite-spotlight--icon {
max-width:var(--icon-size) !important; /* use !important to break MW styles */
max-height:var(--icon-size);
font-size: var(--icon-size);
margin:0.2rem;
}
@media (min-width: 851px) {
.zum-portalseite-spotlight {
--icon-size:5rem;
justify-items: center;
grid-template-columns:unset;
}
.zum-portalseite-spotlight--icon_container {
grid-row:unset;
grid-column:unset;
}
.zum-portalseite-spotlight > p {
grid-row: 3;
grid-column: 1;
}
}
/*
* ZUM Toggle
*/
[data-zum-toggle-target]:not(.zum-toggle__invisible) {
background: var(--zum-farbe-links--x-heller);
outline:1px solid var(--zum-farbe-links--heller);
margin-inline:0.3em;
padding-inline: 0.3em;
border-radius: 0.3em;
display: inline-block;
cursor:pointer;
}
[data-zum-toggle-target]::after {
cursor:pointer;
color:var(--zum-farbe-links--heller);
margin-inline-start:max(0.25em, 0.25rem);
display:inline-block;
}
[data-zum-toggle-target]:not([data-zum-toggle-value=true])::after {
content:'▿';
}
[data-zum-toggle-target][data-zum-toggle-value=true]::after {
content:'▵';
}
[data-zum-toggle-target]:not([data-zum-toggle-value=true]).zum-toggle__invisible::after {
content:'aufdecken ▿';
font-size:max(0.5em, 0.66rem);
}
[data-zum-toggle-target][data-zum-toggle-value=true].zum-toggle__invisible::after {
content:'verbergen ▵';
font-size:max(0.5em, 0.66rem);
}
.zum-toggle--content {
display:none;
}
.zum-toggle--content[data-zum-toggle-visible="true"] {
display:revert;
}
.zum-toggle--content__partial {
max-height:20em;
overflow:hidden;
position:relative;
}
.zum-toggle--content__partial:not([data-zum-toggle-visible="true"])::after {
content: '';
position: absolute;
bottom:0;left:0;right:0;
height:100px;
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
pointer-events:none;
}
.zum-toggle--content__partial[data-zum-toggle-visible="true"] {
max-height: 1000em;transition:max-height 0.15s ease-in;
}
/* .button -> Vorlage:Button */
.button {
display: inline flow-root;
}
.button-left,
.button-center,
.button-right
{
display: flex;
}
@media(min-width:1360px) {
.button-right a,
.button-right:not(:has(> a)) {
margin-inline-start: auto;
}
.button-center a,
.button-center:not(:has(> a)) {
margin-inline: auto;
}
.button-left a,
.button-left:not(:has(> a)) {
margin-inline-end: auto;
}
}
:is(.button, .button-left, .button-center, .button-right).button__small a,
:is(.button, .button-left, .button-center, .button-right).button__small:not(:has(> a)) {
padding-block:0;
padding-inline:0.4em;
}
.button a,
.button:not(:has(> a)),
.button-left a,
.button-left:not(:has(> a)),
.button-center a,
.button-center:not(:has(> a)),
.button-right a,
.button-right:not(:has(> a)) {
padding-inline:0.6em;
padding-block:0.2em;
display:inline flow-root;
outline: 1px solid transparent;
border-radius: 0.2em;
}
.button-left a .fa,
.button-left:not(:has(> a)) .fa,
.button-center a .fa,
.button-center:not(:has(> a)) .fa,
.button-right a .fa,
.button-right:not(:has(> a)) .fa {
margin-inline:0.2em;
}
.mediawiki .button a,
.mediawiki .button:not(:has(> a)),
.mediawiki .button-left a,
.mediawiki .button-left:not(:has(> a)),
.mediawiki .button-center a,
.mediawiki .button-center:not(:has(> a)),
.mediawiki .button-right a,
.mediawiki .button-right:not(:has(> a)) {
color: hsl(0,0%,20%);
background-color: var(--zum-farbe-grau--hell);
outline-color: var(--zum-farbe-grau-dunkel);
}
.mediawiki .button:not(:has(> a)):hover,
.mediawiki .button:not(:has(> a)):focus,
.mediawiki .button-left:not(:has(> a)):hover,
.mediawiki .button-left:not(:has(> a)):focus,
.mediawiki .button-center:not(:has(> a)):hover,
.mediawiki .button-center:not(:has(> a)):focus,
.mediawiki .button-right:not(:has(> a)):hover,
.mediawiki .button-right:not(:has(> a)):focus {
text-decoration:underline;
}
.mediawiki .button a:hover,
.mediawiki .button a:focus,
.mediawiki .button:not(:has(> a)):hover,
.mediawiki .button:not(:has(> a)):focus,
.mediawiki .button-left a:hover,
.mediawiki .button-left a:focus,
.mediawiki .button-left:not(:has(> a)):hover,
.mediawiki .button-left:not(:has(> a)):focus,
.mediawiki .button-center a:hover,
.mediawiki .button-center a:focus,
.mediawiki .button-center:not(:has(> a)):hover,
.mediawiki .button-center:not(:has(> a)):focus,
.mediawiki .button-right a:hover,
.mediawiki .button-right a:focus,
.mediawiki .button-right:not(:has(> a)):hover,
.mediawiki .button-right:not(:has(> a)):focus { background-color: var(--zum-farbe-grau--x-heller); }
.mediawiki .button.button-primary a,
.mediawiki .button.button-primary:not(:has(> a)),
.mediawiki .button-left.button-primary a,
.mediawiki .button-left.button-primary:not(:has(> a)),
.mediawiki .button-center.button-primary a,
.mediawiki .button-center.button-primary:not(:has(> a)),
.mediawiki .button-right.button-primary a,
.mediawiki .button-right.button-primary:not(:has(> a)) {
color: hsl(0,0%,20%);
background-color: var(--zum-farbe-links--heller);
outline-color: var(--zum-farbe-links);
}
.mediawiki .button.button-primary a:hover,
.mediawiki .button.button-primary a:focus,
.mediawiki .button.button-primary:not(:has(> a)):hover,
.mediawiki .button.button-primary:not(:has(> a)):focus,
.mediawiki .button-left.button-primary a:hover,
.mediawiki .button-left.button-primary a:focus,
.mediawiki .button-left.button-primary:not(:has(> a)):hover,
.mediawiki .button-left.button-primary:not(:has(> a)):focus,
.mediawiki .button-center.button-primary a:hover,
.mediawiki .button-center.button-primary a:focus,
.mediawiki .button-center.button-primary:not(:has(> a)):hover,
.mediawiki .button-center.button-primary:not(:has(> a)):focus,
.mediawiki .button-right.button-primary a:hover,
.mediawiki .button-right.button-primary a:focus,
.mediawiki .button-right.button-primary:not(:has(> a)):hover,
.mediawiki .button-right.button-primary:not(:has(> a)):focus { background-color: var(--zum-farbe-links--x-heller); }
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary a,
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)) {
color:hsl(0, 0%, 20%);
outline-color: var(--zum-farbe-sekund\är-2);
background-color: var(--zum-farbe-sekund\är-2--x-heller);
}
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary :is(a:hover, a:focus),
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)):is(:hover, :focus) {
background-color: var(--zum-farbe-sekund\är-2--xx-heller);
}
/*
* Vorlage:Fortsetzung
*/
.zum-fortsetzung {
display: grid;
grid-template-areas:
"titel titel titel"
"vorher übersicht weiter";
grid-auto-columns: 1fr;
}
.zum-fortsetzung--titel {
grid-area: titel;
}
.zum-fortsetzung--vorher {
grid-area: vorher;
margin-inline-end: auto;
}
.zum-fortsetzung--\übersicht {
grid-area: \übersicht;
margin-inline:auto;
}
.zum-fortsetzung--weiter {
grid-area: weiter;
margin-inline-start: auto;
}