DebaucheryLibrarian/traxxx
2
1
Fork 1
Code Issues 39 Pull Requests 1 Releases Wiki Activity

Improved dark theme. Changed sidebar toggle icon.

Browse Source
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
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 {