@chocbite/ts-lib-form 1.1.0 → 1.3.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.
Files changed (4) hide show
  1. package/dist/index.d.mts +73 -33
  2. package/dist/index.mjs +220 -133
  3. package/dist/style.css +281 -200
  4. package/package.json +18 -18
package/dist/style.css CHANGED
@@ -1,5 +1,5 @@
1
1
  form-button {
2
- margin-bottom: 0.5rem;
2
+ margin-bottom: 0.3rem;
3
3
  }
4
4
  form-button:last-child {
5
5
  margin-bottom: 0;
@@ -15,7 +15,7 @@ form-button {
15
15
  border: 0.0625rem solid var(--form-colors-border-normal);
16
16
  min-height: var(--form-size-height);
17
17
  box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
18
- border-radius: 0.6rem;
18
+ border-radius: 0.4rem;
19
19
  background-color: var(--form-colors-background-normal);
20
20
  position: relative;
21
21
  display: flex;
@@ -26,8 +26,8 @@ form-button {
26
26
  min-width: min-content;
27
27
  outline: none;
28
28
  }
29
- .touch form-button {
30
- min-height: var(--form-size-touchHeight);
29
+ form-button.center {
30
+ justify-content: center;
31
31
  }
32
32
  form-button.active {
33
33
  box-shadow: 0 0 0.1875rem 0 var(--form-colors-border-normal);
@@ -38,6 +38,9 @@ form-button:focus-visible {
38
38
  form-button:focus-visible.active {
39
39
  box-shadow: 0 0 0.1875rem 0 var(--form-colors-border-normal), 0 0 0 0.2rem var(--form-colors-focus-normal);
40
40
  }
41
+ .touch form-button {
42
+ min-height: var(--form-size-touchHeight);
43
+ }
41
44
  @media (pointer: fine) {
42
45
  form-button:hover {
43
46
  background-color: var(--form-colors-background-hover);
@@ -57,21 +60,22 @@ form-button > svg {
57
60
  height: calc(var(--form-size-height) - 2px);
58
61
  box-sizing: border-box;
59
62
  width: auto;
60
- padding: 0.2rem;
63
+ padding: 0.1rem;
64
+ padding-left: 0.3rem;
61
65
  flex-shrink: 0;
62
66
  }
63
67
  .touch form-button > svg {
64
68
  height: var(--form-size-touchHeight);
65
69
  max-width: var(--form-size-touchHeight)1rem;
66
- padding: 0.5rem;
70
+ padding: 0.3rem;
67
71
  }
68
72
  form-button > svg + span {
69
- padding-left: 0.4rem !important;
73
+ padding-left: 0.1rem !important;
70
74
  }
71
75
  form-button > span {
72
76
  color: var(--form-colors-text-normal);
73
77
  justify-content: center;
74
- padding-inline: 0.8rem;
78
+ padding-inline: 0.4rem;
75
79
  }
76
80
  .touch form-button > span {
77
81
  font-size: var(--form-font-touch_size);
@@ -101,7 +105,7 @@ form-button[color=black] > svg {
101
105
  fill: var(--form-colors-textBlack-normal);
102
106
  }
103
107
  form-lamp {
104
- margin-bottom: 0.5rem;
108
+ margin-bottom: 0.3rem;
105
109
  }
106
110
  form-lamp:last-child {
107
111
  margin-bottom: 0;
@@ -126,6 +130,9 @@ form-lamp {
126
130
  user-select: none;
127
131
  align-items: center;
128
132
  }
133
+ form-lamp.center {
134
+ justify-content: center;
135
+ }
129
136
  .touch form-lamp {
130
137
  min-height: var(--form-size-touchHeight);
131
138
  border-radius: var(--form-size-touchHeight);
@@ -140,12 +147,12 @@ form-lamp > svg {
140
147
  width: auto;
141
148
  flex-shrink: 0;
142
149
  background-color: initial;
143
- padding: 0.2rem;
144
- padding-left: 0.4rem;
150
+ padding: 0.1rem;
151
+ padding-left: 0.3rem;
145
152
  }
146
153
  .touch form-lamp > svg {
147
154
  height: calc(var(--form-size-touchHeight) - 2px);
148
- padding: 0.5rem;
155
+ padding: 0.3rem;
149
156
  }
150
157
  .anim-all form-lamp > svg {
151
158
  transition: fill ease-in-out var(--animation-speed), height ease-in-out var(--animation-speed);
@@ -154,7 +161,7 @@ form-lamp > span {
154
161
  color: var(--form-colors-text-normal);
155
162
  display: flex;
156
163
  justify-content: center;
157
- padding-inline: 0.8rem;
164
+ padding-inline: 0.4rem;
158
165
  }
159
166
  .touch form-lamp > span {
160
167
  font-size: var(--form-font-touch_size);
@@ -166,7 +173,7 @@ form-lamp > span:empty {
166
173
  transition: color ease-in-out var(--animation-speed);
167
174
  }
168
175
  form-lamp > svg + span {
169
- padding-left: 0.4rem !important;
176
+ padding-left: 0.1rem !important;
170
177
  }
171
178
  form-lamp[color=black] {
172
179
  background-color: var(--form-colors-basic-black);
@@ -190,7 +197,7 @@ form-lamp[color=black] > svg {
190
197
  fill: var(--form-colors-textBlack-normal);
191
198
  }
192
199
  form-switch {
193
- margin-bottom: 0.5rem;
200
+ margin-bottom: 0.3rem;
194
201
  }
195
202
  form-switch:last-child {
196
203
  margin-bottom: 0;
@@ -356,7 +363,7 @@ form-switch > span:empty {
356
363
  font-size: 1.1rem;
357
364
  }
358
365
  form-group {
359
- margin-bottom: 0.5rem;
366
+ margin-bottom: 0.3rem;
360
367
  }
361
368
  form-group:last-child {
362
369
  margin-bottom: 0;
@@ -368,64 +375,110 @@ form-group[inert] {
368
375
  opacity: 0.6;
369
376
  pointer-events: none;
370
377
  }
371
- form-group {
372
- --max_height: none;
373
- display: flex;
374
- flex-direction: column;
375
- background-color: inherit;
376
- z-index: 0;
377
- }
378
378
  form-group.inset {
379
379
  border: 0.0625rem solid var(--form-colors-border-normal);
380
380
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
381
- border-radius: 0.6rem;
381
+ border-radius: 0.4rem;
382
382
  }
383
383
  form-group.outset {
384
384
  border: 0.0625rem solid var(--form-colors-border-normal);
385
- border-radius: 0.6rem;
385
+ border-radius: 0.4rem;
386
+ box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
386
387
  }
387
- form-group + form-group:not(.collapsible) {
388
- padding-top: 0rem;
388
+ form-group.line {
389
+ border: 0.0625rem solid var(--form-colors-border-normal);
390
+ border-radius: 0.4rem;
389
391
  }
390
- form-group + form-group.collapsible > div {
391
- padding-top: 0rem;
392
+ form-group.embed {
393
+ padding: 0;
392
394
  }
393
- form-group:not(.collapsible) {
395
+ form-group.max_height {
396
+ overflow-y: auto;
397
+ }
398
+ form-group:empty {
399
+ display: none;
400
+ }
401
+ form-group + form-group-col {
402
+ padding-block: 0rem;
403
+ }
404
+ form-group {
405
+ --max_height: none;
406
+ background-color: inherit;
407
+ z-index: 0;
394
408
  max-height: var(--max_height);
395
- padding: 0.6rem;
409
+ padding: 0.4rem;
396
410
  min-width: fit-content;
411
+ box-sizing: border-box;
397
412
  }
398
- form-group:not(.collapsible).max_height {
399
- overflow-y: auto;
413
+ form-group.grid-row {
414
+ display: grid;
415
+ gap: 0.3rem;
416
+ grid-auto-flow: column;
400
417
  }
401
- form-group:not(.collapsible).embed {
402
- padding: 0;
418
+ form-group.grid-row > * {
419
+ margin: 0;
403
420
  }
404
- form-group:not(.collapsible).outset {
405
- box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
421
+ form-group.grid-col {
422
+ display: grid;
423
+ gap: 0.3rem;
424
+ grid-auto-flow: row;
406
425
  }
407
- form-group:not(.collapsible):empty {
408
- display: none;
426
+ form-group.grid-col > * {
427
+ margin: 0;
409
428
  }
410
- form-group.collapsible.embed > div {
411
- padding: 0;
412
- padding-bottom: 0.5rem;
429
+ form-group.flex-row {
430
+ display: flex;
431
+ flex-direction: row;
432
+ flex-wrap: wrap;
413
433
  }
414
- form-group.collapsible.max_height > div {
415
- overflow-y: auto;
434
+ form-group.flex-col {
435
+ display: flex;
436
+ flex-direction: column;
416
437
  }
417
- form-group.collapsible > div {
418
- max-height: var(--max_height);
419
- padding: 0.6rem;
438
+ form-group.flex-col > * {
439
+ flex-shrink: 0;
440
+ }
441
+ form-group-collapser {
442
+ margin-bottom: 0.3rem;
443
+ }
444
+ form-group-collapser:last-child {
445
+ margin-bottom: 0;
446
+ }
447
+ form-group-collapser:nth-last-child(1 of :not(:empty)) {
448
+ margin-bottom: 0;
449
+ }
450
+ form-group-collapser[inert] {
451
+ opacity: 0.6;
452
+ pointer-events: none;
453
+ }
454
+ form-group-collapser {
455
+ display: flex;
456
+ flex-direction: column;
420
457
  min-width: fit-content;
421
- border-radius: 0.5rem;
422
458
  }
423
- form-group.collapsible > span {
459
+ form-group-collapser > :first-child {
460
+ margin: 0;
461
+ margin-bottom: -0.0625rem;
462
+ border-radius: 0.4rem 0.4rem 0 0 !important;
463
+ padding-bottom: 0.4rem;
464
+ }
465
+ form-group-collapser.collapsed > :first-child {
466
+ display: none;
467
+ }
468
+ form-group-collapser.collapsed > span {
469
+ border-radius: 0.4rem !important;
470
+ }
471
+ form-group-collapser > *.line + span,
472
+ form-group-collapser > *.inset + span,
473
+ form-group-collapser > *.outset + span {
474
+ border-radius: 0 0 0.4rem 0.4rem;
475
+ }
476
+ form-group-collapser > span {
424
477
  z-index: 2;
425
478
  border: 0.0625rem solid var(--form-colors-border-normal);
426
479
  min-height: var(--form-size-height);
427
480
  box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
428
- border-radius: 0.6rem;
481
+ border-radius: 0.4rem;
429
482
  background-color: var(--form-colors-background-normal);
430
483
  display: flex;
431
484
  justify-content: space-between;
@@ -434,21 +487,21 @@ form-group.collapsible > span {
434
487
  user-select: none;
435
488
  outline: none;
436
489
  }
437
- .touch form-group.collapsible > span {
490
+ .touch form-group-collapser > span {
438
491
  min-height: var(--form-size-touchHeight);
439
492
  }
440
493
  @media (hover: hover) and (pointer: fine) {
441
- form-group.collapsible > span:hover {
494
+ form-group-collapser > span:hover {
442
495
  background-color: var(--form-colors-background-hover);
443
496
  }
444
497
  }
445
- form-group.collapsible > span:focus-visible {
498
+ form-group-collapser > span:focus-visible {
446
499
  box-shadow: 0 0 0 0.2rem var(--form-colors-focus-normal);
447
500
  }
448
- form-group.collapsible > span:focus-visible.active {
501
+ form-group-collapser > span:focus-visible.active {
449
502
  box-shadow: 0 0 0 0.2rem var(--form-colors-focus-normal);
450
503
  }
451
- form-group.collapsible > span > span {
504
+ form-group-collapser > span > span {
452
505
  color: var(--form-colors-text-normal);
453
506
  font-size: var(--form-font-size);
454
507
  line-height: calc(var(--form-font-size) + 0.2rem);
@@ -456,11 +509,11 @@ form-group.collapsible > span > span {
456
509
  flex-grow: 1;
457
510
  text-align: center;
458
511
  }
459
- .touch form-group.collapsible > span > span {
512
+ .touch form-group-collapser > span > span {
460
513
  font-size: var(--form-font-touch_size);
461
514
  line-height: calc(var(--form-font-touch_size) + 0.2rem);
462
515
  }
463
- form-group.collapsible > span > svg {
516
+ form-group-collapser > span > svg {
464
517
  fill: var(--form-colors-text-normal);
465
518
  max-width: var(--form-size-height);
466
519
  height: calc(var(--form-size-height) - 2px);
@@ -468,22 +521,13 @@ form-group.collapsible > span > svg {
468
521
  width: auto;
469
522
  flex-shrink: 0;
470
523
  }
471
- .touch form-group.collapsible > span > svg {
524
+ .touch form-group-collapser > span > svg {
472
525
  height: var(--form-size-touchHeight);
473
526
  max-width: var(--form-size-touchHeight)1rem;
474
- padding: 0.5rem;
475
- }
476
- form-group.collapsed.collapsible > div {
477
- display: none;
478
- }
479
- form-group.collapsed.collapsible > span > :nth-last-child(2) {
480
- display: none;
481
- }
482
- form-group:not(.collapsed).collapsible > span > :last-child {
483
- display: none;
527
+ padding: 0.2rem;
484
528
  }
485
529
  form-listfield {
486
- margin-bottom: 0.5rem;
530
+ margin-bottom: 0.3rem;
487
531
  }
488
532
  form-listfield:last-child {
489
533
  margin-bottom: 0;
@@ -499,7 +543,7 @@ form-listfield {
499
543
  padding: 0.2rem;
500
544
  }
501
545
  form-numberinput {
502
- margin-bottom: 0.5rem;
546
+ margin-bottom: 0.3rem;
503
547
  }
504
548
  form-numberinput:last-child {
505
549
  margin-bottom: 0;
@@ -515,7 +559,7 @@ form-numberinput {
515
559
  border: 0.0625rem solid var(--form-colors-border-normal);
516
560
  height: var(--form-size-height);
517
561
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
518
- border-radius: 0.6rem;
562
+ border-radius: 0.4rem;
519
563
  background-color: var(--form-colors-background-normal);
520
564
  position: relative;
521
565
  box-sizing: border-box;
@@ -541,12 +585,12 @@ form-numberinput:focus-within {
541
585
  }
542
586
  form-numberinput > span:first-child {
543
587
  color: var(--form-colors-text-normal);
544
- font-size: 0.9rem;
545
- line-height: 1.3rem;
588
+ font-size: 0.8rem;
589
+ line-height: 0.8rem;
546
590
  }
547
591
  .touch form-numberinput > span:first-child {
548
- font-size: 1.26rem;
549
- line-height: 1.66rem;
592
+ font-size: 1.12rem;
593
+ line-height: 1.12rem;
550
594
  }
551
595
  form-numberinput > span:first-child {
552
596
  padding-left: 0.5rem;
@@ -563,16 +607,16 @@ form-numberinput > span:first-child {
563
607
  }
564
608
  form-numberinput > span:nth-child(2) {
565
609
  color: var(--form-colors-text-normal);
566
- font-size: 0.7rem;
567
- line-height: 1.3rem;
610
+ font-size: 0.6rem;
611
+ line-height: 0.6rem;
568
612
  }
569
613
  .touch form-numberinput > span:nth-child(2) {
570
- font-size: 0.98rem;
571
- line-height: 1.66rem;
614
+ font-size: 0.84rem;
615
+ line-height: 0.6rem;
572
616
  }
573
617
  form-numberinput > span:nth-child(2) {
574
618
  display: block;
575
- max-width: 3.92rem;
619
+ max-width: 3.36rem;
576
620
  overflow: hidden;
577
621
  white-space: nowrap;
578
622
  text-overflow: ellipsis;
@@ -581,10 +625,10 @@ form-numberinput > span:nth-child(2):empty {
581
625
  width: 0px !important;
582
626
  }
583
627
  .touch form-numberinput > span:nth-child(2) {
584
- max-width: 5.488rem;
628
+ max-width: 4.704rem;
585
629
  }
586
630
  form-numberinput > span:nth-child(2) {
587
- padding-left: 0.3rem;
631
+ padding-inline: 0.2rem;
588
632
  -webkit-user-select: none;
589
633
  user-select: none;
590
634
  }
@@ -596,15 +640,17 @@ form-numberinput > div {
596
640
  flex-grow: 1;
597
641
  padding-right: 0.3rem;
598
642
  align-items: flex-end;
643
+ padding-top: 0.1rem;
599
644
  }
600
645
  form-numberinput > div > span {
601
646
  color: var(--form-colors-text-normal);
602
- font-size: 0.7rem;
603
- line-height: 0.7rem;
647
+ white-space: nowrap;
648
+ font-size: 0.6rem;
649
+ line-height: 0.6rem;
604
650
  }
605
651
  .touch form-numberinput > div > span {
606
- font-size: 0.9rem;
607
- line-height: 1rem;
652
+ font-size: 0.8rem;
653
+ line-height: 0.8rem;
608
654
  }
609
655
  form-numberinput > input {
610
656
  all: unset;
@@ -615,7 +661,7 @@ form-numberinput > input {
615
661
  inset: 0;
616
662
  }
617
663
  form-progress {
618
- margin-bottom: 0.5rem;
664
+ margin-bottom: 0.3rem;
619
665
  }
620
666
  form-progress:last-child {
621
667
  margin-bottom: 0;
@@ -629,7 +675,7 @@ form-progress[inert] {
629
675
  }
630
676
  form-progress {
631
677
  height: var(--form-size-height);
632
- border-radius: 0.6rem;
678
+ border-radius: 0.4rem;
633
679
  background-color: var(--form-colors-background-normal);
634
680
  position: relative;
635
681
  -webkit-user-select: none;
@@ -645,7 +691,7 @@ form-progress {
645
691
  }
646
692
  form-progress > div {
647
693
  position: absolute;
648
- border-radius: 0.6rem;
694
+ border-radius: 0.4rem;
649
695
  height: 100%;
650
696
  left: 0px;
651
697
  top: 0px;
@@ -662,12 +708,12 @@ form-progress > span {
662
708
  }
663
709
  form-progress > span:nth-child(2) {
664
710
  color: var(--form-colors-text-normal);
665
- font-size: 0.9rem;
666
- line-height: 1.3rem;
711
+ font-size: 0.8rem;
712
+ line-height: 0.8rem;
667
713
  }
668
714
  .touch form-progress > span:nth-child(2) {
669
- font-size: 1.26rem;
670
- line-height: 1.66rem;
715
+ font-size: 1.12rem;
716
+ line-height: 1.12rem;
671
717
  }
672
718
  form-progress > span:nth-child(2) {
673
719
  min-width: 3rem;
@@ -679,16 +725,16 @@ form-progress > span:nth-child(2) {
679
725
  }
680
726
  form-progress > span:last-child {
681
727
  color: var(--form-colors-text-normal);
682
- font-size: 0.7rem;
683
- line-height: 1.3rem;
728
+ font-size: 0.6rem;
729
+ line-height: 0.6rem;
684
730
  }
685
731
  .touch form-progress > span:last-child {
686
- font-size: 0.98rem;
687
- line-height: 1.66rem;
732
+ font-size: 0.84rem;
733
+ line-height: 0.6rem;
688
734
  }
689
735
  form-progress > span:last-child {
690
736
  display: block;
691
- max-width: 3.92rem;
737
+ max-width: 3.36rem;
692
738
  overflow: hidden;
693
739
  white-space: nowrap;
694
740
  text-overflow: ellipsis;
@@ -697,19 +743,19 @@ form-progress > span:last-child:empty {
697
743
  width: 0px !important;
698
744
  }
699
745
  .touch form-progress > span:last-child {
700
- max-width: 5.488rem;
746
+ max-width: 4.704rem;
701
747
  }
702
748
  form-progress::after {
703
749
  content: "";
704
750
  border: 0.0625rem solid var(--form-colors-border-normal);
705
751
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
706
- border-radius: 0.6rem;
752
+ border-radius: 0.4rem;
707
753
  inset: 0;
708
754
  position: absolute;
709
755
  z-index: 1;
710
756
  }
711
757
  form-slider {
712
- margin-bottom: 0.5rem;
758
+ margin-bottom: 0.3rem;
713
759
  }
714
760
  form-slider:last-child {
715
761
  margin-bottom: 0;
@@ -725,7 +771,7 @@ form-slider {
725
771
  border: 0.0625rem solid var(--form-colors-border-normal);
726
772
  height: var(--form-size-height);
727
773
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
728
- border-radius: 0.6rem;
774
+ border-radius: 0.4rem;
729
775
  background-color: var(--form-colors-background-normal);
730
776
  -webkit-user-select: none;
731
777
  user-select: none;
@@ -743,21 +789,21 @@ form-slider > div {
743
789
  justify-content: space-between;
744
790
  align-items: center;
745
791
  height: 100%;
746
- width: calc(100% - (4.52rem + var(--form-size-height) * 2 - 0.25rem));
792
+ width: calc(100% - (3.96rem + var(--form-size-height) * 2 - 0.25rem));
747
793
  position: relative;
748
794
  left: -0.125rem;
749
795
  z-index: 1;
750
796
  }
751
797
  .touch form-slider > div {
752
- width: calc(100% - (6.088rem + var(--form-size-touchHeight) * 2 - 0.25rem));
798
+ width: calc(100% - (5.304rem + var(--form-size-touchHeight) * 2 - 0.25rem));
753
799
  }
754
800
  form-slider > div > div {
755
801
  top: -0.0625rem;
756
- width: 4.52rem;
802
+ width: 3.96rem;
757
803
  border: 0.0625rem solid var(--form-colors-border-normal);
758
804
  height: var(--form-size-height);
759
805
  box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
760
- border-radius: 0.6rem;
806
+ border-radius: 0.4rem;
761
807
  background-color: var(--form-colors-background-normal);
762
808
  box-sizing: border-box;
763
809
  left: 50%;
@@ -785,40 +831,40 @@ form-slider > div > div:focus-visible {
785
831
  }
786
832
  .touch form-slider > div > div {
787
833
  height: var(--form-size-touchHeight);
788
- width: 6.088rem;
834
+ width: 5.304rem;
789
835
  }
790
836
  form-slider > div > div > span:first-child {
791
837
  color: var(--form-colors-text-normal);
792
- font-size: 0.9rem;
793
- line-height: 1.3rem;
838
+ font-size: 0.8rem;
839
+ line-height: 0.8rem;
794
840
  }
795
841
  .touch form-slider > div > div > span:first-child {
796
- font-size: 1.26rem;
797
- line-height: 1.66rem;
842
+ font-size: 1.12rem;
843
+ line-height: 1.12rem;
798
844
  }
799
845
  form-slider > div > div > span:first-child {
800
846
  box-sizing: border-box;
801
- line-height: 0.8rem;
847
+ line-height: 0.7rem;
802
848
  text-align: center;
803
- max-width: 4.12rem;
849
+ max-width: 3.56rem;
804
850
  overflow: hidden;
805
851
  }
806
852
  .touch form-slider > div > div > span:first-child {
807
- line-height: 1.26rem;
808
- max-width: 6.088rem;
853
+ line-height: 1.12rem;
854
+ max-width: 5.304rem;
809
855
  }
810
856
  form-slider > div > div > span:last-child {
811
857
  color: var(--form-colors-text-normal);
812
- font-size: 0.7rem;
813
- line-height: 1.3rem;
858
+ font-size: 0.6rem;
859
+ line-height: 0.6rem;
814
860
  }
815
861
  .touch form-slider > div > div > span:last-child {
816
- font-size: 0.98rem;
817
- line-height: 1.66rem;
862
+ font-size: 0.84rem;
863
+ line-height: 0.6rem;
818
864
  }
819
865
  form-slider > div > div > span:last-child {
820
866
  display: block;
821
- max-width: 3.92rem;
867
+ max-width: 3.36rem;
822
868
  overflow: hidden;
823
869
  white-space: nowrap;
824
870
  text-overflow: ellipsis;
@@ -827,14 +873,14 @@ form-slider > div > div > span:last-child:empty {
827
873
  width: 0px !important;
828
874
  }
829
875
  .touch form-slider > div > div > span:last-child {
830
- max-width: 5.488rem;
876
+ max-width: 4.704rem;
831
877
  }
832
878
  form-slider > div > div > span:last-child {
833
- line-height: 0.6rem;
879
+ line-height: 0.5rem;
834
880
  text-align: center;
835
881
  }
836
882
  .touch form-slider > div > div > span:last-child {
837
- line-height: 0.98rem;
883
+ line-height: 0.84rem;
838
884
  }
839
885
  form-slider > svg {
840
886
  top: -0.0625rem;
@@ -843,7 +889,7 @@ form-slider > svg {
843
889
  border: 0.0625rem solid var(--form-colors-border-normal);
844
890
  height: var(--form-size-height);
845
891
  box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
846
- border-radius: 0.6rem;
892
+ border-radius: 0.4rem;
847
893
  background-color: var(--form-colors-background-normal);
848
894
  box-sizing: border-box;
849
895
  position: relative;
@@ -868,7 +914,7 @@ form-slider > svg.active {
868
914
  form-slider > svg {
869
915
  z-index: 1;
870
916
  }
871
- form-slider > svg:nth-child(2) {
917
+ form-slider > svg:nth-child(1) {
872
918
  left: -0.0625rem;
873
919
  }
874
920
  form-slider > svg:nth-child(4) {
@@ -880,6 +926,7 @@ form-slider > span {
880
926
  inset: 0;
881
927
  padding-left: calc(var(--form-size-height) + 0.4rem);
882
928
  padding-right: calc(var(--form-size-height) + 0.4rem);
929
+ padding-top: 0.1rem;
883
930
  justify-content: space-between;
884
931
  align-items: center;
885
932
  gap: 0.4rem;
@@ -888,15 +935,17 @@ form-slider > span {
888
935
  .touch form-slider > span {
889
936
  padding-left: calc(var(--form-size-touchHeight) + 0.4rem);
890
937
  padding-right: calc(var(--form-size-touchHeight) + 0.4rem);
938
+ padding-top: 0.2rem;
891
939
  }
892
940
  form-slider > span > * {
893
941
  color: var(--form-colors-text-normal);
894
- font-size: 0.7rem;
895
- line-height: 0.7rem;
942
+ white-space: nowrap;
943
+ font-size: 0.6rem;
944
+ line-height: 0.6rem;
896
945
  }
897
946
  .touch form-slider > span > * {
898
- font-size: 0.9rem;
899
- line-height: 1rem;
947
+ font-size: 0.8rem;
948
+ line-height: 0.8rem;
900
949
  }
901
950
  form-slider > span > * {
902
951
  overflow: hidden;
@@ -910,7 +959,7 @@ form-slider > input {
910
959
  inset: 0;
911
960
  }
912
961
  form-stepper {
913
- margin-bottom: 0.5rem;
962
+ margin-bottom: 0.3rem;
914
963
  }
915
964
  form-stepper:last-child {
916
965
  margin-bottom: 0;
@@ -926,7 +975,7 @@ form-stepper {
926
975
  height: var(--form-size-height);
927
976
  border: 0.0625rem solid var(--form-colors-border-normal);
928
977
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
929
- border-radius: 0.6rem;
978
+ border-radius: 0.4rem;
930
979
  background-color: var(--form-colors-background-normal);
931
980
  box-sizing: border-box;
932
981
  min-width: min-content;
@@ -963,12 +1012,12 @@ form-stepper > span {
963
1012
  }
964
1013
  form-stepper > span > span:nth-child(1) {
965
1014
  color: var(--form-colors-text-normal);
966
- font-size: 0.9rem;
967
- line-height: 1.3rem;
1015
+ font-size: 0.8rem;
1016
+ line-height: 0.8rem;
968
1017
  }
969
1018
  .touch form-stepper > span > span:nth-child(1) {
970
- font-size: 1.26rem;
971
- line-height: 1.66rem;
1019
+ font-size: 1.12rem;
1020
+ line-height: 1.12rem;
972
1021
  }
973
1022
  form-stepper > span > span:nth-child(1) {
974
1023
  padding-left: 0.3rem;
@@ -982,16 +1031,16 @@ form-stepper > span > span:nth-child(1) {
982
1031
  }
983
1032
  form-stepper > span > span:nth-child(2) {
984
1033
  color: var(--form-colors-text-normal);
985
- font-size: 0.7rem;
986
- line-height: 1.3rem;
1034
+ font-size: 0.6rem;
1035
+ line-height: 0.6rem;
987
1036
  }
988
1037
  .touch form-stepper > span > span:nth-child(2) {
989
- font-size: 0.98rem;
990
- line-height: 1.66rem;
1038
+ font-size: 0.84rem;
1039
+ line-height: 0.6rem;
991
1040
  }
992
1041
  form-stepper > span > span:nth-child(2) {
993
1042
  display: block;
994
- max-width: 3.92rem;
1043
+ max-width: 3.36rem;
995
1044
  overflow: hidden;
996
1045
  white-space: nowrap;
997
1046
  text-overflow: ellipsis;
@@ -1000,7 +1049,7 @@ form-stepper > span > span:nth-child(2):empty {
1000
1049
  width: 0px !important;
1001
1050
  }
1002
1051
  .touch form-stepper > span > span:nth-child(2) {
1003
- max-width: 5.488rem;
1052
+ max-width: 4.704rem;
1004
1053
  }
1005
1054
  form-stepper > span > span:nth-child(2) {
1006
1055
  padding-left: 0.3rem;
@@ -1018,12 +1067,13 @@ form-stepper > span > span:nth-child(3) {
1018
1067
  }
1019
1068
  form-stepper > span > span:nth-child(3) > span {
1020
1069
  color: var(--form-colors-text-normal);
1021
- font-size: 0.7rem;
1022
- line-height: 0.7rem;
1070
+ white-space: nowrap;
1071
+ font-size: 0.6rem;
1072
+ line-height: 0.6rem;
1023
1073
  }
1024
1074
  .touch form-stepper > span > span:nth-child(3) > span {
1025
- font-size: 0.9rem;
1026
- line-height: 1rem;
1075
+ font-size: 0.8rem;
1076
+ line-height: 0.8rem;
1027
1077
  }
1028
1078
  form-stepper > span > button {
1029
1079
  position: absolute;
@@ -1037,7 +1087,7 @@ form-stepper > svg {
1037
1087
  border: 0.0625rem solid var(--form-colors-border-normal);
1038
1088
  height: var(--form-size-height);
1039
1089
  box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1040
- border-radius: 0.6rem;
1090
+ border-radius: 0.4rem;
1041
1091
  background-color: var(--form-colors-background-normal);
1042
1092
  box-sizing: border-box;
1043
1093
  position: relative;
@@ -1059,10 +1109,10 @@ form-stepper > svg.active {
1059
1109
  background-color: var(--form-colors-background-hover);
1060
1110
  }
1061
1111
  }
1062
- form-stepper > svg:nth-child(2) {
1112
+ form-stepper > svg:nth-child(1) {
1063
1113
  left: -0.0625rem;
1064
1114
  }
1065
- form-stepper > svg:last-child {
1115
+ form-stepper > svg:nth-child(3) {
1066
1116
  right: -0.0625rem;
1067
1117
  }
1068
1118
  form-stepper > input {
@@ -1074,7 +1124,7 @@ form-stepper > input {
1074
1124
  inset: 0;
1075
1125
  }
1076
1126
  form-dropdown {
1077
- margin-bottom: 0.5rem;
1127
+ margin-bottom: 0.3rem;
1078
1128
  }
1079
1129
  form-dropdown:last-child {
1080
1130
  margin-bottom: 0;
@@ -1089,7 +1139,7 @@ form-dropdown[inert] {
1089
1139
  form-dropdown {
1090
1140
  background-color: var(--form-colors-background-normal);
1091
1141
  border: 0.0625rem solid var(--form-colors-border-normal);
1092
- border-radius: 0.6rem;
1142
+ border-radius: 0.4rem;
1093
1143
  box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1094
1144
  min-height: var(--form-size-height);
1095
1145
  display: flex;
@@ -1123,11 +1173,13 @@ form-dropdown > input {
1123
1173
  }
1124
1174
  form-dropdown > svg:first-child {
1125
1175
  fill: var(--form-colors-text-normal);
1126
- max-height: calc(var(--form-size-height) - 2px);
1127
- box-sizing: border-box;
1128
- padding: 0.1rem;
1176
+ height: calc(var(--form-size-height) - 2px);
1177
+ width: auto;
1178
+ padding-inline: 0.2rem;
1129
1179
  flex-shrink: 0;
1130
- flex-basis: var(--form-size-height);
1180
+ }
1181
+ .touch form-dropdown > svg:first-child {
1182
+ height: calc(var(--form-size-touchHeight) - 0.4rem);
1131
1183
  }
1132
1184
  form-dropdown > div {
1133
1185
  color: var(--form-colors-text-normal);
@@ -1143,9 +1195,9 @@ form-dropdown > div {
1143
1195
  line-height: calc(var(--form-font-touch_size) + 0.2rem);
1144
1196
  }
1145
1197
  form-dropdown > svg:nth-last-child(2) {
1198
+ fill: var(--form-colors-text-normal);
1146
1199
  box-sizing: border-box;
1147
1200
  flex-shrink: 0;
1148
- fill: var(--form-colors-text-normal);
1149
1201
  width: 1.6rem;
1150
1202
  }
1151
1203
 
@@ -1162,7 +1214,7 @@ form-dropdownbox.open {
1162
1214
  }
1163
1215
  form-dropdownbox > div {
1164
1216
  border: 0.0625rem solid var(--form-colors-border-normal);
1165
- border-radius: 0.6rem;
1217
+ border-radius: 0.4rem;
1166
1218
  background-color: var(--form-colors-background-normal);
1167
1219
  box-shadow: 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1168
1220
  outline: none;
@@ -1207,10 +1259,10 @@ form-dropdownbox > div > div > div > div:focus-visible::after {
1207
1259
  box-shadow: inset 0 0 0 0.2rem var(--form-colors-focus-normal);
1208
1260
  }
1209
1261
  form-dropdownbox > div > div > div > div:first-child::after {
1210
- border-radius: 0.6rem 0 0 0;
1262
+ border-radius: 0.4rem 0 0 0;
1211
1263
  }
1212
1264
  form-dropdownbox > div > div > div > div:last-child::after {
1213
- border-radius: 0 0 0 0.6rem;
1265
+ border-radius: 0 0 0 0.4rem;
1214
1266
  }
1215
1267
  @media (pointer: fine) {
1216
1268
  form-dropdownbox > div > div > div > div:hover::after {
@@ -1270,7 +1322,7 @@ form-dropdownbox > div > div > div > div > div:first-child:empty {
1270
1322
  padding-left: 0.2rem;
1271
1323
  }
1272
1324
  form-togglebutton {
1273
- margin-bottom: 0.5rem;
1325
+ margin-bottom: 0.3rem;
1274
1326
  }
1275
1327
  form-togglebutton:last-child {
1276
1328
  margin-bottom: 0;
@@ -1291,7 +1343,7 @@ form-togglebutton {
1291
1343
  grid-template-rows: auto auto;
1292
1344
  grid-auto-columns: 1fr;
1293
1345
  position: relative;
1294
- margin-bottom: 0.3rem;
1346
+ margin-bottom: 0.1rem;
1295
1347
  }
1296
1348
  .touch form-togglebutton {
1297
1349
  font-size: var(--form-font-touch_size);
@@ -1344,10 +1396,10 @@ form-togglebutton > div:nth-child(odd):focus-visible::before {
1344
1396
  z-index: 2;
1345
1397
  }
1346
1398
  form-togglebutton > div:nth-child(odd):focus-visible:first-child::before {
1347
- border-radius: 0.6rem 0 0 0.6rem;
1399
+ border-radius: 0.4rem 0 0 0.4rem;
1348
1400
  }
1349
1401
  form-togglebutton > div:nth-child(odd):focus-visible:nth-last-child(2)::before {
1350
- border-radius: 0 0.6rem 0.6rem 0;
1402
+ border-radius: 0 0.4rem 0.4rem 0;
1351
1403
  }
1352
1404
  @media (pointer: fine) {
1353
1405
  form-togglebutton > div:nth-child(odd):hover {
@@ -1355,10 +1407,12 @@ form-togglebutton > div:nth-child(odd):focus-visible:nth-last-child(2)::before {
1355
1407
  }
1356
1408
  }
1357
1409
  form-togglebutton > div:nth-child(odd) > svg {
1358
- height: calc(var(--form-size-height) - 0.4rem - 0.125rem);
1410
+ margin: -0.2rem;
1411
+ height: calc(var(--form-size-height) - 0.2rem - 0.125rem);
1359
1412
  width: auto;
1360
1413
  }
1361
1414
  .touch form-togglebutton > div:nth-child(odd) > svg {
1415
+ margin: 0;
1362
1416
  height: calc(var(--form-size-touchHeight) - 0.4rem - 0.125rem);
1363
1417
  }
1364
1418
  form-togglebutton > div:nth-child(odd) > input {
@@ -1380,24 +1434,24 @@ form-togglebutton > div:nth-child(even):empty {
1380
1434
  padding: 0rem;
1381
1435
  }
1382
1436
  form-togglebutton > div:first-child {
1383
- border-radius: 0.6rem 0 0 0.6rem;
1437
+ border-radius: 0.4rem 0 0 0.4rem;
1384
1438
  border-left: 0.0625rem solid var(--form-colors-border-normal);
1385
1439
  }
1386
1440
  form-togglebutton > div:first-child::after {
1387
- border-radius: 0.6rem 0 0 0.6rem;
1441
+ border-radius: 0.4rem 0 0 0.4rem;
1388
1442
  }
1389
1443
  form-togglebutton > div:nth-last-child(2) {
1390
- border-radius: 0 0.6rem 0.6rem 0;
1444
+ border-radius: 0 0.4rem 0.4rem 0;
1391
1445
  border-right: 0.0625rem solid var(--form-colors-border-normal);
1392
1446
  }
1393
1447
  form-togglebutton > div:nth-last-child(2)::after {
1394
- border-radius: 0 0.6rem 0.6rem 0;
1448
+ border-radius: 0 0.4rem 0.4rem 0;
1395
1449
  }
1396
1450
  *:empty + form-spacer {
1397
1451
  height: 0 !important;
1398
1452
  }
1399
1453
  form-colorinput {
1400
- margin-bottom: 0.5rem;
1454
+ margin-bottom: 0.3rem;
1401
1455
  }
1402
1456
  form-colorinput:last-child {
1403
1457
  margin-bottom: 0;
@@ -1412,7 +1466,7 @@ form-colorinput[inert] {
1412
1466
  form-colorinput {
1413
1467
  height: var(--form-size-height);
1414
1468
  border: 0.0625rem solid var(--form-colors-border-normal);
1415
- border-radius: 0.6rem;
1469
+ border-radius: 0.4rem;
1416
1470
  background-color: var(--form-colors-background-normal);
1417
1471
  position: relative;
1418
1472
  box-sizing: border-box;
@@ -1458,7 +1512,7 @@ form-colorinput > input::-webkit-color-swatch {
1458
1512
  border: none;
1459
1513
  }
1460
1514
  form-datetimeinput {
1461
- margin-bottom: 0.5rem;
1515
+ margin-bottom: 0.3rem;
1462
1516
  }
1463
1517
  form-datetimeinput:last-child {
1464
1518
  margin-bottom: 0;
@@ -1474,7 +1528,7 @@ form-datetimeinput {
1474
1528
  border: 0.0625rem solid var(--form-colors-border-normal);
1475
1529
  height: var(--form-size-height);
1476
1530
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1477
- border-radius: 0.6rem;
1531
+ border-radius: 0.4rem;
1478
1532
  background-color: var(--form-colors-background-normal);
1479
1533
  box-sizing: border-box;
1480
1534
  min-width: min-content;
@@ -1485,7 +1539,8 @@ form-datetimeinput {
1485
1539
  user-select: none;
1486
1540
  outline: none;
1487
1541
  overflow: hidden;
1488
- padding: 0.3rem;
1542
+ padding-inline: 0.2rem;
1543
+ padding-top: 0.1rem;
1489
1544
  }
1490
1545
  form-datetimeinput:focus-within {
1491
1546
  box-shadow: 0 0 0 0.2rem var(--form-colors-focus-normal), inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
@@ -1500,6 +1555,14 @@ form-datetimeinput:focus-within {
1500
1555
  }
1501
1556
  form-datetimeinput > input {
1502
1557
  color: var(--form-colors-text-normal);
1558
+ font-size: 0.8rem;
1559
+ line-height: 0.8rem;
1560
+ }
1561
+ .touch form-datetimeinput > input {
1562
+ font-size: 1.12rem;
1563
+ line-height: 1.12rem;
1564
+ }
1565
+ form-datetimeinput > input {
1503
1566
  display: block;
1504
1567
  outline: none;
1505
1568
  appearance: none;
@@ -1527,7 +1590,7 @@ form-datetimeinput > input[type=datetime-local] ~ svg[icon=material_action_calen
1527
1590
  display: block;
1528
1591
  }
1529
1592
  form-ipinput {
1530
- margin-bottom: 0.5rem;
1593
+ margin-bottom: 0.3rem;
1531
1594
  }
1532
1595
  form-ipinput:last-child {
1533
1596
  margin-bottom: 0;
@@ -1543,7 +1606,7 @@ form-ipinput {
1543
1606
  border: 0.0625rem solid var(--form-colors-border-normal);
1544
1607
  height: var(--form-size-height);
1545
1608
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1546
- border-radius: 0.6rem;
1609
+ border-radius: 0.4rem;
1547
1610
  background-color: var(--form-colors-background-normal);
1548
1611
  box-sizing: border-box;
1549
1612
  min-width: min-content;
@@ -1554,8 +1617,7 @@ form-ipinput {
1554
1617
  user-select: none;
1555
1618
  outline: none;
1556
1619
  overflow: hidden;
1557
- padding: 0.2rem;
1558
- font-size: var(--form-font-size);
1620
+ padding-inline: 0.2rem;
1559
1621
  }
1560
1622
  form-ipinput:focus-within {
1561
1623
  box-shadow: 0 0 0 0.2rem var(--form-colors-focus-normal), inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
@@ -1572,6 +1634,15 @@ form-ipinput:focus-within {
1572
1634
  form-ipinput > div {
1573
1635
  all: unset;
1574
1636
  color: var(--form-colors-text-normal);
1637
+ font-size: 0.8rem;
1638
+ line-height: 0.8rem;
1639
+ }
1640
+ .touch form-ipinput > div {
1641
+ font-size: 1.12rem;
1642
+ line-height: 1.12rem;
1643
+ }
1644
+ form-ipinput > div {
1645
+ padding-top: 0.2rem;
1575
1646
  display: flex;
1576
1647
  align-items: center;
1577
1648
  justify-content: center;
@@ -1585,7 +1656,7 @@ form-ipinput > div {
1585
1656
  background-color: transparent;
1586
1657
  }
1587
1658
  .touch form-ipinput > div {
1588
- min-width: 3.2rem;
1659
+ min-width: 3rem;
1589
1660
  }
1590
1661
  form-ipinput > input:last-child {
1591
1662
  all: unset;
@@ -1596,7 +1667,7 @@ form-ipinput > input:last-child {
1596
1667
  inset: 0;
1597
1668
  }
1598
1669
  form-passwordinput {
1599
- margin-bottom: 0.5rem;
1670
+ margin-bottom: 0.3rem;
1600
1671
  }
1601
1672
  form-passwordinput:last-child {
1602
1673
  margin-bottom: 0;
@@ -1612,7 +1683,7 @@ form-passwordinput {
1612
1683
  height: var(--form-size-height);
1613
1684
  border: 0.0625rem solid var(--form-colors-border-normal);
1614
1685
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1615
- border-radius: 0.6rem;
1686
+ border-radius: 0.4rem;
1616
1687
  background-color: var(--form-colors-background-normal);
1617
1688
  box-sizing: border-box;
1618
1689
  min-width: min-content;
@@ -1651,7 +1722,7 @@ form-passwordinput > input {
1651
1722
  font-size: var(--form-font-touch_size);
1652
1723
  }
1653
1724
  form-textinput {
1654
- margin-bottom: 0.5rem;
1725
+ margin-bottom: 0.3rem;
1655
1726
  }
1656
1727
  form-textinput:last-child {
1657
1728
  margin-bottom: 0;
@@ -1667,7 +1738,7 @@ form-textinput {
1667
1738
  display: block;
1668
1739
  border: 0.0625rem solid var(--form-colors-border-normal);
1669
1740
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1670
- border-radius: 0.6rem;
1741
+ border-radius: 0.4rem;
1671
1742
  background-color: var(--form-colors-background-normal);
1672
1743
  position: relative;
1673
1744
  box-sizing: border-box;
@@ -1687,16 +1758,17 @@ form-textinput:focus-within {
1687
1758
  form-textinput > input {
1688
1759
  all: unset;
1689
1760
  color: var(--form-colors-text-normal);
1690
- font-size: 0.9rem;
1691
- line-height: 1.3rem;
1761
+ font-size: 0.8rem;
1762
+ line-height: 0.8rem;
1692
1763
  }
1693
1764
  .touch form-textinput > input {
1694
- font-size: 1.26rem;
1695
- line-height: 1.66rem;
1765
+ font-size: 1.12rem;
1766
+ line-height: 1.12rem;
1696
1767
  }
1697
1768
  form-textinput > input {
1698
1769
  display: block;
1699
- padding: 0.3rem;
1770
+ padding-inline: 0.2rem;
1771
+ padding-top: 0.1rem;
1700
1772
  box-sizing: border-box;
1701
1773
  outline: none;
1702
1774
  width: max-content;
@@ -1707,7 +1779,7 @@ form-textinput > input {
1707
1779
  height: var(--form-size-touchHeight);
1708
1780
  }
1709
1781
  form-textmultiline {
1710
- margin-bottom: 0.5rem;
1782
+ margin-bottom: 0.3rem;
1711
1783
  }
1712
1784
  form-textmultiline:last-child {
1713
1785
  margin-bottom: 0;
@@ -1723,7 +1795,7 @@ form-textmultiline {
1723
1795
  display: block;
1724
1796
  border: 0.0625rem solid var(--form-colors-border-normal);
1725
1797
  box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1726
- border-radius: 0.6rem;
1798
+ border-radius: 0.4rem;
1727
1799
  background-color: var(--form-colors-background-normal);
1728
1800
  position: relative;
1729
1801
  box-sizing: border-box;
@@ -1735,35 +1807,39 @@ form-textmultiline:focus-within {
1735
1807
  box-shadow: 0 0 0 0.2rem var(--form-colors-focus-normal), inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1736
1808
  }
1737
1809
  form-textmultiline > textarea {
1810
+ all: unset;
1738
1811
  color: var(--form-colors-text-normal);
1739
- font-size: 0.9rem;
1740
- line-height: 1.3rem;
1812
+ font-size: 0.8rem;
1813
+ line-height: 0.8rem;
1741
1814
  }
1742
1815
  .touch form-textmultiline > textarea {
1743
- font-size: 1.26rem;
1744
- line-height: 1.66rem;
1816
+ font-size: 1.12rem;
1817
+ line-height: 1.12rem;
1745
1818
  }
1746
1819
  form-textmultiline > textarea {
1747
- all: unset;
1748
1820
  display: block;
1749
- padding: 0.3rem;
1821
+ padding-inline: 0.2rem;
1822
+ padding-top: 0.2rem;
1750
1823
  box-sizing: border-box;
1751
1824
  outline: none;
1752
1825
  width: 100%;
1753
- min-height: var(--form-size-height);
1826
+ min-height: var(--form-size-height)-0.2rem;
1827
+ height: var(--form-size-height)-0.2rem;
1828
+ border-radius: 0.4rem;
1754
1829
  }
1755
1830
  .touch form-textmultiline > textarea {
1756
1831
  min-height: var(--form-size-touchHeight);
1757
1832
  }
1758
1833
  @media (pointer: fine) {
1759
1834
  form-textmultiline > textarea:hover {
1835
+ box-shadow: inset 0 0.125rem 0.1875rem 0 var(--form-colors-border-normal);
1760
1836
  background-color: var(--form-colors-background-hover);
1761
1837
  }
1762
1838
  }
1763
1839
  form-textmultiline > div {
1764
1840
  touch-action: none;
1765
1841
  height: calc(var(--form-size-height) / 2);
1766
- border-radius: 0.6rem;
1842
+ border-radius: 0.4rem;
1767
1843
  border-top: var(--form-colors-border-normal) solid 0.0625rem;
1768
1844
  display: flex;
1769
1845
  cursor: ns-resize;
@@ -1771,7 +1847,7 @@ form-textmultiline > div {
1771
1847
  justify-content: center;
1772
1848
  }
1773
1849
  .touch form-textmultiline > div {
1774
- height: calc(var(--form-size-touchHeight) / 2);
1850
+ height: calc(var(--form-size-touchHeight) / 1.2);
1775
1851
  }
1776
1852
  @media (pointer: fine) {
1777
1853
  form-textmultiline > div:hover {
@@ -1780,6 +1856,11 @@ form-textmultiline > div {
1780
1856
  }
1781
1857
  form-textmultiline > div > svg {
1782
1858
  fill: var(--form-colors-text-normal);
1859
+ width: auto;
1860
+ height: 1.6rem;
1861
+ }
1862
+ .touch form-textmultiline > div > svg {
1863
+ height: 2.6rem;
1783
1864
  }
1784
1865
  form-textmultiline > input {
1785
1866
  all: unset;
@@ -1790,7 +1871,7 @@ form-textmultiline > input {
1790
1871
  inset: 0;
1791
1872
  }
1792
1873
  form-text {
1793
- margin-bottom: 0.5rem;
1874
+ margin-bottom: 0.3rem;
1794
1875
  }
1795
1876
  form-text:last-child {
1796
1877
  margin-bottom: 0;
@@ -1809,8 +1890,8 @@ form-text {
1809
1890
  flex-direction: column;
1810
1891
  justify-content: center;
1811
1892
  padding-inline: 0.2rem;
1812
- margin-bottom: 0;
1813
- line-height: 1.2rem;
1893
+ margin-bottom: 0.1rem;
1894
+ font-size: 0.9rem;
1814
1895
  }
1815
1896
  .anim-all form-text {
1816
1897
  transition: color ease-in-out var(--animation-speed);