granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add card elevation on gridrep hover

Browse source
This commit is contained in:
Justin Edmund 2025-12-21 12:30:18 -08:00
parent 6a6e33275d
commit aeea96cb8f
1 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/lib/components/reps/GridRep.svelte
View file

@ -102,8 +102,9 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/effects' as effects;
@use '$src/themes/layout' as *; @use '$src/themes/spacing' as spacing;
@use '$src/themes/layout' as layout;
@use '$src/themes/rep' as rep; @use '$src/themes/rep' as rep;
.gridRep { .gridRep {
@ -126,21 +127,23 @@
a { a {
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
gap: $unit; gap: spacing.$unit;
padding: $unit; padding: spacing.$unit;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $card-corner; border-radius: layout.$card-corner;
box-sizing: border-box; box-sizing: border-box;
background: var(--card-bg); background: var(--card-bg);
overflow: hidden; overflow: hidden;
&:hover { &:hover {
background: var(--grid-rep-hover); background: var(--grid-rep-hover);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1),
effects.$card-elevation;
} }
&:hover .indicators { &:hover .indicators {
@ -168,8 +171,8 @@
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit-fourth; gap: spacing.$unit-fourth;
padding: $unit-half 0; padding: spacing.$unit-half 0;
min-width: 0; /* Critical: allows flex child to shrink below content size */ min-width: 0; /* Critical: allows flex child to shrink below content size */
h2 { h2 {
@ -191,7 +194,7 @@
.details { .details {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $unit; gap: spacing.$unit;
justify-content: space-between; justify-content: space-between;
min-width: 0; min-width: 0;
} }
@ -200,7 +203,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: $unit-half; gap: spacing.$unit-half;
overflow: hidden; overflow: hidden;
flex: 0 1 auto; flex: 0 1 auto;
min-width: 0; min-width: 0;
@ -235,8 +238,8 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 $unit-half; padding: 0 spacing.$unit-half;
border-radius: $full-corner; border-radius: layout.$full-corner;
flex-shrink: 0; flex-shrink: 0;
&.chargeAttack { &.chargeAttack {
@ -260,7 +263,7 @@
.indicators { .indicators {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $unit; gap: spacing.$unit;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
list-style: none; list-style: none;
@ -278,8 +281,8 @@
.indicator { .indicator {
transition: background-color 0.12s ease-in-out; transition: background-color 0.12s ease-in-out;
height: $unit; height: spacing.$unit;
border-radius: $unit-half; border-radius: spacing.$unit-half;
background-color: var(--button-contained-bg-hover); background-color: var(--button-contained-bg-hover);
} }
} }