feat: no borders in cards (#925)
This commit is contained in:
parent
971e273dc3
commit
ad1e597b5c
|
@ -65,7 +65,7 @@ const buttonStyle = $computed(() => {
|
|||
return 'text-inverted bg-red border-red'
|
||||
|
||||
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 (relationship ? relationship.following : context === 'following')
|
||||
|
|
|
@ -98,7 +98,6 @@ useIntersectionObserver(video, (entries) => {
|
|||
loop
|
||||
playsinline
|
||||
controls
|
||||
border="~ base"
|
||||
rounded-lg
|
||||
object-cover
|
||||
:width="attachment.meta?.original?.width"
|
||||
|
@ -119,7 +118,6 @@ useIntersectionObserver(video, (entries) => {
|
|||
muted
|
||||
loop
|
||||
playsinline
|
||||
border="~ base"
|
||||
rounded-lg
|
||||
object-cover
|
||||
:width="attachment.meta?.original?.width"
|
||||
|
@ -160,7 +158,6 @@ useIntersectionObserver(video, (entries) => {
|
|||
aspectRatio,
|
||||
objectPosition,
|
||||
}"
|
||||
border="~ base"
|
||||
rounded-lg
|
||||
h-full
|
||||
w-full
|
||||
|
|
|
@ -23,7 +23,7 @@ const { status } = defineProps<{
|
|||
|
||||
<style lang="postcss">
|
||||
.status-media-container {
|
||||
--at-apply: gap-0.5;
|
||||
--at-apply: gap-2;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -38,12 +38,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
|
|||
v-else
|
||||
block
|
||||
of-hidden
|
||||
hover:bg-active
|
||||
:to="card.url"
|
||||
bg-card
|
||||
hover:bg-active
|
||||
:class="{
|
||||
'flex': isSquare,
|
||||
'p-4': root,
|
||||
'rounded-lg border border-base': !root,
|
||||
'rounded-lg': !root,
|
||||
}"
|
||||
target="_blank"
|
||||
external
|
||||
|
@ -52,10 +53,9 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
|
|||
v-if="card.image"
|
||||
flex flex-col
|
||||
display-block of-hidden
|
||||
border="base"
|
||||
:class="{
|
||||
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare,
|
||||
'w-full aspect-[1.91] border-b': !isSquare,
|
||||
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22': isSquare,
|
||||
'w-full aspect-[1.91]': !isSquare,
|
||||
'rounded-lg': root,
|
||||
}"
|
||||
>
|
||||
|
|
|
@ -89,7 +89,7 @@ const meta = $computed(() => {
|
|||
v-if="card.image"
|
||||
flex flex-col
|
||||
display-block of-hidden
|
||||
bg-code
|
||||
bg-card
|
||||
relative
|
||||
w-full min-h-50 md:min-h-60
|
||||
justify-center
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
--c-bg-base: #fafafa;
|
||||
--c-bg-base-rgb: 250, 250, 250;
|
||||
--c-bg-active: #f2f2f2;
|
||||
--c-bg-card: #00000006;
|
||||
--c-bg-code: #00000006;
|
||||
--c-bg-selection: #8885;
|
||||
--c-bg-fade: #EA9E4411;
|
||||
|
@ -38,6 +39,7 @@
|
|||
--c-bg-base: #111;
|
||||
--c-bg-base-rgb: 17, 17, 17;
|
||||
--c-bg-active: #191919;
|
||||
--c-bg-card: #ffffff06;
|
||||
--c-bg-code: #ffffff06;
|
||||
--c-bg-fade: #EA9E4411;
|
||||
--c-bg-dm: #0a2f35;
|
||||
|
|
|
@ -23,6 +23,7 @@ export default defineConfig({
|
|||
'bg-border': 'bg-$c-border',
|
||||
'bg-active': 'bg-$c-bg-active',
|
||||
'bg-primary-light': 'bg-$c-primary-light',
|
||||
'bg-card': 'bg-$c-bg-card',
|
||||
'bg-code': 'bg-$c-bg-code',
|
||||
'bg-fade': 'bg-$c-bg-fade',
|
||||
'bg-dm': 'bg-$c-bg-dm',
|
||||
|
|
Loading…
Reference in a new issue