style.css

/* This will load Tailwindcss + all the overwrite from Yearn lib */
@import '@yearn-finance/web-lib/style.css';
@import '@rainbow-me/rainbowkit/styles.css';

@font-face {
	font-family: 'Aeonik Mono';
	src: url('public/fonts/AeonikMono-Regular.eot');
	src:
		local('Aeonik Mono Regular'),
		local('AeonikMono-Regular'),
		url('public/fonts/AeonikMono-Regular.eot?#iefix') format('embedded-opentype'),
		url('public/fonts/AeonikMono-Regular.woff2') format('woff2'),
		url('public/fonts/AeonikMono-Regular.woff') format('woff'),
		url('public/fonts/AeonikMono-Regular.ttf') format('truetype'),
		url('public/fonts/AeonikMono-Regular.svg#AeonikMono-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aeonik Mono';
	src: url('public/fonts/AeonikMono-Bold.eot');
	src:
		local('Aeonik Mono Bold'),
		local('AeonikMono-Bold'),
		url('public/fonts/AeonikMono-Bold.eot?#iefix') format('embedded-opentype'),
		url('public/fonts/AeonikMono-Bold.woff2') format('woff2'),
		url('public/fonts/AeonikMono-Bold.woff') format('woff'),
		url('public/fonts/AeonikMono-Bold.ttf') format('truetype'),
		url('public/fonts/AeonikMono-Bold.svg#AeonikMono-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

#main {
	@apply flex flex-col w-full h-full min-h-screen bg-neutral-0;
}

:root.v3 {
	--color-primary: 220 95% 50%;
	--color-neutral-900: 0 0% 96%;
	--color-neutral-800: 0 0% 96%;
	--color-neutral-700: 0 0% 92%;
	--color-neutral-600: 0 0% 88%;
	--color-neutral-500: 0 0% 62%;
	--color-neutral-400: 0 0% 50%;
	--color-neutral-300: 231 51% 19%;
	--color-neutral-200: 242 54% 27%;
	--color-neutral-100: 231 100% 11%;
	--color-neutral-0: 231 100% 6%;
}

@layer base {
	#swap {
		@apply scroll-mt-12 mb-0 md:mb-44;
	}

	.yearn--header {
		@apply !mb-0 !z-[99999];
	}
	.yearn--button {
		@apply rounded-lg;
		&[data-variant='filled'],
		&[data-variant='light'],
		&[data-variant='outlined'],
		&[data-variant='reverted'],
		&[data-variant='filled'] {
			@apply rounded-lg;
		}
		&[data-variant='v3'] {
			@apply text-neutral-900 bg-[#D21162] rounded-lg font-normal border border-transparent;
			&:disabled {
				@apply bg-[#D21162] opacity-40;
			}
			&:not(:disabled):not([aria-busy='true']):hover {
				@apply hover:bg-[#d21162]/80;
			}
		}
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** AppBox is the style used to make the nices animations on the home page feel nice and smooth
	** A custom overwrite is required for dark/light mode
	***************************************************************************************************/
	.appBox {
		@apply relative flex aspect-video h-full w-full cursor-pointer flex-col items-center border border-neutral-300/50 p-6 shadow shadow-transparent transition-all duration-[400ms] hover:bg-neutral-100/40;
	}
	:root.dark {
		& .appBox {
			@apply border-neutral-100/30;
		}
	}

	.yearn--button-smaller.reverted {
		@apply text-neutral-900 bg-neutral-0 font-normal border border-transparent;
		&:disabled {
			@apply bg-neutral-200 opacity-40;
		}
		&:not(:disabled):not([aria-busy='true']):hover {
			@apply bg-neutral-200;
		}

		&[aria-busy='true'] svg {
			@apply text-neutral-900;
		}
	}

	/* 🔵 - Yearn Finance ******************************************************************************
** Table
** Fake table properties
***************************************************************************************************/
	.yearn--table-head-label {
		@apply text-start text-base text-neutral-400;
	}
	.yearn--table-head-label-wrapper {
		@apply col-span-1 flex flex-row items-center justify-start space-x-1;
		&[datatype='number'] {
			@apply justify-end;
			& > .yearn--table-head-label {
				@apply text-end;
			}
		}
	}

	.yearn--table-wrapper {
		@apply grid w-full grid-cols-1 border-t border-neutral-200 py-2 px-4 md:grid-cols-[64px_repeat(7,_minmax(0,_1fr))] md:border-none md:px-10;
	}
	.yearn--table-token-section {
		@apply col-span-2 mb-2 flex flex-row items-center justify-between py-4 md:mb-0 md:py-0;
	}
	.yearn--table-token-section-item {
		@apply flex flex-row items-center space-x-4 md:space-x-6;
	}
	.yearn--table-token-section-item-image {
		@apply h-8 min-h-[32px] w-8 min-w-[32px] rounded-full md:flex;
	}
	.yearn--table-data-section {
		@apply col-span-5 grid grid-cols-1 gap-x-0 md:gap-x-7 md:grid-cols-8 gap-y-0;
	}
	.yearn--table-data-section-item-label {
		@apply inline text-start text-neutral-500 md:hidden text-sm;
	}
	.yearn--table-data-section-item-value {
		@apply text-neutral-900;
	}
	.yearn--table-data-section-item {
		@apply col-span-1 flex h-min flex-col md:flex-row justify-between pt-0 px-0 md:h-14 md:pt-4;
		&[datatype='number'] {
			@apply md:justify-end;
			& > .yearn--table-data-section-item-value {
				@apply font-number md:text-end;
			}
		}
	}
	.yearn--table-label {
		@apply inline text-start text-neutral-500 md:hidden;
	}

	.yearn--next-switch {
		@apply relative flex h-[18px] w-8 border-neutral-500 rounded-full cursor-pointer transition-colors ease-in-out duration-200 p-0 items-center border-2;
		&[aria-checked='true'] {
			@apply bg-neutral-400 border-neutral-900;
			& > div {
				@apply bg-neutral-900;
			}
		}
		&[aria-checked='false'] {
			@apply bg-transparent border-neutral-600;
			& > div {
				@apply bg-neutral-600;
			}
		}

		& > div {
			@apply mx-1 pointer-events-none inline-block h-2 w-2 rounded-full transition ease-in-out duration-200;
		}
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** Details and summary nice styles.
	***************************************************************************************************/
	details > summary {
		list-style: none;
	}
	details > summary::-webkit-details-marker {
		display: none;
	}
	details {
		@apply border-b border-neutral-300 last-of-type:border-b-0;

		& > summary {
			@apply px-4 md:px-6 py-6 md:py-8 cursor-pointer flex flex-row items-center justify-between;
		}

		& > summary .summary-chevron {
			@apply h-6 w-6 -rotate-90 text-neutral-900 transition-all;
		}
		&[open] > summary .summary-chevron {
			@apply rotate-0;
		}
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** The WordWrapper css is used for the animation with the text in the header. This animation require
	** letters to be splitted and a custom css is required to make it work.
	***************************************************************************************************/
	.wordWrapper {
		display: inline-block;
		vertical-align: top;
		margin: 0;
	}
	.word {
		@apply absolute text-neutral-900 font-bold text-5xl md:text-8xl uppercase text-center flex justify-center items-center w-[300px] md:w-[600px];
		opacity: 0;
	}
	.wordCenter {
		@apply absolute text-center flex justify-center items-center;
		opacity: 0;
	}
	.wordLeft {
		@apply absolute text-left flex justify-start items-center;
		opacity: 0;
	}
	.letter {
		display: inline-block;
		position: relative;
		float: left;
		transform: translateZ(25px);
		transform-origin: 50% 50% 25px;
	}
	.letter.out {
		transform: rotateX(90deg);
		transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	.letter.behind {
		transform: rotateX(-90deg);
	}
	.letter.in {
		transform: rotateX(0deg);
		transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** Recharts custom css overwrite, mostly used to make the chart works with our light/dark mode
	***************************************************************************************************/
	.recharts-surface {
		overflow: visible;
	}
	.recharts-tooltip-wrapper {
		@apply !bg-neutral-100 text-neutral-900;
	}
	.recharts-default-tooltip {
		@apply !bg-neutral-100 text-neutral-900;
	}
	.recharts-cartesian-axis-line {
		stroke: hsl(var(--color-neutral-300));
	}
	.recharts-cartesian-axis-tick-line {
		stroke: hsl(var(--color-neutral-300));
	}
	.recharts-tooltip {
		@apply p-2 bg-neutral-0 flex flex-col min-w-[160px];
		box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
	}
	.activeDot {
		stroke: hsl(var(--color-neutral-900));
		fill: hsl(var(--color-neutral-0));
	}

	/* 🔵 - Yearn Finance ******************************************************************************
** Tooltip
** In some place we need a tooltip to display some information on hover. This style controls the
** display of that tooltip.
**
** Usage:
**	<div className={'tooltip'}>
**		{'Something displayed'}
** 		<span className={'tooltiptext text-xs'}>
** 			<p>{'Tooltip content'}</p>
** 		</span>
** 	</div>
***************************************************************************************************/
	.tooltip {
		@apply relative;
	}
	.tooltip .tooltipLight {
		@apply invisible inset-x-0 absolute z-50 opacity-0 transition-opacity flex justify-center items-center;
	}
	.tooltip .tooltipFees {
		@apply invisible right-0 absolute z-50 opacity-0 transition-opacity;
	}
	.tooltip .tooltiptext {
		@apply text-xs text-center invisible bg-neutral-0 text-neutral-900 absolute z-50 -right-7 opacity-0 transition-opacity;
		width: 15rem;
		top: 130%;
		margin-right: calc(-122px + 50%);
		box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
	}
	.tooltip:hover .tooltiptext {
		@apply visible opacity-100;
	}
	.tooltip:hover .tooltipLight {
		@apply visible opacity-100;
	}
	.tooltip:hover .tooltipFees {
		@apply visible opacity-100;
	}

	.tooltip .tooltiptext::after {
		content: '';
		position: absolute;
		bottom: 98%;
		right: 50%;
		margin-right: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: hsl(var(--color-neutral-0)) transparent transparent transparent;
		transform: rotate(180deg);
	}

	.tooltip.top .tooltiptext {
		top: -105%;
		bottom: unset;
	}
	.tooltip.top .tooltiptext::after {
		top: 98%;
		transform: rotate(0deg);
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** Loader
	** Custom style for the loader icon
	***************************************************************************************************/
	.loader {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #fff;
		box-shadow:
			16px 0 #fff,
			-16px 0 #fff;
		position: relative;
		animation: flash 1s ease-out infinite alternate;
	}

	@keyframes flash {
		0% {
			background-color: #fff2;
			box-shadow:
				12px 0 #fff2,
				-12px 0 #fff;
		}
		50% {
			background-color: #fff;
			box-shadow:
				12px 0 #fff2,
				-12px 0 #fff2;
		}
		100% {
			background-color: #fff2;
			box-shadow:
				12px 0 #fff,
				-12px 0 #fff2;
		}
	}
}

.yearn--tab {
	@apply mx-5 flex h-full flex-col justify-center text-base cursor-pointer font-normal;
	&.selected {
		@apply cursor-default font-bold;
	}
}

.checkbox {
	@apply text-primary accent-primary rounded-sm border-primary border-0 focus:outline-primary outline-none !ring-opacity-0 indeterminate:border-primary-200 indeterminate:bg-primary-200 indeterminate:text-primary-200 indeterminate:accent-primary-200 indeterminate:focus:outline-primary-200 indeterminate:after:absolute indeterminate:after:ml-[0.2rem] indeterminate:after:mt-[6px] indeterminate:after:w-[0.5rem] indeterminate:after:border-[0.05rem] indeterminate:after:border-solid indeterminate:after:border-white indeterminate:focus:after:w-[0.5rem] indeterminate:focus:after:rounded-none indeterminate:focus:after:border-[0.125rem] indeterminate:focus:after:border-b-0 indeterminate:focus:after:border-l-0 indeterminate:focus:after:border-r-0;

	@apply focus:!outline-none focus:!ring-opacity-0;

	&[aria-busy='true'] {
		@apply border-neutral-300 bg-neutral-300 text-neutral-300 accent-neutral-300 rounded-sm focus:outline-neutral-300 relative after:animate-spin;
		background-image: none;
	}
	&[aria-busy='true']:after {
		height: 12px;
		width: 12px;
		position: absolute;
		left: 1px;
		top: 1px;
		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M415.136 355.749L415.133 355.754C405.65 372.24 411.246 393.373 427.754 402.867C444.239 412.349 465.369 406.755 474.865 390.251C496.879 352.28 509.5 308.05 509.5 261C509.5 118.219 393.781 2.5 251 2.5C231.919 2.5 216.5 17.9193 216.5 37C216.5 56.0807 231.919 71.5 251 71.5C355.619 71.5 440.5 156.381 440.5 261C440.5 295.547 431.223 327.917 415.136 355.749Z' fill='white' stroke='white' stroke-width='5' /%3e%3c/svg%3e");
	}

	&[aria-invalid='true'] {
		background-image: url("data:image/svg+xml,%3csvg height='1em' viewBox='0 0 384 512' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: center;
		@apply border-red-200 bg-red-200 text-red-200 accent-red-200 focus:outline-red-200;
	}
}

/* 🔵 - Yearn Finance ******************************************************************************
** Custom style for landing search input
***************************************************************************************************/
.yearn--landing-input {
	@apply bg-[#F4F4F4];
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		color: black !important;
		-webkit-text-fill-color: black !important;
		caret-color: black !important;
	}
}
:root.dark {
	& .yearn--landing-input {
		@apply bg-[#282828];
		input:-webkit-autofill,
		input:-webkit-autofill:hover,
		input:-webkit-autofill:focus,
		input:-webkit-autofill:active {
			color: white !important;
			-webkit-text-fill-color: white !important;
			caret-color: white !important;
		}
	}
}

/* 🔵 - Yearn Finance ******************************************************************************
** Custom style for autofilled text color
***************************************************************************************************/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	color: white !important;
	-webkit-text-fill-color: white !important;
	caret-color: white !important;
}