style.css

/* This will load Tailwindcss + all the overwrite from Yearn lib */
@import "@yearn-finance/web-lib/style.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;
}

@layer base {

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

/* 🔵 - 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 {
	--x-px: calc(var(--x) * 1px);
	--y-px: calc(var(--y) * 1px);
	--opacity: var(--opacity);
	--color: hsl(var(--color-neutral-300));
	@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];

	&:before,
	&:after {
		@apply pointer-events-none block absolute inset-[0px] z-[-1];
		content: "";
		z-index: -1;
		opacity: var(--opacity);
		background: radial-gradient(
			1200px circle at var(--x-px) var(--y-px),
			var(--color),
			transparent 40%
		);
		transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	&:before {
		@apply pointer-events-none z-[-1];
	}
}
:root.dark {
	& .appBox {
		--color: hsl(var(--color-neutral-100));
		@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-wrapper {
	@apply mb-2 hidden w-full grid-cols-8 px-10 md:grid;
}
.yearn--table-head-token-section {
	@apply col-span-3;
}
.yearn--table-head-data-section {
	@apply col-span-5 grid grid-cols-8 gap-x-7;
}
.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-8 md:border-none md:px-10;
}
.yearn--table-token-section {
	@apply col-span-3 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 md:h-10 md:w-10;
}
.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-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 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 .tooltiptext {
	@apply text-xs text-center invisible bg-neutral-0 text-neutral-900 absolute z-50 right-1 opacity-0 transition-opacity p-2;
	width: 15rem;
	top: 110%;
	margin-right: calc(-122px + 50%);
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
}
.tooltip:hover .tooltiptext {
	@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;
	}
}