MediaWiki:Common.css: Difference between revisions
Styles for Training materials upload |
Styles for Internet Archive interview embeds |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 974: | Line 974: | ||
padding: 0.35em 0.5em; | padding: 0.35em 0.5em; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | |||
.camp-manual-progress { | |||
margin: 0.65em 0 0.25em; | |||
max-width: 28em; | |||
} | |||
.camp-manual-progress[hidden] { | |||
display: none !important; | |||
} | |||
.camp-manual-progress-bar { | |||
height: 0.65em; | |||
background: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 2px; | |||
overflow: hidden; | |||
} | |||
.camp-manual-progress-fill { | |||
height: 100%; | |||
width: 0%; | |||
background: #3366cc; | |||
transition: width 0.15s linear; | |||
} | |||
.camp-manual-progress.is-indeterminate .camp-manual-progress-fill { | |||
width: 35% !important; | |||
animation: camp-manual-progress-pulse 1.1s ease-in-out infinite; | |||
} | |||
@keyframes camp-manual-progress-pulse { | |||
0% { transform: translateX(-40%); } | |||
100% { transform: translateX(220%); } | |||
} | |||
.camp-manual-progress-label { | |||
margin: 0.35em 0 0; | |||
font-size: 90%; | |||
color: #54595d; | |||
} | |||
.camp-manual-lib-actions { | |||
display: inline-flex; | |||
gap: 0.35em; | |||
margin-left: 0.5em; | |||
vertical-align: middle; | |||
} | |||
.camp-manual-lib-actions button { | |||
font-size: 85%; | |||
padding: 0.1em 0.45em; | |||
line-height: 1.3; | |||
cursor: pointer; | |||
} | |||
.camp-manual-lib-actions .camp-manual-lib-delete { | |||
color: #ba0000; | |||
} | } | ||
| Line 2,078: | Line 2,136: | ||
color: #54595d; | color: #54595d; | ||
font-size: 92%; | font-size: 92%; | ||
} | |||
/* SoundCloud audio embeds (interview watchlist) */ | |||
.sc-embed { | |||
position: relative; | |||
margin: 0.75em 0 0.5em; | |||
max-width: 640px; | |||
background: #1a1a1a; | |||
} | |||
.sc-embed-poster, | |||
.sc-embed.sc-embed-playing { | |||
aspect-ratio: 16 / 9; | |||
width: 100%; | |||
background: linear-gradient(145deg, #2b2b2b 0%, #111 55%, #3a1a0a 100%); | |||
} | |||
.sc-embed-poster { | |||
position: relative; | |||
cursor: pointer; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin: 0; | |||
padding: 0; | |||
border: 0; | |||
} | |||
.sc-embed-play { | |||
display: flex; | |||
align-items: center; | |||
gap: 0.45em; | |||
padding: 0.45em 0.9em 0.45em 0.6em; | |||
border: 0; | |||
border-radius: 4px; | |||
background: #ff5500; | |||
color: #fff; | |||
font: inherit; | |||
font-weight: 600; | |||
cursor: pointer; | |||
} | |||
.sc-embed-play-icon { | |||
width: 0; | |||
height: 0; | |||
border-style: solid; | |||
border-width: 8px 0 8px 14px; | |||
border-color: transparent transparent transparent #fff; | |||
} | |||
.sc-embed-playing { | |||
background: #111; | |||
} | |||
.sc-embed-frame { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
border: 0; | |||
} | |||
.sc-embed-fallback { | |||
margin: 0.5em 0 0; | |||
font-size: 95%; | |||
} | |||
/* Aviary (Milken Archive et al.) audio/video embeds */ | |||
.aviary-embed { | |||
position: relative; | |||
margin: 0.75em 0 0.5em; | |||
max-width: 720px; | |||
background: #1a1a1a; | |||
} | |||
.aviary-embed-poster, | |||
.aviary-embed.aviary-embed-playing { | |||
aspect-ratio: 16 / 10; | |||
width: 100%; | |||
background: linear-gradient(145deg, #1e2a3a 0%, #111820 55%, #0a2030 100%); | |||
} | |||
.aviary-embed-poster { | |||
position: relative; | |||
cursor: pointer; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin: 0; | |||
padding: 0; | |||
border: 0; | |||
} | |||
.aviary-embed-play { | |||
display: flex; | |||
align-items: center; | |||
gap: 0.45em; | |||
padding: 0.45em 0.9em 0.45em 0.6em; | |||
border: 0; | |||
border-radius: 4px; | |||
background: #2f6fed; | |||
color: #fff; | |||
font: inherit; | |||
font-weight: 600; | |||
cursor: pointer; | |||
} | |||
.aviary-embed-play-icon { | |||
width: 0; | |||
height: 0; | |||
border-style: solid; | |||
border-width: 8px 0 8px 14px; | |||
border-color: transparent transparent transparent #fff; | |||
} | |||
.aviary-embed-playing { | |||
background: #111; | |||
} | |||
.aviary-embed-frame { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
border: 0; | |||
} | |||
.aviary-embed-fallback { | |||
margin: 0.5em 0 0; | |||
font-size: 95%; | |||
} | |||
/* Internet Archive embeds (Yiddish Book Center oral histories et al.) */ | |||
.ia-embed { | |||
position: relative; | |||
margin: 0.75em 0 0.5em; | |||
max-width: 720px; | |||
background: #1a1a1a; | |||
} | |||
.ia-embed-poster, | |||
.ia-embed.ia-embed-playing { | |||
aspect-ratio: 16 / 9; | |||
width: 100%; | |||
background: linear-gradient(145deg, #2b2b2b 0%, #111 55%, #1a2a3a 100%); | |||
} | |||
.ia-embed-poster { | |||
position: relative; | |||
cursor: pointer; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin: 0; | |||
padding: 0; | |||
border: 0; | |||
} | |||
.ia-embed-play { | |||
display: flex; | |||
align-items: center; | |||
gap: 0.45em; | |||
padding: 0.45em 0.9em 0.45em 0.6em; | |||
border: 0; | |||
border-radius: 4px; | |||
background: #2c5aa0; | |||
color: #fff; | |||
font: inherit; | |||
font-weight: 600; | |||
cursor: pointer; | |||
} | |||
.ia-embed-play-icon { | |||
width: 0; | |||
height: 0; | |||
border-style: solid; | |||
border-width: 8px 0 8px 14px; | |||
border-color: transparent transparent transparent #fff; | |||
} | |||
.ia-embed-playing { | |||
background: #111; | |||
} | |||
.ia-embed-frame { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
border: 0; | |||
} | |||
.ia-embed-fallback { | |||
margin: 0.5em 0 0; | |||
font-size: 95%; | |||
} | } | ||