@refrakt-md/skeleton 0.32.0 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.css +102 -102
- package/package.json +2 -2
- package/styles/dimensions/checklist.css +1 -1
- package/styles/dimensions/cover.css +12 -3
- package/styles/dimensions/guest-posture.css +2 -1
- package/styles/dimensions/metadata.css +12 -4
- package/styles/dimensions/sequence.css +1 -1
- package/styles/global.css +52 -12
- package/styles/layouts/blog.css +89 -25
- package/styles/layouts/default.css +63 -18
- package/styles/layouts/docs.css +111 -29
- package/styles/layouts/mobile.css +24 -8
- package/styles/layouts/on-this-page.css +6 -2
- package/styles/layouts/plan.css +108 -32
- package/styles/layouts/search.css +27 -9
- package/styles/layouts/split.css +45 -13
- package/styles/runes/accordion.css +25 -9
- package/styles/runes/annotate.css +9 -3
- package/styles/runes/audio.css +3 -1
- package/styles/runes/bento.css +151 -40
- package/styles/runes/bond.css +2 -2
- package/styles/runes/breadcrumb.css +6 -2
- package/styles/runes/budget.css +3 -1
- package/styles/runes/card.css +32 -10
- package/styles/runes/cast.css +12 -4
- package/styles/runes/changelog.css +12 -4
- package/styles/runes/character.css +3 -1
- package/styles/runes/chart.css +10 -3
- package/styles/runes/codegroup.css +6 -2
- package/styles/runes/collection.css +7 -7
- package/styles/runes/compare.css +3 -1
- package/styles/runes/comparison.css +33 -11
- package/styles/runes/conversation.css +6 -2
- package/styles/runes/cta.css +1 -1
- package/styles/runes/details.css +7 -2
- package/styles/runes/drawer.css +4 -20
- package/styles/runes/feature.css +1 -1
- package/styles/runes/figure.css +22 -7
- package/styles/runes/file-ref.css +3 -1
- package/styles/runes/form.css +3 -1
- package/styles/runes/gallery.css +3 -1
- package/styles/runes/grid.css +57 -19
- package/styles/runes/hero.css +20 -7
- package/styles/runes/hint.css +20 -6
- package/styles/runes/itinerary.css +25 -9
- package/styles/runes/juxtapose.css +15 -5
- package/styles/runes/lore.css +6 -2
- package/styles/runes/map.css +16 -5
- package/styles/runes/mediatext.css +28 -10
- package/styles/runes/milestone.css +1 -1
- package/styles/runes/mockup.css +5 -2
- package/styles/runes/nav.css +10 -4
- package/styles/runes/plan-history.css +13 -5
- package/styles/runes/plot.css +14 -5
- package/styles/runes/preview.css +18 -6
- package/styles/runes/pricing.css +7 -3
- package/styles/runes/pullquote.css +12 -4
- package/styles/runes/relationships.css +7 -7
- package/styles/runes/reveal.css +4 -2
- package/styles/runes/sandbox.css +6 -2
- package/styles/runes/section.css +1 -1
- package/styles/runes/showcase.css +6 -2
- package/styles/runes/steps.css +16 -6
- package/styles/runes/storyboard.css +15 -5
- package/styles/runes/symbol.css +9 -3
- package/styles/runes/tabs.css +1 -1
- package/styles/runes/testimonial.css +6 -2
- package/styles/runes/textblock.css +9 -3
- package/styles/runes/timeline.css +14 -6
package/styles/runes/compare.css
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
/* compare — structure. The wrapper clip, the side-by-side grid / stacked flex
|
|
2
2
|
* panels, the panel min-width + scroll, and the label block. Borders, header/label
|
|
3
3
|
* chrome, and code resets are skin. */
|
|
4
|
-
.rf-compare {
|
|
4
|
+
.rf-compare {
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
5
7
|
.rf-compare--side-by-side .rf-compare__panels {
|
|
6
8
|
display: grid;
|
|
7
9
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
@@ -6,12 +6,18 @@
|
|
|
6
6
|
* width/border-collapse stays skin too (it contends with the table element
|
|
7
7
|
* override + global table by value-identical rules). */
|
|
8
8
|
|
|
9
|
-
.rf-comparison__grid {
|
|
9
|
+
.rf-comparison__grid {
|
|
10
|
+
display: contents;
|
|
11
|
+
}
|
|
10
12
|
.rf-comparison-column__body,
|
|
11
|
-
.rf-comparison-row__body {
|
|
13
|
+
.rf-comparison-row__body {
|
|
14
|
+
display: contents;
|
|
15
|
+
}
|
|
12
16
|
|
|
13
17
|
.rf-comparison > meta,
|
|
14
|
-
.rf-comparison > span[property] {
|
|
18
|
+
.rf-comparison > span[property] {
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
15
21
|
|
|
16
22
|
/* Table layout */
|
|
17
23
|
.rf-comparison__table-wrapper {
|
|
@@ -23,10 +29,18 @@
|
|
|
23
29
|
top: 0;
|
|
24
30
|
z-index: 1;
|
|
25
31
|
}
|
|
26
|
-
.rf-comparison__recommended-badge {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
.rf-
|
|
32
|
+
.rf-comparison__recommended-badge {
|
|
33
|
+
display: block;
|
|
34
|
+
}
|
|
35
|
+
.rf-comparison__label-col {
|
|
36
|
+
width: 1%;
|
|
37
|
+
}
|
|
38
|
+
.rf-comparison__cell strong {
|
|
39
|
+
display: none;
|
|
40
|
+
}
|
|
41
|
+
.rf-comparison__callout-badge {
|
|
42
|
+
display: inline-block;
|
|
43
|
+
}
|
|
30
44
|
|
|
31
45
|
/* Cards layout */
|
|
32
46
|
.rf-comparison__cards {
|
|
@@ -34,21 +48,29 @@
|
|
|
34
48
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
35
49
|
align-items: start;
|
|
36
50
|
}
|
|
37
|
-
.rf-comparison-card {
|
|
51
|
+
.rf-comparison-card {
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
38
54
|
.rf-comparison-card__badge {
|
|
39
55
|
position: absolute;
|
|
40
56
|
top: -0.625rem;
|
|
41
57
|
left: 50%;
|
|
42
58
|
transform: translateX(-50%);
|
|
43
59
|
}
|
|
44
|
-
.rf-comparison-card__rows {
|
|
60
|
+
.rf-comparison-card__rows {
|
|
61
|
+
list-style: none;
|
|
62
|
+
}
|
|
45
63
|
.rf-comparison-card__row {
|
|
46
64
|
display: flex;
|
|
47
65
|
align-items: baseline;
|
|
48
66
|
}
|
|
49
|
-
.rf-comparison-card__row p {
|
|
67
|
+
.rf-comparison-card__row p {
|
|
68
|
+
display: inline;
|
|
69
|
+
}
|
|
50
70
|
|
|
51
71
|
/* Responsive */
|
|
52
72
|
@media (max-width: 640px) {
|
|
53
|
-
.rf-comparison__cards {
|
|
73
|
+
.rf-comparison__cards {
|
|
74
|
+
grid-template-columns: 1fr;
|
|
75
|
+
}
|
|
54
76
|
}
|
|
@@ -24,6 +24,10 @@
|
|
|
24
24
|
align-items: flex-end;
|
|
25
25
|
}
|
|
26
26
|
.rf-conversation-message > span[data-field="speaker"],
|
|
27
|
-
.rf-conversation-message > meta[data-field] {
|
|
27
|
+
.rf-conversation-message > meta[data-field] {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
28
30
|
.rf-conversation-message__body > span[data-field],
|
|
29
|
-
.rf-conversation-message__body > meta {
|
|
31
|
+
.rf-conversation-message__body > meta {
|
|
32
|
+
display: none;
|
|
33
|
+
}
|
package/styles/runes/cta.css
CHANGED
package/styles/runes/details.css
CHANGED
|
@@ -8,8 +8,13 @@
|
|
|
8
8
|
align-items: center;
|
|
9
9
|
list-style: none;
|
|
10
10
|
}
|
|
11
|
-
.rf-details__summary::-webkit-details-marker {
|
|
12
|
-
|
|
11
|
+
.rf-details__summary::-webkit-details-marker {
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
.rf-details__summary::marker {
|
|
15
|
+
display: none;
|
|
16
|
+
content: "";
|
|
17
|
+
}
|
|
13
18
|
.rf-details__summary::after {
|
|
14
19
|
flex-shrink: 0;
|
|
15
20
|
margin-left: auto;
|
package/styles/runes/drawer.css
CHANGED
|
@@ -59,35 +59,19 @@ dialog.rf-drawer .rf-drawer__footer {
|
|
|
59
59
|
|
|
60
60
|
/* Per-side inset positioning. */
|
|
61
61
|
dialog.rf-drawer[data-side="right"] {
|
|
62
|
-
inset:
|
|
63
|
-
var(--rf-drawer-gutter)
|
|
64
|
-
var(--rf-drawer-gutter)
|
|
65
|
-
var(--rf-drawer-gutter)
|
|
66
|
-
auto;
|
|
62
|
+
inset: var(--rf-drawer-gutter) var(--rf-drawer-gutter) var(--rf-drawer-gutter) auto;
|
|
67
63
|
height: auto;
|
|
68
64
|
}
|
|
69
65
|
dialog.rf-drawer[data-side="left"] {
|
|
70
|
-
inset:
|
|
71
|
-
var(--rf-drawer-gutter)
|
|
72
|
-
auto
|
|
73
|
-
var(--rf-drawer-gutter)
|
|
74
|
-
var(--rf-drawer-gutter);
|
|
66
|
+
inset: var(--rf-drawer-gutter) auto var(--rf-drawer-gutter) var(--rf-drawer-gutter);
|
|
75
67
|
height: auto;
|
|
76
68
|
}
|
|
77
69
|
dialog.rf-drawer[data-side="top"] {
|
|
78
|
-
inset:
|
|
79
|
-
var(--rf-drawer-gutter)
|
|
80
|
-
var(--rf-drawer-gutter)
|
|
81
|
-
auto
|
|
82
|
-
var(--rf-drawer-gutter);
|
|
70
|
+
inset: var(--rf-drawer-gutter) var(--rf-drawer-gutter) auto var(--rf-drawer-gutter);
|
|
83
71
|
width: auto;
|
|
84
72
|
}
|
|
85
73
|
dialog.rf-drawer[data-side="bottom"] {
|
|
86
|
-
inset:
|
|
87
|
-
auto
|
|
88
|
-
var(--rf-drawer-gutter)
|
|
89
|
-
var(--rf-drawer-gutter)
|
|
90
|
-
var(--rf-drawer-gutter);
|
|
74
|
+
inset: auto var(--rf-drawer-gutter) var(--rf-drawer-gutter) var(--rf-drawer-gutter);
|
|
91
75
|
width: auto;
|
|
92
76
|
}
|
|
93
77
|
|
package/styles/runes/feature.css
CHANGED
package/styles/runes/figure.css
CHANGED
|
@@ -14,10 +14,25 @@
|
|
|
14
14
|
object-fit: cover;
|
|
15
15
|
margin: 0;
|
|
16
16
|
}
|
|
17
|
-
.rf-figure--small {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
.rf-figure--
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
.rf-figure--
|
|
17
|
+
.rf-figure--small {
|
|
18
|
+
max-width: 320px;
|
|
19
|
+
}
|
|
20
|
+
.rf-figure--medium {
|
|
21
|
+
max-width: 640px;
|
|
22
|
+
}
|
|
23
|
+
.rf-figure--large {
|
|
24
|
+
max-width: 960px;
|
|
25
|
+
}
|
|
26
|
+
.rf-figure--full {
|
|
27
|
+
max-width: 100%;
|
|
28
|
+
}
|
|
29
|
+
.rf-figure--left {
|
|
30
|
+
margin-right: auto;
|
|
31
|
+
}
|
|
32
|
+
.rf-figure--center {
|
|
33
|
+
margin-left: auto;
|
|
34
|
+
margin-right: auto;
|
|
35
|
+
}
|
|
36
|
+
.rf-figure--right {
|
|
37
|
+
margin-left: auto;
|
|
38
|
+
}
|
package/styles/runes/form.css
CHANGED
package/styles/runes/gallery.css
CHANGED
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
* The thin-edge/gap vars, radii, scrim, and nav/lightbox chrome stay skin
|
|
4
4
|
* (Lumina's styles/runes/gallery.css). */
|
|
5
5
|
|
|
6
|
-
.rf-gallery {
|
|
6
|
+
.rf-gallery {
|
|
7
|
+
position: relative;
|
|
8
|
+
}
|
|
7
9
|
.rf-gallery__items {
|
|
8
10
|
display: grid;
|
|
9
11
|
grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
|
package/styles/runes/grid.css
CHANGED
|
@@ -9,24 +9,56 @@
|
|
|
9
9
|
align-items: var(--grid-valign, stretch);
|
|
10
10
|
}
|
|
11
11
|
/* Explicit column counts override auto-fit */
|
|
12
|
-
.rf-grid [data-columns="1"] {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
.rf-grid [data-columns="
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
.rf-grid [data-columns="1"] {
|
|
13
|
+
grid-template-columns: 1fr;
|
|
14
|
+
}
|
|
15
|
+
.rf-grid [data-columns="2"] {
|
|
16
|
+
grid-template-columns: repeat(2, 1fr);
|
|
17
|
+
}
|
|
18
|
+
.rf-grid [data-columns="3"] {
|
|
19
|
+
grid-template-columns: repeat(3, 1fr);
|
|
20
|
+
}
|
|
21
|
+
.rf-grid [data-columns="4"] {
|
|
22
|
+
grid-template-columns: repeat(4, 1fr);
|
|
23
|
+
}
|
|
24
|
+
.rf-grid [data-columns="5"] {
|
|
25
|
+
grid-template-columns: repeat(5, 1fr);
|
|
26
|
+
}
|
|
27
|
+
.rf-grid [data-columns="6"] {
|
|
28
|
+
grid-template-columns: repeat(6, 1fr);
|
|
29
|
+
}
|
|
18
30
|
/* Flow */
|
|
19
|
-
.rf-grid [data-flow="column"] {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.rf-grid [data-flow="
|
|
31
|
+
.rf-grid [data-flow="column"] {
|
|
32
|
+
grid-auto-flow: column;
|
|
33
|
+
}
|
|
34
|
+
.rf-grid [data-flow="dense"] {
|
|
35
|
+
grid-auto-flow: dense;
|
|
36
|
+
}
|
|
37
|
+
.rf-grid [data-flow="row dense"] {
|
|
38
|
+
grid-auto-flow: row dense;
|
|
39
|
+
}
|
|
40
|
+
.rf-grid [data-flow="column dense"] {
|
|
41
|
+
grid-auto-flow: column dense;
|
|
42
|
+
}
|
|
23
43
|
/* Spans */
|
|
24
|
-
.rf-grid [data-colspan="2"] {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
.rf-grid [data-
|
|
28
|
-
|
|
29
|
-
|
|
44
|
+
.rf-grid [data-colspan="2"] {
|
|
45
|
+
grid-column: span 2;
|
|
46
|
+
}
|
|
47
|
+
.rf-grid [data-colspan="3"] {
|
|
48
|
+
grid-column: span 3;
|
|
49
|
+
}
|
|
50
|
+
.rf-grid [data-colspan="4"] {
|
|
51
|
+
grid-column: span 4;
|
|
52
|
+
}
|
|
53
|
+
.rf-grid [data-rowspan="2"] {
|
|
54
|
+
grid-row: span 2;
|
|
55
|
+
}
|
|
56
|
+
.rf-grid [data-rowspan="3"] {
|
|
57
|
+
grid-row: span 3;
|
|
58
|
+
}
|
|
59
|
+
.rf-grid [data-rowspan="4"] {
|
|
60
|
+
grid-row: span 4;
|
|
61
|
+
}
|
|
30
62
|
/* Auto mode — responsive auto-fill */
|
|
31
63
|
.rf-grid[data-mode="auto"] [data-layout="grid"] {
|
|
32
64
|
grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr));
|
|
@@ -52,11 +84,17 @@
|
|
|
52
84
|
}
|
|
53
85
|
/* Collapse breakpoints */
|
|
54
86
|
@media (max-width: 640px) {
|
|
55
|
-
.rf-grid[data-collapse="sm"] [data-layout="grid"] {
|
|
87
|
+
.rf-grid[data-collapse="sm"] [data-layout="grid"] {
|
|
88
|
+
grid-template-columns: 1fr;
|
|
89
|
+
}
|
|
56
90
|
}
|
|
57
91
|
@media (max-width: 768px) {
|
|
58
|
-
.rf-grid[data-collapse="md"] [data-layout="grid"] {
|
|
92
|
+
.rf-grid[data-collapse="md"] [data-layout="grid"] {
|
|
93
|
+
grid-template-columns: 1fr;
|
|
94
|
+
}
|
|
59
95
|
}
|
|
60
96
|
@media (max-width: 1024px) {
|
|
61
|
-
.rf-grid[data-collapse="lg"] [data-layout="grid"] {
|
|
97
|
+
.rf-grid[data-collapse="lg"] [data-layout="grid"] {
|
|
98
|
+
grid-template-columns: 1fr;
|
|
99
|
+
}
|
|
62
100
|
}
|
package/styles/runes/hero.css
CHANGED
|
@@ -6,7 +6,9 @@
|
|
|
6
6
|
* surface chrome, scrim, radii, and text-align stay skin (Lumina's
|
|
7
7
|
* styles/runes/hero.css). */
|
|
8
8
|
|
|
9
|
-
.rf-hero {
|
|
9
|
+
.rf-hero {
|
|
10
|
+
position: relative;
|
|
11
|
+
}
|
|
10
12
|
|
|
11
13
|
/* The hero media zone's displaced-guest spill is now the shared bleed-host rule
|
|
12
14
|
* (`[data-guest-fit="bleed"]` in layouts/split.css) — a hero declares
|
|
@@ -23,7 +25,7 @@
|
|
|
23
25
|
position: relative;
|
|
24
26
|
}
|
|
25
27
|
.rf-hero .rf-hero__eyebrow:has(a) a::before {
|
|
26
|
-
content:
|
|
28
|
+
content: "";
|
|
27
29
|
position: absolute;
|
|
28
30
|
inset: 0;
|
|
29
31
|
}
|
|
@@ -100,12 +102,23 @@
|
|
|
100
102
|
.rf-hero--cover[data-media-position="cover"][data-cover-scope="full"] {
|
|
101
103
|
container-type: normal;
|
|
102
104
|
}
|
|
103
|
-
.rf-hero--cover[data-height="sm"] {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
.rf-hero--cover[data-height="
|
|
105
|
+
.rf-hero--cover[data-height="sm"] {
|
|
106
|
+
min-height: 20rem;
|
|
107
|
+
}
|
|
108
|
+
.rf-hero--cover[data-height="md"] {
|
|
109
|
+
min-height: 28rem;
|
|
110
|
+
}
|
|
111
|
+
.rf-hero--cover[data-height="lg"] {
|
|
112
|
+
min-height: 36rem;
|
|
113
|
+
}
|
|
114
|
+
.rf-hero--cover[data-height="xl"] {
|
|
115
|
+
min-height: 44rem;
|
|
116
|
+
}
|
|
107
117
|
/* Centre-band default: seat the overlay mid-well unless anchored. */
|
|
108
|
-
.rf-hero--cover[data-media-position="cover"]:is(
|
|
118
|
+
.rf-hero--cover[data-media-position="cover"]:is(
|
|
119
|
+
[data-content-place="auto"],
|
|
120
|
+
:not([data-content-place])
|
|
121
|
+
) > [data-name="content"] {
|
|
109
122
|
align-self: center;
|
|
110
123
|
justify-self: stretch;
|
|
111
124
|
}
|
package/styles/runes/hint.css
CHANGED
|
@@ -11,9 +11,11 @@
|
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
align-items: center;
|
|
13
13
|
}
|
|
14
|
-
.rf-hint__header [data-icon-group="hint"] {
|
|
14
|
+
.rf-hint__header [data-icon-group="hint"] {
|
|
15
|
+
display: block;
|
|
16
|
+
}
|
|
15
17
|
.rf-hint__header [data-icon-group="hint"]::before {
|
|
16
|
-
content:
|
|
18
|
+
content: "";
|
|
17
19
|
display: block;
|
|
18
20
|
width: 1.25rem;
|
|
19
21
|
height: 1.25rem;
|
|
@@ -22,7 +24,19 @@
|
|
|
22
24
|
-webkit-mask-repeat: no-repeat;
|
|
23
25
|
mask-repeat: no-repeat;
|
|
24
26
|
}
|
|
25
|
-
[data-icon-group="hint"][data-icon="note"]::before {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
[data-icon-group="hint"][data-icon="note"]::before {
|
|
28
|
+
-webkit-mask-image: var(--rf-icon-hint-note);
|
|
29
|
+
mask-image: var(--rf-icon-hint-note);
|
|
30
|
+
}
|
|
31
|
+
[data-icon-group="hint"][data-icon="warning"]::before {
|
|
32
|
+
-webkit-mask-image: var(--rf-icon-hint-warning);
|
|
33
|
+
mask-image: var(--rf-icon-hint-warning);
|
|
34
|
+
}
|
|
35
|
+
[data-icon-group="hint"][data-icon="caution"]::before {
|
|
36
|
+
-webkit-mask-image: var(--rf-icon-hint-caution);
|
|
37
|
+
mask-image: var(--rf-icon-hint-caution);
|
|
38
|
+
}
|
|
39
|
+
[data-icon-group="hint"][data-icon="check"]::before {
|
|
40
|
+
-webkit-mask-image: var(--rf-icon-hint-check);
|
|
41
|
+
mask-image: var(--rf-icon-hint-check);
|
|
42
|
+
}
|
|
@@ -3,19 +3,29 @@
|
|
|
3
3
|
* block display, the duration-badge placement, the horizontal flex-scroll + stop
|
|
4
4
|
* min-width, and the compact display toggles. Connector borders, marker chrome,
|
|
5
5
|
* the duration text, type, and spacing are skin. */
|
|
6
|
-
.rf-itinerary-day__header:empty {
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
.rf-itinerary-day__header:empty {
|
|
7
|
+
display: none;
|
|
8
|
+
}
|
|
9
|
+
.rf-itinerary-day ol {
|
|
10
|
+
list-style: none;
|
|
11
|
+
}
|
|
12
|
+
.rf-itinerary-stop {
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
9
15
|
.rf-itinerary-stop::before {
|
|
10
|
-
content:
|
|
16
|
+
content: "";
|
|
11
17
|
position: absolute;
|
|
12
18
|
left: -0.4375rem;
|
|
13
19
|
top: 0.25rem;
|
|
14
20
|
width: 0.75rem;
|
|
15
21
|
height: 0.75rem;
|
|
16
22
|
}
|
|
17
|
-
.rf-itinerary-stop__time {
|
|
18
|
-
|
|
23
|
+
.rf-itinerary-stop__time {
|
|
24
|
+
display: block;
|
|
25
|
+
}
|
|
26
|
+
.rf-itinerary-stop__location {
|
|
27
|
+
display: block;
|
|
28
|
+
}
|
|
19
29
|
.rf-itinerary-stop[data-duration]::after {
|
|
20
30
|
position: absolute;
|
|
21
31
|
top: 0.15rem;
|
|
@@ -36,6 +46,12 @@
|
|
|
36
46
|
position: static;
|
|
37
47
|
display: inline-block;
|
|
38
48
|
}
|
|
39
|
-
.rf-itinerary--compact .rf-itinerary-stop__body {
|
|
40
|
-
|
|
41
|
-
|
|
49
|
+
.rf-itinerary--compact .rf-itinerary-stop__body {
|
|
50
|
+
display: none;
|
|
51
|
+
}
|
|
52
|
+
.rf-itinerary--compact .rf-itinerary-stop__location {
|
|
53
|
+
display: inline;
|
|
54
|
+
}
|
|
55
|
+
.rf-itinerary--compact .rf-itinerary-stop__time {
|
|
56
|
+
display: inline;
|
|
57
|
+
}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
* toggle-bar flex, and the meta/label hides. Radii, surface, chrome, glyphs, and
|
|
4
4
|
* the toggle-button styling stay skin (Lumina's styles/runes/juxtapose.css). */
|
|
5
5
|
|
|
6
|
-
.rf-juxtapose__panels {
|
|
6
|
+
.rf-juxtapose__panels {
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
}
|
|
7
9
|
.rf-juxtapose-panel {
|
|
8
10
|
position: relative;
|
|
9
11
|
overflow: hidden;
|
|
@@ -13,16 +15,24 @@
|
|
|
13
15
|
bottom: 0.5rem;
|
|
14
16
|
pointer-events: none;
|
|
15
17
|
}
|
|
16
|
-
.rf-juxtapose-panel:first-child .rf-juxtapose-panel__name {
|
|
17
|
-
|
|
18
|
+
.rf-juxtapose-panel:first-child .rf-juxtapose-panel__name {
|
|
19
|
+
left: 0.5rem;
|
|
20
|
+
}
|
|
21
|
+
.rf-juxtapose-panel:last-child .rf-juxtapose-panel__name {
|
|
22
|
+
right: 0.5rem;
|
|
23
|
+
}
|
|
18
24
|
.rf-juxtapose-panel__body :is(img, .rf-placeholder) {
|
|
19
25
|
display: block;
|
|
20
26
|
width: 100%;
|
|
21
27
|
height: auto;
|
|
22
28
|
object-fit: cover;
|
|
23
29
|
}
|
|
24
|
-
.rf-juxtapose-panel > meta {
|
|
25
|
-
|
|
30
|
+
.rf-juxtapose-panel > meta {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
.rf-juxtapose--toggle .rf-juxtapose-panel__name {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
26
36
|
|
|
27
37
|
/* Slider divider (injected by behavior) */
|
|
28
38
|
.rf-juxtapose__divider {
|
package/styles/runes/lore.css
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
/* lore — structure. The relative root (spoiler-overlay anchor), the title block,
|
|
2
2
|
* and the spoiler-overlay positioning. The blur effect, overlay chrome, glyph, and
|
|
3
3
|
* type stay skin. */
|
|
4
|
-
.rf-lore {
|
|
5
|
-
|
|
4
|
+
.rf-lore {
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
.rf-lore > span[property="title"] {
|
|
8
|
+
display: block;
|
|
9
|
+
}
|
|
6
10
|
.rf-lore--spoiler::after {
|
|
7
11
|
position: absolute;
|
|
8
12
|
top: 50%;
|
package/styles/runes/map.css
CHANGED
|
@@ -3,11 +3,22 @@
|
|
|
3
3
|
* sr-only pins list, the pin-group inline box, metadata hide, the media-guest fill,
|
|
4
4
|
* and the popup-title block. Margins, radii, surface, fallback type, and the
|
|
5
5
|
* Leaflet popup chrome are skin. */
|
|
6
|
-
.rf-map {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
.rf-map--
|
|
10
|
-
|
|
6
|
+
.rf-map {
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
}
|
|
9
|
+
.rf-map--small .rf-map__container {
|
|
10
|
+
height: 200px;
|
|
11
|
+
}
|
|
12
|
+
.rf-map--medium .rf-map__container {
|
|
13
|
+
height: 400px;
|
|
14
|
+
}
|
|
15
|
+
.rf-map--large .rf-map__container {
|
|
16
|
+
height: 600px;
|
|
17
|
+
}
|
|
18
|
+
.rf-map--full .rf-map__container {
|
|
19
|
+
height: 80vh;
|
|
20
|
+
min-height: 400px;
|
|
21
|
+
}
|
|
11
22
|
.rf-map__container {
|
|
12
23
|
width: 100%;
|
|
13
24
|
position: relative;
|
|
@@ -5,21 +5,39 @@
|
|
|
5
5
|
display: grid;
|
|
6
6
|
align-items: start;
|
|
7
7
|
}
|
|
8
|
-
.rf-mediatext[data-ratio="1:1"]:not([data-wrap="true"]) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
.rf-mediatext
|
|
8
|
+
.rf-mediatext[data-ratio="1:1"]:not([data-wrap="true"]) {
|
|
9
|
+
grid-template-columns: 1fr 1fr;
|
|
10
|
+
}
|
|
11
|
+
.rf-mediatext[data-ratio="1:2"]:not([data-wrap="true"]) {
|
|
12
|
+
grid-template-columns: 1fr 2fr;
|
|
13
|
+
}
|
|
14
|
+
.rf-mediatext[data-ratio="2:1"]:not([data-wrap="true"]) {
|
|
15
|
+
grid-template-columns: 2fr 1fr;
|
|
16
|
+
}
|
|
17
|
+
.rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media {
|
|
18
|
+
order: 1;
|
|
19
|
+
}
|
|
12
20
|
.rf-mediatext__media :is(img, .rf-placeholder) {
|
|
13
21
|
max-width: 100%;
|
|
14
22
|
height: auto;
|
|
15
23
|
}
|
|
16
|
-
.rf-mediatext[data-ratio="1:1"][data-wrap="true"] .rf-mediatext__media {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
.rf-mediatext
|
|
20
|
-
|
|
24
|
+
.rf-mediatext[data-ratio="1:1"][data-wrap="true"] .rf-mediatext__media {
|
|
25
|
+
max-width: 50%;
|
|
26
|
+
}
|
|
27
|
+
.rf-mediatext[data-ratio="1:2"][data-wrap="true"] .rf-mediatext__media {
|
|
28
|
+
max-width: 33.333%;
|
|
29
|
+
}
|
|
30
|
+
.rf-mediatext[data-ratio="2:1"][data-wrap="true"] .rf-mediatext__media {
|
|
31
|
+
max-width: 66.666%;
|
|
32
|
+
}
|
|
33
|
+
.rf-mediatext--left[data-wrap="true"] .rf-mediatext__media {
|
|
34
|
+
float: left;
|
|
35
|
+
}
|
|
36
|
+
.rf-mediatext--right[data-wrap="true"] .rf-mediatext__media {
|
|
37
|
+
float: right;
|
|
38
|
+
}
|
|
21
39
|
.rf-mediatext[data-wrap="true"]::after {
|
|
22
|
-
content:
|
|
40
|
+
content: "";
|
|
23
41
|
display: table;
|
|
24
42
|
clear: both;
|
|
25
43
|
}
|
package/styles/runes/mockup.css
CHANGED
|
@@ -40,7 +40,10 @@
|
|
|
40
40
|
.rf-mockup__frame {
|
|
41
41
|
position: relative;
|
|
42
42
|
margin-inline: auto;
|
|
43
|
-
zoom: calc(
|
|
43
|
+
zoom: calc(
|
|
44
|
+
var(--mockup-scale, 1) *
|
|
45
|
+
min(1, tan(atan2(100cqi, var(--mockup-device-width, 100cqi))))
|
|
46
|
+
);
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
/* Media guest: fill the slot. The slot, not the device, sets the size here, so
|
|
@@ -123,7 +126,7 @@
|
|
|
123
126
|
height: 32px;
|
|
124
127
|
}
|
|
125
128
|
.rf-mockup__home-indicator::after {
|
|
126
|
-
content:
|
|
129
|
+
content: "";
|
|
127
130
|
display: block;
|
|
128
131
|
width: 134px;
|
|
129
132
|
height: 5px;
|