1
/* Overlay: shared floating controls */
2
.tiptap-toolbar {
3
  /* z-index needs a positioned element to take effect; the BubbleMenu mounts
4
     us inline (not via FloatingPortal), so without this the toolbar stacks
5
     below positioned table affordances like .column-resize-handle. */
6
  position: relative;
7
  z-index: 40;
8
  display: flex;
9
  align-items: center;
10
  gap: 2px;
11
  padding: 4px;
12
  /* Clamp to viewport so narrow screens get horizontal scroll instead of
13
     clipping trailing buttons. 20px matches the BubbleMenu shift padding. */
14
  max-width: calc(100vw - 20px);
15
  overflow-x: auto;
16
  overscroll-behavior-x: contain;
17
  scrollbar-width: none;
18
  background-color: var(--color-overlay-surface);
19
  border-radius: 0.75rem;
20
  box-shadow:
21
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
22
    0 0 0 1px rgba(0, 0, 0, 0.4),
23
    0 16px 32px -12px rgba(0, 0, 0, 0.55),
24
    0 4px 8px -4px rgba(0, 0, 0, 0.4);
25
  animation: var(--animate-menu);
26
  transform-origin: top center;
27
}
28
 
29
.tiptap-toolbar::-webkit-scrollbar {
30
  display: none;
31
}
32
 
33
.tiptap-toolbar button {
34
  display: flex;
35
  align-items: center;
36
  justify-content: center;
37
  flex-shrink: 0;
38
  width: 32px;
39
  height: 32px;
40
  color: var(--color-zinc-300);
41
  border-radius: 0.5rem;
42
  transition: background-color 75ms;
43
}
44
 
45
.tiptap-toolbar button:hover:not(:disabled) {
46
  background-color: var(--color-zinc-600);
47
  color: var(--color-zinc-100);
48
}
49
 
50
.tiptap-toolbar button:disabled {
51
  opacity: 0.4;
52
  cursor: not-allowed;
53
}
54
 
55
.tiptap-toolbar button.is-active {
56
  background-color: color-mix(in srgb, var(--color-accent-500) 14%, transparent);
57
  color: var(--color-accent-400);
58
}
59
 
60
.tiptap-toolbar-sep {
61
  width: 1px;
62
  height: 20px;
63
  background-color: var(--color-zinc-600);
64
  margin: 0 2px;
65
  flex-shrink: 0;
66
}
67
 
68
.tiptap-image-toolbar {
69
  width: 256px;
70
  flex-direction: column;
71
  align-items: stretch;
72
}
73
 
74
.tiptap-image-toolbar-actions {
75
  display: flex;
76
  align-items: center;
77
  justify-content: center;
78
  gap: 2px;
79
}
80
 
81
.tiptap-image-brightness {
82
  margin-top: 4px;
83
  padding: 4px 8px;
84
  border-top: 1px solid var(--color-zinc-600);
85
  color: var(--color-zinc-300);
86
  font-size: 0.8125rem;
87
}
88
 
89
.tiptap-image-brightness-label {
90
  display: flex;
91
  align-items: center;
92
  gap: 8px;
93
}
94
 
95
.tiptap-image-brightness-label label {
96
  flex: 1;
97
}
98
 
99
.tiptap-image-brightness-label output {
100
  font-variant-numeric: tabular-nums;
101
}
102
 
103
.tiptap-image-brightness input[type="range"] {
104
  display: block;
105
  width: 100%;
106
  height: 24px;
107
  accent-color: var(--color-accent-400);
108
  cursor: pointer;
109
}
110
 
111
.tiptap-link-input {
112
  width: 200px;
113
  padding: 4px 8px;
114
  font-size: 0.8125rem;
115
  color: var(--color-zinc-300);
116
  background-color: var(--color-zinc-800);
117
  border: 1px solid var(--color-zinc-600);
118
  border-radius: 0.375rem;
119
  outline: none;
120
}
121
 
122
.tiptap-link-input:focus {
123
  border-color: var(--color-accent-500);
124
}
125
 
126
.tiptap-inline-action {
127
  display: inline-flex;
128
  align-items: center;
129
  justify-content: center;
130
  padding: 0 12px;
131
  color: var(--color-zinc-300);
132
  background-color: var(--color-zinc-700);
133
  border: 1px solid var(--color-zinc-700);
134
  border-radius: 0.375rem;
135
  font-size: 0.8125rem;
136
  white-space: nowrap;
137
  transition:
138
    background-color 75ms,
139
    border-color 75ms,
140
    color 75ms;
141
}
142
 
143
.tiptap-inline-action:hover {
144
  background-color: var(--color-zinc-700);
145
  border-color: var(--color-zinc-600);
146
  color: var(--color-zinc-100);
147
}