@trdrs/quickcharts 2.3.0 → 3.0.0
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.
- package/CHANGELOG.md +34 -0
- package/README.md +139 -7
- package/dist/{ar-KSXQ2USS.js → ar-HLKX6L6O.js} +2 -1
- package/dist/ar-HLKX6L6O.js.map +1 -0
- package/dist/{assets-M5emOz5c.d.ts → assets-C1VjN7DP.d.ts} +1 -0
- package/dist/{ca_ES-JG4FM55E.js → ca_ES-3ALUJ2FI.js} +2 -1
- package/dist/ca_ES-3ALUJ2FI.js.map +1 -0
- package/dist/{chunk-YR7NT5ZW.js → chunk-DBJQXHLQ.js} +8 -2
- package/dist/{chunk-YR7NT5ZW.js.map → chunk-DBJQXHLQ.js.map} +1 -1
- package/dist/{de-VSW2LHNF.js → de-GXKOZYHP.js} +2 -1
- package/dist/de-GXKOZYHP.js.map +1 -0
- package/dist/drawings.d.ts +2 -2
- package/dist/drawings.js +1 -1
- package/dist/{es-5ZXIPVOB.js → es-R7WSUWO2.js} +2 -1
- package/dist/es-R7WSUWO2.js.map +1 -0
- package/dist/feature-manifest.json +45 -1
- package/dist/{fr-4F6DAWGD.js → fr-EBUMQLPT.js} +2 -1
- package/dist/fr-EBUMQLPT.js.map +1 -0
- package/dist/{he_IL-B7PBQUEV.js → he_IL-GCAXKEWB.js} +2 -1
- package/dist/{he_IL-B7PBQUEV.js.map → he_IL-GCAXKEWB.js.map} +1 -1
- package/dist/{id_ID-CYJRMXPC.js → id_ID-6JYEEKEA.js} +2 -1
- package/dist/id_ID-6JYEEKEA.js.map +1 -0
- package/dist/index.d.ts +98 -14
- package/dist/index.js +1697 -1440
- package/dist/index.js.map +1 -1
- package/dist/{it-KTX4SG5P.js → it-IMLHI5VO.js} +2 -1
- package/dist/it-IMLHI5VO.js.map +1 -0
- package/dist/{ja-V7OURU5D.js → ja-QDEQ2EYA.js} +2 -1
- package/dist/ja-QDEQ2EYA.js.map +1 -0
- package/dist/{ko-2RNEBYVE.js → ko-MTA7BZI3.js} +2 -1
- package/dist/ko-MTA7BZI3.js.map +1 -0
- package/dist/{ms_MY-EY235E7Q.js → ms_MY-K4EAHE5J.js} +2 -1
- package/dist/ms_MY-K4EAHE5J.js.map +1 -0
- package/dist/{pl-ADNVRP55.js → pl-CIIDQ3SB.js} +2 -1
- package/dist/pl-CIIDQ3SB.js.map +1 -0
- package/dist/{pt-OL2DR3DO.js → pt-3HA2PDUN.js} +2 -1
- package/dist/pt-3HA2PDUN.js.map +1 -0
- package/dist/quickcharts.css +254 -116
- package/dist/{ru-V6YFEPAF.js → ru-2F2VGHMW.js} +2 -1
- package/dist/ru-2F2VGHMW.js.map +1 -0
- package/dist/{sv-TORXQVE7.js → sv-HCBRKFRZ.js} +2 -1
- package/dist/sv-HCBRKFRZ.js.map +1 -0
- package/dist/{symbols-BL1fD4CS.d.ts → symbols-6V22WaRX.d.ts} +1 -1
- package/dist/symbols.d.ts +1 -1
- package/dist/{th-K6SJSYSY.js → th-WWPM2QKB.js} +2 -1
- package/dist/th-WWPM2QKB.js.map +1 -0
- package/dist/theme-manifest.json +56 -2
- package/dist/{tr-4AEM66KW.js → tr-M57AMCWK.js} +2 -1
- package/dist/tr-M57AMCWK.js.map +1 -0
- package/dist/{vi-YU5XCEUU.js → vi-YJHN2OK7.js} +2 -1
- package/dist/vi-YJHN2OK7.js.map +1 -0
- package/dist/{zh-QXKRYHU5.js → zh-AIFC65OE.js} +2 -1
- package/dist/zh-AIFC65OE.js.map +1 -0
- package/dist/{zh_TW-AYPDKG4Q.js → zh_TW-2LLLW4H6.js} +2 -1
- package/dist/zh_TW-2LLLW4H6.js.map +1 -0
- package/package.json +1 -1
- package/dist/ar-KSXQ2USS.js.map +0 -1
- package/dist/ca_ES-JG4FM55E.js.map +0 -1
- package/dist/de-VSW2LHNF.js.map +0 -1
- package/dist/es-5ZXIPVOB.js.map +0 -1
- package/dist/fr-4F6DAWGD.js.map +0 -1
- package/dist/id_ID-CYJRMXPC.js.map +0 -1
- package/dist/it-KTX4SG5P.js.map +0 -1
- package/dist/ja-V7OURU5D.js.map +0 -1
- package/dist/ko-2RNEBYVE.js.map +0 -1
- package/dist/ms_MY-EY235E7Q.js.map +0 -1
- package/dist/pl-ADNVRP55.js.map +0 -1
- package/dist/pt-OL2DR3DO.js.map +0 -1
- package/dist/ru-V6YFEPAF.js.map +0 -1
- package/dist/sv-TORXQVE7.js.map +0 -1
- package/dist/th-K6SJSYSY.js.map +0 -1
- package/dist/tr-4AEM66KW.js.map +0 -1
- package/dist/vi-YU5XCEUU.js.map +0 -1
- package/dist/zh-QXKRYHU5.js.map +0 -1
- package/dist/zh_TW-AYPDKG4Q.js.map +0 -1
package/dist/quickcharts.css
CHANGED
|
@@ -22,6 +22,10 @@
|
|
|
22
22
|
--qc-chrome-scrollThumb: #9c9c9c;
|
|
23
23
|
--qc-chrome-surface: #ffffff;
|
|
24
24
|
--qc-chrome-surfaceRaised: #ffffff;
|
|
25
|
+
--qc-control-fieldEdge: #dbdbdb;
|
|
26
|
+
--qc-control-fieldEdgeHover: #a8a8a8;
|
|
27
|
+
--qc-control-fieldFill: #f2f2f2;
|
|
28
|
+
--qc-control-fieldInvalid: #f23645;
|
|
25
29
|
--qc-control-mark: #ffffff;
|
|
26
30
|
--qc-control-off: #9c9c9c;
|
|
27
31
|
--qc-control-offHover: #8c8c8c;
|
|
@@ -113,6 +117,10 @@
|
|
|
113
117
|
--qc-chrome-scrollThumb: #3d3d3d;
|
|
114
118
|
--qc-chrome-surface: #0f0f0f;
|
|
115
119
|
--qc-chrome-surfaceRaised: #2e2e2e;
|
|
120
|
+
--qc-control-fieldEdge: #575757;
|
|
121
|
+
--qc-control-fieldEdgeHover: #707070;
|
|
122
|
+
--qc-control-fieldFill: #2e2e2e;
|
|
123
|
+
--qc-control-fieldInvalid: #f23645;
|
|
116
124
|
--qc-control-mark: #2e2e2e;
|
|
117
125
|
--qc-control-off: #636363;
|
|
118
126
|
--qc-control-offHover: #707070;
|
|
@@ -342,34 +350,140 @@
|
|
|
342
350
|
border-color: var(--qc-state-pressed);
|
|
343
351
|
}
|
|
344
352
|
|
|
353
|
+
/* Fields -------------------------------------------------------------------------------------- */
|
|
354
|
+
|
|
355
|
+
/* A field is one box wherever the chart draws it: a text field, a select, a number field or a color
|
|
356
|
+
* well. A 1px edge rounds an 8px corner around a clear ground, 34px tall, with its words at 14 on 18
|
|
357
|
+
* and 8px in from the outer edge. */
|
|
345
358
|
[data-qc-theme] .qc-field {
|
|
359
|
+
box-sizing: border-box;
|
|
360
|
+
height: 34px;
|
|
361
|
+
padding: 0 7px;
|
|
346
362
|
color: var(--qc-text-primary);
|
|
347
363
|
font: inherit;
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
364
|
+
font-size: var(--qc-text-fontSizeBase);
|
|
365
|
+
line-height: 18px;
|
|
366
|
+
background: transparent;
|
|
367
|
+
border: 1px solid var(--qc-control-fieldEdge);
|
|
368
|
+
border-radius: 8px;
|
|
369
|
+
transition: border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), box-shadow var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
|
|
351
370
|
}
|
|
352
371
|
|
|
353
372
|
[data-qc-theme] .qc-field::placeholder {
|
|
354
373
|
color: var(--qc-text-muted);
|
|
355
374
|
}
|
|
356
375
|
|
|
376
|
+
/* The states stand in the order they outrank one another: the pointer steps the edge up, a field that
|
|
377
|
+
* cannot be edited and a refused value each outrank the pointer, and focus outranks them all. */
|
|
378
|
+
[data-qc-theme] .qc-field:hover {
|
|
379
|
+
border-color: var(--qc-control-fieldEdgeHover);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* A field that cannot be edited stands on the read-only fill, its edge at rest under the pointer. A
|
|
383
|
+
* disabled one stands its words back too. */
|
|
384
|
+
[data-qc-theme] .qc-field[readonly] {
|
|
385
|
+
background: var(--qc-control-fieldFill);
|
|
386
|
+
border-color: var(--qc-control-fieldEdge);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
[data-qc-theme] .qc-field:disabled,
|
|
390
|
+
[data-qc-theme] .qc-field[aria-disabled='true'] {
|
|
391
|
+
color: var(--qc-text-muted);
|
|
392
|
+
background: var(--qc-control-fieldFill);
|
|
393
|
+
border-color: var(--qc-control-fieldEdge);
|
|
394
|
+
cursor: default;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* A value the chart refuses turns the field's edge the invalid color, and only that: the chart says
|
|
398
|
+
* so with `aria-invalid`. A number past a field's bounds or off its step is a value the chart clamps
|
|
399
|
+
* or rounds, not one it refuses, so the field never turns red for it. */
|
|
400
|
+
[data-qc-theme] .qc-field[aria-invalid='true'] {
|
|
401
|
+
border-color: var(--qc-control-fieldInvalid);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/* Focus draws a 2px ring over the edge, the edge itself and the pixel inside it, so the ring follows
|
|
405
|
+
* the corner and stays inside the box, where no scrolling surface clips it. A text field, a select
|
|
406
|
+
* and a number field wear it whenever they have the keyboard; a color well and a list button wear it
|
|
407
|
+
* when the keyboard brought it to them, as every button does. A refused value rings in the invalid
|
|
408
|
+
* color. */
|
|
409
|
+
[data-qc-theme] .qc-field:not(button):focus,
|
|
410
|
+
[data-qc-theme] .qc-field:focus-visible {
|
|
411
|
+
border-color: var(--qc-state-focusRing);
|
|
412
|
+
box-shadow: inset 0 0 0 1px var(--qc-state-focusRing);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
[data-qc-theme] .qc-field[aria-invalid='true']:not(button):focus,
|
|
416
|
+
[data-qc-theme] .qc-field[aria-invalid='true']:focus-visible {
|
|
417
|
+
border-color: var(--qc-control-fieldInvalid);
|
|
418
|
+
box-shadow: inset 0 0 0 1px var(--qc-control-fieldInvalid);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/* A select draws its own chevron: the 18px mark in the muted ink, in a 20 by 28 slot 2px in from the
|
|
422
|
+
* end of the box. A native select gives up the slot's room and takes the press the slot lets
|
|
423
|
+
* through; a list button lays the slot out after its face and turns the mark while its list is open,
|
|
424
|
+
* keyed on its own state, so a list button inside some other open thing does not turn. */
|
|
425
|
+
[data-qc-theme] .qc-select {
|
|
426
|
+
position: relative;
|
|
427
|
+
display: inline-flex;
|
|
428
|
+
max-width: 100%;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
[data-qc-theme] .qc-select > .qc-field {
|
|
432
|
+
flex: 1 1 auto;
|
|
433
|
+
padding-inline-end: 25px;
|
|
434
|
+
appearance: none;
|
|
435
|
+
cursor: pointer;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
[data-qc-theme] .qc-select-chevron {
|
|
439
|
+
display: flex;
|
|
440
|
+
flex: 0 0 20px;
|
|
441
|
+
align-items: center;
|
|
442
|
+
justify-content: center;
|
|
443
|
+
width: 20px;
|
|
444
|
+
height: 28px;
|
|
445
|
+
color: var(--qc-text-muted);
|
|
446
|
+
pointer-events: none;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
[data-qc-theme] .qc-select > .qc-select-chevron {
|
|
450
|
+
position: absolute;
|
|
451
|
+
inset-block-start: 3px;
|
|
452
|
+
inset-inline-end: 3px;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
[data-qc-theme] .qc-select-chevron > svg {
|
|
456
|
+
transition: rotate var(--qc-motion-durationSlow) var(--qc-motion-easingSpring);
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
[data-qc-theme] [aria-expanded='true'] > .qc-select-chevron > svg {
|
|
460
|
+
rotate: 180deg;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
[data-qc-theme] .qc-field:disabled ~ .qc-select-chevron,
|
|
464
|
+
[data-qc-theme] .qc-field:disabled > .qc-select-chevron {
|
|
465
|
+
color: var(--qc-text-disabled);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
/* Focus --------------------------------------------------------------------------------------- */
|
|
469
|
+
|
|
357
470
|
[data-qc-theme] :focus-visible {
|
|
358
471
|
outline: 2px solid var(--qc-state-focusRing);
|
|
359
472
|
outline-offset: 1px;
|
|
360
473
|
}
|
|
361
474
|
|
|
362
|
-
/* A field
|
|
363
|
-
*
|
|
364
|
-
*
|
|
365
|
-
*
|
|
366
|
-
*
|
|
367
|
-
* layer outranks a normal one in a later layer. */
|
|
475
|
+
/* A field shows it has the keyboard on its own box: a search field by the caret in it, every other
|
|
476
|
+
* field by the ring its edge turns. The outline that marks a focused control would draw a second
|
|
477
|
+
* ring outside the field's own, so fields stand out of it, and hold that against a host's focus rule
|
|
478
|
+
* from a later cascade layer too: an important declaration in an earlier layer outranks a normal one
|
|
479
|
+
* in a later layer. */
|
|
368
480
|
[data-qc-theme] .qc-search-input:focus-visible,
|
|
369
481
|
[data-qc-theme] .qc-picker-search:focus-visible,
|
|
370
482
|
[data-qc-theme] .qc-layouts-search-input:focus-visible,
|
|
483
|
+
[data-qc-theme] .qc-field:focus-visible,
|
|
371
484
|
[data-qc-theme] .qc-name-input:focus-visible,
|
|
372
|
-
[data-qc-theme] .qc-drawing-hex:focus-visible
|
|
485
|
+
[data-qc-theme] .qc-drawing-hex:focus-visible,
|
|
486
|
+
[data-qc-theme] .qc-drawing-opacity-readout:focus-visible {
|
|
373
487
|
outline: none !important;
|
|
374
488
|
}
|
|
375
489
|
|
|
@@ -1141,15 +1255,14 @@
|
|
|
1141
1255
|
gap: 8px;
|
|
1142
1256
|
}
|
|
1143
1257
|
|
|
1258
|
+
/* The fields are the chart's own 34px boxes, so an input reads the same here as in the settings
|
|
1259
|
+
* dialog: a number at the drawing settings' middle width, and a select no narrower. */
|
|
1144
1260
|
[data-qc-theme] .qc-inputs-field {
|
|
1145
|
-
width:
|
|
1146
|
-
padding: 1px 4px;
|
|
1147
|
-
font-size: var(--qc-text-fontSizeSmall);
|
|
1261
|
+
width: 84px;
|
|
1148
1262
|
}
|
|
1149
1263
|
|
|
1150
1264
|
[data-qc-theme] .qc-inputs-select {
|
|
1151
|
-
|
|
1152
|
-
font-size: var(--qc-text-fontSizeSmall);
|
|
1265
|
+
min-width: 84px;
|
|
1153
1266
|
}
|
|
1154
1267
|
|
|
1155
1268
|
[data-qc-theme] .qc-inputs-actions {
|
|
@@ -1187,10 +1300,18 @@
|
|
|
1187
1300
|
background: Highlight;
|
|
1188
1301
|
}
|
|
1189
1302
|
|
|
1190
|
-
[data-qc-theme] .qc-button:disabled
|
|
1303
|
+
[data-qc-theme] .qc-button:disabled,
|
|
1304
|
+
[data-qc-theme] .qc-field:disabled {
|
|
1191
1305
|
color: GrayText;
|
|
1192
1306
|
}
|
|
1193
1307
|
|
|
1308
|
+
/* A field rings its focus in the system highlight, drawn the way its own ring is drawn. */
|
|
1309
|
+
[data-qc-theme] .qc-field:not(button):focus,
|
|
1310
|
+
[data-qc-theme] .qc-field:focus-visible {
|
|
1311
|
+
border-color: Highlight;
|
|
1312
|
+
box-shadow: inset 0 0 0 1px Highlight;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1194
1315
|
[data-qc-theme] :focus-visible {
|
|
1195
1316
|
outline-color: Highlight;
|
|
1196
1317
|
}
|
|
@@ -1769,17 +1890,6 @@
|
|
|
1769
1890
|
padding: 0 6px 6px;
|
|
1770
1891
|
}
|
|
1771
1892
|
|
|
1772
|
-
/* The shared color control inside a chrome row is the drawing field at the row's own height. */
|
|
1773
|
-
[data-qc-theme] .qc-settings-row .qc-drawing-swatch-button {
|
|
1774
|
-
height: 24px;
|
|
1775
|
-
padding: 0 4px;
|
|
1776
|
-
}
|
|
1777
|
-
|
|
1778
|
-
[data-qc-theme] .qc-settings-row .qc-drawing-well {
|
|
1779
|
-
width: 20px;
|
|
1780
|
-
height: 16px;
|
|
1781
|
-
}
|
|
1782
|
-
|
|
1783
1893
|
/* The inline text editor over the pane, the glyph picker and the image picker. */
|
|
1784
1894
|
|
|
1785
1895
|
/* The editor sits at the drawing's own text position in the drawing's own type; its size follows
|
|
@@ -2041,14 +2151,8 @@
|
|
|
2041
2151
|
cursor: default;
|
|
2042
2152
|
}
|
|
2043
2153
|
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
[data-qc-theme] .qc-drawing-number {
|
|
2047
|
-
height: 34px;
|
|
2048
|
-
padding: 0 10px;
|
|
2049
|
-
font-size: var(--qc-text-fontSizeBase);
|
|
2050
|
-
}
|
|
2051
|
-
|
|
2154
|
+
/* The text fields, selects and number fields are the chart's 34px field box; these rules give them
|
|
2155
|
+
* their widths alone. */
|
|
2052
2156
|
[data-qc-theme] .qc-drawing-select {
|
|
2053
2157
|
min-width: 140px;
|
|
2054
2158
|
}
|
|
@@ -2061,21 +2165,28 @@
|
|
|
2061
2165
|
width: 100%;
|
|
2062
2166
|
}
|
|
2063
2167
|
|
|
2168
|
+
/* The text area grows from four lines, its words 8px in from every side of its box. */
|
|
2064
2169
|
[data-qc-theme] .qc-drawing-textarea {
|
|
2065
2170
|
width: 100%;
|
|
2171
|
+
height: auto;
|
|
2066
2172
|
min-height: 80px;
|
|
2067
2173
|
margin-top: 4px;
|
|
2068
|
-
padding:
|
|
2069
|
-
font-size: var(--qc-text-fontSizeBase);
|
|
2174
|
+
padding: 7px;
|
|
2070
2175
|
resize: vertical;
|
|
2071
2176
|
}
|
|
2072
2177
|
|
|
2073
|
-
/* The number field
|
|
2178
|
+
/* The number field gives the end of its box to the steppers: a 22 by 28 column 2px in from the edge,
|
|
2179
|
+
* revealed on hover or focus. The pointer on a stepper is on the field, so the edge steps up there
|
|
2180
|
+
* too, at the weight of the field's own pointer state. */
|
|
2074
2181
|
[data-qc-theme] .qc-drawing-number-wrap {
|
|
2075
2182
|
position: relative;
|
|
2076
2183
|
display: inline-flex;
|
|
2077
2184
|
}
|
|
2078
2185
|
|
|
2186
|
+
[data-qc-theme] :where(.qc-drawing-number-wrap:hover) > .qc-field {
|
|
2187
|
+
border-color: var(--qc-control-fieldEdgeHover);
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2079
2190
|
[data-qc-theme] .qc-drawing-number-wrap[data-width='short'] {
|
|
2080
2191
|
width: 64px;
|
|
2081
2192
|
}
|
|
@@ -2090,7 +2201,7 @@
|
|
|
2090
2201
|
|
|
2091
2202
|
[data-qc-theme] .qc-drawing-number {
|
|
2092
2203
|
width: 100%;
|
|
2093
|
-
padding-inline-end:
|
|
2204
|
+
padding-inline-end: 26px;
|
|
2094
2205
|
font-variant-numeric: tabular-nums;
|
|
2095
2206
|
appearance: textfield;
|
|
2096
2207
|
}
|
|
@@ -2103,11 +2214,10 @@
|
|
|
2103
2214
|
|
|
2104
2215
|
[data-qc-theme] .qc-drawing-steppers {
|
|
2105
2216
|
position: absolute;
|
|
2106
|
-
|
|
2107
|
-
inset-inline-end:
|
|
2217
|
+
inset-block: 3px;
|
|
2218
|
+
inset-inline-end: 3px;
|
|
2108
2219
|
display: none;
|
|
2109
2220
|
flex-direction: column;
|
|
2110
|
-
transform: translateY(-50%);
|
|
2111
2221
|
}
|
|
2112
2222
|
|
|
2113
2223
|
[data-qc-theme] .qc-drawing-number-wrap:hover .qc-drawing-steppers,
|
|
@@ -2120,7 +2230,7 @@
|
|
|
2120
2230
|
align-items: center;
|
|
2121
2231
|
justify-content: center;
|
|
2122
2232
|
width: 22px;
|
|
2123
|
-
height:
|
|
2233
|
+
height: 14px;
|
|
2124
2234
|
padding: 0;
|
|
2125
2235
|
color: var(--qc-text-muted);
|
|
2126
2236
|
background: none;
|
|
@@ -2256,6 +2366,9 @@
|
|
|
2256
2366
|
border-radius: 4px;
|
|
2257
2367
|
}
|
|
2258
2368
|
|
|
2369
|
+
/* The hex field and the opacity readout are the field box at the mixer's compact 26px: the same edge
|
|
2370
|
+
* and pointer step and the same ring, with the corner and the inset scaled to their height. The hex
|
|
2371
|
+
* field's box is the wrap around its mark and its input. */
|
|
2259
2372
|
[data-qc-theme] .qc-drawing-hex-wrap {
|
|
2260
2373
|
display: flex;
|
|
2261
2374
|
flex: 0 0 auto;
|
|
@@ -2264,20 +2377,26 @@
|
|
|
2264
2377
|
min-width: 0;
|
|
2265
2378
|
height: 26px;
|
|
2266
2379
|
padding: 0 5px;
|
|
2267
|
-
border: 1px solid var(--qc-
|
|
2268
|
-
border-radius:
|
|
2380
|
+
border: 1px solid var(--qc-control-fieldEdge);
|
|
2381
|
+
border-radius: 6px;
|
|
2382
|
+
transition: border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), box-shadow var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
|
|
2269
2383
|
}
|
|
2270
2384
|
|
|
2271
2385
|
[data-qc-theme] .qc-drawing-hex-wrap > .qc-muted {
|
|
2272
2386
|
flex: 0 0 7px;
|
|
2273
2387
|
}
|
|
2274
2388
|
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2389
|
+
[data-qc-theme] .qc-drawing-hex-wrap:hover,
|
|
2390
|
+
[data-qc-theme] .qc-drawing-opacity-readout:hover {
|
|
2391
|
+
border-color: var(--qc-control-fieldEdgeHover);
|
|
2392
|
+
}
|
|
2393
|
+
|
|
2394
|
+
/* A field says it has the keyboard on its own box: a 2px ring over the edge, the edge itself and the
|
|
2395
|
+
* pixel inside it, following the corner. The wrap rings while the caret is anywhere inside it. */
|
|
2278
2396
|
[data-qc-theme] .qc-drawing-hex-wrap:focus-within,
|
|
2279
|
-
[data-qc-theme] .qc-drawing-opacity-readout:focus
|
|
2397
|
+
[data-qc-theme] .qc-drawing-opacity-readout:focus {
|
|
2280
2398
|
border-color: var(--qc-state-focusRing);
|
|
2399
|
+
box-shadow: inset 0 0 0 1px var(--qc-state-focusRing);
|
|
2281
2400
|
}
|
|
2282
2401
|
|
|
2283
2402
|
[data-qc-theme] .qc-drawing-hex {
|
|
@@ -2445,8 +2564,8 @@
|
|
|
2445
2564
|
cursor: pointer;
|
|
2446
2565
|
}
|
|
2447
2566
|
|
|
2448
|
-
/* The readout is a FIELD beside the track:
|
|
2449
|
-
*
|
|
2567
|
+
/* The readout is a FIELD beside the track: edged rather than washed, because it is a number a viewer
|
|
2568
|
+
* types over and not a chip the panel is showing them. */
|
|
2450
2569
|
[data-qc-theme] .qc-drawing-opacity-field {
|
|
2451
2570
|
position: relative;
|
|
2452
2571
|
flex: 0 0 auto;
|
|
@@ -2460,9 +2579,10 @@
|
|
|
2460
2579
|
font: inherit;
|
|
2461
2580
|
font-variant-numeric: tabular-nums;
|
|
2462
2581
|
background: none;
|
|
2463
|
-
border: 1px solid var(--qc-
|
|
2464
|
-
border-radius:
|
|
2582
|
+
border: 1px solid var(--qc-control-fieldEdge);
|
|
2583
|
+
border-radius: 6px;
|
|
2465
2584
|
outline: none;
|
|
2585
|
+
transition: border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), box-shadow var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
|
|
2466
2586
|
}
|
|
2467
2587
|
|
|
2468
2588
|
/* The unit sits in the room the field keeps at its end, so a typed number never runs under it. */
|
|
@@ -2547,13 +2667,11 @@
|
|
|
2547
2667
|
background: var(--qcd-swatch, currentColor);
|
|
2548
2668
|
}
|
|
2549
2669
|
|
|
2670
|
+
/* A line-end picker is a list button: the end's glyph, then the chevron's slot, 2px in from the edge. */
|
|
2550
2671
|
[data-qc-theme] .qc-drawing-line-end {
|
|
2551
2672
|
display: flex;
|
|
2552
2673
|
align-items: center;
|
|
2553
|
-
|
|
2554
|
-
width: 34px;
|
|
2555
|
-
height: 34px;
|
|
2556
|
-
padding: 0;
|
|
2674
|
+
padding: 0 2px;
|
|
2557
2675
|
cursor: pointer;
|
|
2558
2676
|
}
|
|
2559
2677
|
|
|
@@ -2731,13 +2849,21 @@
|
|
|
2731
2849
|
font-size: var(--qc-text-fontSizeSmall);
|
|
2732
2850
|
}
|
|
2733
2851
|
|
|
2734
|
-
/* Forced colors: a swatch IS its color, so it keeps it, with a system border to stand on.
|
|
2852
|
+
/* Forced colors: a swatch IS its color, so it keeps it, with a system border to stand on. The mixer's
|
|
2853
|
+
* compact fields ring their focus in the system highlight, as every field does. */
|
|
2735
2854
|
@media (forced-colors: active) {
|
|
2736
2855
|
[data-qc-theme] .qc-drawing-swatch,
|
|
2737
2856
|
[data-qc-theme] .qc-drawing-color-strip {
|
|
2738
2857
|
forced-color-adjust: none;
|
|
2739
2858
|
border: 1px solid ButtonText;
|
|
2740
2859
|
}
|
|
2860
|
+
|
|
2861
|
+
[data-qc-theme] .qc-drawing-hex-wrap:focus-within,
|
|
2862
|
+
[data-qc-theme] .qc-drawing-opacity-readout:focus {
|
|
2863
|
+
forced-color-adjust: none;
|
|
2864
|
+
border-color: Highlight;
|
|
2865
|
+
box-shadow: inset 0 0 0 1px Highlight;
|
|
2866
|
+
}
|
|
2741
2867
|
}
|
|
2742
2868
|
|
|
2743
2869
|
/* The selected drawing's settings bar, the settings dialog and the template dialogs. Same scoping
|
|
@@ -3809,20 +3935,18 @@
|
|
|
3809
3935
|
padding-inline: 0;
|
|
3810
3936
|
}
|
|
3811
3937
|
|
|
3938
|
+
/* A row that holds fields stands 42px, the drawing settings' row: the chart's 34px field box with
|
|
3939
|
+
* room above and below it. */
|
|
3812
3940
|
[data-qc-theme] .qc-settings-row {
|
|
3813
3941
|
display: flex;
|
|
3814
3942
|
align-items: center;
|
|
3815
3943
|
gap: 8px;
|
|
3816
|
-
min-height:
|
|
3817
|
-
}
|
|
3818
|
-
|
|
3819
|
-
[data-qc-theme] .qc-settings-row .qc-field {
|
|
3820
|
-
padding: 2px 4px;
|
|
3821
|
-
font-size: var(--qc-text-fontSizeSmall);
|
|
3944
|
+
min-height: 42px;
|
|
3822
3945
|
}
|
|
3823
3946
|
|
|
3947
|
+
[data-qc-theme] .qc-settings-page .qc-field-row,
|
|
3824
3948
|
[data-qc-theme] .qc-settings-page .qc-inputs-row {
|
|
3825
|
-
min-height:
|
|
3949
|
+
min-height: 42px;
|
|
3826
3950
|
}
|
|
3827
3951
|
|
|
3828
3952
|
/* THE PICKER ON A NARROW SCREEN. The dialog is a two-column reading room — a 200px rail of
|
|
@@ -4554,41 +4678,34 @@
|
|
|
4554
4678
|
line-height: 21px;
|
|
4555
4679
|
}
|
|
4556
4680
|
|
|
4557
|
-
/* The
|
|
4558
|
-
*
|
|
4681
|
+
/* The name's box is the chart's field box around a bare input that fills it: the box draws the edge,
|
|
4682
|
+
* which steps up under the pointer, and rings while the caret is in it. The ring is the field's own,
|
|
4683
|
+
* over the edge and following whatever corner the box has. */
|
|
4559
4684
|
[data-qc-theme] .qc-name-box {
|
|
4560
4685
|
display: flex;
|
|
4561
|
-
|
|
4562
|
-
|
|
4563
|
-
align-items: center;
|
|
4564
|
-
border: 1px solid var(--qc-chrome-fieldBorder);
|
|
4565
|
-
border-radius: var(--qc-chrome-radius);
|
|
4566
|
-
}
|
|
4567
|
-
|
|
4568
|
-
[data-qc-theme] .qc-name-box:hover {
|
|
4569
|
-
border-color: var(--qc-chrome-borderStrong);
|
|
4686
|
+
align-items: stretch;
|
|
4687
|
+
padding: 0;
|
|
4570
4688
|
}
|
|
4571
4689
|
|
|
4572
4690
|
[data-qc-theme] .qc-name-box:focus-within {
|
|
4573
4691
|
border-color: var(--qc-state-focusRing);
|
|
4692
|
+
box-shadow: inset 0 0 0 1px var(--qc-state-focusRing);
|
|
4574
4693
|
}
|
|
4575
4694
|
|
|
4576
4695
|
[data-qc-theme] .qc-name-input {
|
|
4577
|
-
min-width: 0;
|
|
4578
|
-
height: 24px;
|
|
4579
4696
|
flex: 1 1 auto;
|
|
4580
|
-
|
|
4581
|
-
|
|
4697
|
+
min-width: 0;
|
|
4698
|
+
height: 100%;
|
|
4699
|
+
padding: 0 7px;
|
|
4700
|
+
color: inherit;
|
|
4582
4701
|
font: inherit;
|
|
4583
|
-
font-size: calc(var(--qc-text-fontSizeBase) + 2px);
|
|
4584
|
-
line-height: 24px;
|
|
4585
4702
|
background: none;
|
|
4586
4703
|
border: 0;
|
|
4587
4704
|
outline: none;
|
|
4588
4705
|
}
|
|
4589
4706
|
|
|
4590
4707
|
[data-qc-theme] .qc-name-input::placeholder {
|
|
4591
|
-
color: var(--qc-text-
|
|
4708
|
+
color: var(--qc-text-muted);
|
|
4592
4709
|
}
|
|
4593
4710
|
|
|
4594
4711
|
[data-qc-theme] .qc-prompt-actions {
|
|
@@ -4669,6 +4786,14 @@
|
|
|
4669
4786
|
padding: 4px 12px;
|
|
4670
4787
|
}
|
|
4671
4788
|
|
|
4789
|
+
/* Forced colors: the name's box rings its focus in the system highlight, as every field does. */
|
|
4790
|
+
@media (forced-colors: active) {
|
|
4791
|
+
[data-qc-theme] .qc-name-box:focus-within {
|
|
4792
|
+
border-color: Highlight;
|
|
4793
|
+
box-shadow: inset 0 0 0 1px Highlight;
|
|
4794
|
+
}
|
|
4795
|
+
}
|
|
4796
|
+
|
|
4672
4797
|
/* The replay transport's reserved row below the chart grid, and the date picker.
|
|
4673
4798
|
*
|
|
4674
4799
|
* The row is in the root's own flow and positions nothing: it reserves 49px of the column between
|
|
@@ -4923,16 +5048,15 @@
|
|
|
4923
5048
|
gap: 8px;
|
|
4924
5049
|
}
|
|
4925
5050
|
|
|
5051
|
+
/* The date and the time are the chart's 34px field boxes, the date taking the room the time leaves. */
|
|
4926
5052
|
[data-qc-theme] .qc-date-field {
|
|
4927
5053
|
flex: 1 1 auto;
|
|
4928
5054
|
min-width: 0;
|
|
4929
|
-
padding: 6px 8px;
|
|
4930
5055
|
font-variant-numeric: tabular-nums;
|
|
4931
5056
|
}
|
|
4932
5057
|
|
|
4933
5058
|
[data-qc-theme] .qc-date-time {
|
|
4934
5059
|
flex: 0 0 74px;
|
|
4935
|
-
padding: 6px 8px;
|
|
4936
5060
|
font-variant-numeric: tabular-nums;
|
|
4937
5061
|
}
|
|
4938
5062
|
|
|
@@ -5236,34 +5360,18 @@
|
|
|
5236
5360
|
padding-top: 0;
|
|
5237
5361
|
}
|
|
5238
5362
|
|
|
5239
|
-
|
|
5240
|
-
|
|
5363
|
+
/* The classes' own group in the strip: their chips, 4px apart, as one run the scope stands apart
|
|
5364
|
+
* from. */
|
|
5365
|
+
[data-qc-theme] .qc-search-class-group {
|
|
5366
|
+
display: flex;
|
|
5241
5367
|
flex: 0 0 auto;
|
|
5242
|
-
|
|
5243
|
-
gap: 7px;
|
|
5244
|
-
height: 28px;
|
|
5245
|
-
margin-inline-start: auto;
|
|
5246
|
-
padding: 0 10px 0 6px;
|
|
5247
|
-
color: var(--qc-text-primary);
|
|
5248
|
-
font-size: var(--qc-text-fontSizeBase);
|
|
5249
|
-
line-height: 18px;
|
|
5250
|
-
background: var(--qc-state-hover);
|
|
5251
|
-
border-radius: 14px;
|
|
5252
|
-
white-space: nowrap;
|
|
5253
|
-
}
|
|
5254
|
-
|
|
5255
|
-
[data-qc-theme] .qc-search-scope-mark {
|
|
5256
|
-
display: inline-flex;
|
|
5257
|
-
flex: 0 0 18px;
|
|
5258
|
-
align-items: center;
|
|
5259
|
-
justify-content: center;
|
|
5260
|
-
width: 18px;
|
|
5261
|
-
height: 18px;
|
|
5262
|
-
overflow: hidden;
|
|
5368
|
+
gap: 4px;
|
|
5263
5369
|
}
|
|
5264
5370
|
|
|
5265
|
-
/* A class rests on the neutral fill, steps deeper under the pointer and deeper again while pressed.
|
|
5266
|
-
|
|
5371
|
+
/* A class rests on the neutral fill, steps deeper under the pointer and deeper again while pressed.
|
|
5372
|
+
* The scope chip is the same tab in the same states. */
|
|
5373
|
+
[data-qc-theme] .qc-search-class,
|
|
5374
|
+
[data-qc-theme] .qc-search-scope {
|
|
5267
5375
|
flex: 0 0 auto;
|
|
5268
5376
|
height: 28px;
|
|
5269
5377
|
padding: 0 11px;
|
|
@@ -5276,26 +5384,52 @@
|
|
|
5276
5384
|
white-space: nowrap;
|
|
5277
5385
|
}
|
|
5278
5386
|
|
|
5279
|
-
[data-qc-theme] .qc-search-class:hover
|
|
5387
|
+
[data-qc-theme] .qc-search-class:hover,
|
|
5388
|
+
[data-qc-theme] .qc-search-scope:hover {
|
|
5280
5389
|
background: var(--qc-state-pressed);
|
|
5281
5390
|
border-color: var(--qc-state-pressed);
|
|
5282
5391
|
}
|
|
5283
5392
|
|
|
5284
|
-
[data-qc-theme] .qc-search-class:active
|
|
5393
|
+
[data-qc-theme] .qc-search-class:active,
|
|
5394
|
+
[data-qc-theme] .qc-search-scope:active {
|
|
5285
5395
|
background: var(--qc-state-pressedHover);
|
|
5286
5396
|
border-color: var(--qc-state-pressedHover);
|
|
5287
5397
|
}
|
|
5288
5398
|
|
|
5289
5399
|
/* The chosen class INVERTS, under the pointer as at rest: one tab out of a row has to be
|
|
5290
|
-
* unmistakable at a glance, and a deeper step of the same fill would only be a louder hover.
|
|
5400
|
+
* unmistakable at a glance, and a deeper step of the same fill would only be a louder hover. A
|
|
5401
|
+
* scope that limits the search inverts the same way. */
|
|
5291
5402
|
[data-qc-theme] .qc-search-class[aria-pressed='true'],
|
|
5292
5403
|
[data-qc-theme] .qc-search-class[aria-pressed='true']:hover,
|
|
5293
|
-
[data-qc-theme] .qc-search-class[aria-pressed='true']:active
|
|
5404
|
+
[data-qc-theme] .qc-search-class[aria-pressed='true']:active,
|
|
5405
|
+
[data-qc-theme] .qc-search-scope[aria-pressed='true'],
|
|
5406
|
+
[data-qc-theme] .qc-search-scope[aria-pressed='true']:hover,
|
|
5407
|
+
[data-qc-theme] .qc-search-scope[aria-pressed='true']:active {
|
|
5294
5408
|
color: var(--qc-text-inverse);
|
|
5295
5409
|
background: var(--qc-control-on);
|
|
5296
5410
|
border-color: var(--qc-control-on);
|
|
5297
5411
|
}
|
|
5298
5412
|
|
|
5413
|
+
/* The scope stands at the far edge of the strip: the host's mark 6px in from the chip's leading
|
|
5414
|
+
* edge and 7px before the scope's name. */
|
|
5415
|
+
[data-qc-theme] .qc-search-scope {
|
|
5416
|
+
display: inline-flex;
|
|
5417
|
+
align-items: center;
|
|
5418
|
+
gap: 7px;
|
|
5419
|
+
margin-inline-start: auto;
|
|
5420
|
+
padding-inline: 6px 10px;
|
|
5421
|
+
}
|
|
5422
|
+
|
|
5423
|
+
[data-qc-theme] .qc-search-scope-mark {
|
|
5424
|
+
display: inline-flex;
|
|
5425
|
+
flex: 0 0 18px;
|
|
5426
|
+
align-items: center;
|
|
5427
|
+
justify-content: center;
|
|
5428
|
+
width: 18px;
|
|
5429
|
+
height: 18px;
|
|
5430
|
+
overflow: hidden;
|
|
5431
|
+
}
|
|
5432
|
+
|
|
5299
5433
|
[data-qc-theme] .qc-search-list {
|
|
5300
5434
|
flex: 1 1 auto;
|
|
5301
5435
|
min-height: 0;
|
|
@@ -5748,14 +5882,18 @@
|
|
|
5748
5882
|
font-size: 14px;
|
|
5749
5883
|
}
|
|
5750
5884
|
|
|
5885
|
+
/* A color here keeps its swatch: a 38 by 34 box on the raised fill, its well 3px in from the edge on
|
|
5886
|
+
* a corner that follows the box's. The edge, its step under the pointer and the focus ring are the
|
|
5887
|
+
* field's own, and a well that cannot be used stands on the read-only fill as every field does. */
|
|
5751
5888
|
[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-swatch-button {
|
|
5752
5889
|
box-sizing: border-box;
|
|
5753
5890
|
width: 38px;
|
|
5754
5891
|
height: 34px;
|
|
5755
5892
|
padding: 3px;
|
|
5893
|
+
}
|
|
5894
|
+
|
|
5895
|
+
[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-swatch-button:enabled {
|
|
5756
5896
|
background: var(--qc-chrome-surfaceRaised);
|
|
5757
|
-
border-color: var(--qc-chrome-fieldBorder);
|
|
5758
|
-
border-radius: 6px;
|
|
5759
5897
|
}
|
|
5760
5898
|
|
|
5761
5899
|
[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-well {
|
|
@@ -475,6 +475,7 @@ var search = {
|
|
|
475
475
|
"search.compareEmpty": "No symbols here yet. Why not add some?",
|
|
476
476
|
"search.allClasses": "All",
|
|
477
477
|
"search.classFilter": "Asset class",
|
|
478
|
+
"search.limitToScope": "\u0418\u0441\u043A\u0430\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0432 {scope}",
|
|
478
479
|
"search.opDivision": "\u0414\u0435\u043B\u0435\u043D\u0438\u0435",
|
|
479
480
|
"search.opSubtraction": "\u0412\u044B\u0447\u0438\u0442\u0430\u043D\u0438\u0435",
|
|
480
481
|
"search.opAddition": "\u0421\u043B\u043E\u0436\u0435\u043D\u0438\u0435",
|
|
@@ -1025,4 +1026,4 @@ var ru_default = dict;
|
|
|
1025
1026
|
export {
|
|
1026
1027
|
ru_default as default
|
|
1027
1028
|
};
|
|
1028
|
-
//# sourceMappingURL=ru-
|
|
1029
|
+
//# sourceMappingURL=ru-2F2VGHMW.js.map
|