taf/styles/Apps/PlayerSheet.css

.taf.PlayerSheet {
	> .window-content {
		background: var(--actor-sheet-background);
	}

	.sheet-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem;
		margin: -0.5rem -0.5rem 0;
		color: var(--actor-sheet-header-colour);
		background: var(--actor-sheet-header-background);
		border-bottom: 1px solid var(--actor-sheet-divider-colour);

		img {
			border-radius: 4px;
		}

		input {
			color: var(--actor-sheet-header-input-colour);
			background: var(--actor-sheet-header-input-background);
		}
	}

	.attributes {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		gap: 0.25rem;

		fieldset {
			color: var(--attribute-colour);
			background: var(--attribute-background);
			border-radius: 6px;
			border: none;
			padding: 6px;
		}
	}

	.attr-range {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 4px;
		width: 100px;
		margin: 0 auto;

		> input {
			color: var(--attribute-colour);
			background: var(--attribute-input-background);
			text-align: center;
			height: 24px;
			min-height: unset;
		}
	}

	.items-tab.active,
	.attributes-tab.active {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.inventory-summary {
		display: flex;
		flex-direction: row;
		gap: 4px;
		align-items: center;
		background: var(--inventory-summary-background);
		color: var(--inventory-summary-colour);
		padding: 6px;
		border-radius: 4px;

		input {
			width: 75px;
			text-align: center;
			background: var(--inventory-input-background);
			color: var(--inventory-input-colour);
			text-align: center;

			&:disabled {
				color: var(--inventory-input-disabled-colour);
				cursor: not-allowed;
			}
		}
	}

	.embedded-list-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		border-radius: 6px 6px 0 0;
		padding: 6px 6px 4px;
		margin-bottom: 2px;
		background: var(--embedded-list-header-background);
		color: var(--embedded-list-header-colour);

		button {
			padding: 2px;
			border: none;
			aspect-ratio: 1;
			height: unset;
			min-height: unset;
			background: var(--embedded-list-header-input-background);
			color: var(--embedded-list-header-input-colour);
		}
	}

	.embedded-list {
		display: flex;
		flex-direction: column;
		gap: 2px;
		list-style: none;
		margin: 0;
		padding: 0;

		&.two-col {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.item {
		background: var(--item-card-background);
		color: var(--item-card-colour);
		overflow: hidden;
		margin-bottom: 0;

		.summary {
			display: grid;
			grid-template-columns: min-content auto 1fr 50px auto;
			align-items: center;
			gap: 8px;
			background: var(--item-card-header-background);
			color: var(--item-card-header-colour);
			padding: 4px;

			img {
				--size: 35px;
				width: var(--size);
				height: var(--size);
				border-radius: 6px;
			}

			.title {
				display: flex;
				flex-direction: column;
				gap: 4px;
			}

			.name {
				font-size: 1.1rem;
			}
			.subtitle {
				font-size: 0.7rem;
				opacity: 90%;
			}

			input, button {
				background: var(--item-card-header-input-background);
				color: var(--item-card-header-input-colour);
				text-align: center;

				&:disabled {
					color: var(--item-card-header-disabled-input-colour);
				}
			}
		}

		.expand-button {
			border: none;
			aspect-ratio: 1;

			&:focus-visible {
				filter: brightness(150%);
				outline: none;
			}

			&[data-expanded="true"] {
				rotate: 180deg;
			}
		}

		.full-details {
			padding: 4px;

			&[data-expanded="false"] {
				display: none;
			}
		}

		&:last-child {
			border-radius: 0 0 6px 6px;
		}
	}

	.attribute {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		background: var(--attribute-background);
		color: var(--attribute-colour);
		padding: 4px;
		margin: 0;

		.name {
			font-size: 1.1rem;
		}

		input {
			width: 50px;
		}

		input, button {
			border: none;
			background: var(--attribute-input-background);
			color: var(--attribute-input-colour);
			text-align: center;
			height: 24px;
			min-height: unset;

			&:focus-visible {
				outline: 1px solid var(--attribute-input-focus-colour);
			}

			&:disabled {
				color: var(--attribute-disabled-input-colour);
			}
		}

		&:last-child:nth-child(odd) {
			grid-column: 1 / -1;
			border-radius: 0 0 6px 6px;
		}
		&:nth-last-child(2):has( + &:nth-child(even)) {
			border-radius: 0 0 0 6px;
		}
		&:last-child:nth-child(even) {
			border-radius: 0 0 6px 0;
		}
	}

	.content {
		border-radius: 6px;
		flex-grow: 1;
		overflow: hidden;
		--table-row-color-odd: var(--table-header-bg-color);

		&:not(:has(> prose-mirror)) {
			padding: 0.5rem;
		}
	}

	prose-mirror {
		height: 100%;

		menu {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
	}
}