@lessonkit/themes 1.7.0 → 1.7.1
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/base.css +172 -9
- package/package.json +1 -1
package/base.css
CHANGED
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
Import: @import "@lessonkit/themes/base.css";
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
:root {
|
|
7
|
+
--lk-touch-target-min: 2.75rem;
|
|
8
|
+
--lk-touch-spacing: var(--lk-space-sm, 0.5rem);
|
|
9
|
+
}
|
|
10
|
+
|
|
6
11
|
.lk-panel {
|
|
7
12
|
border: 1px solid var(--lk-color-border);
|
|
8
13
|
border-radius: var(--lk-radius-lg);
|
|
@@ -22,6 +27,16 @@
|
|
|
22
27
|
font-size: var(--lk-font-size-base);
|
|
23
28
|
font-weight: var(--lk-font-weight-strong);
|
|
24
29
|
cursor: pointer;
|
|
30
|
+
min-height: var(--lk-touch-target-min);
|
|
31
|
+
touch-action: manipulation;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.lk-button--icon {
|
|
35
|
+
display: inline-flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
min-width: var(--lk-touch-target-min);
|
|
39
|
+
padding-inline: var(--lk-space-sm);
|
|
25
40
|
}
|
|
26
41
|
|
|
27
42
|
.lk-button:disabled {
|
|
@@ -29,6 +44,16 @@
|
|
|
29
44
|
cursor: not-allowed;
|
|
30
45
|
}
|
|
31
46
|
|
|
47
|
+
.lk-touch-hint {
|
|
48
|
+
margin: 0 0 var(--lk-space-md);
|
|
49
|
+
padding: var(--lk-space-sm) var(--lk-space-md);
|
|
50
|
+
border-radius: var(--lk-radius-md);
|
|
51
|
+
background: color-mix(in srgb, var(--lk-color-primary, #2563eb) 10%, var(--lk-color-panel));
|
|
52
|
+
font-family: var(--lk-font-family);
|
|
53
|
+
font-size: 0.875rem;
|
|
54
|
+
line-height: 1.4;
|
|
55
|
+
}
|
|
56
|
+
|
|
32
57
|
/* InteractiveVideo — H5P-style cue overlay on the player */
|
|
33
58
|
.lk-interactive-video-stage {
|
|
34
59
|
position: relative;
|
|
@@ -117,7 +142,8 @@
|
|
|
117
142
|
}
|
|
118
143
|
|
|
119
144
|
.lk-interactive-video-continue {
|
|
120
|
-
min-width: 10rem;
|
|
145
|
+
min-width: max(10rem, var(--lk-touch-target-min, 2.75rem));
|
|
146
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
121
147
|
}
|
|
122
148
|
|
|
123
149
|
/* GameMap — background canvas and stage markers */
|
|
@@ -159,7 +185,10 @@
|
|
|
159
185
|
.lk-game-map-marker {
|
|
160
186
|
position: absolute;
|
|
161
187
|
transform: translate(-50%, -100%);
|
|
188
|
+
min-height: var(--lk-touch-target-min);
|
|
189
|
+
min-width: var(--lk-touch-target-min);
|
|
162
190
|
padding: 0.35rem 0.65rem;
|
|
191
|
+
touch-action: manipulation;
|
|
163
192
|
border: 2px solid #fff;
|
|
164
193
|
border-radius: 999px;
|
|
165
194
|
background: var(--lk-color-primary);
|
|
@@ -316,7 +345,7 @@
|
|
|
316
345
|
|
|
317
346
|
/* Crossword — square grid cells with block squares */
|
|
318
347
|
.lk-crossword {
|
|
319
|
-
--lk-crossword-cell-size: 2.
|
|
348
|
+
--lk-crossword-cell-size: var(--lk-touch-target-min, 2.75rem);
|
|
320
349
|
--lk-crossword-block: #0f172a;
|
|
321
350
|
}
|
|
322
351
|
|
|
@@ -430,8 +459,9 @@
|
|
|
430
459
|
display: flex;
|
|
431
460
|
flex-wrap: wrap;
|
|
432
461
|
align-items: center;
|
|
433
|
-
gap: 0.35rem;
|
|
434
|
-
min-height: 2.
|
|
462
|
+
gap: var(--lk-touch-spacing, 0.35rem);
|
|
463
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
464
|
+
touch-action: manipulation;
|
|
435
465
|
margin-bottom: var(--lk-space-md);
|
|
436
466
|
padding: 0.35rem 0.45rem;
|
|
437
467
|
border: 1px dashed var(--lk-color-border);
|
|
@@ -461,7 +491,8 @@
|
|
|
461
491
|
.lk-drag-item {
|
|
462
492
|
appearance: none;
|
|
463
493
|
margin: 0;
|
|
464
|
-
padding: 0.
|
|
494
|
+
padding: 0.5rem 0.85rem;
|
|
495
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
465
496
|
border: 1px solid var(--lk-color-border);
|
|
466
497
|
border-radius: 999px;
|
|
467
498
|
background: var(--lk-color-background, #fff);
|
|
@@ -471,6 +502,7 @@
|
|
|
471
502
|
font-weight: var(--lk-font-weight-strong);
|
|
472
503
|
cursor: grab;
|
|
473
504
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
505
|
+
touch-action: none;
|
|
474
506
|
}
|
|
475
507
|
|
|
476
508
|
.lk-drag-item:active {
|
|
@@ -522,7 +554,9 @@
|
|
|
522
554
|
justify-content: center;
|
|
523
555
|
width: fit-content;
|
|
524
556
|
max-width: 100%;
|
|
525
|
-
|
|
557
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
558
|
+
padding: 0.25rem;
|
|
559
|
+
touch-action: manipulation;
|
|
526
560
|
border: 1px dashed var(--lk-color-border);
|
|
527
561
|
border-radius: var(--lk-radius-md);
|
|
528
562
|
background: color-mix(in srgb, var(--lk-color-panel) 80%, transparent);
|
|
@@ -591,7 +625,7 @@
|
|
|
591
625
|
|
|
592
626
|
/* Word search — square grid cells with drag selection */
|
|
593
627
|
.lk-word-search {
|
|
594
|
-
--lk-word-search-cell-size: 2.
|
|
628
|
+
--lk-word-search-cell-size: var(--lk-touch-target-min, 2.75rem);
|
|
595
629
|
--lk-word-search-grid-border: #0f172a;
|
|
596
630
|
}
|
|
597
631
|
|
|
@@ -604,6 +638,7 @@
|
|
|
604
638
|
background: var(--lk-word-search-grid-border);
|
|
605
639
|
line-height: 0;
|
|
606
640
|
user-select: none;
|
|
641
|
+
touch-action: none;
|
|
607
642
|
}
|
|
608
643
|
|
|
609
644
|
.lk-word-search-row {
|
|
@@ -820,10 +855,137 @@
|
|
|
820
855
|
border-radius: var(--lk-radius-md);
|
|
821
856
|
background: color-mix(in srgb, var(--lk-color-panel) 88%, transparent);
|
|
822
857
|
color: var(--lk-color-foreground);
|
|
858
|
+
min-width: var(--lk-touch-target-min, 2.75rem);
|
|
859
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
823
860
|
padding: var(--lk-space-xs) var(--lk-space-sm);
|
|
824
861
|
font: inherit;
|
|
825
862
|
font-size: 0.875rem;
|
|
826
863
|
cursor: pointer;
|
|
864
|
+
touch-action: manipulation;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
[data-lk-check-id] input,
|
|
868
|
+
[data-lk-check-id] textarea,
|
|
869
|
+
[data-lk-check-id] select {
|
|
870
|
+
font-size: max(1rem, 16px);
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.lk-image-hotspot-trigger {
|
|
874
|
+
position: absolute;
|
|
875
|
+
display: inline-flex;
|
|
876
|
+
align-items: center;
|
|
877
|
+
justify-content: center;
|
|
878
|
+
min-width: var(--lk-touch-target-min, 2.75rem);
|
|
879
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
880
|
+
border: 2px solid var(--lk-color-primary, #2563eb);
|
|
881
|
+
border-radius: 999px;
|
|
882
|
+
background: color-mix(in srgb, var(--lk-color-primary, #2563eb) 88%, #fff);
|
|
883
|
+
color: var(--lk-color-primary-foreground, #fff);
|
|
884
|
+
font-size: 1.25rem;
|
|
885
|
+
font-weight: var(--lk-font-weight-strong);
|
|
886
|
+
line-height: 1;
|
|
887
|
+
cursor: pointer;
|
|
888
|
+
touch-action: manipulation;
|
|
889
|
+
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
.lk-mark-the-words-token {
|
|
893
|
+
display: inline-flex;
|
|
894
|
+
align-items: center;
|
|
895
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
896
|
+
padding: 0.15rem 0.45rem;
|
|
897
|
+
margin: 0.1rem 0.05rem;
|
|
898
|
+
touch-action: manipulation;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
.lk-summary-statement {
|
|
902
|
+
display: block;
|
|
903
|
+
width: 100%;
|
|
904
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
905
|
+
margin-bottom: var(--lk-touch-spacing, 0.5rem);
|
|
906
|
+
text-align: left;
|
|
907
|
+
touch-action: manipulation;
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
.lk-quiz-choice {
|
|
911
|
+
display: flex;
|
|
912
|
+
align-items: center;
|
|
913
|
+
gap: var(--lk-space-sm, 0.5rem);
|
|
914
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
915
|
+
padding: 0.25rem 0;
|
|
916
|
+
touch-action: manipulation;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.lk-quiz-choice input {
|
|
920
|
+
width: 1.25rem;
|
|
921
|
+
height: 1.25rem;
|
|
922
|
+
flex-shrink: 0;
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
.lk-drag-words-bank {
|
|
926
|
+
display: flex;
|
|
927
|
+
flex-wrap: wrap;
|
|
928
|
+
gap: var(--lk-touch-spacing, 0.5rem);
|
|
929
|
+
margin-bottom: var(--lk-space-md);
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.lk-drag-words-item {
|
|
933
|
+
appearance: none;
|
|
934
|
+
margin: 0;
|
|
935
|
+
padding: 0.5rem 0.85rem;
|
|
936
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
937
|
+
border: 1px solid var(--lk-color-border);
|
|
938
|
+
border-radius: 999px;
|
|
939
|
+
background: var(--lk-color-background, #fff);
|
|
940
|
+
font-family: var(--lk-font-family);
|
|
941
|
+
font-size: 0.875rem;
|
|
942
|
+
font-weight: var(--lk-font-weight-strong);
|
|
943
|
+
cursor: grab;
|
|
944
|
+
touch-action: none;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.lk-drag-words-item[aria-pressed="true"] {
|
|
948
|
+
outline: 2px solid var(--lk-color-primary, #2563eb);
|
|
949
|
+
outline-offset: 2px;
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.lk-drag-words-zone {
|
|
953
|
+
display: inline-flex;
|
|
954
|
+
align-items: center;
|
|
955
|
+
justify-content: center;
|
|
956
|
+
min-width: 6em;
|
|
957
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
958
|
+
border: 1px dashed currentColor;
|
|
959
|
+
padding: 0.25rem 0.5rem;
|
|
960
|
+
margin: 0 0.2em;
|
|
961
|
+
vertical-align: middle;
|
|
962
|
+
touch-action: manipulation;
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
.lk-advent-calendar-grid {
|
|
966
|
+
display: grid;
|
|
967
|
+
grid-template-columns: repeat(auto-fill, minmax(var(--lk-touch-target-min, 2.75rem), 1fr));
|
|
968
|
+
gap: var(--lk-touch-spacing, 0.5rem);
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
.lk-advent-door-button {
|
|
972
|
+
width: 100%;
|
|
973
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
974
|
+
touch-action: manipulation;
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
@media (pointer: coarse) {
|
|
978
|
+
.lk-summary-statement {
|
|
979
|
+
padding: var(--lk-space-sm) var(--lk-space-md);
|
|
980
|
+
border: 1px solid var(--lk-color-border);
|
|
981
|
+
border-radius: var(--lk-radius-md);
|
|
982
|
+
background: var(--lk-color-panel);
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
.lk-parallax-nav button {
|
|
986
|
+
min-height: var(--lk-touch-target-min, 2.75rem);
|
|
987
|
+
min-width: var(--lk-touch-target-min, 2.75rem);
|
|
988
|
+
}
|
|
827
989
|
}
|
|
828
990
|
|
|
829
991
|
.lk-find-hotspot-target[aria-pressed="true"] {
|
|
@@ -913,8 +1075,9 @@
|
|
|
913
1075
|
}
|
|
914
1076
|
|
|
915
1077
|
.lk-combination-lock-digit {
|
|
916
|
-
width: 2.75rem;
|
|
917
|
-
height: 2.75rem;
|
|
1078
|
+
width: var(--lk-touch-target-min, 2.75rem);
|
|
1079
|
+
height: var(--lk-touch-target-min, 2.75rem);
|
|
1080
|
+
font-size: max(1rem, 16px);
|
|
918
1081
|
padding: 0;
|
|
919
1082
|
border: 1px solid var(--lk-color-border);
|
|
920
1083
|
border-radius: var(--lk-radius-md);
|