@eveshipfit/ui-ingame 1.7.0 → 1.8.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/style.css CHANGED
@@ -44,6 +44,85 @@
44
44
  .kwi1cG_content {
45
45
  padding: 10px;
46
46
  }
47
+ .cmKEiW_anchor {
48
+ display: contents;
49
+ }
50
+
51
+ .cmKEiW_anchor > :first-child {
52
+ anchor-name: var(--tooltip-anchor);
53
+ }
54
+
55
+ .cmKEiW_tooltip {
56
+ --notch-size: 10px;
57
+ --notch-reach: calc(var(--notch-size) * .71 + 1px);
58
+ anchor-name: var(--tooltip-box);
59
+ color: var(--esf-text);
60
+ font-family: var(--esf-font);
61
+ font-size: var(--esf-font-size);
62
+ margin: var(--notch-reach) 0;
63
+ opacity: .9;
64
+ pointer-events: none;
65
+ position-anchor: var(--tooltip-anchor);
66
+ position-area: top;
67
+ position-try-fallbacks: flip-block;
68
+ background: none;
69
+ border: none;
70
+ max-width: 320px;
71
+ padding: 0;
72
+ inset: auto;
73
+ overflow: visible;
74
+ }
75
+
76
+ .cmKEiW_notch, .cmKEiW_label {
77
+ background: var(--esf-bg);
78
+ border: 1px solid var(--esf-border);
79
+ }
80
+
81
+ .cmKEiW_notch, .cmKEiW_label:after {
82
+ --edge: clamp(anchor(var(--tooltip-box) top),
83
+ anchor(var(--tooltip-anchor) center),
84
+ anchor(var(--tooltip-box) bottom));
85
+ left: clamp(anchor(var(--tooltip-box) left) + var(--notch-size),
86
+ anchor(var(--tooltip-anchor) center),
87
+ anchor(var(--tooltip-box) right) - var(--notch-size));
88
+ position: fixed;
89
+ }
90
+
91
+ .cmKEiW_notch {
92
+ height: var(--notch-size);
93
+ top: var(--edge);
94
+ width: var(--notch-size);
95
+ translate: -50% -50%;
96
+ rotate: 45deg;
97
+ }
98
+
99
+ .cmKEiW_label {
100
+ padding: 8px 14px;
101
+ display: block;
102
+ position: relative;
103
+ }
104
+
105
+ .cmKEiW_label:after {
106
+ background: var(--esf-bg);
107
+ content: "";
108
+ height: 1px;
109
+ top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - 1px);
110
+ width: calc(var(--notch-size) * 1.41 - 2px);
111
+ translate: -50%;
112
+ }
113
+
114
+ .cmKEiW_text {
115
+ gap: 8px;
116
+ display: grid;
117
+ }
118
+
119
+ .cmKEiW_text + .cmKEiW_text {
120
+ margin-top: 12px;
121
+ }
122
+
123
+ .cmKEiW_title {
124
+ font-weight: 600;
125
+ }
47
126
  .a4KCwW_icon {
48
127
  height: var(--size);
49
128
  isolation: isolate;
@@ -162,85 +241,6 @@
162
241
  .CUz0fa_icon {
163
242
  flex: none;
164
243
  }
165
- .cmKEiW_anchor {
166
- display: contents;
167
- }
168
-
169
- .cmKEiW_anchor > :first-child {
170
- anchor-name: var(--tooltip-anchor);
171
- }
172
-
173
- .cmKEiW_tooltip {
174
- --notch-size: 10px;
175
- --notch-reach: calc(var(--notch-size) * .71 + 1px);
176
- anchor-name: var(--tooltip-box);
177
- color: var(--esf-text);
178
- font-family: var(--esf-font);
179
- font-size: var(--esf-font-size);
180
- margin: var(--notch-reach) 0;
181
- opacity: .9;
182
- pointer-events: none;
183
- position-anchor: var(--tooltip-anchor);
184
- position-area: top;
185
- position-try-fallbacks: flip-block;
186
- background: none;
187
- border: none;
188
- max-width: 320px;
189
- padding: 0;
190
- inset: auto;
191
- overflow: visible;
192
- }
193
-
194
- .cmKEiW_notch, .cmKEiW_label {
195
- background: var(--esf-bg);
196
- border: 1px solid var(--esf-border);
197
- }
198
-
199
- .cmKEiW_notch, .cmKEiW_label:after {
200
- --edge: clamp(anchor(var(--tooltip-box) top),
201
- anchor(var(--tooltip-anchor) center),
202
- anchor(var(--tooltip-box) bottom));
203
- left: clamp(anchor(var(--tooltip-box) left) + var(--notch-size),
204
- anchor(var(--tooltip-anchor) center),
205
- anchor(var(--tooltip-box) right) - var(--notch-size));
206
- position: fixed;
207
- }
208
-
209
- .cmKEiW_notch {
210
- height: var(--notch-size);
211
- top: var(--edge);
212
- width: var(--notch-size);
213
- translate: -50% -50%;
214
- rotate: 45deg;
215
- }
216
-
217
- .cmKEiW_label {
218
- padding: 8px 14px;
219
- display: block;
220
- position: relative;
221
- }
222
-
223
- .cmKEiW_label:after {
224
- background: var(--esf-bg);
225
- content: "";
226
- height: 1px;
227
- top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - 1px);
228
- width: calc(var(--notch-size) * 1.41 - 2px);
229
- translate: -50%;
230
- }
231
-
232
- .cmKEiW_text {
233
- gap: 8px;
234
- display: grid;
235
- }
236
-
237
- .cmKEiW_text + .cmKEiW_text {
238
- margin-top: 12px;
239
- }
240
-
241
- .cmKEiW_title {
242
- font-weight: 600;
243
- }
244
244
  .hmBNwq_toggle {
245
245
  --toggle-unit: calc(1px * var(--esf-scale, 1));
246
246
  border: var(--toggle-unit) solid transparent;
@@ -264,6 +264,13 @@
264
264
  flex: none;
265
265
  }
266
266
 
267
+ .hmBNwq_toggle > .hmBNwq_image {
268
+ filter: grayscale() brightness(1.3);
269
+ height: calc(22 * var(--toggle-unit));
270
+ opacity: .7;
271
+ width: calc(22 * var(--toggle-unit));
272
+ }
273
+
267
274
  .hmBNwq_toggle[aria-pressed="true"] {
268
275
  border-color: var(--esf-button-active-edge);
269
276
  }
@@ -347,12 +354,12 @@
347
354
 
348
355
  .UlfhFa_entries {
349
356
  background: var(--esf-history-bg);
350
- border: var(--history-unit) solid var(--esf-history-border);
357
+ border: round(var(--history-unit), 1px) solid var(--esf-history-border);
351
358
  box-sizing: border-box;
352
359
  align-items: center;
353
- gap: calc(3 * var(--history-unit));
354
- height: calc(17 * var(--history-unit));
355
- padding: 0 calc(2 * var(--history-unit));
360
+ gap: round(calc(3 * var(--history-unit)), 1px);
361
+ height: round(calc(17 * var(--history-unit)), 1px);
362
+ padding: 0 round(calc(2 * var(--history-unit)), 1px);
356
363
  width: calc(282 * var(--history-unit));
357
364
  display: flex;
358
365
  overflow: hidden;
@@ -361,8 +368,8 @@
361
368
  .UlfhFa_entry {
362
369
  background: var(--esf-history-entry);
363
370
  cursor: pointer;
364
- height: calc(11 * var(--history-unit));
365
- width: calc(7 * var(--history-unit));
371
+ height: round(calc(11 * var(--history-unit)), 1px);
372
+ width: round(calc(7 * var(--history-unit)), 1px);
366
373
  border: none;
367
374
  flex: none;
368
375
  padding: 0;
@@ -589,13 +596,18 @@
589
596
  pointer-events: auto;
590
597
  }
591
598
 
599
+ .T6VD6G_slot > .T6VD6G_actions[inert] {
600
+ opacity: 0;
601
+ }
602
+
592
603
  .T6VD6G_bridge {
604
+ --width: calc(var(--slot-size) * (.797 - .203) * var(--wheel-unit));
593
605
  height: calc((var(--slot-centre) - var(--innermost)) * var(--wheel-unit));
594
- left: calc(50% - var(--action-size) / 2 * var(--wheel-unit));
606
+ left: calc(50% - var(--width) / 2);
595
607
  top: calc(50% - var(--slot-centre) * var(--wheel-unit));
596
608
  transform: rotate(var(--angle));
597
609
  transform-origin: 50% calc(var(--slot-centre) * var(--wheel-unit));
598
- width: calc(var(--action-size) * var(--wheel-unit));
610
+ width: var(--width);
599
611
  z-index: -1;
600
612
  position: absolute;
601
613
  }
@@ -730,33 +742,55 @@
730
742
 
731
743
  .m18XbW_header {
732
744
  background: var(--esf-stats-header);
745
+ align-items: center;
746
+ gap: calc(8 * var(--section-unit));
747
+ height: calc(20 * var(--section-unit));
748
+ padding: 0 calc(14 * var(--section-unit)) 0 calc(4 * var(--section-unit));
749
+ display: flex;
750
+ position: relative;
751
+ }
752
+
753
+ .m18XbW_header:has(.m18XbW_toggle:focus-visible) {
754
+ outline: var(--section-unit) solid var(--esf-text);
755
+ }
756
+
757
+ .m18XbW_toggle {
733
758
  color: inherit;
734
759
  cursor: default;
735
760
  font: inherit;
736
- height: calc(20 * var(--section-unit));
737
- padding: 0 calc(14 * var(--section-unit)) 0 calc(4 * var(--section-unit));
738
761
  text-align: left;
762
+ background: none;
739
763
  border: none;
764
+ outline: none;
765
+ flex: 1;
766
+ align-self: stretch;
740
767
  align-items: center;
741
- width: 100%;
768
+ min-width: 0;
769
+ padding: 0;
742
770
  display: flex;
743
771
  }
744
772
 
745
- .m18XbW_header:focus-visible {
746
- outline: var(--section-unit) solid var(--esf-text);
773
+ .m18XbW_toggle:after {
774
+ content: "";
775
+ position: absolute;
776
+ inset: 0;
747
777
  }
748
778
 
749
- .m18XbW_header > img {
779
+ .m18XbW_toggle > img {
750
780
  height: calc(10 * var(--section-unit));
751
781
  margin-right: calc(4 * var(--section-unit));
752
782
  width: calc(10 * var(--section-unit));
753
783
  transition: transform .15s;
754
784
  }
755
785
 
756
- .m18XbW_section[data-closed] .m18XbW_header > img {
786
+ .m18XbW_section[data-closed] .m18XbW_toggle > img {
757
787
  transform: rotate(-90deg);
758
788
  }
759
789
 
790
+ .m18XbW_action {
791
+ position: relative;
792
+ }
793
+
760
794
  .m18XbW_title {
761
795
  flex: 1;
762
796
  }
@@ -788,7 +822,7 @@
788
822
  }
789
823
 
790
824
  @media (prefers-reduced-motion: reduce) {
791
- .m18XbW_header > img, .m18XbW_body, .m18XbW_clip {
825
+ .m18XbW_toggle > img, .m18XbW_body, .m18XbW_clip {
792
826
  transition: none;
793
827
  }
794
828
  }
@@ -856,6 +890,21 @@
856
890
  ._6LFjiq_cell[data-lit] {
857
891
  background: var(--lit);
858
892
  }
893
+ .tsr2Sa_hint {
894
+ height: var(--wheel-texture-size);
895
+ left: calc(50% - var(--wheel-texture-size) / 2);
896
+ pointer-events: none;
897
+ top: calc(50% - var(--wheel-texture-size) / 2);
898
+ width: var(--wheel-texture-size);
899
+ position: absolute;
900
+ overflow: visible;
901
+ }
902
+
903
+ .tsr2Sa_text {
904
+ fill: #cdcdcd;
905
+ letter-spacing: .05em;
906
+ font-size: 11px;
907
+ }
859
908
  ._9_b9FW_modes {
860
909
  pointer-events: none;
861
910
  position: absolute;
@@ -1002,6 +1051,20 @@
1002
1051
  display: block;
1003
1052
  }
1004
1053
 
1054
+ .BVBbxW_press {
1055
+ cursor: pointer;
1056
+ position: absolute;
1057
+ inset: 0;
1058
+ }
1059
+
1060
+ .BVBbxW_press:focus-visible {
1061
+ outline: none;
1062
+ }
1063
+
1064
+ .BVBbxW_slot:has(.BVBbxW_press:hover) .BVBbxW_frame, .BVBbxW_slot:has(.BVBbxW_press:focus-visible) .BVBbxW_frame {
1065
+ stroke: var(--esf-text-muted);
1066
+ }
1067
+
1005
1068
  .BVBbxW_number {
1006
1069
  color: var(--esf-text-muted);
1007
1070
  font-family: var(--esf-font);
@@ -1134,94 +1197,351 @@
1134
1197
  position: relative;
1135
1198
  }
1136
1199
 
1137
- .R9jwpW_slot:hover, .R9jwpW_slot:has(:focus-visible) {
1138
- z-index: 1;
1200
+ .R9jwpW_slot:hover, .R9jwpW_slot:has(:focus-visible) {
1201
+ z-index: 1;
1202
+ }
1203
+
1204
+ .R9jwpW_body {
1205
+ user-select: none;
1206
+ position: absolute;
1207
+ inset: 0;
1208
+ }
1209
+
1210
+ .R9jwpW_body:before {
1211
+ background: var(--texture) center / 100% 100%;
1212
+ content: "";
1213
+ position: absolute;
1214
+ inset: 0;
1215
+ }
1216
+
1217
+ .R9jwpW_icon, .R9jwpW_empty {
1218
+ position: absolute;
1219
+ top: 50%;
1220
+ left: 50%;
1221
+ translate: -50% -50%;
1222
+ }
1223
+
1224
+ .R9jwpW_icon {
1225
+ height: calc(36 * var(--service-unit));
1226
+ width: calc(36 * var(--service-unit));
1227
+ }
1228
+
1229
+ .R9jwpW_icon > span, .R9jwpW_empty > img {
1230
+ width: 100%;
1231
+ height: 100%;
1232
+ display: block;
1233
+ }
1234
+
1235
+ .R9jwpW_empty {
1236
+ height: calc(32 * var(--service-unit));
1237
+ width: calc(32 * var(--service-unit));
1238
+ }
1239
+
1240
+ .R9jwpW_press {
1241
+ cursor: pointer;
1242
+ position: absolute;
1243
+ inset: 0;
1244
+ }
1245
+
1246
+ .R9jwpW_press:focus-visible {
1247
+ outline: var(--service-unit) solid var(--esf-text);
1248
+ }
1249
+
1250
+ .R9jwpW_slot[data-state="empty"] > .R9jwpW_body:before {
1251
+ opacity: .4;
1252
+ }
1253
+
1254
+ .R9jwpW_slot[data-state="offline"] > .R9jwpW_body {
1255
+ opacity: .3;
1256
+ }
1257
+
1258
+ .R9jwpW_slot[data-state="unavailable"] > .R9jwpW_body {
1259
+ opacity: .1;
1260
+ }
1261
+
1262
+ .R9jwpW_slot[data-preview] .R9jwpW_icon {
1263
+ filter: sepia() hue-rotate(190deg) saturate(200%);
1264
+ }
1265
+
1266
+ .R9jwpW_actions {
1267
+ opacity: 0;
1268
+ padding: 0 0 var(--service-unit);
1269
+ pointer-events: none;
1270
+ border: none;
1271
+ flex-direction: column-reverse;
1272
+ margin: 0;
1273
+ display: flex;
1274
+ position: absolute;
1275
+ bottom: 100%;
1276
+ left: 50%;
1277
+ translate: -50%;
1278
+ }
1279
+
1280
+ .R9jwpW_slot:hover > .R9jwpW_actions, .R9jwpW_slot:has(:focus-visible) > .R9jwpW_actions {
1281
+ opacity: 1;
1282
+ pointer-events: auto;
1283
+ }
1284
+
1285
+ .R9jwpW_slot > .R9jwpW_actions[inert] {
1286
+ opacity: 0;
1287
+ }
1288
+
1289
+ .R9jwpW_action {
1290
+ height: calc(15.5 * var(--service-unit));
1291
+ width: calc(15.5 * var(--service-unit));
1292
+ }
1293
+ .TufZMa_card {
1294
+ --info-unit: calc(1px * var(--esf-scale, 1));
1295
+ background: var(--esf-bg);
1296
+ border: 1px solid var(--esf-border);
1297
+ box-shadow: 0 calc(8 * var(--info-unit)) calc(30 * var(--info-unit)) #0009;
1298
+ box-sizing: border-box;
1299
+ color: var(--esf-text);
1300
+ font-family: var(--esf-font);
1301
+ font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
1302
+ max-height: min(calc(460 * var(--info-unit)), calc(100vh - 16px));
1303
+ padding: calc(10 * var(--info-unit)) calc(12 * var(--info-unit)) calc(6 * var(--info-unit));
1304
+ user-select: text;
1305
+ width: calc(330 * var(--info-unit));
1306
+ flex-direction: column;
1307
+ margin: auto;
1308
+ inset: 0;
1309
+ }
1310
+
1311
+ .TufZMa_card:popover-open {
1312
+ display: flex;
1313
+ }
1314
+
1315
+ .TufZMa_card[data-side] {
1316
+ margin: 0 calc(8 * var(--info-unit));
1317
+ position-anchor: var(--item-info-anchor);
1318
+ position-try-fallbacks: flip-block,
1319
+ flip-inline,
1320
+ flip-block flip-inline;
1321
+ inset: auto;
1322
+ }
1323
+
1324
+ .TufZMa_card[data-side="left"] {
1325
+ position-area: left span-bottom;
1326
+ }
1327
+
1328
+ .TufZMa_card[data-side="right"] {
1329
+ position-area: right span-bottom;
1330
+ }
1331
+
1332
+ .TufZMa_close {
1333
+ cursor: pointer;
1334
+ opacity: .6;
1335
+ right: calc(8 * var(--info-unit));
1336
+ top: calc(8 * var(--info-unit));
1337
+ background: none;
1338
+ border: none;
1339
+ padding: 0;
1340
+ display: flex;
1341
+ position: absolute;
1342
+ }
1343
+
1344
+ .TufZMa_close:hover, .TufZMa_close:focus-visible {
1345
+ opacity: 1;
1346
+ }
1347
+
1348
+ .TufZMa_close > img {
1349
+ height: calc(14 * var(--info-unit));
1350
+ width: calc(14 * var(--info-unit));
1351
+ }
1352
+
1353
+ .TufZMa_header {
1354
+ align-items: center;
1355
+ gap: calc(10 * var(--info-unit));
1356
+ padding-right: calc(16 * var(--info-unit));
1357
+ display: flex;
1358
+ }
1359
+
1360
+ .TufZMa_typeIcon {
1361
+ height: calc(64 * var(--info-unit));
1362
+ width: calc(64 * var(--info-unit));
1363
+ flex: none;
1364
+ }
1365
+
1366
+ .TufZMa_typeIcon > span {
1367
+ width: 100%;
1368
+ height: 100%;
1369
+ display: block;
1370
+ }
1371
+
1372
+ .TufZMa_title {
1373
+ gap: calc(2 * var(--info-unit));
1374
+ flex-direction: column;
1375
+ min-width: 0;
1376
+ display: flex;
1377
+ }
1378
+
1379
+ .TufZMa_name {
1380
+ font-size: inherit;
1381
+ margin: 0;
1382
+ font-weight: normal;
1383
+ }
1384
+
1385
+ .TufZMa_muted {
1386
+ color: var(--esf-text-muted);
1387
+ }
1388
+
1389
+ .TufZMa_tabs {
1390
+ border-bottom: 1px solid var(--esf-input-border);
1391
+ gap: calc(16 * var(--info-unit));
1392
+ margin-top: calc(8 * var(--info-unit));
1393
+ display: flex;
1394
+ }
1395
+
1396
+ .TufZMa_tab {
1397
+ color: var(--esf-text-muted);
1398
+ font: inherit;
1399
+ padding: calc(4 * var(--info-unit)) 0 calc(6 * var(--info-unit));
1400
+ background: none;
1401
+ border: none;
1402
+ }
1403
+
1404
+ .TufZMa_tab[aria-selected="true"] {
1405
+ box-shadow: inset 0 calc(-2 * var(--info-unit)) var(--esf-button-active-edge);
1406
+ color: var(--esf-text);
1407
+ }
1408
+
1409
+ .TufZMa_panel {
1410
+ flex-direction: column;
1411
+ min-height: 0;
1412
+ display: flex;
1413
+ }
1414
+
1415
+ .TufZMa_list {
1416
+ font-size: calc(11 * var(--info-unit));
1417
+ margin: calc(4 * var(--info-unit)) calc(-12 * var(--info-unit)) 0;
1418
+ min-height: 0;
1419
+ padding: 0;
1420
+ list-style: none;
1421
+ overflow-y: auto;
1422
+ }
1423
+
1424
+ .TufZMa_row {
1425
+ align-items: center;
1426
+ gap: calc(8 * var(--info-unit));
1427
+ min-height: calc(26 * var(--info-unit));
1428
+ padding: 0 calc(12 * var(--info-unit));
1429
+ justify-content: space-between;
1430
+ display: flex;
1431
+ }
1432
+
1433
+ .TufZMa_row:hover {
1434
+ background: var(--esf-tree-hover);
1435
+ }
1436
+
1437
+ .TufZMa_row > dt {
1438
+ align-items: center;
1439
+ gap: calc(6 * var(--info-unit));
1440
+ min-width: 0;
1441
+ display: flex;
1442
+ }
1443
+
1444
+ .TufZMa_row > dt > span:last-child {
1445
+ text-overflow: ellipsis;
1446
+ white-space: nowrap;
1447
+ overflow: hidden;
1139
1448
  }
1140
1449
 
1141
- .R9jwpW_body {
1142
- user-select: none;
1143
- position: absolute;
1144
- inset: 0;
1450
+ .TufZMa_row > dd {
1451
+ font-variant-numeric: tabular-nums;
1452
+ text-align: right;
1453
+ white-space: nowrap;
1454
+ margin: 0;
1145
1455
  }
1146
1456
 
1147
- .R9jwpW_body:before {
1148
- background: var(--texture) center / 100% 100%;
1149
- content: "";
1150
- position: absolute;
1151
- inset: 0;
1457
+ .TufZMa_icon {
1458
+ height: calc(16 * var(--info-unit));
1459
+ width: calc(16 * var(--info-unit));
1460
+ flex: none;
1152
1461
  }
1153
1462
 
1154
- .R9jwpW_icon, .R9jwpW_empty {
1155
- position: absolute;
1156
- top: 50%;
1157
- left: 50%;
1158
- translate: -50% -50%;
1463
+ .TufZMa_row > dd[data-change="better"] {
1464
+ color: var(--esf-good);
1159
1465
  }
1160
1466
 
1161
- .R9jwpW_icon {
1162
- height: calc(36 * var(--service-unit));
1163
- width: calc(36 * var(--service-unit));
1467
+ .TufZMa_row > dd[data-change="worse"] {
1468
+ color: var(--esf-bad);
1164
1469
  }
1165
1470
 
1166
- .R9jwpW_icon > span, .R9jwpW_empty > img {
1167
- width: 100%;
1168
- height: 100%;
1169
- display: block;
1471
+ .TufZMa_metaGroup {
1472
+ background: var(--esf-tree-header);
1473
+ font-size: inherit;
1474
+ margin: calc(4 * var(--info-unit)) 0 0;
1475
+ padding: calc(5 * var(--info-unit)) calc(12 * var(--info-unit));
1476
+ font-weight: normal;
1170
1477
  }
1171
1478
 
1172
- .R9jwpW_empty {
1173
- height: calc(32 * var(--service-unit));
1174
- width: calc(32 * var(--service-unit));
1479
+ .TufZMa_variations {
1480
+ margin: 0;
1481
+ padding: 0;
1482
+ list-style: none;
1175
1483
  }
1176
1484
 
1177
- .R9jwpW_press {
1178
- cursor: pointer;
1179
- position: absolute;
1180
- inset: 0;
1485
+ .TufZMa_row[aria-current="true"] {
1486
+ background: var(--esf-tab-active);
1181
1487
  }
1182
1488
 
1183
- .R9jwpW_press:focus-visible {
1184
- outline: var(--service-unit) solid var(--esf-text);
1489
+ .TufZMa_variation {
1490
+ color: inherit;
1491
+ cursor: default;
1492
+ font: inherit;
1493
+ align-items: center;
1494
+ gap: calc(6 * var(--info-unit));
1495
+ text-align: left;
1496
+ user-select: none;
1497
+ background: none;
1498
+ border: none;
1499
+ outline: none;
1500
+ flex: 1;
1501
+ min-width: 0;
1502
+ padding: 0;
1503
+ display: flex;
1185
1504
  }
1186
1505
 
1187
- .R9jwpW_slot[data-state="empty"] > .R9jwpW_body:before {
1188
- opacity: .4;
1506
+ .TufZMa_variation > span:last-child {
1507
+ text-overflow: ellipsis;
1508
+ white-space: nowrap;
1509
+ overflow: hidden;
1189
1510
  }
1190
1511
 
1191
- .R9jwpW_slot[data-state="offline"] > .R9jwpW_body {
1192
- opacity: .3;
1512
+ .TufZMa_row:has(.TufZMa_variation:focus-visible) {
1513
+ background: var(--esf-tree-hover);
1193
1514
  }
1194
1515
 
1195
- .R9jwpW_slot[data-state="unavailable"] > .R9jwpW_body {
1196
- opacity: .1;
1516
+ .TufZMa_variationIcon {
1517
+ height: calc(24 * var(--info-unit));
1518
+ width: calc(24 * var(--info-unit));
1519
+ flex: none;
1197
1520
  }
1198
1521
 
1199
- .R9jwpW_slot[data-preview] .R9jwpW_icon {
1200
- filter: sepia() hue-rotate(190deg) saturate(200%);
1522
+ .TufZMa_variationIcon > span {
1523
+ width: 100%;
1524
+ height: 100%;
1525
+ display: block;
1201
1526
  }
1202
1527
 
1203
- .R9jwpW_actions {
1204
- opacity: 0;
1205
- padding: 0 0 var(--service-unit);
1206
- pointer-events: none;
1528
+ .TufZMa_info {
1529
+ cursor: pointer;
1530
+ opacity: .6;
1531
+ background: none;
1207
1532
  border: none;
1208
- flex-direction: column-reverse;
1209
- margin: 0;
1533
+ flex: none;
1534
+ padding: 0;
1210
1535
  display: flex;
1211
- position: absolute;
1212
- bottom: 100%;
1213
- left: 50%;
1214
- translate: -50%;
1215
1536
  }
1216
1537
 
1217
- .R9jwpW_slot:hover > .R9jwpW_actions, .R9jwpW_slot:has(:focus-visible) > .R9jwpW_actions {
1538
+ .TufZMa_info:hover, .TufZMa_info:focus-visible {
1218
1539
  opacity: 1;
1219
- pointer-events: auto;
1220
1540
  }
1221
1541
 
1222
- .R9jwpW_action {
1223
- height: calc(15.5 * var(--service-unit));
1224
- width: calc(15.5 * var(--service-unit));
1542
+ .TufZMa_info > img {
1543
+ height: calc(16 * var(--info-unit));
1544
+ width: calc(16 * var(--info-unit));
1225
1545
  }
1226
1546
  .gVdevq_panel {
1227
1547
  background: var(--esf-menu-bg);
@@ -1726,6 +2046,16 @@
1726
2046
  top: 0;
1727
2047
  }
1728
2048
 
2049
+ .L9t91q_placeholder {
2050
+ color: var(--esf-text-muted);
2051
+ justify-content: center;
2052
+ align-items: center;
2053
+ margin: 0;
2054
+ display: flex;
2055
+ position: absolute;
2056
+ inset: 0;
2057
+ }
2058
+
1729
2059
  .L9t91q_name, .L9t91q_violations, .L9t91q_tools, .L9t91q_panels, .L9t91q_bays, .L9t91q_history, .L9t91q_services, .L9t91q_resources {
1730
2060
  position: absolute;
1731
2061
  }
@@ -2396,6 +2726,24 @@
2396
2726
  gap: 8px;
2397
2727
  display: flex;
2398
2728
  }
2729
+
2730
+ .xFSZwa_views {
2731
+ margin: 0 0 0 calc(4 * var(--browser-unit));
2732
+ border: none;
2733
+ align-self: stretch;
2734
+ min-width: 0;
2735
+ padding: 0;
2736
+ display: flex;
2737
+ }
2738
+
2739
+ .xFSZwa_views button {
2740
+ align-items: center;
2741
+ }
2742
+
2743
+ .xFSZwa_views [aria-pressed="true"] {
2744
+ background: var(--esf-tab-active);
2745
+ opacity: 1;
2746
+ }
2399
2747
  .lebA7G_statistics {
2400
2748
  --statistics-unit: calc(1px * var(--esf-scale, 1));
2401
2749
  color: var(--esf-text);
@@ -2489,12 +2837,12 @@
2489
2837
  column-gap: calc(6 * var(--defense-unit));
2490
2838
  grid-auto-rows: calc(32 * var(--defense-unit));
2491
2839
  grid-template-columns: 1fr repeat(4, calc(40 * var(--defense-unit)));
2492
- grid-template-rows: calc(26 * var(--defense-unit));
2840
+ grid-template-rows: calc(26 * var(--defense-unit)) calc(4 * var(--defense-unit));
2493
2841
  padding-right: calc(10 * var(--defense-unit));
2494
2842
  display: grid;
2495
2843
  }
2496
2844
 
2497
- .lebA7G_defense > img {
2845
+ .lebA7G_defense > span > img {
2498
2846
  height: calc(22 * var(--defense-unit));
2499
2847
  margin-left: calc(4 * var(--defense-unit));
2500
2848
  width: calc(22 * var(--defense-unit));
@@ -2579,3 +2927,204 @@
2579
2927
  height: calc(24 * var(--repair-rate-unit));
2580
2928
  width: calc(24 * var(--repair-rate-unit));
2581
2929
  }
2930
+
2931
+ .lebA7G_share {
2932
+ --colour: var(--esf-damage-em);
2933
+ background: linear-gradient(to right, var(--colour) calc(var(--share) * 100%), var(--esf-resistance-bg) 0);
2934
+ height: calc(3 * var(--share-unit, var(--defense-unit)));
2935
+ align-self: start;
2936
+ }
2937
+
2938
+ .lebA7G_share[data-damage="thermal"] {
2939
+ --colour: var(--esf-damage-thermal);
2940
+ }
2941
+
2942
+ .lebA7G_share[data-damage="kinetic"] {
2943
+ --colour: var(--esf-damage-kinetic);
2944
+ }
2945
+
2946
+ .lebA7G_share[data-damage="explosive"] {
2947
+ --colour: var(--esf-damage-explosive);
2948
+ }
2949
+
2950
+ .lebA7G_damageProfile {
2951
+ --damage-profile-unit: calc(1px * var(--esf-scale, 1));
2952
+ display: flex;
2953
+ }
2954
+
2955
+ .lebA7G_damageProfilePicker {
2956
+ anchor-name: var(--damage-profile-anchor);
2957
+ color: inherit;
2958
+ cursor: default;
2959
+ font: inherit;
2960
+ align-items: center;
2961
+ gap: calc(4 * var(--damage-profile-unit));
2962
+ background: none;
2963
+ border: none;
2964
+ padding: 0;
2965
+ display: flex;
2966
+ }
2967
+
2968
+ .lebA7G_damageProfilePicker:focus-visible {
2969
+ outline: var(--damage-profile-unit) solid var(--esf-text);
2970
+ }
2971
+
2972
+ .lebA7G_damageProfileName {
2973
+ max-width: calc(110 * var(--damage-profile-unit));
2974
+ text-overflow: ellipsis;
2975
+ white-space: nowrap;
2976
+ overflow: hidden;
2977
+ }
2978
+
2979
+ .lebA7G_damageProfilePicker > img {
2980
+ height: calc(10 * var(--damage-profile-unit));
2981
+ width: calc(10 * var(--damage-profile-unit));
2982
+ }
2983
+
2984
+ .lebA7G_damageProfileMenu {
2985
+ background: var(--esf-menu-bg);
2986
+ color: var(--esf-text);
2987
+ font-family: var(--esf-font);
2988
+ font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
2989
+ max-width: calc(260 * var(--damage-profile-unit));
2990
+ min-width: calc(172 * var(--damage-profile-unit));
2991
+ position-anchor: var(--damage-profile-anchor);
2992
+ inset: auto;
2993
+ right: anchor(right);
2994
+ top: calc(anchor(bottom) + 3 * var(--damage-profile-unit));
2995
+ border: none;
2996
+ margin: 0;
2997
+ padding: 0;
2998
+ }
2999
+
3000
+ .lebA7G_damageProfileMenu button {
3001
+ color: inherit;
3002
+ cursor: default;
3003
+ font: inherit;
3004
+ height: calc(26 * var(--damage-profile-unit));
3005
+ padding: 0 calc(8 * var(--damage-profile-unit));
3006
+ white-space: nowrap;
3007
+ background: none;
3008
+ border: none;
3009
+ }
3010
+
3011
+ .lebA7G_damageProfileMenu button:hover, .lebA7G_damageProfileMenu button:focus-visible {
3012
+ background: var(--esf-menu-hover);
3013
+ outline: none;
3014
+ }
3015
+
3016
+ .lebA7G_pick {
3017
+ text-align: left;
3018
+ text-overflow: ellipsis;
3019
+ width: 100%;
3020
+ overflow: hidden;
3021
+ }
3022
+
3023
+ .lebA7G_pick[aria-pressed="true"] {
3024
+ color: var(--esf-flyable);
3025
+ }
3026
+
3027
+ .lebA7G_custom {
3028
+ display: flex;
3029
+ }
3030
+
3031
+ .lebA7G_damageProfileMenu .lebA7G_edit {
3032
+ opacity: .6;
3033
+ align-items: center;
3034
+ display: flex;
3035
+ }
3036
+
3037
+ .lebA7G_damageProfileMenu .lebA7G_edit:hover, .lebA7G_damageProfileMenu .lebA7G_edit:focus-visible {
3038
+ opacity: 1;
3039
+ }
3040
+
3041
+ .lebA7G_edit > img {
3042
+ height: calc(16 * var(--damage-profile-unit));
3043
+ width: calc(16 * var(--damage-profile-unit));
3044
+ }
3045
+
3046
+ .lebA7G_rule {
3047
+ border: none;
3048
+ border-top: var(--damage-profile-unit) solid var(--esf-border);
3049
+ margin: calc(2 * var(--damage-profile-unit)) 0;
3050
+ }
3051
+
3052
+ .lebA7G_profileForm {
3053
+ flex-direction: column;
3054
+ gap: 8px;
3055
+ width: min(300px, 80vw);
3056
+ display: flex;
3057
+ }
3058
+
3059
+ .lebA7G_profileForm > label {
3060
+ color: var(--esf-text-muted);
3061
+ }
3062
+
3063
+ .lebA7G_profileForm input {
3064
+ background: var(--esf-input-bg);
3065
+ border: 1px solid var(--esf-input-border);
3066
+ color: var(--esf-text);
3067
+ font: inherit;
3068
+ }
3069
+
3070
+ .lebA7G_formError {
3071
+ color: var(--esf-bad);
3072
+ margin: 0;
3073
+ }
3074
+
3075
+ .lebA7G_amounts {
3076
+ --share-unit: 1px;
3077
+ grid-template-columns: repeat(4, 1fr);
3078
+ gap: 4px 8px;
3079
+ margin-top: 4px;
3080
+ display: grid;
3081
+ }
3082
+
3083
+ .lebA7G_amount {
3084
+ align-items: center;
3085
+ gap: 2px;
3086
+ display: flex;
3087
+ }
3088
+
3089
+ .lebA7G_amount > img {
3090
+ width: 22px;
3091
+ height: 22px;
3092
+ }
3093
+
3094
+ .lebA7G_amount > input {
3095
+ width: 100%;
3096
+ min-width: 0;
3097
+ }
3098
+
3099
+ .lebA7G_dialogButtons {
3100
+ justify-content: flex-end;
3101
+ gap: 8px;
3102
+ margin-top: 4px;
3103
+ display: flex;
3104
+ }
3105
+
3106
+ .lebA7G_action {
3107
+ background: var(--esf-button);
3108
+ border: 1px solid var(--esf-button-edge);
3109
+ color: var(--esf-text);
3110
+ cursor: pointer;
3111
+ font: inherit;
3112
+ min-width: 80px;
3113
+ height: 32px;
3114
+ padding: 0 16px;
3115
+ }
3116
+
3117
+ .lebA7G_action:hover:not(:disabled), .lebA7G_action:focus-visible {
3118
+ background: var(--esf-button-active);
3119
+ border-color: var(--esf-button-active-edge);
3120
+ }
3121
+
3122
+ .lebA7G_action:disabled {
3123
+ color: var(--esf-text-muted);
3124
+ cursor: default;
3125
+ }
3126
+
3127
+ .lebA7G_delete {
3128
+ color: var(--esf-bad);
3129
+ margin-right: auto;
3130
+ }