style.css

@import './style.base.css';

.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;
	}
}