Use :deep instead of global css

src/components/frame/Folder.vue

@@ -6,7 +6,7 @@
     }"
     :to="target">
         <div class="big-icon fill-block">
-            <FolderIcon class="memories__big-folder-icon" />
+            <FolderIcon class="icon" />
             <div class="name">{{ data.name }}</div>
         </div>
 
@@ -110,13 +110,6 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
 }
 </script>
 
-<style lang="scss">
-/* This cannot be scoped for some reason */
-.memories__big-folder-icon > .material-design-icon__svg {
-    width: 50%; height: 50%;
-}
-</style>
-
 <style lang="scss" scoped>
 .folder {
     cursor: pointer;
@@ -129,6 +122,10 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
     top: 0; left: 0;
     transition: opacity 0.2s ease-in-out;
 
+    :deep .material-design-icon__svg {
+        width: 50%; height: 50%;
+    }
+
     > .name {
         cursor: pointer;
         width: 100%;

src/components/modal/EditDate.vue

@@ -19,7 +19,7 @@
             </span>
             {{ longDateStr }}
 
-            <div class="fields memories__editdate__fields">
+            <div class="fields">
                 <NcTextField :value.sync="year"
                     class="field"
                     @input="newestChange()"
@@ -53,7 +53,7 @@
                 </span>
                 {{ longDateStrLast }}
 
-                <div class="fields memories__editdate__fields">
+                <div class="fields">
                     <NcTextField :value.sync="yearLast"
                         class="field"
                         :label="t('memories', 'Year')" :label-visible="true"
@@ -400,6 +400,12 @@ export default class EditDate extends Mixins(GlobalMixin) {
         width: 4.1em;
         display: inline-block;
     }
+
+    :deep label {
+        font-size: 0.8em;
+        padding: 0 !important;
+        padding-left: 3px !important;
+    }
 }
 
 .oldest {
@@ -417,11 +423,3 @@ export default class EditDate extends Mixins(GlobalMixin) {
     }
 }
 </style>
-
-<style lang="scss">
-.memories__editdate__fields label {
-    font-size: 0.8em;
-    padding: 0 !important;
-    padding-left: 3px !important;
-}
-</style>

src/components/modal/Modal.vue

@@ -10,7 +10,7 @@
 
             <slot></slot>
 
-            <div class="memories__modal__buttons">
+            <div class="buttons">
                 <slot name="buttons"></slot>
             </div>
         </div>
@@ -41,16 +41,14 @@ export default class Modal extends Vue {
     .head {
         font-weight: 500;
     }
-}
-</style>
 
-<style lang="scss">
+    :deep .buttons {
-.memories__modal__buttons {
         margin-top: 10px;
         text-align: right;
 
         > button {
             display: inline-block !important;
         }
+    }
 }
 </style>

src/components/top-matter/OnThisDay.vue

@@ -11,7 +11,7 @@
             </div>
         </div>
 
-        <div class="left-btn dir-btn memories__onthisday__btn" v-if="hasLeft">
+        <div class="left-btn dir-btn" v-if="hasLeft">
             <NcActions>
                 <NcActionButton
                     :aria-label="t('memories', 'Move left')"
@@ -21,7 +21,7 @@
                 </NcActionButton>
             </NcActions>
         </div>
-        <div class="right-btn dir-btn memories__onthisday__btn" v-if="hasRight">
+        <div class="right-btn dir-btn" v-if="hasRight">
             <NcActions>
                 <NcActionButton
                     :aria-label="t('memories', 'Move right')"
@@ -211,6 +211,12 @@ $mobHeight: 150px;
         border-radius: 10px;
     }
 
+    :deep .dir-btn button {
+        transform: scale(0.6);
+        box-shadow: var(--color-main-text) 0 0 3px 0 !important;
+        background-color: var(--color-main-background) !important;
+    }
+
     .left-btn {
         position: absolute;
         top: 50%; left: 0;
@@ -281,11 +287,3 @@ $mobHeight: 150px;
     }
 }
 </style>
-
-<style lang="scss">
-.memories__onthisday__btn button {
-    transform: scale(0.6);
-    box-shadow: var(--color-main-text) 0 0 3px 0 !important;
-    background-color: var(--color-main-background) !important;
-}
-</style>