Compact Inventory

Compact Inventory

Install
Salvatos
23rd May, 2024
28 installations 2 likes

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): Support me on Ko-fi.com

Latest version 1.0

Released 10 months ago on 23rd May, 2024

Initial release.

CSS rules

/* 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 */
 Install

User comments & reviews