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);
+    fill: var(--text-light);
-    filter: none;
 }
 </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);
+        color: var(--text-light);
-
-        .icon {
-            fill: var(--text-contrast);
-        }
 
         &.male {
             background: var(--male);
@@ -192,10 +189,11 @@ export default {
         }
 
         &.transsexual {
-            width: 2rem;
+            background: var(--text);
-            height: 2rem;
+        }
-            background: var(--female);
+
-            border: solid .25rem var(--male);
+        &.other .icon {
+            fill: var(--text-light);
         }
     }
 }

assets/components/header/filter-bar.vue

@@ -171,9 +171,10 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: .5rem 1rem;
+    border-top: solid 1px var(--shadow-hint);
     z-index: 1;
     font-size: 0;
-    box-shadow: 0 0 3px var(--shadow);
+    box-shadow: 0 0 3px var(--darken);
 
     .icon {
         fill: var(--shadow);

assets/components/header/header.vue

@@ -2,7 +2,7 @@
     <header class="header">
         <div class="header-nav">
             <Icon
-                icon="menu"
+                icon="grid2"
                 class="sidebar-toggle"
                 @click.native.stop="toggleSidebar"
             />
@@ -10,14 +10,15 @@
             <router-link
                 to="/home"
                 class="logo-link"
-            ><h1 class="logo">
+            ><h1 class="header-logo">
-                <Icon
+                <div
-                    icon="logo"
+                    class="logo"
+                    v-html="logo"
                 />
             </h1></router-link>
 
             <nav class="nav">
-                <ul class="nolist">
+                <ul class="nav-list nolist">
                     <li class="nav-item">
                         <router-link
                             v-slot="{ href, isActive, navigate }"
@@ -67,7 +68,6 @@
             <div class="header-toggles">
                 <Icon
                     v-show="!sfw"
-                    v-tooltip="'Enable safe-for-work mode'"
                     icon="flower"
                     class="toggle noselect"
                     @click.native="setSfw(true)"
@@ -75,7 +75,6 @@
 
                 <Icon
                     v-show="sfw"
-                    v-tooltip="'Disable safe-for-work mode'"
                     icon="flower"
                     class="toggle active noselect"
                     @click.native="setSfw(false)"
@@ -83,7 +82,6 @@
 
                 <Icon
                     v-show="theme === 'light'"
-                    v-tooltip="'Switch to dark theme'"
                     icon="moon"
                     class="toggle noselect"
                     @click.native="setTheme('dark')"
@@ -91,7 +89,6 @@
 
                 <Icon
                     v-show="theme === 'dark'"
-                    v-tooltip="'Switch to light theme'"
                     icon="sun"
                     class="toggle noselect"
                     @click.native="setTheme('light')"
@@ -129,6 +126,8 @@ import { mapState } from 'vuex';
 
 import Search from './search.vue';
 
+import logo from '../../img/logo.svg';
+
 function sfw(state) {
     return state.ui.sfw;
 }
@@ -157,6 +156,7 @@ export default {
     },
     data() {
         return {
+            logo,
             searching: false,
         };
     },
@@ -183,7 +183,7 @@ export default {
     justify-content: space-between;
     background: var(--background);
     color: var(--primary);
-    border-bottom: solid 1px var(--shadow-hint);
+    box-shadow: 0 1px 0 var(--darken-hint);
     font-size: 0;
 }
 
@@ -202,9 +202,9 @@ export default {
 
 .sidebar-toggle {
     display: none;
-    fill: var(--shadow);
+    fill: var(--shadow-modest);
-    padding: 0 1rem;
+    padding: 0 1.5rem 0 1rem;
-    width: 1.75rem;
+    width: 1.25rem;
     height: 100%;
 
     &:hover {
@@ -214,33 +214,40 @@ export default {
 }
 
 .logo-link {
-    color: inherit;
+    height: 100%;
     display: inline-block;
     text-decoration: none;
+    margin: 0 1rem 0 0;
+}
+
+.header-logo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 0 0 1rem;
 }
 
 .logo {
-    height: 100%;
-    display: inline-block;
-    padding: 0 0 0 1rem;
-    margin: 0 1rem 0 0;
-
-    .icon {
     width: 6rem;
-        height: 1.5rem;
+    display: flex;
-    }
 }
 
-.nav {
+.nav,
+.nav-list {
     display: inline-block;
+    height: 100%;
+}
+
+.nav-item {
+    height: 100%;
 }
 
 .nav-link {
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem 1rem calc(1rem - 5px) 1rem;
+    padding: 0 1rem;
-    border-bottom: solid 5px transparent;
     color: var(--shadow);
     text-decoration: none;
     font-size: .9rem;
@@ -249,7 +256,6 @@ export default {
 
     &.active {
         color: var(--primary);
-        border-bottom: solid 5px var(--primary);
 
         .icon {
             fill: var(--primary);
@@ -330,5 +336,9 @@ export default {
     .sidebar-toggle {
         display: inline-block;
     }
+
+    .header-logo {
+        padding: 0 0 0 .5rem;
+    }
 }
 </style>

assets/components/networks/networks.vue

@@ -109,7 +109,7 @@ export default {
     padding: 1rem;
     border: none;
     box-sizing: border-box;
-    box-shadow: 0 0 3px var(--shadow-weak);
+    box-shadow: 0 0 3px var(--darken-weak);
     margin: 1rem 0;
     font-size: 1rem;
     outline: none;

assets/components/sidebar/sidebar.vue

@@ -124,7 +124,7 @@ export default {
 .sidebar-close {
     width: 1.25rem;
     height: 100%;
-    padding: 0 1.25rem;
+    padding: 0 1.5rem 0 1rem;
     fill: var(--lighten);
 
     &:hover {

assets/css/_theme.scss

@@ -76,12 +76,14 @@ $female: #f0a;
     --shadow: rgba(0, 0, 0, .5);
     --shadow-extreme: rgba(0, 0, 0, .9);
     --shadow-strong: rgba(0, 0, 0, .7);
+    --shadow-modest: rgba(0, 0, 0, .3);
     --shadow-weak: rgba(0, 0, 0, .2);
     --shadow-hint: rgba(0, 0, 0, .1);
 
     --highlight: rgba(255, 255, 255, .5);
     --highlight-extreme: rgba(255, 255, 255, .9);
     --highlight-strong: rgba(255, 255, 255, .7);
+    --highlight-modest: rgba(255, 255, 255, .3);
     --highlight-weak: rgba(255, 255, 255, .2);
     --highlight-hint: rgba(255, 255, 255, .075);
 }
@@ -105,12 +107,14 @@ $female: #f0a;
     --shadow: rgba(255, 255, 255, .5);
     --shadow-extreme: rgba(255, 255, 255, .9);
     --shadow-strong: rgba(255, 255, 255, .7);
+    --shadow-modest: rgba(255, 255, 255, .3);
     --shadow-weak: rgba(255, 255, 255, .2);
     --shadow-hint: rgba(255, 255, 255, .075);
 
     --highlight: rgba(0, 0, 0, .5);
     --highlight-extreme: rgba(0, 0, 0, .9);
     --highlight-strong: rgba(0, 0, 0, .7);
+    --highlight-modest: rgba(0, 0, 0, .3);
     --highlight-weak: rgba(0, 0, 0, .2);
     --highlight-hint: rgba(0, 0, 0, .1);
 }

assets/img/grid.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>grid</title>
+<path d="M0 0h4v4h-4zM6 0h4v4h-4zM12 0h4v4h-4zM0 6h4v4h-4zM6 6h4v4h-4zM12 6h4v4h-4zM0 12h4v4h-4zM6 12h4v4h-4zM12 12h4v4h-4z"></path>
+</svg>

assets/img/grid2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>grid2</title>
+<path d="M0 2c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM6 2c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM12 2c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM0 8c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM6 8c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM12 8c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM0 14c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM6 14c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM12 14c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2z"></path>
+</svg>

assets/img/grid3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>grid3</title>
+<path d="M1 1h4v4h-4zM6 1h4v4h-4zM11 1h4v4h-4zM1 6h4v4h-4zM6 6h4v4h-4zM11 6h4v4h-4zM1 11h4v4h-4zM6 11h4v4h-4zM11 11h4v4h-4z"></path>
+</svg>

assets/img/grid4.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>grid4</title>
+<path d="M3 1v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM8 1v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM13 1v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM3 6v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM8 6v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM13 6v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM3 11v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM8 11v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM13 11v0c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2z"></path>
+</svg>

assets/img/logo_t.svg

@@ -1,40 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   id="svg8"
-   version="1.1"
-   viewBox="0 0 2.9421661 7.8210821"
-   height="7.8210821mm"
-   width="2.9421661mm">
-  <defs
-     id="defs2" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-77.20239,-97.922958)"
-     id="layer1">
-    <g
-       id="text4520"
-       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6c88;fill-opacity:1;stroke:none;stroke-width:0.26458332"
-       aria-label="traxxx">
-      <path
-         id="path828"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"
-         d="m 77.890306,105.74404 h 1.407584 v -4.58258 h 0.846666 V 99.880875 H 79.29789 v -1.957917 h -1.407584 v 1.957917 H 77.20239 v 1.280585 h 0.687916 z" />
-    </g>
-  </g>
-</svg>

assets/img/more.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>more</title>
+<path d="M6 1h4v4h-4zM6 6h4v4h-4zM6 11h4v4h-4z"></path>
+</svg>

assets/img/more2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>more2</title>
+<path d="M6 3c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM6 8c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM6 13c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2z"></path>
+</svg>