feat: style experiments
This commit is contained in:
parent
1ff584bf8b
commit
fc48f8b90c
|
@ -58,11 +58,11 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
|
||||||
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
|
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
|
||||||
<div
|
<div
|
||||||
flex items-center gap4
|
flex items-center gap4
|
||||||
w-fit rounded-full
|
w-fit rounded-3
|
||||||
px2 py2 mx3 sm:mxa
|
px2 py2 mx3 sm:mxa
|
||||||
xl="mx0 px5"
|
xl="ml0 mr5 px5 w-auto"
|
||||||
transition-100
|
transition-100
|
||||||
group-hover:bg-active group-focus-visible:ring="2 current"
|
group-hover="bg-active" group-focus-visible:ring="2 current"
|
||||||
>
|
>
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<div :class="icon" text-xl />
|
<div :class="icon" text-xl />
|
||||||
|
|
|
@ -8,11 +8,9 @@ const { env } = buildInfo
|
||||||
<!-- Use external to force refresh page and jump to top of timeline -->
|
<!-- Use external to force refresh page and jump to top of timeline -->
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
flex items-end gap-2
|
flex items-end gap-2
|
||||||
w-fit
|
|
||||||
py2 px-2 xl:px-3
|
py2 px-2 xl:px-3
|
||||||
text-2xl hover:bg-active
|
text-2xl
|
||||||
focus-visible:ring="2 current"
|
focus-visible:ring="2 current"
|
||||||
rounded-full
|
|
||||||
to="/"
|
to="/"
|
||||||
external
|
external
|
||||||
>
|
>
|
||||||
|
|
|
@ -7,11 +7,11 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
|
||||||
<button
|
<button
|
||||||
flex="~ gap2 center"
|
flex="~ gap2 center"
|
||||||
w-9 h-9 py2
|
w-9 h-9 py2
|
||||||
xl="w-auto h-auto py-4"
|
xl="w-auto h-auto"
|
||||||
rounded-full
|
rounded-3
|
||||||
cursor-pointer disabled:pointer-events-none
|
cursor-pointer disabled:pointer-events-none
|
||||||
text-primary font-bold
|
text-primary font-bold
|
||||||
border-1 border-primary
|
border-1 border-primary-light
|
||||||
:class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
|
:class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@click="openPublishDialog()"
|
@click="openPublishDialog()"
|
||||||
|
|
|
@ -343,7 +343,7 @@ defineExpose({
|
||||||
</PublishVisibilityPicker>
|
</PublishVisibilityPicker>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
btn-solid rounded-full text-sm w-full md:w-fit
|
btn-solid rounded-3 text-sm w-full md:w-fit
|
||||||
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
|
:disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
|
||||||
@click="publish"
|
@click="publish"
|
||||||
>
|
>
|
||||||
|
|
|
@ -53,14 +53,14 @@ const activate = () => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="el" relative px4 py2 group>
|
<div ref="el" relative px4 py2 group>
|
||||||
<div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative focus-within:box-shadow-outline>
|
<div bg-base border="~ base" h10 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline>
|
||||||
<div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" class="rtl-flip" />
|
<div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" class="rtl-flip" />
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
v-model="query"
|
v-model="query"
|
||||||
h-full
|
h-full
|
||||||
ps-10
|
ps-10
|
||||||
rounded-full
|
rounded-3
|
||||||
w-full
|
w-full
|
||||||
bg-transparent
|
bg-transparent
|
||||||
outline="focus:none"
|
outline="focus:none"
|
||||||
|
@ -75,7 +75,7 @@ const activate = () => {
|
||||||
</div>
|
</div>
|
||||||
<!-- Results -->
|
<!-- Results -->
|
||||||
<div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
|
<div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
|
||||||
<div w-full bg-base border="~ base" rounded max-h-100 overflow-auto py2>
|
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
|
||||||
<span v-if="query.length === 0" block text-center text-sm text-secondary>
|
<span v-if="query.length === 0" block text-center text-sm text-secondary>
|
||||||
{{ t('search.search_desc') }}
|
{{ t('search.search_desc') }}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -90,13 +90,14 @@ const isDM = $computed(() => status.visibility === 'direct')
|
||||||
ref="el"
|
ref="el"
|
||||||
relative flex flex-col gap-1 pl-3 pr-4 pt-1
|
relative flex flex-col gap-1 pl-3 pr-4 pt-1
|
||||||
class="pb-1.5"
|
class="pb-1.5"
|
||||||
:class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }"
|
:class="{ 'hover:bg-active': hover }"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
focus:outline-none focus-visible:ring="2 primary"
|
focus:outline-none focus-visible:ring="2 primary"
|
||||||
:lang="status.language ?? undefined"
|
:lang="status.language ?? undefined"
|
||||||
@click="onclick"
|
@click="onclick"
|
||||||
@keydown.enter="onclick"
|
@keydown.enter="onclick"
|
||||||
>
|
>
|
||||||
|
<div v-if="newer && !directReply" w-auto h-1px bg-border />
|
||||||
<div flex justify-between>
|
<div flex justify-between>
|
||||||
<slot name="meta">
|
<slot name="meta">
|
||||||
<div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
|
<div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
|
||||||
|
@ -125,7 +126,7 @@ const isDM = $computed(() => status.visibility === 'direct')
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</AccountHoverWrapper>
|
</AccountHoverWrapper>
|
||||||
<div v-if="connectReply" w-full h-full flex justify-center>
|
<div v-if="connectReply" w-full h-full flex justify-center>
|
||||||
<div h-full class="w-2.5px" bg-border />
|
<div class="w-2.5px" bg-primary-light />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div flex="~ col 1" min-w-0>
|
<div flex="~ col 1" min-w-0>
|
||||||
|
|
|
@ -35,7 +35,7 @@ const reload = async () => {
|
||||||
<NuxtLayout>
|
<NuxtLayout>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span text-lg font-bold>Error</span>
|
<span timeline-title-style>Error</span>
|
||||||
</template>
|
</template>
|
||||||
<slot>
|
<slot>
|
||||||
<form p5 grid gap-y-4 @submit="reload">
|
<form p5 grid gap-y-4 @submit="reload">
|
||||||
|
|
|
@ -14,7 +14,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||||
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
|
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
|
||||||
<div flex flex-col>
|
<div flex flex-col>
|
||||||
<NavSide command />
|
<NavSide command />
|
||||||
<PublishButton m="y5 xa" xl:m="r5 l3" xl:rtl-m="l5 r3" />
|
<PublishButton ms5.5 mt4 xl:me8 xl:ms4 />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isMastoInitialised" flex flex-col>
|
<div v-if="isMastoInitialised" flex flex-col>
|
||||||
<UserSignInEntry v-if="!currentUser" sm:hidden />
|
<UserSignInEntry v-if="!currentUser" sm:hidden />
|
||||||
|
@ -24,7 +24,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||||
<div v-else flex="~" items-center justify-between>
|
<div v-else flex="~" items-center justify-between>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
hidden xl:block
|
hidden xl:block
|
||||||
rounded-full text-start w-full
|
rounded-3 text-primary text-start w-full
|
||||||
hover:bg-active cursor-pointer transition-100
|
hover:bg-active cursor-pointer transition-100
|
||||||
:to="getAccountRoute(currentUser.account)"
|
:to="getAccountRoute(currentUser.account)"
|
||||||
>
|
>
|
||||||
|
@ -40,7 +40,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" sm:border-l sm:border-r border-base>
|
<div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" border-base>
|
||||||
<div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
|
<div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
@ -50,7 +50,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
|
<aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
|
||||||
<div sticky top-0 h-screen flex="~ col" py3>
|
<div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
|
||||||
<slot name="right">
|
<slot name="right">
|
||||||
<SearchWidget />
|
<SearchWidget />
|
||||||
<div flex-auto />
|
<div flex-auto />
|
||||||
|
|
|
@ -21,7 +21,7 @@ onReactivated(() => {
|
||||||
<template>
|
<template>
|
||||||
<MainContent back>
|
<MainContent back>
|
||||||
<template #title>
|
<template #title>
|
||||||
<ContentRich text-lg font-bold :content="account ? getDisplayName(account) : t('nav.profile')" />
|
<ContentRich timeline-title-style :content="account ? getDisplayName(account) : t('nav.profile')" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="pending" />
|
<template v-if="pending" />
|
||||||
|
|
|
@ -28,7 +28,7 @@ const tabs = $computed(() => [
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop">
|
<span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop">
|
||||||
<div i-ri:hashtag />
|
<div i-ri:hashtag />
|
||||||
<span>{{ t('nav.explore') }}</span>
|
<span>{{ t('nav.explore') }}</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -11,7 +11,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/public" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/public" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:group-2-line />
|
<div i-ri:group-2-line />
|
||||||
<span>{{ t('title.federated_timeline') }}</span>
|
<span>{{ t('title.federated_timeline') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -10,7 +10,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/public/local" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/public/local" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:group-2-line />
|
<div i-ri:group-2-line />
|
||||||
<span>{{ t('title.local_timeline') }}</span>
|
<span>{{ t('title.local_timeline') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent back>
|
<MainContent back>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span text-lg font-bold>{{ $t('nav.blocked_users') }}</span>
|
<span timeline-title-style>{{ $t('nav.blocked_users') }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<TimelineBlocks v-if="isMastoInitialised" />
|
<TimelineBlocks v-if="isMastoInitialised" />
|
||||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/bookmarks" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/bookmarks" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:bookmark-line />
|
<div i-ri:bookmark-line />
|
||||||
<span>{{ t('nav.bookmarks') }}</span>
|
<span>{{ t('nav.bookmarks') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/conversations" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/conversations" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:at-line />
|
<div i-ri:at-line />
|
||||||
<span>{{ t('nav.conversations') }}</span>
|
<span>{{ t('nav.conversations') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent back>
|
<MainContent back>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span text-lg font-bold>{{ $t('nav.blocked_domains') }}</span>
|
<span timeline-title-style>{{ $t('nav.blocked_domains') }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<TimelineDomainBlocks v-if="isMastoInitialised" />
|
<TimelineDomainBlocks v-if="isMastoInitialised" />
|
||||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/favourites" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:heart-3-line />
|
<div i-ri:heart-3-line />
|
||||||
<span>{{ t('nav.favourites') }}</span>
|
<span>{{ t('nav.favourites') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -15,7 +15,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/home" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/home" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:home-5-line />
|
<div i-ri:home-5-line />
|
||||||
<span>{{ $t('nav.home') }}</span>
|
<span>{{ $t('nav.home') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent back>
|
<MainContent back>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span text-lg font-bold>{{ $t('nav.muted_users') }}</span>
|
<span timeline-title-style>{{ $t('nav.muted_users') }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<TimelineMutes v-if="isMastoInitialised" />
|
<TimelineMutes v-if="isMastoInitialised" />
|
||||||
|
|
|
@ -28,7 +28,7 @@ onActivated(() => {
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/notifications" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:notification-4-line />
|
<div i-ri:notification-4-line />
|
||||||
<span>{{ t('nav.notifications') }}</span>
|
<span>{{ t('nav.notifications') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/public/pinned" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/public/pinned" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:pushpin-line />
|
<div i-ri:pushpin-line />
|
||||||
<span>{{ t('account.pinned') }}</span>
|
<span>{{ t('account.pinned') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -10,7 +10,7 @@ useHeadFixed({
|
||||||
<template>
|
<template>
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<NuxtLink to="/search" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:search-line class="rtl-flip" />
|
<div i-ri:search-line class="rtl-flip" />
|
||||||
<span>{{ $t('nav.search') }}</span>
|
<span>{{ $t('nav.search') }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -20,7 +20,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
|
||||||
<div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
|
<div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
|
||||||
<MainContent>
|
<MainContent>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
<div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||||
<div i-ri:settings-3-line />
|
<div i-ri:settings-3-line />
|
||||||
<span>{{ $t('nav.settings') }}</span>
|
<span>{{ $t('nav.settings') }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -22,6 +22,7 @@ export default defineConfig({
|
||||||
'bg-base': 'bg-$c-bg-base',
|
'bg-base': 'bg-$c-bg-base',
|
||||||
'bg-border': 'bg-$c-border',
|
'bg-border': 'bg-$c-border',
|
||||||
'bg-active': 'bg-$c-bg-active',
|
'bg-active': 'bg-$c-bg-active',
|
||||||
|
'bg-primary-light': 'bg-$c-primary-light',
|
||||||
'bg-code': 'bg-$c-bg-code',
|
'bg-code': 'bg-$c-bg-code',
|
||||||
'bg-fade': 'bg-$c-bg-fade',
|
'bg-fade': 'bg-$c-bg-fade',
|
||||||
|
|
||||||
|
@ -55,6 +56,8 @@ export default defineConfig({
|
||||||
'flex-v-center': 'items-center',
|
'flex-v-center': 'items-center',
|
||||||
'flex-h-center': 'justify-center',
|
'flex-h-center': 'justify-center',
|
||||||
'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
|
'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
|
||||||
|
|
||||||
|
'timeline-title-style': 'text-primary text-lg font-bold',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
presets: [
|
presets: [
|
||||||
|
|
Loading…
Reference in a new issue