Compact Inventory en

Installations 24 Likes 2

Changes the layout of Inventory items to a more compact horizontal spread so you can see more items at once.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

Latest version 1.0 View content

Released 6 months ago

Initial release.

Plugin CSS for 1.0


/* BEGIN Compact Inventory by Salvatos */
/* Unset fixed height */
.box-entity-inventory .h-60 {
	height: auto;
}
/* Change to display: grid */
.box-entity-inventory [data-position] div[data-toggle="dialog"] {
	display: grid;
	grid-template-columns: 5rem auto;
	grid-template-areas: "topleft topright"
						 "bottomleft bottomright";
	/* Make direct descendants participate in parent grid */
	> div:not(.cover-background) { /* Except custom images which have no children */
		display: contents;
	}
	/* Place and style each piece of info */
	.item-amount {
		grid-area: topleft;
		&::first-letter {
			color: transparent; /* Remove the odd "+" */
		}
		&::after {
			content: "x"
		}
	}
	.text-lg {
		grid-area: topright;
	}
	div.rounded-full {
		grid-area: bottomleft;
      	height: 4rem;
		width: 4rem;
		margin: 0 auto;
		i { /* Center Font Awesome icons */
			margin: inherit;
		}
	}
	.text-xs {
		grid-area: bottomright;
	}
}
/* END Compact Inventory by Salvatos */