lassistanoque/backend/web/src/routes/layout.css

@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

html {
	@apply h-full;
}
body {
	@apply h-full bg-stone-100 text-stone-950 dark:bg-stone-950 dark:text-stone-100;
}

label {
	@apply text-xs text-stone-600 uppercase dark:text-stone-400;
}
hr {
	@apply border-stone-200 dark:border-stone-800;
}
h2 {
	@apply mb-4 text-base font-bold;
}

.container {
	@apply mx-auto max-w-3xl;
}

.pointer {
	@apply cursor-pointer;
}
.bt {
	appearance: button;
	@apply min-w-40 cursor-pointer rounded bg-stone-300 px-4 py-1 transition-all duration-300 hover:bg-stone-400 dark:bg-stone-800 dark:hover:bg-stone-700;
	&.small {
		@apply min-w-2 px-2 py-1;
	}
	&.changed,
	&.saving {
		@apply bg-cyan-400 dark:bg-cyan-600;
	}
	&.saved {
		@apply bg-green-300 dark:bg-green-700;
	}
	&.error {
		@apply bg-red-300 dark:bg-red-700;
	}
	&.disabled {
		@apply text-stone-400 hover:bg-stone-200 dark:hover:bg-stone-800;
	}
	&.highlight {
		@apply text-sky-700 dark:text-sky-300;
	}
}
.menuitem {
	@apply text-stone-950 dark:text-stone-300 hover:dark:text-stone-50;
}

.header {
	@apply py-2 text-lg font-bold;
}

.public h1 {
	@apply mb-4 text-3xl font-bold;
}
.profile a {
	@apply bg-sky-300 dark:bg-sky-700;
}
.public a {
	@apply text-sky-500 dark:text-sky-500;
}

#outer {
	@apply flex h-full flex-row;
}
#main {
	@apply flex w-full flex-col;
}
#sidebar {
	@apply min-w-64 border-r border-r-stone-200 transition-all duration-300 dark:border-stone-800;
}

#content {
	@apply p-2;
}
#hamburgerDesktop,
#hamburgerMobile {
	@apply hidden;
}

@media (width >= 640px) {
	#hamburgerDesktop {
		@apply inline;
	}
	.desktopMenuClosed {
		#sidebar {
			@apply w-10 min-w-10;
		}
	}
}

@media (width < 640px) {
	#hamburgerMobile {
		@apply inline;
	}
	#main {
		@apply ml-10;
	}
	#sidebar {
		@apply fixed left-0 h-full w-full bg-stone-100 dark:bg-stone-950;
	}
	.mobileMenuClosed {
		#sidebar {
			@apply fixed w-10 min-w-10;
		}
	}
}

.chatinput {
	@apply w-full rounded-l-xl border-stone-300 bg-stone-50 p-2 text-stone-900 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100;
}

.chatbutton {
	@apply min-w-12 cursor-pointer rounded-r-xl bg-stone-300 px-2 py-1 transition-all duration-300 hover:bg-stone-400 dark:bg-stone-700 dark:hover:bg-stone-600;
}

/* form */

.formgroup {
	@apply rounded border border-stone-300 bg-stone-200 p-2 text-sm dark:border-stone-700 dark:bg-stone-900;
}

.formelement {
	@apply mb-3;
}

.textinput {
	@apply h-8 w-full rounded border-stone-300 bg-stone-50 px-2 py-1 text-sm text-stone-900 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100;
}

.areainput {
	@apply w-full rounded border-stone-300 bg-stone-50 px-2 py-1 text-sm text-stone-900 dark:bg-stone-950 dark:text-stone-100;
}

/* svelte select */

.svelte-select {
	@apply relative flex h-8 w-full border-none text-stone-900 dark:bg-stone-950 dark:text-stone-100;
}

.svelte-select .value-container {
	@apply relative flex-1;
}

.svelte-select input {
	@apply absolute top-0 left-0 m-0 h-8 w-full cursor-default rounded border-stone-700 bg-transparent px-2 py-0 text-sm leading-10 text-stone-100;
}

.svelte-select.focused {
	/* @apply border-blue-600; */
}

.svelte-select.disabled {
	@apply border-gray-200 bg-gray-200 text-gray-600;
}

.svelte-select.disabled input {
	@apply placeholder:text-gray-400 placeholder:opacity-100;
}

.svelte-select > .value-container > .selected-item {
	@apply h-8 overflow-x-hidden px-4 leading-8 focus:outline-none;
}
.svelte-select .hide-selected-item {
	@apply hidden;
}

.svelte-select .indicators {
	@apply pointer-events-none absolute top-0 right-0 bottom-0 flex h-8 translate-y-0 items-center text-gray-200;
}

.svelte-select .icons > * {
	@apply transition-colors duration-200 ease-in-out focus:outline-none;
}

.svelte-select .clear-select {
	@apply pointer-events-auto;
}

.svelte-select.focused .icons,
.svelte-select .chevron:hover,
.svelte-select .clear-select:hover {
	@apply text-gray-600;
}

.svelte-select .clear-select {
	@apply h-5 w-9 flex-none px-2 text-gray-300;
}

.svelte-select .chevron {
	@apply flex h-5 w-9 border-l-2 pt-0 pr-2 pl-2 text-gray-300;
}

.svelte-select.multi {
	@apply h-auto flex-wrap items-stretch pr-9 pl-4;
}

.svelte-select.multi input {
	@apply relative m-0 p-0;
}

.svelte-select.error {
	@apply border-red-500 bg-white;
}

.a11y-text {
	@apply sr-only;
}

.svelte-select-list {
	@apply absolute right-0 left-0 z-10 max-h-64 w-full overflow-y-auto rounded-sm border-none bg-stone-50 shadow-md dark:bg-stone-800;
}

.svelte-select-list .list-group-title {
	@apply h-8 cursor-default px-2 text-sm leading-10 font-medium text-ellipsis whitespace-nowrap text-gray-400 uppercase;
}

.svelte-select-list .empty {
	@apply py-5 text-center text-gray-500;
}

.svelte-select-item {
	@apply h-8 cursor-default overflow-hidden px-5 leading-10 text-ellipsis whitespace-nowrap text-gray-800;
}

.item.group-item {
	@apply px-4;
}

.item.active {
	@apply bg-blue-600 text-white dark:bg-blue-900;
}

.item.not-selectable {
	@apply text-gray-300;
}

.item.first {
	@apply rounded-t-sm;
}

.item.hover:not(.active) {
	@apply bg-blue-100 dark:bg-stone-700;
}

.multi input {
	flex: 1 1 40px;
}

.multi-item {
	@apply mt-1 mr-1 flex h-8 max-w-full cursor-default items-center overflow-hidden rounded-sm border border-gray-200 bg-gray-100 pr-1 pl-1 leading-8 text-ellipsis whitespace-nowrap;
}

.multi-item.disabled {
	@apply hover:bg-gray-300 hover:text-gray-500;
}

.multi-item-clear {
	@apply flex w-5 items-center justify-center;
}

.list-item {
	@apply list-none;
}

/*  chat */

.message {
	@apply m-2 rounded p-2;

	&.user {
		@apply bg-sky-500 dark:text-white;
	}

	&.assistant {
		&.reasoning {
			@apply text-white/50;
		}
	}
}

.message-content {
	@apply text-sm;
}

.message-content p {
	@apply my-2;
}

.message-content pre {
	@apply my-2 whitespace-pre dark:bg-stone-700;
}