@phun-ky/speccer 8.0.1 → 8.0.3

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 (6) hide show
  1. package/README.md +3 -3
  2. package/package.json +1 -1
  3. package/speccer.css +172 -172
  4. package/speccer.js +1 -1
  5. package/speccer.js.map +1 -1
  6. package/speccer.min.css +1 -1
package/speccer.css CHANGED
@@ -1,4 +1,4 @@
1
- .ph.speccer {
1
+ .ph-speccer.speccer {
2
2
  --ph-speccer-color-padding: rgba(219,111,255,0.4);
3
3
  --ph-speccer-color-padding-hover: #db6fff;
4
4
  --ph-speccer-color-margin: rgba(255,247,111,0.4);
@@ -25,17 +25,17 @@
25
25
  --ph-speccer-line-width-negative: -1px;
26
26
  --ph-speccer-measure-size: 8px;
27
27
  }
28
- svg.ph,
29
- .ph.speccer,
30
- .ph.speccer::after,
31
- .ph.speccer::before {
28
+ svg.ph-speccer,
29
+ .ph-speccer.speccer,
30
+ .ph-speccer.speccer::after,
31
+ .ph-speccer.speccer::before {
32
32
  pointer-events: none;
33
33
  user-select: none;
34
34
  box-sizing: border-box;
35
35
  }
36
- .ph.speccer:not(path),
37
- .ph.speccer::after,
38
- .ph.speccer::before {
36
+ .ph-speccer.speccer:not(path),
37
+ .ph-speccer.speccer::after,
38
+ .ph-speccer.speccer::before {
39
39
  font-family: var(--ph-speccer-font-family) !important;
40
40
  justify-content: center;
41
41
  align-items: center;
@@ -54,10 +54,10 @@ svg.ph,
54
54
  pointer-events: none;
55
55
  z-index: 3;
56
56
  }
57
- svg.ph .ph.path {
57
+ svg.ph-speccer .ph-speccer.path {
58
58
  color: var(--ph-speccer-color-contrast, #ff3aa8);
59
59
  }
60
- .ph.speccer.dissection {
60
+ .ph-speccer.speccer.dissection {
61
61
  font-family: sans-serif;
62
62
  height: var(--ph-speccer-pin-size);
63
63
  width: var(--ph-speccer-pin-size);
@@ -73,7 +73,7 @@ svg.ph .ph.path {
73
73
  font-size: 16px;
74
74
  z-index: 100000;
75
75
  }
76
- .ph.speccer.dissection::after {
76
+ .ph-speccer.speccer.dissection::after {
77
77
  content: "";
78
78
  position: absolute;
79
79
  height: var(--ph-speccer-pin-space);
@@ -82,38 +82,38 @@ svg.ph .ph.path {
82
82
  background-color: var(--ph-speccer-pin-color);
83
83
  z-index: 99999;
84
84
  }
85
- .ph.speccer.dissection.svg::after,
86
- .ph.speccer.dissection.curly::after {
85
+ .ph-speccer.speccer.dissection.svg::after,
86
+ .ph-speccer.speccer.dissection.curly::after {
87
87
  content: none !important;
88
88
  }
89
- .ph.speccer.dissection.outline::after,
90
- .ph.speccer.dissection.outline.top::after {
89
+ .ph-speccer.speccer.dissection.outline::after,
90
+ .ph-speccer.speccer.dissection.outline.top::after {
91
91
  height: var(--ph-speccer-pin-space);
92
92
  width: var(--ph-speccer-line-width);
93
93
  top: 100%;
94
94
  right: 50%;
95
95
  }
96
- .ph.speccer.dissection.outline.left::after {
96
+ .ph-speccer.speccer.dissection.outline.left::after {
97
97
  height: var(--ph-speccer-line-width);
98
98
  width: var(--ph-speccer-pin-space);
99
99
  top: 50%;
100
100
  left: 100%;
101
101
  right: auto;
102
102
  }
103
- .ph.speccer.dissection.outline.right::after {
103
+ .ph-speccer.speccer.dissection.outline.right::after {
104
104
  height: var(--ph-speccer-line-width);
105
105
  width: var(--ph-speccer-pin-space);
106
106
  top: 50%;
107
107
  left: auto;
108
108
  right: 100%;
109
109
  }
110
- .ph.speccer.dissection.outline.bottom::after {
110
+ .ph-speccer.speccer.dissection.outline.bottom::after {
111
111
  height: var(--ph-speccer-pin-space);
112
112
  width: var(--ph-speccer-line-width);
113
113
  top: calc(-100% - (var(--ph-speccer-pin-space) / 2));
114
114
  right: 50%;
115
115
  }
116
- .ph.speccer.dissection::after {
116
+ .ph-speccer.speccer.dissection::after {
117
117
  content: "";
118
118
  position: absolute;
119
119
  height: var(--ph-speccer-pin-space);
@@ -122,127 +122,127 @@ svg.ph .ph.path {
122
122
  background-color: var(--ph-speccer-pin-color);
123
123
  z-index: 99999;
124
124
  }
125
- .ph.speccer.dissection.outline.left::after {
125
+ .ph-speccer.speccer.dissection.outline.left::after {
126
126
  height: var(--ph-speccer-line-width);
127
127
  width: var(--ph-speccer-pin-space);
128
128
  top: 50%;
129
129
  left: 100%;
130
130
  }
131
- .ph.speccer.dissection.outline.right::after {
131
+ .ph-speccer.speccer.dissection.outline.right::after {
132
132
  height: var(--ph-speccer-line-width);
133
133
  width: var(--ph-speccer-pin-space);
134
134
  top: 50%;
135
135
  right: 100%;
136
136
  }
137
- .ph.speccer.dissection.outline.enclose {
137
+ .ph-speccer.speccer.dissection.outline.enclose {
138
138
  border-radius: 0;
139
139
  background-color: transparent;
140
140
  color: var(--ph-speccer-measure-color);
141
141
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
142
142
  }
143
- .ph.speccer.dissection.outline.enclose::after {
143
+ .ph-speccer.speccer.dissection.outline.enclose::after {
144
144
  top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
145
145
  bottom: auto;
146
146
  }
147
- .ph.speccer.dissection.outline.enclose::before {
147
+ .ph-speccer.speccer.dissection.outline.enclose::before {
148
148
  bottom: 100%;
149
149
  top: auto;
150
150
  }
151
- .ph.speccer.dissection.outline.enclose.right::after {
151
+ .ph-speccer.speccer.dissection.outline.enclose.right::after {
152
152
  left: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
153
153
  right: auto;
154
154
  }
155
- .ph.speccer.dissection.outline.enclose.right::before {
155
+ .ph-speccer.speccer.dissection.outline.enclose.right::before {
156
156
  left: 100%;
157
157
  right: auto;
158
158
  }
159
- .ph.speccer.dissection.outline.enclose.left::after {
159
+ .ph-speccer.speccer.dissection.outline.enclose.left::after {
160
160
  left: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
161
161
  right: auto;
162
162
  }
163
- .ph.speccer.dissection.outline.enclose.left::before {
163
+ .ph-speccer.speccer.dissection.outline.enclose.left::before {
164
164
  right: 100%;
165
165
  left: auto;
166
166
  }
167
- .ph.speccer.dissection.outline.enclose.top::after {
167
+ .ph-speccer.speccer.dissection.outline.enclose.top::after {
168
168
  top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
169
169
  bottom: auto;
170
170
  }
171
- .ph.speccer.dissection.outline.enclose.top::before {
171
+ .ph-speccer.speccer.dissection.outline.enclose.top::before {
172
172
  bottom: 100%;
173
173
  top: auto;
174
174
  }
175
- .ph.speccer.dissection.outline.enclose.bottom::after {
175
+ .ph-speccer.speccer.dissection.outline.enclose.bottom::after {
176
176
  top: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
177
177
  bottom: auto;
178
178
  }
179
- .ph.speccer.dissection.outline.enclose.bottom::before {
179
+ .ph-speccer.speccer.dissection.outline.enclose.bottom::before {
180
180
  top: 100%;
181
181
  bottom: auto;
182
182
  }
183
- .ph.speccer.dissection.outline.full:not(.curly) {
183
+ .ph-speccer.speccer.dissection.outline.full:not(.curly) {
184
184
  border-radius: 0;
185
185
  background-color: transparent;
186
186
  color: var(--ph-speccer-measure-color);
187
187
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
188
188
  border-bottom: none;
189
189
  }
190
- .ph.speccer.dissection.outline.full:not(.curly)::after {
190
+ .ph-speccer.speccer.dissection.outline.full:not(.curly)::after {
191
191
  top: calc(-8px - var(--ph-speccer-pin-space));
192
192
  }
193
- .ph.speccer.dissection.outline.full:not(.curly)::before {
193
+ .ph-speccer.speccer.dissection.outline.full:not(.curly)::before {
194
194
  bottom: 100%;
195
195
  }
196
- .ph.speccer.dissection.outline.full:not(.curly).right {
196
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).right {
197
197
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
198
198
  border-left: none;
199
199
  }
200
- .ph.speccer.dissection.outline.full:not(.curly).right::after {
200
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).right::after {
201
201
  left: calc(8px + var(--ph-speccer-pin-space));
202
202
  }
203
- .ph.speccer.dissection.outline.full:not(.curly).right::before {
203
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).right::before {
204
204
  left: 100%;
205
205
  right: auto;
206
206
  }
207
- .ph.speccer.dissection.outline.full:not(.curly).left {
207
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).left {
208
208
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
209
209
  border-right: none;
210
210
  }
211
- .ph.speccer.dissection.outline.full:not(.curly).left::after {
211
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).left::after {
212
212
  left: calc(-8px - var(--ph-speccer-pin-space));
213
213
  }
214
- .ph.speccer.dissection.outline.full:not(.curly).left::before {
214
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).left::before {
215
215
  right: 100%;
216
216
  left: auto;
217
217
  }
218
- .ph.speccer.dissection.outline.full:not(.curly).top {
218
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).top {
219
219
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
220
220
  border-bottom: none;
221
221
  }
222
- .ph.speccer.dissection.outline.full:not(.curly).top::after {
222
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).top::after {
223
223
  top: calc(-8px - var(--ph-speccer-pin-space));
224
224
  }
225
- .ph.speccer.dissection.outline.full:not(.curly).top::before {
225
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).top::before {
226
226
  bottom: 100%;
227
227
  }
228
- .ph.speccer.dissection.outline.full:not(.curly).bottom {
228
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).bottom {
229
229
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
230
230
  border-top: none;
231
231
  }
232
- .ph.speccer.dissection.outline.full:not(.curly).bottom::after {
232
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).bottom::after {
233
233
  top: calc(8px + var(--ph-speccer-pin-space));
234
234
  }
235
- .ph.speccer.dissection.outline.full:not(.curly).bottom::before {
235
+ .ph-speccer.speccer.dissection.outline.full:not(.curly).bottom::before {
236
236
  top: 100%;
237
237
  }
238
- .ph.speccer.dissection.outline.bottom::after {
238
+ .ph-speccer.speccer.dissection.outline.bottom::after {
239
239
  height: var(--ph-speccer-pin-space);
240
240
  width: var(--ph-speccer-line-width);
241
241
  top: calc(-100% - (var(--ph-speccer-pin-space) / 2));
242
242
  right: 50%;
243
243
  }
244
- .ph.speccer.dissection.outline.top::after,
245
- .ph.speccer.dissection.outline::after {
244
+ .ph-speccer.speccer.dissection.outline.top::after,
245
+ .ph-speccer.speccer.dissection.outline::after {
246
246
  height: var(--ph-speccer-pin-space);
247
247
  width: var(--ph-speccer-line-width);
248
248
  top: 100%;
@@ -251,20 +251,20 @@ svg.ph .ph.path {
251
251
  [data-anatomy-section] {
252
252
  counter-reset: type;
253
253
  }
254
- .ph.speccer.dissection.outline.full.right:not(.curly),
255
- .ph.speccer.dissection.outline.full.left:not(.curly) {
254
+ .ph-speccer.speccer.dissection.outline.full.right:not(.curly),
255
+ .ph-speccer.speccer.dissection.outline.full.left:not(.curly) {
256
256
  width: 8px;
257
257
  }
258
- .ph.speccer.dissection.outline.full:not(.curly),
259
- .ph.speccer.dissection.outline.full.top:not(.curly),
260
- .ph.speccer.dissection.outline.full.bottom:not(.curly) {
258
+ .ph-speccer.speccer.dissection.outline.full:not(.curly),
259
+ .ph-speccer.speccer.dissection.outline.full.top:not(.curly),
260
+ .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly) {
261
261
  height: 8px;
262
262
  }
263
- .ph.speccer.dissection.outline.full:not(.curly)::after,
264
- .ph.speccer.dissection.outline.full.right:not(.curly)::after,
265
- .ph.speccer.dissection.outline.full.left:not(.curly)::after,
266
- .ph.speccer.dissection.outline.full.top:not(.curly)::after,
267
- .ph.speccer.dissection.outline.full.bottom:not(.curly)::after {
263
+ .ph-speccer.speccer.dissection.outline.full:not(.curly)::after,
264
+ .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::after,
265
+ .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::after,
266
+ .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::after,
267
+ .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::after {
268
268
  content: attr(data-dissection-counter);
269
269
  height: var(--ph-speccer-pin-size);
270
270
  width: var(--ph-speccer-pin-size);
@@ -279,57 +279,57 @@ svg.ph .ph.path {
279
279
  font-size: 16px;
280
280
  z-index: 100000;
281
281
  }
282
- .ph.speccer.dissection.outline.full.right:not(.curly)::after,
283
- .ph.speccer.dissection.outline.full.left:not(.curly)::after {
282
+ .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::after,
283
+ .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::after {
284
284
  top: 50%;
285
285
  transform: translateY(-50%);
286
286
  }
287
- .ph.speccer.dissection.outline.full:not(.curly)::after,
288
- .ph.speccer.dissection.outline.full.top:not(.curly)::after,
289
- .ph.speccer.dissection.outline.full.bottom:not(.curly)::after {
287
+ .ph-speccer.speccer.dissection.outline.full:not(.curly)::after,
288
+ .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::after,
289
+ .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::after {
290
290
  left: 50%;
291
291
  transform: translateX(-50%);
292
292
  }
293
- .ph.speccer.dissection.outline.full:not(.curly)::before,
294
- .ph.speccer.dissection.outline.full.right:not(.curly)::before,
295
- .ph.speccer.dissection.outline.full.left:not(.curly)::before,
296
- .ph.speccer.dissection.outline.full.top:not(.curly)::before,
297
- .ph.speccer.dissection.outline.full.bottom:not(.curly)::before {
293
+ .ph-speccer.speccer.dissection.outline.full:not(.curly)::before,
294
+ .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::before,
295
+ .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::before,
296
+ .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::before,
297
+ .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::before {
298
298
  content: "";
299
299
  position: absolute;
300
300
  background-color: var(--ph-speccer-pin-color);
301
301
  z-index: 100000;
302
302
  display: block;
303
303
  }
304
- .ph.speccer.dissection.outline.full.right:not(.curly)::before,
305
- .ph.speccer.dissection.outline.full.left:not(.curly)::before {
304
+ .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::before,
305
+ .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::before {
306
306
  top: 50%;
307
307
  transform: translateY(-50%);
308
308
  height: var(--ph-speccer-line-width);
309
309
  width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
310
310
  }
311
- .ph.speccer.dissection.outline.full:not(.curly)::before,
312
- .ph.speccer.dissection.outline.full.top:not(.curly)::before,
313
- .ph.speccer.dissection.outline.full.bottom:not(.curly)::before {
311
+ .ph-speccer.speccer.dissection.outline.full:not(.curly)::before,
312
+ .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::before,
313
+ .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::before {
314
314
  left: 50%;
315
315
  transform: translateX(-50%);
316
316
  width: var(--ph-speccer-line-width);
317
317
  height: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
318
318
  }
319
- .ph.speccer.dissection.outline.enclose.right,
320
- .ph.speccer.dissection.outline.enclose.left {
319
+ .ph-speccer.speccer.dissection.outline.enclose.right,
320
+ .ph-speccer.speccer.dissection.outline.enclose.left {
321
321
  width: 8px;
322
322
  }
323
- .ph.speccer.dissection.outline.enclose,
324
- .ph.speccer.dissection.outline.enclose.top,
325
- .ph.speccer.dissection.outline.enclose.bottom {
323
+ .ph-speccer.speccer.dissection.outline.enclose,
324
+ .ph-speccer.speccer.dissection.outline.enclose.top,
325
+ .ph-speccer.speccer.dissection.outline.enclose.bottom {
326
326
  height: 8px;
327
327
  }
328
- .ph.speccer.dissection.outline.enclose::after,
329
- .ph.speccer.dissection.outline.enclose.right::after,
330
- .ph.speccer.dissection.outline.enclose.left::after,
331
- .ph.speccer.dissection.outline.enclose.top::after,
332
- .ph.speccer.dissection.outline.enclose.bottom::after {
328
+ .ph-speccer.speccer.dissection.outline.enclose::after,
329
+ .ph-speccer.speccer.dissection.outline.enclose.right::after,
330
+ .ph-speccer.speccer.dissection.outline.enclose.left::after,
331
+ .ph-speccer.speccer.dissection.outline.enclose.top::after,
332
+ .ph-speccer.speccer.dissection.outline.enclose.bottom::after {
333
333
  content: attr(data-dissection-counter);
334
334
  height: var(--ph-speccer-pin-size);
335
335
  width: var(--ph-speccer-pin-size);
@@ -344,140 +344,140 @@ svg.ph .ph.path {
344
344
  font-size: 16px;
345
345
  z-index: 100000;
346
346
  }
347
- .ph.speccer.dissection.outline.enclose.right::after,
348
- .ph.speccer.dissection.outline.enclose.left::after {
347
+ .ph-speccer.speccer.dissection.outline.enclose.right::after,
348
+ .ph-speccer.speccer.dissection.outline.enclose.left::after {
349
349
  top: 50%;
350
350
  transform: translateY(-50%);
351
351
  }
352
- .ph.speccer.dissection.outline.enclose::after,
353
- .ph.speccer.dissection.outline.enclose.top::after,
354
- .ph.speccer.dissection.outline.enclose.bottom::after {
352
+ .ph-speccer.speccer.dissection.outline.enclose::after,
353
+ .ph-speccer.speccer.dissection.outline.enclose.top::after,
354
+ .ph-speccer.speccer.dissection.outline.enclose.bottom::after {
355
355
  left: 50%;
356
356
  transform: translateX(-50%);
357
357
  }
358
- .ph.speccer.dissection.outline.enclose::before,
359
- .ph.speccer.dissection.outline.enclose.right::before,
360
- .ph.speccer.dissection.outline.enclose.left::before,
361
- .ph.speccer.dissection.outline.enclose.top::before,
362
- .ph.speccer.dissection.outline.enclose.bottom::before {
358
+ .ph-speccer.speccer.dissection.outline.enclose::before,
359
+ .ph-speccer.speccer.dissection.outline.enclose.right::before,
360
+ .ph-speccer.speccer.dissection.outline.enclose.left::before,
361
+ .ph-speccer.speccer.dissection.outline.enclose.top::before,
362
+ .ph-speccer.speccer.dissection.outline.enclose.bottom::before {
363
363
  content: "";
364
364
  position: absolute;
365
365
  background-color: var(--ph-speccer-pin-color);
366
366
  z-index: 100000;
367
367
  display: block;
368
368
  }
369
- .ph.speccer.dissection.outline.enclose.right::before,
370
- .ph.speccer.dissection.outline.enclose.left::before {
369
+ .ph-speccer.speccer.dissection.outline.enclose.right::before,
370
+ .ph-speccer.speccer.dissection.outline.enclose.left::before {
371
371
  top: 50%;
372
372
  transform: translateY(-50%);
373
373
  height: var(--ph-speccer-line-width);
374
374
  width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
375
375
  }
376
- .ph.speccer.dissection.outline.enclose::before,
377
- .ph.speccer.dissection.outline.enclose.top::before,
378
- .ph.speccer.dissection.outline.enclose.bottom::before {
376
+ .ph-speccer.speccer.dissection.outline.enclose::before,
377
+ .ph-speccer.speccer.dissection.outline.enclose.top::before,
378
+ .ph-speccer.speccer.dissection.outline.enclose.bottom::before {
379
379
  left: 50%;
380
380
  transform: translateX(-50%);
381
381
  width: var(--ph-speccer-line-width);
382
382
  height: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
383
383
  }
384
- .ph.speccer.dissection.outline.subtle {
384
+ .ph-speccer.speccer.dissection.outline.subtle {
385
385
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
386
386
  background-color: var(--ph-speccer-color-text-light);
387
387
  color: var(--ph-speccer-pin-color);
388
388
  }
389
- .ph.speccer.dissection.outline.subtle.top::after,
390
- .ph.speccer.dissection.outline.subtle.bottom::after {
389
+ .ph-speccer.speccer.dissection.outline.subtle.top::after,
390
+ .ph-speccer.speccer.dissection.outline.subtle.bottom::after {
391
391
  width: 0;
392
392
  background-color: transparent;
393
393
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
394
394
  }
395
- .ph.speccer.dissection.outline.subtle.right::after,
396
- .ph.speccer.dissection.outline.subtle.left::after {
395
+ .ph-speccer.speccer.dissection.outline.subtle.right::after,
396
+ .ph-speccer.speccer.dissection.outline.subtle.left::after {
397
397
  height: 0;
398
398
  background-color: transparent;
399
399
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
400
400
  }
401
- .ph.speccer.dissection.outline.full.subtle:not(.curly) {
401
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly) {
402
402
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
403
403
  background-color: transparent;
404
404
  border-bottom: none;
405
405
  }
406
- .ph.speccer.dissection.outline.full.subtle:not(.curly).top {
406
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).top {
407
407
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
408
408
  border-bottom: none;
409
409
  }
410
- .ph.speccer.dissection.outline.full.subtle:not(.curly).bottom {
410
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).bottom {
411
411
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
412
412
  border-top: none;
413
413
  }
414
- .ph.speccer.dissection.outline.full.subtle:not(.curly).right {
414
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).right {
415
415
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
416
416
  border-left: none;
417
417
  }
418
- .ph.speccer.dissection.outline.full.subtle:not(.curly).left {
418
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).left {
419
419
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
420
420
  border-right: none;
421
421
  }
422
- .ph.speccer.dissection.outline.full.subtle:not(.curly)::after {
422
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly)::after {
423
423
  height: var(--ph-speccer-pin-size);
424
424
  width: var(--ph-speccer-pin-size);
425
425
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
426
426
  background-color: var(--ph-speccer-color-text-light);
427
427
  color: var(--ph-speccer-pin-color);
428
428
  }
429
- .ph.speccer.dissection.outline.full.subtle:not(.curly).top::before,
430
- .ph.speccer.dissection.outline.full.subtle:not(.curly).bottom::before {
429
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).top::before,
430
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).bottom::before {
431
431
  width: 0;
432
432
  background-color: transparent;
433
433
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
434
434
  }
435
- .ph.speccer.dissection.outline.full.subtle:not(.curly).right::before,
436
- .ph.speccer.dissection.outline.full.subtle:not(.curly).left::before {
435
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).right::before,
436
+ .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).left::before {
437
437
  height: 0;
438
438
  background-color: transparent;
439
439
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
440
440
  }
441
- .ph.speccer.dissection.outline.enclose.subtle {
441
+ .ph-speccer.speccer.dissection.outline.enclose.subtle {
442
442
  border-style: dashed;
443
443
  }
444
- .ph.speccer.dissection.outline.enclose.subtle::after {
444
+ .ph-speccer.speccer.dissection.outline.enclose.subtle::after {
445
445
  height: var(--ph-speccer-pin-size);
446
446
  width: var(--ph-speccer-pin-size);
447
447
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
448
448
  background-color: var(--ph-speccer-color-text-light);
449
449
  color: var(--ph-speccer-pin-color);
450
450
  }
451
- .ph.speccer.dissection.outline.enclose.subtle.top::before,
452
- .ph.speccer.dissection.outline.enclose.subtle.bottom::before {
451
+ .ph-speccer.speccer.dissection.outline.enclose.subtle.top::before,
452
+ .ph-speccer.speccer.dissection.outline.enclose.subtle.bottom::before {
453
453
  width: 0;
454
454
  background-color: transparent;
455
455
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
456
456
  }
457
- .ph.speccer.dissection.outline.enclose.subtle.right::before,
458
- .ph.speccer.dissection.outline.enclose.subtle.left::before {
457
+ .ph-speccer.speccer.dissection.outline.enclose.subtle.right::before,
458
+ .ph-speccer.speccer.dissection.outline.enclose.subtle.left::before {
459
459
  height: 0;
460
460
  background-color: transparent;
461
461
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
462
462
  }
463
- .ph.speccer.spacing {
463
+ .ph-speccer.speccer.spacing {
464
464
  pointer-events: auto;
465
465
  transition: none;
466
466
  border: var(--ph-speccer-line-width) solid transparent;
467
467
  }
468
- .ph.speccer.spacing:hover {
468
+ .ph-speccer.speccer.spacing:hover {
469
469
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
470
470
  }
471
- .ph.speccer.spacing.margin {
471
+ .ph-speccer.speccer.spacing.margin {
472
472
  background-color: var(--ph-speccer-color-margin);
473
473
  color: var(--ph-speccer-color-text-dark);
474
474
  }
475
- .ph.speccer.spacing.padding {
475
+ .ph-speccer.speccer.spacing.padding {
476
476
  background-color: var(--ph-speccer-color-padding);
477
477
  color: var(--ph-speccer-spacing-color);
478
478
  }
479
- .ph.speccer.spacing.margin.bottom::after,
480
- .ph.speccer.spacing.margin.top::after {
479
+ .ph-speccer.speccer.spacing.margin.bottom::after,
480
+ .ph-speccer.speccer.spacing.margin.top::after {
481
481
  transition: none;
482
482
  content: "";
483
483
  position: absolute;
@@ -487,8 +487,8 @@ svg.ph .ph.path {
487
487
  width: 9px;
488
488
  left: 40%;
489
489
  }
490
- .ph.speccer.spacing.margin.bottom::before,
491
- .ph.speccer.spacing.margin.top::before {
490
+ .ph-speccer.speccer.spacing.margin.bottom::before,
491
+ .ph-speccer.speccer.spacing.margin.top::before {
492
492
  transition: none;
493
493
  content: "";
494
494
  position: absolute;
@@ -498,8 +498,8 @@ svg.ph .ph.path {
498
498
  width: 0;
499
499
  left: 40%;
500
500
  }
501
- .ph.speccer.spacing.margin.left::after,
502
- .ph.speccer.spacing.margin.right::after {
501
+ .ph-speccer.speccer.spacing.margin.left::after,
502
+ .ph-speccer.speccer.spacing.margin.right::after {
503
503
  transition: none;
504
504
  content: "";
505
505
  position: absolute;
@@ -509,8 +509,8 @@ svg.ph .ph.path {
509
509
  width: 100%;
510
510
  top: 10%;
511
511
  }
512
- .ph.speccer.spacing.margin.left::before,
513
- .ph.speccer.spacing.margin.right::before {
512
+ .ph-speccer.speccer.spacing.margin.left::before,
513
+ .ph-speccer.speccer.spacing.margin.right::before {
514
514
  transition: none;
515
515
  content: "";
516
516
  position: absolute;
@@ -520,8 +520,8 @@ svg.ph .ph.path {
520
520
  width: 100%;
521
521
  top: 10%;
522
522
  }
523
- .ph.speccer.spacing.padding.bottom::after,
524
- .ph.speccer.spacing.padding.top::after {
523
+ .ph-speccer.speccer.spacing.padding.bottom::after,
524
+ .ph-speccer.speccer.spacing.padding.top::after {
525
525
  transition: none;
526
526
  content: "";
527
527
  position: absolute;
@@ -531,8 +531,8 @@ svg.ph .ph.path {
531
531
  width: 9px;
532
532
  left: 40%;
533
533
  }
534
- .ph.speccer.spacing.padding.bottom::before,
535
- .ph.speccer.spacing.padding.top::before {
534
+ .ph-speccer.speccer.spacing.padding.bottom::before,
535
+ .ph-speccer.speccer.spacing.padding.top::before {
536
536
  transition: none;
537
537
  content: "";
538
538
  position: absolute;
@@ -542,8 +542,8 @@ svg.ph .ph.path {
542
542
  width: 0;
543
543
  left: 40%;
544
544
  }
545
- .ph.speccer.spacing.padding.left::after,
546
- .ph.speccer.spacing.padding.right::after {
545
+ .ph-speccer.speccer.spacing.padding.left::after,
546
+ .ph-speccer.speccer.spacing.padding.right::after {
547
547
  transition: none;
548
548
  content: "";
549
549
  position: absolute;
@@ -553,8 +553,8 @@ svg.ph .ph.path {
553
553
  width: 100%;
554
554
  top: 10%;
555
555
  }
556
- .ph.speccer.spacing.padding.left::before,
557
- .ph.speccer.spacing.padding.right::before {
556
+ .ph-speccer.speccer.spacing.padding.left::before,
557
+ .ph-speccer.speccer.spacing.padding.right::before {
558
558
  transition: none;
559
559
  content: "";
560
560
  position: absolute;
@@ -564,22 +564,22 @@ svg.ph .ph.path {
564
564
  width: 100%;
565
565
  top: 10%;
566
566
  }
567
- .ph.speccer.typography {
567
+ .ph-speccer.speccer.typography {
568
568
  background-color: var(--ph-speccer-typography-background-color);
569
569
  color: var(--ph-speccer-typography-color-text);
570
570
  font-size: 10px;
571
571
  padding: 8px;
572
- max-width: none;
572
+ max-width: 320px;
573
573
  width: auto;
574
574
  display: block;
575
575
  text-align: left;
576
576
  line-height: 140%;
577
577
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
578
578
  }
579
- .ph.speccer.typography:hover {
579
+ .ph-speccer.speccer.typography:hover {
580
580
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
581
581
  }
582
- .ph.speccer.typography:after {
582
+ .ph-speccer.speccer.typography:after {
583
583
  content: "";
584
584
  position: absolute;
585
585
  display: block;
@@ -590,14 +590,14 @@ svg.ph .ph.path {
590
590
  height: var(--ph-speccer-line-width);
591
591
  width: var(--ph-speccer-pin-space);
592
592
  }
593
- .ph.speccer.typography.left:after {
593
+ .ph-speccer.speccer.typography.left:after {
594
594
  left: 100%;
595
595
  top: 50%;
596
596
  transform: translateY(-50%);
597
597
  height: var(--ph-speccer-line-width);
598
598
  width: var(--ph-speccer-pin-space);
599
599
  }
600
- .ph.speccer.typography.right:after {
600
+ .ph-speccer.speccer.typography.right:after {
601
601
  left: auto;
602
602
  right: 100%;
603
603
  top: 50%;
@@ -605,7 +605,7 @@ svg.ph .ph.path {
605
605
  height: var(--ph-speccer-line-width);
606
606
  width: var(--ph-speccer-pin-space);
607
607
  }
608
- .ph.speccer.typography.top:after {
608
+ .ph-speccer.speccer.typography.top:after {
609
609
  left: 50%;
610
610
  right: auto;
611
611
  top: 100%;
@@ -613,7 +613,7 @@ svg.ph .ph.path {
613
613
  height: var(--ph-speccer-pin-space);
614
614
  width: var(--ph-speccer-line-width);
615
615
  }
616
- .ph.speccer.typography.bottom:after {
616
+ .ph-speccer.speccer.typography.bottom:after {
617
617
  left: 50%;
618
618
  right: auto;
619
619
  top: auto;
@@ -622,7 +622,7 @@ svg.ph .ph.path {
622
622
  height: var(--ph-speccer-pin-space);
623
623
  width: var(--ph-speccer-line-width);
624
624
  }
625
- .ph.speccer.typography .speccer-styles {
625
+ .ph-speccer.speccer.typography .speccer-styles {
626
626
  list-style: none;
627
627
  width: 100%;
628
628
  padding: 0;
@@ -631,7 +631,7 @@ svg.ph .ph.path {
631
631
  padding-left: 8px;
632
632
  font-size: 10px;
633
633
  }
634
- .ph.speccer.typography .speccer-styles .property {
634
+ .ph-speccer.speccer.typography .speccer-styles .property {
635
635
  font-weight: normal;
636
636
  color: var(--ph-speccer-typography-color-property);
637
637
  text-align: left;
@@ -639,7 +639,7 @@ svg.ph .ph.path {
639
639
  font-size: 10px;
640
640
  margin: 0;
641
641
  }
642
- .ph.speccer.typography .speccer-styles > li {
642
+ .ph-speccer.speccer.typography .speccer-styles > li {
643
643
  font-weight: normal;
644
644
  color: var(--ph-speccer-typography-color-value);
645
645
  text-align: left;
@@ -649,85 +649,85 @@ svg.ph .ph.path {
649
649
  list-style: none;
650
650
  border: none;
651
651
  }
652
- .ph.speccer.measure {
652
+ .ph-speccer.speccer.measure {
653
653
  display: flex;
654
654
  }
655
- .ph.speccer.measure.width {
655
+ .ph-speccer.speccer.measure.width {
656
656
  color: var(--ph-speccer-measure-color);
657
657
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
658
658
  border-bottom: none;
659
659
  height: var(--ph-speccer-measure-size);
660
660
  }
661
- .ph.speccer.measure.width::after {
661
+ .ph-speccer.speccer.measure.width::after {
662
662
  content: attr(data-measure);
663
663
  position: absolute;
664
664
  top: calc(-100% - 10px);
665
665
  }
666
- .ph.speccer.measure.width.bottom {
666
+ .ph-speccer.speccer.measure.width.bottom {
667
667
  color: var(--ph-speccer-measure-color);
668
668
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
669
669
  border-top: none;
670
670
  }
671
- .ph.speccer.measure.width.bottom::after {
671
+ .ph-speccer.speccer.measure.width.bottom::after {
672
672
  content: attr(data-measure);
673
673
  position: absolute;
674
674
  top: calc(100% + 5px);
675
675
  }
676
- .ph.speccer.measure.width.top {
676
+ .ph-speccer.speccer.measure.width.top {
677
677
  color: var(--ph-speccer-measure-color);
678
678
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
679
679
  border-bottom: none;
680
680
  }
681
- .ph.speccer.measure.width.top::after {
681
+ .ph-speccer.speccer.measure.width.top::after {
682
682
  content: attr(data-measure);
683
683
  position: absolute;
684
684
  bottom: calc(100% + 5px);
685
685
  }
686
- .ph.speccer.measure.height.left {
686
+ .ph-speccer.speccer.measure.height.left {
687
687
  color: var(--ph-speccer-measure-color);
688
688
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
689
689
  border-right: none;
690
690
  width: var(--ph-speccer-measure-size);
691
691
  }
692
- .ph.speccer.measure.height.left::after {
692
+ .ph-speccer.speccer.measure.height.left::after {
693
693
  content: attr(data-measure);
694
694
  position: absolute;
695
695
  top: 50%;
696
696
  left: calc(-100% - 20px - var(--ph-speccer-line-width));
697
697
  transform: translateY(-50%) rotate(-90deg);
698
698
  }
699
- .ph.speccer.measure.height.right {
699
+ .ph-speccer.speccer.measure.height.right {
700
700
  color: var(--ph-speccer-measure-color);
701
701
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
702
702
  border-left: none;
703
703
  width: var(--ph-speccer-measure-size);
704
704
  }
705
- .ph.speccer.measure.height.right::after {
705
+ .ph-speccer.speccer.measure.height.right::after {
706
706
  content: attr(data-measure);
707
707
  position: absolute;
708
708
  top: 50%;
709
709
  left: calc(100% - var(--ph-speccer-measure-size));
710
710
  transform: translateY(-50%) rotate(90deg);
711
711
  }
712
- .ph.speccer.measure.subtle.width.top,
713
- .ph.speccer.measure.subtle.width.bottom,
714
- .ph.speccer.measure.subtle.height.right,
715
- .ph.speccer.measure.subtle.height.left {
712
+ .ph-speccer.speccer.measure.subtle.width.top,
713
+ .ph-speccer.speccer.measure.subtle.width.bottom,
714
+ .ph-speccer.speccer.measure.subtle.height.right,
715
+ .ph-speccer.speccer.measure.subtle.height.left {
716
716
  border-style: dashed;
717
717
  }
718
- .ph.speccer.measure.subtle.width.top {
718
+ .ph-speccer.speccer.measure.subtle.width.top {
719
719
  border-bottom: none;
720
720
  }
721
- .ph.speccer.measure.subtle.width.bottom {
721
+ .ph-speccer.speccer.measure.subtle.width.bottom {
722
722
  border-top: none;
723
723
  }
724
- .ph.speccer.measure.subtle.height.right {
724
+ .ph-speccer.speccer.measure.subtle.height.right {
725
725
  border-left: none;
726
726
  }
727
- .ph.speccer.measure.subtle.height.left {
727
+ .ph-speccer.speccer.measure.subtle.height.left {
728
728
  border-right: none;
729
729
  }
730
- .ph.speccer.mark {
730
+ .ph-speccer.speccer.mark {
731
731
  background-color: var(--ph-speccer-mark-background-color);
732
732
  border-color: var(--ph-speccer-mark-border-color);
733
733
  border-width: 1px;