1
@import "highlight.js/styles/github-dark.css";
2
 
3
/* Content: code block node */
4
.tiptap-code-block-wrapper {
5
  position: relative;
6
  margin: 0.75em 0;
7
}
8
 
9
.tiptap-code-block-controls {
10
  position: absolute;
11
  top: 0.5rem;
12
  right: 0.5rem;
13
  z-index: 1;
14
  display: flex;
15
  gap: 0.25rem;
16
  align-items: center;
17
}
18
 
19
.tiptap-code-block-lang-btn {
20
  padding: 0.15rem 0.5rem;
21
  font-size: 0.75rem;
22
  font-family: var(--font-sans);
23
  color: var(--color-zinc-500);
24
  background-color: transparent;
25
  border: 1px solid transparent;
26
  border-radius: 0.25rem;
27
  cursor: pointer;
28
  opacity: 0.5;
29
  transition:
30
    color 0.15s,
31
    border-color 0.15s,
32
    opacity 0.15s;
33
  user-select: none;
34
  line-height: 1.4;
35
}
36
 
37
.tiptap-code-block-wrapper:hover .tiptap-code-block-lang-btn:not(:disabled),
38
.tiptap-code-block-lang-btn:not(:disabled):hover {
39
  opacity: 1;
40
  color: var(--color-zinc-400);
41
  border-color: var(--color-zinc-700);
42
}
43
 
44
/* Read-only: lock the language label at a quiet opacity with no hover
45
   affordance so it reads as a corner label, not a clickable control. */
46
.tiptap-code-block-lang-btn:disabled {
47
  cursor: default;
48
  opacity: 0.6;
49
}
50
 
51
.tiptap-code-block-copy-btn {
52
  display: inline-flex;
53
  align-items: center;
54
  justify-content: center;
55
  padding: 0.25rem;
56
  color: var(--color-zinc-500);
57
  background-color: transparent;
58
  border: 1px solid transparent;
59
  border-radius: 0.25rem;
60
  cursor: pointer;
61
  opacity: 0.5;
62
  transition:
63
    color 0.15s,
64
    border-color 0.15s,
65
    opacity 0.15s,
66
    background-color 0.15s;
67
  line-height: 1;
68
}
69
 
70
.tiptap-code-block-wrapper:hover .tiptap-code-block-copy-btn,
71
.tiptap-code-block-copy-btn:hover {
72
  opacity: 1;
73
  color: var(--color-zinc-300);
74
  border-color: var(--color-zinc-700);
75
}
76
 
77
.tiptap-code-block-copy-btn [data-copy-icon-default],
78
.tiptap-code-block-copy-btn [data-copy-icon-copied] {
79
  display: inline-flex;
80
}
81
 
82
.tiptap-code-block-copy-btn [data-copy-icon-copied],
83
.tiptap-code-block-copy-btn[data-copied="true"] [data-copy-icon-default] {
84
  display: none;
85
}
86
 
87
.tiptap-code-block-copy-btn[data-copied="true"] {
88
  color: #4ade80;
89
}
90
 
91
.tiptap-code-block-copy-btn[data-copied="true"] [data-copy-icon-copied] {
92
  display: inline-flex;
93
}
94
 
95
.tiptap-code-block-pre {
96
  font-family: var(--font-mono);
97
  font-size: 0.875rem;
98
  background-color: var(--color-zinc-900);
99
  border: 1px solid var(--color-zinc-800);
100
  border-radius: 0.5rem;
101
  padding: 0.75rem 1rem;
102
  overflow-x: auto;
103
  white-space: pre;
104
  color: var(--color-zinc-300);
105
}
106
 
107
.tiptap-code-block-content {
108
  display: block;
109
  min-width: 100%;
110
  background: none;
111
  border-radius: 0;
112
  padding: 0;
113
  font-size: inherit;
114
  color: inherit;
115
  white-space: inherit;
116
}
117
 
118
/* Overlay: code block language menu */
119
.tiptap-code-block-lang-dropdown {
120
  display: flex;
121
  flex-direction: column;
122
  gap: 1px;
123
  padding: 4px;
124
  max-height: 240px;
125
  overflow-y: auto;
126
}
127
 
128
.tiptap-code-block-lang-item {
129
  display: block;
130
  width: 100%;
131
  padding: 6px 10px;
132
  text-align: left;
133
  font-size: 0.8125rem;
134
  color: var(--color-zinc-300);
135
  background: none;
136
  border: none;
137
  border-radius: 0.375rem;
138
  cursor: pointer;
139
  transition: background-color 0.1s;
140
}
141
 
142
.tiptap-code-block-lang-item:hover {
143
  background-color: var(--color-zinc-700);
144
  color: var(--color-zinc-100);
145
}
146
 
147
.tiptap-code-block-lang-item.is-active {
148
  background-color: color-mix(in srgb, var(--color-accent-500) 10%, transparent);
149
  color: var(--color-accent-400);
150
}
151
 
152
.tiptap-code-block-lang-item.is-active:hover {
153
  background-color: color-mix(in srgb, var(--color-accent-500) 18%, transparent);
154
  color: var(--color-accent-200);
155
}