8,290
edits
MediaWiki:Mobile.css: Difference between revisions
add image carousel styles
m (reposition "animate sprite" button) |
(add image carousel styles) |
||
| Line 153: | Line 153: | ||
right: 0px; | right: 0px; | ||
font-size: 11px; | font-size: 11px; | ||
z-index: 10; | |||
font-family: "Open Sans"; | font-family: "Open Sans"; | ||
} | } | ||
| Line 239: | Line 240: | ||
.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 245: | Line 247: | ||
} | } | ||
.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 295: | Line 298: | ||
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); | |||
} | } | ||
/* | /* | ||