refactor(CSS): make styling scoped

Allowing shorter CSS class names but mainly making it harder to
override component styling. The CSS is carefully engineered to
match any use case. Single overrides can break everything on
certain platforms or edge cases. Any layout customization should
be possible without overrides.

BREAKING CHANGE: Overriding `.qrcode-stream*` CSS classes won't
work anymore. Try to apply styling without overrides.

Author: gruhn

src/components/QrcodeStream.vue

@@ -1,10 +1,10 @@
 <template lang="html">
-  <div class="qrcode-stream">
-    <div class="qrcode-stream__inner-wrapper">
+  <div class="wrapper">
+    <div class="inside">
       <video
         ref="video"
         v-show="shouldScan"
-        class="qrcode-stream__camera"
+        class="camera"
         autoplay
         muted
         playsinline
@@ -13,15 +13,15 @@
       <canvas
         ref="pauseFrame"
         v-show="!shouldScan"
-        class="qrcode-stream__pause-frame"
+        class="pause-frame"
       ></canvas>
 
       <canvas
         ref="trackingLayer"
-        class="qrcode-stream__tracking-layer"
+        class="tracking-layer"
       ></canvas>
 
-      <div class="qrcode-stream__overlay">
+      <div class="overlay">
         <slot></slot>
       </div>
     </div>
@@ -283,32 +283,30 @@ export default {
 };
 </script>
 
-<style lang="css">
-.qrcode-stream {
+<style lang="css" scoped>
+.wrapper {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-around;
   align-items: center;
 }
 
-.qrcode-stream__inner-wrapper {
+.inside {
   position: relative;
   max-width: 100%;
   max-height: 100%;
   z-index: 0;
 }
 
-.qrcode-stream__overlay,
-.qrcode-stream__tracking-layer {
+.overlay, .tracking-layer {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
 
-.qrcode-stream__camera,
-.qrcode-stream__pause-frame {
+.camera, .pause-frame {
   display: block;
   object-fit: contain;
   max-width: 100%;