style.css

/* This will load Tailwindcss + all the overwrite from Yearn lib */
@import '@yearn-finance/web-lib/style.css';
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');

/* 📰 - Keep3r *****************************************************************
** Styling overwrites for the Keep3r theme
******************************************************************************/
:root {
	--color-dark: 0 0 0;
	--color-neutral-0: 0 0% 100%;	/* white */
	--color-neutral-100: 0 0% 100%;	/* white */
	--color-neutral-200: 0 0% 96%;	/* grey-1 */
	--color-neutral-300: 0 0% 87%;	/* grey-2 */
	--color-neutral-400: 0 0% 53%;  /* grey-3 */
	--color-neutral-500: 0 0% 53%;  /* grey-3 */
	--color-neutral-700: 0 0% 0%;   /* black */
	--color-neutral-800: 0 0% 17%;  /* black-1 */
	--color-neutral-900: 0 0% 0%;   /* black */

	--color-primary-100: 0 0% 0%;   /* black */
	--color-primary-200: 0 0% 0%;   /* black */
	--color-primary-500: 0 0% 0%;   /* black */
	--color-primary-600: 0 0% 0%;   /* black */
	--color-accent-500: 0 0% 0%;    /* black */
	--color-accent-600: 0 0% 0%;    /* black */
	--default-rounded: 0rem;
	@apply bg-neutral-200;
}
input::placeholder {@apply text-grey-2 not-italic}
textarea::placeholder {@apply text-grey-2 not-italic}
#nprogress .bar {@apply bg-white}
#nprogress .spinner-icon {@apply border-t-white border-l-white;}

/* 📰 - Keep3r *****************************************************************
** Shorthand for some group of style used across the application
******************************************************************************/
.menu_item {
	@apply flex flex-col space-y-3 cursor-pointer;
	& > b {@apply text-grey-2 transition-colors;}
	& > div {@apply w-full h-1 bg-transparent transition-colors;}
	&:hover {
		& > b {@apply text-grey-3;}
		& > div {@apply w-full h-1 bg-grey-3;}
	}
	&[aria-selected="true"] {
		& > b {@apply text-white group-hover:text-white;}
		& > div {@apply bg-white;}
	}
}

.yearn--button {
	@apply cursor-pointer px-3 flex justify-center items-center h-12 text-intermediate transition-colors relative rounded-none w-full;

	&[data-variant="filled"] {
		@apply text-white bg-black font-bold;
		&:disabled {@apply bg-grey-3 text-grey-2 opacity-100;}
		&:not(:disabled):not(&[aria-busy="true"]):hover {@apply bg-grey-1;}
	}
	&[data-variant="reverted"] {
		@apply text-black bg-white font-bold border-black border;
		&:disabled {@apply bg-grey-3 text-grey-2 border-grey-3 opacity-100;}
		&:not(:disabled):not(&[aria-busy="true"]):hover {@apply bg-grey-4;}
	}
	&[aria-busy="true"] {@apply !text-white/0 cursor-wait;}
	&:disabled {@apply cursor-not-allowed opacity-100;}
}

.image-align-middle {}

input {
	@apply !bg-white/0;
}


.yearn--modal {
	@apply sm:max-w-2xl border-2 border-primary-500;
}
.yearn--modalLogin-card {
	@apply hover:bg-neutral-200 text-xs md:text-sm;
}

.yearn--modalLogin-card b {
	@apply text-sm md:text-lg;
}

.yearn--modalLogin-card {
	& * {@apply !font-mono;}
}

.yearn--modalMobileMenu-walletCard {
	@apply bg-grey-5;
}

.yearn--select-no-arrow {
	@apply !pr-6 text-sm;
}