resources/assets/components/partials/navbar.vue
<template>
<nav class="metro-nav navbar navbar-expand navbar-light navbar-laravel sticky-top shadow-none py-1">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="/i/web" title="Logo">
<img src="/img/pixelfed-icon-color.svg" height="30px" class="px-2" loading="eager" alt="Pixelfed logo">
<span class="font-weight-bold mb-0 d-none d-sm-block" style="font-size:20px;">
{{ brandName }}
</span>
</a>
<div class="collapse navbar-collapse">
<div class="navbar-nav ml-auto">
<!-- <form class="form-inline search-bar" method="get" action="/i/results">
<input class="form-control" name="q" placeholder="Search ..." aria-label="search" autocomplete="off" required style="position: relative;line-height: 0.6;width:100%;min-width: 300px;max-width: 500px;border-radius: 8px;" role="search">
</form> -->
<autocomplete
class="searchbox"
:search="autocompleteSearch"
:placeholder="$t('navmenu.search')"
aria-label="Search"
:get-result-value="getSearchResultValue"
:debounceTime="700"
@submit="onSearchSubmit"
ref="autocomplete">
<template #result="{ result, props }">
<li
v-bind="props"
class="autocomplete-result sr"
>
<div v-if="result.s_type === 'account'" class="media align-items-center my-0">
<img :src="result.avatar" width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">
<div class="media-body sr-account">
<div class="sr-account-acct" :class="{ compact: result.acct && result.acct.length > 24 }">
@{{ result.acct }}
<b-button
v-if="result.locked"
v-b-tooltip.html
title="Private Account"
variant="link"
size="sm"
class="p-0"
>
<i class="far fa-lock fa-sm text-lighter ml-1"></i>
</b-button>
</div>
<template v-if="result.is_admin">
<div class="sr-account-stats">
<div class="sr-account-stats-followers text-danger font-weight-bold">
Admin
</div>
<div>·</div>
<div class="sr-account-stats-followers font-weight-bold">
<span>{{ formatCount(result.followers_count) }}</span>
<span>Followers</span>
</div>
</div>
</template>
<template v-else>
<template v-if="result.local">
<div class="sr-account-stats">
<div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
<span>{{ formatCount(result.followers_count) }}</span>
<span>Followers</span>
</div>
<div v-if="result.followers_count && result.statuses_count">·</div>
<div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
<span>{{ formatCount(result.statuses_count) }}</span>
<span>Posts</span>
</div>
<div v-if="!result.followers_count && result.statuses_count">·</div>
<div class="sr-account-stats-statuses font-weight-bold">
<i class="far fa-clock fa-sm"></i>
<span>{{ timeAgo(result.created_at) }}</span>
</div>
</div>
</template>
<template v-else>
<div class="sr-account-stats">
<div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
<span>{{ formatCount(result.followers_count) }}</span>
<span>Followers</span>
</div>
<div v-if="result.followers_count && result.statuses_count">·</div>
<div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
<span>{{ formatCount(result.statuses_count) }}</span>
<span>Posts</span>
</div>
<div v-if="!result.followers_count && result.statuses_count">·</div>
<div v-if="!result.followers_count && !result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
Remote Account
</div>
<div v-if="!result.followers_count && !result.statuses_count">
·
</div>
<b-button
v-b-tooltip.html
:title="'Joined ' + timeAgo(result.created_at) + ' ago'"
variant="link"
size="sm"
class="sr-account-stats-statuses p-0"
>
<i class="far fa-clock fa-sm"></i>
<span class="font-weight-bold">{{ timeAgo(result.created_at) }}</span>
</b-button>
</div>
</template>
</template>
</div>
</div>
<div v-else-if="result.s_type === 'hashtag'" class="media align-items-center my-0">
<div class="media-icon">
<i class="far fa-hashtag fa-large"></i>
</div>
<div class="media-body sr-tag">
<div class="sr-tag-name" :class="{ compact: result.name && result.name.length > 26 }">
#{{ result.name }}
</div>
<div v-if="result.count && result.count > 100" class="sr-tag-count">
{{ formatCount(result.count) }} {{ result.count == 1 ? 'Post' : 'Posts' }}
</div>
</div>
</div>
<div v-else-if="result.s_type === 'status'" class="media align-items-center my-0">
<img :src="result.account.avatar" width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">
<div class="media-body sr-post">
<div class="sr-post-acct" :class="{ compact: result.acct && result.acct.length > 26 }">
@{{ truncate(result.account.acct, 20) }}
<b-button
v-if="result.locked"
v-b-tooltip.html
title="Private Account"
variant="link"
size="sm"
class="p-0"
>
<i class="far fa-lock fa-sm text-lighter ml-1"></i>
</b-button>
</div>
<div class="sr-post-action">
<div class="sr-post-action-timestamp">
<i class="far fa-clock fa-sm"></i>
{{ timeAgo(result.created_at)}}
</div>
<div>·</div>
<div class="sr-post-action-label">
Tap to view post
</div>
</div>
</div>
</div>
</li>
</template>
</autocomplete>
</div>
<div class="ml-auto">
<ul class="navbar-nav align-items-center">
<!-- <li class="nav-item px-md-2 d-none d-md-block">
<router-link class="nav-link font-weight-bold text-dark" to="/i/web" title="Home" data-toggle="tooltip" data-placement="bottom">
<i class="far fa-home fa-lg"></i>
<span class="sr-only">Home</span>
</router-link>
</li>
<li class="nav-item px-md-2 d-none d-md-block">
<router-link class="nav-link font-weight-bold text-dark" title="Compose" data-toggle="tooltip" data-placement="bottom" to="/i/web/compose">
<i class="far fa-plus-square fa-lg"></i>
<span class="sr-only">Compose</span>
</router-link>
</li> -->
<!-- <li class="nav-item px-md-2">
<router-link class="nav-link font-weight-bold text-dark" to="/i/web/direct" title="Direct" data-toggle="tooltip" data-placement="bottom">
<i class="far fa-comment-dots fa-lg"></i>
<span class="sr-only">Direct</span>
</router-link>
</li>
<li class="nav-item px-md-2 d-none d-md-block">
<router-link class="nav-link font-weight-bold text-dark fa-layers fa-fw" to="/i/web/notifications" title="Notifications" data-toggle="tooltip" data-placement="bottom">
<i class="far fa-bell fa-lg"></i>
<span class="fa-layers-counter" style="background:Tomato"></span>
<span class="sr-only">Notifications</span>
</router-link>
</li> -->
<li class="nav-item dropdown ml-2">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Menu">
<i class="d-none far fa-user fa-lg text-dark"></i>
<span class="sr-only">User Menu</span>
<img :src="user.avatar" class="nav-avatar rounded-circle border shadow" width="30" height="30" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
</a>
<div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="navbarDropdown">
<ul class="nav flex-column">
<li class="nav-item nav-icons">
<div class="d-flex justify-content-between align-items-center">
<router-link class="nav-link text-center" to="/i/web">
<div class="icon text-lighter"><i class="far fa-home fa-lg"></i></div>
<div class="small">{{ $t('navmenu.homeFeed') }}</div>
</router-link>
<router-link v-if="hasLocalTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'local' } }">
<div class="icon text-lighter"><i class="fas fa-stream fa-lg"></i></div>
<div class="small">{{ $t('navmenu.localFeed') }}</div>
</router-link>
<router-link v-if="hasNetworkTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'global' } }">
<div class="icon text-lighter"><i class="far fa-globe fa-lg"></i></div>
<div class="small">{{ $t('navmenu.globalFeed') }}</div>
</router-link>
</div>
</li>
<li class="nav-item nav-icons">
<div class="d-flex justify-content-between align-items-center">
<router-link class="nav-link text-center" to="/i/web/discover">
<div class="icon text-lighter"><i class="far fa-compass"></i></div>
<div class="small">{{ $t('navmenu.discover') }}</div>
</router-link>
<router-link class="nav-link text-center" to="/i/web/notifications">
<div class="icon text-lighter">
<i class="far fa-bell"></i>
</div>
<div class="small">
{{ $t('navmenu.notifications') }}
</div>
</router-link>
<router-link class="nav-link text-center px-3" :to="'/i/web/profile/' + user.id">
<div class="icon text-lighter">
<i class="far fa-user"></i>
</div>
<div class="small">{{ $t('navmenu.profile') }}</div>
</router-link>
</div>
<hr class="mb-0" style="margin-top: -5px;opacity: 0.4;" />
</li>
<li class="nav-item">
<router-link class="nav-link" to="/i/web/compose">
<span class="icon text-lighter"><i class="far fa-plus-square"></i></span>
{{ $t('navmenu.compose') }}
</router-link>
</li>
<!-- <li class="nav-item">
<router-link class="nav-link" to="/i/web/discover">
<span class="icon text-lighter"><i class="far fa-compass"></i></span>
{{ $t('navmenu.discover') }}
</router-link>
</li> -->
<li class="nav-item">
<router-link class="nav-link d-flex justify-content-between align-items-center" to="/i/web/direct">
<span>
<span class="icon text-lighter">
<i class="far fa-envelope"></i>
</span>
{{ $t('navmenu.directMessages') }}
</span>
<!-- <span class="badge badge-danger font-weight-light rounded-pill px-2" style="transform:scale(0.86)">99+</span> -->
</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="/i/web" @click.prevent="openUserInterfaceSettings">
<span class="icon text-lighter"><i class="far fa-brush"></i></span>
UI Settings
</a>
</li>
<!-- <li class="nav-item">
<router-link class="nav-link d-flex justify-content-between align-items-center" to="/i/web/notifications">
<span>
<span class="icon text-lighter">
<i class="far fa-bell"></i>
</span>
{{ $t('navmenu.notifications') }}
</span>
</router-link>
</li> -->
<!-- <li class="nav-item">
<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
<router-link class="nav-link" :to="'/i/web/profile/' + user.id">
<span class="icon text-lighter">
<i class="far fa-user"></i>
</span>
{{ $t('navmenu.profile') }}
</router-link>
</li> -->
<li v-if="user.is_admin" class="nav-item">
<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
<a class="nav-link" href="/i/admin/dashboard">
<span class="icon text-lighter">
<i class="far fa-tools"></i>
</span>
{{ $t('navmenu.admin') }}
</a>
</li>
<li class="nav-item">
<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
<a class="nav-link" href="/">
<span class="icon text-lighter">
<i class="fas fa-chevron-left"></i>
</span>
{{ $t('navmenu.backToPreviousDesign') }}
</a>
</li>
<li class="nav-item">
<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
<a class="nav-link" href="/" @click.prevent="logout()">
<span class="icon text-lighter">
<i class="far fa-sign-out"></i>
</span>
{{ $t('navmenu.logout') }}
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<b-modal
ref="uis"
hide-footer
centered
body-class="p-0 ui-menu"
title="UI Settings">
<div class="list-group list-group-flush">
<div class="list-group-item px-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="font-weight-bold mb-1">Theme</p>
<p class="small text-muted mb-0"></p>
</div>
<div class="btn-group btn-group-sm">
<button
class="btn"
:class="[ uiColorScheme == 'system' ? 'btn-primary' : 'btn-outline-primary']"
@click="toggleUi('system')">
Auto
</button>
<button
class="btn"
:class="[ uiColorScheme == 'light' ? 'btn-primary' : 'btn-outline-primary']"
@click="toggleUi('light')">
Light mode
</button>
<button
class="btn"
:class="[ uiColorScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary']"
@click="toggleUi('dark')">
Dark mode
</button>
</div>
</div>
</div>
<div class="list-group-item px-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="font-weight-bold mb-1">Profile Layout</p>
<p class="small text-muted mb-0"></p>
</div>
<div class="btn-group btn-group-sm">
<button
class="btn"
:class="[ profileLayout == 'grid' ? 'btn-primary' : 'btn-outline-primary']"
@click="toggleProfileLayout('grid')">
Grid
</button>
<button
class="btn"
:class="[ profileLayout == 'masonry' ? 'btn-primary' : 'btn-outline-primary']"
@click="toggleProfileLayout('masonry')">
Masonry
</button>
<button
class="btn"
:class="[ profileLayout == 'feed' ? 'btn-primary' : 'btn-outline-primary']"
@click="toggleProfileLayout('feed')">
Feed
</button>
</div>
</div>
</div>
<div class="list-group-item px-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="font-weight-bold mb-0">Compact Media Previews</p>
</div>
<b-form-checkbox v-model="fixedHeight" switch size="lg" />
</div>
</div>
<div class="list-group-item px-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="font-weight-bold mb-0">Load Comments</p>
</div>
<b-form-checkbox v-model="autoloadComments" switch size="lg" />
</div>
</div>
<div class="list-group-item px-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="font-weight-bold mb-0">Hide Counts & Stats</p>
</div>
<b-form-checkbox v-model="hideCounts" switch size="lg" />
</div>
</div>
</div>
</b-modal>
</nav>
</template>
<script type="text/javascript">
import Autocomplete from '@trevoreyre/autocomplete-vue'
import '@trevoreyre/autocomplete-vue/dist/style.css'
export default {
components: {
Autocomplete
},
data() {
return {
brandName: 'pixelfed',
user: window._sharedData.user,
profileLayoutModel: 'grid',
hasLocalTimeline: true,
hasNetworkTimeline: false
}
},
computed: {
profileLayout: {
get() {
return this.$store.state.profileLayout;
},
set(val) {
this.$store.commit('setProfileLayout', val);
}
},
hideCounts: {
get() {
return this.$store.state.hideCounts;
},
set(val) {
this.$store.commit('setHideCounts', val);
}
},
autoloadComments: {
get() {
return this.$store.state.autoloadComments;
},
set(val) {
this.$store.commit('setAutoloadComments', val);
}
},
newReactions: {
get() {
return this.$store.state.newReactions;
},
set(val) {
this.$store.commit('setNewReactions', val);
}
},
fixedHeight: {
get() {
return this.$store.state.fixedHeight;
},
set(val) {
this.$store.commit('setFixedHeight', val);
}
},
uiColorScheme: {
get() {
return this.$store.state.colorScheme;
},
set(val) {
this.$store.commit('setColorScheme', val);
}
}
},
mounted() {
if(window.App.config.features.hasOwnProperty('timelines')) {
this.hasLocalTimeline = App.config.features.timelines.local;
this.hasNetworkTimeline = App.config.features.timelines.network;
}
let u = new URLSearchParams(window.location.search);
if(u.has('q') && u.get('q') && u.has('src') && u.get('src') === 'ac') {
this.$refs.autocomplete.setValue(u.get('q'));
setTimeout(() => {
let ai = document.querySelector('.autocomplete-input')
ai.focus();
}, 1000)
}
this.brandName = window.App.config.site.name;
},
methods: {
autocompleteSearch(q) {
if (!q || q.length < 2) {
return [];
}
let resolve = q.startsWith('https://') || q.startsWith('@');
return axios.get('/api/v2/search', {
params: {
q: q,
resolve: resolve,
'_pe': 1
}
}).then(res => {
let results = [];
let accounts = res.data.accounts.map(res => {
let account = res;
account.s_type = 'account';
return account;
});
let hashtags = res.data.hashtags.map(res => {
let tag = res;
tag.s_type = 'hashtag';
return tag;
})
// let statuses = res.data.statuses.map(res => {
// let status = res;
// status.s_type = 'status';
// return status;
// });
// results.push(...statuses.slice(0,5));
results.push(...accounts.slice(0,5));
results.push(...hashtags.slice(0,5));
if(res.data.statuses) {
if(Array.isArray(res.data.statuses)) {
let statuses = res.data.statuses.map(res => {
let status = res;
status.s_type = 'status';
return status;
});
results.push(...statuses);
} else {
if(q === res.data.statuses.url) {
this.$refs.autocomplete.value = '';
this.$router.push({
name: 'post',
path: `/i/web/post/${res.data.statuses.id}`,
params: {
id: res.data.statuses.id,
cachedStatus: res.data.statuses,
cachedProfile: this.user
}
});
}
}
}
return results;
});
},
getSearchResultValue(result) {
return result;
},
onSearchSubmit(result) {
if (result.length < 1) {
return;
}
this.$refs.autocomplete.value = '';
switch(result.s_type) {
case 'account':
// this.$router.push({
// name: 'profile',
// path: `/i/web/profile/${result.id}`,
// params: {
// id: result.id,
// cachedProfile: result,
// cachedUser: this.user
// }
// });
location.href = `/i/web/profile/${result.id}`;
break;
case 'hashtag':
// this.$router.push({
// name: 'hashtag',
// path: `/i/web/hashtag/${result.name}`,
// params: {
// id: result.name,
// }
// });
location.href = `/i/web/hashtag/${result.name}`;
break;
case 'status':
// this.$router.push({
// name: 'post',
// path: `/i/web/post/${result.id}`,
// params: {
// id: result.id,
// }
// });
location.href = `/i/web/post/${result.id}`;
break;
}
},
truncate(text, limit = 30) {
if(text.length <= limit) {
return text;
}
return text.slice(0, limit) + '...'
},
timeAgo(ts) {
return window.App.util.format.timeAgo(ts);
},
formatCount(val) {
if(!val) {
return 0;
}
return new Intl.NumberFormat('en-CA', { notation: 'compact' , compactDisplay: "short" }).format(val);
},
logout() {
axios.post('/logout')
.then(res => {
location.href = '/';
}).catch(err => {
location.href = '/';
})
},
openUserInterfaceSettings() {
event.currentTarget.blur();
this.$refs.uis.show();
},
toggleUi(ui) {
event.currentTarget.blur();
this.uiColorScheme = ui;
},
toggleProfileLayout(layout) {
event.currentTarget.blur();
this.profileLayout = layout;
}
}
}
</script>
<style lang="scss">
.metro-nav {
z-index: 4;
.dropdown-menu {
min-width: 18rem;
padding: 0;
border: none;
.nav {
overflow: auto;
}
.nav-item {
.nav-link {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-weight: 500;
color: rgba(156,163,175, 1);
padding-left: 14px;
margin-bottom: 5px;
.icon {
display: inline-block;
width: 40px;
text-align: center;
}
}
.router-link-exact-active {
color: var(--primary);
font-weight: 700;
padding-left: 14px;
&:not(.text-center) {
padding-left: 10px;
border-left: 4px solid var(--primary);
}
.icon {
color: var(--primary) !important;
}
}
&.nav-icons {
.small {
font-weight: 700 !important;
}
}
&:is(:last-child) {
.nav-link {
margin-bottom: 0;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
}
}
}
.fa-layers {
display: inline-block;
height: 1em;
position: relative;
text-align: center;
vertical-align: -0.125em;
width: 1em;
.fa-layers-counter {
background-color: #ff253a;
border-radius: 1em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
height: 1.5em;
line-height: 1;
max-width: 5em;
min-width: 1.5em;
overflow: hidden;
padding: 0.25em;
right: 0;
text-overflow: ellipsis;
top: 0;
transform: scale(.5);
-webkit-transform-origin: top right;
transform-origin: top right;
display: inline-block;
position: absolute;
margin-right: -5px;
margin-top: -10px;
}
.far {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
}
.searchbox {
@media (min-width: 768px) {
width: 300px;
}
}
.nav-avatar {
@media (min-width: 768px) {
width: 50px;
height: 50px;
}
}
.autocomplete[data-loading="true"]::after {
content: "";
border-right: 3px solid var(--primary);
}
.autocomplete {
&-input {
padding: 0.375rem 0.75rem 0.375rem 2.6rem;
background-color: var(--light-gray);
font-size: 0.9rem;
border-radius: 50rem;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjhDMkNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNSIvPjxwYXRoIGQ9Ik0xOSAxOWwtNC00Ii8+PC9zdmc+");
box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
}
&-result {
background-image: none;
padding: 10px 12px;
cursor: pointer;
&-list {
box-shadow: 0 0.125rem 0.45rem var(--border-color);
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0 !important
}
}
.media-icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
margin-right: 12px;
background: var(--light-gray);
border: 1px solid var(--input-border);
border-radius: 40px;
box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}
}
}
.sr {
&:not(:last-child) {
border-bottom: 1px solid var(--input-border);
}
&-avatar {
margin-right: 12px;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
}
&-account {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
&-acct {
word-wrap: break-word;
word-break: break-all;
font-size: 14px;
line-height: 18px;
font-weight: bold;
color: var(--dark);
margin-right: 1rem;
&.compact {
font-size: 12px;
}
}
&-stats {
display: flex;
align-items: center;
gap: 5px;
line-height: 14px;
&-followers,
&-statuses {
font-size: 11px;
font-weight: 500;
color: var(--text-lighter);
}
}
}
&-tag {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
&-name {
word-wrap: break-word;
word-break: break-all;
font-size: 14px;
line-height: 18px;
font-weight: bold;
color: var(--dark);
margin-right: 1rem;
&.compact {
font-size: 12px;
}
}
&-count {
font-size: 11px;
line-height: 13px;
color: var(--text-lighter);
font-weight: bold;
}
}
&-post {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
&-acct {
font-size: 14px;
line-height: 18px;
font-weight: bold;
color: var(--dark);
}
&-action {
display: flex;
font-size: 11px;
line-height: 14px;
color: var(--text-lighter);
font-weight: 500;
gap: 3px;
align-items: center;
&-timestamp {
font-weight: 700;
}
&-label {
font-weight: 700;
}
}
}
}
}
.force-dark-mode {
.autocomplete-result-list {
border-color: var(--input-border);
}
.autocomplete-result:hover, .autocomplete-result[aria-selected=true] {
box-shadow: 0;
background-color: rgba(255, 255, 255, .1);
}
.autocomplete[data-loading="true"]::after {
content: "";
border: 3px solid rgba(255, 255, 255, 0.22);
border-right: 3px solid var(--primary);
}
}
</style>