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

Added dark theme. Fixed actor country aggregation.

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

28
assets/css/inputs.css
View File

@ -3,9 +3,10 @@
padding: .5rem .75rem; padding: .5rem .75rem;
font-size: 1rem; font-size: 1rem;
flex-basis: 0; flex-basis: 0;
border: solid 1px var(--grey-light-30); color: inherit;
border: solid 1px var(--glass-weak-30);
border-radius: .25rem; border-radius: .25rem;
background: var(--grey-light-60); background: var(--background-base-10);
font: inherit; font: inherit;
&:focus { &:focus {
@ -31,14 +32,14 @@
border-radius: .25rem; border-radius: .25rem;
background: var(--background); background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30); box-shadow: 0 0 3px var(--shadow-weak-30);
color: var(--shadow-strong-20); color: var(--glass);
font-size: .9rem; font-size: .9rem;
font-weight: bold; font-weight: bold;
.icon { .icon {
height: auto; height: auto;
padding: 0 .75rem 0 .25rem; padding: 0 .75rem 0 .25rem;
fill: var(--shadow-strong-10); fill: var(--glass);
} }
&:hover { &:hover {
@ -70,7 +71,7 @@
} }
&:disabled { &:disabled {
background: var(--shadow-weak-10); background: var(--glass);
} }
} }
@ -84,7 +85,7 @@
} }
&:disabled { &:disabled {
background: var(--shadow-weak-10); background: var(--glass);
} }
} }
@ -118,7 +119,7 @@
.button-cancel { .button-cancel {
background: none; background: none;
color: var(--shadow-strong-10); color: var(--glass);
font-weight: normal; font-weight: normal;
&:hover:not(:disabled) { &:hover:not(:disabled) {
@ -127,7 +128,7 @@
} }
&:disabled { &:disabled {
color: var(--shadow-weak-10); color: var(--glass);
} }
} }
@ -137,7 +138,6 @@
.filter-section { .filter-section {
width: 100%; width: 100%;
border-bottom: solid 1px var(--shadow-hint);
margin-bottom: .25rem; margin-bottom: .25rem;
} }
@ -209,7 +209,7 @@
min-width: 1.5rem; min-width: 1.5rem;
flex-shrink: 0; flex-shrink: 0;
padding: 0 .5rem; padding: 0 .5rem;
color: var(--shadow); color: var(--glass);
font-weight: bold; font-weight: bold;
font-size: .9rem; font-size: .9rem;
@ -218,7 +218,7 @@
} }
.icon { .icon {
fill: var(--shadow); fill: var(--glass);
} }
&:hover { &:hover {
@ -246,7 +246,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .5rem 0 .25rem .25rem; padding: .5rem 0 .25rem .25rem;
color: var(--shadow); color: var(--glass);
font-weight: bold; font-weight: bold;
font-size: .9rem; font-size: .9rem;
@ -272,8 +272,8 @@
height: 1.25rem; height: 1.25rem;
appearance: none; appearance: none;
border-radius: 1rem; border-radius: 1rem;
background-color: var(--shadow-weak-40); background-color: var(--glass-weak-40);
background-image: radial-gradient(circle, var(--shadow-weak-10) .3rem, transparent calc(.3rem + 1px)); background-image: radial-gradient(circle, var(--glass-weak-10) .3rem, transparent calc(.3rem + 1px));
cursor: pointer; cursor: pointer;
&::-webkit-slider-thumb { &::-webkit-slider-thumb {

49
assets/css/theme.css
View File

@ -49,6 +49,16 @@
--highlight-strong-20: rgba(255, 255, 255, .75); --highlight-strong-20: rgba(255, 255, 255, .75);
--highlight-strong-30: rgba(255, 255, 255, .9); --highlight-strong-30: rgba(255, 255, 255, .9);
--glass-weak-50: rgba(0, 0, 0, .02);
--glass-weak-40: rgba(0, 0, 0, .05);
--glass-weak-30: rgba(0, 0, 0, .1);
--glass-weak-20: rgba(0, 0, 0, .2);
--glass-weak-10: rgba(0, 0, 0, .35);
--glass: rgba(0, 0, 0, .5);
--glass-strong-10: rgba(0, 0, 0, .6);
--glass-strong-20: rgba(0, 0, 0, .75);
--glass-strong-30: rgba(0, 0, 0, .9);
--text: #222; --text: #222;
--text-light: #fff; --text-light: #fff;
@ -71,3 +81,42 @@
--gold: #d5b522; --gold: #d5b522;
} }
.dark {
--background-dark-20: #000;
--background-dark-10: #111;
--background: #222;
--background-base: #252525;
--background-base-10: #1a1a1a;
--background-base-20: #050505;
--background-level-10: #fff;
--background-level-20: #eee;
--background-level-30: #eee;
--background-dim: var(--shadow-weak-10);
--text: #fcfcfc;
--glass-weak-50: rgba(255, 255, 255, .02);
--glass-weak-40: rgba(255, 255, 255, .05);
--glass-weak-30: rgba(255, 255, 255, .1);
--glass-weak-20: rgba(255, 255, 255, .2);
--glass-weak-10: rgba(255, 255, 255, .35);
--glass: rgba(255, 255, 255, .5);
--glass-strong-10: rgba(255, 255, 255, .6);
--glass-strong-20: rgba(255, 255, 255, .75);
--glass-strong-30: rgba(255, 255, 255, .9);
--grey-dark-50: #101010;
--grey-dark-40: #1f1f1f;
--grey-dark-30: #3c3c3c;
--grey-dark-20: #606060;
--grey-dark-10: #808080;
--grey: #aaa;
--grey-light-10: #bbb;
--grey-light-20: #ccc;
--grey-light-30: #ddd;
--grey-light-40: #eee;
--grey-light-50: #fafafa;
--grey-light-60: #fcfcfc;
}

10
assets/css/tooltip.css
View File

@ -177,20 +177,20 @@
/* Dropdown */ /* Dropdown */
.v-popper--theme-dropdown .v-popper__inner { .v-popper--theme-dropdown .v-popper__inner {
background: #fff; background: var(--background);
color: black; color: var(--text);
border-radius: 6px; border-radius: 6px;
border: 1px solid #ddd; border: solid 1px var(--glass-weak-40);
box-shadow: 0 6px 30px rgba(0, 0, 0, .1); box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
} }
.v-popper--theme-dropdown .v-popper__arrow-inner { .v-popper--theme-dropdown .v-popper__arrow-inner {
visibility: visible; visibility: visible;
border-color: #fff; border-color: var(--background);
} }
.v-popper--theme-dropdown .v-popper__arrow-outer { .v-popper--theme-dropdown .v-popper__arrow-outer {
border-color: #ddd; border-color: var(--glass-weak-40);
} }
.resize-observer { .resize-observer {

1
components/actors/actors.vue
View File

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

12
components/alerts/create.vue
View File

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

4
components/dialog/dialog.vue
View File

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

2
components/entities/tile.vue
View File

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

2
components/filters/birthdate.vue
View File

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

2
components/filters/channels.vue
View File

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

6
components/filters/countries.vue
View File

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

42
components/filters/filters.vue
View File

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

5
components/filters/gender.vue
View File

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

6
components/footer/footer.vue
View File

@ -41,10 +41,10 @@ const { env } = pageContext;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: .5rem 1rem; padding: .5rem 1rem;
color: var(--shadow); color: var(--glass);
&:not(:first-child) { &: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 { .discord .icon {
height: 1.25rem; height: 1.25rem;
width: 3.5rem; width: 3.5rem;
fill: var(--shadow-strong-10); fill: var(--glass-strong-10);
} }
</style> </style>

2
components/form/checkbox.vue
View File

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

7
components/form/range.vue
View File

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

114
components/header/header.vue
View File

@ -79,11 +79,11 @@
</form> </form>
<div <div
v-if="user"
class="userpanel" class="userpanel"
:class="{ searching: searchFocused }" :class="{ searching: searchFocused }"
> >
<VDropdown <VDropdown
v-if="user"
:triggers="['click']" :triggers="['click']"
:prevent-overflow="true" :prevent-overflow="true"
class="notifs-trigger" class="notifs-trigger"
@ -115,21 +115,35 @@
<VDropdown <VDropdown
:triggers="['click']" :triggers="['click']"
:prevent-overflow="true" :prevent-overflow="true"
class="menu-trigger"
> >
<div class="avatar-container">
<img <img
v-if="user"
:src="user.avatar" :src="user.avatar"
class="avatar" class="avatar"
> >
<Icon
v-else
icon="user7"
class="avatar-placeholder"
/>
</div>
<template #popper> <template #popper>
<div class="menu"> <div class="menu">
<a <a
v-if="user"
:href="`/user/${user.username}`" :href="`/user/${user.username}`"
class="menu-header ellipsis" class="menu-header ellipsis"
>{{ user.username }}</a> >{{ user.username }}</a>
<ul class="menu-list nolist"> <ul class="menu-list nolist">
<li class="menu-item"> <li
v-if="user"
class="menu-item"
>
<a <a
:href="`/user/${user.username}`" :href="`/user/${user.username}`"
class="menu-button nolink" class="menu-button nolink"
@ -140,7 +154,21 @@
</li> </li>
<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" class="menu-item"
> >
<a <a
@ -161,6 +189,26 @@
Settings Settings
</li> </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 <li
class="menu-button menu-item logout" class="menu-button menu-item logout"
@click="logout" @click="logout"
@ -170,20 +218,6 @@
</template> </template>
</VDropdown> </VDropdown>
</div> </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> </div>
<Settings <Settings
@ -205,8 +239,11 @@ import {
inject, inject,
} from 'vue'; } from 'vue';
import Cookies from 'js-cookie';
import navigate from '#/src/navigate.js'; import navigate from '#/src/navigate.js';
import { del } from '#/src/api.js'; import { del } from '#/src/api.js';
import events from '#/src/events.js';
// import getPath from '#/src/get-path.js'; // import getPath from '#/src/get-path.js';
import Notifications from '#/components/header/notifications.vue'; 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 import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
const pageContext = inject('pageContext'); const pageContext = inject('pageContext');
const theme = ref(pageContext.env.theme);
const user = pageContext.user; const user = pageContext.user;
const unseen = ref(pageContext.meta.unseenNotifications); const unseen = ref(pageContext.meta.unseenNotifications);
@ -232,6 +270,13 @@ function search() {
navigate('/search', { q: query.value }, { redirect: true }); navigate('/search', { q: query.value }, { redirect: true });
} }
function setTheme(newTheme) {
theme.value = newTheme;
Cookies.set('theme', newTheme);
events.emit('theme', newTheme);
}
async function logout() { async function logout() {
await del('/session'); await del('/session');
navigate('/login?consent', null, { redirect: true }); // pass consent variable to reinstate in new 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 { .nav-item .link {
font-size: .9rem; font-size: .9rem;
color: var(--shadow-strong-10); color: var(--glass-strong-10);
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
height: 100%; height: 100%;
@ -330,7 +375,7 @@ function blurSearch(event) {
.icon { .icon {
height: 100%; height: 100%;
padding: 0 .75rem 0 .5rem; padding: 0 .75rem 0 .5rem;
fill: var(--shadow-weak-10); fill: var(--glass-weak-10);
} }
&.focused { &.focused {
@ -355,7 +400,6 @@ function blurSearch(event) {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 1rem 0 0;
font-size: 0; font-size: 0;
cursor: pointer; 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 { .avatar {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -375,6 +434,13 @@ function blurSearch(event) {
object-fit: cover; object-fit: cover;
} }
.avatar-placeholder {
width: 1.25rem;
padding-left: 1rem;
height: 100%;
fill: var(--glass-strong-20);
}
.notifs-trigger { .notifs-trigger {
height: 100%; height: 100%;
} }
@ -411,7 +477,7 @@ function blurSearch(event) {
} }
.notifs-bell { .notifs-bell {
fill: var(--shadow); fill: var(--glass);
} }
.login { .login {
@ -433,8 +499,8 @@ function blurSearch(event) {
.menu-header { .menu-header {
display: flex; display: flex;
padding: .75rem 1rem; padding: .75rem 1rem;
border-bottom: solid 1px var(--shadow-weak-30); border-bottom: solid 1px var(--glass-weak-30);
color: var(--shadow-strong-30); color: var(--glass-strong-30);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
@ -450,7 +516,7 @@ function blurSearch(event) {
font-size: 1.1rem; font-size: 1.1rem;
.icon { .icon {
fill: var(--shadow); fill: var(--glass);
margin-right: .75rem; margin-right: .75rem;
transform: translateY(-1px); 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); box-shadow: inset 0 0 3px var(--shadow-weak-30);
.icon { .icon {
fill: var(--shadow-strong-10); fill: var(--glass-strong-10);
&:hover { &:hover {
fill: var(--primary); fill: var(--primary);
@ -202,14 +202,14 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
&:not(:last-child) { &:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-40); border-bottom: solid 1px var(--glass-weak-40);
} }
&:before { &:before {
width: 2.5rem; width: 2.5rem;
flex-shrink: 0; flex-shrink: 0;
content: '•'; content: '•';
color: var(--shadow-weak-20); color: var(--glass-weak-20);
text-align: center; text-align: center;
} }
@ -236,7 +236,7 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
padding: .5rem 0 .1rem 0; padding: .5rem 0 .1rem 0;
box-sizing: border-box; box-sizing: border-box;
color: var(--shadow-strong); color: var(--glass-strong);
font-weight: bold; font-weight: bold;
} }
@ -255,12 +255,12 @@ onMounted(async () => {
.notif-date { .notif-date {
flex-shrink: 0; flex-shrink: 0;
color: var(--shadow-strong-10); color: var(--glass-strong-10);
&:after { &:after {
content: '•'; content: '•';
padding: 0 .5rem; padding: 0 .5rem;
color: var(--shadow-weak-20); color: var(--glass-weak-20);
} }
} }
@ -272,7 +272,7 @@ onMounted(async () => {
.notif-id { .notif-id {
padding: 0 .5rem; padding: 0 .5rem;
color: var(--shadow-weak-10); color: var(--glass-weak-10);
font-size: .9rem; font-size: .9rem;
font-weight: normal; 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 { &.active {
fill: var(--shadow); fill: var(--glass);
&:hover { &:hover {
fill: var(--text); 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; opacity: .1;
} }
.dark .nocover {
filter: invert();
}
.tile-info { .tile-info {
flex-shrink: 0; flex-shrink: 0;
font-size: 0; font-size: 0;
@ -294,7 +298,7 @@ const favorited = ref(props.movie.stashes?.some((movieStash) => movieStash.id ==
overflow: hidden; overflow: hidden;
padding: 0 .5rem; padding: 0 .5rem;
margin-bottom: .25rem; margin-bottom: .25rem;
color: var(--shadow-strong-10); color: var(--glass-strong-10);
font-size: .75rem; font-size: .75rem;
} }

8
components/pagination/pagination.vue
View File

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

2
components/scenes/scenes.vue
View File

@ -321,7 +321,7 @@ function updateFilter(prop, value, reload = true) {
padding: .5rem 1rem; padding: .5rem 1rem;
background: var(--background-dark-20); background: var(--background-dark-20);
border-radius: 1rem; border-radius: 1rem;
color: var(--shadow); color: var(--glass);
font-size: .9rem; font-size: .9rem;
font-weight: bold; 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 { .icon {
width: 3rem; width: 3rem;
height: 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 { .tag {
margin: 0 .5rem .25rem 0; margin: 0 .5rem .25rem 0;
padding: .1rem 0; padding: .1rem 0;
color: var(--shadow-strong-10); color: var(--glass-strong-10);
font-size: .75rem; font-size: .75rem;
} }
</style> </style>

4
components/sidebar/sidebar.vue
View File

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

2
components/stashes/heart.vue
View File

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

14
components/stashes/tile.vue
View File

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

2
pages/auth/login/+Page.vue
View File

@ -169,7 +169,7 @@ onMounted(() => {
padding: 0 1rem 0 .5rem; padding: 0 1rem 0 .5rem;
.icon { .icon {
fill: var(--shadow); fill: var(--glass);
} }
&:hover { &:hover {

2
pages/auth/signup/+Page.vue
View File

@ -217,7 +217,7 @@ onMounted(() => {
padding: 0 1rem 0 .5rem; padding: 0 1rem 0 .5rem;
.icon { .icon {
fill: var(--shadow); fill: var(--glass);
} }
&:hover { &:hover {

6
pages/entities/+Page.vue
View File

@ -130,7 +130,7 @@ async function search() {
.icon { .icon {
padding: 0 1rem; padding: 0 1rem;
height: auto; height: auto;
fill: var(--shadow); fill: var(--glass);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -153,7 +153,7 @@ async function search() {
.section-label { .section-label {
padding: 0 1rem; padding: 0 1rem;
margin-bottom: .5rem; margin-bottom: .5rem;
color: var(--shadow); color: var(--glass);
} }
.network { .network {
@ -164,7 +164,7 @@ async function search() {
position: relative; position: relative;
padding: 1rem; padding: 1rem;
border-radius: .5rem; border-radius: .5rem;
background: var(--grey-dark-40); background: var(--shadow-strong-30);
color: var(--text-light); color: var(--text-light);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: bold; font-weight: bold;

4
pages/movies/@movieId/+Page.vue
View File

@ -432,7 +432,7 @@ const scenes = pageContext.pageProps.scenes;
.icon { .icon {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
fill: var(--shadow); fill: var(--glass);
} }
.button { .button {
@ -490,7 +490,7 @@ const scenes = pageContext.pageProps.scenes;
} }
.added-batch { .added-batch {
color: var(--shadow-weak-10); color: var(--glass-weak-10);
margin-left: .25rem; margin-left: .25rem;
} }

21
pages/scene/+Page.vue
View File

@ -154,7 +154,7 @@
<div class="info"> <div class="info">
<ul <ul
v-if="scene.actors.length > 0" v-if="scene.actors.length > 0"
class="actors nolist" class="actors nolist nobar"
> >
<li <li
v-for="actor in scene.actors" v-for="actor in scene.actors"
@ -632,10 +632,15 @@ function copySummary() {
} }
.actors { .actors {
display: grid; display: flex;
flex-grow: 1; flex-grow: 1;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: .25rem; gap: .25rem;
overflow-x: auto;
.actor {
width: 8rem;
flex-shrink: 0;
}
} }
.tag { .tag {
@ -696,7 +701,7 @@ function copySummary() {
} }
.added-batch { .added-batch {
color: var(--shadow-weak-10); color: var(--glass-weak-10);
margin-left: .25rem; margin-left: .25rem;
} }
@ -713,7 +718,7 @@ function copySummary() {
.icon { .icon {
height: auto; height: auto;
padding: 0 .5rem 0 .75rem; padding: 0 .5rem 0 .75rem;
fill: var(--shadow); fill: var(--glass);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -726,13 +731,13 @@ function copySummary() {
display: none; display: none;
} }
@media(--small) { @media(--compact) {
.content { .content {
margin: 0; margin: 0;
} }
.info { .info {
margin: 0 .5rem; margin: 0 .75rem;
} }
.banner-container { .banner-container {
@ -756,7 +761,7 @@ function copySummary() {
.title { .title {
width: 100%; width: 100%;
margin-left: .5rem; margin-left: 1rem;
white-space: wrap; white-space: wrap;
} }

2
pages/search/+Page.vue
View File

@ -151,7 +151,7 @@ const query = pageContext.urlParsed.search.q;
.results-meta { .results-meta {
box-sizing: border-box; box-sizing: border-box;
padding: 1rem 1rem 0 1rem; padding: 1rem 1rem 0 1rem;
color: var(--shadow); color: var(--glass);
font-weight: bold; font-weight: bold;
.link { .link {

4
pages/series/@serieId/+Page.vue
View File

@ -447,7 +447,7 @@ const scenes = pageContext.pageProps.scenes;
.icon { .icon {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
fill: var(--shadow); fill: var(--glass);
} }
.button { .button {
@ -505,7 +505,7 @@ const scenes = pageContext.pageProps.scenes;
} }
.added-batch { .added-batch {
color: var(--shadow-weak-10); color: var(--glass-weak-10);
margin-left: .25rem; margin-left: .25rem;
} }

6
pages/tags/+Page.vue
View File

@ -258,7 +258,7 @@ onMounted(() => {
.icon { .icon {
padding: 0 1rem; padding: 0 1rem;
height: auto; height: auto;
fill: var(--shadow); fill: var(--glass);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -282,7 +282,7 @@ onMounted(() => {
padding: 1rem 1rem 0 1.5rem; padding: 1rem 1rem 0 1.5rem;
margin: 0; margin: 0;
text-transform: capitalize; text-transform: capitalize;
color: var(--shadow); color: var(--glass);
} }
.tag { .tag {
@ -306,7 +306,7 @@ onMounted(() => {
text-transform: capitalize; text-transform: capitalize;
font-size: .9rem; font-size: .9rem;
font-weight: bold; font-weight: bold;
color: var(--shadow-strong-10); color: var(--glass-strong-10);
} }
.thumb-container { .thumb-container {

18
pages/users/@username/+Page.vue
View File

@ -332,7 +332,7 @@ async function removeAlert(alert) {
align-items: center; align-items: center;
padding: .5rem 1rem; padding: .5rem 1rem;
color: var(--highlight-strong-30); color: var(--highlight-strong-30);
background: var(--grey-dark-40); background: var(--shadow-strong-30);
border-radius: 0 0 .5rem .5rem; border-radius: 0 0 .5rem .5rem;
} }
@ -398,10 +398,10 @@ async function removeAlert(alert) {
padding: 0 0 0 .5rem; padding: 0 0 0 .5rem;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
border-bottom: solid 1px var(--shadow-weak-40); border-bottom: solid 1px var(--glass-weak-40);
&:hover { &:hover {
border-color: var(--shadow-weak-30); border-color: var(--glass-weak-30);
} }
} }
@ -412,11 +412,11 @@ async function removeAlert(alert) {
margin-right: .75rem; margin-right: .75rem;
.icon { .icon {
fill: var(--shadow-weak-40); fill: var(--glass-weak-40);
} }
.icon.trigger { .icon.trigger {
fill: var(--shadow-weak-10); fill: var(--glass-weak-10);
} }
} }
@ -424,7 +424,7 @@ async function removeAlert(alert) {
padding: .25rem 0; padding: .25rem 0;
flex-grow: 1; flex-grow: 1;
line-height: 2.5; line-height: 2.5;
color: var(--shadow); color: var(--glass);
&.and .alert-detail:not(:last-child):after { &.and .alert-detail:not(:last-child):after {
content: ' and '; content: ' and ';
@ -440,7 +440,7 @@ async function removeAlert(alert) {
.icon { .icon {
margin-right: .25rem; margin-right: .25rem;
fill: var(--shadow); fill: var(--glass);
transform: translateY(2px); transform: translateY(2px);
} }
} }
@ -474,12 +474,12 @@ async function removeAlert(alert) {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: .9rem; font-size: .9rem;
color: var(--shadow-weak-10); color: var(--glass-weak-10);
.icon { .icon {
height: 100%; height: 100%;
padding: 0 .75rem; padding: 0 .75rem;
fill: var(--shadow); fill: var(--glass);
&:hover { &:hover {
cursor: pointer; cursor: pointer;

2
renderer/app.js
View File

@ -32,7 +32,7 @@ function createApp(Page, pageProps, pageContext) {
app.provide('pageContext', pageContext); app.provide('pageContext', pageContext);
app.use(FloatingVue); app.use(FloatingVue, { container: '#container' });
app.use(VueVirtualScroller); app.use(VueVirtualScroller);
app.component('Link', Link); app.component('Link', Link);

9
renderer/container.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div <div
id="container"
class="container" class="container"
:class="{ [theme]: true }"
@click="blur" @click="blur"
> >
<transition name="slide"> <transition name="slide">
@ -65,6 +67,7 @@ import BottomNavigation from '#/components/footer/navigation.vue';
const pageContext = inject('pageContext'); const pageContext = inject('pageContext');
const { psa } = pageContext.env; const { psa } = pageContext.env;
const theme = ref(pageContext.env.theme);
const content = ref(null); const content = ref(null);
const feedback = ref(null); const feedback = ref(null);
@ -108,6 +111,10 @@ onMounted(() => {
easing: 'ease-in-out', easing: 'ease-in-out',
}); });
}); });
events.on('theme', (newTheme) => {
theme.value = newTheme;
});
}); });
</script> </script>
@ -159,6 +166,8 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background: var(--background);
color: var(--text);
} }
.content { .content {

9
src/actors.js
View File

@ -167,6 +167,7 @@ function curateOptions(options) {
return { return {
page: options?.page || 1, page: options?.page || 1,
limit: options?.limit || 30, limit: options?.limit || 30,
aggregateCountries: true,
requireAvatar: options?.requireAvatar || false, requireAvatar: options?.requireAvatar || false,
order: [escape(options.order?.[0]) || 'name', escape(options.order?.[1]) || 'asc'], order: [escape(options.order?.[0]) || 'name', escape(options.order?.[1]) || 'asc'],
}; };
@ -312,7 +313,7 @@ async function queryManticoreSql(filters, options, _reqUser) {
.offset((options.page - 1) * options.limit) .offset((options.page - 1) * options.limit)
.toString(), .toString(),
// option threads=1 fixes actors, but drastically slows down performance, wait for fix // option threads=1 fixes actors, but drastically slows down performance, wait for fix
countriesFacet: options.aggregateActors ? knex.raw('facet actors.country order by count(*) desc limit 300', [aggSize]) : null, countriesFacet: options.aggregateCountries ? knex.raw('facet actors.country order by count(*) desc limit :aggSize', { aggSize }) : null,
maxMatches: config.database.manticore.maxMatches, maxMatches: config.database.manticore.maxMatches,
maxQueryTime: config.database.manticore.maxQueryTime, maxQueryTime: config.database.manticore.maxQueryTime,
}).toString(); }).toString();
@ -328,11 +329,9 @@ async function queryManticoreSql(filters, options, _reqUser) {
const results = await utilsApi.sql(curatedSqlQuery); const results = await utilsApi.sql(curatedSqlQuery);
// console.log(results[0]);
const countries = results const countries = results
.find((result) => (result.columns[0].actor_ids || result.columns[0]['scenes.country']) && result.columns[1]['count(*)']) .find((result) => (result.columns[0].country || result.columns[0]['actors.country']) && result.columns[1]['count(*)'])
?.data.map((row) => ({ key: row.actor_ids || row['scenes.country'], doc_count: row['count(*)'] })) ?.data.map((row) => ({ key: row.country || row['actors.country'], doc_count: row['count(*)'] })).filter((country) => !!country.key)
|| []; || [];
const total = Number(results.at(-1).data.find((entry) => entry.Variable_name === 'total_found').Value); const total = Number(results.at(-1).data.find((entry) => entry.Variable_name === 'total_found').Value);

11
src/web/server.js
View File

@ -175,6 +175,16 @@ export default async function initServer() {
// TAGS // TAGS
router.get('/api/tags', fetchTagsApi); router.get('/api/tags', fetchTagsApi);
router.use((req, res, next) => {
/* eslint-disable no-param-reassign */
res.set('Accept-CH', 'Sec-CH-Prefers-Color-Scheme');
res.set('Vary', 'Sec-CH-Prefers-Color-Scheme');
res.set('Critical-CH', 'Sec-CH-Prefers-Color-Scheme');
/* eslint-enable no-param-reassign */
next();
});
router.get('*', async (req, res, next) => { router.get('*', async (req, res, next) => {
const unseenNotifications = await fetchUnseenNotificationsCount(req.user); const unseenNotifications = await fetchUnseenNotificationsCount(req.user);
@ -193,6 +203,7 @@ export default async function initServer() {
primaryStash: req.user.primaryStash, primaryStash: req.user.primaryStash,
}, },
env: { env: {
theme: req.cookies.theme || req.headers['sec-ch-prefers-color-scheme'] || 'light',
allowLogin: config.auth.login, allowLogin: config.auth.login,
allowSignup: config.auth.signup, allowSignup: config.auth.signup,
maxMatches: config.database.manticore.maxMatches, maxMatches: config.database.manticore.maxMatches,