feat: no borders in cards (#925)

This commit is contained in:
patak 2023-01-10 10:05:59 +01:00 committed by GitHub
parent 971e273dc3
commit ad1e597b5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 11 additions and 11 deletions

View file

@ -65,7 +65,7 @@ const buttonStyle = $computed(() => {
return 'text-inverted bg-red border-red' return 'text-inverted bg-red border-red'
if (relationship?.muting) if (relationship?.muting)
return 'text-base bg-code border-base' return 'text-base bg-card border-base'
// If following, use a label style with a strong border for Mutuals // If following, use a label style with a strong border for Mutuals
if (relationship ? relationship.following : context === 'following') if (relationship ? relationship.following : context === 'following')

View file

@ -98,7 +98,6 @@ useIntersectionObserver(video, (entries) => {
loop loop
playsinline playsinline
controls controls
border="~ base"
rounded-lg rounded-lg
object-cover object-cover
:width="attachment.meta?.original?.width" :width="attachment.meta?.original?.width"
@ -119,7 +118,6 @@ useIntersectionObserver(video, (entries) => {
muted muted
loop loop
playsinline playsinline
border="~ base"
rounded-lg rounded-lg
object-cover object-cover
:width="attachment.meta?.original?.width" :width="attachment.meta?.original?.width"
@ -160,7 +158,6 @@ useIntersectionObserver(video, (entries) => {
aspectRatio, aspectRatio,
objectPosition, objectPosition,
}" }"
border="~ base"
rounded-lg rounded-lg
h-full h-full
w-full w-full

View file

@ -23,7 +23,7 @@ const { status } = defineProps<{
<style lang="postcss"> <style lang="postcss">
.status-media-container { .status-media-container {
--at-apply: gap-0.5; --at-apply: gap-2;
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;

View file

@ -38,12 +38,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
v-else v-else
block block
of-hidden of-hidden
hover:bg-active
:to="card.url" :to="card.url"
bg-card
hover:bg-active
:class="{ :class="{
'flex': isSquare, 'flex': isSquare,
'p-4': root, 'p-4': root,
'rounded-lg border border-base': !root, 'rounded-lg': !root,
}" }"
target="_blank" target="_blank"
external external
@ -52,10 +53,9 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
v-if="card.image" v-if="card.image"
flex flex-col flex flex-col
display-block of-hidden display-block of-hidden
border="base"
:class="{ :class="{
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare, 'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22': isSquare,
'w-full aspect-[1.91] border-b': !isSquare, 'w-full aspect-[1.91]': !isSquare,
'rounded-lg': root, 'rounded-lg': root,
}" }"
> >

View file

@ -89,7 +89,7 @@ const meta = $computed(() => {
v-if="card.image" v-if="card.image"
flex flex-col flex flex-col
display-block of-hidden display-block of-hidden
bg-code bg-card
relative relative
w-full min-h-50 md:min-h-60 w-full min-h-50 md:min-h-60
justify-center justify-center

View file

@ -8,6 +8,7 @@
--c-bg-base: #fafafa; --c-bg-base: #fafafa;
--c-bg-base-rgb: 250, 250, 250; --c-bg-base-rgb: 250, 250, 250;
--c-bg-active: #f2f2f2; --c-bg-active: #f2f2f2;
--c-bg-card: #00000006;
--c-bg-code: #00000006; --c-bg-code: #00000006;
--c-bg-selection: #8885; --c-bg-selection: #8885;
--c-bg-fade: #EA9E4411; --c-bg-fade: #EA9E4411;
@ -38,6 +39,7 @@
--c-bg-base: #111; --c-bg-base: #111;
--c-bg-base-rgb: 17, 17, 17; --c-bg-base-rgb: 17, 17, 17;
--c-bg-active: #191919; --c-bg-active: #191919;
--c-bg-card: #ffffff06;
--c-bg-code: #ffffff06; --c-bg-code: #ffffff06;
--c-bg-fade: #EA9E4411; --c-bg-fade: #EA9E4411;
--c-bg-dm: #0a2f35; --c-bg-dm: #0a2f35;

View file

@ -23,6 +23,7 @@ export default defineConfig({
'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-primary-light': 'bg-$c-primary-light',
'bg-card': 'bg-$c-bg-card',
'bg-code': 'bg-$c-bg-code', 'bg-code': 'bg-$c-bg-code',
'bg-fade': 'bg-$c-bg-fade', 'bg-fade': 'bg-$c-bg-fade',
'bg-dm': 'bg-$c-bg-dm', 'bg-dm': 'bg-$c-bg-dm',