8,290
edits
m (revert temporary CSS fix) |
(add qud infobox image animation css) |
||
Line 140: | Line 140: | ||
.qud-image:hover { | .qud-image:hover { | ||
background: #0f3b3a; | background: #0f3b3a; | ||
} | |||
/* | |||
* QUD INFOBOX - PNG/GIF ANIMATOR | |||
* ============================== | |||
*/ | |||
.qud-animated-image-wrap { | |||
position: relative; | |||
} | |||
.qud-animated-image-wrap .qud-toggle-for-gif { | |||
position: absolute; | |||
top: 4px; | |||
right: 4px; | |||
font-size: 11px; | |||
font-family: "Open Sans"; | |||
} | |||
.qud-toggle-for-gif { | |||
display: flex; | |||
justify-content: center; | |||
} | |||
.qud-initial-animate-btn { | |||
transition: all 0.5s ease-out; | |||
display: inline-block; | |||
text-align: center; | |||
background-color: var(--qud-color-k-dark); | |||
padding: 0px 4px 2px 4px; | |||
border-radius: 3px; | |||
opacity: 0.8; | |||
} | |||
.qud-initial-animate-btn:hover { | |||
cursor: pointer; | |||
background-color: var(--qud-color-k); | |||
color: #fff; | |||
} | |||
.qud-animate-ctrl-down::before { | |||
display: inline-block; | |||
font-style: normal; | |||
font-variant: normal; | |||
text-rendering: auto; | |||
-webkit-font-smoothing: antialiased; | |||
font-family: 'FontAwesome','Font Awesome 5 Free'; | |||
font-weight: 900; | |||
content: "\f0d7"; | |||
margin-left: 5px; | |||
} | |||
.qud-infobox-animated-image { | |||
height: 360px; /* extra room to hold gif-play-controls */ | |||
} | |||
.gif-play-controls { | |||
font-weight: 700; | |||
padding-bottom: 10px; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
color: var(--qud-color-y); | |||
} | |||
.gif-play-controls .play-pause-btn { | |||
font-size: 2em; | |||
} | |||
.gif-play-controls .play-pause-lbl { | |||
line-height: 2em; | |||
} | |||
.gif-play-controls .play-pause-warning { | |||
font-size: 14px; | |||
font-weight: normal; | |||
font-family: "Open Sans"; | |||
padding: 0 10px; | |||
color: #1c6362; /* slightly brighter than qud-color-k */ | |||
height: 3.6em; | |||
line-height: 1.2em; | |||
} | |||
.gif-play-controls .play-pause-btn::before { | |||
display: inline-block; | |||
font-style: normal; | |||
font-variant: normal; | |||
text-rendering: auto; | |||
-webkit-font-smoothing: antialiased; | |||
font-family: 'FontAwesome','Font Awesome 5 Free'; | |||
font-weight: 900; | |||
content: "\f144"; /* play icon */ | |||
} | |||
.qud-html-summary.qud-html-summary-open | |||
.gif-play-controls | |||
.play-pause-btn::before { | |||
content: "\f28b"; /* pause icon */ | |||
} | |||
.qud-infobox-animated-image-initial, | |||
.qud-infobox-animated-image { | |||
display: inline-block; | |||
position: relative; | |||
width: 100%; | |||
} | |||
.qud-infobox-animated-image-initial img, | |||
.qud-infobox-animated-image img { | |||
width: 150px; | |||
} | |||
.qud-infobox-animated-image .qud-html-summary { | |||
/* the summary element acts as a clickable area over the entire object */ | |||
cursor: pointer; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
left: 0; | |||
bottom: 0; | |||
z-index: 2; | |||
background: transparent; | |||
} | |||
/* for blink/webkit */ | |||
.qud-infobox-animated-image details .qud-html-summary::-webkit-details-marker { | |||
display: none; | |||
} | |||
/* for firefox */ | |||
.qud-infobox-animated-image details > .qud-html-summary:first-of-type { | |||
list-style: none; | |||
} | |||
.qud-infobox-animated-image .qud-html-summary + * { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
overflow-y: auto; | |||
} | |||
.qud-infobox-animated-image .qud-html-summary + * a { | |||
color: #fff; /* unsure if this style is used */ | |||
} | |||
.qud-infobox-animated-image .qud-html-summary:focus { | |||
outline: transparent; /* suppress outline when clicked */ | |||
} | |||
.qud-infobox-animated-image .qud-html-details .animated-image { | |||
text-align: center; | |||
} | |||
.qud-infobox-animated-image .qud-html-details .animated-image img { | |||
display: inline-block; | |||
overflow: visible; | |||
} | |||
.qud-html-summary + * { | |||
z-index: -1; | |||
display: none; | |||
} | |||
.qud-html-summary-open + * { | |||
z-index: 1; | |||
display: unset; | |||
} | } | ||
/* | /* |