Added transition to theme switch.

assets/components/container/container.vue

@@ -73,6 +73,7 @@ export default {
     overflow: hidden;
     background: var(--background-dim);
     color: var(--text);
+    transition: background var(--theme-transition);
 }
 
 .content {

assets/components/header/filter-bar.vue

@@ -175,6 +175,7 @@ export default {
     z-index: 1;
     font-size: 0;
     box-shadow: 0 0 3px var(--darken);
+    transition: background var(--theme-transition);
 
     .icon {
         fill: var(--shadow);
@@ -205,6 +206,7 @@ export default {
     box-shadow: 0 0 2px var(--shadow-weak);
     font-size: .8rem;
     font-weight: bold;
+    transition: background var(--theme-transition), color var(--theme-transition);
 
     &:hover {
         color: var(--text);

assets/components/header/filters.vue

@@ -124,6 +124,7 @@ export default {
     font-size: .9rem;
     font-weight: bold;
     cursor: pointer;
+    transition: color var(--theme-transition);
 
     .check {
         display: none;

assets/components/header/header.vue

@@ -185,6 +185,7 @@ export default {
     color: var(--primary);
     box-shadow: 0 1px 0 var(--darken-hint);
     font-size: 0;
+    transition: background var(--theme-transition);
 }
 
 .header-nav {
@@ -253,6 +254,7 @@ export default {
     font-size: .9rem;
     font-weight: bold;
     cursor: pointer;
+    transition: color var(--theme-transition);
 
     &.active {
         color: var(--primary);

assets/components/header/search.vue

@@ -93,9 +93,11 @@ export default {
     outline: none;
     font-size: 1rem;
     outline: none;
+    transition: background var(--theme-transition), color var(--theme-transition);
 
     &::placeholder {
         color: var(--shadow);
+        transition: color var(--theme-transition);
     }
 
     &::-webkit-search-cancel-button {

assets/components/icon/icon.vue

@@ -43,6 +43,7 @@ export default {
     flex-shrink: 0;
     width: 1rem;
     height: 1rem;
+    transition: fill var(--theme-transition);
 
     svg {
         width: 100%;

assets/components/networks/networks.vue

@@ -113,6 +113,7 @@ export default {
     margin: 1rem 0;
     font-size: 1rem;
     outline: none;
+    transition: background var(--theme-transition);
 
     &:focus {
         box-shadow: 0 0 3px var(--primary);

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);

assets/components/releases/releases.vue

@@ -83,6 +83,7 @@ export default {
 .empty {
     color: var(--shadow-strong);
     font-weight: bold;
+    transition: color var(--theme-transition);
 }
 
 @media(max-width: $breakpoint4) {

assets/components/tile/release.vue

@@ -184,13 +184,14 @@ export default {
 
 .tile {
     background: var(--background);
+    height: 100%;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding: 0 0 .5rem 0;
     overflow: hidden;
-    box-shadow: 0 0 3px var(--shadow-weak);
+    box-shadow: 0 0 3px var(--darken-weak);
-    height: 100%;
+    transition: background var(--theme-transition);
 }
 
 .poster {
@@ -299,6 +300,7 @@ export default {
     line-height: 1.5;
     text-overflow: ellipsis;
     overflow: hidden;
+    transition: color var(--theme-transition);
 
     .icon {
         margin: 0 .25rem 0 0;
@@ -316,6 +318,7 @@ export default {
     overflow: hidden;
     max-height: 2.75rem;
     line-height: 1.5rem;
+    transition: color var(--theme-transition);
 }
 
 .tags {
@@ -358,6 +361,7 @@ export default {
     text-decoration: none;
     line-height: 1;
     border: solid 1px var(--shadow-hint);
+    transition: color var(--theme-transition), border-color var(--theme-transition);
 
     &:hover {
         color: var(--primary);

assets/components/tile/site.vue

@@ -47,18 +47,18 @@ export default {
 .logo {
     width: 100%;
     height: 5rem;
-    color: $text-contrast;
+    color: var(--text-contrast);
     display: flex;
     align-items: center;
     justify-content: center;
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: $logo-highlight;
+    filter: var(--logo-highlight);
 }
 
 .title {
-    color: $text;
+    color: var(--text);
     height: 100%;
     display: flex;
     align-items: center;

assets/css/_states.scss

@@ -1,3 +1,9 @@
+$breakpoint0: 540px;
+$breakpoint: 720px;
+$breakpoint2: 900px;
+$breakpoint3: 1200px;
+$breakpoint4: 1500px;
+
 .noselect {
     user-select: none;
     -webkit-user-select: none;
@@ -14,7 +20,6 @@
     li {
         display: inline-block;
         padding: 0;
-        margin: 0;
     }
 }
 

assets/css/_theme.scss

@@ -1,9 +1,6 @@
+@import 'states';
+
 /* $primary: #ff886c; */
-$breakpoint0: 540px;
-$breakpoint: 720px;
-$breakpoint2: 900px;
-$breakpoint3: 1200px;
-$breakpoint4: 1500px;
 $primary: #ff6c88;
 
 $background: #fff;
@@ -36,6 +33,8 @@ $male: #0af;
 $female: #f0a;
 
 :root {
+    --theme-transition: .5s ease;
+
     --primary: #ff6c88;
 
     --text-dark: #222;
@@ -53,8 +52,8 @@ $female: #f0a;
     --lighten-weak: rgba(255, 255, 255, .2);
     --lighten-hint: rgba(255, 255, 255, .1);
 
-    --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
+    --logo-shadow: drop-darken(1px 0 0 $darken-weak) drop-darken(-1px 0 0 $darken-weak) drop-darken(0 1px 0 $darken-weak) drop-darken(0 -1px 0 $darken-weak);
-    --logo-highlight: drop-shadow(0 0 1px $highlight);
+    --logo-highlight: drop-shadow(0 0 1px $lighten);
 
     --alert: #f00;
     --warn: #fa0;

assets/css/style.scss

@@ -1,6 +1,5 @@
 @import 'theme';
 @import 'inputs';
-@import 'states';
 @import 'tooltip';
 
 html,
@@ -28,6 +27,7 @@ body {
     padding: 0;
     margin: 0 0 1rem 0;
     font-size: 1.5rem;
+    transition: color var(--theme-transition);
 }
 
 .icon.icon-href {