MediaWiki:Vorlage Button.css: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
 (Die Seite wurde neu angelegt: „ →.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, .butto…“)  | 
				KKeine Bearbeitungszusammenfassung  | 
				||
| Zeile 33: | Zeile 33: | ||
}  | }  | ||
.button   | :is(.button, .button-left, .button-center, .button-right) a,  | ||
.button  | :is(.button, .button-left, .button-center, .button-right):not(:has(> a)) {  | ||
.button-  | |||
.button-  | |||
.button  | |||
.button-  | |||
.button-  | |||
.button-right:not(:has(> a)) {  | |||
   padding-inline:0.6em;  |    padding-inline:0.6em;  | ||
   padding-block:0.2em;  |    padding-block:0.2em;  | ||
| Zeile 48: | Zeile 42: | ||
}  | }  | ||
.button-left   | |||
.button-  | :is(.button, .button-left, .button-center, .button-right) a .fa,  | ||
.button-  | :is(.button, .button-left, .button-center, .button-right):not(:has(> a)) .fa {  | ||
.button-  | |||
.button-right:not(:has(> a)) .fa {  | |||
   margin-inline:0.2em;  |    margin-inline:0.2em;  | ||
}  | }  | ||
.mediawiki .button   | .mediawiki :is(.button, .button-left, .button-center, .button-right) a,  | ||
.mediawiki :is(.button, .button-left, .button-center, .button-right):not(:has(> a)) {    | |||
.mediawiki .button  | |||
   color: hsl(0,0%,20%);  |    color: hsl(0,0%,20%);  | ||
   background-color: var(--zum-farbe-grau--hell);    |    background-color: var(--zum-farbe-grau--hell);    | ||
| Zeile 71: | Zeile 56: | ||
}  | }  | ||
.mediawiki   | .mediawiki :is(.button, .button-left, .button-center, .button-right):not(:has(> a)):is(:hover,:focus) {  | ||
   text-decoration:underline;  |    text-decoration:underline;  | ||
}  | }  | ||
.mediawiki   | .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   | |||
.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)) {    | |||
.mediawiki .button.button-  | |||
.mediawiki   | |||
   color: hsl(0,0%,20%);       |    color: hsl(0,0%,20%);       | ||
   background-color: var(--zum-farbe-links--heller);    |    background-color: var(--zum-farbe-links--heller);    | ||
| Zeile 116: | Zeile 74: | ||
.mediawiki   | .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   | |||
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary a,  | .mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary a,  | ||
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);
}
