fix: moved component style to component file

Author: technikhil314

pages/diff/_diff.vue

@@ -167,11 +167,49 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .copy-uri-button:hover {
   @apply shadow-lg;
+  svg {
+    @apply scale-110 rotate-12;
+  }
 }
-.copy-uri-button:hover svg {
-  @apply scale-110 rotate-12;
+
+/* line numbers in diff view */
+.line-numbers {
+  counter-reset: line-numbers;
+  @apply relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: calc(var(--max-line-number-characher) + 4px);
+    @apply bg-gray-100;
+  }
+  p {
+    padding-left: calc(var(--max-line-number-characher) - 4px);
+    @apply relative;
+    &:hover {
+      @apply bg-gray-200;
+    }
+    &::before {
+      counter-increment: line-numbers;
+      content: counter(line-numbers);
+      width: calc(var(--max-line-number-characher) + 4px);
+      @apply absolute left-0 top-0 -mx-4 bottom-0 text-center bg-gray-200 text-gray-500 flex justify-center items-center text-sm;
+    }
+    &:first-of-type {
+      &::before {
+        @apply -mt-2 pt-2;
+      }
+    }
+    &:last-of-type {
+      &::before {
+        @apply -mb-2 pb-2;
+      }
+    }
+  }
 }
 </style>

static/global.scss

@@ -29,41 +29,3 @@ main {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
-
-/* line numbers in diff view */
-.line-numbers {
-  counter-reset: line-numbers;
-  @apply relative;
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: calc(var(--max-line-number-characher) + 4px);
-    @apply bg-gray-100;
-  }
-  p {
-    padding-left: calc(var(--max-line-number-characher) - 4px);
-    @apply relative;
-    &:first-of-type {
-      &::before {
-        @apply -mt-2 pt-2;
-      }
-    }
-    &:last-of-type {
-      &::before {
-        @apply -mb-2 pb-2;
-      }
-    }
-    &:hover {
-      @apply bg-gray-200;
-    }
-    &::before {
-      counter-increment: line-numbers;
-      content: counter(line-numbers);
-      width: calc(var(--max-line-number-characher) + 4px);
-      @apply absolute left-0 top-0 -mx-4 bottom-0 text-center bg-gray-200 text-gray-500 flex justify-center items-center text-sm;
-    }
-  }
-}