windmill/frontend/src/app.css

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
	overflow-y: auto;
}

@layer base {
	h1 {
		@apply text-2xl;
		@apply sm:pb-4 font-semibold;
	}

	h2 {
		@apply text-xl;
		@apply text-gray-700;
	}

	a {
		@apply text-blue-500;
	}
	
	.flex pre code.hljs {
		@apply text-sm;
	}

	#table-custom th {
		@apply py-3.5 text-left text-sm font-semibold text-gray-900 capitalize;
	}

	#table-custom td {
		@apply py-4 text-sm text-gray-700;
	}

	#table-custom tbody {
		@apply divide-y divide-gray-200;
	}

	.dropdown {
		@apply rounded-sm;
	}

	input[type='text'],
	textarea,
	select {
		@apply text-sm;
	}

	.text-2xs {
		font-size: 0.7rem;
	}

	.commit-hash {
		@apply text-2xs;
		@apply text-gray-500;
		@apply bg-gray-200;
		@apply font-mono;
	}

	.item-button {
		@apply cursor-pointer;
		@apply py-1;
		@apply border border-gray-300;
		@apply rounded-sm;
	}
	.item-button:hover {
		@apply border border-gray-800 bg-gray-100 border-opacity-50;
	}
	.item-button-selected {
		@apply py-1;
		@apply border border-blue-500;
		@apply bg-blue-50;
		@apply rounded-sm;
	}

	.blue-button {
		@apply bg-blue-500 !important;
		@apply hover:bg-blue-700 !important;
	}

	.default-button {
		/*this styling does not impact the Dropdown component */
		@apply bg-blue-500;
		@apply hover:bg-blue-700;
		@apply text-white;
		@apply font-bold;
		@apply py-1 px-2;
		@apply border rounded;
		@apply w-min;
		@apply min-w-max;
		@apply text-sm;
	}

	.default-button-disabled {
		/*this styling does not impact the Dropdown component */
		@apply bg-gray-100;
		@apply text-gray-300;
		@apply font-bold;
		@apply py-1 px-2;
		@apply border rounded;
		@apply w-min;
		@apply min-w-max;
		@apply text-sm;
	}

	.default-input {
		@apply block;
		@apply w-full;
		@apply py-1;
		@apply px-2;
		@apply mt-1;
		@apply rounded-md;
		@apply border;
		@apply border-gray-300;
		@apply shadow-sm;
		@apply text-sm;
	}

	.default-primary-button-v2 {
		@apply text-white;
		@apply bg-blue-500;
		@apply border;
		@apply border-blue-200;
		@apply font-medium;
		@apply rounded-lg;
		@apply text-sm;
		@apply px-5;
		@apply py-2.5; 
		@apply text-center; 
		@apply inline-flex;
		@apply items-center;
	}

	.default-primary-button-v2:focus {
		@apply ring-4; 
		@apply outline-none;
		@apply bg-blue-800;
	}
	.default-primary-button-v2:hover {
		@apply bg-blue-800 
	}

	.default-secondary-button-v2 {
		@apply text-gray-900;
		@apply bg-white;
		@apply border;
		@apply border-gray-200;
		@apply font-medium;
		@apply rounded-lg;
		@apply text-sm;
		@apply px-5;
		@apply py-2.5; 
		@apply text-center; 
		@apply inline-flex;
		@apply items-center;
	}

	.default-secondary-button-v2:focus {
		@apply ring-4; 
		@apply outline-none;
		@apply ring-gray-100;
	}
	.default-secondary-button-v2:hover {
		@apply bg-gray-100 
	}

	.input-error {
		@apply border-red-500 !important;
	}

	input[disabled],
	input:disabled,
	textarea[disabled],
	textarea:disabled {
		@apply bg-gray-100 !important;
	}

	button:disabled,
	button[disabled],
	a.disabled {
		/*this styling does not impact the Dropdown component */
		@apply bg-gray-100 !important;
		@apply text-gray-500 !important;
		@apply border-none !important;
		cursor: not-allowed !important;
		pointer-events: none !important;
	}

	button:disabled svg,
	button[disabled] svg,
	a.disabled svg {
		/*this styling does not impact the Dropdown component */
		@apply text-gray-500 !important;
	}

	.default-button-secondary {
		@apply items-center py-1 px-2;
		@apply rounded bg-transparent text-blue-500 border border-blue-500 font-normal;
		@apply hover:bg-transparent hover:border-blue-700 hover:text-blue-700;
		@apply border rounded;
		@apply w-min;
		@apply min-w-max;
		@apply text-sm;
	}

	input,
	input[type='date'],
	input[type='text'],
	input[type='number'],
	input[type='datetime-local'],
	select,
	textarea,
	textarea[type='text'] {
		@apply block;
		@apply w-full py-1 px-2;
		@apply border rounded-md border-gray-300;
		@apply shadow-sm;
		@apply focus:ring focus:ring-indigo-100 focus:ring-opacity-50;
		@apply text-sm;
	}
}

.inline-highlight pre code.hljs {
	padding: 0;
	@apply text-xs;
}