ripcrypt/templates/Apps/HeroSummaryCardV1/style.css

.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;
		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;
	}
	.fate-value {
		padding-left: 2px;
	}

	.weapons {
		grid-column: 1 / span 4;
		grid-row: 7 / span 5;
		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;

		thead,
		tbody,
		tr {
			display: contents;
		}
		td {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 4px;
		}
		.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%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: 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;
		background: var(--base-background);

		> .value {
			background: none;
			width: 70%;
			text-align: center;
			padding: 0;
		}

		> .roll {
			--distance: -15%;
			position: absolute;
			top: var(--distance);
			right: var(--distance);
			z-index: 2;
		}

		&.small {
			--size: 35px;
			font-size: 1.1rem;
		}

		&.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);
			}
		}
	}

	.armour {
		grid-column: -2 / span 1;
		grid-row: 1 / -1;
		display: grid;
		grid-template-rows: subgrid;

		.section-header {
			text-align: right;
		}

		.person {
			grid-row: 2 / span 9;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
			justify-items: center;
			align-items: center;
			position: relative;

			> div {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				z-index: 1;
			}

			> rc-svg {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 58%;
			}
		}

		/* Positioning */
		.head, .body, .legs { grid-column: 1; }
		.arms { grid-column: 2; }
		.head { grid-row: 1; }
		.body, .arms { grid-row: 2; }
		.legs { grid-row: 3; }

		.shield {
			--distance: -7px;
			position: absolute;
			top: var(--distance);
			right: var(--distance);
		}

		.armour-items {
			display: contents;

			> li {
				display: flex;
				flex-direction: row-reverse;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				padding: 0 4px;
				gap: 4px;
				min-width: 0;
			}

			.label {
				text-overflow: initial;
				flex-shrink: 0;
			}
		}
	}
}