Foundry/ripcrypt
1
0
Fork 0
Code Issues 22 Pull requests Releases Activity Actions

Finish the Skills Card redesign (closes #11)

Browse source
This commit is contained in:
Oliver-Akins 2025-04-12 00:09:45 -06:00
parent 1bf1b2cd91
commit 5b74fd6beb
3 changed files with 112 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

55
templates/Apps/HeroSkillsCardV1/style.css
View file

@ -6,7 +6,7 @@
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(13, minmax(0, 1fr));
grid-template-rows: repeat(14, minmax(0, 1fr));
column-gap: var(--col-gap);
row-gap: var(--row-gap);
@ -68,20 +68,20 @@
.grip-skills-header {
grid-column: 1 / span 1;
grid-row: 6 / span 1;
grid-row: 7 / span 1;
}
.grip-skills {
grid-column: 1 / span 1;
grid-row: 7 / span 4;
grid-row: 8 / span 4;
}
.glim-skills-header {
grid-column: 2 / span 1;
grid-row: 6 / span 1;
grid-row: 7 / span 1;
}
.glim-skills {
grid-column: 2 / span 1;
grid-row: 7 / span 4;
grid-row: 8 / span 4;
}
.gear-list {
@ -100,14 +100,29 @@
}
}
.ammo-list {
grid-column: 1 / span 2;
grid-row: 13 / span 2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
list-style-type: none;
padding: 0;
}
.currencies {
grid-column: 1 / span 2;
grid-row: 13 / span 1;
grid-row: 12 / span 1;
display: grid;
column-gap: var(--col-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aura-size {
grid-column: 3;
grid-row: 14;
}
.pill {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
@ -136,4 +151,32 @@
text-align: center;
}
}
.dual-pill {
border-radius: 999px;
background: var(--accent-1);
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0.25rem;
align-items: center;
padding-left: 8px;
.values {
border-radius: 999px;
margin: 2px;
background: var(--base-background);
color: var(--base-text);
padding: 0.125rem 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 0.5rem;
--slash-color: var(--accent-1);
}
.value {
flex-grow: 1;
text-align: center;
}
}
}