From 775b5a407846b49b25ca6047d3912966efb47233 Mon Sep 17 00:00:00 2001
From: Joan Sisquella <joan.sisquella@forgeflow.com>
Date: Fri, 12 May 2023 10:48:00 +0200
Subject: [PATCH] [IMP] filters view

---
 css/styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 9b26f3b..ae3c680 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -83,7 +83,7 @@ display: flex;
 justify-content: center;
 align-items: center;
 gap: 12px;
-padding: 16px;
+padding: 4px;
 background-color: #f7dada;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -96,10 +96,10 @@ display: none;
 
 .special-filter-container label {
 cursor: pointer;
-padding: 6px 12px;
+padding: 2px 12px;
 background-color: #ccc;
 border-radius: 4px;
-font-size: 14px;
+font-size: 12px;
 color: #333;
 transition: background-color 0.2s, color 0.2s;
 }
@@ -112,4 +112,76 @@ color: #ffffff;
 .special-filter-container input[type="checkbox"]:focus + label {
 outline: auto 1px Highlight;
 outline: auto 5px -webkit-focus-ring-color;
+}
+.normal {
+background-color: #A8A878;
+color: #fff;
+}
+.fighting {
+background-color: #C03028;
+color: #fff;
+}
+.flying {
+background-color: #A890F0;
+color: #fff;
+}
+.poison {
+background-color: #A040A0;
+color: #fff;
+}
+.ground {
+background-color: #E0C068;
+color: #fff;
+}
+.rock {
+background-color: #B8A038;
+color: #fff;
+}
+.bug {
+background-color: #A8B820;
+color: #fff;
+}
+.ghost {
+background-color: #705898;
+color: #fff;
+}
+.steel {
+background-color: #B8B8D0;
+color: #fff;
+}
+.fire {
+background-color: #F08030;
+color: #fff;
+}
+.water {
+background-color: #6890F0;
+color: #fff;
+}
+.grass {
+background-color: #78C850;
+color: #fff;
+}
+.electric {
+background-color: #F8D030;
+color: #fff;
+}
+.psychic {
+background-color: #F85888;
+color: #fff;
+}
+.ice {
+background-color: #98D8D8;
+color: #fff;
+}
+.dragon {
+background-color: #7038F8;
+color: #fff;
+}
+.dark {
+background-color: #705848;
+color: #fff;
+}
+.fairy {
+background-color: #EE99AC;
+color: #fff;
 }
\ No newline at end of file