fix(styles): fix styling

Author: dvcol

src/components/web/AppWeb.ce.vue

@@ -5,15 +5,15 @@ const AppView = lazyComponent(() => import('~/components/AppView.vue'));
 </script>
 
 <template>
-  <div id="app">
+  <div id="trakt-extension-root">
     <AppView />
   </div>
 </template>
 
 <style lang="scss">
 @import '~/styles/base.css';
 
-#app {
+:host {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;

src/index.html

@@ -12,27 +12,28 @@
 </html>
 
 <style>
-    body {
-        display: flex;
-        margin: 0;
-        background: #181818;
-        transition:
-                color 0.5s,
-                background-color 0.5s;
-        will-change: color, background-color;
+  body {
+    display: flex;
+    margin: 0;
+    color: rgb(235 235 235 / 64%);
+    background: #181818;
+    transition:
+      color 0.5s,
+      background-color 0.5s;
+    will-change: color, background-color;
 
-        @media (prefers-color-scheme: light) {
-            background: #fff;
-        }
-
-        @media (prefers-color-scheme: dark) {
-            background: #181818;
-        }
+    @media (prefers-color-scheme: light) {
+      background: #fff;
     }
 
-    wc-trakt-extension {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
+    @media (prefers-color-scheme: dark) {
+      background: #181818;
     }
-</style>
+  }
+
+  wc-trakt-extension {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+</style>

src/styles/base.css

@@ -1,5 +1,5 @@
 /* color palette from <https://github.com/vuejs/theme> */
-#app {
+:host {
   --vt-c-white: #fff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
@@ -17,14 +17,14 @@
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
 
   /* semantic color variables for this project */
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
   --section-gap: 160px;
+  --color-background: var(--vt-c-black);
+  --color-background-soft: var(--vt-c-black-soft);
+  --color-background-mute: var(--vt-c-black-mute);
+  --color-border: var(--vt-c-divider-dark-2);
+  --color-border-hover: var(--vt-c-divider-dark-1);
+  --color-heading: var(--vt-c-text-dark-1);
+  --color-text: var(--vt-c-text-dark-2);
 
   @media (prefers-color-scheme: dark) {
     --color-background: var(--vt-c-black);
@@ -35,5 +35,15 @@
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2)
   }
+  
+  @media (prefers-color-scheme: light) {
+    --color-background: var(--vt-c-white);
+    --color-background-soft: var(--vt-c-white-soft);
+    --color-background-mute: var(--vt-c-white-mute);
+    --color-border: var(--vt-c-divider-light-2);
+    --color-border-hover: var(--vt-c-divider-light-1);
+    --color-heading: var(--vt-c-text-light-1);
+    --color-text: var(--vt-c-text-light-1);
+  }
 }
 

src/views/options/index.html

@@ -15,18 +15,19 @@
   body {
     display: flex;
     margin: 0;
+    color: rgb(235 235 235 / 64%);
     background: #181818;
     transition:
-            color 0.5s,
-            background-color 0.5s;
+      color 0.5s,
+      background-color 0.5s;
     will-change: color, background-color;
 
     @media (prefers-color-scheme: light) {
-        background: #fff;
+      background: #fff;
     }
 
     @media (prefers-color-scheme: dark) {
-        background: #181818;
+      background: #181818;
     }
   }
 

src/views/popup/index.html

@@ -23,14 +23,15 @@
 <style>
   body {
     margin: 0;
+    color: rgb(235 235 235 / 64%);
     font-size: 1rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
     background: #181818;
     transition:
       color 0.5s,
       background-color 0.5s;
     will-change: color, background-color;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
     @media (prefers-color-scheme: light) {
       background: #fff;
@@ -48,6 +49,7 @@
   }
 
   #app-popup {
+    display: flex;
     width: 45rem;
     max-width: 800px;
     height: 37rem;