remove 18+ filter

index.html

@@ -26,22 +26,6 @@
     <meta name="twitter:player:height" content="600" />
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-      body,
-      html {
-        height: 100%;
-      }
-
-      details > summary {
-        list-style: none;
-      }
-
-      details > summary::-webkit-details-marker {
-        display: none;
-      }
-    </style>
-
     <script src="https://cdn.tailwindcss.com"></script>
 
     <script type="module">
@@ -63,7 +47,7 @@
         totalPages: -1,
         buttonClass(attr, filter) {
           if (this[attr] === filter) {
-            return "bg-black dark:bg-white shadow-lg text-white dark:text-black";
+            return "bg-black dark:bg-white shadow-lg text-white dark:text-black hover:bg-black hover:text-white";
           }
           return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800";
         },
@@ -121,12 +105,10 @@
       <div class="col-span-2 lg:col-span-1 flex flex-col gap-2 row-start">
         <h1 class="text-lg font-semibold dark:text-white whitespace-nowrap">Diffusers Models Gallery</h1>
         <details>
-          <summary
-            class="text-xs font-thin cursor-pointer focus:outline-none focus:shadow-outline-gray dark:text-white"
-          >
+          <summary class="font-thin cursor-pointer focus:outline-none focus:shadow-outline-gray dark:text-white">
             About
           </summary>
-          <p class="text-xs font-thin dark:text-white">
+          <p class="font-thin dark:text-white">
             The gallery only displays models with valid images in the model card, and the classifiers use the first
             image in the card.
 
@@ -151,9 +133,9 @@
         </details>
       </div>
 
-      <div class="col-span-2 md:col-span-3 flex items-center gap-2 flex flex-wrap lg-auto lg:ml-auto">
-        <div class="flex text-xs gap-2">
-          <span class="md:px-3 py-1 font-thin dark:text-white">sort by</span>
+      <div class="col-span-2 md:col-span-3 flex items-center gap-4 flex flex-wrap lg-auto lg:ml-auto text-sm">
+        <div class="flex gap-2">
+          <span class="md:px-3 py-1 dark:text-white text-gray-400">sort by</span>
           <button
             :class="buttonClass('sort', 'trending')"
             class="px-2 md:px-3 py-1 rounded-full text"
@@ -176,8 +158,8 @@
             Most Likes
           </button>
         </div>
-        <div class="flex text-xs gap-2">
-          <span class="md:px-3 py-1 font-thin dark:text-white"> style</span>
+        <div class="flex gap-2">
+          <span class="md:px-3 py-1 dark:text-white text-gray-400"> style</span>
           <button
             :class="buttonClass('filter', 'all')"
             class="px-2 md:px-3 py-1 rounded-full"
@@ -206,13 +188,6 @@
           >
             Realistic
           </button>
-          <button
-            :class="buttonClass('filter', 'nsfw')"
-            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-            @click="filterModels('nsfw')"
-          >
-            18+
-          </button>
         </div>
       </div>