feat: style experiments

zio/stable
patak 2023-01-05 00:17:30 +01:00
parent 1ff584bf8b
commit fc48f8b90c
24 changed files with 37 additions and 35 deletions

View File

@ -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 />

View File

@ -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
> >

View File

@ -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()"

View File

@ -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"
> >

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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 />

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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: [