hdoc-tools 0.14.4 → 0.14.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/ui/css/theme-default/styles/components/htl-doc.css +763 -715
package/ui/css/theme-default/styles/components/htl-doc.css CHANGED
@@ -2,740 +2,788 @@
2
2
  * Headings
3
3
  * -------------------------------------------------------------------------- */
4
4
 
5
- .HTL-doc h1,
6
- .HTL-doc h2,
7
- .HTL-doc h3,
8
- .HTL-doc h4,
9
- .HTL-doc h5,
10
- .HTL-doc h6 {
11
- position: relative;
12
- font-weight: 600;
13
- outline: none;
14
- }
15
-
16
- .HTL-doc h1 {
17
- letter-spacing: -0.02em;
18
- line-height: 40px;
19
- font-size: 28px;
20
- }
21
-
22
- .HTL-doc h2 {
23
- margin: 48px 0 16px;
24
- padding-top: 24px;
25
- letter-spacing: -0.02em;
26
- line-height: 32px;
27
- font-size: 24px;
28
- }
29
-
30
- .HTL-doc h3 {
31
- margin: 32px 0 0;
32
- letter-spacing: -0.01em;
33
- line-height: 28px;
34
- font-size: 20px;
35
- }
36
-
37
- .HTL-doc h2 .header-anchor {
38
- position: absolute;
39
- font-size: 18px;
40
- left: -25px;
41
- top: 52%;
42
- width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
43
- opacity: 0; /*hidden */
44
- }
45
-
46
- .HTL-doc h3 .header-anchor {
47
- position: absolute;
48
- font-size: 18px;
49
- left: -25px;
50
- top: 5px;
51
- width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
52
- opacity: 0; /*hidden */
53
- }
54
-
55
-
56
- .HTL-doc h1:hover .header-anchor,
57
- .HTL-doc h2:hover .header-anchor,
58
- .HTL-doc h3:hover .header-anchor,
59
- .HTL-doc h4:hover .header-anchor,
60
- .HTL-doc h5:hover .header-anchor,
61
- .HTL-doc h6:hover .header-anchor
62
- {
63
- opacity: 1;
64
- }
65
-
66
- @media (min-width: 768px) {
67
- .HTL-doc h1 {
68
- letter-spacing: -0.02em;
69
- line-height: 40px;
70
- font-size: 32px;
71
- }
72
- }
73
-
74
- /**
5
+ .HTL-doc h1,
6
+ .HTL-doc h2,
7
+ .HTL-doc h3,
8
+ .HTL-doc h4,
9
+ .HTL-doc h5,
10
+ .HTL-doc h6 {
11
+ position: relative;
12
+ font-weight: 600;
13
+ outline: none;
14
+ }
15
+
16
+ .HTL-doc h1 {
17
+ letter-spacing: -0.02em;
18
+ line-height: 40px;
19
+ font-size: 28px;
20
+ }
21
+
22
+ .HTL-doc h2 {
23
+ margin: 48px 0 16px;
24
+ padding-top: 24px;
25
+ letter-spacing: -0.02em;
26
+ line-height: 32px;
27
+ font-size: 24px;
28
+ }
29
+
30
+ .HTL-doc h3 {
31
+ margin: 32px 0 0;
32
+ letter-spacing: -0.01em;
33
+ line-height: 28px;
34
+ font-size: 20px;
35
+ }
36
+
37
+ .HTL-doc h2 .header-anchor {
38
+ position: absolute;
39
+ font-size: 18px;
40
+ left: -25px;
41
+ top: 52%;
42
+ width: 32px;
43
+ /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
44
+ opacity: 0;
45
+ /*hidden */
46
+ }
47
+
48
+ .HTL-doc h3 .header-anchor {
49
+ position: absolute;
50
+ font-size: 18px;
51
+ left: -25px;
52
+ top: 5px;
53
+ width: 32px;
54
+ /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
55
+ opacity: 0;
56
+ /*hidden */
57
+ }
58
+
59
+
60
+ .HTL-doc h1:hover .header-anchor,
61
+ .HTL-doc h2:hover .header-anchor,
62
+ .HTL-doc h3:hover .header-anchor,
63
+ .HTL-doc h4:hover .header-anchor,
64
+ .HTL-doc h5:hover .header-anchor,
65
+ .HTL-doc h6:hover .header-anchor {
66
+ opacity: 1;
67
+ }
68
+
69
+ @media (min-width: 768px) {
70
+ .HTL-doc h1 {
71
+ letter-spacing: -0.02em;
72
+ line-height: 40px;
73
+ font-size: 32px;
74
+ }
75
+ }
76
+
77
+ /**
75
78
  * Paragraph and inline elements
76
79
  * -------------------------------------------------------------------------- */
77
-
78
- .HTL-doc p,
79
- .HTL-doc summary {
80
- margin: 16px 0;
81
- }
82
-
83
- .HTL-doc p {
84
- line-height: 28px;
85
- }
86
-
87
- .HTL-doc blockquote {
88
- margin: 16px 0;
89
- border-left: 2px solid var(--htl-c-divider);
90
- padding-left: 16px;
91
- transition: border-color 0.5s;
92
- }
93
-
94
- .HTL-doc blockquote > p {
95
- margin: 0;
96
- font-size: var(--htl-default-font-size);
97
- color: var(--htl-c-text-2);
98
- transition: color 0.5s;
99
- }
100
-
101
- .HTL-doc a {
102
- font-weight: 500;
103
- color: var(--htl-c-brand);
104
- text-decoration-style: dotted;
105
- transition: color 0.25s;
106
- }
107
-
108
- .HTL-doc a:hover {
109
- color: var(--htl-c-brand-dark);
110
- }
111
-
112
- .HTL-doc strong {
113
- font-weight: 600;
114
- }
115
-
116
- /**
80
+
81
+ .HTL-doc p,
82
+ .HTL-doc summary {
83
+ margin: 16px 0;
84
+ }
85
+
86
+ .HTL-doc p {
87
+ line-height: 28px;
88
+ }
89
+
90
+ .HTL-doc blockquote {
91
+ margin: 16px 0;
92
+ border-left: 2px solid var(--htl-c-divider);
93
+ padding-left: 16px;
94
+ transition: border-color 0.5s;
95
+ }
96
+
97
+ .HTL-doc blockquote>p {
98
+ margin: 0;
99
+ font-size: var(--htl-default-font-size);
100
+ color: var(--htl-c-text-2);
101
+ transition: color 0.5s;
102
+ }
103
+
104
+ .HTL-doc a {
105
+ font-weight: 500;
106
+ color: var(--htl-c-brand);
107
+ text-decoration-style: dotted;
108
+ transition: color 0.25s;
109
+ }
110
+
111
+ .HTL-doc a:hover {
112
+ color: var(--htl-c-brand-dark);
113
+ }
114
+
115
+ .HTL-doc strong {
116
+ font-weight: 600;
117
+ }
118
+
119
+ /**
117
120
  * Lists
118
121
  * -------------------------------------------------------------------------- */
119
-
120
- .HTL-doc ul,
121
- .HTL-doc ol {
122
- padding-left: 2.5rem;
123
- margin: 16px 0;
124
- }
125
-
126
- .HTL-doc ul {
127
- list-style: disc;
128
- }
129
-
130
- .HTL-doc ol {
131
- list-style: decimal;
132
- }
133
-
134
- .HTL-doc li + li {
135
- margin-top: 8px;
136
- }
137
-
138
- .HTL-doc li > ol,
139
- .HTL-doc li > ul {
140
- margin: 8px 0 0;
141
- }
142
-
143
- /**
122
+
123
+ .HTL-doc ul,
124
+ .HTL-doc ol {
125
+ padding-left: 2.5rem;
126
+ margin: 16px 0;
127
+ }
128
+
129
+ .HTL-doc ul {
130
+ list-style: disc;
131
+ }
132
+
133
+ .HTL-doc ol {
134
+ list-style: decimal;
135
+ }
136
+
137
+ .HTL-doc li+li {
138
+ margin-top: 8px;
139
+ }
140
+
141
+ .HTL-doc li>ol,
142
+ .HTL-doc li>ul {
143
+ margin: 8px 0 0;
144
+ }
145
+
146
+ /**
144
147
  * Table
145
148
  * -------------------------------------------------------------------------- */
146
-
147
- .HTL-doc table {
148
- display: block;
149
- border-collapse: collapse;
150
- margin: 20px 0;
151
- font-size: var(--htl-default-font-size); /* sets font-size for table and table rows/td/th etc*/
152
- }
153
-
154
- .HTL-doc tr {
155
- border-top: 1px solid var(--htl-c-divider);
156
- transition: background-color 0.5s;
157
- }
158
-
159
- .HTL-doc tr:nth-child(2n) {
160
- background-color: var(--htl-c-bg-soft);
161
- }
162
-
163
- .HTL-doc th,
164
- .HTL-doc td {
165
- border: 1px solid var(--htl-c-divider);
166
- padding: 10px 14px;
167
- vertical-align: top;
168
- }
169
-
170
- .HTL-doc th {
171
- font-size: var(--htl-default-font-size);
172
- font-weight: 600;
173
- background-color: var(--htl-c-white-soft);
174
- }
175
-
176
- .dark .HTL-doc th {
177
- background-color: var(--htl-c-black);
178
- }
179
-
180
- /**
149
+
150
+ .HTL-doc table {
151
+ display: block;
152
+ border-collapse: collapse;
153
+ margin: 20px 0;
154
+ font-size: var(--htl-default-font-size);
155
+ /* sets font-size for table and table rows/td/th etc*/
156
+ }
157
+
158
+ .HTL-doc tr {
159
+ border-top: 1px solid var(--htl-c-divider);
160
+ transition: background-color 0.5s;
161
+ }
162
+
163
+ .HTL-doc tr:nth-child(2n) {
164
+ background-color: var(--htl-c-bg-soft);
165
+ }
166
+
167
+ .HTL-doc th,
168
+ .HTL-doc td {
169
+ border: 1px solid var(--htl-c-divider);
170
+ padding: 10px 14px;
171
+ vertical-align: top;
172
+ }
173
+
174
+ .HTL-doc th {
175
+ font-size: var(--htl-default-font-size);
176
+ font-weight: 600;
177
+ background-color: var(--htl-c-white-soft);
178
+ }
179
+
180
+ .dark .HTL-doc th {
181
+ background-color: var(--htl-c-black);
182
+ }
183
+
184
+ /**
181
185
  * Decorational elements
182
186
  * -------------------------------------------------------------------------- */
183
-
184
- .HTL-doc hr {
185
- margin: 16px 0;
186
- border: none;
187
- border-top: 1px solid var(--htl-c-divider-light);
188
- }
189
-
190
- /**
187
+
188
+ .HTL-doc hr {
189
+ margin: 16px 0;
190
+ border: none;
191
+ border-top: 1px solid var(--htl-c-divider-light);
192
+ }
193
+
194
+ /**
191
195
  * Custom Block
192
196
  * -------------------------------------------------------------------------- */
193
-
194
- .HTL-doc .custom-block {
195
- margin: 16px 0;
196
- }
197
-
198
- .HTL-doc .custom-block p {
199
- margin: 8px 0;
200
- line-height: 24px;
201
- }
202
-
203
- .HTL-doc .custom-block p:first-child {
204
- margin: 0;
205
- }
206
-
207
- .HTL-doc .custom-block a {
208
- color: inherit;
209
- font-weight: 600;
210
- text-decoration: underline;
211
- transition: opacity 0.25s;
212
- }
213
-
214
- .HTL-doc .custom-block a:hover {
215
- opacity: 0.6;
216
- }
217
-
218
- .HTL-doc .custom-block code {
219
- font-size: var(--htl-custom-block-code-font-size);
220
- font-weight: 700;
221
- color: inherit;
222
- }
223
-
224
- .HTL-doc .custom-block div[class*='language-'] {
225
- margin: 8px 0;
226
- }
227
-
228
- .HTL-doc .custom-block div[class*='language-'] code {
229
- font-weight: 400;
230
- background-color: transparent;
231
- }
232
-
233
- /**
197
+
198
+ .HTL-doc .custom-block {
199
+ margin: 16px 0;
200
+ }
201
+
202
+ .HTL-doc .custom-block p {
203
+ margin: 8px 0;
204
+ line-height: 24px;
205
+ }
206
+
207
+ .HTL-doc .custom-block p:first-child {
208
+ margin: 0;
209
+ }
210
+
211
+ .HTL-doc .custom-block a {
212
+ color: inherit;
213
+ font-weight: 600;
214
+ text-decoration: underline;
215
+ transition: opacity 0.25s;
216
+ }
217
+
218
+ .HTL-doc .custom-block a:hover {
219
+ opacity: 0.6;
220
+ }
221
+
222
+ .HTL-doc .custom-block code {
223
+ font-size: var(--htl-custom-block-code-font-size);
224
+ font-weight: 700;
225
+ color: inherit;
226
+ }
227
+
228
+ .HTL-doc .custom-block div[class*='language-'] {
229
+ margin: 8px 0;
230
+ }
231
+
232
+ .HTL-doc .custom-block div[class*='language-'] code {
233
+ font-weight: 400;
234
+ background-color: transparent;
235
+ }
236
+
237
+ /**
234
238
  * Code
235
239
  * -------------------------------------------------------------------------- */
236
-
237
- /* inline code */
238
- .HTL-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
239
- font-size: var(--htl-code-font-size);
240
- }
241
-
242
- .HTL-doc :not(pre) > code {
243
- border-radius: 4px;
244
- padding: 3px 6px;
245
- color: var(--htl-c-text-code);
246
- background-color: var(--htl-c-bg-mute);
247
- transition: color 0.5s, background-color 0.5s;
248
- }
249
-
250
- .HTL-doc h1 > code,
251
- .HTL-doc h2 > code,
252
- .HTL-doc h3 > code {
253
- font-size: var(--htl-default-font-size);
254
- }
255
-
256
- .HTL-doc a > code {
257
- color: var(--htl-c-brand);
258
- transition: color 0.25s;
259
- }
260
-
261
- .HTL-doc a:hover > code {
262
- color: var(--htl-c-brand-dark);
263
- }
264
-
265
- .HTL-doc div[class*='language-'] {
266
- position: relative;
267
- margin: 16px -24px;
268
- background-color: var(--htl-code-block-bg);
269
- overflow-x: auto;
270
- transition: background-color 0.5s;
271
- }
272
-
273
- @media (min-width: 640px) {
274
- .HTL-doc div[class*='language-'] {
275
- border-radius: 8px;
276
- margin: 16px 0;
277
- }
278
- }
279
-
280
- @media (max-width: 639px) {
281
- .HTL-doc li div[class*='language-'] {
282
- border-radius: 8px 0 0 8px;
283
- }
284
- }
285
-
286
- .HTL-doc div[class*='language-'] + div[class*='language-'],
287
- .HTL-doc div[class$='-api'] + div[class*='language-'],
288
- .HTL-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
289
- margin-top: -8px;
290
- }
291
-
292
- .HTL-doc [class*='language-'] pre,
293
- .HTL-doc [class*='language-'] code {
294
- text-align: left;
295
- white-space: pre;
296
- word-spacing: normal;
297
- word-break: normal;
298
- word-wrap: normal;
299
- -moz-tab-size: 4;
300
- -o-tab-size: 4;
301
- tab-size: 4;
302
- -webkit-hyphens: none;
303
- -moz-hyphens: none;
304
- -ms-hyphens: none;
305
- hyphens: none;
306
- }
307
-
308
- .HTL-doc [class*='language-'] pre {
309
- position: relative;
310
- z-index: 1;
311
- margin: 0;
312
- padding: 16px 0;
313
- background: transparent;
314
- overflow-x: auto;
315
- }
316
-
317
- .HTL-doc [class*='language-'] code {
318
- display: block;
319
- padding: 0 24px;
320
- width: fit-content;
321
- min-width: 100%;
322
- line-height: var(--htl-code-line-height);
323
- font-size: var(--htl-code-font-size);
324
- color: var(--htl-code-block-color);
325
- transition: color 0.5s;
326
- }
327
-
328
- .HTL-doc [class*='language-'] code .highlighted {
329
- background-color: var(--htl-code-line-highlight-color);
330
- transition: background-color 0.5s;
331
- margin: 0 -24px;
332
- padding: 0 24px;
333
- width: calc(100% + 2 * 24px);
334
- display: inline-block;
335
- }
336
-
337
- .HTL-doc [class*='language-'] code .highlighted.error {
338
- background-color: var(--htl-code-line-error-color);
339
- }
340
-
341
- .HTL-doc [class*='language-'] code .highlighted.warning {
342
- background-color: var(--htl-code-line-warning-color);
343
- }
344
-
345
- .HTL-doc [class*='language-'] code .diff {
346
- transition: background-color 0.5s;
347
- margin: 0 -24px;
348
- padding: 0 24px;
349
- width: calc(100% + 2 * 24px);
350
- display: inline-block;
351
- }
352
-
353
- .HTL-doc [class*='language-'] code .diff::before {
354
- position: absolute;
355
- left: 1rem;
356
- }
357
-
358
- .HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
359
- filter: blur(0.095rem);
360
- opacity: 0.4;
361
- transition: filter 0.35s, opacity 0.35s;
362
- }
363
-
364
- .HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
365
- opacity: 0.7;
366
- transition: filter 0.35s, opacity 0.35s;
367
- }
368
-
369
- .HTL-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
370
- filter: blur(0);
371
- opacity: 1;
372
- }
373
-
374
- .HTL-doc [class*='language-'] code .diff.remove {
375
- background-color: var(--htl-code-line-diff-remove-color);
376
- opacity: 0.7;
377
- }
378
-
379
- .HTL-doc [class*='language-'] code .diff.remove::before {
380
- content: '-';
381
- color: var(--htl-code-line-diff-remove-symbol-color);
382
- }
383
-
384
- .HTL-doc [class*='language-'] code .diff.add {
385
- background-color: var(--htl-code-line-diff-add-color);
386
- }
387
-
388
- .HTL-doc [class*='language-'] code .diff.add::before {
389
- content: '+';
390
- color: var(--htl-code-line-diff-add-symbol-color);
391
- }
392
-
393
- .HTL-doc div[class*='language-'].line-numbers-mode {
394
- padding-left: 32px;
395
- }
396
-
397
- .HTL-doc .line-numbers-wrapper {
398
- position: absolute;
399
- top: 0;
400
- bottom: 0;
401
- left: 0;
402
- z-index: 3;
403
- border-right: 1px solid var(--htl-c-divider-dark-2);
404
- padding-top: 16px;
405
- width: 32px;
406
- text-align: center;
407
- font-family: var(--htl-font-family-mono);
408
- line-height: var(--htl-code-line-height);
409
- font-size: var(--htl-code-font-size);
410
- color: var(--htl-code-line-number-color);
411
- transition: border-color 0.5s, color 0.5s;
412
- }
413
-
414
- .HTL-doc [class*='language-'] > button.copy {
415
- position: absolute;
416
- top: 8px;
417
- right: 8px;
418
- z-index: 3;
419
- display: block;
420
- justify-content: center;
421
- align-items: center;
422
- border-radius: 4px;
423
- width: 40px;
424
- height: 40px;
425
- background-color: var(--htl-code-block-bg);
426
- opacity: 0;
427
- cursor: pointer;
428
- background-image: var(--htl-icon-copy);
429
- background-position: 50%;
430
- background-size: 20px;
431
- background-repeat: no-repeat;
432
- transition: opacity 0.4s;
433
- }
434
-
435
- .HTL-doc [class*='language-']:hover > button.copy,
436
- .HTL-doc [class*='language-'] > button.copy:focus {
437
- opacity: 1;
438
- }
439
-
440
- .HTL-doc [class*='language-'] > button.copy:hover {
441
- background-color: var(--htl-code-copy-code-hover-bg);
442
- }
443
-
444
- .HTL-doc [class*='language-'] > button.copy.copied,
445
- .HTL-doc [class*='language-'] > button.copy:hover.copied {
446
- border-radius: 0 4px 4px 0;
447
- background-color: var(--htl-code-copy-code-hover-bg);
448
- background-image: var(--htl-icon-copied);
449
- }
450
-
451
- .HTL-doc [class*='language-'] > button.copy.copied::before,
452
- .HTL-doc [class*='language-'] > button.copy:hover.copied::before {
453
- position: relative;
454
- left: -65px;
455
- display: block;
456
- border-radius: 4px 0 0 4px;
457
- padding-top: 8px;
458
- width: 64px;
459
- height: 40px;
460
- text-align: center;
461
- font-size: var(--htl-default-font-size);
462
- font-weight: 500;
463
- color: var(--htl-code-copy-code-active-text);
464
- background-color: var(--htl-code-copy-code-hover-bg);
465
- white-space: nowrap;
466
- content: 'Copied';
467
- }
468
-
469
- .HTL-doc [class*='language-'] > span.lang {
470
- position: absolute;
471
- top: 6px;
472
- right: 12px;
473
- z-index: 2;
474
- font-size: var(--htl-default-font-size);
475
- font-weight: 500;
476
- color: var(--htl-c-text-dark-3);
477
- transition: color 0.4s, opacity 0.4s;
478
- }
479
-
480
- .HTL-doc [class*='language-']:hover > button.copy + span.lang,
481
- .HTL-doc [class*='language-'] > button.copy:focus + span.lang {
482
- opacity: 0;
483
- }
484
-
485
- /**
240
+
241
+ /* inline code */
242
+ .HTL-doc :not(pre, h1, h2, h3, h4, h5, h6)>code {
243
+ font-size: var(--htl-code-font-size);
244
+ }
245
+
246
+ .HTL-doc :not(pre)>code {
247
+ border-radius: 4px;
248
+ padding: 3px 6px;
249
+ color: var(--htl-c-text-code);
250
+ background-color: var(--htl-c-bg-mute);
251
+ transition: color 0.5s, background-color 0.5s;
252
+ }
253
+
254
+ .HTL-doc h1>code,
255
+ .HTL-doc h2>code,
256
+ .HTL-doc h3>code {
257
+ font-size: var(--htl-default-font-size);
258
+ }
259
+
260
+ .HTL-doc a>code {
261
+ color: var(--htl-c-brand);
262
+ transition: color 0.25s;
263
+ }
264
+
265
+ .HTL-doc a:hover>code {
266
+ color: var(--htl-c-brand-dark);
267
+ }
268
+
269
+ .HTL-doc div[class*='language-'] {
270
+ position: relative;
271
+ margin: 16px -24px;
272
+ background-color: var(--htl-code-block-bg);
273
+ overflow-x: auto;
274
+ transition: background-color 0.5s;
275
+ }
276
+
277
+ @media (min-width: 640px) {
278
+ .HTL-doc div[class*='language-'] {
279
+ border-radius: 8px;
280
+ margin: 16px 0;
281
+ }
282
+ }
283
+
284
+ @media (max-width: 639px) {
285
+ .HTL-doc li div[class*='language-'] {
286
+ border-radius: 8px 0 0 8px;
287
+ }
288
+ }
289
+
290
+ .HTL-doc div[class*='language-']+div[class*='language-'],
291
+ .HTL-doc div[class$='-api']+div[class*='language-'],
292
+ .HTL-doc div[class*='language-']+div[class$='-api']>div[class*='language-'] {
293
+ margin-top: -8px;
294
+ }
295
+
296
+ .HTL-doc [class*='language-'] pre,
297
+ .HTL-doc [class*='language-'] code {
298
+ text-align: left;
299
+ white-space: pre;
300
+ word-spacing: normal;
301
+ word-break: normal;
302
+ word-wrap: normal;
303
+ -moz-tab-size: 4;
304
+ -o-tab-size: 4;
305
+ tab-size: 4;
306
+ -webkit-hyphens: none;
307
+ -moz-hyphens: none;
308
+ -ms-hyphens: none;
309
+ hyphens: none;
310
+ }
311
+
312
+ .HTL-doc [class*='language-'] pre {
313
+ position: relative;
314
+ z-index: 1;
315
+ margin: 0;
316
+ padding: 16px 0;
317
+ background: transparent;
318
+ overflow-x: auto;
319
+ }
320
+
321
+ .HTL-doc [class*='language-'] code {
322
+ display: block;
323
+ padding: 0 24px;
324
+ width: fit-content;
325
+ min-width: 100%;
326
+ line-height: var(--htl-code-line-height);
327
+ font-size: var(--htl-code-font-size);
328
+ color: var(--htl-code-block-color);
329
+ transition: color 0.5s;
330
+ }
331
+
332
+ .HTL-doc [class*='language-'] code .highlighted {
333
+ background-color: var(--htl-code-line-highlight-color);
334
+ transition: background-color 0.5s;
335
+ margin: 0 -24px;
336
+ padding: 0 24px;
337
+ width: calc(100% + 2 * 24px);
338
+ display: inline-block;
339
+ }
340
+
341
+ .HTL-doc [class*='language-'] code .highlighted.error {
342
+ background-color: var(--htl-code-line-error-color);
343
+ }
344
+
345
+ .HTL-doc [class*='language-'] code .highlighted.warning {
346
+ background-color: var(--htl-code-line-warning-color);
347
+ }
348
+
349
+ .HTL-doc [class*='language-'] code .diff {
350
+ transition: background-color 0.5s;
351
+ margin: 0 -24px;
352
+ padding: 0 24px;
353
+ width: calc(100% + 2 * 24px);
354
+ display: inline-block;
355
+ }
356
+
357
+ .HTL-doc [class*='language-'] code .diff::before {
358
+ position: absolute;
359
+ left: 1rem;
360
+ }
361
+
362
+ .HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
363
+ filter: blur(0.095rem);
364
+ opacity: 0.4;
365
+ transition: filter 0.35s, opacity 0.35s;
366
+ }
367
+
368
+ .HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
369
+ opacity: 0.7;
370
+ transition: filter 0.35s, opacity 0.35s;
371
+ }
372
+
373
+ .HTL-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
374
+ filter: blur(0);
375
+ opacity: 1;
376
+ }
377
+
378
+ .HTL-doc [class*='language-'] code .diff.remove {
379
+ background-color: var(--htl-code-line-diff-remove-color);
380
+ opacity: 0.7;
381
+ }
382
+
383
+ .HTL-doc [class*='language-'] code .diff.remove::before {
384
+ content: '-';
385
+ color: var(--htl-code-line-diff-remove-symbol-color);
386
+ }
387
+
388
+ .HTL-doc [class*='language-'] code .diff.add {
389
+ background-color: var(--htl-code-line-diff-add-color);
390
+ }
391
+
392
+ .HTL-doc [class*='language-'] code .diff.add::before {
393
+ content: '+';
394
+ color: var(--htl-code-line-diff-add-symbol-color);
395
+ }
396
+
397
+ .HTL-doc div[class*='language-'].line-numbers-mode {
398
+ padding-left: 32px;
399
+ }
400
+
401
+ .HTL-doc .line-numbers-wrapper {
402
+ position: absolute;
403
+ top: 0;
404
+ bottom: 0;
405
+ left: 0;
406
+ z-index: 3;
407
+ border-right: 1px solid var(--htl-c-divider-dark-2);
408
+ padding-top: 16px;
409
+ width: 32px;
410
+ text-align: center;
411
+ font-family: var(--htl-font-family-mono);
412
+ line-height: var(--htl-code-line-height);
413
+ font-size: var(--htl-code-font-size);
414
+ color: var(--htl-code-line-number-color);
415
+ transition: border-color 0.5s, color 0.5s;
416
+ }
417
+
418
+ .HTL-doc [class*='language-']>button.copy {
419
+ position: absolute;
420
+ top: 8px;
421
+ right: 8px;
422
+ z-index: 3;
423
+ display: block;
424
+ justify-content: center;
425
+ align-items: center;
426
+ border-radius: 4px;
427
+ width: 40px;
428
+ height: 40px;
429
+ background-color: var(--htl-code-block-bg);
430
+ opacity: 0;
431
+ cursor: pointer;
432
+ background-image: var(--htl-icon-copy);
433
+ background-position: 50%;
434
+ background-size: 20px;
435
+ background-repeat: no-repeat;
436
+ transition: opacity 0.4s;
437
+ }
438
+
439
+ .HTL-doc [class*='language-']:hover>button.copy,
440
+ .HTL-doc [class*='language-']>button.copy:focus {
441
+ opacity: 1;
442
+ }
443
+
444
+ .HTL-doc [class*='language-']>button.copy:hover {
445
+ background-color: var(--htl-code-copy-code-hover-bg);
446
+ }
447
+
448
+ .HTL-doc [class*='language-']>button.copy.copied,
449
+ .HTL-doc [class*='language-']>button.copy:hover.copied {
450
+ border-radius: 0 4px 4px 0;
451
+ background-color: var(--htl-code-copy-code-hover-bg);
452
+ background-image: var(--htl-icon-copied);
453
+ }
454
+
455
+ .HTL-doc [class*='language-']>button.copy.copied::before,
456
+ .HTL-doc [class*='language-']>button.copy:hover.copied::before {
457
+ position: relative;
458
+ left: -65px;
459
+ display: block;
460
+ border-radius: 4px 0 0 4px;
461
+ padding-top: 8px;
462
+ width: 64px;
463
+ height: 40px;
464
+ text-align: center;
465
+ font-size: var(--htl-default-font-size);
466
+ font-weight: 500;
467
+ color: var(--htl-code-copy-code-active-text);
468
+ background-color: var(--htl-code-copy-code-hover-bg);
469
+ white-space: nowrap;
470
+ content: 'Copied';
471
+ }
472
+
473
+ .HTL-doc [class*='language-']>span.lang {
474
+ position: absolute;
475
+ top: 6px;
476
+ right: 12px;
477
+ z-index: 2;
478
+ font-size: var(--htl-default-font-size);
479
+ font-weight: 500;
480
+ color: var(--htl-c-text-dark-3);
481
+ transition: color 0.4s, opacity 0.4s;
482
+ }
483
+
484
+ .HTL-doc [class*='language-']:hover>button.copy+span.lang,
485
+ .HTL-doc [class*='language-']>button.copy:focus+span.lang {
486
+ opacity: 0;
487
+ }
488
+
489
+ /**
486
490
  * Component: Team
487
491
  * -------------------------------------------------------------------------- */
488
-
489
- .HTL-doc .VPTeamMembers {
490
- margin-top: 24px;
491
- }
492
-
493
- .HTL-doc .VPTeamMembers.small.count-1 .container {
494
- margin: 0 !important;
495
- max-width: calc((100% - 24px) / 2) !important;
496
- }
497
-
498
- .HTL-doc .VPTeamMembers.small.count-2 .container,
499
- .HTL-doc .VPTeamMembers.small.count-3 .container {
500
- max-width: 100% !important;
501
- }
502
-
503
- .HTL-doc .VPTeamMembers.medium.count-1 .container {
504
- margin: 0 !important;
505
- max-width: calc((100% - 24px) / 2) !important;
506
- }
507
-
508
-
509
-
510
- /* CUSTOM HTL CLASSES FOR HTDOC */
511
- /* highlightjs code copy badge */
512
- .HTL-doc .code-badge {
513
- background: #555 !important;
514
- padding: 8px !important;
515
- }
516
- .HTL-doc .code-badge-copy-icon {
517
- font-size: 1.3em !important;
518
- }
519
-
520
- /* HTL inline styles */
521
- .HTL-doc .badge {
522
- white-space: nowrap;
523
- border-radius: 4px;
524
- padding: 0.1rem 0.5rem;
525
- font-size: 0.8em;
526
- margin-right: 4px;
527
- color: white;
528
- font-weight: unset;
529
- }
530
-
531
- .HTL-doc .badge:empty{
532
- display:inline-block;
533
- }
534
-
535
- .HTL-doc .badge:after {
536
- border-radius: 4px;
537
- padding: 0.05rem 0.25rem;
538
- }
539
-
540
- .HTL-doc .badge.badge-schema:after { /* MINT */
541
- content: "Schema";
542
- border: solid 1px #34bc9d;
543
- background-color: #46cfb0;
544
- }
545
-
546
- .HTL-doc .badge.badge-simple:after { /* AQUA */
547
- content: "Simple";
548
- border: solid 1px #3bd0d6;
549
- background-color: #4fc2e5;
550
- }
551
-
552
- .HTL-doc .badge.badge-complex:after { /* GRAPEFRUIT */
553
- content: "Complex";
554
- border: solid 1px #da4453;
555
- background-color: #ed5565;
556
- color: white;
557
- }
558
-
559
- .HTL-doc .badge.badge-method:after { /* BLUEJEANS */
560
- content: "Method";
561
- border: solid 1px #4b8ad5;
562
- background-color: #5e96e6;
563
- color: white;
564
- }
565
-
566
- .HTL-doc .badge.badge-experimental:after {
567
- content: "Experimental";
568
- border: solid 1px #da4453;
569
- background-color: #ed5565;
570
- }
571
-
572
- .HTL-doc .badge.badge-production:after {
573
- content: "In Production";
574
- border: solid 1px #185e0f;
575
- background-color: #3d9719;
576
- }
577
-
578
- .HTL-doc .badge.badge-development:after {
579
- content: "In Development";
580
- border: solid 1px #4b8ad5;
581
- background-color: #5e96e6;
582
- }
583
-
584
- .HTL-doc .badge.badge-preliminary:after {
585
- content: "Preliminary";
586
- border: solid 1px #bdaa58;
587
- background-color: #ddaf19;
588
- }
589
-
590
- .HTL-doc .badge.badge-depreciated:after {
591
- content: "Depreciated";
592
- border: solid 1px #494949;
593
- background-color: #666666;
594
- }
595
-
596
- .HTL-doc .badge.badge-info:after {
597
- content: "Info";
598
- white-space: nowrap;
599
- border: solid 1px rgb(48, 121, 0);
600
- background-color: rgb(57, 150, 3);
601
- }
602
-
603
- .HTL-doc .badge.badge-warn:after {
604
- content: "Warning";
605
- white-space: nowrap;
606
- border: solid 1px rgb(173, 137, 19);
607
- background-color: rgb(211, 168, 29);
608
- }
609
-
610
- .HTL-doc .badge.badge-error:after {
611
- content: "Error";
612
- white-space: nowrap;
613
- border: solid 1px rgb(121, 0, 0);
614
- background-color: rgb(184, 0, 0);
615
- }
616
-
617
- .HTL-doc .error-msg {
618
- color: rgb(184, 0, 0);
619
- }
620
-
621
- .HTL-doc .double-braces:before {
622
- display: inline;
623
- content: '{{';
624
- }
625
-
626
- .HTL-doc .double-braces:after {
627
- display: inline;
628
- content: '}}';
629
- }
630
-
631
- .HTL-doc .list-line-space {
632
- line-height: 24px;
633
- margin: 0;
634
- }
635
-
636
-
637
- /* HTL div alerts */
638
-
639
- .HTL-doc .hdoc-alert{
640
- border: 1px solid transparent;
641
- border-radius: 8px;
642
- padding: 16px 16px 8px;
643
- line-height: 24px;
644
- font-size: var(--htl-default-font-size);
645
- color: var(--htl-c-text-2);
646
- margin:10px 0;
647
- }
648
-
649
- .HTL-doc .hdoc-alert p{
650
- margin: 8 0;
651
- }
652
- .HTL-doc .hdoc-alert .hdoc-alert-title .bi{
653
- margin-right:5px;
654
-
655
- }
656
- .HTL-doc .hdoc-alert .hdoc-alert-title
657
- {
658
- font-weight: 700;
659
- margin: 0;
660
- }
661
-
662
- .HTL-doc .hdoc-alert.alert-icon-note
663
- {
664
- border-color: var(--htl-custom-block-details-border);
665
- color: var(--htl-custom-block-details-text);
666
- background-color: var(--htl-custom-block-details-bg);
667
- }
668
- .HTL-doc .hdoc-alert.alert-icon-note code
669
- {
670
- background-color: var(--htl-custom-block-details-code-bg);
671
- }
672
-
673
- .HTL-doc .hdoc-alert.alert-icon-tip
674
- {
675
- border-color: var(--htl-custom-block-tip-border);
676
- color: var(--htl-custom-block-tip-text);
677
- background-color: var(--htl-custom-block-tip-bg);
678
- }
679
- .HTL-doc .hdoc-alert.alert-icon-tip code{
680
- background-color: var(--htl-custom-block-tip-code-bg);
681
- }
682
-
683
- .HTL-doc .hdoc-alert.alert-icon-important
684
- {
685
- border-color: var(--htl-custom-block-info-border);
686
- color: var(--htl-custom-block-info-text);
687
- background-color: var(--htl-custom-block-info-bg);
688
-
689
- }
690
- .HTL-doc .hdoc-alert.alert-icon-important code {
691
- background-color: var(--htl-custom-block-info-code-bg);
692
- }
693
-
694
- .HTL-doc .hdoc-alert.alert-icon-caution
695
- {
696
- border-color: var(--htl-custom-block-caution-border);
697
- color: var(--htl-custom-block-caution-text);
698
- background-color: var(--htl-custom-block-caution-bg);
699
- }
700
- .HTL-doc .hdoc-alert.alert-icon-caution code {
701
- background-color: var(--htl-custom-block-caution-code-bg);
702
- }
703
-
704
- .HTL-doc .hdoc-alert.alert-icon-warning
705
- {
706
- border-color: var(--htl-custom-block-warning-border);
707
- color: var(--htl-custom-block-warning-text);
708
- background-color: var(--htl-custom-block-warning-bg);
709
- }
710
-
711
- .HTL-doc .hdoc-alert.alert-icon-warning code
712
- {
713
- background-color: var(--htl-custom-block-warning-code-bg);
714
- }
715
-
716
-
717
- .HTL-doc .after-bullets li:not(:last-child):after {
718
- content: "•";
719
- padding-left: 5px;
720
- padding-right: 5px;
721
- }
722
- .HTL-doc .after-fslash li:not(:last-child):after {
723
- content: "/";
724
- padding-left: 5px;
725
- padding-right: 5px;
726
- }
727
-
728
-
729
-
492
+
493
+ .HTL-doc .VPTeamMembers {
494
+ margin-top: 24px;
495
+ }
496
+
497
+ .HTL-doc .VPTeamMembers.small.count-1 .container {
498
+ margin: 0 !important;
499
+ max-width: calc((100% - 24px) / 2) !important;
500
+ }
501
+
502
+ .HTL-doc .VPTeamMembers.small.count-2 .container,
503
+ .HTL-doc .VPTeamMembers.small.count-3 .container {
504
+ max-width: 100% !important;
505
+ }
506
+
507
+ .HTL-doc .VPTeamMembers.medium.count-1 .container {
508
+ margin: 0 !important;
509
+ max-width: calc((100% - 24px) / 2) !important;
510
+ }
511
+
512
+
513
+
514
+ /* CUSTOM HTL CLASSES FOR HTDOC */
515
+ /* highlightjs code copy badge */
516
+ .HTL-doc .code-badge {
517
+ background: #555 !important;
518
+ padding: 8px !important;
519
+ }
520
+
521
+ .HTL-doc .code-badge-copy-icon {
522
+ font-size: 1.3em !important;
523
+ }
524
+
525
+ /* HTL inline styles */
526
+ .HTL-doc .badge {
527
+ white-space: nowrap;
528
+ border-radius: 4px;
529
+ padding: 0.1rem 0.5rem;
530
+ font-size: 0.8em;
531
+ margin-right: 4px;
532
+ color: white;
533
+ font-weight: unset;
534
+ }
535
+
536
+ .HTL-doc .badge:empty {
537
+ display: inline-block;
538
+ }
539
+
540
+ .HTL-doc .badge:after {
541
+ border-radius: 4px;
542
+ padding: 0.05rem 0.25rem;
543
+ }
544
+
545
+ .HTL-doc .badge.badge-schema:after {
546
+ /* MINT */
547
+ content: "Schema";
548
+ border: solid 1px #34bc9d;
549
+ background-color: #46cfb0;
550
+ }
551
+
552
+ .HTL-doc .badge.badge-simple:after {
553
+ /* AQUA */
554
+ content: "Simple";
555
+ border: solid 1px #3bd0d6;
556
+ background-color: #4fc2e5;
557
+ }
558
+
559
+ .HTL-doc .badge.badge-complex:after {
560
+ /* GRAPEFRUIT */
561
+ content: "Complex";
562
+ border: solid 1px #da4453;
563
+ background-color: #ed5565;
564
+ color: white;
565
+ }
566
+
567
+ .HTL-doc .badge.badge-method:after {
568
+ /* BLUEJEANS */
569
+ content: "Method";
570
+ border: solid 1px #4b8ad5;
571
+ background-color: #5e96e6;
572
+ color: white;
573
+ }
574
+
575
+ .HTL-doc .badge.badge-experimental:after {
576
+ content: "Experimental";
577
+ border: solid 1px #da4453;
578
+ background-color: #ed5565;
579
+ }
580
+
581
+ .HTL-doc .badge.badge-production:after {
582
+ content: "In Production";
583
+ border: solid 1px #185e0f;
584
+ background-color: #3d9719;
585
+ }
586
+
587
+ .HTL-doc .badge.badge-development:after {
588
+ content: "In Development";
589
+ border: solid 1px #4b8ad5;
590
+ background-color: #5e96e6;
591
+ }
592
+
593
+ .HTL-doc .badge.badge-preliminary:after {
594
+ content: "Preliminary";
595
+ border: solid 1px #bdaa58;
596
+ background-color: #ddaf19;
597
+ }
598
+
599
+ .HTL-doc .badge.badge-depreciated:after {
600
+ content: "Deprecated";
601
+ border: solid 1px #494949;
602
+ background-color: #666666;
603
+ }
604
+
605
+ .HTL-doc .badge.badge-info:after {
606
+ content: "Info";
607
+ white-space: nowrap;
608
+ border: solid 1px rgb(48, 121, 0);
609
+ background-color: rgb(57, 150, 3);
610
+ }
611
+
612
+ .HTL-doc .badge.badge-warn:after {
613
+ content: "Warning";
614
+ white-space: nowrap;
615
+ border: solid 1px rgb(173, 137, 19);
616
+ background-color: rgb(211, 168, 29);
617
+ }
618
+
619
+ .HTL-doc .badge.badge-error:after {
620
+ content: "Error";
621
+ white-space: nowrap;
622
+ border: solid 1px rgb(121, 0, 0);
623
+ background-color: rgb(184, 0, 0);
624
+ }
625
+
626
+ .HTL-doc .badge.badge-endpoint-internal:after {
627
+ content: "internal";
628
+ white-space: nowrap;
629
+ border: solid 1px #4A536B;
630
+ background-color: #4A536B;
631
+ }
632
+
633
+ .HTL-doc .badge.badge-endpoint-api:after {
634
+ content: "api";
635
+ white-space: nowrap;
636
+ border: solid 1px #1194DE;
637
+ background-color: #1194DE;
638
+ }
639
+
640
+ .HTL-doc .badge.badge-user-api:after {
641
+ content: "user";
642
+ white-space: nowrap;
643
+ border: solid 1px #51C17D;
644
+ background-color: #51C17D;
645
+ }
646
+
647
+ .HTL-doc .badge.badge-portal-api:after {
648
+ content: "portal";
649
+ white-space: nowrap;
650
+ border: solid 1px #F18929;
651
+ background-color: #F18929;
652
+ }
653
+
654
+ .HTL-doc .badge.badge-mobile-api:after {
655
+ content: "mobile";
656
+ white-space: nowrap;
657
+ border: solid 1px #C7004F;
658
+ background-color: #C7004F;
659
+ }
660
+
661
+ .HTL-doc .badge.badge-integration-api:after {
662
+ content: "integration";
663
+ white-space: nowrap;
664
+ border: solid 1px #224187;
665
+ background-color: #224187;
666
+ }
667
+
668
+ .HTL-doc .error-msg {
669
+ color: rgb(184, 0, 0);
670
+ }
671
+
672
+ .HTL-doc .double-braces:before {
673
+ display: inline;
674
+ content: '{{';
675
+ }
676
+
677
+ .HTL-doc .double-braces:after {
678
+ display: inline;
679
+ content: '}}';
680
+ }
681
+
682
+ .HTL-doc .list-line-space {
683
+ line-height: 24px;
684
+ margin: 0;
685
+ }
686
+
687
+
688
+ /* HTL div alerts */
689
+
690
+ .HTL-doc .hdoc-alert {
691
+ border: 1px solid transparent;
692
+ border-radius: 8px;
693
+ padding: 16px 16px 8px;
694
+ line-height: 24px;
695
+ font-size: var(--htl-default-font-size);
696
+ color: var(--htl-c-text-2);
697
+ margin: 10px 0;
698
+ }
699
+
700
+ .HTL-doc .hdoc-alert p {
701
+ margin: 8 0;
702
+ }
703
+
704
+ .HTL-doc .hdoc-alert .hdoc-alert-title .bi {
705
+ margin-right: 5px;
706
+
707
+ }
708
+
709
+ .HTL-doc .hdoc-alert .hdoc-alert-title {
710
+ font-weight: 700;
711
+ margin: 0;
712
+ }
713
+
714
+ .HTL-doc .hdoc-alert.alert-icon-note {
715
+ border-color: var(--htl-custom-block-details-border);
716
+ color: var(--htl-custom-block-details-text);
717
+ background-color: var(--htl-custom-block-details-bg);
718
+ }
719
+
720
+ .HTL-doc .hdoc-alert.alert-icon-note code {
721
+ background-color: var(--htl-custom-block-details-code-bg);
722
+ }
723
+
724
+ .HTL-doc .hdoc-alert.alert-icon-tip {
725
+ border-color: var(--htl-custom-block-tip-border);
726
+ color: var(--htl-custom-block-tip-text);
727
+ background-color: var(--htl-custom-block-tip-bg);
728
+ }
729
+
730
+ .HTL-doc .hdoc-alert.alert-icon-tip code {
731
+ background-color: var(--htl-custom-block-tip-code-bg);
732
+ }
733
+
734
+ .HTL-doc .hdoc-alert.alert-icon-important {
735
+ border-color: var(--htl-custom-block-info-border);
736
+ color: var(--htl-custom-block-info-text);
737
+ background-color: var(--htl-custom-block-info-bg);
738
+
739
+ }
740
+
741
+ .HTL-doc .hdoc-alert.alert-icon-important code {
742
+ background-color: var(--htl-custom-block-info-code-bg);
743
+ }
744
+
745
+ .HTL-doc .hdoc-alert.alert-icon-caution {
746
+ border-color: var(--htl-custom-block-caution-border);
747
+ color: var(--htl-custom-block-caution-text);
748
+ background-color: var(--htl-custom-block-caution-bg);
749
+ }
750
+
751
+ .HTL-doc .hdoc-alert.alert-icon-caution code {
752
+ background-color: var(--htl-custom-block-caution-code-bg);
753
+ }
754
+
755
+ .HTL-doc .hdoc-alert.alert-icon-warning {
756
+ border-color: var(--htl-custom-block-warning-border);
757
+ color: var(--htl-custom-block-warning-text);
758
+ background-color: var(--htl-custom-block-warning-bg);
759
+ }
760
+
761
+ .HTL-doc .hdoc-alert.alert-icon-warning code {
762
+ background-color: var(--htl-custom-block-warning-code-bg);
763
+ }
764
+
765
+
766
+ .HTL-doc .after-bullets li:not(:last-child):after {
767
+ content: "•";
768
+ padding-left: 5px;
769
+ padding-right: 5px;
770
+ }
771
+
772
+ .HTL-doc .after-fslash li:not(:last-child):after {
773
+ content: "/";
774
+ padding-left: 5px;
775
+ padding-right: 5px;
776
+ }
777
+
778
+
779
+
730
780
  /* lighter bg for code blocks */
731
- .HTL-doc .hljs
732
- {
781
+ .HTL-doc .hljs {
733
782
  background: #494949;
734
783
  width: 100%;
735
784
  }
736
785
 
737
- .dark .HTL-doc .hljs
738
- {
786
+ .dark .HTL-doc .hljs {
739
787
  background: #000000;
740
788
  width: 100%;
741
789
  }