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

Tweak the template/css structure

Browse source
This commit is contained in:
Oliver-Akins 2025-01-05 11:55:29 -07:00
parent 1afffb0a73
commit 56fe115407
24 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

188
templates/Apps/HeroSummaryCardV1/style.css Normal file
View file

@ -0,0 +1,188 @@
.ripcrypt .HeroSummaryCardV1 {
/* Foundry Variable Tweaks */
--input-height: 1rem;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 2.5fr);
grid-template-rows: repeat(15, minmax(0, 1fr));
column-gap: var(--col-gap);
background: var(--base-background);
color: var(--base-text);
.col-header {
background: var(--section-header-background);
color: var(--section-header-text);
}
.row-alt {
background: var(--alt-row-background);
color: var(--alt-row-text);
}
label, .label {
box-sizing: border-box;
padding: 2px 4px;
text-transform: uppercase;
font-size: var(--font-size-14);
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.header {
grid-row: span 2;
grid-column: span 1;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
.image {
grid-row: span 2;
display: flex;
justify-content: center;
align-items: center;
}
}
.hero_name {
grid-column: span 3;
margin-left: calc(var(--col-gap) * -1);
padding-left: var(--col-gap);
}
.glory-label {
grid-column: 2 / span 1;
grid-row: 4 / span 1;
}
.glory {
grid-column: 2 / span 1;
grid-row: 5 / span 1;
}
.step-label {
grid-column: 3 / span 1;
grid-row: 4 / span 1;
}
.step {
grid-column: 3 / span 1;
grid-row: 5 / span 1;
}
.rank-label {
grid-column: 4 / span 1;
grid-row: 4 / span 1;
}
.rank {
grid-column: 4 / span 1;
grid-row: 5 / span 1;
}
.fate {
grid-column: 1 / span 1;
grid-row: 4 / span 2;
display: grid;
grid-template-rows: subgrid;
}
.weapons {
grid-column: 1 / span 4;
grid-row: 7 / span 5;
display: grid;
grid-template-columns: subgrid;
grid-auto-rows: min-content;
overflow-y: auto;
thead,
tbody,
tr {
display: contents;
}
.row-alt > * {
background: inherit;
}
}
.abilities {
grid-column: 1 / span 4;
grid-row: 12 / span 4;
display: grid;
/* grid-template-rows: minmax(0, 3fr) minmax(0, 1fr); */
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.ability {
display: grid;
grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
justify-items: center;
align-items: center;
position: relative;
label, .label {
width: 100%;
text-align: center;
}
}
.compass {
--size: 45px;
width: var(--size);
height: var(--size);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid var(--accent-1);
border-radius: 50%;
font-size: 1.5rem;
position: relative;
> .value {
background: none;
width: 70%;
text-align: center;
padding: 0;
}
> .roll {
--distance: -15%;
position: absolute;
top: var(--distance);
right: var(--distance);
z-index: 2;
}
&.dual {
font-size: var(--font-size-14);
--distance-from-edge: 4px;
&::after {
display: block;
content: "";
width: 69%;
height: 2px;
background: var(--accent-1);
transform: rotate(-45deg);
}
> .value,
> .max {
width: 50%;
position: absolute;
text-align: center;
/* border-bottom: none; */
}
> .value {
top: var(--distance-from-edge);
left: var(--distance-from-edge);
clip-path: polygon(100% 0, 100% 60%, 60% 100%, 0 100%, 0 0);
}
> .max {
bottom: var(--distance-from-edge);
right: var(--distance-from-edge);
}
}
}
}