1
/* Content: tables */
2
.tiptap .tableWrapper {
3
  position: relative;
4
  overflow-x: auto;
5
  overflow-y: hidden;
6
  margin: 0.75em 0;
7
}
8
 
9
.tiptap table {
10
  border-collapse: collapse;
11
  table-layout: fixed;
12
  width: 100%;
13
  margin: 0;
14
  background-color: var(--color-zinc-900);
15
  border: 1px solid var(--color-zinc-700);
16
  transition:
17
    border-color 0.12s,
18
    box-shadow 0.12s;
19
}
20
 
21
.editor-content-shell[data-editor-mode="editable"] .tiptap .tableWrapper.has-table-handles > table {
22
  border-color: var(--color-zinc-600);
23
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 30%, transparent);
24
}
25
 
26
.tiptap td,
27
.tiptap th {
28
  position: relative;
29
  vertical-align: top;
30
  box-sizing: border-box;
31
  min-width: 80px;
32
  padding: 0.5rem 0.75rem;
33
  border: 1px solid var(--color-zinc-700);
34
  color: var(--color-zinc-300);
35
  overflow-wrap: anywhere;
36
  word-break: break-word;
37
  white-space: normal;
38
}
39
 
40
.tiptap th {
41
  background-color: var(--color-zinc-800);
42
  color: var(--color-zinc-100);
43
  font-weight: 600;
44
  text-align: left;
45
}
46
 
47
.tiptap td > p,
48
.tiptap th > p {
49
  margin: 0;
50
}
51
 
52
.tiptap .selectedCell::after {
53
  position: absolute;
54
  content: "";
55
  inset: 0;
56
  background-color: color-mix(in srgb, var(--color-accent-500) 18%, transparent);
57
  pointer-events: none;
58
  z-index: 2;
59
}
60
 
61
.tiptap .column-resize-handle {
62
  position: absolute;
63
  right: 0;
64
  top: 0;
65
  bottom: 0;
66
  width: 4px;
67
  background-color: var(--color-accent-500);
68
  z-index: 20;
69
  pointer-events: none;
70
}
71
 
72
.tiptap.resize-cursor,
73
.tiptap .resize-cursor {
74
  cursor: col-resize;
75
}
76
 
77
/* Overlay: table handles */
78
.tiptap-table-handles {
79
  position: absolute;
80
  top: 0;
81
  left: 0;
82
  width: 0;
83
  height: 0;
84
  pointer-events: none;
85
  z-index: 15;
86
}
87
 
88
.tiptap-table-row-handle,
89
.tiptap-table-col-handle,
90
.tiptap-table-corner-handle,
91
.tiptap-table-add-col,
92
.tiptap-table-add-row {
93
  position: absolute;
94
  pointer-events: auto;
95
  user-select: none;
96
  touch-action: none;
97
  margin: 0;
98
  padding: 0;
99
  font: inherit;
100
  color: inherit;
101
}
102
 
103
.tiptap-table-row-handle,
104
.tiptap-table-col-handle,
105
.tiptap-table-corner-handle {
106
  border: 1px solid var(--color-zinc-700);
107
  background-color: var(--color-zinc-700);
108
  border-radius: 4px;
109
  display: flex;
110
  align-items: center;
111
  justify-content: center;
112
  cursor: grab;
113
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
114
  transition:
115
    background-color 0.12s,
116
    border-color 0.12s;
117
}
118
 
119
.tiptap-table-row-handle {
120
  width: 12px;
121
  border-top-right-radius: 0;
122
  border-bottom-right-radius: 0;
123
  border-right: none;
124
}
125
 
126
.tiptap-table-row-handle::before {
127
  content: "";
128
  width: 2px;
129
  height: 14px;
130
  background-image: radial-gradient(circle, var(--color-zinc-500) 1px, transparent 1px);
131
  background-size: 2px 4px;
132
  background-repeat: repeat-y;
133
}
134
 
135
.tiptap-table-col-handle {
136
  height: 12px;
137
  border-bottom-left-radius: 0;
138
  border-bottom-right-radius: 0;
139
  border-bottom: none;
140
}
141
 
142
.tiptap-table-col-handle::before {
143
  content: "";
144
  height: 2px;
145
  width: 14px;
146
  background-image: radial-gradient(circle, var(--color-zinc-500) 1px, transparent 1px);
147
  background-size: 4px 2px;
148
  background-repeat: repeat-x;
149
}
150
 
151
.tiptap-table-corner-handle {
152
  width: 12px;
153
  height: 12px;
154
  border-bottom-right-radius: 0;
155
  cursor: pointer;
156
}
157
 
158
.tiptap-table-corner-handle::before {
159
  content: "";
160
  width: 6px;
161
  height: 6px;
162
  border-radius: 999px;
163
  background-color: var(--color-zinc-500);
164
}
165
 
166
.tiptap-table-row-handle:hover,
167
.tiptap-table-col-handle:hover,
168
.tiptap-table-corner-handle:hover,
169
.tiptap-table-row-handle:focus-visible,
170
.tiptap-table-col-handle:focus-visible,
171
.tiptap-table-corner-handle:focus-visible {
172
  background-color: var(--color-zinc-700);
173
  border-color: var(--color-accent-500);
174
  outline: none;
175
}
176
 
177
.tiptap-table-row-handle:active,
178
.tiptap-table-col-handle:active {
179
  cursor: grabbing;
180
}
181
 
182
.tiptap-table-add-col,
183
.tiptap-table-add-row {
184
  width: 20px;
185
  height: 20px;
186
  background-color: rgba(27, 24, 26, 0.96);
187
  border: 1px solid var(--color-zinc-700);
188
  color: var(--color-zinc-400);
189
  border-radius: 999px;
190
  font-size: 13px;
191
  font-weight: 600;
192
  line-height: 1;
193
  display: flex;
194
  align-items: center;
195
  justify-content: center;
196
  cursor: pointer;
197
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
198
  opacity: 0.94;
199
  transform: scale(0.96);
200
  transition:
201
    transform 0.12s,
202
    background-color 0.12s,
203
    border-color 0.12s,
204
    color 0.12s,
205
    opacity 0.12s;
206
}
207
 
208
.tiptap-table-add-col:hover,
209
.tiptap-table-add-row:hover,
210
.tiptap-table-add-col:focus-visible,
211
.tiptap-table-add-row:focus-visible {
212
  background-color: var(--color-zinc-800);
213
  border-color: var(--color-accent-500);
214
  color: var(--color-accent-300);
215
  opacity: 1;
216
  transform: scale(1);
217
  outline: none;
218
}
219
 
220
@media (pointer: coarse) {
221
  .tiptap-table-add-col,
222
  .tiptap-table-add-row {
223
    display: none;
224
  }
225
}
226
 
227
.tiptap-table-drop-indicator {
228
  position: absolute;
229
  background-color: var(--color-accent-500);
230
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 35%, transparent);
231
  border-radius: 1px;
232
  pointer-events: none;
233
  z-index: 30;
234
}
235
 
236
.tiptap .tableWrapper.is-dragging-table {
237
  cursor: grabbing;
238
}
239
 
240
/* Overlay: contextual table menu */
241
.tiptap-table-menu {
242
  display: flex;
243
  flex-direction: column;
244
  min-width: 180px;
245
  padding: 4px;
246
  background-color: var(--color-zinc-800);
247
  border: 1px solid var(--color-zinc-700);
248
  border-radius: 6px;
249
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
250
  z-index: 60;
251
}
252
 
253
.tiptap-table-menu-item {
254
  display: flex;
255
  align-items: center;
256
  gap: 8px;
257
  padding: 6px 8px;
258
  background: none;
259
  border: none;
260
  border-radius: 4px;
261
  color: var(--color-zinc-300);
262
  font-size: 0.8125rem;
263
  text-align: left;
264
  cursor: pointer;
265
  transition:
266
    background-color 0.1s,
267
    color 0.1s;
268
}
269
 
270
.tiptap-table-menu-item:hover:not(:disabled),
271
.tiptap-table-menu-item:focus-visible {
272
  background-color: var(--color-zinc-700);
273
  color: var(--color-zinc-100);
274
  outline: none;
275
}
276
 
277
.tiptap-table-menu-item:disabled {
278
  opacity: 0.4;
279
  cursor: not-allowed;
280
}
281
 
282
.tiptap-table-menu-item.is-danger {
283
  color: #f87171;
284
}
285
 
286
.tiptap-table-menu-item.is-danger:hover:not(:disabled),
287
.tiptap-table-menu-item.is-danger:focus-visible {
288
  background-color: rgba(248, 113, 113, 0.1);
289
  color: #fca5a5;
290
}
291
 
292
.tiptap-table-menu-item-icon {
293
  display: flex;
294
  align-items: center;
295
  justify-content: center;
296
  width: 16px;
297
  color: var(--color-zinc-400);
298
}
299
 
300
.tiptap-table-menu-item:hover .tiptap-table-menu-item-icon,
301
.tiptap-table-menu-item:focus-visible .tiptap-table-menu-item-icon {
302
  color: inherit;
303
}
304
 
305
.tiptap-table-menu-item-label {
306
  flex: 1;
307
}
308
 
309
.tiptap-table-menu-sep {
310
  height: 1px;
311
  background-color: var(--color-zinc-700);
312
  margin: 4px 0;
313
}