MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 249: | Zeile 249: | ||
/* --- Layout für die drei Bewertungsboxen --- */ | |||
/* | |||
.whisky-rating { | .whisky-rating { | ||
display: grid; | display: grid; | ||
| Zeile 270: | Zeile 269: | ||
} | } | ||
/* Gläser- | /* --- Container für die Gläser --- */ | ||
.whisky-rating__widget { display: inline-flex | .whisky-rating__widget { | ||
display: flex; /* flex statt inline-flex */ | |||
flex-wrap: wrap; /* erlaubt Umbruch bei kleinen Screens */ | |||
align-items: center; | |||
} | |||
/* --- Gläser (Button) --- */ | |||
.whisky-glass { | .whisky-glass { | ||
inline- | display: inline-block; /* verhindert Überlappungen */ | ||
width: 28px; | |||
height: 28px; | |||
margin: 0 6px 6px 0; /* Abstand zwischen den Gläsern */ | |||
border: 0; | |||
padding: 0; | |||
background: none; | background: none; | ||
cursor: pointer; | cursor: pointer; | ||
background-image: url("/index.php?title=Special:FilePath/Whisky_empty.png | background-image: url("/w/index.php?title=Special:FilePath/Whisky_empty.png"); | ||
"); | background-size: contain; | ||
background-size: contain; background-repeat: no-repeat; background-position: center; | background-repeat: no-repeat; | ||
opacity: . | background-position: center; | ||
transition: | line-height: 0; | ||
vertical-align: middle; | |||
box-sizing: content-box; | |||
opacity: .8; | |||
transition: opacity .08s ease, filter .08s ease; | |||
} | |||
/* --- Aktive (gefüllte) Gläser --- */ | |||
.whisky-glass.is-active { | |||
background-image: url("/w/index.php?title=Special:FilePath/Whisky_filled.png"); | |||
opacity: 1; | |||
} | } | ||
/* --- Hover/Fokus-Effekt --- */ | |||
.whisky-glass:hover, | .whisky-glass:hover, | ||
.whisky-glass:focus { | .whisky-glass:focus { | ||
opacity: 1; | opacity: 1; | ||
outline: none; | outline: none; | ||
filter: drop-shadow(0 0 0.4px rgba(0,0,0,.25)); | filter: drop-shadow(0 0 0.4px rgba(0,0,0,.25)); | ||
} | } | ||
/* | /* --- Textbereich unter den Gläsern --- */ | ||
.whisky-rating__meta { | .whisky-rating__meta { | ||
margin-top: .4rem; | margin-top: .4rem; | ||
| Zeile 303: | Zeile 318: | ||
} | } | ||
/* Zustand: nicht eingeloggt */ | /* --- Zustand: nicht eingeloggt --- */ | ||
.whisky-rating--disabled .whisky-glass { | .whisky-rating--disabled .whisky-glass { | ||
cursor: not-allowed; | cursor: not-allowed; | ||
| Zeile 309: | Zeile 324: | ||
} | } | ||
/* | /* --- Mobile: kleinere Gläser --- */ | ||
@media (max-width: 420px) { | @media (max-width: 420px) { | ||
.whisky-glass { | .whisky-glass { width: 26px; height: 26px; margin: 0 5px 5px 0; } | ||
} | } | ||