Added actor assignment to new actors module. Showing network icon on network-specific actors. Improved dark theme. Changed tag tile design. Added Digital Playground logos.

assets/components/releases/release.vue

@@ -246,6 +246,7 @@ 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,
@@ -287,8 +288,8 @@ export default {
 
 .info {
     padding: 1rem;
-    border-left: solid 1px $shadow-hint;
-    border-right: solid 1px $shadow-hint;
+    border-left: solid 1px var(--shadow-hint);
+    border-right: solid 1px var(--shadow-hint);
     flex-grow: 1;
 }
 
@@ -304,15 +305,15 @@ export default {
     .icon {
         display: inline-block;
         width: 1rem;
-        fill: $shadow-strong;
+        fill: var(--shadow-strong);
         margin: 0 1rem 0 0;
     }
 }
 
 .details {
-    background: $profile;
-    color: $text-contrast;
-    box-shadow: 0 0 3px $shadow-weak;
+    background: var(--profile);
+    color: var(--text-light);
+    box-shadow: 0 0 3px var(--shadow-weak);
     cursor: default;
 
     .column {
@@ -322,7 +323,7 @@ export default {
     }
 
     .link {
-        color: $text-contrast;
+        color: var(--text-light);
     }
 }
 
@@ -331,11 +332,11 @@ export default {
     height: 100%;
 
     &:not(:last-child) {
-        border-right: solid 1px $highlight-hint;
+        border-right: solid 1px var(--lighten-hint);
     }
 
     .icon {
-        fill: $highlight-weak;
+        fill: var(--lighten-weak);
         margin: 0 .25rem 0 0;
     }
 
@@ -359,7 +360,6 @@ export default {
 
 .logo {
     display: inline-block;
-    filter: $logo-highlight;
 }
 
 .logo-site {
@@ -377,7 +377,7 @@ export default {
 }
 
 .chain {
-    color: $highlight;
+    color: var(--lighten);
     padding: 0 .5rem;
     font-weight: bold;
     font-size: .8rem;
@@ -388,7 +388,7 @@ export default {
 }
 
 .description {
-    line-height: 1.25;
+    line-height: 1.5;
 }
 
 .duration {
@@ -416,34 +416,36 @@ export default {
 .filename {
     width: 100%;
     padding: .5rem;
-    border: solid 1px $shadow-weak;
+    color: var(--text);
+    border: solid 1px var(--shadow-weak);
+    background: var(--background);
 }
 
 .link {
     display: inline-block;
-    color: $link;
+    color: var(--link);
     text-decoration: none;
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
 
         .icon {
-            fill: $primary;
+            fill: var(--primary);
         }
     }
 }
 
 .tag .link {
-    background: $background;
+    background: var(--background);
     display: inline-block;
     padding: .5rem;
     margin: 0 .25rem .25rem 0;
-    box-shadow: 0 0 2px $shadow-weak;
+    box-shadow: 0 0 2px var(--shadow-weak);
     text-decoration: none;
     text-transform: capitalize;
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }