matrix_spraying_vue/src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--primaryColor: #26509c;
	--headerHeight: 64px;
	--footerHeight: 64px;
	--borderWidth: 24px;
}
@layer utilities {
	.dark-gradient {
		background: linear-gradient(110deg, #0349a8 11%, #1663b7 105%);
	}
	.btn-dark {
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);
		border-radius: 4px;
		color: white;
	}
	.btn-dark:disabled {
		background: #ccc;
	}

	.btn-light {
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(180deg, #ebf1fa 0%, #f8fafd 100%);
		box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3), 0px 1px 5px 0px rgba(173, 173, 173, 0.47);
		border-radius: 4px;
		color: var(--primaryColor);
	}
	.btn-light:disabled {
		background: #ccc;
		color: #fff;
	}
	.main-page {
		/* height: calc(100vh - var(--headerHeight));
		background: linear-gradient(180deg, #dfe8f7 0%, #ffffff 100%); */
	}
	.shadow-card {
		background: linear-gradient(180deg, #e8effa 0%, #fdfdfe 100%);
		box-shadow: 0px -1px 0px 0px #ffffff, 0px 2px 6px 0px rgba(174, 174, 174, 0.2);
		border-radius: 15px;
	}
	.true {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: var(--primaryColor);
		border-radius: 6px;
		padding: 6px 10px;
	}
	.false {
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--primaryColor);
		background-color: #e8ecf7;
		border-radius: 6px;
		padding: 6px 10px;
	}
}