💄 Made Checkmarks Prettier

💄 Widened Apply Button on Filter Modal
NatVIII · Aug 26, 2024 · 93669f2 · 93669f2
1 parent 8a050e9
commit 93669f2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/components/FilterModal.vue b/components/FilterModal.vue
@@ -118,7 +118,7 @@ function toggleTagVisibility(tagName: string) {
               @change="updateTagVisibility(tag.name, $event.target.checked)" /> {{ tag.name }}
       </div>
     </span>
-    <div class="bottom">
+    <div class="bottom filterButton">
       <button @click="emit('confirm')">Apply</button>
     </div>
   </VueFinalModal>

diff --git a/public/css/style.css b/public/css/style.css
@@ -73,6 +73,7 @@ body {
   font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif;
   font-size: 12px;
   font-weight: normal;
+  color: var(--text-normal);
 }
 
 a {
@@ -600,21 +601,34 @@ input[type="checkbox"] {
 
   border-radius: 3px;
   border: 1px solid var(--border-outer);
-  box-shadow: var(--button-box-shadow);
+  box-shadow: inset 1px 1px #ccc,inset -1px -1px #888;
+  background-image: none;
+}
+
+input[type="checkbox"]:checked {
+  box-shadow: inset -1px -1px #ccc,inset 1px 1px #888;
 }
 
+
 input[type="checkbox"]::before {
   content: "";
   width: 1.2em;
   height: 1.2em;
   transform: scale(0);
   transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--text-black);
+  box-shadow: inset 1em 1em var(--text-normal);
 
   transform-origin: bottom left;
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
 
 input[type="checkbox"]:checked::before {
   transform: scale(1);
+}
+
+.filterButton button {
+  font-size: 1.5em;
+  width: 100%;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
 }