Merge pull request #180 from zusorio/update-ow2-defaults

Update some CSS defaults for Overwatch 2
slmnio · Apr 17, 2023 · a4904d3 · a4904d3
2 parents 43c22d2 + a4e2cdb
commit a4904d3
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 21 deletions.
diff --git a/website/src/components/broadcast/IngameTeam.vue b/website/src/components/broadcast/IngameTeam.vue
@@ -163,7 +163,7 @@ export default {
             return resizedImage(this._theme, ["small_logo", "default_logo"], "h-80");
         },
         teamWidth() {
-            return this.width || 690;
+            return this.width || 567;
         },
         teamWidthCSS() {
             if (!this.teamWidth) return {};
@@ -338,13 +338,13 @@ export default {
         margin: 0 12px 0 0;
     }
     .team-name {
-        margin: 0 12px 0 20px;
+        margin: 0 12px 0 24px;
     }
     .ingame-team-holder.right .team-logo-holder {
         margin: 0 0 0 12px;
     }
     .ingame-team-holder.right .team-name {
-        margin: 0 20px 0 12px;
+        margin: 0 24px 0 12px;
     }
 
     .team-logo {

diff --git a/website/src/components/broadcast/Middle.vue b/website/src/components/broadcast/Middle.vue
@@ -1,18 +1,17 @@
 <template>
-        <div class="centerer">
-            <div class="middle-holder flex-center">
-                <div class="middle">{{ text }}</div>
+    <div class="centerer" :class="{'tiny': tiny}">
+        <div class="middle-holder flex-center">
+            <div class="middle">
+                <div class="industry-align">{{ text }}</div>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
 export default {
     name: "Middle",
-    props: ["text"],
-    mounted() {
-        console.log("midd");
-    }
+    props: ["text", "tiny"]
 };
 </script>
 
@@ -22,8 +21,9 @@ export default {
     width: 100%;
     display: flex;
     justify-content: center;
-    top: 8px;
+    top: -12px;
     pointer-events: none;
+    transition: all .2s ease-in-out;
 }
 
 .middle-holder {
@@ -37,7 +37,10 @@ export default {
     color: white;
     padding: .0em .5em;
     font-size: 24px;
+    text-transform: uppercase;
     display: inline-flex;
+    border-radius: 4px;
+    transition: all .2s ease-in-out;
 }
 
 .mid-leave-active,
@@ -48,4 +51,15 @@ export default {
 
 .mid-enter-to .middle-holder, .mid-leave .middle-holder { width: 450px; }
 .mid-enter .middle-holder, .mid-leave-to .middle-holder { width: 0; }
+
+
+.centerer.tiny {
+    top: 3px;
+}
+.centerer.tiny .middle {
+    font-size: 20px;
+    padding: 0 .5em;
+    line-height: 1.2em;
+}
+
 </style>
diff --git a/website/src/components/broadcast/cams/CamOverlay.vue b/website/src/components/broadcast/cams/CamOverlay.vue
@@ -149,19 +149,18 @@ export default {
 <style scoped>
     .guest {
         position: absolute;
-        bottom: 123px;
-        left: 494px;
+        bottom: 222px;
+        left: 160px;
         height: 151px;
-        width: 220px;
-        transform: rotate(-4deg) skewX(-16.5deg);
-        border-radius: 4px;
+        width: 249px;
+        transform: rotate(-3.7deg) skewX(357deg);
+        border-radius: 8px;
         overflow: hidden;
         border-bottom: 6px solid transparent;
     }
     .guest >>> .caster-cam-wrapper {
-        transform: skewX(12.5deg) translateX(-15px) rotate(4deg) scale(1.1);
         height: 100%;
-        width: calc(100% + 30px);
+        width: 100%;
     }
     .cam-overlay {
         /* Margin: 0.5 */

diff --git a/website/src/components/broadcast/cams/TeamCamsGroup.vue b/website/src/components/broadcast/cams/TeamCamsGroup.vue
@@ -64,7 +64,7 @@ export default {
         overflow: hidden;
     }
     .team-guests .guest {
-        width: calc((100% / 6) - 4px);
+        width: calc((100% / 5) - 4px);
         margin: 0 2px;
         --caster-width: 375px;
     }

diff --git a/website/src/components/broadcast/roots/IngameOverlay.vue b/website/src/components/broadcast/roots/IngameOverlay.vue
@@ -8,9 +8,8 @@
           </transition-group>
 
           <transition name="mid" mode="out-in">
-              <Middle v-if="shouldShowMiddle" :text="middleText" :key="middleText" />
+              <Middle v-if="shouldShowMiddle" :text="middleText" :key="middleText" :tiny="broadcast.margin === 0" />
           </transition>
-
       </div>
       <transition name="fade" mode="out-in">
           {{ fadeSponsors }}
@@ -206,6 +205,16 @@ export default {
     /* Margin: 0.5 4v4 */
     /*background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/841443615557287956/ScreenShot_21-05-10_23-36-13-000.jpg");*/
     /*background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/974757857188794378/unknown.png);*/
+
+    /* Overwatch 2 */
+    /* Margin: 0.0 */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097643734834872471/escort-0-active.jpg"); */
+
+    /* Margin: 0.5 */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641564580368414/escort-pre-countdown.jpg"); */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641565381480479/escort-active.jpg"); */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641565100453978/control-pre-countdown.jpg"); */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641564852994169/control-capped.jpg"); */
     background-size: contain;
     position: absolute;
     width: 100%;