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/actors/actor.vue

@@ -7,7 +7,9 @@
 
         <div class="actor-header">
             <h2 class="header-name">
-                {{ actor.name }}
+                <span v-if="actor.network">{{ actor.name }} ({{ actor.network.name }})</span>
+                <span v-else="">{{ actor.name }}</span>
+
                 <Gender
                     :gender="actor.gender"
                     class="header-gender"

assets/components/actors/actors.vue

@@ -109,8 +109,20 @@ export default {
 <style lang="scss">
 @import 'theme';
 
-.gender-link.selected .gender .icon  {
-    fill: var(--text-light);
+.gender-link {
+    &.selected .gender .icon  {
+        fill: var(--text-light);
+        filter: none;
+    }
+
+    &:hover:not(.selected) .gender .icon  {
+        fill: var(--text-light);
+    }
+
+    &:hover:not(.selected) .transsexual .icon  {
+        fill: var(--female);
+        filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+    }
 }
 </style>
 
@@ -159,7 +171,6 @@ export default {
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    padding: .2rem 0 0 0;
     margin: .25rem .5rem .25rem 0;
     color: var(--shadow);
     background: var(--background);
@@ -167,31 +178,29 @@ export default {
     text-decoration: none;
     box-shadow: 0 0 3px var(--darken-weak);
 
+    .male,
+    .female,
+    .transsexual {
+        padding: .2rem 0 0 0;
+    }
+
     .icon {
         fill: var(--shadow);
     }
 
     &:hover {
-        color: var(--primary);
+        color: var(--text-light);
         cursor: pointer;
+
+        .icon {
+            fill: var(--text-light);
+        }
     }
 
     &.selected {
         background: var(--primary);
         color: var(--text-light);
 
-        &.male {
-            background: var(--male);
-        }
-
-        &.female {
-            background: var(--female);
-        }
-
-        &.transsexual {
-            background: var(--text);
-        }
-
         &.other .icon {
             fill: var(--text-light);
         }