(theatre mode): moved styling to css file

src/assets/index.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.content-container {
+    @apply flex bg-crust flex-col p-6 rounded-lg w-full text-contrast;
+  }
+  
+  .content-container-theatre {
+    @apply md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw];
+  }
+  
+  .content-container-normal {
+    @apply md:w-[70vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px];
+  }

src/components/ActionButtons.vue

@@ -5,7 +5,7 @@
           <v-icon name="md-download-round"></v-icon>
         </button>
       </a>
-      <button v-if="showTheatreMode" @click="$emit('toggleTheatreMode')" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
+      <button v-if="showTheatreMode" @click="$emit('toggleTheatreMode')" class="hidden xl:inline px-2 py-1.5 rounded-lg bg-purple">
         <v-icon name="fa-expand"></v-icon>
       </button>
       <button v-if="showShare" @click="$emit('toggleShareModal')" class="px-2 py-1.5 rounded-lg bg-purple">

src/components/TheatreModeToggle.vue

@@ -1,16 +0,0 @@
-<template>
-  <button @click="toggleTheatreMode" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
-    <v-icon name="fa-expand"></v-icon>
-  </button>
-</template>
-
-<script lang="ts">
-export default {
-  emits: ['toggle'],
-  methods: {
-    toggleTheatreMode() {
-      this.$emit('toggle')
-    }
-  }
-}
-</script>

src/views/ClipView.vue

@@ -100,10 +100,8 @@ export default {
     <VueTitle :title=" 'Clip - ' + data.title"></VueTitle>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
+        'content-container',
-        isTheatreMode 
+        isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
-          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
-          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
       ]"
     >
       <div class="w-full mx-auto rounded-lg mb-5">

src/views/UserView.vue

@@ -110,10 +110,8 @@ export default {
     <vue-title :title="data.username"></vue-title>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
+        'content-container',
-        isTheatreMode 
+        isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
-          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
-          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
       ]"
     >
       <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">

src/views/VodView.vue

@@ -105,10 +105,8 @@ export default {
     <vue-title :title="'VOD - ' + data.title"></vue-title>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
+        'content-container',
-        isTheatreMode 
+        isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
-          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
-          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
       ]"
     >
       <div class="w-full mx-auto rounded-lg mb-5">