style input tags in settings

src/assets/scss/5-modules/tags.scss

@@ -1,7 +1,16 @@
 /* ----------------------------------------------------------- */
-/* == tags input override */
+/* == tags input */
 /* ----------------------------------------------------------- */
-div.svelte-tags-input-layout:nth-child(n) {
+/* main */
+
+
+/* svelte-tags-input-layout */
+
+.svelte-tags-input-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0 .5rem .5rem .5rem;
   padding-right: 2rem;
   padding-left: 1.5rem;
   border: $input-border;
@@ -9,34 +18,49 @@ div.svelte-tags-input-layout:nth-child(n) {
   background: $input-background-color;
 }
 
-div.svelte-tags-input-layout:nth-child(n):hover {
-  border: $input-border;
-}
+/* svelte-tags-input */
 
-input.svelte-tags-input:nth-child(n) {
+.svelte-tags-input {
+  flex: 1;
+  margin: 0;
+  margin-top: 5px;
   padding: .35rem .5rem;
   min-width: 0;
+  border: none;
   box-shadow: none;
-  font-family: inherit;
   line-height: 1.5em;
 }
 
-span.svelte-tags-input-tag:nth-child(n) {
+.svelte-tags-input:focus {
+  outline: 0;
+}
+
+/* svelte-tags-input-tag */
+
+.svelte-tags-input-tag {
+  display: flex;
+  margin-top: .5rem;
+  margin-right: .5rem;
   padding: 0;
   padding-left: .9rem;
+  border-radius: .2rem;
   background-color: $color-primary;
+  color: #fff;
+  list-style: none;
+  white-space: nowrap;
   font-size: 1.3rem;
   font-family: inherit;
 }
 
-span.svelte-tags-input-tag-remove:nth-child(n) {
+.svelte-tags-input-tag-remove {
   margin-left: .3rem;
   padding: .5rem;
   padding-left: .5rem;
   font-size: 1.6rem;
   line-height: 1em;
+  cursor: pointer;
 }
 
-span.svelte-tags-input-tag-remove:hover {
+.svelte-tags-input-tag-remove:hover {
   background-color: rgba(#000, .3);
 }

src/assets/scss/style.scss

@@ -75,6 +75,7 @@
 @import "5-modules/context-menu";
 @import "5-modules/modal";
 @import "5-modules/modal-share";
+@import "5-modules/tags";
 
 
 // --------------------------------------------------------------
@@ -92,7 +93,7 @@
 // Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss)
 // In this context, "o" means "override" and you can use it as a convention.
 
-@import "7-vendors/o-tags.scss";
+// @import "7-vendors/o-vendor.scss";
 
 
 // --------------------------------------------------------------

src/components/Settings.svelte

@@ -48,7 +48,7 @@
     import ContextPage from '/components/ContextPage'
     import TagInput from '/components/TagInput'
 
-    let a = ['I', 'love', 'u']
+    let a = ['np', 'tootradio', 'pouetradio']
     $: console.log(a)
 
     let open = false

src/components/TagInput.svelte

@@ -1,9 +1,8 @@
-<div class="">
+<div class="svelte-tags-input-layout">
     {#each tags as tag, index}
-        <span>{tag} <span class="" on:click={() => remove(index)}>×</span></span>
+        <span class="svelte-tags-input-tag">{tag} <span class="svelte-tags-input-tag-remove" on:click={() => remove(index)}>×</span></span>
     {/each}
-
-    <input type="text" on:keydown={onKeyDown} />
+    <input type="text" class="svelte-tags-input" on:keydown={onKeyDown} />
 </div>
 
 <script>