Improved dark theme. Changed sidebar toggle icon.

assets/components/actors/actors.vue

@@ -110,8 +110,7 @@ export default {
 @import 'theme';
 
 .gender-link.selected .gender .icon  {
-    fill: var(--text-contrast);
-    filter: none;
+    fill: var(--text-light);
 }
 </style>
 
@@ -156,32 +155,30 @@ export default {
 .gender-link {
     width: 2.5rem;
     height: 2.5rem;
-    display: inline-flex;
+    display: flex;
     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);
     font-weight: bold;
     text-decoration: none;
-    box-shadow: 0 0 3px var(--shadow-weak);
+    box-shadow: 0 0 3px var(--darken-weak);
+
+    .icon {
+        fill: var(--shadow);
+    }
 
     &:hover {
         color: var(--primary);
         cursor: pointer;
     }
 
-    .icon {
-        fill: var(--shadow);
-    }
-
     &.selected {
         background: var(--primary);
-        color: var(--text-contrast);
-
-        .icon {
-            fill: var(--text-contrast);
-        }
+        color: var(--text-light);
 
         &.male {
             background: var(--male);
@@ -192,10 +189,11 @@ export default {
         }
 
         &.transsexual {
-            width: 2rem;
-            height: 2rem;
-            background: var(--female);
-            border: solid .25rem var(--male);
+            background: var(--text);
+        }
+
+        &.other .icon {
+            fill: var(--text-light);
         }
     }
 }