@hanology/cham-browser 0.4.75 → 0.4.76

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/package.json +1 -1
  2. package/template/src/components/PartBlock.vue +8 -6
  3. package/template/src/components/VerticalScroll.vue +8 -6
  4. package/template/src/styles/annotation-targets.css +46 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hanology/cham-browser",
3
- "version": "0.4.75",
3
+ "version": "0.4.76",
4
4
  "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/template/src/components/PartBlock.vue CHANGED
@@ -236,14 +236,16 @@ const annotationEntries = computed(() =>
236
236
 
237
237
  .part-block--vertical :deep(.ann-target) {
238
238
  border-bottom: none;
239
- border-left-width: 2px;
240
- border-left-style: solid;
241
- padding-left: 2px;
239
+ border-right: none;
240
+ padding-right: 3px;
241
+ background-image: linear-gradient(to bottom, var(--vermillion), var(--vermillion));
242
+ background-size: 2px 100%;
243
+ background-position: right center;
244
+ background-repeat: no-repeat;
242
245
  }
243
246
  .part-block--vertical :deep(.ann-target.ann-overlap) {
244
- border-left-width: 3px;
245
- border-left-style: double;
246
- padding-left: 3px;
247
+ padding-right: 4px;
248
+ background-size: 3px 100%;
247
249
  }
248
250
  .part-block--vertical :deep(.ann-num) {
249
251
  font-size: 0.45em;
package/template/src/components/VerticalScroll.vue CHANGED
@@ -114,14 +114,16 @@ function onTap(event: MouseEvent) {
114
114
 
115
115
  :deep(.ann-target) {
116
116
  border-bottom: none;
117
- border-left-width: 2px;
118
- border-left-style: solid;
119
- padding-left: 2px;
117
+ border-right: none;
118
+ padding-right: 3px;
119
+ background-image: linear-gradient(to bottom, var(--vermillion), var(--vermillion));
120
+ background-size: 2px 100%;
121
+ background-position: right center;
122
+ background-repeat: no-repeat;
120
123
  }
121
124
  :deep(.ann-target.ann-overlap) {
122
- border-left-width: 3px;
123
- border-left-style: double;
124
- padding-left: 3px;
125
+ padding-right: 4px;
126
+ background-size: 3px 100%;
125
127
  }
126
128
  :deep(.ann-num) {
127
129
  font-size: 0.45em;
package/template/src/styles/annotation-targets.css CHANGED
@@ -26,21 +26,60 @@
26
26
  border-bottom-style: double;
27
27
  }
28
28
 
29
- /* ─── Vertical mode: border-left ─── */
29
+ /* ─── Vertical mode: background line on right ─── */
30
30
  [data-layout="vertical"] .ann-target,
31
31
  .v-scroll .ann-target,
32
32
  .part-block--vertical .ann-target {
33
33
  border-bottom: none;
34
- border-left-width: 2px;
35
- border-left-style: solid;
36
- padding-left: 2px;
34
+ border-right: none;
35
+ padding-right: 3px;
36
+ background-image: linear-gradient(to bottom, var(--vermillion), var(--vermillion));
37
+ background-size: 2px 100%;
38
+ background-position: right center;
39
+ background-repeat: no-repeat;
37
40
  }
38
41
  [data-layout="vertical"] .ann-target.ann-overlap,
39
42
  .v-scroll .ann-target.ann-overlap,
40
43
  .part-block--vertical .ann-target.ann-overlap {
41
- border-left-width: 3px;
42
- border-left-style: double;
43
- padding-left: 3px;
44
+ padding-right: 4px;
45
+ background-size: 3px 100%;
46
+ }
47
+
48
+ /* ─── Vertical mode: per-kind colors ─── */
49
+ .v-scroll .ann-target.pronunciation,
50
+ [data-layout="vertical"] .ann-target.pronunciation,
51
+ .part-block--vertical .ann-target.pronunciation {
52
+ background-image: linear-gradient(to bottom, var(--jade), var(--jade));
53
+ }
54
+ .v-scroll .ann-target.pronunciation.semantic,
55
+ [data-layout="vertical"] .ann-target.pronunciation.semantic,
56
+ .part-block--vertical .ann-target.pronunciation.semantic {
57
+ background-image: linear-gradient(to bottom, var(--gold), var(--gold));
58
+ }
59
+ .v-scroll .ann-target.person,
60
+ [data-layout="vertical"] .ann-target.person,
61
+ .part-block--vertical .ann-target.person {
62
+ background-image: linear-gradient(to bottom, var(--ann-person), var(--ann-person));
63
+ }
64
+ .v-scroll .ann-target.place,
65
+ [data-layout="vertical"] .ann-target.place,
66
+ .part-block--vertical .ann-target.place {
67
+ background-image: linear-gradient(to bottom, var(--ann-place), var(--ann-place));
68
+ }
69
+ .v-scroll .ann-target.event,
70
+ [data-layout="vertical"] .ann-target.event,
71
+ .part-block--vertical .ann-target.event {
72
+ background-image: linear-gradient(to bottom, var(--ann-event), var(--ann-event));
73
+ }
74
+ .v-scroll .ann-target.date,
75
+ [data-layout="vertical"] .ann-target.date,
76
+ .part-block--vertical .ann-target.date {
77
+ background-image: linear-gradient(to bottom, var(--ann-date), var(--ann-date));
78
+ }
79
+ .v-scroll .ann-target.allusion,
80
+ [data-layout="vertical"] .ann-target.allusion,
81
+ .part-block--vertical .ann-target.allusion {
82
+ background-image: linear-gradient(to bottom, var(--ann-allusion), var(--ann-allusion));
44
83
  }
45
84
 
46
85
  /* ─── Annotation kind hover states ─── */