1
/* Content: image node */
2
.tiptap-image-placeholder {
3
  display: flex;
4
  align-items: center;
5
  gap: 10px;
6
  padding: 14px 16px;
7
  border: 1px dashed var(--color-zinc-700);
8
  border-radius: 0.5rem;
9
  color: var(--color-zinc-500);
10
  font-size: 0.875rem;
11
  cursor: pointer;
12
  transition:
13
    background-color 0.15s,
14
    border-color 0.15s;
15
}
16
 
17
.tiptap-image-placeholder:hover {
18
  background-color: var(--color-zinc-800);
19
  border-color: var(--color-zinc-600);
20
  color: var(--color-zinc-400);
21
}
22
 
23
.tiptap-image-placeholder-close {
24
  margin-left: auto;
25
  display: flex;
26
  align-items: center;
27
  justify-content: center;
28
  width: 22px;
29
  height: 22px;
30
  border-radius: 0.25rem;
31
  color: var(--color-zinc-500);
32
  transition:
33
    color 0.1s,
34
    background-color 0.1s;
35
}
36
 
37
.tiptap-image-placeholder-close:hover {
38
  color: #ef4444;
39
  background-color: rgba(239, 68, 68, 0.1);
40
}
41
 
42
.tiptap-image-container {
43
  position: relative;
44
  display: inline-block;
45
  max-width: 100%;
46
}
47
 
48
.tiptap-image {
49
  display: block;
50
  max-width: 100%;
51
  height: auto;
52
  border-radius: 0.5rem;
53
  transition: opacity 0.2s ease;
54
}
55
 
56
.tiptap-image-container.is-selected .tiptap-image {
57
  outline: none;
58
  box-shadow: none;
59
}
60
 
61
.tiptap-image-container.is-loading {
62
  display: inline-block;
63
}
64
 
65
.tiptap-image-container.is-loading .tiptap-image {
66
  position: absolute;
67
  inset: 0;
68
  width: 100%;
69
  height: 100%;
70
  opacity: 0;
71
  pointer-events: none;
72
}
73
 
74
.tiptap-image-load-skeleton {
75
  position: absolute;
76
  inset: 0;
77
  width: 100%;
78
  height: 100%;
79
}
80
 
81
.tiptap-image-uploading {
82
  position: relative;
83
  display: inline-block;
84
  max-width: 100%;
85
  border-radius: 0.5rem;
86
  overflow: hidden;
87
  background-color: var(--color-zinc-900);
88
}
89
 
90
.tiptap-image-uploading-preview {
91
  position: absolute;
92
  inset: 0;
93
  width: 100%;
94
  height: 100%;
95
  object-fit: cover;
96
  opacity: 0.55;
97
  filter: blur(2px);
98
}
99
 
100
.tiptap-image-uploading-skeleton {
101
  position: absolute;
102
  inset: 0;
103
  width: 100%;
104
  height: 100%;
105
}
106
 
107
.tiptap-image-uploading-label {
108
  position: absolute;
109
  bottom: 10px;
110
  left: 10px;
111
  padding: 4px 10px;
112
  background-color: rgba(39, 39, 42, 0.85);
113
  color: var(--color-zinc-100);
114
  font-size: 0.75rem;
115
  font-weight: 500;
116
  border-radius: 0.25rem;
117
  letter-spacing: 0.01em;
118
}
119
 
120
.tiptap-image-container.is-errored {
121
  display: inline-block;
122
}
123
 
124
.tiptap-image-container.is-errored .tiptap-image {
125
  display: none;
126
}
127
 
128
.tiptap-image-error {
129
  display: flex;
130
  align-items: center;
131
  justify-content: center;
132
  gap: 10px;
133
  padding: 14px 16px;
134
  border: 1px dashed var(--color-zinc-700);
135
  border-radius: 0.5rem;
136
  color: var(--color-zinc-500);
137
  font-size: 0.875rem;
138
  font-weight: 500;
139
}
140
 
141
/* Overlay: image resize handles */
142
.tiptap-image-resize-handle {
143
  position: absolute;
144
  top: 50%;
145
  transform: translateY(-50%);
146
  width: 5px;
147
  height: 56px;
148
  max-height: 50%;
149
  border-radius: 3px;
150
  background-color: var(--color-accent-500);
151
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
152
  cursor: ew-resize;
153
  touch-action: none;
154
  opacity: 0;
155
  transition:
156
    opacity 0.15s,
157
    background-color 0.15s;
158
}
159
 
160
.tiptap-image-resize-handle.left {
161
  left: 8px;
162
}
163
 
164
.tiptap-image-resize-handle.right {
165
  right: 8px;
166
}
167
 
168
.tiptap-image-container:hover .tiptap-image-resize-handle,
169
.tiptap-image-container.is-selected .tiptap-image-resize-handle {
170
  opacity: 1;
171
}
172
 
173
.tiptap-image-resize-handle:hover {
174
  background-color: var(--color-accent-400);
175
}
176
 
177
.tiptap-image-alt {
178
  margin-top: 0.25rem;
179
  font-size: 0.8125rem;
180
  line-height: 1.4;
181
  color: var(--color-gray-500);
182
  text-align: left;
183
}
184
 
185
.tiptap-image-node--align-left {
186
  text-align: left;
187
}
188
 
189
.tiptap-image-node--align-center {
190
  text-align: center;
191
}
192
 
193
.tiptap-image-node--align-right {
194
  text-align: right;
195
}