Fixed dark theme for release tiles.

assets/components/tile/release.vue

@@ -176,13 +176,13 @@ export default {
 @import 'theme';
 
 .tile {
-    background: $background;
+    background: var(--background);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding: 0 0 .5rem 0;
     overflow: hidden;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--darken-weak);
     height: 100%;
 }
 
@@ -192,7 +192,7 @@ export default {
 }
 
 .covers {
-    background: $profile;
+    background: var(--profile);
     display: flex;
 
     .cover {
@@ -209,9 +209,9 @@ export default {
     object-fit: cover;
     background-position: center;
     background-size: cover;
-    background-color: $shadow-hint;
-    color: $shadow;
-    text-shadow: 1px 1px 0 $highlight;
+    background-color: var(--shadow-hint);
+    color: var(--shadow);
+    text-shadow: 1px 1px 0 var(--highlight);
 }
 
 .row {
@@ -238,10 +238,10 @@ export default {
 
 .site,
 .date {
-    color: $text-contrast;
+    color: var(--text-light);
     display: flex;
     align-items: center;
-    background: $shadow;
+    background: var(--darken);
     position: relative;
     font-size: .8rem;
     padding: .25rem;
@@ -251,7 +251,7 @@ export default {
 .date {
     &.upcoming:before {
         content: '';
-        background: $primary;
+        background: var(--primary);
         width: .5rem;
         display: inline-block;
         position: absolute;
@@ -271,7 +271,7 @@ export default {
 
 .site-link {
     display: flex;
-    color: $text-contrast;
+    color: var(--text-light);
     text-decoration: none;
 }
 
@@ -287,7 +287,7 @@ export default {
 
 .title {
     margin: 0 .25rem .25rem 0;
-    color: $text;
+    color: var(--text);
     max-height: 2.75rem;
     font-size: 1rem;
     line-height: 1.5;
@@ -335,26 +335,26 @@ export default {
     text-decoration: none;
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
 
 .actor-link {
-    color: $link;
+    color: var(--link);
 }
 
 .tag-link {
-    color: $shadow;
+    color: var(--shadow);
     display: inline-block;
     padding: .25rem;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
     line-height: 1;
-    border: solid 1px $shadow-hint;
+    border: solid 1px var(--shadow-hint);
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
 </style>