8,290
edits
MediaWiki:Common.css: Difference between revisions
add image carousel styles
m (reposition "animate sprite" button) |
(add image carousel styles) |
||
| Line 1,757: | Line 1,757: | ||
right: 0px; | right: 0px; | ||
font-size: 11px; | font-size: 11px; | ||
z-index: 10; | |||
font-family: "Open Sans"; | font-family: "Open Sans"; | ||
} | } | ||
| Line 1,784: | Line 1,785: | ||
text-rendering: auto; | text-rendering: auto; | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
font-family: | font-family: "FontAwesome", "Font Awesome 5 Free"; | ||
font-weight: 900; | font-weight: 900; | ||
content: "\f0d7"; | content: "\f0d7"; | ||
| Line 1,823: | Line 1,824: | ||
text-rendering: auto; | text-rendering: auto; | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
font-family: | font-family: "FontAwesome", "Font Awesome 5 Free"; | ||
font-weight: 900; | font-weight: 900; | ||
content: "\f144"; /* play icon */ | content: "\f144"; /* play icon */ | ||
| Line 1,831: | Line 1,832: | ||
.gif-play-controls | .gif-play-controls | ||
.play-pause-btn::before { | .play-pause-btn::before { | ||
content: "\f04c"; | |||
background-color: white; | |||
color: black; | |||
border-radius: 12px; | |||
height: 20px; | |||
width: 22px; | |||
padding: 4px 0 0 2px; | |||
margin-bottom: 9px; | |||
font-size: 11px; | |||
} | } | ||
.qud-infobox-animated-image-initial, | .qud-infobox-animated-image-initial, | ||
.qud-infobox-carousel-static-image, | |||
.qud-infobox-animated-image { | .qud-infobox-animated-image { | ||
display: inline-block; | display: inline-block; | ||
| Line 1,849: | Line 1,851: | ||
} | } | ||
.qud-infobox-animated-image-initial img, | .qud-infobox-animated-image-initial img, | ||
.qud-infobox-carousel-static-image img, | |||
.qud-infobox-animated-image img { | .qud-infobox-animated-image img { | ||
width: | width: 160px; | ||
} | } | ||
.qud-infobox-animated-image .qud-html-summary { | .qud-infobox-animated-image .qud-html-summary { | ||
| Line 1,899: | Line 1,902: | ||
z-index: 1; | z-index: 1; | ||
display: unset; | display: unset; | ||
} | |||
/* CAROUSEL STYLES */ | |||
.qud-carousel-title { | |||
height: 0px; /* javascript expands this to 25px */ | |||
font-size: 16px; | |||
line-height: 25px; | |||
color: var(--qud-color-k); | |||
overflow: hidden; | |||
} | |||
.qud-sprite-carousel { | |||
position: relative; | |||
} | |||
.qud-sprite-carousel > .qud-carousel-item { | |||
display: block; | |||
} | |||
.qud-sprite-carousel > .qud-carousel-item ~ .qud-carousel-item { | |||
display: none; /* applied to all but the first .qud-carousel-item */ | |||
} | |||
.qud-carousel-left, | |||
.qud-carousel-right { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
position: absolute; | |||
top: 0; | |||
z-index: 5; | |||
font-size: 38px; | |||
width: 18%; | |||
height: 240px; | |||
} | |||
.qud-carousel-left { | |||
left: 0; | |||
} | |||
.qud-carousel-right { | |||
right: 0; | |||
} | |||
.qud-carousel-btn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 60%; | |||
width: 100%; | |||
cursor: pointer; | |||
color: var(--qud-color-k-dark); | |||
color: rgba(108, 180, 122, 0.2); | |||
transition: color 0.3s ease-out; | |||
} | |||
.qud-carousel-btn:hover { | |||
color: var(--qud-color-k); | |||
color: rgba(108, 180, 122, 0.5); | |||
} | } | ||