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

@@ -8,8 +8,21 @@
             class="link"
         >
             <span
+                v-if="actor.network"
+                v-tooltip.top="`${actor.name} (${actor.network.name})`"
+                class="handle"
+            >
+                <img
+                    :src="`/img/logos/${actor.network.slug}/favicon.png`"
+                    class="favicon"
+                >
+                <span class="name">{{ actor.name }}</span>
+            </span>
+
+            <span
+                v-else
                 v-tooltip.top="actor.name"
-                class="name"
+                class="handle name"
             >{{ actor.name }}</span>
 
             <div class="avatar-container">
@@ -89,28 +102,54 @@ export default {
 
 .actor {
     width: 100%;
-    background: $background;
     display: inline-block;
     margin: 0 .5rem .5rem 0;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--darken-weak);
+    background: var(--profile);
 }
 
 .link {
-    color: $text;
+    color: var(--text-light);
     text-decoration: none;
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
 
+.handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5rem;
+    font-weight: bold;
+}
+
+.favicon {
+    width: 1rem;
+    height: 1rem;
+    margin: 0 .5rem 0 0;
+
+    & + .name {
+        padding: 0 1rem 0 0;
+    }
+}
+
+.name {
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
 .avatar-container {
     position: relative;
 }
 
 .avatar {
-    color: $shadow-weak;
-    background: $shadow-hint;
+    color: var(--darken-weak);
+    background: var(--darken-hint);
     height: 13rem;
     width: 100%;
     display: flex;
@@ -123,12 +162,12 @@ export default {
 .avatar-fallback {
     max-height: 75%;
     max-width: 80%;
-    opacity: .1;
+    opacity: .5;
 }
 
 .details {
-    background: $shadow;
-    color: $text-contrast;
+    background: var(--darken);
+    color: var(--text-light);
     width: 100%;
     height: 1.75rem;
     display: flex;
@@ -156,16 +195,6 @@ export default {
 }
 
 .age-then {
-    color: $highlight;
-}
-
-.name {
-    display: block;
-    padding: .5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-    font-weight: bold;
+    color: var(--lighten);
 }
 </style>

assets/components/tile/release.vue

@@ -216,9 +216,8 @@ export default {
     object-fit: cover;
     background-position: center;
     background-size: cover;
-    background-color: var(--shadow-hint);
+    background-color: var(--darken-hint);
     color: var(--shadow);
-    text-shadow: 1px 1px 0 var(--highlight);
 }
 
 .row {

assets/components/tile/tag.vue

@@ -4,14 +4,14 @@
         :title="tag.name"
         class="tile"
     >
+        <span class="title">{{ tag.name }}</span>
+
         <img
             v-if="tag.poster"
             :src="sfw ? `/img/${tag.poster.sfw.thumbnail}` : `/img/${tag.poster.thumbnail}`"
             :alt="tag.name"
             class="poster"
         >
-
-        <span class="title">{{ tag.name }}</span>
     </router-link>
 </template>
 
@@ -44,6 +44,7 @@ export default {
     align-items: left;
     justify-content: flex-end;
     box-sizing: border-box;
+    position: relative;
     text-align: center;
     text-decoration: none;
     box-shadow: inset 0 0 3px var(--darken);
@@ -51,16 +52,23 @@ export default {
 
 .poster {
     width: 100%;
-    height: 14rem;
+    height: 16rem;
     object-fit: cover;
-    box-shadow: 0 0 3px var(--darken);
+    object-position: 50% 100%;
+    box-shadow: 0 0 1px var(--darken);
 }
 
 .title {
+    width: 100%;
     display: flex;
-    font-size: 1rem;
+    box-sizing: border-box;
     padding: .5rem 1rem;
+    position: absolute;
+    bottom: 0;
+    background: var(--darken);
+    font-size: 1rem;
     font-weight: bold;
     text-transform: capitalize;
+    text-shadow: 0 0 3px var(--darken-strong);
 }
 </style>