Added actor stash.
This commit is contained in:
@@ -1,30 +1,297 @@
|
||||
<template>
|
||||
<ul class="actors nolist">
|
||||
<li
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
class="actor"
|
||||
>
|
||||
<ActorTile :actor="actor" />
|
||||
</li>
|
||||
</ul>
|
||||
<div class="page">
|
||||
<Filters :results="total">
|
||||
<div class="filter">
|
||||
<input
|
||||
v-model="q"
|
||||
type="search"
|
||||
placeholder="Search actors"
|
||||
class="input search"
|
||||
@search="search"
|
||||
>
|
||||
</div>
|
||||
|
||||
<GenderFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<BirthdateFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<BoobsFilter
|
||||
:filters="filters"
|
||||
:cup-range="cupRange"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<PhysiqueFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<CountryFilter
|
||||
:filters="filters"
|
||||
:countries="countries"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<div class="filter">
|
||||
<Checkbox
|
||||
:checked="filters.avatarRequired"
|
||||
label="Require photo"
|
||||
@change="(checked) => updateFilter('avatarRequired', checked, true)"
|
||||
/>
|
||||
</div>
|
||||
</Filters>
|
||||
|
||||
<div class="actors-container">
|
||||
<div class="actors-header">
|
||||
<div class="meta">
|
||||
<span class="count">{{ total }} results</span>
|
||||
|
||||
<select
|
||||
v-model="order"
|
||||
class="input"
|
||||
@change="search({ autoScope: false })"
|
||||
>
|
||||
<option
|
||||
v-if="pageStash"
|
||||
:selected="order === 'stashed.desc'"
|
||||
value="stashed.desc"
|
||||
>Added</option>
|
||||
|
||||
<option
|
||||
v-if="q"
|
||||
:selected="order === 'relevance.desc'"
|
||||
value="relevance.desc"
|
||||
>Relevance</option>
|
||||
|
||||
<option value="name.asc">Name</option>
|
||||
<option value="likes.desc">Likes</option>
|
||||
<option value="scenes.desc">Scenes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="actors nolist">
|
||||
<li
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
>
|
||||
<ActorTile
|
||||
:actor="actor"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Pagination
|
||||
:page="currentPage"
|
||||
:total="total"
|
||||
:redirect="false"
|
||||
@navigation="paginate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ActorTile from './tile.vue';
|
||||
import { ref, inject } from 'vue';
|
||||
import { format, subYears } from 'date-fns';
|
||||
import { parse } from 'path-to-regexp';
|
||||
|
||||
defineProps({
|
||||
actors: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
import navigate from '#/src/navigate.js';
|
||||
import { get } from '#/src/api.js';
|
||||
import events from '#/src/events.js';
|
||||
|
||||
import ActorTile from '#/components/actors/tile.vue';
|
||||
import Pagination from '#/components/pagination/pagination.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
import Filters from '#/components/filters/filters.vue';
|
||||
import GenderFilter from '#/components/filters/gender.vue';
|
||||
import BirthdateFilter from '#/components/filters/birthdate.vue';
|
||||
import BoobsFilter from '#/components/filters/boobs.vue';
|
||||
import PhysiqueFilter from '#/components/filters/physique.vue';
|
||||
import CountryFilter from '#/components/filters/country.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { pageProps, urlParsed, routeParams } = pageContext;
|
||||
|
||||
const q = ref(urlParsed.search.q);
|
||||
const actors = ref([]);
|
||||
const pageStash = pageProps.stash;
|
||||
const countries = ref(pageProps.countries);
|
||||
const cupRange = ref(pageProps.cupRange);
|
||||
|
||||
actors.value = pageProps.actors;
|
||||
|
||||
const currentPage = ref(Number(routeParams.page));
|
||||
const total = ref(Number(pageProps.total));
|
||||
const order = ref(routeParams.order || urlParsed.search.order || 'likes.desc');
|
||||
|
||||
const filters = ref({
|
||||
gender: urlParsed.search.gender,
|
||||
ageRequired: !!urlParsed.search.age,
|
||||
age: urlParsed.search.age?.split(',').map((age) => Number(age)) || [18, 100],
|
||||
dobRequired: !!urlParsed.search.dob,
|
||||
dobType: urlParsed.search.dobt ? ({ bd: 'birthday', dob: 'dob' })[urlParsed.search.dobt] : 'birthday',
|
||||
dob: urlParsed.search.dob || format(subYears(new Date(), 21), 'yyyy-MM-dd'),
|
||||
country: urlParsed.search.c,
|
||||
braSizeRequired: !!urlParsed.search.cup,
|
||||
braSize: urlParsed.search.cup?.split(',') || ['A', 'Z'],
|
||||
naturalBoobs: urlParsed.search.nb ? urlParsed.search.nb === 'true' : undefined,
|
||||
heightRequired: !!urlParsed.search.height,
|
||||
height: urlParsed.search.height?.split(',').map((height) => Number(height)) || [50, 220],
|
||||
weightRequired: !!urlParsed.search.weight,
|
||||
weight: urlParsed.search.weight?.split(',').map((weight) => Number(weight)) || [30, 200],
|
||||
avatarRequired: !!urlParsed.search.avatar,
|
||||
});
|
||||
|
||||
function getPath(preserveQuery) {
|
||||
const path = parse(routeParams.path).map((segment) => {
|
||||
if (segment.name === 'page') {
|
||||
return `${segment.prefix}${1}`;
|
||||
}
|
||||
|
||||
return `${segment.prefix || ''}${routeParams[segment.name] || segment}`;
|
||||
}).join('');
|
||||
|
||||
if (preserveQuery && urlParsed.searchOriginal) {
|
||||
return `${path}${urlParsed.searchOriginal}`;
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
async function search(options = {}) {
|
||||
if (options.resetPage !== false) {
|
||||
currentPage.value = 1;
|
||||
}
|
||||
|
||||
if (options.autoScope !== false) {
|
||||
if (q.value) {
|
||||
order.value = 'relevance.desc';
|
||||
}
|
||||
|
||||
if (!q.value && order.value.includes('relevance')) {
|
||||
order.value = 'likes.desc';
|
||||
}
|
||||
}
|
||||
|
||||
const query = {
|
||||
q: q.value || undefined,
|
||||
order: order.value,
|
||||
gender: filters.value.gender || undefined,
|
||||
age: filters.value.ageRequired ? filters.value.age.join(',') : undefined,
|
||||
dob: filters.value.dobRequired ? filters.value.dob : undefined,
|
||||
dobt: filters.value.dobRequired ? ({ birthday: 'bd', dob: 'dob' })[filters.value.dobType] : undefined,
|
||||
cup: filters.value.braSizeRequired ? filters.value.braSize.join(',') : undefined,
|
||||
c: filters.value.country || undefined,
|
||||
nb: filters.value.naturalBoobs,
|
||||
height: filters.value.heightRequired ? filters.value.height.join(',') : undefined,
|
||||
weight: filters.value.weightRequired ? filters.value.weight.join(',') : undefined,
|
||||
avatar: filters.value.avatarRequired || undefined,
|
||||
stashId: pageStash?.id,
|
||||
};
|
||||
|
||||
navigate(getPath(false), query, { redirect: false });
|
||||
|
||||
const res = await get('/actors', {
|
||||
...query,
|
||||
page: currentPage.value, // client uses param rather than query pagination
|
||||
});
|
||||
|
||||
actors.value = res.actors;
|
||||
total.value = res.total;
|
||||
|
||||
countries.value = res.countries;
|
||||
|
||||
events.emit('scrollUp');
|
||||
}
|
||||
|
||||
function paginate({ page }) {
|
||||
currentPage.value = page;
|
||||
|
||||
search({ resetPage: false });
|
||||
}
|
||||
|
||||
function updateFilter(prop, value, reload = true) {
|
||||
filters.value[prop] = value;
|
||||
|
||||
if (reload) {
|
||||
search();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.actors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 10rem);
|
||||
gap: .5rem;
|
||||
<style>
|
||||
.gender-button {
|
||||
&.selected .gender .icon {
|
||||
fill: var(--text-light);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&:hover:not(.selected) {
|
||||
.gender .icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
|
||||
.male .icon {
|
||||
filter: drop-shadow(0 0 1px var(--male));
|
||||
}
|
||||
|
||||
.female .icon {
|
||||
filter: drop-shadow(0 0 1px var(--female));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.selected) .transsexual .icon {
|
||||
fill: var(--female);
|
||||
filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.actors-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 0 .25rem 2rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actors-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.actors {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
@media(--small-40) {
|
||||
.actors {
|
||||
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,40 @@
|
||||
<template>
|
||||
<div class="actor">
|
||||
<div
|
||||
class="tile"
|
||||
:class="{
|
||||
unstashed: !favorited && pageStash && user && pageStash.id === user.primaryStash?.id
|
||||
}"
|
||||
>
|
||||
<span class="name">{{ actor.name }}</span>
|
||||
|
||||
<Link
|
||||
:href="`/actor/${actor.id}/${actor.slug}`"
|
||||
class="avatar-link no-link"
|
||||
>
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
|
||||
loading="lazy"
|
||||
class="avatar"
|
||||
<div class="avatar-container">
|
||||
<Link
|
||||
:href="`/actor/${actor.id}/${actor.slug}`"
|
||||
class="avatar-link no-link"
|
||||
>
|
||||
</Link>
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
|
||||
loading="lazy"
|
||||
class="avatar"
|
||||
>
|
||||
</Link>
|
||||
|
||||
<Icon
|
||||
v-show="favorited"
|
||||
icon="heart7"
|
||||
class="heart favorited"
|
||||
@click.native.stop="unstash"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="!favorited && user"
|
||||
icon="heart8"
|
||||
class="heart"
|
||||
@click.native.stop="stash"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="details">
|
||||
<span class="birth">
|
||||
@@ -48,20 +69,72 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
|
||||
import { formatDate } from '#/utils/format.js';
|
||||
import { post, del } from '#/src/api.js';
|
||||
import events from '#/src/events.js';
|
||||
|
||||
import Gender from './gender.vue';
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
actor: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { user } = pageContext;
|
||||
const pageStash = pageContext.pageProps.stash;
|
||||
|
||||
// console.log(props.actor);
|
||||
|
||||
const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
|
||||
|
||||
async function stash() {
|
||||
try {
|
||||
favorited.value = true;
|
||||
await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: props.actor.id });
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'success',
|
||||
message: `${props.actor.name} stashed to ${user.primaryStash.name}`,
|
||||
});
|
||||
} catch (error) {
|
||||
favorited.value = false;
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'error',
|
||||
message: `Failed to stash ${props.actor.name} to ${user.primaryStash.name}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function unstash() {
|
||||
try {
|
||||
favorited.value = false;
|
||||
await del(`/stashes/${user.primaryStash.id}/actors/${props.actor.id}`);
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'remove',
|
||||
message: `${props.actor.name} unstashed from ${user.primaryStash.name}`,
|
||||
});
|
||||
} catch (error) {
|
||||
favorited.value = true;
|
||||
|
||||
console.error(error);
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'error',
|
||||
message: `Failed to unstash ${props.actor.name} from ${user.primaryStash.name}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.actor {
|
||||
.tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@@ -79,6 +152,10 @@ defineProps({
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.unstashed {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -92,9 +169,14 @@ defineProps({
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
display: block;
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -107,6 +189,26 @@ defineProps({
|
||||
background-position: center 0;
|
||||
}
|
||||
|
||||
.icon.heart {
|
||||
width: 2rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .5rem .5rem 1rem 1rem;
|
||||
fill: var(--highlight-strong-10);
|
||||
filter: drop-shadow(0 0 3px var(--shadow));
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&.favorited {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
:href="`/user/${user.username}`"
|
||||
class="menu-button nolink"
|
||||
>
|
||||
<Icon icon="vcard" />
|
||||
<Icon icon="user7" />
|
||||
View profile
|
||||
</a>
|
||||
</li>
|
||||
@@ -332,7 +332,7 @@ async function logout() {
|
||||
.menu-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem .5rem .5rem .75rem;
|
||||
padding: .75rem .5rem .75rem .75rem;
|
||||
font-size: 1.1rem;
|
||||
|
||||
.icon {
|
||||
@@ -342,8 +342,16 @@ async function logout() {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--shadow-weak-30);
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.logout) .icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&.logout {
|
||||
color: var(--error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
<option value="latest">Latest</option>
|
||||
<option value="upcoming">Upcoming</option>
|
||||
<option value="new">New</option>
|
||||
<option value="likes">Likes</option>
|
||||
<option value="likes">Popular</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -110,6 +110,8 @@ import { ref, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import { post, del } from '#/src/api.js';
|
||||
import events from '#/src/events.js';
|
||||
import ellipsis from '#/utils/ellipsis.js';
|
||||
|
||||
import Icon from '../icon/icon.vue';
|
||||
|
||||
@@ -125,23 +127,47 @@ const user = pageContext.user;
|
||||
const pageStash = pageContext.pageProps.stash;
|
||||
|
||||
const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.primary));
|
||||
const fbCutoff = 20;
|
||||
|
||||
async function stash() {
|
||||
try {
|
||||
favorited.value = true;
|
||||
|
||||
await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: props.scene.id });
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'success',
|
||||
message: `"${ellipsis(props.scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
|
||||
});
|
||||
} catch (error) {
|
||||
favorited.value = false;
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'error',
|
||||
message: `Failed to stash "${ellipsis(props.scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function unstash() {
|
||||
try {
|
||||
favorited.value = false;
|
||||
|
||||
await del(`/stashes/${user.primaryStash.id}/scenes/${props.scene.id}`);
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'remove',
|
||||
message: `"${ellipsis(props.scene.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
favorited.value = true;
|
||||
|
||||
console.error(error);
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'error',
|
||||
message: `Failed to unstash "${ellipsis(props.scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
158
components/stashes/stash.vue
Normal file
158
components/stashes/stash.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="stash">
|
||||
<div class="header">
|
||||
<h2 class="title">
|
||||
<Icon
|
||||
v-if="stash.primary"
|
||||
icon="heart7"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
icon="box"
|
||||
/>
|
||||
|
||||
{{ stash.name }}
|
||||
</h2>
|
||||
|
||||
<a
|
||||
:href="`/user/${stash.user.username}`"
|
||||
class="user nolink"
|
||||
>
|
||||
<img
|
||||
:src="stash.user.avatar"
|
||||
class="avatar"
|
||||
><span class="userame ellipsis">{{ stash.user.username }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<nav class="domains">
|
||||
<Link
|
||||
:href="getPath('scenes')"
|
||||
class="domain nolink"
|
||||
:active="domain === 'scenes'"
|
||||
>Scenes</Link>
|
||||
|
||||
<Link
|
||||
:href="getPath('actors')"
|
||||
class="domain nolink"
|
||||
:active="domain === 'actors'"
|
||||
>Actors</Link>
|
||||
|
||||
<Link
|
||||
:href="getPath('movies')"
|
||||
class="domain nolink"
|
||||
:active="domain === 'movies'"
|
||||
>Movies</Link>
|
||||
</nav>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { routeParams } = pageContext;
|
||||
|
||||
const domain = routeParams.domain;
|
||||
const stash = pageContext.pageProps.stash;
|
||||
|
||||
function getPath(targetDomain) {
|
||||
return `/stash/${stash.user.username}/${stash.slug}/${targetDomain}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stash {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
color: var(--text-light);
|
||||
background: var(--grey-dark-40);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 1rem;
|
||||
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: .75rem;
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: .75rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.scenes-container {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.domains {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.domain {
|
||||
box-sizing: border-box;
|
||||
padding: .5rem 1rem;
|
||||
background: var(--background-dark-20);
|
||||
border-radius: 1rem;
|
||||
color: var(--shadow);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
|
||||
&.active {
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media(--small-50) {
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user