expand dropdown

SquareScreamYT · Oct 9, 2024 · 3b27936 · 3b27936
1 parent ce89632
commit 3b27936
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/kotobalibre/index.html b/kotobalibre/index.html
@@ -29,9 +29,11 @@
   <div class="container">
     <div class="sidebar">
       <input type="text" id="search" placeholder="suha per kotoba...">
-      <select id="category-filter">
-        <option value="all">al klani</option>
-      </select>
+      <div id="category-filter-container">
+        <select id="category-filter">
+          <option value="all">al klani</option>
+        </select>
+      </div>
       <div id="wordList"></div>
     </div>
     <div class="content">

diff --git a/kotobalibre/style.css b/kotobalibre/style.css
@@ -255,6 +255,19 @@ img {
   font-family: "Nunito", "SF Pro Rounded", "Apple Color Emoji", "Noto Color Emoji", "Lato", system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif, monospace;
 }
 
+#category-filter option {
+  background-color: var(--bg-color-darker);
+  color: var(--text-color);
+  transition: background-color 0.3s ease;
+}
+#category-filter option:hover {
+  background-color: var(--bg-color-darkest);
+}
+
+#category-filter-container {
+  height: fit-content;
+}
+
 #copy-button {
   font-family: "Nunito", "SF Pro Rounded", "Apple Color Emoji", "Noto Color Emoji", "Lato", system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif, monospace;
   appearance: none;