@rpg-engine/long-bow 0.8.28 → 0.8.29
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/long-bow.cjs.development.js +8 -8
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +8 -8
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/InformationCenter/sections/bestiary/InformationCenterNPCDetails.tsx +31 -7
- package/src/components/InformationCenter/shared/BaseInformationDetails.tsx +26 -14
- package/src/components/shared/Collapsible/Collapsible.tsx +1 -1
package/package.json
CHANGED
|
@@ -265,9 +265,11 @@ const Value = styled.span`
|
|
|
265
265
|
const StyledCollapsible = styled(Collapsible)`
|
|
266
266
|
background: rgba(255, 255, 255, 0.05);
|
|
267
267
|
border-radius: 4px;
|
|
268
|
-
overflow:
|
|
268
|
+
overflow: visible;
|
|
269
269
|
scrollbar-width: thin;
|
|
270
270
|
scrollbar-color: ${uiColors.darkGray} transparent;
|
|
271
|
+
width: 100%;
|
|
272
|
+
box-sizing: border-box;
|
|
271
273
|
`;
|
|
272
274
|
|
|
273
275
|
const StatGrid = styled.div`
|
|
@@ -354,27 +356,49 @@ const Separator = styled.span`
|
|
|
354
356
|
`;
|
|
355
357
|
|
|
356
358
|
const LootSearchContainer = styled.div`
|
|
357
|
-
padding:
|
|
359
|
+
padding: 8px;
|
|
360
|
+
background: rgba(0, 0, 0, 0.2);
|
|
361
|
+
border-radius: 4px;
|
|
362
|
+
margin: 8px 8px 4px;
|
|
363
|
+
box-sizing: border-box;
|
|
358
364
|
`;
|
|
359
365
|
|
|
360
366
|
const StyledSearchBar = styled(SearchBar)`
|
|
361
367
|
width: 100%;
|
|
368
|
+
box-sizing: border-box;
|
|
369
|
+
input {
|
|
370
|
+
background: rgba(0, 0, 0, 0.2) !important;
|
|
371
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
372
|
+
box-sizing: border-box;
|
|
373
|
+
&:focus {
|
|
374
|
+
border-color: ${uiColors.yellow} !important;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
362
377
|
`;
|
|
363
378
|
|
|
364
379
|
const LootGrid = styled.div`
|
|
365
380
|
display: grid;
|
|
366
|
-
grid-template-columns: repeat(auto-
|
|
367
|
-
gap:
|
|
368
|
-
padding:
|
|
381
|
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
382
|
+
gap: 4px;
|
|
383
|
+
padding: 4px 8px;
|
|
384
|
+
width: 100%;
|
|
385
|
+
max-width: 100%;
|
|
386
|
+
box-sizing: border-box;
|
|
387
|
+
|
|
388
|
+
@media (max-width: 768px) {
|
|
389
|
+
grid-template-columns: 1fr;
|
|
390
|
+
padding: 4px;
|
|
391
|
+
}
|
|
369
392
|
`;
|
|
370
393
|
|
|
371
394
|
const LootItem = styled.div`
|
|
372
395
|
display: flex;
|
|
373
396
|
align-items: center;
|
|
374
|
-
gap:
|
|
397
|
+
gap: 4px;
|
|
375
398
|
background: rgba(255, 255, 255, 0.05);
|
|
376
|
-
padding:
|
|
399
|
+
padding: 4px;
|
|
377
400
|
border-radius: 4px;
|
|
401
|
+
min-width: 0;
|
|
378
402
|
`;
|
|
379
403
|
|
|
380
404
|
const LootDetails = styled.div`
|
|
@@ -65,26 +65,28 @@ const Overlay = styled.div`
|
|
|
65
65
|
|
|
66
66
|
const Modal = styled.div`
|
|
67
67
|
position: fixed;
|
|
68
|
-
top: 50%;
|
|
69
|
-
left: 50%;
|
|
70
|
-
transform: translate(-50%, -50%);
|
|
71
|
-
width: 100%;
|
|
72
|
-
height: 100%;
|
|
73
|
-
max-width: 90%;
|
|
74
|
-
max-height: 90%;
|
|
75
68
|
background-color: rgba(0, 0, 0, 0.95);
|
|
76
69
|
border-radius: 4px;
|
|
77
|
-
padding:
|
|
78
|
-
overflow
|
|
70
|
+
padding: 12px;
|
|
71
|
+
overflow: hidden;
|
|
79
72
|
z-index: 1;
|
|
80
73
|
font-family: 'Press Start 2P', cursive;
|
|
81
74
|
border: 1px solid ${uiColors.darkGray};
|
|
82
75
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
76
|
+
width: 90%;
|
|
77
|
+
height: 90%;
|
|
78
|
+
top: 5%;
|
|
79
|
+
left: 5%;
|
|
80
|
+
max-width: 800px;
|
|
81
|
+
margin: 0 auto;
|
|
83
82
|
|
|
84
83
|
@media (max-width: 768px) {
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
width: 100%;
|
|
85
|
+
height: 100%;
|
|
86
|
+
top: 0;
|
|
87
|
+
left: 0;
|
|
87
88
|
border-radius: 0;
|
|
89
|
+
padding: 8px;
|
|
88
90
|
}
|
|
89
91
|
|
|
90
92
|
&::-webkit-scrollbar {
|
|
@@ -137,9 +139,19 @@ const Header = styled.div`
|
|
|
137
139
|
const Content = styled.div`
|
|
138
140
|
display: flex;
|
|
139
141
|
flex-direction: column;
|
|
140
|
-
gap:
|
|
141
|
-
height: 100
|
|
142
|
-
overflow: auto;
|
|
142
|
+
gap: 12px;
|
|
143
|
+
height: calc(100% - 80px);
|
|
144
|
+
overflow-y: auto;
|
|
145
|
+
overflow-x: hidden;
|
|
146
|
+
padding-right: 6px;
|
|
147
|
+
margin-right: -6px;
|
|
148
|
+
|
|
149
|
+
@media (max-width: 768px) {
|
|
150
|
+
height: calc(100% - 64px);
|
|
151
|
+
gap: 8px;
|
|
152
|
+
padding-right: 4px;
|
|
153
|
+
margin-right: -4px;
|
|
154
|
+
}
|
|
143
155
|
`;
|
|
144
156
|
|
|
145
157
|
const Title = styled.h2`
|