Added transition to theme switch.

assets/components/releases/release.vue

@@ -210,24 +210,11 @@
                     class="link added"
                 >{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
             </span>
-
-            <div class="row">
-                <Icon icon="paste2" />
-
-                <input
-                    class="filename"
-                    :value="filename"
-                    @focus="copyFilename"
-                >
-            </div>
         </div>
     </div>
 </template>
 
 <script>
-import config from 'config';
-import format from 'template-format';
-
 import Banner from './banner.vue';
 import Actor from '../tile/actor.vue';
 import Release from '../tile/release.vue';
@@ -237,20 +224,8 @@ function pageTitle() {
     return this.release && this.release.title;
 }
 
-function copyFilename(event) {
-    event.target.setSelectionRange(0, event.target.value.length);
-    document.execCommand('copy');
-}
-
 async function mounted() {
     this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
-    this.filename = format(config.filename.pattern, {
-        ...this.release,
-        shootId: this.release.shootId || '',
-        date: this.formatDate(this.release.date, config.filename.date),
-    }, {
-        spreadSeparator: config.filename.separator,
-    });
 }
 
 export default {
@@ -270,9 +245,6 @@ export default {
         pageTitle,
     },
     mounted,
-    methods: {
-        copyFilename,
-    },
 };
 </script>
 
@@ -313,7 +285,7 @@ export default {
 .details {
     background: var(--profile);
     color: var(--text-light);
-    box-shadow: 0 0 3px var(--shadow-weak);
+    box-shadow: 0 0 3px var(--darken-weak);
     cursor: default;
 
     .column {
@@ -324,6 +296,7 @@ export default {
 
     .link {
         color: var(--text-light);
+        transition: color var(--theme-transition);
     }
 }
 
@@ -385,10 +358,12 @@ export default {
 
 .title {
     margin: 0 0 1.5rem 0;
+    transition: color var(--theme-transition);
 }
 
 .description {
     line-height: 1.5;
+    transition: color var(--theme-transition);
 }
 
 .duration {
@@ -440,9 +415,10 @@ export default {
     display: inline-block;
     padding: .5rem;
     margin: 0 .25rem .25rem 0;
-    box-shadow: 0 0 2px var(--shadow-weak);
+    box-shadow: 0 0 2px var(--darken-weak);
     text-decoration: none;
     text-transform: capitalize;
+    transition: background var(--theme-transition);
 
     &:hover {
         color: var(--primary);