rm ability preview
Browse files
src/lib/components/Piclets/PicletCard.svelte
CHANGED
@@ -55,23 +55,6 @@
|
|
55 |
></div>
|
56 |
</div>
|
57 |
</div>
|
58 |
-
|
59 |
-
<!-- Ability Preview -->
|
60 |
-
<div class="ability-preview">
|
61 |
-
<div class="ability-info">
|
62 |
-
<span class="ability-icon">✨</span>
|
63 |
-
<div class="ability-text">
|
64 |
-
<span class="ability-name">{ability.name}</span>
|
65 |
-
<div class="ability-counts">
|
66 |
-
{#if ability.effects?.length || ability.triggers?.length}
|
67 |
-
<span class="ability-count">
|
68 |
-
{(ability.effects?.length || 0) + (ability.triggers?.length || 0)} effects
|
69 |
-
</span>
|
70 |
-
{/if}
|
71 |
-
</div>
|
72 |
-
</div>
|
73 |
-
</div>
|
74 |
-
</div>
|
75 |
</div>
|
76 |
</button>
|
77 |
|
@@ -168,57 +151,4 @@
|
|
168 |
border-radius: 1.5px;
|
169 |
transition: width 0.3s ease;
|
170 |
}
|
171 |
-
|
172 |
-
/* Ability Preview Styles */
|
173 |
-
.ability-preview {
|
174 |
-
margin-top: 4px;
|
175 |
-
padding: 4px 6px;
|
176 |
-
background: rgba(255, 255, 255, 0.9);
|
177 |
-
border-radius: 6px;
|
178 |
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
179 |
-
}
|
180 |
-
|
181 |
-
.ability-info {
|
182 |
-
display: flex;
|
183 |
-
align-items: center;
|
184 |
-
gap: 4px;
|
185 |
-
}
|
186 |
-
|
187 |
-
.ability-icon {
|
188 |
-
font-size: 10px;
|
189 |
-
line-height: 1;
|
190 |
-
}
|
191 |
-
|
192 |
-
.ability-text {
|
193 |
-
flex: 1;
|
194 |
-
min-width: 0;
|
195 |
-
display: flex;
|
196 |
-
flex-direction: column;
|
197 |
-
gap: 1px;
|
198 |
-
}
|
199 |
-
|
200 |
-
.ability-name {
|
201 |
-
font-size: 8px;
|
202 |
-
font-weight: 600;
|
203 |
-
color: #495057;
|
204 |
-
line-height: 1.2;
|
205 |
-
overflow: hidden;
|
206 |
-
text-overflow: ellipsis;
|
207 |
-
white-space: nowrap;
|
208 |
-
}
|
209 |
-
|
210 |
-
.ability-counts {
|
211 |
-
display: flex;
|
212 |
-
justify-content: flex-end;
|
213 |
-
}
|
214 |
-
|
215 |
-
.ability-count {
|
216 |
-
font-size: 7px;
|
217 |
-
padding: 1px 3px;
|
218 |
-
background: rgba(0, 123, 255, 0.1);
|
219 |
-
color: #0066cc;
|
220 |
-
border-radius: 4px;
|
221 |
-
font-weight: 500;
|
222 |
-
line-height: 1;
|
223 |
-
}
|
224 |
</style>
|
|
|
55 |
></div>
|
56 |
</div>
|
57 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
58 |
</div>
|
59 |
</button>
|
60 |
|
|
|
151 |
border-radius: 1.5px;
|
152 |
transition: width 0.3s ease;
|
153 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
154 |
</style>
|