deemix-gui/webui/src/styles/css/components.css

@layer components {
	/* Button */
	.btn {
		@apply relative h-8 px-2 py-0 text-sm font-semibold uppercase border border-transparent border-solid rounded text-grayscale-900;

		font-family: inherit;
		transition: transform 50ms ease-in-out;
	}

	.btn:active {
		transform: scale(0.98);
	}

	.btn[disabled] {
		@apply text-gray-300 bg-gray-600 opacity-75 cursor-not-allowed;
	}

	.btn-only-icon {
		@apply flex items-center justify-center w-12 px-1 py-0;

		min-width: 24px;
	}

	.btn-primary {
		@apply bg-primary;
	}
	.btn-flat {
		background-color: rgba(0, 0, 0, 0);
		color: var(--foreground);
	}

	.btn-primary:hover {
		@apply bg-purple-600;
	}

	/* Section tabs */
	.section-tabs {
		@apply flex mt-4 mb-6 list-none cursor-pointer;
	}

	.section-tabs__tab {
		@apply flex-1 p-3 text-xl text-center capitalize border-t-4 rounded-b border-foreground bg-background-main;
	}

	.section-tabs__tab.active {
		@apply text-primary border-primary bg-background-main;
	}

	.section-tabs__tab:hover {
		@apply text-primary border-primary bg-background-secondary;
		@apply bg-opacity-25;
	}

	/* Image header */
	.image-header header {
		@apply px-6 pt-56 pb-2 bg-cover rounded-t-lg;

		background-position: 0% 35%;
	}

	/* Fixed footer */
	.fixed-footer footer {
		@apply sticky bottom-0 flex flex-row items-center justify-end w-full h-16 mt-6;
	}

	/* Release grid */
	.release-grid {
		@apply grid gap-4;

		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	}

	.tag {
		padding: 3px;
		background-color: var(--primary-color);
		font-size: 10px;
		border-radius: 3px;
	}
}