DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added dark theme. Fixed actor country aggregation.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-06-10 03:24:48 +02:00
parent 255dd48af6
commit 69cefa57ff
38 changed files with 299 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/actors/actors.vue
View File

@@ -266,6 +266,7 @@ function updateFilter(prop, value, reload = true) {
min-height: 100%;
display: flex;
align-items: stretch;
background: var(--background-base-10);
}
.actors-container {

12
components/alerts/create.vue
View File

@@ -568,14 +568,14 @@ function selectStash(selectedStash) {
flex-shrink: 0;
width: 3.5rem;
font-size: .9rem;
color: var(--shadow);
color: var(--glass);
&.item-logic {
width: 2.75rem;
}
.icon {
fill: var(--shadow);
fill: var(--glass);
}
}
@@ -586,11 +586,11 @@ function selectStash(selectedStash) {
flex-grow: 1;
gap: .5rem 0;
padding: .5rem 0;
border-bottom: solid 1px var(--shadow-weak-40);
border-bottom: solid 1px var(--glass-weak-40);
&.or .field-item::before,
&.and .field-item::before {
color: var(--shadow);
color: var(--glass);
padding: 0 .5rem;
}
@@ -621,7 +621,7 @@ function selectStash(selectedStash) {
right: -.5rem;
padding: .2rem;
border-radius: 1rem;
fill: var(--shadow);
fill: var(--glass);
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-20);
@@ -681,7 +681,7 @@ function selectStash(selectedStash) {
display: flex;
justify-content: space-between;
padding: .5rem 1rem;
border-bottom: solid 1px var(--shadow-weak-40);
border-bottom: solid 1px var(--glass-weak-40);
}
.field-items {

4
components/dialog/dialog.vue
View File

@@ -1,5 +1,5 @@
<template>
<Teleport to="body">
<Teleport to="#container">
<div
class="dialog-container"
@click="emit('close')"
@@ -55,7 +55,7 @@ onMounted(() => emit('open'));
.dialog-description {
margin: 0 0 .5rem 0;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
font-size: .9rem;
line-height: 1.5;
}

2
components/entities/tile.vue
View File

@@ -33,7 +33,7 @@ defineProps({
box-sizing: border-box;
padding: 1rem;
border-radius: .5rem;
background: var(--grey-dark-40);
background: var(--shadow-strong-40);
color: var(--text-light);
font-size: 1.25rem;
font-weight: bold;

2
components/filters/birthdate.vue
View File

@@ -80,7 +80,7 @@ const emit = defineEmits(['update']);
.select {
flex-grow: 1;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
option {
color: var(--text);

2
components/filters/channels.vue
View File

@@ -171,7 +171,7 @@ const entities = computed(() => {
width: 2.25rem;
height: 1rem;
transform: rotate(-135deg);
fill: var(--shadow-weak-30);
fill: var(--glass-weak-30);
overflow: hidden; /* prevent parent jumping on load */
}
}

6
components/filters/countries.vue
View File

@@ -42,7 +42,7 @@ const emit = defineEmits(['country']);
<style scoped>
.countries:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-30);
border-bottom: solid 1px var(--glass-weak-30);
}
.country {
@@ -57,7 +57,7 @@ const emit = defineEmits(['country']);
}
&:hover {
background: var(--shadow-weak-30);
background: var(--glass-weak-30);
cursor: pointer;
}
@@ -78,7 +78,7 @@ const emit = defineEmits(['country']);
display: flex;
align-items: center;
padding: .5rem;
fill: var(--shadow);
fill: var(--glass);
&:hover {
fill: var(--error);

42
components/filters/filters.vue
View File

@@ -81,7 +81,7 @@ function toggleFilters(state) {
}
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-30);
border-bottom: solid 1px var(--glass-weak-30);
}
}
@@ -98,7 +98,7 @@ function toggleFilters(state) {
display: flex;
align-items: center;
padding-left: .5rem;
fill: var(--shadow);
fill: var(--glass);
&:hover {
cursor: pointer;
@@ -109,13 +109,13 @@ function toggleFilters(state) {
.filter-mode {
width: 100%;
color: var(--shadow);
color: var(--glass);
background: none;
padding: .75rem;
margin: 0 0 .5rem 0;
font-size: 1rem;
border: none;
border-bottom: solid 1px var(--shadow-hint);
border-bottom: solid 1px var(--glass-weak-40);
option {
color: var(--text-dark);
@@ -124,7 +124,7 @@ function toggleFilters(state) {
.filters-sort {
display: flex;
border-bottom: solid 1px var(--shadow-weak-30);
border-bottom: solid 1px var(--glass-weak-30);
}
.filters-search {
@@ -138,25 +138,25 @@ function toggleFilters(state) {
align-items: center;
justify-content: space-between;
padding: .5rem 1rem;
color: var(--shadow-weak-10);
color: var(--glass-weak-10);
text-decoration: none;
cursor: default;
.icon {
fill: var(--shadow-weak-30);
fill: var(--glass-weak-30);
margin: 0 0 0 1rem;
}
&.active {
color: var(--shadow);
color: var(--glass);
.icon {
fill: var(--shadow-weak-10);
fill: var(--glass-weak-10);
}
&:hover {
color: var(--text);
background: var(--shadow-hint);
background: var(--glass-weak-30);
cursor: pointer;
.icon {
@@ -184,7 +184,7 @@ function toggleFilters(state) {
align-items: stretch;
&:hover {
background: var(--shadow-weak-30);
background: var(--glass-weak-30);
cursor: pointer;
}
@@ -240,7 +240,7 @@ function toggleFilters(state) {
.icon {
width: 1rem;
padding: 0 .75rem;
fill: var(--shadow-weak-30);
fill: var(--glass-weak-30);
}
.filter-remove {
@@ -255,7 +255,7 @@ function toggleFilters(state) {
.filter-include:hover,
.filter-name:hover {
background: var(--shadow-weak-30);
background: var(--glass-weak-30);
}
.filter-sort {
@@ -267,14 +267,14 @@ function toggleFilters(state) {
padding: 0 .25rem;
cursor: pointer;
font-weight: bold;
color: var(--shadow);
color: var(--glass);
&.order {
padding: 0 .5rem 0 .25rem;
}
.icon {
fill: var(--shadow);
fill: var(--glass);
}
&:hover {
@@ -293,7 +293,7 @@ function toggleFilters(state) {
.filter-remove.icon {
padding: .25rem .6rem;
fill: var(--shadow);
fill: var(--glass);
&:hover {
fill: var(--alert);
@@ -308,13 +308,13 @@ function toggleFilters(state) {
justify-content: flex-end;
padding: 0 .25rem;
overflow: hidden;
color: var(--shadow-weak-10);
color: var(--glass-weak-10);
font-size: .9rem;
}
.filter-empty {
padding: .5rem;
color: var(--shadow);
color: var(--glass);
font-style: italic;
}
@@ -329,7 +329,7 @@ function toggleFilters(state) {
@media (--compact) {
.filter {
border-right: solid 1px var(--shadow-weak-30);
border-right: solid 1px var(--glass-weak-30);
}
}
</style>
@@ -377,7 +377,7 @@ function toggleFilters(state) {
right: -2.5rem;
border-radius: 0 .5rem .5rem 0;
background: var(--background);
color: var(--shadow);
color: var(--glass);
font-weight: bold;
box-shadow: inset 0 0 3px var(--shadow-weak-30);
@@ -395,7 +395,7 @@ function toggleFilters(state) {
}
.icon {
fill: var(--shadow);
fill: var(--glass);
}
&:hover {

5
components/filters/gender.vue
View File

@@ -75,7 +75,8 @@ const emit = defineEmits(['update']);
justify-content: center;
box-sizing: border-box;
border: none;
color: var(--shadow);
border-radius: 100%;
color: var(--glass);
background: var(--background);
font-weight: bold;
text-decoration: none;
@@ -89,7 +90,7 @@ const emit = defineEmits(['update']);
}
.icon {
fill: var(--shadow);
fill: var(--glass);
}
&:hover {

6
components/footer/footer.vue
View File

@@ -41,10 +41,10 @@ const { env } = pageContext;
display: inline-flex;
align-items: center;
padding: .5rem 1rem;
color: var(--shadow);
color: var(--glass);
&:not(:first-child) {
border-left: solid 1px var(--shadow-weak-30);
border-left: solid 1px var(--glass-weak-30);
}
}
@@ -59,6 +59,6 @@ const { env } = pageContext;
.discord .icon {
height: 1.25rem;
width: 3.5rem;
fill: var(--shadow-strong-10);
fill: var(--glass-strong-10);
}
</style>

2
components/form/checkbox.vue
View File

@@ -53,7 +53,7 @@ defineEmits(['change']);
justify-content: center;
flex-shrink: 0;
position: relative;
background-color: var(--shadow-weak-30);
background-color: var(--glass-weak-30);
border-radius: .25rem;
cursor: pointer;
transition: background .15s ease;

7
components/form/range.vue
View File

@@ -148,10 +148,11 @@ async function setRange(prop, value) {
.range-container {
display: flex;
justify-content: space-between;
font-size: 0;
}
.range {
--slider-track: var(--shadow-weak-30);
--slider-track: var(--glass-weak-30);
--slider-range: var(--primary-light-30);
--slider-thumb: var(--primary);
@@ -161,7 +162,7 @@ async function setRange(prop, value) {
border-radius: .625rem;
&.disabled {
--slider-range: var(--shadow-weak-40);
--slider-range: var(--glass-weak-40);
--slider-thumb: var(--disabled-handle);
}
}
@@ -221,6 +222,6 @@ async function setRange(prop, value) {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
fill: var(--shadow);
fill: var(--glass);
}
</style>

122
components/header/header.vue
View File

@@ -79,11 +79,11 @@
</form>
<div
v-if="user"
class="userpanel"
:class="{ searching: searchFocused }"
>
<VDropdown
v-if="user"
:triggers="['click']"
:prevent-overflow="true"
class="notifs-trigger"
@@ -115,21 +115,35 @@
<VDropdown
:triggers="['click']"
:prevent-overflow="true"
class="menu-trigger"
>
<img
:src="user.avatar"
class="avatar"
>
<div class="avatar-container">
<img
v-if="user"
:src="user.avatar"
class="avatar"
>
<Icon
v-else
icon="user7"
class="avatar-placeholder"
/>
</div>
<template #popper>
<div class="menu">
<a
v-if="user"
:href="`/user/${user.username}`"
class="menu-header ellipsis"
>{{ user.username }}</a>
<ul class="menu-list nolist">
<li class="menu-item">
<li
v-if="user"
class="menu-item"
>
<a
:href="`/user/${user.username}`"
class="menu-button nolink"
@@ -140,7 +154,21 @@
</li>
<li
v-if="user.primaryStash"
v-else-if="allowLogin"
v-close-popper
class="menu-item"
>
<a
:href="`/login?r=${encodeURIComponent(currentPath)}`"
class="menu-button nolink"
>
<Icon icon="enter" />
Log in
</a>
</li>
<li
v-if="user?.primaryStash"
class="menu-item"
>
<a
@@ -161,6 +189,26 @@
Settings
</li>
<li
v-if="theme === 'dark'"
v-close-popper
class="menu-item menu-button"
@click="setTheme('light')"
>
<Icon icon="sun3" />
Light theme
</li>
<li
v-else
v-close-popper
class="menu-item menu-button"
@click="setTheme('dark')"
>
<Icon icon="moon" />
Dark theme
</li>
<li
class="menu-button menu-item logout"
@click="logout"
@@ -170,20 +218,6 @@
</template>
</VDropdown>
</div>
<div
v-else-if="allowLogin"
class="userpanel"
:class="{ searching: searchFocused }"
>
<a
:href="`/login?r=${encodeURIComponent(currentPath)}`"
class="login button button-submit nolink"
>
<span class="login-text">Log in</span>
<Icon icon="enter" />
</a>
</div>
</div>
<Settings
@@ -205,8 +239,11 @@ import {
inject,
} from 'vue';
import Cookies from 'js-cookie';
import navigate from '#/src/navigate.js';
import { del } from '#/src/api.js';
import events from '#/src/events.js';
// import getPath from '#/src/get-path.js';
import Notifications from '#/components/header/notifications.vue';
@@ -216,6 +253,7 @@ import AlertDialog from '#/components/alerts/create.vue';
import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
const pageContext = inject('pageContext');
const theme = ref(pageContext.env.theme);
const user = pageContext.user;
const unseen = ref(pageContext.meta.unseenNotifications);
@@ -232,6 +270,13 @@ function search() {
navigate('/search', { q: query.value }, { redirect: true });
}
function setTheme(newTheme) {
theme.value = newTheme;
Cookies.set('theme', newTheme);
events.emit('theme', newTheme);
}
async function logout() {
await del('/session');
navigate('/login?consent', null, { redirect: true }); // pass consent variable to reinstate in new session
@@ -275,7 +320,7 @@ function blurSearch(event) {
.nav-item .link {
font-size: .9rem;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
box-sizing: border-box;
padding: 1rem;
height: 100%;
@@ -330,7 +375,7 @@ function blurSearch(event) {
.icon {
height: 100%;
padding: 0 .75rem 0 .5rem;
fill: var(--shadow-weak-10);
fill: var(--glass-weak-10);
}
&.focused {
@@ -355,7 +400,6 @@ function blurSearch(event) {
height: 100%;
display: flex;
align-items: center;
padding: 0 1rem 0 0;
font-size: 0;
cursor: pointer;
@@ -368,6 +412,21 @@ function blurSearch(event) {
}
}
.menu-trigger {
height: 100%;
}
.avatar-container {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem 0 0;
&:hover .icon {
fill: var(--primary);
}
}
.avatar {
width: 2rem;
height: 2rem;
@@ -375,6 +434,13 @@ function blurSearch(event) {
object-fit: cover;
}
.avatar-placeholder {
width: 1.25rem;
padding-left: 1rem;
height: 100%;
fill: var(--glass-strong-20);
}
.notifs-trigger {
height: 100%;
}
@@ -411,7 +477,7 @@ function blurSearch(event) {
}
.notifs-bell {
fill: var(--shadow);
fill: var(--glass);
}
.login {
@@ -433,8 +499,8 @@ function blurSearch(event) {
.menu-header {
display: flex;
padding: .75rem 1rem;
border-bottom: solid 1px var(--shadow-weak-30);
color: var(--shadow-strong-30);
border-bottom: solid 1px var(--glass-weak-30);
color: var(--glass-strong-30);
text-decoration: none;
font-weight: bold;
}
@@ -450,7 +516,7 @@ function blurSearch(event) {
font-size: 1.1rem;
.icon {
fill: var(--shadow);
fill: var(--glass);
margin-right: .75rem;
transform: translateY(-1px);
}

14
components/header/notifications.vue
View File

@@ -166,7 +166,7 @@ onMounted(async () => {
box-shadow: inset 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--shadow-strong-10);
fill: var(--glass-strong-10);
&:hover {
fill: var(--primary);
@@ -202,14 +202,14 @@ onMounted(async () => {
overflow: hidden;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-40);
border-bottom: solid 1px var(--glass-weak-40);
}
&:before {
width: 2.5rem;
flex-shrink: 0;
content: '•';
color: var(--shadow-weak-20);
color: var(--glass-weak-20);
text-align: center;
}
@@ -236,7 +236,7 @@ onMounted(async () => {
justify-content: space-between;
padding: .5rem 0 .1rem 0;
box-sizing: border-box;
color: var(--shadow-strong);
color: var(--glass-strong);
font-weight: bold;
}
@@ -255,12 +255,12 @@ onMounted(async () => {
.notif-date {
flex-shrink: 0;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
&:after {
content: '•';
padding: 0 .5rem;
color: var(--shadow-weak-20);
color: var(--glass-weak-20);
}
}
@@ -272,7 +272,7 @@ onMounted(async () => {
.notif-id {
padding: 0 .5rem;
color: var(--shadow-weak-10);
color: var(--glass-weak-10);
font-size: .9rem;
font-weight: normal;
}

2
components/icon/icon.vue
View File

@@ -47,7 +47,7 @@ import(`../../assets/img/icons/${props.icon}.svg?raw`).then((raw) => {
}
&.active {
fill: var(--shadow);
fill: var(--glass);
&:hover {
fill: var(--text);

6
components/movies/tile.vue
View File

@@ -199,6 +199,10 @@ const favorited = ref(props.movie.stashes?.some((movieStash) => movieStash.id ==
opacity: .1;
}
.dark .nocover {
filter: invert();
}
.tile-info {
flex-shrink: 0;
font-size: 0;
@@ -294,7 +298,7 @@ const favorited = ref(props.movie.stashes?.some((movieStash) => movieStash.id ==
overflow: hidden;
padding: 0 .5rem;
margin-bottom: .25rem;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
font-size: .75rem;
}

8
components/pagination/pagination.vue
View File

@@ -251,14 +251,14 @@ function getPath(page) {
margin-bottom: 1rem;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30);
color: var(--shadow);
color: var(--glass);
font-weight: bold;
font-size: 1rem;
.icon {
width: .9rem;
height: .9rem;
fill: var(--shadow);
fill: var(--glass);
}
&.active {
@@ -267,7 +267,7 @@ function getPath(page) {
}
&.disabled .icon {
fill: var(--shadow-weak-20);
fill: var(--glass-weak-20);
}
}
@@ -282,7 +282,7 @@ function getPath(page) {
.more {
padding: 2rem;
text-align: center;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
font-size: 1.1rem;
}

2
components/scenes/scenes.vue
View File

@@ -321,7 +321,7 @@ function updateFilter(prop, value, reload = true) {
padding: .5rem 1rem;
background: var(--background-dark-20);
border-radius: 1rem;
color: var(--shadow);
color: var(--glass);
font-size: .9rem;
font-weight: bold;

4
components/scenes/tile.vue
View File

@@ -179,7 +179,7 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
.icon {
width: 3rem;
height: 3rem;
fill: var(--shadow-weak-40);
fill: var(--glass-weak-40);
}
}
@@ -295,7 +295,7 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
.tag {
margin: 0 .5rem .25rem 0;
padding: .1rem 0;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
font-size: .75rem;
}
</style>

4
components/sidebar/sidebar.vue
View File

@@ -148,7 +148,7 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
padding: .75rem 1rem;
font-size: 1.1rem;
font-weight: bold;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
&:hover {
color: var(--primary);
@@ -166,7 +166,7 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
width: 1rem;
padding: 0 1rem;
height: auto;
fill: var(--shadow);
fill: var(--glass);
}
&:hover {

2
components/stashes/heart.vue
View File

@@ -159,7 +159,7 @@ async function unstashItem(stash) {
width: 1.5rem;
height: 1.5rem;
padding: .5rem .5rem;
fill: var(--shadow);
fill: var(--glass);
}
&.light .icon {

14
components/stashes/tile.vue
View File

@@ -211,7 +211,7 @@ async function rename() {
.stash {
width: 100%;
border-radius: .25rem;
background: var(--background);
background: var(--background-base);
box-shadow: 0 0 3px var(--shadow-weak-30);
&:hover {
@@ -222,7 +222,7 @@ async function rename() {
.stash-header {
display: flex;
align-items: stretch;
border-bottom: solid 1px var(--shadow-weak-30);
border-bottom: solid 1px var(--glass-weak-30);
font-weight: bold;
}
@@ -230,11 +230,11 @@ async function rename() {
display: flex;
height: 100%;
padding: 0 .75rem;
fill: var(--shadow);
fill: var(--glass);
&:hover {
cursor: pointer;
fill: var(--shadow-strong-30);
fill: var(--glass-strong-30);
}
}
@@ -268,7 +268,7 @@ async function rename() {
.icon {
margin-right: .5rem;
fill: var(--shadow);
fill: var(--glass);
}
&:hover {
@@ -283,7 +283,7 @@ async function rename() {
.icon.private {
display: flex;
height: auto;
fill: var(--shadow-weak-20);
fill: var(--glass-weak-20);
padding-left: .5rem;
}
@@ -295,7 +295,7 @@ async function rename() {
.icon {
display: flex;
margin-right: .75rem;
fill: var(--shadow);
fill: var(--glass);
}
&.remove {