Template:FlashEmbed/styles.css: Difference between revisions
Template page
More actions
Created page with ".ruffle-player { position: relative; } .ruffle-player .preloader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); cursor: pointer; } .ruffle-player .preloader img { max-width: 80px; margin-right: 1em; } .ruffle-player .preloader_title { font-size: 1.2em; color: #fff; } .ruffle-player .preloader_button { padding: 0.5em 1em; backgroun..." |
No edit summary |
||
| Line 1: | Line 1: | ||
.ruffle-container { | |||
position: relative; | |||
width: 100%; | |||
max-width: 800px; /* or {{{width}}} */ | |||
padding-top: 56.25%; /* aspect‐ratio box (16:9) */ | |||
background: var(--bg) center/cover no-repeat; | |||
} | |||
.ruffle-player { | .ruffle-player { | ||
position: | position: absolute; | ||
top: 0; left: 0; right: 0; bottom: 0; | |||
} | } | ||
.ruffle- | .ruffle-overlay { | ||
position: absolute; | position: absolute; | ||
top: 0; left: 0; | top: 0; left: 0; right: 0; bottom: 0; | ||
display: flex; | display: flex; | ||
flex-direction: column; | |||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
background: rgba(0,0,0,0. | background: rgba(0,0,0,0.6); | ||
color: #fff; | |||
} | } | ||
. | .preloader_title { | ||
font-size: 1.5em; | |||
margin- | margin-bottom: 0.5em; | ||
} | } | ||
. | .preloader_button { | ||
font-size: | padding: 0.75em 1.5em; | ||
font-size: 1em; | |||
background: #28a; | |||
border: none; | |||
border-radius: 0.25em; | |||
color: #fff; | color: #fff; | ||
cursor: pointer; | |||
} | } | ||
Revision as of 08:28, 25 April 2025
.ruffle-container {
position: relative;
width: 100%;
max-width: 800px; /* or {{{width}}} */
padding-top: 56.25%; /* aspect‐ratio box (16:9) */
background: var(--bg) center/cover no-repeat;
}
.ruffle-player {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.ruffle-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
color: #fff;
}
.preloader_title {
font-size: 1.5em;
margin-bottom: 0.5em;
}
.preloader_button {
padding: 0.75em 1.5em;
font-size: 1em;
background: #28a;
border: none;
border-radius: 0.25em;
color: #fff;
cursor: pointer;
}