1
/* Styles for the debugger UI */
2
#regex_debugger_rules {
3
    margin: 10px 0;
4
}
5

6
#regex_debugger_rules,
7
#regex_debugger_rules .sortable-list {
8
    padding-left: 0;
9
}
10

11
.regex-debugger-rules-list {
12
    position: relative;
13
}
14

15
.regex-debugger-rule {
16
    display: flex;
17
    align-items: center;
18
    padding: 8px 10px;
19
    border: 1px solid var(--SmartThemeBorderColor);
20
    border-radius: 5px;
21
    cursor: pointer;
22
    background-color: var(--black30a);
23
    gap: 5px;
24
    margin-bottom: 5px;
25
}
26

27
#regex_debugger_run_test_header {
28
    justify-content: space-between;
29
    align-items: center;
30
}
31

32
#regex_debugger_expand_steps,
33
#regex_debugger_expand_final,
34
#regex_debugger_save_order {
35
    position: absolute;
36
    top: 0;
37
    right: 0;
38
    margin: 0;
39
}
40

41
.regex-debugger-rule:hover {
42
    filter: brightness(1.1);
43
}
44

45
.regex-debugger-rule .handle {
46
    cursor: grab;
47
    margin-right: 5px;
48
}
49

50
.regex-debugger-rule .rule-details {
51
    flex-grow: 1;
52
    text-align: left;
53
    display: flex;
54
    align-items: baseline;
55
    gap: 5px;
56
}
57

58
.regex-debugger-rule .rule-name {
59
    font-weight: bold;
60
}
61

62
.regex-debugger-rule .rule-regex {
63
    font-size: 0.8em;
64
    opacity: 0.8;
65
    font-family: var(--monoFontFamily);
66
}
67

68
.regex-debugger-rule .rule-scope {
69
    font-size: 0.8em;
70
    padding: 2px 6px;
71
    border-radius: 5px;
72
    background-color: var(--black30a);
73
    margin-left: auto;
74
    margin-right: 10px;
75
}
76

77
.regex-debugger-rule .menu_button {
78
    margin: 0;
79
}
80

81
#regex_debugger_raw_input {
82
    min-height: 1.8em;
83
}
84

85
#regex_debugger_steps_output {
86
    min-height: 2em;
87
    max-height: 300px;
88
    overflow-y: auto;
89
    border: 1px solid var(--SmartThemeBorderColor);
90
    border-radius: 5px;
91
    padding: 5px;
92
    background-color: var(--black30a);
93
    font-family: var(--monoFontFamily);
94
    font-size: 0.9em;
95
}
96

97
#regex_debugger_final_output {
98
    min-height: 2em;
99
    max-height: 300px;
100
    overflow-y: auto;
101
    border: 1px solid var(--SmartThemeBorderColor);
102
    border-radius: 5px;
103
    padding: 5px;
104
    background-color: var(--black30a);
105
    white-space: pre-wrap;
106
    word-break: break-word;
107
    text-align: left;
108
}
109

110
.step-header {
111
    margin-top: 10px;
112
    margin-bottom: 5px;
113
}
114

115
.step-output {
116
    white-space: pre-wrap;
117
    word-break: break-all;
118
    padding: 5px;
119
    background-color: var(--black30a);
120
    border-radius: 5px;
121
    text-align: left;
122
}
123

124
/* Classes to replace inline styles */
125
.regex-debugger-no-rules {
126
    padding: 10px;
127
    text-align: center;
128
    opacity: 0.8;
129
}
130

131
.regex-debugger-list-header {
132
    font-weight: bold;
133
    padding: 10px;
134
}
135

136
/* Styles for statistics */
137
.step-header {
138
    display: flex;
139
    justify-content: space-between;
140
    align-items: center;
141
}
142

143
.step-metrics {
144
    font-size: 0.8em;
145
    opacity: 0.8;
146
    font-weight: normal;
147
}
148

149
.regex-debugger-summary {
150
    padding: 8px;
151
    margin-bottom: 10px;
152
    border: 1px solid var(--SmartThemeBorderColor);
153
    background-color: var(--black30a);
154
    border-radius: 5px;
155
    text-align: center;
156
    font-size: 0.9em;
157
}
158

159
.regex-debugger-tester .results-header {
160
    position: relative;
161
    margin: 10px 0;
162
}
163

164
.regex-debugger-tester .radio_group {
165
    text-align: left;
166
}
167

168
/* Styles for statistics and highlighting additions */
169
.step-header {
170
    display: flex;
171
    justify-content: space-between;
172
    align-items: center;
173
    flex-wrap: wrap;
174
    /* Allow wrapping on small screens */
175
}
176

177
.step-metrics {
178
    font-size: 0.8em;
179
    opacity: 0.8;
180
    font-weight: normal;
181
    white-space: nowrap;
182
    /* Prevent metrics from breaking line */
183
    margin-left: 10px;
184
}
185

186
.regex-debugger-summary {
187
    padding: 8px;
188
    margin-bottom: 10px;
189
    border: 1px solid var(--SmartThemeBorderColor);
190
    background-color: var(--black30a);
191
    border-radius: 5px;
192
    text-align: center;
193
    font-size: 0.9em;
194
}
195

196
/* New highlight color for added text */
197
mark.green_hl {
198
    background-color: #28a745;
199
    /* A standard green color */
200
    color: white;
201
}
202

203
/* New highlight color for deleted text */
204
mark.red_hl {
205
    background-color: #dc3545;
206
    /* A standard red color */
207
    color: white;
208
    text-decoration: line-through;
209
}
210

211
/* Styles for the expanded view with navigation */
212
.expanded-regex-container {
213
    display: flex;
214
    height: 75vh;
215
    /* Give the container a good height */
216
    overflow: hidden;
217
}
218

219
.expanded-regex-nav {
220
    flex: 0 0 200px;
221
    /* Fixed width for the nav bar */
222
    border-right: 1px solid var(--SmartThemeBorderColor);
223
    padding: 5px;
224
    overflow-y: auto;
225
    background-color: var(--black30a);
226
}
227

228
.expanded-regex-nav a {
229
    display: block;
230
    padding: 6px 8px;
231
    text-decoration: none;
232
    color: var(--SmartThemeMainColor);
233
    border-radius: 5px;
234
    white-space: nowrap;
235
    overflow: hidden;
236
    text-overflow: ellipsis;
237
}
238

239
.expanded-regex-nav a:hover {
240
    background-color: var(--background_hover_color);
241
}
242

243
.expanded-regex-nav a.active {
244
    background-color: var(--highlight_color);
245
    color: var(--text_color_black);
246
}
247

248
.expanded-regex-content {
249
    flex-grow: 1;
250
    overflow-y: auto;
251
    padding-left: 10px;
252
}
253

254
#regex_debugger_render_mode {
255
    padding-right: 20px;
256
    margin-top: 5px;
257
}
258

259
.regex-popup-content {
260
    white-space: pre-wrap;
261
    word-break: break-all;
262
    text-align: left;
263
}