diff --git a/assets/components/container/container.vue b/assets/components/container/container.vue
index bec16317..e7d3a4b3 100644
--- a/assets/components/container/container.vue
+++ b/assets/components/container/container.vue
@@ -73,7 +73,6 @@ export default {
     overflow: hidden;
     background: var(--background-dim);
     color: var(--text);
-    transition: background var(--theme-transition);
 }
 
 .content {
diff --git a/assets/components/header/filter-bar.vue b/assets/components/header/filter-bar.vue
index cf6657ab..d9516015 100644
--- a/assets/components/header/filter-bar.vue
+++ b/assets/components/header/filter-bar.vue
@@ -175,7 +175,6 @@ export default {
     z-index: 1;
     font-size: 0;
     box-shadow: 0 0 3px var(--darken);
-    transition: background var(--theme-transition);
 
     .icon {
         fill: var(--shadow);
@@ -206,7 +205,6 @@ 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);
diff --git a/assets/components/header/filters.vue b/assets/components/header/filters.vue
index 20590349..b35ea3a2 100644
--- a/assets/components/header/filters.vue
+++ b/assets/components/header/filters.vue
@@ -124,7 +124,6 @@ export default {
     font-size: .9rem;
     font-weight: bold;
     cursor: pointer;
-    transition: color var(--theme-transition);
 
     .check {
         display: none;
diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index a7ce9ea8..24dce7f4 100644
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -185,7 +185,6 @@ export default {
     color: var(--primary);
     box-shadow: 0 1px 0 var(--darken-hint);
     font-size: 0;
-    transition: background var(--theme-transition);
 }
 
 .header-nav {
@@ -254,7 +253,6 @@ export default {
     font-size: .9rem;
     font-weight: bold;
     cursor: pointer;
-    transition: color var(--theme-transition);
 
     &.active {
         color: var(--primary);
diff --git a/assets/components/header/search.vue b/assets/components/header/search.vue
index 8d878923..8d14a1bd 100644
--- a/assets/components/header/search.vue
+++ b/assets/components/header/search.vue
@@ -93,11 +93,9 @@ 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 {
diff --git a/assets/components/icon/icon.vue b/assets/components/icon/icon.vue
index 1bf9d4a0..a2a6cc79 100644
--- a/assets/components/icon/icon.vue
+++ b/assets/components/icon/icon.vue
@@ -43,7 +43,6 @@ export default {
     flex-shrink: 0;
     width: 1rem;
     height: 1rem;
-    transition: fill var(--theme-transition);
 
     svg {
         width: 100%;
diff --git a/assets/components/networks/networks.vue b/assets/components/networks/networks.vue
index fde9bb59..73d7d309 100644
--- a/assets/components/networks/networks.vue
+++ b/assets/components/networks/networks.vue
@@ -113,7 +113,6 @@ export default {
     margin: 1rem 0;
     font-size: 1rem;
     outline: none;
-    transition: background var(--theme-transition);
 
     &:focus {
         box-shadow: 0 0 3px var(--primary);
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index 994b65ab..e33ff5be 100644
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -210,11 +210,24 @@
                     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';
@@ -224,8 +237,20 @@ 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 {
@@ -245,6 +270,9 @@ export default {
         pageTitle,
     },
     mounted,
+    methods: {
+        copyFilename,
+    },
 };
 </script>
 
@@ -285,7 +313,7 @@ export default {
 .details {
     background: var(--profile);
     color: var(--text-light);
-    box-shadow: 0 0 3px var(--darken-weak);
+    box-shadow: 0 0 3px var(--shadow-weak);
     cursor: default;
 
     .column {
@@ -296,7 +324,6 @@ export default {
 
     .link {
         color: var(--text-light);
-        transition: color var(--theme-transition);
     }
 }
 
@@ -358,12 +385,10 @@ 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 {
@@ -415,10 +440,9 @@ export default {
     display: inline-block;
     padding: .5rem;
     margin: 0 .25rem .25rem 0;
-    box-shadow: 0 0 2px var(--darken-weak);
+    box-shadow: 0 0 2px var(--shadow-weak);
     text-decoration: none;
     text-transform: capitalize;
-    transition: background var(--theme-transition);
 
     &:hover {
         color: var(--primary);
diff --git a/assets/components/releases/releases.vue b/assets/components/releases/releases.vue
index 19676756..81bb4f19 100644
--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@@ -83,7 +83,6 @@ export default {
 .empty {
     color: var(--shadow-strong);
     font-weight: bold;
-    transition: color var(--theme-transition);
 }
 
 @media(max-width: $breakpoint4) {
diff --git a/assets/components/tile/release.vue b/assets/components/tile/release.vue
index d877c903..62cdf8fa 100644
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -184,14 +184,13 @@ 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(--darken-weak);
-    transition: background var(--theme-transition);
+    box-shadow: 0 0 3px var(--shadow-weak);
+    height: 100%;
 }
 
 .poster {
@@ -300,7 +299,6 @@ export default {
     line-height: 1.5;
     text-overflow: ellipsis;
     overflow: hidden;
-    transition: color var(--theme-transition);
 
     .icon {
         margin: 0 .25rem 0 0;
@@ -318,7 +316,6 @@ export default {
     overflow: hidden;
     max-height: 2.75rem;
     line-height: 1.5rem;
-    transition: color var(--theme-transition);
 }
 
 .tags {
@@ -361,7 +358,6 @@ 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);
diff --git a/assets/components/tile/site.vue b/assets/components/tile/site.vue
index 8b370db6..2be37b39 100644
--- a/assets/components/tile/site.vue
+++ b/assets/components/tile/site.vue
@@ -47,18 +47,18 @@ export default {
 .logo {
     width: 100%;
     height: 5rem;
-    color: var(--text-contrast);
+    color: $text-contrast;
     display: flex;
     align-items: center;
     justify-content: center;
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: var(--logo-highlight);
+    filter: $logo-highlight;
 }
 
 .title {
-    color: var(--text);
+    color: $text;
     height: 100%;
     display: flex;
     align-items: center;
diff --git a/assets/css/_states.scss b/assets/css/_states.scss
index 44f3e2b9..2d2e35eb 100644
--- a/assets/css/_states.scss
+++ b/assets/css/_states.scss
@@ -1,9 +1,3 @@
-$breakpoint0: 540px;
-$breakpoint: 720px;
-$breakpoint2: 900px;
-$breakpoint3: 1200px;
-$breakpoint4: 1500px;
-
 .noselect {
     user-select: none;
     -webkit-user-select: none;
@@ -20,6 +14,7 @@ $breakpoint4: 1500px;
     li {
         display: inline-block;
         padding: 0;
+        margin: 0;
     }
 }
 
diff --git a/assets/css/_theme.scss b/assets/css/_theme.scss
index 8ad793e4..b4592055 100644
--- a/assets/css/_theme.scss
+++ b/assets/css/_theme.scss
@@ -1,6 +1,9 @@
-@import 'states';
-
 /* $primary: #ff886c; */
+$breakpoint0: 540px;
+$breakpoint: 720px;
+$breakpoint2: 900px;
+$breakpoint3: 1200px;
+$breakpoint4: 1500px;
 $primary: #ff6c88;
 
 $background: #fff;
@@ -33,8 +36,6 @@ $male: #0af;
 $female: #f0a;
 
 :root {
-    --theme-transition: .5s ease;
-
     --primary: #ff6c88;
 
     --text-dark: #222;
@@ -52,8 +53,8 @@ $female: #f0a;
     --lighten-weak: rgba(255, 255, 255, .2);
     --lighten-hint: rgba(255, 255, 255, .1);
 
-    --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 $lighten);
+    --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-highlight: drop-shadow(0 0 1px $highlight);
 
     --alert: #f00;
     --warn: #fa0;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index f24d0fb1..6519319b 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,5 +1,6 @@
 @import 'theme';
 @import 'inputs';
+@import 'states';
 @import 'tooltip';
 
 html,
@@ -27,7 +28,6 @@ body {
     padding: 0;
     margin: 0 0 1rem 0;
     font-size: 1.5rem;
-    transition: color var(--theme-transition);
 }
 
 .icon.icon-href {