Template:FlashEmbed/styles.css: Difference between revisions

Latest revision as of 04:28, 26 April 2025

ruffle-player, ruffle-embed, ruffle-object {
    --splash-screen-background: #338CCC;
    --logo-display: block;
    border-spacing: 3px;
    box-shadow: 0 6px 6px 1px rgba(0, 0, 0, 0.04), 0 12px 14px 8px rgba(0, 0, 0, 0.0575);
    border-radius: var(--border-radius-large);
        }

@@ Line 1: / Line 1: @@
-.ruffle-container {
+ruffle-player, ruffle-embed, ruffle-object {
-  position: relative;
+    --splash-screen-background: #338CCC;
-  width: 100%;
+    --logo-display: block;
-  max-width: 800px;           /* or {{{width}}} */
+    border-spacing: 3px;
-  padding-top: 56.25%;        /* aspect‐ratio box (16:9) */
+    box-shadow: 0 6px 6px 1px rgba(0, 0, 0, 0.04), 0 12px 14px 8px rgba(0, 0, 0, 0.0575);
-  background: var(--bg) center/cover no-repeat;
+    border-radius: var(--border-radius-large);
-}
+        }
-.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;
-}