Einführung in quadratische Funktionen/allgemeine Form und MediaWiki:Vorlage Button.css: Unterschied zwischen den Seiten
Aus ZUM-Unterrichten
< Einführung in quadratische Funktionen(Unterschied zwischen Seiten)
K (- ZUM2Edutags) Markierung: 2017-Quelltext-Bearbeitung |
KKeine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
/* .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; | |||
} | |||
:is(.button, .button-left, .button-center, .button-right) a, | |||
:is(.button, .button-left, .button-center, .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; | |||
} | |||
:is(.button, .button-left, .button-center, .button-right) a .fa, | |||
:is(.button, .button-left, .button-center, .button-right):not(:has(> a)) .fa { | |||
margin-inline:0.2em; | |||
} | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right) a, | |||
.mediawiki :is(.button, .button-left, .button-center, .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 :is(.button, .button-left, .button-center, .button-right):not(:has(> a)):is(:hover,:focus) { | |||
text-decoration:underline; | |||
} | |||
{ | .mediawiki :is(.button, .button-left, .button-center, .button-right) a:is(:hover,:focus), | ||
.mediawiki :is(.button, .button-left, .button-center, .button-right):not(:has(> a)):is(:hover,:focus) { | |||
background-color: var(--zum-farbe-grau--x-heller); | |||
} | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-primary a, | |||
.mediawiki :is(.button, .button-left, .button-center, .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 :is(.button, .button-left, .button-center, .button-right).button-primary a:is(:hover,:focus) | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-primary:not(:has(> a)):is(:hover,: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); | |||
} | |||
Aktuelle Version vom 18. Februar 2024, 21:14 Uhr
/* .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;
}
:is(.button, .button-left, .button-center, .button-right) a,
:is(.button, .button-left, .button-center, .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;
}
:is(.button, .button-left, .button-center, .button-right) a .fa,
:is(.button, .button-left, .button-center, .button-right):not(:has(> a)) .fa {
margin-inline:0.2em;
}
.mediawiki :is(.button, .button-left, .button-center, .button-right) a,
.mediawiki :is(.button, .button-left, .button-center, .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 :is(.button, .button-left, .button-center, .button-right):not(:has(> a)):is(:hover,:focus) {
text-decoration:underline;
}
.mediawiki :is(.button, .button-left, .button-center, .button-right) a:is(:hover,:focus),
.mediawiki :is(.button, .button-left, .button-center, .button-right):not(:has(> a)):is(:hover,:focus) {
background-color: var(--zum-farbe-grau--x-heller);
}
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-primary a,
.mediawiki :is(.button, .button-left, .button-center, .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 :is(.button, .button-left, .button-center, .button-right).button-primary a:is(:hover,:focus)
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-primary:not(:has(> a)):is(:hover,: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);
}