Improved dark theme. Changed sidebar toggle icon.

This commit is contained in:
ThePendulum 2020-03-25 03:42:46 +01:00
parent 15a386ad05
commit 1173827a79
13 changed files with 90 additions and 87 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

5
assets/img/grid.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 291 B

5
assets/img/grid2.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 814 B

5
assets/img/grid3.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 292 B

5
assets/img/grid4.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 841 B

View File

@ -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>

Before

Width:  |  Height:  |  Size: 1.5 KiB

5
assets/img/more.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 214 B

5
assets/img/more2.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 389 B