1
/* Content: details blocks */
2
.tiptap .tiptap-details,
3
.tiptap [data-type="details"] {
4
  display: grid;
5
  grid-template-columns: 1.75rem minmax(0, 1fr);
6
  column-gap: 0.75rem;
7
  margin: 0.75rem 0;
8
  padding: 0.625rem 0.875rem;
9
  border: 1px solid var(--color-zinc-700);
10
  border-radius: 0.75rem;
11
  background: var(--color-zinc-900);
12
  overflow: clip;
13
}
14
 
15
.tiptap .tiptap-details > button,
16
.tiptap [data-type="details"] > button {
17
  grid-column: 1;
18
  grid-row: 1;
19
  align-self: start;
20
  justify-self: start;
21
  display: grid;
22
  place-items: center;
23
  width: 1.75rem;
24
  /* Match the summary's line box (min-height 1.5rem, line-height 1.4) so the
25
     chevron's optical center lines up with the title's cap-center when the
26
     block is collapsed. Width stays wider for click-target comfort. */
27
  height: 1.5rem;
28
  margin: 0;
29
  border: none;
30
  border-radius: 0.5rem;
31
  background: transparent;
32
  color: var(--color-zinc-400);
33
  font: inherit;
34
  line-height: 1;
35
  cursor: pointer;
36
}
37
 
38
.tiptap .tiptap-details > button:hover,
39
.tiptap [data-type="details"] > button:hover {
40
  color: var(--color-zinc-100);
41
  background: var(--color-zinc-800);
42
}
43
 
44
.tiptap .tiptap-details > button:focus-visible,
45
.tiptap [data-type="details"] > button:focus-visible {
46
  outline: 1px solid var(--color-accent-500);
47
  outline-offset: 1px;
48
}
49
 
50
.tiptap .tiptap-details > button::before,
51
.tiptap [data-type="details"] > button::before {
52
  content: "\25B8";
53
  display: inline-block;
54
  transition: transform 0.15s ease;
55
}
56
 
57
.tiptap .tiptap-details.is-open > button::before,
58
.tiptap [data-type="details"].is-open > button::before {
59
  transform: rotate(90deg);
60
}
61
 
62
.tiptap .tiptap-details > div,
63
.tiptap [data-type="details"] > div {
64
  grid-column: 2;
65
  min-width: 0;
66
  padding: 0;
67
}
68
 
69
.tiptap .tiptap-details > div > summary,
70
.tiptap [data-type="details"] > div > summary {
71
  display: block;
72
  min-height: 1.5rem;
73
  margin: 0;
74
  color: var(--color-zinc-100);
75
  font-weight: 600;
76
  line-height: 1.4;
77
  list-style: none;
78
  outline: none;
79
  cursor: text;
80
}
81
 
82
.tiptap .tiptap-details > div > summary::-webkit-details-marker,
83
.tiptap [data-type="details"] > div > summary::-webkit-details-marker {
84
  display: none;
85
}
86
 
87
.tiptap .tiptap-details > div > summary:empty::before,
88
.tiptap [data-type="details"] > div > summary:empty::before,
89
.tiptap .tiptap-details > div > summary:has(> br.ProseMirror-trailingBreak:only-child)::before,
90
.tiptap [data-type="details"] > div > summary:has(> br.ProseMirror-trailingBreak:only-child)::before {
91
  content: attr(data-placeholder);
92
  float: left;
93
  height: 0;
94
  pointer-events: none;
95
  color: var(--color-zinc-500);
96
}
97
 
98
.tiptap .tiptap-details > div > [data-type="detailsContent"],
99
.tiptap [data-type="details"] > div > [data-type="detailsContent"] {
100
  margin-top: 0.625rem;
101
  padding-top: 0.625rem;
102
  border-top: 1px solid var(--color-zinc-800);
103
}
104
 
105
.tiptap .tiptap-details > div > [data-type="detailsContent"][hidden],
106
.tiptap [data-type="details"] > div > [data-type="detailsContent"][hidden] {
107
  display: none;
108
}
109
 
110
/* Static (Sites) variant: published pages have no JS runtime, so the static
111
   renderer emits a native <details> element with summary/content as direct
112
   children. The browser handles disclosure for free; we just need to match
113
   the card chrome + chevron of the live editor's div/button variant.
114
115
   The selectors below are scoped to `details.tiptap-details` so they do not
116
   collide with the live editor's `div.tiptap-details` markup above. */
117
 
118
.tiptap details.tiptap-details {
119
  display: block;
120
  margin: 0.75rem 0;
121
  padding: 0.625rem 0.875rem;
122
  border: 1px solid var(--color-zinc-700);
123
  border-radius: 0.75rem;
124
  background: var(--color-zinc-900);
125
  overflow: clip;
126
}
127
 
128
.tiptap details.tiptap-details > summary {
129
  display: flex;
130
  align-items: center;
131
  min-height: 1.5rem;
132
  margin: 0;
133
  list-style: none;
134
  color: var(--color-zinc-100);
135
  font-weight: 600;
136
  line-height: 1.4;
137
  cursor: pointer;
138
  outline: none;
139
}
140
 
141
/* Hide the browser's default disclosure marker in both Chromium/Safari and
142
   Firefox so we can render our own chevron via ::before. */
143
.tiptap details.tiptap-details > summary::-webkit-details-marker {
144
  display: none;
145
}
146
 
147
.tiptap details.tiptap-details > summary {
148
  list-style: none;
149
}
150
 
151
.tiptap details.tiptap-details > summary::before {
152
  content: "\25B8";
153
  display: inline-block;
154
  width: 1.25rem;
155
  margin-right: 0.25rem;
156
  color: var(--color-zinc-400);
157
  transition: transform 0.15s ease;
158
  flex-shrink: 0;
159
}
160
 
161
.tiptap details.tiptap-details[open] > summary::before {
162
  transform: rotate(90deg);
163
}
164
 
165
.tiptap details.tiptap-details > summary:focus-visible {
166
  outline: 1px solid var(--color-accent-500);
167
  outline-offset: 1px;
168
  border-radius: 0.25rem;
169
}
170
 
171
.tiptap details.tiptap-details > [data-type="detailsContent"] {
172
  margin: 0.625rem 0 0 1.5rem;
173
  padding-top: 0.625rem;
174
  border-top: 1px solid var(--color-zinc-800);
175
}