style.base.css

@import '@rainbow-me/rainbowkit/styles.css';

@tailwind base;

body {
	@apply text-neutral-900 bg-primary/10;
}
h1 {
	@apply text-xl font-bold text-neutral-900;
}
h4 {
	@apply text-lg font-bold text-neutral-700;
}
h6 {
	@apply text-base font-bold text-neutral-700;
}
small {
	@apply text-xxs font-normal text-neutral-600 block;
}
#__next {
	@apply w-full h-full;
}

/* 🔵 - Yearn Finance ******************************************************
** Overwritting the defaults to match our needs
**************************************************************************/
* {
	@apply scroll-smooth font-sans;
}
input::placeholder {
	@apply text-neutral-400 not-italic;
}
textarea::placeholder {
	@apply text-neutral-400 not-italic;
}
input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button {
	/* chromes and blink button */
	cursor: pointer;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
	transition: background-color 5000s ease-in-out 0s;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type='number'] {
	-moz-appearance: textfield;
}
label[aria-invalid='true'] {
	@apply text-neutral-600 transition-colors;
	& > form > div {
		@apply border-[#FE0000] focus-within:border-[#FE0000] text-[#FE0000] focus-within:text-[#FE0000];
	}
	& > p {
		@apply text-[#FF0000];
	}
}

:focus {
	outline-width: 0px;
	outline-offset: 0px;
	outline: none;
	outline-color: transparent;
}

/* -- Button.tsx ------------------------------------------------------- */
.smol--input-wrapper {
	@apply flex h-10 w-full items-center rounded-md border border-neutral-200 bg-neutral-0 transition-colors;

	&:has(input:focus) {
		@apply border-primary;
	}
}
.smol--input {
	@apply w-full overflow-x-scroll border-none bg-transparent text-sm outline-none scrollbar-none p-2;
}

select.smol--input {
	@apply pr-7 truncate;
}

/* 🔵 - Yearn Finance ******************************************************
** Then, we import the tailwind class. They will be able to overwrite all
** the previous classes, not the next ones directly.
**************************************************************************/
@tailwind components;
@tailwind utilities;

/* 🔵 - Yearn Finance ******************************************************
** NsProgress is used to display the loading indicator. All of theses
** styles are required to make it visible
**************************************************************************/
.nprogress-custom-parent {
	@apply overflow-hidden relative;
}
.nprogress-custom-parent #nprogress .spinner {
	@apply absolute;
}
.nprogress-custom-parent #nprogress .bar {
	@apply absolute;
}
#nprogress {
	@apply pointer-events-none;
}
#nprogress .bar {
	@apply bg-neutral-900 fixed top-0 left-0 w-full h-1 z-[1031];
}
#nprogress .spinner {
	@apply block fixed z-[1031] top-4 right-4;
}
#nprogress .spinner-icon {
	@apply hidden;
}

/* 🔵 - Yearn Finance ******************************************************
** Some accessibilities fixes
**************************************************************************/
.scrollbar-none::-webkit-scrollbar {
	display: none;
}
.scrollbar-none {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.yearn--select-reset {
	@apply bg-transparent p-0 border-none;
	&:focus {
		outline: none;
		box-shadow: none;
	}
}
.yearn--select-no-arrow {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none;
}
.yearn--select-no-arrow::-ms-expand {
	display: none;
}

/* 🔵 - Yearn Finance ******************************************************
** Some custom css for the components
**************************************************************************/
.img-gradient::after {
	content: '';
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
	@apply absolute inset-0 w-full h-full;
}

/* 🔵 - Yearn Finance ******************************************************
** Header an navbar
**************************************************************************/
.yearn--header {
	@apply inset-x-0 top-0 z-50 mb-5 flex h-20 w-full max-w-[1200px] flex-row items-center justify-between p-4 text-xs sm:text-sm md:inset-x-auto md:mb-0 md:px-0 md:text-base;
}
.yearn--nav {
	@apply hidden w-1/3 flex-row items-center space-x-3 md:flex md:space-x-6;
}
.yearn--header-nav-item {
	@apply relative cursor-pointer transition-colors text-neutral-600 hover:text-neutral-900 font-normal text-sm;

	&.active {
		@apply text-neutral-900 font-bold;
	}
}

.yearn--toast-options {
	@apply !w-screen text-sm text-neutral-700 !px-4 !rounded-none !shadow-none !py-2 !max-w-full;
}

.yearn--toast-button {
	@apply text-xs px-3 py-1 text-primary bg-white;
}

.mobile-nav-item {
	@apply flex flex-col items-start justify-between rounded-md bg-neutral-200;
	& > p {
		@apply p-2 text-base font-bold text-neutral-900;
	}
}
.mobile-nav-item {
	@apply rounded-none border-b border-neutral-300 bg-neutral-200/60;
}

.tab {
	@apply font-normal text-neutral-600 transition-colors hover:text-neutral-900 cursor-pointer border-b-2 border-transparent pb-4 z-20;
	&[aria-selected='true'] {
		@apply font-bold text-neutral-900 border-neutral-900;
	}
}
.hover-fix::before {
	display: block;
	content: attr(title);
	font-weight: bold;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.font-number {
	@apply font-mono tabular-nums;
}

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.TooltipContent[data-state='delayed-open'],
.PopoverContent[data-state='open'] {
	animation: fadeIn 100ms ease-out;
}
.TooltipContent[data-state='closed'],
.PopoverContent[data-state='closed'] {
	animation: fadeOut 100ms ease-in;
}

.DropdownMenuContent {
	width: var(--radix-dropdown-menu-trigger-width);
	max-height: var(--radix-dropdown-menu-content-available-height);
}

.skeleton-lg {
	@apply animate-pulse rounded-lg bg-neutral-400;
}
.skeleton-full {
	@apply animate-pulse rounded-full bg-neutral-400;
}

.withRing:focus-visible {
	@apply ring-2 ring-primary ring-offset-2;
}
.button {
	@apply cursor-pointer px-5 flex justify-center items-center h-10 text-base transition-all relative rounded-lg;
	@apply withRing;

	&[data-variant='filled'] {
		@apply text-white bg-black font-medium border border-transparent text-sm;
		&:disabled {
			@apply bg-neutral-600 opacity-40;
		}
		&:not(:disabled):not([aria-busy='true']):hover {
			@apply bg-primaryHover;
		}
	}
	&[data-variant='light'] {
		@apply text-neutral-900 bg-neutral-300 font-normal border border-transparent;
		&:disabled {
			@apply opacity-40;
		}
		&:not(:disabled):not([aria-busy='true']):hover {
			@apply bg-neutral-400;
		}
	}
	&[aria-busy='true'] {
		@apply cursor-wait;
		color: transparent !important;
	}
	&:disabled {
		@apply cursor-not-allowed;
	}
}

.input {
	@apply w-full rounded-lg bg-transparent py-3 px-4 text-base;
	@apply text-neutral-900 placeholder:text-neutral-600 caret-neutral-700;
	@apply focus:placeholder:text-neutral-300 placeholder:transition-colors;
	@apply focus:border-neutral-600 disabled:bg-neutral-300 transition-colors;
	@apply border-neutral-400 disabled:border-transparent;
}
.font-mono {
	font-family: 'Source Code Pro', monospace !important;
}
@layer base {
	.max-w-4xl,
	.max-w-5xl,
	.max-w-6xl {
		@apply px-4;
	}

	.font-number {
		@apply font-mono tabular-nums;
	}

	.yearn--header {
		@apply !p-0 !h-14;
	}

	/* 🔵 - Yearn Finance ******************************************************************************
** Table
** Fake table properties
***************************************************************************************************/
	.yearn--table-head-wrapper {
		@apply mb-2 hidden w-full grid-cols-9 px-6 md:grid;
	}
	.yearn--table-head-token-section {
		@apply col-span-3;
	}
	.yearn--table-head-data-section {
		@apply col-span-6 grid grid-cols-12 gap-x-7;
	}
	.yearn--table-head-label {
		@apply text-start text-sm 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-9 md:border-none md:px-6;
	}
	.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] md:flex md:h-10 md:w-10;
	}
	.yearn--table-data-section {
		@apply col-span-6 grid grid-cols-1 gap-x-0 md:grid-cols-12 gap-y-2 md:gap-y-0 mb-4 md:mb-0;
	}
	.yearn--table-data-section-item-label {
		@apply inline text-start text-neutral-600 md:hidden text-xs ml-1;
	}
	.yearn--table-data-section-item-value {
		@apply text-neutral-900;
	}
	.yearn--table-data-section-item {
		@apply col-span-1 flex h-auto flex-col justify-between pt-0 px-0 md:h-14 md:py-2;
		&[datatype='number'] {
			@apply md:justify-end font-number;
			& > .yearn--table-data-section-item-value {
				@apply font-number text-end;
			}
		}
	}
	.yearn--table-label {
		@apply inline text-start text-neutral-600 md:hidden;
	}

	/* 🔵 - Yearn Finance ******************************************************************************
	** Details and summary nice styles.
	***************************************************************************************************/
	details > summary {
		list-style: none;
	}
	details > summary::-webkit-details-marker {
		display: none;
	}
	details {
		& > summary {
			@apply px-4 md:px-6 py-6 md:py-8 cursor-pointer flex flex-row items-center justify-between;
		}
	}

	/* 🔵 - 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;
		}
	}
}

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

.box-0 {
	@apply bg-neutral-0 border border-primary/20 rounded-md shadow-sm;
	&.hover {
		@apply transition-colors hover:bg-neutral-200;
	}
}

.tooltip {
	@apply relative cursor-help;
}
.tooltip .tooltiptext,
.tooltip .tooltiptextsmall {
	@apply text-xs text-center invisible bg-neutral-0 text-neutral-900 absolute z-50 right-1 opacity-0 transition-opacity p-2 rounded;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
}
.tooltip .tooltipLight {
	@apply invisible absolute z-50 opacity-0 transition-opacity flex justify-center items-center;
}
.tooltiptext {
	top: 110%;
	width: 16rem;
	margin-right: calc(-122px + 50%);
}
.tooltiptextsmall {
	top: 150%;
	width: 10rem;
	margin-right: calc(-5rem + 4px);
}
.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptextsmall,
.tooltip:hover .tooltipLight {
	@apply visible opacity-100;
}
.tooltip .tooltiptext::after,
.tooltip .tooltiptextsmall::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,
.tooltip.top .tooltiptextsmall {
	top: -105%;
	bottom: unset;
}
.tooltip.top .tooltiptext::after,
.tooltip.top .tooltiptextsmall::after {
	top: 98%;
	transform: rotate(0deg);
}

.modal {
	@apply inline-block overflow-hidden relative z-50 w-full text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle md:mb-96 mx-auto md:max-w-4xl bg-transparent;
}
.modal-overlay {
	@apply fixed inset-0 z-10 bg-neutral-900/40 transition-opacity backdrop-blur-[1px];
}
.detailsMigrate {
	@apply bg-neutral-0 flex w-full flex-col justify-center border-t border-b-0 border-neutral-200 transition-colors;
}

/**************************************************************************************************
** 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-start border border-neutral-200 p-4 transition-colors rounded-md bg-neutral-0 hover:bg-primary text-neutral-900;
}

.groupHoverText {
	&:hover .noHoverContent {
		@apply opacity-0;
	}
	&:hover .withHoverContent {
		@apply opacity-100;
	}
}
.approvalWizardDivider {
	& > *:last-child {
		@apply border-b-0 !mb-0 !pb-0;
	}
}

.container {
	@apply flex flex-row justify-between items-center space-x-10 relative max-w-xs;
	& > dt {
		@apply bg-primary z-10 pr-2;
	}
	& > dd {
		@apply bg-primary z-10 pl-2 font-number whitespace-nowrap;
	}
}
.filler {
	@apply w-3/4 border-b-2 border-dashed border-neutral-0 absolute inset-0 h-full;
	top: calc(-50% + 1px);
}

.svg-fit {
	& > svg {
		@apply w-full h-full;
	}
}

.addr > span {
	& > span {
		@apply break-normal;
	}
	@apply break-all;
}

.scrollbar-show::-webkit-scrollbar {
	-webkit-appearance: none;
	overflow: hidden;
	width: 4px;
}
.scrollbar-show::-webkit-scrollbar-thumb {
	@apply rounded-md;
	background-color: rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
}

.scrollable {
	@apply -mr-2 pr-1 overflow-y-auto;
	scrollbar-gutter: stable;
}

* {
	scrollbar-color: #f7f7f7;
	scroll-behavior: smooth;

	&::-webkit-scrollbar {
		background: #f7f7f7;
		border-radius: 14px;
		width: 4px;
		height: 4px;
	}

	&::-webkit-scrollbar-thumb {
		background: #dcdddd;
		border-radius: 14px;
		background-clip: padding-box;
	}
}