First draft version with Svelte for popup and additional build steps

src/styles/colors.scss

@@ -0,0 +1,27 @@
+$background: #15121a;
+
+$text: #dadada;
+$text-gray: #7c7a7f;
+
+$link: #9747cc;
+$link-hover: #dbbfed;
+
+$header: #36274e;
+$header-toolbar: #251c36;
+$header-hover-background: #231933;
+$header-mobile-link-hover: #785b99;
+
+$footer: #1d1924;
+$footer-text: $text-gray;
+
+$block-header: #3a314e;
+$block-border: #332941;
+$block-background: #1d1924;
+$block-background-alternate: #16131b;
+
+$tag-background: #1b3c21;
+$tag-count-background: #2d6236;
+$tag-text: #4aa158;
+
+$input-background: #26232d;
+$input-border: #5c5a61;

src/styles/content/listing.scss

@@ -0,0 +1 @@
+@import "../injectable/tag";

src/styles/injectable/icons.scss

@@ -0,0 +1,39 @@
+@mixin insert-icon($icon_src) {
+  mask-image: url($icon_src);
+  -webkit-mask-image: url($icon_src);
+}
+
+.icon {
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+.icon.icon-tag {
+  @include insert-icon('/img/tag.svg');
+}
+
+.icon.icon-paint-brush {
+  @include insert-icon('/img/paint-brush.svg');
+}
+
+.icon.icon-arrow-left {
+  @include insert-icon('/img/arrow-left.svg');
+}
+
+.icon.icon-info-circle {
+  @include insert-icon('/img/info-circle.svg');
+}
+
+.icon.icon-wrench {
+  @include insert-icon('/img/wrench.svg');
+}
+
+.icon.icon-globe {
+  @include insert-icon('/img/globe.svg');
+}
+
+.icon.icon-plus {
+  @include insert-icon('/img/plus.svg');
+}

src/styles/injectable/input.scss

@@ -0,0 +1,11 @@
+@use '../colors';
+
+input {
+  background: colors.$input-background;
+  border: 1px solid colors.$input-border;
+  color: colors.$text;
+
+  font-family: monospace;
+  padding: 0 6px;
+  line-height: 26px;
+}

src/styles/injectable/tag.scss

@@ -0,0 +1,17 @@
+@use '../colors';
+
+.tag {
+  background: colors.$tag-background;
+  line-height: 28px;
+  color: colors.$tag-text;
+  font-weight: 700;
+  font-size: 14px;
+  padding: 0 4px;
+  display: flex;
+
+  .remove {
+    content: "x";
+    margin-left: 6px;
+    cursor: pointer;
+  }
+}

src/styles/injectable/tags-editor.scss

@@ -0,0 +1,12 @@
+@use '../colors';
+@import "input";
+
+tags-editor {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+
+  input {
+    width: 180px;
+  }
+}

src/styles/popup.scss

@@ -0,0 +1,35 @@
+@use './colors';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+html, body {
+  background-color: colors.$background;
+  color: colors.$text;
+  font-size: 16px;
+  min-width: 320px;
+  max-height: min(100vh, 320px);
+  font-family: verdana, arial, helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: colors.$link;
+  text-decoration: none;
+
+  &:hover, &:focus {
+    color: colors.$link-hover;
+  }
+}
+
+@import "injectable/tags-editor";
+@import "injectable/tag";
+@import "injectable/icons";