choix de la timezone dans un select

backend/web/src/routes/layout.css

@@ -21,9 +21,6 @@ h2 {
 	@apply mb-4 font-bold;
 }
 
-.textinput {
-	@apply w-full rounded bg-white p-1 text-stone-900 dark:bg-stone-700 dark:text-stone-100;
-}
 .pointer {
 	@apply cursor-pointer;
 }
@@ -105,3 +102,138 @@ h2 {
 		}
 	}
 }
+
+/* svelte select */
+
+.textinput {
+	@apply h-8 w-full rounded border-stone-700 bg-white px-2 py-1 text-stone-900 dark:bg-stone-800 dark:text-stone-100;
+}
+
+.svelte-select {
+	@apply relative flex h-8 w-full border-none text-stone-900 dark:bg-stone-800 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 px-4 shadow-md dark:bg-stone-800;
+}
+
+.svelte-select-list .list-group-title {
+	@apply h-8 cursor-default px-5 text-sm leading-10 font-medium overflow-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 overflow-ellipsis whitespace-nowrap text-gray-800;
+}
+
+.item.group-item {
+	@apply px-10;
+}
+
+.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 overflow-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;
+}