spacedrive/interface/app/style.scss

a,
button {
	cursor: default !important;
}

body {
	// font-family: 'InterVariable', sans-serif;
}

.app-background {
	@apply bg-app;
}

.has-blur-effects {
	.app-background {
		// adjust macOS blur intensity here
		// @apply bg-app/[0.88];
		@apply bg-app;
	}
}

.no-scrollbar {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.custom-scroll {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll;
}

.explorer-scroll {
	&::-webkit-scrollbar {
		height: 6px;
		width: 6px;
	}
	&::-webkit-scrollbar-track {
		@apply mt-[46px] rounded-[6px] bg-[#00000000];
	}
	&::-webkit-scrollbar-thumb {
		@apply rounded-[6px] bg-transparent;
	}
	&::-webkit-scrollbar-corner {
		background-color: transparent;
	}
	&:hover {
		&::-webkit-scrollbar-thumb {
			@apply bg-app-divider/20;
		}
	}
}
.default-scroll {
	&::-webkit-scrollbar {
		height: 6px;
		width: 8px;
	}
	&::-webkit-scrollbar-track {
		@apply rounded-[6px] bg-transparent;
	}
	&::-webkit-scrollbar-thumb {
		@apply rounded-[6px] bg-app-box;
	}
}
.page-scroll {
	&::-webkit-scrollbar {
		height: 6px;
		width: 8px;
	}
	&::-webkit-scrollbar-track {
		@apply my-[10px] rounded-[6px]  bg-transparent;
	}
	&::-webkit-scrollbar-thumb {
		@apply rounded-[6px] bg-app-box;
	}
}
.job-manager-scroll {
	&::-webkit-scrollbar {
		height: 6px;
		width: 8px;
	}
	&::-webkit-scrollbar-track {
		@apply my-[2px] rounded-[6px]  bg-transparent;
	}
	&::-webkit-scrollbar-thumb {
		@apply rounded-[6px] bg-app-shade/20;
	}
}
.inspector-scroll {
	// overflow: overlay;
	&::-webkit-scrollbar {
		height: 6px;
		width: 5px;
	}
	&::-webkit-scrollbar-track {
		@apply my-[8px] bg-transparent;
	}
	&::-webkit-scrollbar-thumb {
		@apply rounded-[6px] bg-app/70 opacity-0;
	}
	&:hover {
		&::-webkit-scrollbar-thumb {
			@apply opacity-100;
		}
	}
}

.overlay-scroll {
	// overflow: overlay;
	&::-webkit-scrollbar {
		height: 6px;
		width: 5px;
	}
	&::-webkit-scrollbar-track {
		@apply my-[5px] bg-transparent;
	}
	&::-webkit-scrollbar-thumb {
		@apply w-[5px] rounded-[6px] bg-black/70 opacity-0;
	}
	&:hover {
		&::-webkit-scrollbar-thumb {
			@apply opacity-100;
		}
	}
}

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

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

@-webkit-keyframes slide-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
	}
}
@keyframes slide-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
	}
}

.dialog-overlay[data-state='open'] {
	animation: fadeIn 200ms ease-out forwards;
}
.dialog-overlay[data-state='closed'] {
	animation: fadeIn 200ms ease-out forwards;
}
.dialog-content[data-state='open'] {
	-webkit-animation: slide-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	animation: slide-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.dialog-content[data-state='closed'] {
	animation: bounceDown 100ms ease-in forwards;
}

.picker {
	position: relative;
}

.swatch {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

.popover {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	border-radius: 9px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.react-colorful__saturation {
	border-radius: 4px !important;
}

.react-colorful__saturation-pointer {
	width: 12px !important;
	height: 12px !important;
}

.react-colorful__hue,
.react-colorful__alpha {
	margin-top: 12px !important;
	height: 8px !important;
	border-radius: 4px !important;
}

.react-colorful__hue-pointer,
.react-colorful__alpha-pointer {
	height: 18px !important;
	width: 8px !important;
	border-radius: 3px !important;
}

.selecto-selection {
	@apply rounded;
	border-color: hsla(var(--color-accent));
	background-color: hsla(var(--color-accent), 0.2) !important;
	z-index: 10 !important;
}