zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: style experiments

Browse source
This commit is contained in:
patak 2023-01-05 00:17:30 +01:00
parent 1ff584bf8b
commit fc48f8b90c
24 changed files with 37 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/nav/NavSideItem.vue
View file

@ -58,11 +58,11 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
<div
flex items-center gap4
w-fit rounded-full
w-fit rounded-3
px2 py2 mx3 sm:mxa
xl="mx0 px5"
xl="ml0 mr5 px5 w-auto"
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">
<div :class="icon" text-xl />

4
components/nav/NavTitle.vue
View file

@ -8,11 +8,9 @@ const { env } = buildInfo
<!-- Use external to force refresh page and jump to top of timeline -->
<NuxtLink
flex items-end gap-2
w-fit
py2 px-2 xl:px-3
text-2xl hover:bg-active
text-2xl
focus-visible:ring="2 current"
rounded-full
to="/"
external
>

6
components/publish/PublishButton.vue
View file

@ -7,11 +7,11 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
<button
flex="~ gap2 center"
w-9 h-9 py2
xl="w-auto h-auto py-4"
rounded-full
xl="w-auto h-auto"
rounded-3
cursor-pointer disabled:pointer-events-none
text-primary font-bold
border-1 border-primary
border-1 border-primary-light
:class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
:disabled="disabled"
@click="openPublishDialog()"

2
components/publish/PublishWidget.vue
View file

@ -343,7 +343,7 @@ defineExpose({
</PublishVisibilityPicker>
<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)"
@click="publish"
>

6
components/search/SearchWidget.vue
View file

@ -53,14 +53,14 @@ const activate = () => {
<template>
<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" />
<input
ref="input"
v-model="query"
h-full
ps-10
rounded-full
rounded-3
w-full
bg-transparent
outline="focus:none"
@ -75,7 +75,7 @@ const activate = () => {
</div>
<!-- Results -->
<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>
{{ t('search.search_desc') }}
</span>

5
components/status/StatusCard.vue
View file

@ -90,13 +90,14 @@ const isDM = $computed(() => status.visibility === 'direct')
ref="el"
relative flex flex-col gap-1 pl-3 pr-4 pt-1
class="pb-1.5"
:class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }"
:class="{ 'hover:bg-active': hover }"
tabindex="0"
focus:outline-none focus-visible:ring="2 primary"
:lang="status.language ?? undefined"
@click="onclick"
@keydown.enter="onclick"
>
<div v-if="newer && !directReply" w-auto h-1px bg-border />
<div flex justify-between>
<slot name="meta">
<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>
</AccountHoverWrapper>
<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 flex="~ col 1" min-w-0>