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 a,
:is(.button, .button-left, .button-center, .button-right) a,
.button:not(:has(> a)),
:is(.button, .button-left, .button-center, .button-right):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-inline:0.6em;
   padding-block:0.2em;
   padding-block:0.2em;
Zeile 48: Zeile 42:
}
}


.button-left             a .fa,
 
.button-left:not(:has(> a)) .fa,
:is(.button, .button-left, .button-center, .button-right) a .fa,
.button-center              a .fa,
:is(.button, .button-left, .button-center, .button-right):not(:has(> a)) .fa {
.button-center:not(:has(> a)) .fa,
.button-right              a .fa,
.button-right:not(:has(> a)) .fa {
   margin-inline:0.2em;
   margin-inline:0.2em;
}
}




.mediawiki .button a,
.mediawiki :is(.button, .button-left, .button-center, .button-right) a,
.mediawiki .button:not(:has(> a)),
.mediawiki :is(.button, .button-left, .button-center, .button-right):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%);
   color: hsl(0,0%,20%);
   background-color: var(--zum-farbe-grau--hell);  
   background-color: var(--zum-farbe-grau--hell);  
Zeile 71: Zeile 56:
}
}


.mediawiki .button:not(:has(> a)):hover, 
.mediawiki :is(.button, .button-left, .button-center, .button-right):not(:has(> a)):is(:hover,:focus) {
.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;
   text-decoration:underline;
}
}


.mediawiki .button a:hover, 
.mediawiki :is(.button, .button-left, .button-center, .button-right) a:is(:hover,:focus),
.mediawiki .button a:focus,
.mediawiki :is(.button, .button-left, .button-center, .button-right):not(:has(> a)):is(:hover,:focus) {
.mediawiki .button:not(:has(> a)):hover, 
  background-color: var(--zum-farbe-grau--x-heller);
.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 :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-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%);     
   color: hsl(0,0%,20%);     
   background-color: var(--zum-farbe-links--heller);  
   background-color: var(--zum-farbe-links--heller);  
Zeile 116: Zeile 74:




.mediawiki .button.button-primary a:hover,
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-primary a:is(:hover,:focus)
.mediawiki .button.button-primary a:focus,
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-primary:not(:has(> a)):is(:hover,:focus) {
.mediawiki .button.button-primary:not(:has(> a)):hover,
  background-color: var(--zum-farbe-links--x-heller);   
.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 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-sekundr-2);
  background-color: var(--zum-farbe-sekundr-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-sekundr-2--xx-heller);
}