Überprüft

Vorlage:Hilfe/clickbutton

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

 

So was müsste ich tun, damit diese Buttons so funktionieren wie ich das erwarten würde? codex colors

Variable Variable aktiv --active Variable mousover --hovoer Variable heller -subtle
blaue Schaltflächen Klick Aktiv Farbwechsel
var(--background-color-progressive) _
var(--background-color-progressive--focus)
var(--background-color-progressive--active) _ var(--background-color-progressive--hover) _ var(--background-color-progressive-subtle) _
rote Schaltflächen Klick
var(--background-color-destructive) _
var(--background-color-destructive--focus) _
var(--background-color-destructive--active) _ var(--background-color-destructive--hover) _ var(--background-color-destructive-subtle) _
interaktive Schaltflächen Klick
var(--background-color-interactive) _ var(--background-color-interactive-subtle) _
inaktive Schaltflächen Klick
var(--background-color-disabled) _ var(--background-color-button-quiet--active) _ var(--background-color-button-quiet--hover) _ var(--background-color-disabled-subtle) _
sonstige
var(--background-color-base) _
var(--background-color-base-fixed) (immer weiß)
var(--background-color-inverted) _ var(--background-color-neutral) _ var(--background-color-neutral-subtle) _
Textfarben
var(--color-base) _
var(--color-notice)
var(--color-emphasized) _ var(--color-base--hover) _ var(--color-base--subtle) _ (veraltet)
var(--color-placeholder) _
var(--color-disabled)
var(--color-inverted) _
var(--color-inverted-fixed)
var(--color-subtle) _
var(--color-progressive) _
var(--color-progressive--focus)
var(--color-progressive--active) _ var(--color-progressive--hover) _ var(--color-progressive-subtle) _
var(--color-destructive) _
var(--color-link-red)
var(--color-destructive--active) _
var(--color-link-red--active)
var(--color-destructive--hover) _
var(--color-link-red--hover)
var(--color-destructive-subtle) _
var(--color-visited) _ var(--color-destructive--visited) _
var(--color-link-red--visited)
var(--color-destructive--focus) _

Diese kleine „Hilfsvorlage“ fügt auf der zugehörigen Hilfeseite eine kleine Schaltfläche hinzu, die eine klickbare Schaltfläche simmuliert.

1
Text, bei Datei bitte |verweis= einfügen
2
Tooltip, optionaler Text beim Überfahren mit der Maus
mw
Mediawikibutton, normal=Standard=leer (weiß),
a aktive Einblendung eines Dialogfeldes
p progressive (blau/weiß)
pb progressive (blau/weiß/schwarz)
d destructive (rot)
i inaktiv (grau)
s aktiv (dunkelblau)
ex
1 Abmessung der Schaltfläche etwas höher
color
Textfarbe blau oder rot für Standard weiß

Kopiervorlagen

[Quelltext bearbeiten]

{{Hilfe/clickbutton||color= }}
{{Hilfe/clickbutton||mw= }}
{{Hilfe/clickbutton||ex=1 }}
{{Hilfe/clickbutton|[[Datei:…|16px|verweis=]]|mw= }}

Mit Text normal schwarz auf weiß wird weiß auf schwarz
Text normal, blau auf weiß
Text normal, rot auf weiß
Text normal schwarz auf weiß etwas höher (ex) wird weiß auf schwarz
Text destruktive, weiß auf rot bleibt weiß auf rot
Text progressive, weiß auf blau bleibt weiß auf blau
Text progressive, weiß auf blau wird schwarz auf blau
T inaktiv, weiß auf grau wird weiß auf dunkelgrau Rahmen entfällt
T etwas höher (ex)
Ausblenden aktiv, dunkelgrau auf grau wird noch dunkler
Ausblenden etwas höher (ex)
aktiv, weiß auf dunkelblau Farbe des Icons muss -invert sein
Aa aktiv, weiß auf dunkelblau mit Tooltip: Klein-/Großschreibung beachten
Mit Tooltip mit Tooltip: Beispieltext
Mit Tooltip etwas höher (ex)