PLG-MuDiCS/control/frontend/src/app.css

@import 'tailwindcss';

/* Adding more color steps */
@theme {
	--color-stone-150: oklch(0.9465 0.002 77.571);
	--color-stone-250: oklch(0.896 0.004 52.542);
	--color-stone-350: oklch(0.789 0.0075 56.313);
	--color-stone-450: oklch(0.631 0.0115 57.165);
	--color-stone-550: oklch(0.4985 0.012 65.855);
	--color-stone-650: oklch(0.409 0.0105 70.599);
	--color-stone-750: oklch(0.321 0.0085 50.928);
	--color-stone-850: oklch(0.242 0.0065 45.171);
}

.link {
	@apply text-blue-300 underline;

	&:hover {
		@apply text-blue-400;
	}
}

.button {
	&.space {
		@apply px-4;
	}

	&.error {
		@apply text-red-400 hover:text-stone-100;

		&:hover {
			@apply bg-red-400;
		}
	}
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--color-stone-300) transparent;
}

/* Splitpanes */
.splitpanes.mudics-stone-theme {
	.splitpanes__pane {
		@apply bg-stone-900;
	}

	.splitpanes__splitter {
		@apply bg-transparent hover:bg-stone-700 active:bg-stone-600 transition-colors duration-200 shrink-0 relative box-border rounded mx-5;
		/* box-sizing: border-box;
        position: relative;
        flex-shrink: 0; */

		&:before,
		&:after {
			@apply bg-stone-750 transition-colors duration-200 absolute top-[50%] left-[50%] content-[''] rounded;
		}

		&:hover:before,
		&:hover:after {
			@apply bg-stone-400;
		}

		&:active:before,
		&:active:after {
			@apply bg-stone-300;
		}

		&:first-child {
			/* cursor: auto; */
		}
	}
}

.mudics-stone-theme {
	&.splitpanes .splitpanes .splitpanes__splitter {
		@apply z-10;
	}

	&.splitpanes--horizontal > .splitpanes__splitter,
	.splitpanes--horizontal > .splitpanes__splitter {
		@apply h-2 cursor-row-resize;

		&:before,
		&:after {
			@apply h-0.5 w-10 translate-x-[-50%];
		}

		&:before {
			@apply mt-[calc(-0.7*var(--spacing))];
		}

		&:after {
			@apply mt-[calc(0.1*var(--spacing))];
		}
	}
}