a tool for shared writing and social publishing
changed selected style to be more obvious, moved selected style into global css
+31
-21
+20
app/globals.css
+20
app/globals.css
···
159
159
background-color: transparent;
160
160
}
161
161
162
+
.block-border {
163
+
@apply border;
164
+
@apply border-border-light;
165
+
@apply rounded-lg;
166
+
@apply outline;
167
+
@apply outline-offset-1;
168
+
@apply outline-1;
169
+
@apply outline-transparent;
170
+
}
171
+
172
+
.block-border-selected {
173
+
@apply border;
174
+
@apply border-border;
175
+
@apply rounded-lg;
176
+
@apply outline;
177
+
@apply outline-offset-1;
178
+
@apply outline-2;
179
+
@apply outline-border;
180
+
}
181
+
162
182
.transparent-outline {
163
183
@apply outline;
164
184
@apply outline-transparent;
+2
-3
components/Blocks/EmbedBlock.tsx
+2
-3
components/Blocks/EmbedBlock.tsx
···
63
63
<iframe
64
64
className={`
65
65
flex flex-col relative w-full overflow-hidden group/embedBlock
66
-
border outline outline-1 -outline-offset-0 rounded-lg
67
-
${isSelected ? "border-tertiary outline-tertiary" : "border-border-light outline-transparent"}
66
+
${isSelected ? "block-border-selected " : "block-border"}
68
67
`}
69
68
width="100%"
70
69
height="100%"
···
77
76
href={url?.data.value}
78
77
target="_blank"
79
78
style={{ wordBreak: "break-word" }} // better than tailwind break-all!
80
-
className={`py-0.5 min-w-0 w-full line-clamp-1 text-xs italic text-accent-contrast`}
79
+
className={`py-0.5 min-w-0 w-max line-clamp-1 text-xs italic text-accent-contrast`}
81
80
>
82
81
{url?.data.value}
83
82
</a>
+3
-2
components/Blocks/ExternalLinkBlock.tsx
+3
-2
components/Blocks/ExternalLinkBlock.tsx
···
65
65
className={`
66
66
externalLinkBlock flex relative group/linkBlock
67
67
h-[104px] w-full bg-bg-page overflow-hidden text-primary hover:no-underline no-underline
68
-
border hover:border-accent-contrast outline outline-1 -outline-offset-0 rounded-lg shadow-sm
69
-
${isSelected ? "outline-accent-contrast border-accent-contrast" : "outline-transparent border-border-light"}
68
+
hover:border-accent-contrast shadow-sm
69
+
${isSelected ? "block-border-selected !outline-accent-contrast !border-accent-contrast" : "block-border"}
70
+
70
71
`}
71
72
>
72
73
<div className="pt-2 pb-2 px-3 grow min-w-0">
+1
-3
components/Blocks/ImageBlock.tsx
+1
-3
components/Blocks/ImageBlock.tsx
···
99
99
}
100
100
height={image?.data.height}
101
101
width={image?.data.width}
102
-
className={`
103
-
outline outline-1 border rounded-lg
104
-
${isSelected ? "border-tertiary outline-tertiary" : "border-transparent outline-transparent"}`}
102
+
className={isSelected ? "block-border-selected " : "block-border"}
105
103
/>
106
104
</div>
107
105
);
+2
-5
components/Blocks/MailboxBlock.tsx
+2
-5
components/Blocks/MailboxBlock.tsx
···
45
45
return (
46
46
<div className={`mailboxContent relative w-full flex flex-col gap-1`}>
47
47
<div
48
-
className={`flex flex-col gap-2 items-center justify-center w-full rounded-lg border outline ${
49
-
isSelected
50
-
? "border-tertiary outline-tertiary"
51
-
: "border-border-light outline-transparent"
52
-
}`}
48
+
className={`flex flex-col gap-2 items-center justify-center w-full
49
+
${isSelected ? "block-border-selected " : "block-border"} `}
53
50
style={{
54
51
backgroundColor:
55
52
"color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)",
+3
-8
components/Blocks/PageLinkBlock.tsx
+3
-8
components/Blocks/PageLinkBlock.tsx
···
31
31
<div
32
32
className={`w-full cursor-pointer
33
33
pageLinkBlockWrapper relative group/pageLinkBlock
34
-
bg-bg-page border shadow-sm outline outline-1 rounded-lg
34
+
bg-bg-page shadow-sm
35
35
flex overflow-clip
36
-
${
37
-
isSelected
38
-
? "border-tertiary outline-tertiary"
39
-
: isOpen
40
-
? "border-border outline-transparent hover:outline-border-light"
41
-
: "border-border-light outline-transparent hover:outline-border-light"
42
-
}
36
+
${isSelected ? "block-border-selected " : "block-border"}
37
+
${isOpen && "!border-tertiary"}
43
38
`}
44
39
onClick={(e) => {
45
40
if (!page) return;