genshin-interface 4.0.0 → 4.1.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/dist/index.d.ts +658 -46
- package/dist/index.js +1723 -98
- package/dist/save-1cODLLb1.d.ts +24 -0
- package/dist/save-B6F3omOa.js +41 -0
- package/dist/save.d.ts +2 -0
- package/dist/save.js +1 -0
- package/dist/style.css +2406 -8
- package/package.json +10 -11
package/dist/style.css
CHANGED
|
@@ -1,16 +1,1948 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
/* Measured off the English PC client's character screen at 21:9 (captures/session-2.mp4, a frame per tab from 155 to
|
|
3
|
+
159 seconds), in units: a pixel of that frame at 1440 high is 0.75 units. The game's exports hold the screen's root
|
|
4
|
+
alone, its contents a prefab loaded at run time, so every place here is read off the frames. The portraits sit 96
|
|
5
|
+
units apart from their centre at 643, the panel's left edge at 2057 and its right margin at 195. The frame draws no
|
|
6
|
+
scene: the world's screen lays one behind it */
|
|
7
|
+
.character-menu[data-v-6efaddd5] {
|
|
7
8
|
position: absolute;
|
|
8
9
|
inset: 0;
|
|
10
|
+
color: #fff;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* The band across the top, the name and the portraits on it, a veil 96 units deep that keeps 78 hundredths of the scene
|
|
14
|
+
under it all the way down, as the frame's scene measures above and below its edge */
|
|
15
|
+
.head[data-v-6efaddd5] {
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: 0;
|
|
18
|
+
right: 0;
|
|
19
|
+
left: 0;
|
|
20
|
+
height: calc(var(--unit) * 96);
|
|
21
|
+
background: rgb(0 0 0 / 0.22);
|
|
22
|
+
}
|
|
23
|
+
.characters[data-v-6efaddd5],
|
|
24
|
+
.tabs[data-v-6efaddd5] {
|
|
25
|
+
position: absolute;
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 0;
|
|
28
|
+
list-style: none;
|
|
29
|
+
}
|
|
30
|
+
.characters[data-v-6efaddd5] {
|
|
31
|
+
top: calc(var(--unit) * 12.5);
|
|
32
|
+
left: calc(var(--unit) * 608);
|
|
33
|
+
display: flex;
|
|
34
|
+
gap: calc(var(--unit) * 27);
|
|
35
|
+
overflow-x: auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Provisional: the portraits, which the frame draws as the game's own art once an asset is settled, until then a circle
|
|
39
|
+
with the name. The chosen one's cyan underline sits 79 units below the top of its portrait */
|
|
40
|
+
.character[data-v-6efaddd5] {
|
|
41
|
+
position: relative;
|
|
42
|
+
display: grid;
|
|
43
|
+
width: calc(var(--unit) * 69);
|
|
44
|
+
height: calc(var(--unit) * 69);
|
|
45
|
+
flex: none;
|
|
46
|
+
padding: 0;
|
|
47
|
+
border: calc(var(--unit) * 3) solid #9bbf4b;
|
|
48
|
+
border-radius: 50%;
|
|
49
|
+
background: rgb(255 255 255 / 0.15);
|
|
50
|
+
color: inherit;
|
|
51
|
+
cursor: inherit;
|
|
52
|
+
font: inherit;
|
|
53
|
+
font-size: calc(var(--unit) * 11);
|
|
54
|
+
place-items: center;
|
|
55
|
+
}
|
|
56
|
+
.character[aria-pressed="true"][data-v-6efaddd5] {
|
|
57
|
+
border-color: #7fd6e0;
|
|
58
|
+
}
|
|
59
|
+
.character[aria-pressed="true"][data-v-6efaddd5]::after {
|
|
60
|
+
position: absolute;
|
|
61
|
+
top: calc(var(--unit) * 79);
|
|
62
|
+
left: calc(var(--unit) * -13.5);
|
|
63
|
+
width: calc(var(--unit) * 96);
|
|
64
|
+
height: calc(var(--unit) * 4);
|
|
65
|
+
background: #6fc9dc;
|
|
66
|
+
content: "";
|
|
67
|
+
}
|
|
68
|
+
.breadcrumb[data-v-6efaddd5] {
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: calc(var(--unit) * 29);
|
|
71
|
+
left: calc(var(--unit) * 216);
|
|
72
|
+
margin: 0;
|
|
73
|
+
color: #e6d6a8;
|
|
74
|
+
font-size: calc(var(--unit) * 30);
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
line-height: calc(var(--unit) * 36);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* The tabs down the left, measured off each tab's own frame of the recording (155 to 159 seconds): the rows on a
|
|
80
|
+
69.6-unit pitch, the first's words centred 155.8 units down. Each row spans the column from the frame's left, so its
|
|
81
|
+
word and its diamond are placed from the frame's own edge */
|
|
82
|
+
.tabs[data-v-6efaddd5] {
|
|
83
|
+
top: calc(var(--unit) * 121);
|
|
84
|
+
left: 0;
|
|
85
|
+
width: calc(var(--unit) * 560);
|
|
86
|
+
}
|
|
87
|
+
.tabs li[data-v-6efaddd5] {
|
|
88
|
+
height: calc(var(--unit) * 69.6);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* A closed tab's word starts 216 units in, its ascenders 25.5 units tall in a cream a little short of white, letter-spaced
|
|
92
|
+
out to the game's width, with a faint shadow round it */
|
|
93
|
+
.tab[data-v-6efaddd5] {
|
|
94
|
+
position: relative;
|
|
95
|
+
display: block;
|
|
96
|
+
width: 100%;
|
|
97
|
+
height: 100%;
|
|
98
|
+
padding: 0 0 0 calc(var(--unit) * 216);
|
|
99
|
+
border: none;
|
|
100
|
+
background: transparent;
|
|
101
|
+
color: rgb(206 197 176);
|
|
102
|
+
cursor: inherit;
|
|
103
|
+
font: inherit;
|
|
104
|
+
font-size: calc(var(--unit) * 34.5);
|
|
105
|
+
font-weight: 600;
|
|
106
|
+
letter-spacing: calc(var(--unit) * 1.95);
|
|
107
|
+
line-height: calc(var(--unit) * 69.6);
|
|
108
|
+
text-align: start;
|
|
109
|
+
text-shadow: 0 0 calc(var(--unit) * 3) rgb(0 0 0 / 0.2);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* A closed tab's diamond, 15 units corner to corner and centred 196.9 units in, the word's cream at half strength */
|
|
113
|
+
.tab[data-v-6efaddd5]::before {
|
|
114
|
+
position: absolute;
|
|
115
|
+
top: calc(50% - var(--unit) * 1.3);
|
|
116
|
+
left: calc(var(--unit) * 191.6);
|
|
117
|
+
width: calc(var(--unit) * 10.6);
|
|
118
|
+
height: calc(var(--unit) * 10.6);
|
|
119
|
+
background: rgb(236 229 216 / 0.5);
|
|
120
|
+
content: "";
|
|
121
|
+
transform: translateY(-50%) rotate(45deg);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* The open tab's word is a fifth larger and near white, 9.75 units further in, blooming into the light behind it */
|
|
125
|
+
.tab[aria-pressed="true"][data-v-6efaddd5] {
|
|
126
|
+
z-index: 0;
|
|
127
|
+
padding-left: calc(var(--unit) * 225.75);
|
|
128
|
+
color: rgb(244 243 235);
|
|
129
|
+
font-size: calc(var(--unit) * 41.4);
|
|
130
|
+
letter-spacing: calc(var(--unit) * 2.34);
|
|
131
|
+
text-shadow:
|
|
132
|
+
0 0 calc(var(--unit) * 4) rgb(255 248 230 / 0.8),
|
|
133
|
+
0 0 calc(var(--unit) * 12) rgb(255 240 200 / 0.5);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Its diamond is a faint outline 28.5 units corner to corner on the same centre, the part of it right of a line 4.5 units
|
|
137
|
+
past its centre filled near white, a head pointing right, with a light rising towards it from the left corner */
|
|
138
|
+
.tab[aria-pressed="true"][data-v-6efaddd5]::before {
|
|
139
|
+
top: 50%;
|
|
140
|
+
left: calc(var(--unit) * 186.4);
|
|
141
|
+
box-sizing: border-box;
|
|
142
|
+
width: calc(var(--unit) * 20.2);
|
|
143
|
+
height: calc(var(--unit) * 20.2);
|
|
144
|
+
border: calc(var(--unit) * 1.6) solid rgb(236 229 216 / 0.45);
|
|
145
|
+
background: linear-gradient(45deg, transparent 30%, rgb(255 250 240 / 0.45) 68.75%, rgb(236 231 219) 68.75%)
|
|
146
|
+
padding-box;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* Behind its word, a warm light from the word's start out to 517.5 units, a thin bright streak along the row's middle in
|
|
150
|
+
a fainter haze, as the frame less its clean plate measures it */
|
|
151
|
+
.tab[aria-pressed="true"][data-v-6efaddd5]::after {
|
|
152
|
+
position: absolute;
|
|
153
|
+
z-index: -1;
|
|
154
|
+
top: 50%;
|
|
155
|
+
left: calc(var(--unit) * 217.5);
|
|
156
|
+
width: calc(var(--unit) * 300);
|
|
157
|
+
height: calc(var(--unit) * 90);
|
|
158
|
+
background:
|
|
159
|
+
radial-gradient(
|
|
160
|
+
closest-side,
|
|
161
|
+
rgb(255 240 200 / 0.4),
|
|
162
|
+
rgb(255 240 200 / 0.3) 35%,
|
|
163
|
+
rgb(255 240 200 / 0.17) 55%,
|
|
164
|
+
rgb(255 240 200 / 0.09) 75%,
|
|
165
|
+
transparent 95%
|
|
166
|
+
)
|
|
167
|
+
center / 100% calc(var(--unit) * 18) no-repeat,
|
|
168
|
+
radial-gradient(closest-side, rgb(255 240 200 / 0.14), rgb(255 240 200 / 0.08) 50%, transparent);
|
|
169
|
+
content: "";
|
|
170
|
+
transform: translateY(-50%);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* The keys stepping through the tabs: white caps 30.75 by 25 units with dark letters, an arrow over the W and under the
|
|
174
|
+
S, centred 148.9 units in from the frame's left */
|
|
175
|
+
.tab-keys[data-v-6efaddd5] {
|
|
176
|
+
position: absolute;
|
|
177
|
+
top: calc(var(--unit) * 126.75);
|
|
178
|
+
left: calc(var(--unit) * 133.5);
|
|
179
|
+
display: flex;
|
|
180
|
+
width: calc(var(--unit) * 30.75);
|
|
181
|
+
flex-direction: column;
|
|
182
|
+
align-items: center;
|
|
183
|
+
gap: calc(var(--unit) * 3.5);
|
|
184
|
+
}
|
|
185
|
+
.tab-keys[data-v-6efaddd5]::before,
|
|
186
|
+
.tab-keys[data-v-6efaddd5]::after {
|
|
187
|
+
width: calc(var(--unit) * 11.25);
|
|
188
|
+
height: calc(var(--unit) * 6);
|
|
189
|
+
background: #fdfdfd;
|
|
190
|
+
clip-path: polygon(50% 0, 100% 100%, 0 100%);
|
|
191
|
+
content: "";
|
|
192
|
+
}
|
|
193
|
+
.tab-keys[data-v-6efaddd5]::after {
|
|
194
|
+
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
|
195
|
+
}
|
|
196
|
+
.key[data-v-6efaddd5] {
|
|
197
|
+
display: grid;
|
|
198
|
+
width: 100%;
|
|
199
|
+
height: calc(var(--unit) * 25);
|
|
200
|
+
border-radius: calc(var(--unit) * 3);
|
|
201
|
+
background: #fdfdfd;
|
|
202
|
+
color: #2b2b2b;
|
|
203
|
+
font: inherit;
|
|
204
|
+
font-size: calc(var(--unit) * 20.5);
|
|
205
|
+
font-weight: 600;
|
|
206
|
+
line-height: 1;
|
|
207
|
+
place-items: center;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* The arrows stepping to the characters either side, centred down the frame's left and right edges, their heads 129.75
|
|
211
|
+
units from the edge and their backs 153.75 */
|
|
212
|
+
.step[data-v-6efaddd5] {
|
|
213
|
+
position: absolute;
|
|
214
|
+
top: calc(50% - var(--unit) * 21);
|
|
215
|
+
width: calc(var(--unit) * 32.25);
|
|
216
|
+
height: calc(var(--unit) * 41.25);
|
|
217
|
+
padding: 0;
|
|
218
|
+
border: none;
|
|
219
|
+
background: transparent;
|
|
220
|
+
cursor: inherit;
|
|
221
|
+
}
|
|
222
|
+
.step svg[data-v-6efaddd5] {
|
|
223
|
+
display: block;
|
|
224
|
+
width: 100%;
|
|
225
|
+
height: 100%;
|
|
226
|
+
}
|
|
227
|
+
.previous[data-v-6efaddd5] {
|
|
228
|
+
left: calc(var(--unit) * 129.75);
|
|
229
|
+
}
|
|
230
|
+
.next[data-v-6efaddd5] {
|
|
231
|
+
right: calc(var(--unit) * 129.75);
|
|
232
|
+
transform: scaleX(-1);
|
|
233
|
+
}
|
|
234
|
+
.arrow[data-v-6efaddd5] {
|
|
235
|
+
fill: rgb(236 229 216);
|
|
236
|
+
}
|
|
237
|
+
.mark[data-v-6efaddd5] {
|
|
238
|
+
fill: rgb(236 229 216 / 0.5);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* The panel's left edge sits at 2057 units of the 2580-unit frame and its right margin at 195 units */
|
|
242
|
+
.panel[data-v-6efaddd5] {
|
|
243
|
+
position: absolute;
|
|
244
|
+
top: calc(var(--unit) * 124);
|
|
245
|
+
right: calc(var(--unit) * 195);
|
|
246
|
+
bottom: calc(var(--unit) * 40);
|
|
247
|
+
width: calc(var(--unit) * 330);
|
|
248
|
+
overflow-y: auto;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* The Profile tab's stories and their text take the width the characters' row across the top leaves, from where it starts */
|
|
252
|
+
.character-menu[data-tab="Profile"] .panel[data-v-6efaddd5] {
|
|
253
|
+
left: calc(var(--unit) * 608);
|
|
254
|
+
width: auto;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.buttons[data-v-d4278b8b] {
|
|
258
|
+
position: absolute;
|
|
259
|
+
top: calc(var(--unit) * 859);
|
|
260
|
+
right: 0;
|
|
261
|
+
left: 0;
|
|
262
|
+
display: flex;
|
|
263
|
+
gap: calc(var(--unit) * 23);
|
|
264
|
+
}
|
|
265
|
+
.button[data-v-d4278b8b] {
|
|
266
|
+
flex: 1;
|
|
267
|
+
height: calc(var(--unit) * 52);
|
|
268
|
+
border-radius: calc(var(--unit) * 26);
|
|
269
|
+
background: rgb(236 229 216 / 0.85);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* Measured off the English PC client's Artifacts tab at 21:9, its settled frame at 157.5 seconds of session-2.mp4 (the
|
|
273
|
+
registered reference for it), in units from the panel's top: the details pill at 163, the set bonus block from 227
|
|
274
|
+
to 829 and the buttons at 859. The slots are drawn in the panel's top, which the game draws in the scene. Colours are
|
|
275
|
+
provisional */
|
|
276
|
+
.artifacts[data-v-d9a02adc] {
|
|
277
|
+
position: absolute;
|
|
278
|
+
inset: 0;
|
|
279
|
+
color: #fff;
|
|
280
|
+
}
|
|
281
|
+
.slots[data-v-d9a02adc] {
|
|
282
|
+
position: absolute;
|
|
283
|
+
top: calc(var(--unit) * 15);
|
|
284
|
+
right: 0;
|
|
285
|
+
left: 0;
|
|
286
|
+
display: flex;
|
|
287
|
+
margin: 0;
|
|
288
|
+
padding: 0;
|
|
289
|
+
gap: calc(var(--unit) * 10);
|
|
290
|
+
list-style: none;
|
|
291
|
+
}
|
|
292
|
+
.slot[data-v-d9a02adc] {
|
|
293
|
+
flex: 1;
|
|
294
|
+
height: calc(var(--unit) * 40);
|
|
295
|
+
border-radius: 50%;
|
|
296
|
+
background: rgb(0 0 0 / 0.2);
|
|
297
|
+
}
|
|
298
|
+
.slot.worn[data-v-d9a02adc] {
|
|
299
|
+
background: rgb(255 240 180 / 0.55);
|
|
300
|
+
box-shadow: 0 0 calc(var(--unit) * 8) rgb(255 240 180 / 0.6);
|
|
301
|
+
}
|
|
302
|
+
.details[data-v-d9a02adc] {
|
|
303
|
+
position: absolute;
|
|
304
|
+
top: calc(var(--unit) * 163);
|
|
305
|
+
right: 0;
|
|
306
|
+
left: 0;
|
|
307
|
+
height: calc(var(--unit) * 42);
|
|
308
|
+
border-radius: calc(var(--unit) * 21);
|
|
309
|
+
background: rgb(0 0 0 / 0.2);
|
|
310
|
+
}
|
|
311
|
+
.set-bonus[data-v-d9a02adc] {
|
|
312
|
+
position: absolute;
|
|
313
|
+
top: calc(var(--unit) * 227);
|
|
314
|
+
right: 0;
|
|
315
|
+
bottom: calc(var(--unit) * 80);
|
|
316
|
+
left: 0;
|
|
317
|
+
background: rgb(0 0 0 / 0.1);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Measured off the English PC client's Constellation tab at 21:9, its settled frame at 158.3 seconds of session-2.mp4
|
|
321
|
+
(the star map's right-hand list), in units from the panel's top left: each ring is 72 units across, its gold border 4
|
|
322
|
+
units wide with a 2-unit white band inside it, and the six are placed by CONSTELLATION_NODE_PLACES. Colours are provisional */
|
|
323
|
+
.constellations[data-v-59aca725] {
|
|
324
|
+
position: absolute;
|
|
325
|
+
inset: 0;
|
|
326
|
+
}
|
|
327
|
+
.nodes[data-v-59aca725] {
|
|
328
|
+
position: absolute;
|
|
329
|
+
inset: 0;
|
|
330
|
+
margin: 0;
|
|
331
|
+
padding: 0;
|
|
332
|
+
list-style: none;
|
|
333
|
+
}
|
|
334
|
+
.node[data-v-59aca725] {
|
|
335
|
+
position: absolute;
|
|
336
|
+
box-sizing: border-box;
|
|
337
|
+
width: calc(var(--unit) * 72);
|
|
338
|
+
height: calc(var(--unit) * 72);
|
|
339
|
+
border: calc(var(--unit) * 3) solid rgb(255 255 255 / 0.3);
|
|
340
|
+
border-radius: 50%;
|
|
341
|
+
}
|
|
342
|
+
.node.lit[data-v-59aca725] {
|
|
343
|
+
background: rgb(72 53 17);
|
|
344
|
+
border: calc(var(--unit) * 4) solid #ffea00;
|
|
345
|
+
box-shadow:
|
|
346
|
+
inset 0 0 0 calc(var(--unit) * 2) #fff8dc,
|
|
347
|
+
0 0 calc(var(--unit) * 6) rgb(255 180 40 / 0.6);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
/* Provisional: the list and the text share the panel as two columns, the list a third of its width. The frame's sizes and
|
|
351
|
+
colours are not measured yet, so they wait on the Profile tab's comparison */
|
|
352
|
+
.profile[data-v-d064a750] {
|
|
353
|
+
display: flex;
|
|
354
|
+
width: 100%;
|
|
355
|
+
height: 100%;
|
|
356
|
+
color: #fff;
|
|
357
|
+
}
|
|
358
|
+
.entries-column[data-v-d064a750] {
|
|
359
|
+
display: flex;
|
|
360
|
+
flex: 0 0 calc(var(--unit) * 260);
|
|
361
|
+
flex-direction: column;
|
|
362
|
+
}
|
|
363
|
+
.entries[data-v-d064a750] {
|
|
364
|
+
flex: 1;
|
|
365
|
+
min-height: 0;
|
|
366
|
+
margin: 0;
|
|
367
|
+
padding: 0;
|
|
368
|
+
overflow-y: auto;
|
|
369
|
+
list-style: none;
|
|
370
|
+
}
|
|
371
|
+
.entry[data-v-d064a750] {
|
|
372
|
+
display: block;
|
|
373
|
+
width: 100%;
|
|
374
|
+
margin-bottom: calc(var(--unit) * 8);
|
|
375
|
+
color: rgb(236 229 216 / 0.7);
|
|
376
|
+
cursor: inherit;
|
|
377
|
+
font: inherit;
|
|
378
|
+
text-align: start;
|
|
379
|
+
}
|
|
380
|
+
.entry[data-v-d064a750],
|
|
381
|
+
.namecard[data-v-d064a750] {
|
|
382
|
+
border: calc(var(--unit) * 1) solid rgb(236 229 216 / 0.4);
|
|
383
|
+
border-radius: calc(var(--unit) * 4);
|
|
384
|
+
background: rgb(20 40 70 / 0.5);
|
|
385
|
+
padding: calc(var(--unit) * 12) calc(var(--unit) * 16);
|
|
386
|
+
font-size: calc(var(--unit) * 22);
|
|
387
|
+
font-weight: 600;
|
|
388
|
+
}
|
|
389
|
+
.entry[aria-pressed="true"][data-v-d064a750] {
|
|
390
|
+
border-color: #7fd6e0;
|
|
391
|
+
color: #fff;
|
|
392
|
+
}
|
|
393
|
+
.entry[data-locked="true"][data-v-d064a750] {
|
|
394
|
+
opacity: 0.6;
|
|
395
|
+
}
|
|
396
|
+
.namecard[data-v-d064a750] {
|
|
397
|
+
margin: calc(var(--unit) * 16) 0 0;
|
|
398
|
+
}
|
|
399
|
+
.story[data-v-d064a750] {
|
|
400
|
+
flex: 1;
|
|
401
|
+
margin-left: calc(var(--unit) * 24);
|
|
402
|
+
overflow-y: auto;
|
|
403
|
+
}
|
|
404
|
+
.title[data-v-d064a750] {
|
|
405
|
+
margin: 0 0 calc(var(--unit) * 16);
|
|
406
|
+
font-size: calc(var(--unit) * 30);
|
|
407
|
+
font-weight: 700;
|
|
408
|
+
}
|
|
409
|
+
.text[data-v-d064a750] {
|
|
410
|
+
margin: 0;
|
|
411
|
+
font-size: calc(var(--unit) * 22);
|
|
412
|
+
line-height: 1.6;
|
|
413
|
+
white-space: pre-line;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* Measured off the English PC client's Talents tab at 21:9 (references/character-talents.png, 159 seconds), in units
|
|
417
|
+
from the panel's top: the three combat talents' rows sit 90 units apart from 29, each with its icon at the panel's
|
|
418
|
+
right edge. A pixel of that frame at 1440 high is 0.75 units. Colours are provisional */
|
|
419
|
+
.talents[data-v-c095bfc3] {
|
|
420
|
+
position: absolute;
|
|
421
|
+
inset: 0;
|
|
422
|
+
color: #fff;
|
|
423
|
+
}
|
|
424
|
+
.talent-list[data-v-c095bfc3] {
|
|
425
|
+
position: absolute;
|
|
426
|
+
top: calc(var(--unit) * 29);
|
|
427
|
+
right: 0;
|
|
428
|
+
left: 0;
|
|
429
|
+
margin: 0;
|
|
430
|
+
padding: 0;
|
|
431
|
+
list-style: none;
|
|
432
|
+
}
|
|
433
|
+
.talent[data-v-c095bfc3] {
|
|
434
|
+
display: flex;
|
|
435
|
+
justify-content: flex-end;
|
|
436
|
+
align-items: center;
|
|
437
|
+
height: calc(var(--unit) * 60);
|
|
438
|
+
margin-bottom: calc(var(--unit) * 30);
|
|
439
|
+
gap: calc(var(--unit) * 16);
|
|
440
|
+
}
|
|
441
|
+
.level[data-v-c095bfc3] {
|
|
442
|
+
font-size: calc(var(--unit) * 26);
|
|
443
|
+
font-weight: 600;
|
|
444
|
+
text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
|
|
445
|
+
}
|
|
446
|
+
.icon[data-v-c095bfc3] {
|
|
447
|
+
width: calc(var(--unit) * 40);
|
|
448
|
+
height: calc(var(--unit) * 40);
|
|
449
|
+
border-radius: 50%;
|
|
450
|
+
background: rgb(255 255 255 / 0.25);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
/* Measured off the English PC client's Weapons tab at 21:9 (references/character-weapons.png, 156 seconds), in units
|
|
454
|
+
from the panel's top: a pixel of that frame at 1440 high is 0.75 units. The name's line sits 15 units down, the two
|
|
455
|
+
stat rows at 101 and 135, the stars at 206, the level at 244, the refinement at 289 and the buttons at 859. Their
|
|
456
|
+
colours are provisional, sampled off the frame's darker panel glass */
|
|
457
|
+
.weapons[data-v-bf484c68] {
|
|
458
|
+
position: absolute;
|
|
459
|
+
inset: 0;
|
|
460
|
+
color: #fff;
|
|
461
|
+
}
|
|
462
|
+
.name[data-v-bf484c68] {
|
|
463
|
+
position: absolute;
|
|
464
|
+
top: calc(var(--unit) * 15);
|
|
465
|
+
right: 0;
|
|
466
|
+
left: 0;
|
|
467
|
+
margin: 0;
|
|
468
|
+
font-size: calc(var(--unit) * 30);
|
|
469
|
+
font-weight: 600;
|
|
470
|
+
line-height: calc(var(--unit) * 36);
|
|
471
|
+
text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
|
|
472
|
+
}
|
|
473
|
+
.stars[data-v-bf484c68] {
|
|
474
|
+
position: absolute;
|
|
475
|
+
top: calc(var(--unit) * 206);
|
|
476
|
+
left: 0;
|
|
477
|
+
display: flex;
|
|
478
|
+
margin: 0;
|
|
479
|
+
gap: calc(var(--unit) * 4);
|
|
480
|
+
}
|
|
481
|
+
.star[data-v-bf484c68] {
|
|
482
|
+
width: calc(var(--unit) * 20);
|
|
483
|
+
height: calc(var(--unit) * 20);
|
|
484
|
+
background: #f5c542;
|
|
485
|
+
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
|
|
486
|
+
}
|
|
487
|
+
.stats[data-v-bf484c68] {
|
|
488
|
+
position: absolute;
|
|
489
|
+
top: calc(var(--unit) * 101);
|
|
490
|
+
right: 0;
|
|
491
|
+
left: 0;
|
|
492
|
+
margin: 0;
|
|
493
|
+
padding: 0;
|
|
494
|
+
list-style: none;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
/* Each row is a translucent band its value sits at the right of, on the game's 34-unit pitch */
|
|
498
|
+
.stat[data-v-bf484c68] {
|
|
499
|
+
display: flex;
|
|
500
|
+
justify-content: flex-end;
|
|
501
|
+
align-items: center;
|
|
502
|
+
height: calc(var(--unit) * 27);
|
|
503
|
+
margin-bottom: calc(var(--unit) * 7);
|
|
504
|
+
padding: 0 calc(var(--unit) * 16);
|
|
505
|
+
border-radius: calc(var(--unit) * 4);
|
|
506
|
+
background: rgb(0 0 0 / 0.2);
|
|
507
|
+
font-size: calc(var(--unit) * 26);
|
|
508
|
+
font-weight: 600;
|
|
509
|
+
}
|
|
510
|
+
.level[data-v-bf484c68] {
|
|
511
|
+
position: absolute;
|
|
512
|
+
top: calc(var(--unit) * 244);
|
|
513
|
+
right: 0;
|
|
514
|
+
left: 0;
|
|
515
|
+
display: flex;
|
|
516
|
+
align-items: center;
|
|
517
|
+
margin: 0;
|
|
518
|
+
gap: calc(var(--unit) * 6);
|
|
519
|
+
font-size: calc(var(--unit) * 24);
|
|
520
|
+
font-weight: 600;
|
|
521
|
+
}
|
|
522
|
+
.level-text[data-v-bf484c68] {
|
|
523
|
+
padding: 0 calc(var(--unit) * 8);
|
|
524
|
+
border-radius: calc(var(--unit) * 4);
|
|
525
|
+
background: rgb(0 0 0 / 0.45);
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
/* The six ascension phases, each a small star the phases reached light */
|
|
529
|
+
.spark[data-v-bf484c68] {
|
|
530
|
+
width: calc(var(--unit) * 14);
|
|
531
|
+
height: calc(var(--unit) * 14);
|
|
532
|
+
background: rgb(255 255 255 / 0.3);
|
|
533
|
+
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
|
|
534
|
+
}
|
|
535
|
+
.spark.lit[data-v-bf484c68] {
|
|
536
|
+
background: #fff;
|
|
537
|
+
}
|
|
538
|
+
.refinement[data-v-bf484c68] {
|
|
539
|
+
position: absolute;
|
|
540
|
+
top: calc(var(--unit) * 289);
|
|
541
|
+
right: 0;
|
|
542
|
+
left: 0;
|
|
543
|
+
margin: 0;
|
|
544
|
+
color: #f0d27a;
|
|
545
|
+
font-size: calc(var(--unit) * 26);
|
|
546
|
+
font-weight: 600;
|
|
547
|
+
line-height: calc(var(--unit) * 19);
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.crafting-screen[data-v-501eda08] {
|
|
551
|
+
position: absolute;
|
|
552
|
+
inset: 0;
|
|
553
|
+
color: #fff7ea;
|
|
554
|
+
}
|
|
555
|
+
.head[data-v-501eda08] {
|
|
556
|
+
position: absolute;
|
|
557
|
+
inset: 0 0 auto;
|
|
558
|
+
height: calc(var(--unit) * 95);
|
|
559
|
+
background: #161c31;
|
|
560
|
+
}
|
|
561
|
+
.title[data-v-501eda08] {
|
|
562
|
+
position: absolute;
|
|
563
|
+
top: calc(var(--unit) * 30);
|
|
564
|
+
left: calc(var(--unit) * 145);
|
|
565
|
+
margin: 0;
|
|
566
|
+
font-size: calc(var(--unit) * 22);
|
|
567
|
+
line-height: calc(var(--unit) * 32);
|
|
568
|
+
}
|
|
569
|
+
.coins[data-v-501eda08] {
|
|
570
|
+
position: absolute;
|
|
571
|
+
top: calc(var(--unit) * 34);
|
|
572
|
+
left: calc(var(--unit) * 1650);
|
|
573
|
+
margin: 0;
|
|
574
|
+
font-size: calc(var(--unit) * 22);
|
|
575
|
+
line-height: calc(var(--unit) * 26);
|
|
576
|
+
}
|
|
577
|
+
.coin[data-v-501eda08] {
|
|
578
|
+
position: absolute;
|
|
579
|
+
top: calc(var(--unit) * 4);
|
|
580
|
+
left: calc(var(--unit) * -30);
|
|
581
|
+
width: calc(var(--unit) * 20);
|
|
582
|
+
height: calc(var(--unit) * 20);
|
|
583
|
+
border-radius: 50%;
|
|
584
|
+
background: #e6b84a;
|
|
585
|
+
}
|
|
586
|
+
.close[data-v-501eda08] {
|
|
587
|
+
position: absolute;
|
|
588
|
+
top: calc(var(--unit) * 18);
|
|
589
|
+
left: calc(var(--unit) * 1828);
|
|
590
|
+
width: calc(var(--unit) * 56);
|
|
591
|
+
height: calc(var(--unit) * 56);
|
|
592
|
+
padding: 0;
|
|
593
|
+
border: none;
|
|
594
|
+
border-radius: 50%;
|
|
595
|
+
background: #fdfdfd;
|
|
596
|
+
box-shadow: 0 0 calc(var(--unit) * 3) calc(var(--unit) * 1) rgb(0 0 0 / 0.3);
|
|
597
|
+
cursor: inherit;
|
|
598
|
+
}
|
|
599
|
+
.close svg[data-v-501eda08] {
|
|
600
|
+
width: calc(var(--unit) * 24);
|
|
601
|
+
height: calc(var(--unit) * 24);
|
|
602
|
+
fill: none;
|
|
603
|
+
stroke: #212121;
|
|
604
|
+
stroke-linecap: round;
|
|
605
|
+
stroke-width: 3;
|
|
606
|
+
}
|
|
607
|
+
.tabs[data-v-501eda08] {
|
|
608
|
+
position: absolute;
|
|
609
|
+
top: calc(var(--unit) * 24);
|
|
610
|
+
left: calc(var(--unit) * 822);
|
|
611
|
+
display: flex;
|
|
612
|
+
margin: 0;
|
|
613
|
+
padding: 0;
|
|
614
|
+
list-style: none;
|
|
615
|
+
}
|
|
616
|
+
.tab[data-v-501eda08] {
|
|
617
|
+
width: calc(var(--unit) * 96);
|
|
618
|
+
height: calc(var(--unit) * 68);
|
|
619
|
+
padding: 0;
|
|
620
|
+
border: none;
|
|
621
|
+
background: none;
|
|
622
|
+
color: inherit;
|
|
623
|
+
cursor: inherit;
|
|
624
|
+
}
|
|
625
|
+
.tab[aria-pressed="true"][data-v-501eda08] {
|
|
626
|
+
border-bottom: calc(var(--unit) * 4) solid #e8d9b0;
|
|
627
|
+
}
|
|
628
|
+
.list[data-v-501eda08] {
|
|
629
|
+
position: absolute;
|
|
630
|
+
top: calc(var(--unit) * 120);
|
|
631
|
+
left: calc(var(--unit) * 66);
|
|
632
|
+
width: calc(var(--unit) * 580);
|
|
633
|
+
}
|
|
634
|
+
.recipes[data-v-501eda08] {
|
|
635
|
+
display: grid;
|
|
636
|
+
grid-template-columns: repeat(4, calc(var(--unit) * 127));
|
|
637
|
+
gap: calc(var(--unit) * 21) calc(var(--unit) * 19);
|
|
638
|
+
margin: 0;
|
|
639
|
+
padding: 0;
|
|
640
|
+
list-style: none;
|
|
641
|
+
}
|
|
642
|
+
.recipe[data-v-501eda08] {
|
|
643
|
+
position: relative;
|
|
644
|
+
width: 100%;
|
|
645
|
+
height: calc(var(--unit) * 152);
|
|
646
|
+
padding: 0;
|
|
647
|
+
border: none;
|
|
648
|
+
border-radius: calc(var(--unit) * 3);
|
|
649
|
+
background: #54658c;
|
|
650
|
+
color: inherit;
|
|
651
|
+
cursor: inherit;
|
|
652
|
+
}
|
|
653
|
+
.recipe[aria-pressed="true"][data-v-501eda08] {
|
|
654
|
+
outline: calc(var(--unit) * 2) solid #fdfdfd;
|
|
655
|
+
}
|
|
656
|
+
.recipe-name[data-v-501eda08] {
|
|
657
|
+
position: absolute;
|
|
658
|
+
right: calc(var(--unit) * 4);
|
|
659
|
+
bottom: calc(var(--unit) * 4);
|
|
660
|
+
left: calc(var(--unit) * 4);
|
|
661
|
+
overflow: hidden;
|
|
662
|
+
font-size: calc(var(--unit) * 17);
|
|
663
|
+
line-height: calc(var(--unit) * 20);
|
|
664
|
+
text-align: center;
|
|
665
|
+
text-overflow: ellipsis;
|
|
666
|
+
white-space: nowrap;
|
|
667
|
+
}
|
|
668
|
+
.detail[data-v-501eda08] {
|
|
669
|
+
position: absolute;
|
|
670
|
+
inset: 0;
|
|
671
|
+
}
|
|
672
|
+
.recipe-title[data-v-501eda08] {
|
|
673
|
+
position: absolute;
|
|
674
|
+
top: calc(var(--unit) * 113);
|
|
675
|
+
left: calc(var(--unit) * 1020);
|
|
676
|
+
width: calc(var(--unit) * 570);
|
|
677
|
+
margin: 0;
|
|
678
|
+
font-size: calc(var(--unit) * 28);
|
|
679
|
+
font-weight: 600;
|
|
680
|
+
line-height: calc(var(--unit) * 36);
|
|
681
|
+
text-align: center;
|
|
682
|
+
}
|
|
683
|
+
.materials-band[data-v-501eda08] {
|
|
684
|
+
position: absolute;
|
|
685
|
+
top: calc(var(--unit) * 745);
|
|
686
|
+
left: calc(var(--unit) * 735);
|
|
687
|
+
width: calc(var(--unit) * 1143);
|
|
688
|
+
height: calc(var(--unit) * 213);
|
|
689
|
+
background: #3e4860;
|
|
690
|
+
}
|
|
691
|
+
.materials-label[data-v-501eda08] {
|
|
692
|
+
position: absolute;
|
|
693
|
+
top: calc(var(--unit) * 756);
|
|
694
|
+
left: calc(var(--unit) * 788);
|
|
695
|
+
margin: 0;
|
|
696
|
+
font-size: calc(var(--unit) * 20);
|
|
697
|
+
line-height: calc(var(--unit) * 24);
|
|
698
|
+
}
|
|
699
|
+
.materials[data-v-501eda08] {
|
|
700
|
+
position: absolute;
|
|
701
|
+
top: calc(var(--unit) * 810);
|
|
702
|
+
left: calc(var(--unit) * 983);
|
|
703
|
+
display: flex;
|
|
704
|
+
gap: calc(var(--unit) * 24);
|
|
705
|
+
margin: 0;
|
|
706
|
+
padding: 0;
|
|
707
|
+
list-style: none;
|
|
708
|
+
}
|
|
709
|
+
.material[data-v-501eda08] {
|
|
710
|
+
display: grid;
|
|
711
|
+
width: calc(var(--unit) * 112);
|
|
712
|
+
height: calc(var(--unit) * 132);
|
|
713
|
+
background: #4d6786;
|
|
714
|
+
font-size: calc(var(--unit) * 18);
|
|
715
|
+
place-items: end center;
|
|
716
|
+
}
|
|
717
|
+
.amount[data-v-501eda08] {
|
|
718
|
+
position: absolute;
|
|
719
|
+
top: calc(var(--unit) * 666);
|
|
720
|
+
left: calc(var(--unit) * 1120);
|
|
721
|
+
width: calc(var(--unit) * 365);
|
|
722
|
+
height: calc(var(--unit) * 14);
|
|
723
|
+
margin: 0;
|
|
724
|
+
appearance: none;
|
|
725
|
+
background: transparent;
|
|
726
|
+
cursor: inherit;
|
|
727
|
+
}
|
|
728
|
+
.amount[data-v-501eda08]::-webkit-slider-runnable-track {
|
|
729
|
+
height: calc(var(--unit) * 4);
|
|
730
|
+
background: #2d4159;
|
|
731
|
+
}
|
|
732
|
+
.amount[data-v-501eda08]::-webkit-slider-thumb {
|
|
733
|
+
width: calc(var(--unit) * 14);
|
|
734
|
+
height: calc(var(--unit) * 14);
|
|
735
|
+
margin-top: calc(var(--unit) * -5);
|
|
736
|
+
border-radius: calc(var(--unit) * 2);
|
|
737
|
+
background: #fff7ea;
|
|
738
|
+
transform: rotate(45deg);
|
|
739
|
+
appearance: none;
|
|
740
|
+
}
|
|
741
|
+
.crafted[data-v-501eda08] {
|
|
742
|
+
position: absolute;
|
|
743
|
+
top: calc(var(--unit) * 622);
|
|
744
|
+
left: calc(var(--unit) * 1020);
|
|
745
|
+
width: calc(var(--unit) * 570);
|
|
746
|
+
margin: 0;
|
|
747
|
+
font-size: calc(var(--unit) * 22);
|
|
748
|
+
line-height: calc(var(--unit) * 26);
|
|
749
|
+
text-align: center;
|
|
750
|
+
}
|
|
751
|
+
.required[data-v-501eda08] {
|
|
752
|
+
position: absolute;
|
|
753
|
+
top: calc(var(--unit) * 700);
|
|
754
|
+
left: calc(var(--unit) * 1020);
|
|
755
|
+
width: calc(var(--unit) * 570);
|
|
756
|
+
margin: 0;
|
|
757
|
+
font-size: calc(var(--unit) * 22);
|
|
758
|
+
line-height: calc(var(--unit) * 26);
|
|
759
|
+
text-align: center;
|
|
760
|
+
}
|
|
761
|
+
.craft[data-v-501eda08] {
|
|
762
|
+
position: absolute;
|
|
763
|
+
top: calc(var(--unit) * 990);
|
|
764
|
+
left: calc(var(--unit) * 1636);
|
|
765
|
+
width: calc(var(--unit) * 224);
|
|
766
|
+
height: calc(var(--unit) * 50);
|
|
767
|
+
padding: 0;
|
|
768
|
+
border: none;
|
|
769
|
+
border-radius: calc(var(--unit) * 4);
|
|
770
|
+
background: #fff7ea;
|
|
771
|
+
color: #212121;
|
|
772
|
+
font-size: calc(var(--unit) * 22);
|
|
773
|
+
cursor: inherit;
|
|
774
|
+
}
|
|
775
|
+
.crafters[data-v-501eda08] {
|
|
776
|
+
position: absolute;
|
|
777
|
+
top: calc(var(--unit) * 808);
|
|
778
|
+
left: calc(var(--unit) * 1517);
|
|
779
|
+
width: calc(var(--unit) * 111);
|
|
780
|
+
margin: 0;
|
|
781
|
+
padding: 0;
|
|
782
|
+
list-style: none;
|
|
783
|
+
}
|
|
784
|
+
.crafter[data-v-501eda08] {
|
|
785
|
+
position: relative;
|
|
786
|
+
width: 100%;
|
|
787
|
+
height: calc(var(--unit) * 134);
|
|
788
|
+
padding: 0;
|
|
789
|
+
border: none;
|
|
790
|
+
background: #3b4558;
|
|
791
|
+
color: inherit;
|
|
792
|
+
cursor: inherit;
|
|
793
|
+
}
|
|
794
|
+
.crafter[aria-pressed="true"][data-v-501eda08] {
|
|
795
|
+
outline: calc(var(--unit) * 2) solid #fdfdfd;
|
|
796
|
+
}
|
|
797
|
+
.crafter-name[data-v-501eda08] {
|
|
798
|
+
position: absolute;
|
|
799
|
+
right: 0;
|
|
800
|
+
bottom: calc(var(--unit) * 4);
|
|
801
|
+
left: 0;
|
|
802
|
+
font-size: calc(var(--unit) * 18);
|
|
803
|
+
line-height: calc(var(--unit) * 22);
|
|
804
|
+
text-align: center;
|
|
805
|
+
}
|
|
806
|
+
.tab-name[data-v-501eda08] {
|
|
807
|
+
position: absolute;
|
|
808
|
+
width: 1px;
|
|
809
|
+
height: 1px;
|
|
810
|
+
overflow: hidden;
|
|
811
|
+
clip-path: inset(50%);
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
/* The parent places the button and may pad it, so these yield to any rule of its own */
|
|
815
|
+
:where(.game-button[data-v-cab29bfa]) {
|
|
816
|
+
position: relative;
|
|
817
|
+
padding: 0;
|
|
818
|
+
border: none;
|
|
819
|
+
background: none;
|
|
820
|
+
color: inherit;
|
|
821
|
+
cursor: inherit;
|
|
822
|
+
font: inherit;
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
/* Each state is reached over its own crossfade: the duration is the state's being entered, so a hover fades in over
|
|
826
|
+
The hover's and out over the rest's, and a press shows at once */
|
|
827
|
+
.game-button[data-v-cab29bfa] {
|
|
828
|
+
--state-duration: var(--v8de8a9a0);
|
|
829
|
+
transition: color var(--state-duration);
|
|
830
|
+
}
|
|
831
|
+
.game-button[data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
|
|
832
|
+
--state-duration: var(--v4f7d0248);
|
|
833
|
+
}
|
|
834
|
+
.game-button[data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
|
|
835
|
+
--state-duration: 0s;
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
/* The side bar's icon, gold at rest. Hovered, a translucent navy disc 65 units across lights behind it, centred on its
|
|
839
|
+
Ink, and the icon turns cream and grows by 1.12, its ink's area fitted at rest and hovered: the current English PC
|
|
840
|
+
Client's settings gear at 1080 high (`yt-5EmJX_RyuY8-menu-settings` at 9.8 and 10.5 seconds). Pressed, the disc
|
|
841
|
+
Turns cream and the icon ink, falling back to its resting size, the press's smaller click: the same gear held at 10.65
|
|
842
|
+
Seconds, its ink's area 1.01 of its rest's. The disc's colour is fitted over two side bars' greens, the same
|
|
843
|
+
Recording's and a 2024 one's (`yt-kIDee7nyD0w-menu-quit-prompt`) */
|
|
844
|
+
.game-button[data-kind="Disc"][data-v-cab29bfa] {
|
|
845
|
+
isolation: isolate;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
/* At zero specificity, so a parent sets the icon's colour at rest where it places the button, as the rest of the
|
|
849
|
+
Button yields */
|
|
850
|
+
:where(.game-button[data-kind="Disc"][data-v-cab29bfa]) {
|
|
851
|
+
color: var(--v5ff883e5);
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
/* Behind everything the button holds, which its own layer keeps above it however it is placed */
|
|
855
|
+
.game-button[data-kind="Disc"][data-v-cab29bfa]::before {
|
|
856
|
+
content: "";
|
|
857
|
+
position: absolute;
|
|
858
|
+
z-index: -1;
|
|
859
|
+
top: 50%;
|
|
860
|
+
left: 50%;
|
|
861
|
+
width: calc(var(--unit) * 65);
|
|
862
|
+
aspect-ratio: 1;
|
|
863
|
+
border-radius: 50%;
|
|
864
|
+
translate: -50% -50%;
|
|
865
|
+
transition: background-color var(--state-duration);
|
|
866
|
+
}
|
|
867
|
+
.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
|
|
868
|
+
transition: scale var(--state-duration);
|
|
869
|
+
}
|
|
870
|
+
.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
|
|
871
|
+
outline: none;
|
|
872
|
+
color: var(--c23e4506);
|
|
873
|
+
}
|
|
874
|
+
.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before {
|
|
875
|
+
background-color: rgb(30 49 63 / 0.5);
|
|
876
|
+
}
|
|
877
|
+
.game-button[data-kind="Disc"]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) > [data-v-cab29bfa-s] {
|
|
878
|
+
scale: 1.12;
|
|
879
|
+
}
|
|
880
|
+
.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
|
|
881
|
+
color: var(--v7defe8be);
|
|
882
|
+
}
|
|
883
|
+
.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
|
|
884
|
+
background-color: var(--c23e4506);
|
|
885
|
+
}
|
|
886
|
+
.game-button[data-kind="Disc"]:enabled:is(:active, [data-interaction-state="Pressed"] *) > [data-v-cab29bfa-s] {
|
|
887
|
+
scale: 1;
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
/* An unbuilt screen's button, which the game never has, is drawn faded and answers nothing */
|
|
891
|
+
.game-button[data-kind="Disc"][data-v-cab29bfa]:disabled {
|
|
892
|
+
opacity: 0.4;
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
/* The lit icon's name, in a dark slate box 31 units high, centred on the icon and starting 49.5 units right of its
|
|
896
|
+
Centre, 5 past the side bar's edge, its words 17 units to their caps: the same recording's "Settings", read once it
|
|
897
|
+
Has settled at 10.5 seconds, where the box reads the same over the panel's cream and over a tile */
|
|
898
|
+
.tip[data-v-cab29bfa] {
|
|
899
|
+
position: absolute;
|
|
900
|
+
top: 50%;
|
|
901
|
+
left: calc(50% + var(--unit) * 49.5);
|
|
902
|
+
padding: 0 calc(var(--unit) * 9);
|
|
903
|
+
border-radius: calc(var(--unit) * 3);
|
|
904
|
+
background: #4d5063;
|
|
905
|
+
color: #e6eaf0;
|
|
906
|
+
font-size: calc(var(--unit) * 24);
|
|
907
|
+
font-weight: 600;
|
|
908
|
+
line-height: calc(var(--unit) * 31);
|
|
909
|
+
white-space: nowrap;
|
|
910
|
+
opacity: 0;
|
|
911
|
+
pointer-events: none;
|
|
912
|
+
transition: opacity var(--state-duration);
|
|
913
|
+
translate: 0 -50%;
|
|
914
|
+
}
|
|
915
|
+
.game-button:enabled:is(:hover, :focus-visible, :active, [data-interaction-state] *) > .tip[data-v-cab29bfa] {
|
|
916
|
+
opacity: 1;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
/* A row, the game's rectangle, lit by a tint laid over its own box and behind its words, as a disc is: hovered or focused,
|
|
920
|
+
pressed at once, or held selected by its parent's aria-selected at the hover's strength. Provisional, see the colours */
|
|
921
|
+
.game-button[data-kind="Row"][data-v-cab29bfa] {
|
|
922
|
+
isolation: isolate;
|
|
923
|
+
}
|
|
924
|
+
.game-button[data-kind="Row"][data-v-cab29bfa]::before {
|
|
925
|
+
content: "";
|
|
926
|
+
position: absolute;
|
|
927
|
+
z-index: -1;
|
|
928
|
+
inset: 0;
|
|
929
|
+
border-radius: inherit;
|
|
930
|
+
background-color: var(--v78a9c41c);
|
|
931
|
+
opacity: 0;
|
|
932
|
+
pointer-events: none;
|
|
933
|
+
transition: opacity var(--state-duration);
|
|
934
|
+
}
|
|
935
|
+
.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before,
|
|
936
|
+
.game-button[data-kind="Row"][aria-selected="true"][data-v-cab29bfa]::before {
|
|
937
|
+
opacity: 1;
|
|
938
|
+
}
|
|
939
|
+
.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
|
|
940
|
+
background-color: var(--v77c60e0e);
|
|
941
|
+
opacity: 1;
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
/* The cream pill, read off the game's own (block 07356235: the quit prompt's choices are its option pill, and a dialog's
|
|
945
|
+
Confirm its brighter twin), its look measured on a dialog's Confirm at 1080 high (`yt-5EmJX_RyuY8-menu-settings` from
|
|
946
|
+
140.5 seconds). At rest its words are the game's ink, inside a 3 unit pale rim and a 3 unit darker band within it,
|
|
947
|
+
The pill's own bevel read off the wiki's crop of the quit prompt, and a faint dark shadow 7 units round it. Hovered,
|
|
948
|
+
A white ring lights over its edge, 1 unit outside it and 2 within, its shadow turning a faint white glow; it holds
|
|
949
|
+
Its size, the ring alone reaching past it */
|
|
950
|
+
.game-button[data-kind="Pill"][data-v-cab29bfa] {
|
|
951
|
+
--state-duration: var(--v7a0541ee);
|
|
952
|
+
border-radius: calc(infinity * 1px);
|
|
953
|
+
background-color: var(--c23e4506);
|
|
954
|
+
box-shadow:
|
|
955
|
+
0 0 0 0 rgb(255 255 255 / 0),
|
|
956
|
+
inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
|
|
957
|
+
inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
|
|
958
|
+
inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
|
|
959
|
+
0 0 calc(var(--unit) * 7) rgb(17 17 17 / 0.1);
|
|
960
|
+
color: var(--v7defe8be);
|
|
961
|
+
transition-duration: var(--state-duration);
|
|
962
|
+
transition-property: background-color, box-shadow, color;
|
|
963
|
+
}
|
|
964
|
+
.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
|
|
965
|
+
outline: none;
|
|
966
|
+
box-shadow:
|
|
967
|
+
0 0 0 calc(var(--unit) * 1) #fff,
|
|
968
|
+
inset 0 0 0 calc(var(--unit) * 2) #fff,
|
|
969
|
+
inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
|
|
970
|
+
inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
|
|
971
|
+
0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.125);
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
/* Pressed, the pill's cream is tinted to slate at half alpha, its bevel lost in it, and from 2 units inside its edge a
|
|
975
|
+
Gold light adds over it, as the game adds it, fading from full to half as the words turn from black to cream over the
|
|
976
|
+
Press's clip. The game's light adds onto the world, which a screen's own layer cannot reach, so the gold is drawn
|
|
977
|
+
Over the world at half alpha in the colour the sum settles to, the slate and its light together, which matches the
|
|
978
|
+
Game's over any world but for red, 12 short where the sum passes white; the clip's first frame is the sum alone,
|
|
979
|
+
Opaque. The words show over the light only when the pill's content is positioned, as a laid out label is not */
|
|
980
|
+
.game-button[data-kind="Pill"][data-v-cab29bfa]::before {
|
|
981
|
+
content: "";
|
|
982
|
+
position: absolute;
|
|
983
|
+
inset: 0;
|
|
984
|
+
border: calc(var(--unit) * 2) solid rgb(73 83 103 / 0.5);
|
|
985
|
+
border-radius: inherit;
|
|
986
|
+
background: rgb(255 243 183 / 0.5) padding-box;
|
|
987
|
+
opacity: 0;
|
|
988
|
+
pointer-events: none;
|
|
989
|
+
transition: opacity var(--state-duration);
|
|
990
|
+
}
|
|
991
|
+
.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
|
|
992
|
+
background-color: transparent;
|
|
993
|
+
box-shadow:
|
|
994
|
+
0 0 0 0 rgb(255 255 255 / 0),
|
|
995
|
+
inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
|
|
996
|
+
inset 0 0 0 calc(var(--unit) * 3) rgb(241 237 229 / 0),
|
|
997
|
+
inset 0 0 0 calc(var(--unit) * 6) rgb(230 225 213 / 0),
|
|
998
|
+
0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.1);
|
|
999
|
+
color: var(--c23e4506);
|
|
1000
|
+
animation: pill-press-words-cab29bfa var(--v307a3362) var(--v0673242b);
|
|
1001
|
+
}
|
|
1002
|
+
.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
|
|
1003
|
+
opacity: 1;
|
|
1004
|
+
animation: pill-press-light-cab29bfa var(--v307a3362) var(--v0673242b);
|
|
1005
|
+
}
|
|
1006
|
+
@keyframes pill-press-words-cab29bfa {
|
|
1007
|
+
from {
|
|
1008
|
+
color: #000;
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
@keyframes pill-press-light-cab29bfa {
|
|
1012
|
+
from {
|
|
1013
|
+
background-color: rgb(241 211 142);
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
/* The dialogue reply's pill: a fifth black over the scene at rest, its words white, and lit as a cream-white pill with slate
|
|
1018
|
+
Words when hovered, focused or selected by its screen. Its press holds that lit look at once. Provisional past the rest, see
|
|
1019
|
+
The constants */
|
|
1020
|
+
.game-button[data-kind="Reply"][data-v-cab29bfa] {
|
|
1021
|
+
--state-duration: var(--v8de8a9a0);
|
|
1022
|
+
border-radius: calc(var(--unit) * 23);
|
|
1023
|
+
background-color: var(--v40afb3ee);
|
|
1024
|
+
color: #fff;
|
|
1025
|
+
font-size: calc(var(--unit) * 26);
|
|
1026
|
+
font-weight: 600;
|
|
1027
|
+
letter-spacing: calc(var(--unit) * 0.5);
|
|
1028
|
+
transition-duration: var(--state-duration);
|
|
1029
|
+
transition-property: background-color, color;
|
|
1030
|
+
}
|
|
1031
|
+
.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
|
|
1032
|
+
--state-duration: var(--v4f7d0248);
|
|
1033
|
+
outline: none;
|
|
1034
|
+
background-color: var(--v5683177c);
|
|
1035
|
+
color: var(--a79a636e);
|
|
1036
|
+
}
|
|
1037
|
+
.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
|
|
1038
|
+
--state-duration: 0s;
|
|
1039
|
+
background-color: var(--v5683177c);
|
|
1040
|
+
color: var(--a79a636e);
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
/* The game draws no state for a plain button, so a keyboard's focus is ringed in the white its pills light in */
|
|
1044
|
+
.game-button[data-kind="Plain"][data-v-cab29bfa]:focus-visible {
|
|
1045
|
+
outline: calc(var(--unit) * 3) solid #fff;
|
|
1046
|
+
outline-offset: calc(var(--unit) * -2);
|
|
1047
|
+
}
|
|
1048
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1049
|
+
.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
|
|
1050
|
+
transition: none;
|
|
1051
|
+
}
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
.dialogue-screen[data-v-da022ee0] {
|
|
1055
|
+
position: absolute;
|
|
1056
|
+
inset: 0;
|
|
1057
|
+
}
|
|
1058
|
+
.band[data-v-da022ee0] {
|
|
1059
|
+
position: absolute;
|
|
1060
|
+
inset: auto 0 0;
|
|
1061
|
+
display: flex;
|
|
1062
|
+
height: calc(var(--unit) * 300);
|
|
1063
|
+
box-sizing: border-box;
|
|
1064
|
+
flex-direction: column;
|
|
1065
|
+
align-items: center;
|
|
1066
|
+
padding-top: calc(var(--unit) * 42);
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
/* Provisional: a narration, which names no speaker and no role, is drawn centred on a black screen, the middle of the
|
|
1070
|
+
screen being a best estimate of where the game's black screen sets its line, until a recording of one is read for
|
|
1071
|
+
its place and darkness */
|
|
1072
|
+
.band.narration[data-v-da022ee0] {
|
|
1073
|
+
inset: 0;
|
|
1074
|
+
height: auto;
|
|
1075
|
+
justify-content: center;
|
|
1076
|
+
padding-top: 0;
|
|
1077
|
+
background: #000;
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
/* The name's gold is the brightest saturated pixel of its letters in the English client's recording */
|
|
1081
|
+
.speaker[data-v-da022ee0] {
|
|
1082
|
+
margin: 0;
|
|
1083
|
+
color: #ffc700;
|
|
1084
|
+
font-size: calc(var(--unit) * 30);
|
|
1085
|
+
font-weight: 600;
|
|
1086
|
+
line-height: 1;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
/* The role under the name in the recording's smaller gold; its slot is the line's offset between a speaker with one and
|
|
1090
|
+
one without, so the line keeps its place either way */
|
|
1091
|
+
.role[data-v-da022ee0] {
|
|
1092
|
+
margin: 0;
|
|
1093
|
+
color: #ffc700;
|
|
1094
|
+
font-size: calc(var(--unit) * 13);
|
|
1095
|
+
font-weight: 600;
|
|
1096
|
+
line-height: calc(var(--unit) * 16.5);
|
|
1097
|
+
}
|
|
1098
|
+
.line[data-v-da022ee0] {
|
|
1099
|
+
max-width: calc(var(--unit) * 1200);
|
|
1100
|
+
margin: calc(var(--unit) * 13.5) 0 0;
|
|
1101
|
+
color: #fff;
|
|
1102
|
+
font-size: calc(var(--unit) * 26);
|
|
1103
|
+
font-weight: 600;
|
|
1104
|
+
letter-spacing: calc(var(--unit) * 2.3);
|
|
1105
|
+
line-height: calc(var(--unit) * 32);
|
|
1106
|
+
text-align: center;
|
|
1107
|
+
}
|
|
1108
|
+
.unrevealed[data-v-da022ee0] {
|
|
1109
|
+
visibility: hidden;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
/* The whole line once, for a screen reader, which the written-out halves are hidden from */
|
|
1113
|
+
.spoken[data-v-da022ee0] {
|
|
1114
|
+
position: absolute;
|
|
1115
|
+
width: 1px;
|
|
1116
|
+
height: 1px;
|
|
1117
|
+
overflow: hidden;
|
|
1118
|
+
clip-path: inset(50%);
|
|
1119
|
+
white-space: nowrap;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
/* The replies' place is read off the English client's recording: the first pill's left edge at 1275 of 1920 and its top
|
|
1123
|
+
at 698 of 1080, each pill 45 high and 15 apart */
|
|
1124
|
+
.choices[data-v-da022ee0] {
|
|
1125
|
+
position: absolute;
|
|
1126
|
+
top: calc(var(--unit) * 698);
|
|
1127
|
+
right: calc(var(--unit) * 273);
|
|
1128
|
+
display: flex;
|
|
1129
|
+
width: calc(var(--unit) * 372);
|
|
1130
|
+
flex-direction: column;
|
|
1131
|
+
gap: calc(var(--unit) * 15);
|
|
1132
|
+
margin: 0;
|
|
1133
|
+
padding: 0;
|
|
1134
|
+
list-style: none;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
/* The reply's look and its states are its GameButton kind's, so the screen places each and sets only its layout */
|
|
1138
|
+
.choice[data-v-da022ee0] {
|
|
1139
|
+
display: flex;
|
|
1140
|
+
width: 100%;
|
|
1141
|
+
min-height: calc(var(--unit) * 45);
|
|
1142
|
+
align-items: center;
|
|
1143
|
+
gap: calc(var(--unit) * 7.5);
|
|
1144
|
+
padding: 0 calc(var(--unit) * 10.5);
|
|
1145
|
+
text-align: start;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
/* The mark's place, its traced glyph from the game's own file, drawn in the pill's colour */
|
|
1149
|
+
.icon[data-v-da022ee0] {
|
|
1150
|
+
width: calc(var(--unit) * 30);
|
|
1151
|
+
height: calc(var(--unit) * 30);
|
|
1152
|
+
flex: none;
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
.two-column-screen[data-v-d9df7bbc] {
|
|
1156
|
+
position: relative;
|
|
1157
|
+
display: grid;
|
|
1158
|
+
width: 100%;
|
|
1159
|
+
height: 100%;
|
|
1160
|
+
grid-template-columns: 1fr 1fr;
|
|
1161
|
+
grid-template-rows: auto 1fr;
|
|
1162
|
+
color: #ece5d8;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
/* Measured off the wiki-clip reference at 886 high, each as a unit of the game's 1080 high screen */
|
|
1166
|
+
.forge-screen[data-v-c1d8f7f3] {
|
|
1167
|
+
color: #ece5d8;
|
|
1168
|
+
font-family: "Signika", sans-serif;
|
|
1169
|
+
font-weight: 600;
|
|
1170
|
+
}
|
|
1171
|
+
.title[data-v-c1d8f7f3] {
|
|
1172
|
+
position: absolute;
|
|
1173
|
+
top: calc(var(--unit) * 34);
|
|
1174
|
+
left: calc(var(--unit) * 268);
|
|
1175
|
+
margin: 0;
|
|
1176
|
+
font-size: calc(var(--unit) * 29);
|
|
1177
|
+
line-height: 1;
|
|
1178
|
+
}
|
|
1179
|
+
.coins[data-v-c1d8f7f3] {
|
|
1180
|
+
position: absolute;
|
|
1181
|
+
top: calc(var(--unit) * 41);
|
|
1182
|
+
left: calc(var(--unit) * 1902);
|
|
1183
|
+
margin: 0;
|
|
1184
|
+
font-size: calc(var(--unit) * 27);
|
|
1185
|
+
line-height: 1;
|
|
1186
|
+
}
|
|
1187
|
+
.close[data-v-c1d8f7f3] {
|
|
1188
|
+
position: absolute;
|
|
1189
|
+
top: calc(var(--unit) * 26);
|
|
1190
|
+
left: calc(var(--unit) * 2122);
|
|
1191
|
+
width: calc(var(--unit) * 66);
|
|
1192
|
+
height: calc(var(--unit) * 66);
|
|
1193
|
+
border: none;
|
|
1194
|
+
border-radius: 50%;
|
|
1195
|
+
background: #ece5d8;
|
|
1196
|
+
color: #3b3b3b;
|
|
1197
|
+
font-size: calc(var(--unit) * 36);
|
|
1198
|
+
line-height: 1;
|
|
1199
|
+
}
|
|
1200
|
+
.tabs[data-v-c1d8f7f3] {
|
|
1201
|
+
position: absolute;
|
|
1202
|
+
top: calc(var(--unit) * 155);
|
|
1203
|
+
left: calc(var(--unit) * 137);
|
|
1204
|
+
display: flex;
|
|
1205
|
+
gap: calc(var(--unit) * 2);
|
|
1206
|
+
width: calc(var(--unit) * 741);
|
|
1207
|
+
height: calc(var(--unit) * 61);
|
|
1208
|
+
}
|
|
1209
|
+
.tab[data-v-c1d8f7f3] {
|
|
1210
|
+
flex: 1;
|
|
1211
|
+
border: none;
|
|
1212
|
+
background: rgb(20 28 38 / 0.55);
|
|
1213
|
+
color: #ece5d8;
|
|
1214
|
+
font-size: calc(var(--unit) * 27);
|
|
1215
|
+
}
|
|
1216
|
+
.tab[aria-pressed="true"][data-v-c1d8f7f3] {
|
|
1217
|
+
background: #ece5d8;
|
|
1218
|
+
color: #3b3b3b;
|
|
1219
|
+
}
|
|
1220
|
+
.recipes[data-v-c1d8f7f3],
|
|
1221
|
+
.queues[data-v-c1d8f7f3] {
|
|
1222
|
+
position: absolute;
|
|
1223
|
+
top: calc(var(--unit) * 252);
|
|
1224
|
+
left: calc(var(--unit) * 134);
|
|
1225
|
+
margin: 0;
|
|
1226
|
+
padding: 0;
|
|
1227
|
+
list-style: none;
|
|
1228
|
+
}
|
|
1229
|
+
.recipes[data-v-c1d8f7f3] {
|
|
1230
|
+
width: calc(var(--unit) * 750);
|
|
1231
|
+
}
|
|
1232
|
+
.recipes li + li[data-v-c1d8f7f3] {
|
|
1233
|
+
margin-top: calc(var(--unit) * 9.7);
|
|
1234
|
+
}
|
|
1235
|
+
.recipe[data-v-c1d8f7f3] {
|
|
1236
|
+
position: relative;
|
|
1237
|
+
display: block;
|
|
1238
|
+
width: 100%;
|
|
1239
|
+
height: calc(var(--unit) * 114.6);
|
|
1240
|
+
border: none;
|
|
1241
|
+
background: rgb(20 28 38 / 0.55);
|
|
1242
|
+
color: #ece5d8;
|
|
1243
|
+
text-align: left;
|
|
1244
|
+
}
|
|
1245
|
+
.recipes li:first-child .recipe[data-v-c1d8f7f3] {
|
|
1246
|
+
height: calc(var(--unit) * 123);
|
|
1247
|
+
}
|
|
1248
|
+
.recipe[aria-pressed="true"][data-v-c1d8f7f3] {
|
|
1249
|
+
outline: calc(var(--unit) * 2) solid #ffffff;
|
|
1250
|
+
outline-offset: calc(var(--unit) * -2);
|
|
1251
|
+
background: rgb(236 229 216 / 0.25);
|
|
1252
|
+
}
|
|
1253
|
+
.recipe[data-v-c1d8f7f3]:disabled {
|
|
1254
|
+
opacity: 0.4;
|
|
1255
|
+
}
|
|
1256
|
+
.recipe-name[data-v-c1d8f7f3] {
|
|
1257
|
+
position: absolute;
|
|
1258
|
+
top: calc(var(--unit) * 14);
|
|
1259
|
+
left: calc(var(--unit) * 152);
|
|
1260
|
+
font-size: calc(var(--unit) * 35);
|
|
1261
|
+
line-height: 1;
|
|
1262
|
+
}
|
|
1263
|
+
.recipe-time[data-v-c1d8f7f3] {
|
|
1264
|
+
position: absolute;
|
|
1265
|
+
top: calc(var(--unit) * 64);
|
|
1266
|
+
left: calc(var(--unit) * 151);
|
|
1267
|
+
font-size: calc(var(--unit) * 29);
|
|
1268
|
+
line-height: 1;
|
|
1269
|
+
}
|
|
1270
|
+
.detail[data-v-c1d8f7f3] {
|
|
1271
|
+
position: absolute;
|
|
1272
|
+
top: 0;
|
|
1273
|
+
left: 0;
|
|
1274
|
+
width: 100%;
|
|
1275
|
+
height: 100%;
|
|
1276
|
+
pointer-events: none;
|
|
1277
|
+
}
|
|
1278
|
+
.detail[data-v-c1d8f7f3] > * {
|
|
1279
|
+
pointer-events: auto;
|
|
1280
|
+
position: absolute;
|
|
1281
|
+
margin: 0;
|
|
1282
|
+
}
|
|
1283
|
+
.total-time[data-v-c1d8f7f3] {
|
|
1284
|
+
top: calc(var(--unit) * 146);
|
|
1285
|
+
left: 50%;
|
|
1286
|
+
translate: -50% 0;
|
|
1287
|
+
font-size: calc(var(--unit) * 27);
|
|
1288
|
+
line-height: 1;
|
|
1289
|
+
white-space: nowrap;
|
|
1290
|
+
}
|
|
1291
|
+
.amount[data-v-c1d8f7f3] {
|
|
1292
|
+
top: calc(var(--unit) * 590);
|
|
1293
|
+
left: calc(var(--unit) * 1368);
|
|
1294
|
+
width: calc(var(--unit) * 446);
|
|
1295
|
+
height: calc(var(--unit) * 20);
|
|
1296
|
+
accent-color: #ece5d8;
|
|
1297
|
+
}
|
|
1298
|
+
.required[data-v-c1d8f7f3] {
|
|
1299
|
+
top: calc(var(--unit) * 987);
|
|
1300
|
+
left: calc(var(--unit) * 1011);
|
|
1301
|
+
font-size: calc(var(--unit) * 24);
|
|
1302
|
+
line-height: 1;
|
|
1303
|
+
}
|
|
1304
|
+
.start[data-v-c1d8f7f3] {
|
|
1305
|
+
top: calc(var(--unit) * 963);
|
|
1306
|
+
left: calc(var(--unit) * 1883);
|
|
1307
|
+
width: calc(var(--unit) * 277);
|
|
1308
|
+
height: calc(var(--unit) * 73);
|
|
1309
|
+
border: none;
|
|
1310
|
+
border-radius: calc(var(--unit) * 36);
|
|
1311
|
+
background: #ece5d8;
|
|
1312
|
+
color: #3b3b3b;
|
|
1313
|
+
font-size: calc(var(--unit) * 29);
|
|
1314
|
+
}
|
|
1315
|
+
.queues[data-v-c1d8f7f3] {
|
|
1316
|
+
width: calc(var(--unit) * 1600);
|
|
1317
|
+
}
|
|
1318
|
+
.item-icon[data-v-c1d8f7f3] {
|
|
1319
|
+
position: absolute;
|
|
1320
|
+
top: calc(var(--unit) * 265.7);
|
|
1321
|
+
left: calc(var(--unit) * 1505.4);
|
|
1322
|
+
width: calc(var(--unit) * 170.7);
|
|
1323
|
+
height: calc(var(--unit) * 209.7);
|
|
1324
|
+
background: #5b5a5f;
|
|
1325
|
+
}
|
|
1326
|
+
.item-count[data-v-c1d8f7f3] {
|
|
1327
|
+
position: absolute;
|
|
1328
|
+
right: 0;
|
|
1329
|
+
bottom: 0;
|
|
1330
|
+
left: 0;
|
|
1331
|
+
height: calc(var(--unit) * 34.1);
|
|
1332
|
+
background: #e9e3dc;
|
|
1333
|
+
color: #3b3b3b;
|
|
1334
|
+
font-size: calc(var(--unit) * 26.8);
|
|
1335
|
+
line-height: calc(var(--unit) * 34.1);
|
|
1336
|
+
text-align: center;
|
|
1337
|
+
}
|
|
1338
|
+
.amount-label[data-v-c1d8f7f3] {
|
|
1339
|
+
top: calc(var(--unit) * 551);
|
|
1340
|
+
left: calc(var(--unit) * 1589.5);
|
|
1341
|
+
translate: -50% 0;
|
|
1342
|
+
color: #ece5d8;
|
|
1343
|
+
font-size: calc(var(--unit) * 26.8);
|
|
1344
|
+
line-height: 1;
|
|
1345
|
+
white-space: nowrap;
|
|
1346
|
+
}
|
|
1347
|
+
.materials-box[data-v-c1d8f7f3] {
|
|
1348
|
+
top: calc(var(--unit) * 658.2);
|
|
1349
|
+
left: calc(var(--unit) * 1025.1);
|
|
1350
|
+
width: calc(var(--unit) * 1130);
|
|
1351
|
+
height: calc(var(--unit) * 268.2);
|
|
1352
|
+
background: #545d6a;
|
|
1353
|
+
}
|
|
1354
|
+
.materials-head[data-v-c1d8f7f3] {
|
|
1355
|
+
position: absolute;
|
|
1356
|
+
top: 0;
|
|
1357
|
+
left: 0;
|
|
1358
|
+
width: 100%;
|
|
1359
|
+
height: calc(var(--unit) * 48.8);
|
|
1360
|
+
background: #464c5f;
|
|
1361
|
+
}
|
|
1362
|
+
.materials-head p[data-v-c1d8f7f3] {
|
|
1363
|
+
position: absolute;
|
|
1364
|
+
top: calc(var(--unit) * 15.8);
|
|
1365
|
+
margin: 0;
|
|
1366
|
+
font-size: calc(var(--unit) * 26.8);
|
|
1367
|
+
line-height: 1;
|
|
1368
|
+
white-space: nowrap;
|
|
1369
|
+
}
|
|
1370
|
+
.materials-title[data-v-c1d8f7f3] {
|
|
1371
|
+
left: calc(var(--unit) * 42.7);
|
|
1372
|
+
}
|
|
1373
|
+
.support-title[data-v-c1d8f7f3] {
|
|
1374
|
+
right: calc(var(--unit) * 41.4);
|
|
1375
|
+
}
|
|
1376
|
+
.slot[data-v-c1d8f7f3] {
|
|
1377
|
+
position: absolute;
|
|
1378
|
+
top: calc(var(--unit) * 79.2);
|
|
1379
|
+
height: calc(var(--unit) * 170.7);
|
|
1380
|
+
border: calc(var(--unit) * 2.4) solid rgb(255 255 255 / 0.12);
|
|
1381
|
+
background: rgb(20 28 38 / 0.25);
|
|
1382
|
+
}
|
|
1383
|
+
.slot-first[data-v-c1d8f7f3] {
|
|
1384
|
+
left: calc(var(--unit) * 163.3);
|
|
1385
|
+
width: calc(var(--unit) * 141.4);
|
|
1386
|
+
}
|
|
1387
|
+
.slot-second[data-v-c1d8f7f3] {
|
|
1388
|
+
left: calc(var(--unit) * 340.1);
|
|
1389
|
+
width: calc(var(--unit) * 134.1);
|
|
1390
|
+
}
|
|
1391
|
+
.slot-third[data-v-c1d8f7f3] {
|
|
1392
|
+
left: calc(var(--unit) * 508.3);
|
|
1393
|
+
width: calc(var(--unit) * 134.1);
|
|
1394
|
+
}
|
|
1395
|
+
.support-portrait[data-v-c1d8f7f3] {
|
|
1396
|
+
position: absolute;
|
|
1397
|
+
top: calc(var(--unit) * 79.2);
|
|
1398
|
+
left: calc(var(--unit) * 825.2);
|
|
1399
|
+
width: calc(var(--unit) * 141.4);
|
|
1400
|
+
height: calc(var(--unit) * 170.7);
|
|
1401
|
+
background: #8d7a5c;
|
|
1402
|
+
}
|
|
1403
|
+
.recipe-tile[data-v-c1d8f7f3] {
|
|
1404
|
+
position: absolute;
|
|
1405
|
+
top: calc(var(--unit) * 9.8);
|
|
1406
|
+
left: calc(var(--unit) * 14.6);
|
|
1407
|
+
width: calc(var(--unit) * 107.3);
|
|
1408
|
+
height: calc(var(--unit) * 107.3);
|
|
1409
|
+
background: #3a4556;
|
|
1410
|
+
}
|
|
1411
|
+
.amount-end[data-v-c1d8f7f3] {
|
|
1412
|
+
top: calc(var(--unit) * 614.4);
|
|
1413
|
+
translate: -50% -50%;
|
|
1414
|
+
font-size: calc(var(--unit) * 26.8);
|
|
1415
|
+
line-height: 1;
|
|
1416
|
+
}
|
|
1417
|
+
.amount-min[data-v-c1d8f7f3] {
|
|
1418
|
+
left: calc(var(--unit) * 1318.9);
|
|
1419
|
+
}
|
|
1420
|
+
.amount-max[data-v-c1d8f7f3] {
|
|
1421
|
+
left: calc(var(--unit) * 1861.4);
|
|
1422
|
+
}
|
|
1423
|
+
.amount-step[data-v-c1d8f7f3] {
|
|
1424
|
+
top: calc(var(--unit) * 614.4);
|
|
1425
|
+
width: calc(var(--unit) * 48.8);
|
|
1426
|
+
height: calc(var(--unit) * 48.8);
|
|
1427
|
+
border-radius: 50%;
|
|
1428
|
+
background: rgb(236 229 216 / 0.9);
|
|
1429
|
+
color: #3b3b3b;
|
|
1430
|
+
font-size: calc(var(--unit) * 31.7);
|
|
1431
|
+
line-height: calc(var(--unit) * 48.8);
|
|
1432
|
+
text-align: center;
|
|
1433
|
+
translate: -50% -50%;
|
|
1434
|
+
}
|
|
1435
|
+
.amount-minus[data-v-c1d8f7f3] {
|
|
1436
|
+
left: calc(var(--unit) * 1249.4);
|
|
1437
|
+
}
|
|
1438
|
+
.amount-plus[data-v-c1d8f7f3] {
|
|
1439
|
+
left: calc(var(--unit) * 1928.4);
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
.game-screen[data-v-b0f87b0b] {
|
|
1443
|
+
--interface-scale: 1;
|
|
1444
|
+
--canvas-inset: var(--b3ebfd60);
|
|
1445
|
+
--canvas-unit: var(--v687962d1);
|
|
1446
|
+
--unit: var(--v440f997e);
|
|
1447
|
+
--white: var(--v3dfd0b4f);
|
|
1448
|
+
position: absolute;
|
|
1449
|
+
inset: 0;
|
|
1450
|
+
overflow: hidden;
|
|
1451
|
+
container-type: size;
|
|
1452
|
+
cursor: var(--v603eb8d0);
|
|
1453
|
+
font-family: var(--v62ea67cc);
|
|
1454
|
+
user-select: none;
|
|
1455
|
+
}
|
|
1456
|
+
@media (pointer: coarse) {
|
|
1457
|
+
.game-screen[data-v-b0f87b0b] {
|
|
1458
|
+
--interface-scale: var(--v7e9afa3a);
|
|
1459
|
+
}
|
|
1460
|
+
}
|
|
1461
|
+
|
|
1462
|
+
/* Provisional: the icon, which stands in for the item's own art until its kind's icon is drawn */
|
|
1463
|
+
.interaction-prompts[data-v-49059f1b] {
|
|
1464
|
+
--pill-fill: #2a333f;
|
|
1465
|
+
display: flex;
|
|
1466
|
+
margin: 0;
|
|
1467
|
+
padding: 0;
|
|
1468
|
+
flex-direction: column;
|
|
1469
|
+
gap: calc(var(--unit) * 9);
|
|
1470
|
+
color: #fff;
|
|
1471
|
+
font-size: calc(var(--unit) * 31);
|
|
1472
|
+
font-weight: 600;
|
|
1473
|
+
list-style: none;
|
|
1474
|
+
}
|
|
1475
|
+
.prompt[data-v-49059f1b] {
|
|
1476
|
+
display: grid;
|
|
1477
|
+
grid-template-columns: calc(var(--unit) * 59) calc(var(--unit) * 318);
|
|
1478
|
+
align-items: center;
|
|
1479
|
+
height: calc(var(--unit) * 63);
|
|
1480
|
+
}
|
|
1481
|
+
.key[data-v-49059f1b] {
|
|
1482
|
+
position: relative;
|
|
1483
|
+
width: calc(var(--unit) * 40);
|
|
1484
|
+
height: calc(var(--unit) * 33);
|
|
1485
|
+
border-radius: calc(var(--unit) * 6);
|
|
1486
|
+
color: #000;
|
|
1487
|
+
font: inherit;
|
|
1488
|
+
font-size: calc(var(--unit) * 22);
|
|
1489
|
+
font-weight: 700;
|
|
1490
|
+
line-height: calc(var(--unit) * 33);
|
|
1491
|
+
text-align: center;
|
|
1492
|
+
}
|
|
1493
|
+
.prompt[aria-current="true"] .key[data-v-49059f1b] {
|
|
1494
|
+
background: #fff;
|
|
1495
|
+
}
|
|
1496
|
+
|
|
1497
|
+
/* The pointer from the cap into the pill: a white triangle 10.5 by 19 at 44.5 units from the cap's left edge, on every
|
|
1498
|
+
Row and shown on the selected one. A move of the selection is read off the English client's scrolled pickup at 60
|
|
1499
|
+
Frames a second: the cap jumps rows within a frame, while the pointer and the selected rim cross-fade from the old
|
|
1500
|
+
Row to the new over three, the 0.05 seconds the game's controllers fade into a state over */
|
|
1501
|
+
.key[data-v-49059f1b]::after {
|
|
1502
|
+
position: absolute;
|
|
1503
|
+
top: calc(var(--unit) * 7);
|
|
1504
|
+
left: calc(var(--unit) * 44.5);
|
|
1505
|
+
border-width: calc(var(--unit) * 9.5) 0 calc(var(--unit) * 9.5) calc(var(--unit) * 10.5);
|
|
1506
|
+
border-style: solid;
|
|
1507
|
+
border-color: transparent transparent transparent #ececec;
|
|
1508
|
+
content: "";
|
|
1509
|
+
opacity: 0;
|
|
1510
|
+
transition: opacity var(--v0b0e8f3c) linear;
|
|
1511
|
+
}
|
|
1512
|
+
.prompt[aria-current="true"] .key[data-v-49059f1b]::after {
|
|
1513
|
+
opacity: 1;
|
|
1514
|
+
}
|
|
1515
|
+
.pill[data-v-49059f1b] {
|
|
1516
|
+
display: flex;
|
|
1517
|
+
position: relative;
|
|
1518
|
+
isolation: isolate;
|
|
1519
|
+
height: 100%;
|
|
1520
|
+
padding: 0 0 0 calc(var(--unit) * 12);
|
|
1521
|
+
align-items: center;
|
|
1522
|
+
border: none;
|
|
1523
|
+
background: none;
|
|
1524
|
+
color: inherit;
|
|
1525
|
+
cursor: inherit;
|
|
1526
|
+
font: inherit;
|
|
1527
|
+
gap: calc(var(--unit) * 19);
|
|
1528
|
+
pointer-events: auto;
|
|
1529
|
+
white-space: nowrap;
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
/* The touch layout, measured off the English mobile client's pickup at 934 high: no cap and no selected row, the pill
|
|
1533
|
+
In the cap's place, each 52 high on a 74 pitch */
|
|
1534
|
+
.touch[data-v-49059f1b] {
|
|
1535
|
+
gap: calc(var(--unit) * 22);
|
|
1536
|
+
}
|
|
1537
|
+
.touch .prompt[data-v-49059f1b] {
|
|
1538
|
+
grid-template-columns: calc(var(--unit) * 318);
|
|
1539
|
+
height: calc(var(--unit) * 52);
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
/* The pill's ground, measured off the English client's pickup over plain grass at 1080 high: slate rounded at the left,
|
|
1543
|
+
With a light rim 2 units thick 2.5 inside its edge, opaque for 78 units and fading out evenly to nothing at its end,
|
|
1544
|
+
So it has no right end of its own. The selected row's rim is brighter */
|
|
1545
|
+
.pill[data-v-49059f1b]::before {
|
|
1546
|
+
position: absolute;
|
|
1547
|
+
inset: 0;
|
|
1548
|
+
z-index: -1;
|
|
1549
|
+
border-radius: calc(var(--unit) * 31.5) 0 0 calc(var(--unit) * 31.5);
|
|
1550
|
+
background: var(--pill-fill);
|
|
1551
|
+
box-shadow:
|
|
1552
|
+
inset 0 0 0 calc(var(--unit) * 2.5) var(--pill-fill),
|
|
1553
|
+
inset 0 0 0 calc(var(--unit) * 4.5) rgb(255 255 255 / 0.24);
|
|
1554
|
+
content: "";
|
|
1555
|
+
mask-image: linear-gradient(to right, #000 calc(var(--unit) * 78), transparent);
|
|
1556
|
+
transition: box-shadow var(--v0b0e8f3c) linear;
|
|
1557
|
+
}
|
|
1558
|
+
.prompt[aria-current="true"] .pill[data-v-49059f1b]::before {
|
|
1559
|
+
box-shadow:
|
|
1560
|
+
inset 0 0 0 calc(var(--unit) * 2.5) var(--pill-fill),
|
|
1561
|
+
inset 0 0 0 calc(var(--unit) * 4.5) rgb(255 255 255 / 0.41);
|
|
1562
|
+
}
|
|
1563
|
+
.name[data-v-49059f1b] {
|
|
1564
|
+
margin-bottom: calc(var(--unit) * 2);
|
|
1565
|
+
letter-spacing: calc(var(--unit) * 0.9);
|
|
1566
|
+
}
|
|
1567
|
+
.icon[data-v-49059f1b] {
|
|
1568
|
+
width: calc(var(--unit) * 34);
|
|
1569
|
+
height: calc(var(--unit) * 34);
|
|
1570
|
+
flex: none;
|
|
1571
|
+
border-radius: 50%;
|
|
1572
|
+
background: rgb(255 255 255 / 0.18);
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1575
|
+
/* Every place and size is in the game's 1080-high units, read off the recording of the English PC client's bag: the
|
|
1576
|
+
Grid's top left at 648 by 114, its cells 124 by 152 with 23 and 24 between, and the detail panel 493 wide at 1298 */
|
|
1577
|
+
.inventory-screen[data-v-f5de1664] {
|
|
1578
|
+
position: absolute;
|
|
1579
|
+
inset: 0;
|
|
1580
|
+
color: #ece3d8;
|
|
1581
|
+
font-size: calc(var(--unit) * 17);
|
|
1582
|
+
}
|
|
1583
|
+
.title[data-v-f5de1664] {
|
|
1584
|
+
position: absolute;
|
|
1585
|
+
width: 1px;
|
|
1586
|
+
height: 1px;
|
|
1587
|
+
overflow: hidden;
|
|
1588
|
+
clip-path: inset(50%);
|
|
1589
|
+
margin: 0;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
/* The bag's own pieces, placed against the screen as if the wrapper that makes them inert under the dialog were not there */
|
|
1593
|
+
.bag[data-v-f5de1664] {
|
|
1594
|
+
display: contents;
|
|
1595
|
+
}
|
|
1596
|
+
.tabs[data-v-f5de1664],
|
|
1597
|
+
.currencies[data-v-f5de1664],
|
|
1598
|
+
.grid[data-v-f5de1664] {
|
|
1599
|
+
margin: 0;
|
|
1600
|
+
padding: 0;
|
|
1601
|
+
list-style: none;
|
|
1602
|
+
}
|
|
1603
|
+
.tabs[data-v-f5de1664] {
|
|
1604
|
+
position: absolute;
|
|
1605
|
+
top: calc(var(--unit) * 22);
|
|
1606
|
+
left: calc(var(--unit) * 557);
|
|
1607
|
+
display: flex;
|
|
1608
|
+
gap: calc(var(--unit) * 56);
|
|
1609
|
+
}
|
|
1610
|
+
.tab[data-v-f5de1664] {
|
|
1611
|
+
width: calc(var(--unit) * 40);
|
|
1612
|
+
height: calc(var(--unit) * 40);
|
|
1613
|
+
padding: 0;
|
|
1614
|
+
border: none;
|
|
1615
|
+
border-radius: 50%;
|
|
1616
|
+
background: rgb(255 255 255 / 0.14);
|
|
1617
|
+
}
|
|
1618
|
+
.tab[aria-pressed="true"][data-v-f5de1664] {
|
|
1619
|
+
background: #ece3d8;
|
|
1620
|
+
}
|
|
1621
|
+
.capacity[data-v-f5de1664] {
|
|
1622
|
+
position: absolute;
|
|
1623
|
+
top: calc(var(--unit) * 30);
|
|
1624
|
+
right: calc(var(--unit) * 115);
|
|
1625
|
+
margin: 0;
|
|
1626
|
+
color: #ece3d8;
|
|
1627
|
+
font-size: calc(var(--unit) * 20);
|
|
1628
|
+
font-weight: 600;
|
|
1629
|
+
}
|
|
1630
|
+
.back[data-v-f5de1664] {
|
|
1631
|
+
position: absolute;
|
|
1632
|
+
top: calc(var(--unit) * 14);
|
|
1633
|
+
left: calc(var(--unit) * 1824);
|
|
1634
|
+
width: calc(var(--unit) * 56);
|
|
1635
|
+
height: calc(var(--unit) * 56);
|
|
1636
|
+
padding: 0;
|
|
1637
|
+
border: none;
|
|
1638
|
+
border-radius: 50%;
|
|
1639
|
+
background: rgb(255 255 255 / 0.14);
|
|
1640
|
+
}
|
|
1641
|
+
.grid[data-v-f5de1664] {
|
|
1642
|
+
position: absolute;
|
|
1643
|
+
top: calc(var(--unit) * 114);
|
|
1644
|
+
left: calc(var(--unit) * 648);
|
|
1645
|
+
width: calc(var(--unit) * 565);
|
|
1646
|
+
height: calc(var(--unit) * 856);
|
|
1647
|
+
display: grid;
|
|
1648
|
+
grid-template-columns: repeat(4, calc(var(--unit) * 124));
|
|
1649
|
+
grid-auto-rows: calc(var(--unit) * 152);
|
|
1650
|
+
gap: calc(var(--unit) * 24) calc(var(--unit) * 23);
|
|
1651
|
+
overflow-y: auto;
|
|
1652
|
+
}
|
|
1653
|
+
.cell[data-v-f5de1664] {
|
|
1654
|
+
display: flex;
|
|
1655
|
+
align-items: end;
|
|
1656
|
+
width: 100%;
|
|
1657
|
+
height: 100%;
|
|
1658
|
+
padding: 0;
|
|
1659
|
+
border: none;
|
|
1660
|
+
border-radius: calc(var(--unit) * 8);
|
|
1661
|
+
background: #6b6396;
|
|
1662
|
+
font: inherit;
|
|
1663
|
+
}
|
|
1664
|
+
.cell[data-rarity="5"][data-v-f5de1664] {
|
|
1665
|
+
background: #9d672b;
|
|
1666
|
+
}
|
|
1667
|
+
.cell[aria-pressed="true"][data-v-f5de1664] {
|
|
1668
|
+
box-shadow: 0 0 0 calc(var(--unit) * 3) #ece3d8;
|
|
1669
|
+
}
|
|
1670
|
+
.cell[data-selected][data-v-f5de1664] {
|
|
1671
|
+
background: #a154de;
|
|
1672
|
+
}
|
|
1673
|
+
.caption[data-v-f5de1664] {
|
|
1674
|
+
width: 100%;
|
|
1675
|
+
padding: calc(var(--unit) * 4) 0;
|
|
1676
|
+
border-radius: 0 0 calc(var(--unit) * 8) calc(var(--unit) * 8);
|
|
1677
|
+
background: rgb(0 0 0 / 0.35);
|
|
1678
|
+
color: #ece3d8;
|
|
1679
|
+
font-size: calc(var(--unit) * 17);
|
|
1680
|
+
text-align: center;
|
|
1681
|
+
}
|
|
1682
|
+
.detail[data-v-f5de1664] {
|
|
1683
|
+
--detail-head-color: #655c83;
|
|
1684
|
+
|
|
1685
|
+
position: absolute;
|
|
1686
|
+
top: calc(var(--unit) * 114);
|
|
1687
|
+
left: calc(var(--unit) * 1298);
|
|
1688
|
+
width: calc(var(--unit) * 493);
|
|
1689
|
+
height: calc(var(--unit) * 844);
|
|
1690
|
+
box-sizing: border-box;
|
|
1691
|
+
padding-top: calc(var(--unit) * 4);
|
|
1692
|
+
background: linear-gradient(
|
|
1693
|
+
to bottom,
|
|
1694
|
+
var(--detail-head-color) calc(var(--unit) * 286),
|
|
1695
|
+
#ece3d8 calc(var(--unit) * 286),
|
|
1696
|
+
#ece3d8 calc(var(--unit) * 786),
|
|
1697
|
+
#ffebbf calc(var(--unit) * 786)
|
|
1698
|
+
);
|
|
1699
|
+
color: #3b4255;
|
|
1700
|
+
}
|
|
1701
|
+
.detail[data-rarity="5"][data-v-f5de1664] {
|
|
1702
|
+
--detail-head-color: #7a4e22;
|
|
1703
|
+
}
|
|
1704
|
+
.detail-name[data-v-f5de1664] {
|
|
1705
|
+
height: calc(var(--unit) * 52);
|
|
1706
|
+
margin: 0;
|
|
1707
|
+
padding: calc(var(--unit) * 10) calc(var(--unit) * 28);
|
|
1708
|
+
box-sizing: border-box;
|
|
1709
|
+
background: #a154de;
|
|
1710
|
+
color: #ece3d8;
|
|
1711
|
+
font-size: calc(var(--unit) * 26);
|
|
1712
|
+
font-weight: 600;
|
|
1713
|
+
}
|
|
1714
|
+
.detail-caption[data-v-f5de1664] {
|
|
1715
|
+
margin: calc(var(--unit) * 230) 0 0;
|
|
1716
|
+
padding: 0 calc(var(--unit) * 28);
|
|
1717
|
+
font-size: calc(var(--unit) * 20);
|
|
1718
|
+
font-weight: 600;
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
/* The foot bar's pieces, measured off the bag's recording at 1080 high: the trash, the filter and the sort's dropdown and
|
|
1722
|
+
order on an equipment tab, the Primogems and Mora on the rest. The dropdown is the game's own pill, its list drawn by the
|
|
1723
|
+
browser until its open motion is measured */
|
|
1724
|
+
.trash[data-v-f5de1664],
|
|
1725
|
+
.filter[data-v-f5de1664],
|
|
1726
|
+
.order[data-v-f5de1664] {
|
|
1727
|
+
position: absolute;
|
|
1728
|
+
width: calc(var(--unit) * 50);
|
|
1729
|
+
height: calc(var(--unit) * 50);
|
|
1730
|
+
padding: 0;
|
|
1731
|
+
border: none;
|
|
1732
|
+
border-radius: 50%;
|
|
1733
|
+
background: rgb(255 255 255 / 0.14);
|
|
1734
|
+
}
|
|
1735
|
+
.trash[data-v-f5de1664] {
|
|
1736
|
+
top: calc(var(--unit) * 988);
|
|
1737
|
+
left: calc(var(--unit) * 47);
|
|
1738
|
+
width: calc(var(--unit) * 58);
|
|
1739
|
+
height: calc(var(--unit) * 58);
|
|
1740
|
+
}
|
|
1741
|
+
.trash[aria-pressed="true"][data-v-f5de1664] {
|
|
1742
|
+
background: #a154de;
|
|
1743
|
+
}
|
|
1744
|
+
|
|
1745
|
+
/* The destroy mode's foot and dialog are placed in the game's 1080-high units by the recording, not yet measured, so
|
|
1746
|
+
they sit in the foot's band and the screen's centre until then: the count and the Destroy button share the quick
|
|
1747
|
+
selects' row, so the foot's three rows end above the screen's 1080 */
|
|
1748
|
+
.destroy[data-v-f5de1664] {
|
|
1749
|
+
position: absolute;
|
|
1750
|
+
top: calc(var(--unit) * 960);
|
|
1751
|
+
left: calc(var(--unit) * 230);
|
|
1752
|
+
right: calc(var(--unit) * 47);
|
|
1753
|
+
display: flex;
|
|
1754
|
+
flex-wrap: wrap;
|
|
1755
|
+
align-items: center;
|
|
1756
|
+
gap: calc(var(--unit) * 12);
|
|
1757
|
+
}
|
|
1758
|
+
.destroy-tip[data-v-f5de1664],
|
|
1759
|
+
.destroy-cannot[data-v-f5de1664] {
|
|
1760
|
+
margin: 0;
|
|
1761
|
+
width: 100%;
|
|
1762
|
+
}
|
|
1763
|
+
.destroy-count[data-v-f5de1664] {
|
|
1764
|
+
margin: 0;
|
|
1765
|
+
}
|
|
1766
|
+
.destroy-cannot[data-v-f5de1664] {
|
|
1767
|
+
color: #ff9a7a;
|
|
1768
|
+
}
|
|
1769
|
+
.quick-selects[data-v-f5de1664] {
|
|
1770
|
+
display: flex;
|
|
1771
|
+
gap: calc(var(--unit) * 10);
|
|
1772
|
+
margin: 0;
|
|
1773
|
+
padding: 0;
|
|
1774
|
+
list-style: none;
|
|
1775
|
+
}
|
|
1776
|
+
.quick-select[data-v-f5de1664],
|
|
1777
|
+
.destroy-button[data-v-f5de1664],
|
|
1778
|
+
.confirm-button[data-v-f5de1664] {
|
|
1779
|
+
padding: calc(var(--unit) * 10) calc(var(--unit) * 20);
|
|
1780
|
+
border: none;
|
|
1781
|
+
border-radius: calc(var(--unit) * 8);
|
|
1782
|
+
background: rgb(255 255 255 / 0.14);
|
|
1783
|
+
color: inherit;
|
|
1784
|
+
font: inherit;
|
|
1785
|
+
}
|
|
1786
|
+
.destroy-button[data-v-f5de1664]:disabled {
|
|
1787
|
+
opacity: 0.4;
|
|
1788
|
+
}
|
|
1789
|
+
.confirm[data-v-f5de1664] {
|
|
1790
|
+
position: absolute;
|
|
1791
|
+
top: 50%;
|
|
1792
|
+
left: 50%;
|
|
1793
|
+
width: calc(var(--unit) * 560);
|
|
1794
|
+
padding: calc(var(--unit) * 32);
|
|
1795
|
+
transform: translate(-50%, -50%);
|
|
1796
|
+
border-radius: calc(var(--unit) * 12);
|
|
1797
|
+
background: #2b2a3d;
|
|
1798
|
+
}
|
|
1799
|
+
.confirm-title[data-v-f5de1664],
|
|
1800
|
+
.confirm-list-label[data-v-f5de1664],
|
|
1801
|
+
.confirm-warning[data-v-f5de1664] {
|
|
1802
|
+
margin: 0 0 calc(var(--unit) * 12);
|
|
1803
|
+
}
|
|
1804
|
+
.confirm-title[data-v-f5de1664] {
|
|
1805
|
+
font-size: calc(var(--unit) * 22);
|
|
1806
|
+
}
|
|
1807
|
+
.confirm-names[data-v-f5de1664] {
|
|
1808
|
+
margin: 0 0 calc(var(--unit) * 12);
|
|
1809
|
+
padding: 0;
|
|
1810
|
+
list-style: none;
|
|
1811
|
+
}
|
|
1812
|
+
.confirm-warning[data-v-f5de1664] {
|
|
1813
|
+
color: #ff9a7a;
|
|
1814
|
+
}
|
|
1815
|
+
.confirm-buttons[data-v-f5de1664] {
|
|
1816
|
+
display: flex;
|
|
1817
|
+
justify-content: flex-end;
|
|
1818
|
+
gap: calc(var(--unit) * 12);
|
|
1819
|
+
}
|
|
1820
|
+
.filter[data-v-f5de1664] {
|
|
1821
|
+
top: calc(var(--unit) * 992);
|
|
1822
|
+
left: calc(var(--unit) * 140);
|
|
1823
|
+
}
|
|
1824
|
+
.order[data-v-f5de1664] {
|
|
1825
|
+
top: calc(var(--unit) * 992);
|
|
1826
|
+
left: calc(var(--unit) * 532);
|
|
1827
|
+
width: calc(var(--unit) * 48);
|
|
1828
|
+
height: calc(var(--unit) * 48);
|
|
1829
|
+
background: #ece3d8;
|
|
1830
|
+
}
|
|
1831
|
+
.sort[data-v-f5de1664] {
|
|
1832
|
+
position: absolute;
|
|
1833
|
+
top: calc(var(--unit) * 992);
|
|
1834
|
+
left: calc(var(--unit) * 208);
|
|
1835
|
+
width: calc(var(--unit) * 304);
|
|
1836
|
+
height: calc(var(--unit) * 50);
|
|
1837
|
+
}
|
|
1838
|
+
.sort-select[data-v-f5de1664] {
|
|
1839
|
+
width: 100%;
|
|
1840
|
+
height: 100%;
|
|
1841
|
+
padding: 0 calc(var(--unit) * 18);
|
|
1842
|
+
border: none;
|
|
1843
|
+
border-radius: calc(var(--unit) * 25);
|
|
1844
|
+
background: #ece3d8;
|
|
1845
|
+
color: #3b4255;
|
|
1846
|
+
appearance: none;
|
|
1847
|
+
font: inherit;
|
|
1848
|
+
font-size: calc(var(--unit) * 22);
|
|
1849
|
+
font-weight: 600;
|
|
1850
|
+
}
|
|
1851
|
+
.sort[data-v-f5de1664]::after {
|
|
1852
|
+
position: absolute;
|
|
1853
|
+
top: 50%;
|
|
1854
|
+
right: calc(var(--unit) * 26);
|
|
1855
|
+
width: 0;
|
|
1856
|
+
height: 0;
|
|
1857
|
+
border-top: calc(var(--unit) * 6) solid #3b4255;
|
|
1858
|
+
border-right: calc(var(--unit) * 6) solid transparent;
|
|
1859
|
+
border-left: calc(var(--unit) * 6) solid transparent;
|
|
1860
|
+
content: "";
|
|
1861
|
+
pointer-events: none;
|
|
1862
|
+
transform: translateY(-50%);
|
|
1863
|
+
}
|
|
1864
|
+
|
|
1865
|
+
/* The figures are the game's cap height, 30 units, and the top-up plus overhangs the pill's end */
|
|
1866
|
+
.currencies[data-v-f5de1664] {
|
|
1867
|
+
position: absolute;
|
|
1868
|
+
top: calc(var(--unit) * 1002);
|
|
1869
|
+
left: calc(var(--unit) * 140);
|
|
1870
|
+
display: flex;
|
|
1871
|
+
gap: calc(var(--unit) * 43);
|
|
1872
|
+
font-size: calc(var(--unit) * 30);
|
|
1873
|
+
font-weight: 600;
|
|
1874
|
+
}
|
|
1875
|
+
.currency[data-v-f5de1664] {
|
|
1876
|
+
display: flex;
|
|
1877
|
+
align-items: center;
|
|
1878
|
+
gap: calc(var(--unit) * 12);
|
|
1879
|
+
height: calc(var(--unit) * 35);
|
|
1880
|
+
padding: 0 calc(var(--unit) * 14);
|
|
1881
|
+
border-radius: calc(var(--unit) * 18);
|
|
1882
|
+
background: rgb(38 42 56 / 0.5);
|
|
1883
|
+
}
|
|
1884
|
+
|
|
1885
|
+
/* Provisional: the Primogem and Mora marks and the top-up plus, until the glyph pass traces them from the game's own icons */
|
|
1886
|
+
.currency-icon[data-v-f5de1664] {
|
|
1887
|
+
width: calc(var(--unit) * 26);
|
|
1888
|
+
height: calc(var(--unit) * 26);
|
|
1889
|
+
border-radius: 50%;
|
|
1890
|
+
background: #d8e4f0;
|
|
1891
|
+
}
|
|
1892
|
+
.top-up[data-v-f5de1664] {
|
|
1893
|
+
width: calc(var(--unit) * 31);
|
|
1894
|
+
height: calc(var(--unit) * 31);
|
|
1895
|
+
margin-left: calc(var(--unit) * 1);
|
|
1896
|
+
margin-right: calc(var(--unit) * -14);
|
|
1897
|
+
border-radius: 50%;
|
|
1898
|
+
background: #ece3d8;
|
|
1899
|
+
}
|
|
1900
|
+
.currency-name[data-v-f5de1664] {
|
|
1901
|
+
position: absolute;
|
|
1902
|
+
width: 1px;
|
|
1903
|
+
height: 1px;
|
|
9
1904
|
overflow: hidden;
|
|
1905
|
+
clip-path: inset(50%);
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
.item-tile[data-v-5f64ed92] {
|
|
1909
|
+
display: inline-block;
|
|
10
1910
|
container-type: size;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1911
|
+
}
|
|
1912
|
+
.face[data-v-5f64ed92] {
|
|
1913
|
+
display: flex;
|
|
1914
|
+
width: 100%;
|
|
1915
|
+
height: 100%;
|
|
1916
|
+
align-items: end;
|
|
1917
|
+
overflow: hidden;
|
|
1918
|
+
border-radius: 7cqw;
|
|
1919
|
+
}
|
|
1920
|
+
.item-tile[data-rarity="3"] .face[data-v-5f64ed92] {
|
|
1921
|
+
background: linear-gradient(#79809d, #7485a6 30%, #748faf 60%, #7298b9 77%);
|
|
1922
|
+
}
|
|
1923
|
+
.item-tile[data-rarity="4"] .face[data-v-5f64ed92] {
|
|
1924
|
+
background: linear-gradient(#7e77a2, #877aac 30%, #917db4 60%, #9c80bc 77%);
|
|
1925
|
+
}
|
|
1926
|
+
.item-tile[data-rarity="5"] .face[data-v-5f64ed92] {
|
|
1927
|
+
background: linear-gradient(#b0804c, #ba8446 30%, #c38946 60%, #cc8d43 77%);
|
|
1928
|
+
}
|
|
1929
|
+
.count[data-v-5f64ed92] {
|
|
1930
|
+
width: 100%;
|
|
1931
|
+
height: 24cqh;
|
|
1932
|
+
color: #fff;
|
|
1933
|
+
font-size: var(--count-size, 30cqh);
|
|
1934
|
+
font-weight: 600;
|
|
1935
|
+
line-height: 24cqh;
|
|
1936
|
+
text-align: center;
|
|
1937
|
+
}
|
|
1938
|
+
.item-tile[data-rarity="3"] .count[data-v-5f64ed92] {
|
|
1939
|
+
background: #4d6680;
|
|
1940
|
+
}
|
|
1941
|
+
.item-tile[data-rarity="4"] .count[data-v-5f64ed92] {
|
|
1942
|
+
background: #665d82;
|
|
1943
|
+
}
|
|
1944
|
+
.item-tile[data-rarity="5"] .count[data-v-5f64ed92] {
|
|
1945
|
+
background: #6b625c;
|
|
14
1946
|
}
|
|
15
1947
|
|
|
16
1948
|
.loading-spinner[data-v-69cb5a34] {
|
|
@@ -161,6 +2093,201 @@ from {
|
|
|
161
2093
|
line-height: 1;
|
|
162
2094
|
}
|
|
163
2095
|
|
|
2096
|
+
.reputation-screen[data-v-1a7ee007] {
|
|
2097
|
+
position: absolute;
|
|
2098
|
+
inset: 0;
|
|
2099
|
+
color: #3b4255;
|
|
2100
|
+
font-weight: 600;
|
|
2101
|
+
}
|
|
2102
|
+
.head[data-v-1a7ee007] {
|
|
2103
|
+
display: flex;
|
|
2104
|
+
align-items: center;
|
|
2105
|
+
justify-content: space-between;
|
|
2106
|
+
padding: calc(var(--unit) * 20) calc(var(--unit) * 40);
|
|
2107
|
+
color: #ece5d8;
|
|
2108
|
+
}
|
|
2109
|
+
.title[data-v-1a7ee007] {
|
|
2110
|
+
margin: 0;
|
|
2111
|
+
font-size: calc(var(--unit) * 24);
|
|
2112
|
+
}
|
|
2113
|
+
.back[data-v-1a7ee007] {
|
|
2114
|
+
width: calc(var(--unit) * 56);
|
|
2115
|
+
height: calc(var(--unit) * 56);
|
|
2116
|
+
border: none;
|
|
2117
|
+
border-radius: 50%;
|
|
2118
|
+
background: rgb(255 255 255 / 0.15);
|
|
2119
|
+
color: #ece5d8;
|
|
2120
|
+
font: inherit;
|
|
2121
|
+
font-size: calc(var(--unit) * 28);
|
|
2122
|
+
}
|
|
2123
|
+
.detail[data-v-1a7ee007] {
|
|
2124
|
+
position: absolute;
|
|
2125
|
+
top: calc(var(--unit) * 165);
|
|
2126
|
+
left: calc(var(--unit) * 85);
|
|
2127
|
+
width: calc(var(--unit) * 520);
|
|
2128
|
+
color: #ece5d8;
|
|
2129
|
+
}
|
|
2130
|
+
.headline[data-v-1a7ee007] {
|
|
2131
|
+
margin: 0;
|
|
2132
|
+
font-size: calc(var(--unit) * 46);
|
|
2133
|
+
}
|
|
2134
|
+
.requirement[data-v-1a7ee007] {
|
|
2135
|
+
margin: calc(var(--unit) * 16) 0 0;
|
|
2136
|
+
font-size: calc(var(--unit) * 26);
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
/* The list's panel, its rows 126 apart from 27 down and 32 in, a row 1145 wide */
|
|
2140
|
+
.levels[data-v-1a7ee007] {
|
|
2141
|
+
position: absolute;
|
|
2142
|
+
top: calc(var(--unit) * 145);
|
|
2143
|
+
left: calc(var(--unit) * 652);
|
|
2144
|
+
display: flex;
|
|
2145
|
+
width: calc(var(--unit) * 1220);
|
|
2146
|
+
height: calc(var(--unit) * 870);
|
|
2147
|
+
flex-direction: column;
|
|
2148
|
+
gap: calc(var(--unit) * 5);
|
|
2149
|
+
margin: 0;
|
|
2150
|
+
padding: calc(var(--unit) * 27) calc(var(--unit) * 43) calc(var(--unit) * 27) calc(var(--unit) * 32);
|
|
2151
|
+
box-sizing: border-box;
|
|
2152
|
+
overflow-y: auto;
|
|
2153
|
+
background: #f0ebe5;
|
|
2154
|
+
list-style: none;
|
|
2155
|
+
scrollbar-width: none;
|
|
2156
|
+
}
|
|
2157
|
+
.level[data-v-1a7ee007] {
|
|
2158
|
+
position: relative;
|
|
2159
|
+
display: block;
|
|
2160
|
+
width: 100%;
|
|
2161
|
+
height: calc(var(--unit) * 121);
|
|
2162
|
+
padding: 0;
|
|
2163
|
+
box-sizing: border-box;
|
|
2164
|
+
border: calc(var(--unit) * 2) solid #dad4cd;
|
|
2165
|
+
border-width: calc(var(--unit) * 3) calc(var(--unit) * 2);
|
|
2166
|
+
border-left-color: #c8c2b6;
|
|
2167
|
+
background: #f6f1e8;
|
|
2168
|
+
color: #5a5758;
|
|
2169
|
+
font: inherit;
|
|
2170
|
+
text-align: left;
|
|
2171
|
+
}
|
|
2172
|
+
.level[data-achieved][data-v-1a7ee007] {
|
|
2173
|
+
background: #e9e3d9;
|
|
2174
|
+
}
|
|
2175
|
+
.level[aria-pressed="true"][data-v-1a7ee007] {
|
|
2176
|
+
background: rgb(255 255 255 / 0.6);
|
|
2177
|
+
}
|
|
2178
|
+
|
|
2179
|
+
/* The level's pentagon, the row's height, its point 166 in; its drop shadow falls on the row to its right */
|
|
2180
|
+
.badge[data-v-1a7ee007] {
|
|
2181
|
+
position: absolute;
|
|
2182
|
+
top: 0;
|
|
2183
|
+
bottom: 0;
|
|
2184
|
+
left: 0;
|
|
2185
|
+
width: calc(var(--unit) * 166);
|
|
2186
|
+
filter: drop-shadow(calc(var(--unit) * 6) 0 calc(var(--unit) * 5) rgb(120 100 80 / 0.22));
|
|
2187
|
+
}
|
|
2188
|
+
.badge-face[data-v-1a7ee007] {
|
|
2189
|
+
position: absolute;
|
|
2190
|
+
inset: 0;
|
|
2191
|
+
background: #f8f4ee;
|
|
2192
|
+
clip-path: polygon(0 0, 83% 0, 100% 50%, 83% 100%, 0 100%);
|
|
2193
|
+
}
|
|
2194
|
+
.level[data-achieved] .badge-face[data-v-1a7ee007] {
|
|
2195
|
+
background: #f4eee4;
|
|
2196
|
+
}
|
|
2197
|
+
.badge-word[data-v-1a7ee007],
|
|
2198
|
+
.badge-number[data-v-1a7ee007] {
|
|
2199
|
+
position: absolute;
|
|
2200
|
+
left: 0;
|
|
2201
|
+
width: calc(var(--unit) * 146);
|
|
2202
|
+
color: #6a645b;
|
|
2203
|
+
line-height: 1;
|
|
2204
|
+
text-align: center;
|
|
2205
|
+
}
|
|
2206
|
+
.badge-word[data-v-1a7ee007] {
|
|
2207
|
+
top: calc(var(--unit) * 22);
|
|
2208
|
+
font-size: calc(var(--unit) * 22);
|
|
2209
|
+
letter-spacing: calc(var(--unit) * 2);
|
|
2210
|
+
}
|
|
2211
|
+
.badge-number[data-v-1a7ee007] {
|
|
2212
|
+
top: calc(var(--unit) * 49.5);
|
|
2213
|
+
font-size: calc(var(--unit) * 45);
|
|
2214
|
+
}
|
|
2215
|
+
.hidden-label[data-v-1a7ee007] {
|
|
2216
|
+
position: absolute;
|
|
2217
|
+
width: 1px;
|
|
2218
|
+
height: 1px;
|
|
2219
|
+
overflow: hidden;
|
|
2220
|
+
clip-path: inset(50%);
|
|
2221
|
+
}
|
|
2222
|
+
.items[data-v-1a7ee007] {
|
|
2223
|
+
position: absolute;
|
|
2224
|
+
top: calc(var(--unit) * 20);
|
|
2225
|
+
left: calc(var(--unit) * 238);
|
|
2226
|
+
display: flex;
|
|
2227
|
+
gap: calc(var(--unit) * 12);
|
|
2228
|
+
}
|
|
2229
|
+
|
|
2230
|
+
/* The clip's slots, 76 square, their counts at 16 */
|
|
2231
|
+
.item[data-v-1a7ee007] {
|
|
2232
|
+
--count-size: 21cqh;
|
|
2233
|
+
|
|
2234
|
+
width: calc(var(--unit) * 76);
|
|
2235
|
+
height: calc(var(--unit) * 76);
|
|
2236
|
+
}
|
|
2237
|
+
|
|
2238
|
+
/* The unlock line, wrapped at 320 and set centred on the row, behind its info mark 12 to the left */
|
|
2239
|
+
.unlock[data-v-1a7ee007] {
|
|
2240
|
+
position: absolute;
|
|
2241
|
+
top: 50%;
|
|
2242
|
+
left: calc(var(--unit) * 528);
|
|
2243
|
+
width: calc(var(--unit) * 320);
|
|
2244
|
+
font-size: calc(var(--unit) * 27);
|
|
2245
|
+
letter-spacing: calc(var(--unit) * 2);
|
|
2246
|
+
line-height: calc(var(--unit) * 32);
|
|
2247
|
+
translate: 0 -50%;
|
|
2248
|
+
}
|
|
2249
|
+
.unlock[data-v-1a7ee007]::before {
|
|
2250
|
+
position: absolute;
|
|
2251
|
+
top: 50%;
|
|
2252
|
+
left: calc(var(--unit) * -45);
|
|
2253
|
+
width: calc(var(--unit) * 31);
|
|
2254
|
+
height: calc(var(--unit) * 31);
|
|
2255
|
+
border: calc(var(--unit) * 1) solid #d4cfc8;
|
|
2256
|
+
border-radius: 50%;
|
|
2257
|
+
background: #fbfaf4;
|
|
2258
|
+
color: #36362f;
|
|
2259
|
+
content: "i";
|
|
2260
|
+
font-size: calc(var(--unit) * 20);
|
|
2261
|
+
letter-spacing: 0;
|
|
2262
|
+
line-height: calc(var(--unit) * 31);
|
|
2263
|
+
text-align: center;
|
|
2264
|
+
translate: 0 -50%;
|
|
2265
|
+
}
|
|
2266
|
+
|
|
2267
|
+
/* The row's end, 189 wide: the tick where the level is achieved, else the not achieved block */
|
|
2268
|
+
.achieved[data-v-1a7ee007],
|
|
2269
|
+
.status[data-v-1a7ee007] {
|
|
2270
|
+
position: absolute;
|
|
2271
|
+
top: 0;
|
|
2272
|
+
right: 0;
|
|
2273
|
+
bottom: 0;
|
|
2274
|
+
display: flex;
|
|
2275
|
+
width: calc(var(--unit) * 189);
|
|
2276
|
+
align-items: center;
|
|
2277
|
+
justify-content: center;
|
|
2278
|
+
}
|
|
2279
|
+
.check[data-v-1a7ee007] {
|
|
2280
|
+
width: calc(var(--unit) * 52);
|
|
2281
|
+
height: calc(var(--unit) * 47);
|
|
2282
|
+
margin-bottom: calc(var(--unit) * 4);
|
|
2283
|
+
fill: #8cbc2c;
|
|
2284
|
+
}
|
|
2285
|
+
.status[data-v-1a7ee007] {
|
|
2286
|
+
background: #ebe3d9;
|
|
2287
|
+
color: #92867a;
|
|
2288
|
+
font-size: calc(var(--unit) * 31);
|
|
2289
|
+
}
|
|
2290
|
+
|
|
164
2291
|
.round-button[data-v-e1ab12d3] {
|
|
165
2292
|
display: grid;
|
|
166
2293
|
width: calc(var(--unit) * 52);
|
|
@@ -248,3 +2375,274 @@ from {
|
|
|
248
2375
|
line-height: 1;
|
|
249
2376
|
white-space: nowrap;
|
|
250
2377
|
}
|
|
2378
|
+
|
|
2379
|
+
.wish-details[data-v-4fcea975] {
|
|
2380
|
+
position: absolute;
|
|
2381
|
+
inset: 0;
|
|
2382
|
+
display: grid;
|
|
2383
|
+
background: rgb(0 0 0 / 0.5);
|
|
2384
|
+
place-items: center;
|
|
2385
|
+
}
|
|
2386
|
+
.panel[data-v-4fcea975] {
|
|
2387
|
+
position: relative;
|
|
2388
|
+
display: flex;
|
|
2389
|
+
width: calc(var(--unit) * 1200);
|
|
2390
|
+
flex-direction: column;
|
|
2391
|
+
gap: calc(var(--unit) * 12);
|
|
2392
|
+
padding: calc(var(--unit) * 32) calc(var(--unit) * 40);
|
|
2393
|
+
box-sizing: border-box;
|
|
2394
|
+
border-radius: calc(var(--unit) * 8);
|
|
2395
|
+
background: rgb(28 32 42 / 0.96);
|
|
2396
|
+
color: #ece5d8;
|
|
2397
|
+
}
|
|
2398
|
+
.title[data-v-4fcea975] {
|
|
2399
|
+
margin: 0;
|
|
2400
|
+
font-size: calc(var(--unit) * 28);
|
|
2401
|
+
}
|
|
2402
|
+
.close[data-v-4fcea975] {
|
|
2403
|
+
position: absolute;
|
|
2404
|
+
top: calc(var(--unit) * 24);
|
|
2405
|
+
right: calc(var(--unit) * 24);
|
|
2406
|
+
padding: 0;
|
|
2407
|
+
border: none;
|
|
2408
|
+
background: none;
|
|
2409
|
+
color: inherit;
|
|
2410
|
+
font: inherit;
|
|
2411
|
+
}
|
|
2412
|
+
.pool[data-v-4fcea975],
|
|
2413
|
+
.pool-items[data-v-4fcea975] {
|
|
2414
|
+
margin: 0;
|
|
2415
|
+
padding: 0;
|
|
2416
|
+
list-style: none;
|
|
2417
|
+
}
|
|
2418
|
+
.pool[data-v-4fcea975] {
|
|
2419
|
+
display: flex;
|
|
2420
|
+
flex-direction: column;
|
|
2421
|
+
gap: calc(var(--unit) * 12);
|
|
2422
|
+
font-size: calc(var(--unit) * 18);
|
|
2423
|
+
}
|
|
2424
|
+
.pool-rarity[data-v-4fcea975] {
|
|
2425
|
+
display: flex;
|
|
2426
|
+
gap: calc(var(--unit) * 16);
|
|
2427
|
+
}
|
|
2428
|
+
.pool-items[data-v-4fcea975] {
|
|
2429
|
+
display: flex;
|
|
2430
|
+
flex-wrap: wrap;
|
|
2431
|
+
gap: calc(var(--unit) * 4) calc(var(--unit) * 16);
|
|
2432
|
+
}
|
|
2433
|
+
.pool-item[data-featured="true"][data-v-4fcea975] {
|
|
2434
|
+
color: #ffd780;
|
|
2435
|
+
}
|
|
2436
|
+
.stars[data-v-4fcea975] {
|
|
2437
|
+
color: #ffcc32;
|
|
2438
|
+
white-space: nowrap;
|
|
2439
|
+
}
|
|
2440
|
+
.path[data-v-4fcea975] {
|
|
2441
|
+
margin: 0;
|
|
2442
|
+
font-size: calc(var(--unit) * 22);
|
|
2443
|
+
}
|
|
2444
|
+
.fate-points[data-v-4fcea975] {
|
|
2445
|
+
margin-left: calc(var(--unit) * 12);
|
|
2446
|
+
opacity: 0.7;
|
|
2447
|
+
}
|
|
2448
|
+
|
|
2449
|
+
.wish-screen[data-v-fe40ca36] {
|
|
2450
|
+
position: absolute;
|
|
2451
|
+
inset: 0;
|
|
2452
|
+
background: rgb(28 32 42 / 0.92);
|
|
2453
|
+
color: #fff;
|
|
2454
|
+
}
|
|
2455
|
+
.title[data-v-fe40ca36] {
|
|
2456
|
+
position: absolute;
|
|
2457
|
+
top: calc(var(--unit) * 30);
|
|
2458
|
+
left: calc(var(--unit) * 145);
|
|
2459
|
+
margin: 0;
|
|
2460
|
+
font-size: calc(var(--unit) * 22);
|
|
2461
|
+
}
|
|
2462
|
+
.banners[data-v-fe40ca36],
|
|
2463
|
+
.currencies[data-v-fe40ca36],
|
|
2464
|
+
.links[data-v-fe40ca36],
|
|
2465
|
+
.result-list[data-v-fe40ca36] {
|
|
2466
|
+
margin: 0;
|
|
2467
|
+
padding: 0;
|
|
2468
|
+
list-style: none;
|
|
2469
|
+
}
|
|
2470
|
+
.banners[data-v-fe40ca36] {
|
|
2471
|
+
position: absolute;
|
|
2472
|
+
top: 0;
|
|
2473
|
+
left: calc(var(--unit) * 678);
|
|
2474
|
+
display: flex;
|
|
2475
|
+
gap: calc(var(--unit) * 27);
|
|
2476
|
+
}
|
|
2477
|
+
.banner[data-v-fe40ca36] {
|
|
2478
|
+
width: calc(var(--unit) * 172);
|
|
2479
|
+
height: calc(var(--unit) * 92);
|
|
2480
|
+
border: calc(var(--unit) * 2) solid rgb(255 255 255 / 0.6);
|
|
2481
|
+
}
|
|
2482
|
+
.banner[aria-pressed="true"][data-v-fe40ca36] {
|
|
2483
|
+
background: rgb(253 247 242 / 0.85);
|
|
2484
|
+
}
|
|
2485
|
+
.currencies[data-v-fe40ca36] {
|
|
2486
|
+
position: absolute;
|
|
2487
|
+
top: calc(var(--unit) * 30);
|
|
2488
|
+
left: calc(var(--unit) * 1440);
|
|
2489
|
+
display: flex;
|
|
2490
|
+
gap: calc(var(--unit) * 24);
|
|
2491
|
+
font-size: calc(var(--unit) * 20);
|
|
2492
|
+
}
|
|
2493
|
+
.currency-name[data-v-fe40ca36] {
|
|
2494
|
+
opacity: 0.7;
|
|
2495
|
+
}
|
|
2496
|
+
.back[data-v-fe40ca36] {
|
|
2497
|
+
position: absolute;
|
|
2498
|
+
top: calc(var(--unit) * 17);
|
|
2499
|
+
left: calc(var(--unit) * 1812);
|
|
2500
|
+
width: calc(var(--unit) * 56);
|
|
2501
|
+
height: calc(var(--unit) * 56);
|
|
2502
|
+
font-size: calc(var(--unit) * 36);
|
|
2503
|
+
}
|
|
2504
|
+
|
|
2505
|
+
/* The card is the plate's art, so only its words are drawn over it, each at the game's place on the banner */
|
|
2506
|
+
.card[data-v-fe40ca36] {
|
|
2507
|
+
position: absolute;
|
|
2508
|
+
inset: 0;
|
|
2509
|
+
}
|
|
2510
|
+
.tag[data-v-fe40ca36] {
|
|
2511
|
+
position: absolute;
|
|
2512
|
+
top: calc(var(--unit) * 213);
|
|
2513
|
+
left: calc(var(--unit) * 322);
|
|
2514
|
+
margin: 0;
|
|
2515
|
+
padding: calc(var(--unit) * 4) calc(var(--unit) * 16);
|
|
2516
|
+
border-radius: calc(var(--unit) * 18);
|
|
2517
|
+
background: rgb(62 195 238);
|
|
2518
|
+
font-size: calc(var(--unit) * 22);
|
|
2519
|
+
}
|
|
2520
|
+
.card-title[data-v-fe40ca36] {
|
|
2521
|
+
position: absolute;
|
|
2522
|
+
top: calc(var(--unit) * 250);
|
|
2523
|
+
left: calc(var(--unit) * 377);
|
|
2524
|
+
margin: 0;
|
|
2525
|
+
color: #3e3c3d;
|
|
2526
|
+
font-size: calc(var(--unit) * 58);
|
|
2527
|
+
line-height: calc(var(--unit) * 72);
|
|
2528
|
+
}
|
|
2529
|
+
.probability[data-v-fe40ca36] {
|
|
2530
|
+
position: absolute;
|
|
2531
|
+
top: calc(var(--unit) * 455);
|
|
2532
|
+
left: calc(var(--unit) * 377);
|
|
2533
|
+
margin: 0;
|
|
2534
|
+
color: #3e3c3d;
|
|
2535
|
+
font-size: calc(var(--unit) * 26);
|
|
2536
|
+
}
|
|
2537
|
+
.rate-up[data-v-fe40ca36] {
|
|
2538
|
+
position: absolute;
|
|
2539
|
+
top: calc(var(--unit) * 500);
|
|
2540
|
+
left: calc(var(--unit) * 377);
|
|
2541
|
+
width: calc(var(--unit) * 462);
|
|
2542
|
+
box-sizing: border-box;
|
|
2543
|
+
margin: 0;
|
|
2544
|
+
padding: calc(var(--unit) * 10) calc(var(--unit) * 36);
|
|
2545
|
+
background: rgb(62 195 238);
|
|
2546
|
+
font-size: calc(var(--unit) * 20);
|
|
2547
|
+
}
|
|
2548
|
+
.featured[data-v-fe40ca36] {
|
|
2549
|
+
position: absolute;
|
|
2550
|
+
top: calc(var(--unit) * 672);
|
|
2551
|
+
left: calc(var(--unit) * 1068);
|
|
2552
|
+
}
|
|
2553
|
+
.featured-name[data-v-fe40ca36] {
|
|
2554
|
+
margin: 0;
|
|
2555
|
+
font-size: calc(var(--unit) * 40);
|
|
2556
|
+
}
|
|
2557
|
+
.featured-title[data-v-fe40ca36] {
|
|
2558
|
+
width: calc(var(--unit) * 348);
|
|
2559
|
+
box-sizing: border-box;
|
|
2560
|
+
margin: calc(var(--unit) * 4) 0 0;
|
|
2561
|
+
padding: 0 calc(var(--unit) * 12);
|
|
2562
|
+
background: rgb(20 30 50 / 0.7);
|
|
2563
|
+
font-size: calc(var(--unit) * 22);
|
|
2564
|
+
}
|
|
2565
|
+
.stars[data-v-fe40ca36] {
|
|
2566
|
+
color: #ffcc32;
|
|
2567
|
+
white-space: nowrap;
|
|
2568
|
+
}
|
|
2569
|
+
.links[data-v-fe40ca36] {
|
|
2570
|
+
position: absolute;
|
|
2571
|
+
top: calc(var(--unit) * 1010);
|
|
2572
|
+
left: calc(var(--unit) * 68);
|
|
2573
|
+
display: flex;
|
|
2574
|
+
gap: calc(var(--unit) * 20);
|
|
2575
|
+
}
|
|
2576
|
+
.link[data-v-fe40ca36] {
|
|
2577
|
+
width: calc(var(--unit) * 172);
|
|
2578
|
+
height: calc(var(--unit) * 32);
|
|
2579
|
+
font-size: calc(var(--unit) * 22);
|
|
2580
|
+
}
|
|
2581
|
+
.path[data-v-fe40ca36] {
|
|
2582
|
+
position: absolute;
|
|
2583
|
+
top: calc(var(--unit) * 940);
|
|
2584
|
+
left: calc(var(--unit) * 68);
|
|
2585
|
+
margin: 0;
|
|
2586
|
+
font-size: calc(var(--unit) * 22);
|
|
2587
|
+
}
|
|
2588
|
+
.fate-points[data-v-fe40ca36] {
|
|
2589
|
+
margin-left: calc(var(--unit) * 12);
|
|
2590
|
+
opacity: 0.7;
|
|
2591
|
+
}
|
|
2592
|
+
.sets[data-v-fe40ca36] {
|
|
2593
|
+
position: absolute;
|
|
2594
|
+
top: calc(var(--unit) * 975);
|
|
2595
|
+
left: calc(var(--unit) * 1147);
|
|
2596
|
+
display: flex;
|
|
2597
|
+
gap: calc(var(--unit) * 33);
|
|
2598
|
+
}
|
|
2599
|
+
.set[data-v-fe40ca36] {
|
|
2600
|
+
display: flex;
|
|
2601
|
+
width: calc(var(--unit) * 340);
|
|
2602
|
+
height: calc(var(--unit) * 72);
|
|
2603
|
+
flex-direction: column;
|
|
2604
|
+
align-items: center;
|
|
2605
|
+
justify-content: center;
|
|
2606
|
+
color: #3b4255;
|
|
2607
|
+
font-size: calc(var(--unit) * 22);
|
|
2608
|
+
}
|
|
2609
|
+
.set-label[data-v-fe40ca36] {
|
|
2610
|
+
font-weight: 600;
|
|
2611
|
+
}
|
|
2612
|
+
.cost[data-v-fe40ca36] {
|
|
2613
|
+
font-size: calc(var(--unit) * 18);
|
|
2614
|
+
opacity: 0.7;
|
|
2615
|
+
}
|
|
2616
|
+
.results[data-v-fe40ca36] {
|
|
2617
|
+
position: absolute;
|
|
2618
|
+
inset: 0;
|
|
2619
|
+
display: grid;
|
|
2620
|
+
background: rgb(255 255 255 / 0.92);
|
|
2621
|
+
place-items: center;
|
|
2622
|
+
}
|
|
2623
|
+
.result-list[data-v-fe40ca36] {
|
|
2624
|
+
display: flex;
|
|
2625
|
+
gap: calc(var(--unit) * 12);
|
|
2626
|
+
}
|
|
2627
|
+
.result[data-v-fe40ca36] {
|
|
2628
|
+
display: flex;
|
|
2629
|
+
width: calc(var(--unit) * 120);
|
|
2630
|
+
height: calc(var(--unit) * 420);
|
|
2631
|
+
flex-direction: column;
|
|
2632
|
+
justify-content: end;
|
|
2633
|
+
border-radius: calc(var(--unit) * 8);
|
|
2634
|
+
background: #5180b6;
|
|
2635
|
+
color: #ece5d8;
|
|
2636
|
+
font-size: calc(var(--unit) * 18);
|
|
2637
|
+
text-align: center;
|
|
2638
|
+
}
|
|
2639
|
+
.result[data-rarity="4"][data-v-fe40ca36] {
|
|
2640
|
+
background: #8d6fb5;
|
|
2641
|
+
}
|
|
2642
|
+
.result[data-rarity="5"][data-v-fe40ca36] {
|
|
2643
|
+
background: #c18b4c;
|
|
2644
|
+
}
|
|
2645
|
+
.result-return[data-v-fe40ca36] {
|
|
2646
|
+
padding-bottom: calc(var(--unit) * 8);
|
|
2647
|
+
font-size: calc(var(--unit) * 14);
|
|
2648
|
+
}
|