refactor(interface): move search-nav styles into navigation.css

public/components/navigation/navigation.css

@@ -75,3 +75,131 @@ nav#aside>ul li>span {
 nav#aside>ul li.bottom-nav {
   margin-top: auto;
 }
+
+#search-nav {
+  z-index: 30;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  height: 30px;
+  left: 50px;
+  padding-left: 20px;
+  max-width: calc(100vw - 70px);
+  box-sizing: border-box;
+  background: var(--primary);
+  transform: skewX(-20deg);
+  box-shadow: 2px 1px 10px #26107f7a;
+}
+
+body.dark #search-nav {
+  background: var(--dark-theme-primary-color);
+}
+
+#search-nav .packages {
+  height: inherit;
+  display: flex;
+  max-width: calc(100vw - 70px - 264px);
+  background: var(--primary);
+}
+
+#search-nav .packages>.package {
+  height: inherit;
+  font-family: mononoki;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(to right,  rgb(55 34 175 / 100%) 0%,rgb(87 74 173 / 100%) 50%,rgb(59 110 205) 100%);
+  padding: 0 10px;
+  border-right: 2px solid #0f041a;
+  text-shadow: 1px 1px 10px #000;
+  color: #def7ff;
+}
+
+body.dark #search-nav .packages>.package {
+  background: linear-gradient(to right, rgb(11 3 31 / 100%) 0%, rgb(11 3 31 / 80%) 50%, rgb(11 3 31 / 60%) 100%);
+}
+
+#search-nav .packages>.package>* {
+  transform: skewX(20deg);
+}
+
+#search-nav .packages>.package:first-child {
+  padding-left: 10px;
+}
+
+#search-nav .packages>.package:not(.active):hover {
+  background: linear-gradient(to right, rgb(55 34 175 / 100%) 1%, rgb(68 121 218) 100%);
+  color: #defff9;
+  cursor: pointer;
+}
+
+body.dark #search-nav .packages>.package:not(.active):hover {
+  background: linear-gradient(to right, rgb(11 3 31 / 70%) 1%, rgb(11 3 31 / 50%) 100%);
+}
+
+#search-nav .packages>.package.active {
+  background: linear-gradient(to right,  rgb(55 34 175 / 100%) 0%,rgb(87 74 173 / 100%) 50%,rgb(59 110 205) 100%);
+}
+
+#search-nav .packages>.package.active>b {
+  background: var(--secondary);
+}
+
+#search-nav .packages>.package.active>.remove {
+  display: block;
+}
+
+#search-nav .packages>.package>b:last-of-type:not(:first-of-type) {
+  background: #f57c00;
+}
+
+#search-nav .packages>.package>b {
+  font-weight: bold;
+  font-size: 12px;
+  margin-left: 5px;
+  background: var(--secondary-darker);
+  padding: 3px 5px;
+  border-radius: 2px;
+  font-family: Roboto;
+  letter-spacing: 1px;
+}
+
+#search-nav .add {
+  height: inherit;
+  font-size: 20px;
+  border: none;
+  background: var(--secondary-darker);
+  cursor: pointer;
+  padding: 0 7px;
+  transition: 0.2s all ease;
+  color: #def7ff;
+}
+
+#search-nav .add:hover {
+  background: var(--secondary);
+  cursor: pointer;
+}
+
+#search-nav .add>i {
+  transform: skewX(20deg);
+}
+
+#search-nav button.remove {
+  display: none;
+  border: none;
+  position: relative;
+  cursor: pointer;
+  color: #fff5dc;
+  background: #ff3434e2;
+  margin-left: 10px;
+  border-radius: 50%;
+  line-height: 16px;
+  text-shadow: 1px 1px 10px #000;
+  font-weight: bold;
+  width: 20px;
+}
+
+#search-nav button.remove:hover {
+  cursor: pointer;
+  background: #ff5353e2;
+}

public/main.css

@@ -9,7 +9,6 @@
 @import url("./components/navigation/navigation.css");
 @import url("./components/bundlephobia/bundlephobia.css");
 @import url("./components/package/package.css");
-@import url("./components/searchbar/searchbar.css");
 @import url("./components/views/home/home.css");
 @import url("./components/views/network/network.css");
 @import url("./components/views/search/search.css");