boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/components/actors/actors.vue
View File

@ -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);
}
}
}

3
assets/components/header/filter-bar.vue
View File

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

64
assets/components/header/header.vue
View File

@ -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">
<Icon
icon="logo"
><h1 class="header-logo">
<div
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);
padding: 0 1rem;
width: 1.75rem;
fill: var(--shadow-modest);
padding: 0 1.5rem 0 1rem;
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;
}
width: 6rem;
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;
border-bottom: solid 5px transparent;
padding: 0 1rem;
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>

2
assets/components/networks/networks.vue
View File

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

2
assets/components/sidebar/sidebar.vue
View File

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

4
assets/css/_theme.scss
View File

@ -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);
}

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>
Side by Side

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>
Side by Side

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>
Side by Side

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>
Side by Side

After

Width:  |  Height:  |  Size: 841 B

40
assets/img/logo_t.svg
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>
Side by Side

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>
Side by Side

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>
Side by Side

After

Width:  |  Height:  |  Size: 389 B