From aa1420aeb91a9663a714cdceb0f957d9837740e7 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 12:33:20 +0100
Subject: Clean up hover effects.

- We now have a hover effect for all icons.
- We also now support hover effects for all tags.
- However, we don't have any hover effect for icons in titles.
  That just looks weird.

Additionally, we're getting rid of some bloat and consolidating the CSS
into one place.
---
 pydis_site/static/css/resources/resources.css      | 48 ++++++++++++++++++
 pydis_site/static/css/resources/resources_list.css | 57 ----------------------
 2 files changed, 48 insertions(+), 57 deletions(-)
 delete mode 100644 pydis_site/static/css/resources/resources_list.css

(limited to 'pydis_site/static/css/resources')

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index db083a41..7038d0d7 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,3 +1,45 @@
+/* Colors for icons */
+i.resource-icon.is-orangered {
+    color: #FE640A;
+}
+i.resource-icon.is-blurple {
+    color: #7289DA;
+}
+i.resource-icon.is-teal {
+    color: #95DBE5;
+}
+i.resource-icon.is-youtube-red {
+    color: #BB0000;
+}
+i.resource-icon.is-black {
+    color: #2c3334;
+}
+
+/* Colors when icons are hovered */
+i.resource-icon.is-hoverable:hover {
+    filter: brightness(125%);
+}
+i.resource-icon.is-hoverable.is-black:hover {
+    filter: brightness(170%);
+}
+i.resource-icon.is-hoverable.is-teal:hover {
+    filter: brightness(80%);
+}
+
+/* Icon padding */
+.breadcrumb-section {
+    padding: 1rem;
+}
+i.has-icon-padding {
+    padding: 0 10px 25px 0;
+}
+#tab-content p {
+    display: none;
+}
+#tab-content p.is-active {
+display: block;
+}
+
 /* Disable highlighting for all text in the filters. */
 .filter-checkbox,
 .filter-panel label,
@@ -57,6 +99,12 @@ span.filter-box-tag {
     user-select: none;
 }
 
+/* When hovering tags, brighten them a bit. */
+.resource-tag:hover,
+.filter-box-tag:hover {
+    filter: brightness(95%);
+}
+
 /* Move the x down 1 pixel to align center */
 button.delete {
     margin-top: 1px;
diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css
deleted file mode 100644
index c2151bee..00000000
--- a/pydis_site/static/css/resources/resources_list.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.breadcrumb-section {
-    padding: 1rem;
-}
-
-i.resource-icon.is-orangered {
-    color: #FE640A;
-}
-
-i.resource-icon.is-orangered:hover {
-    color: #fe9840;
-}
-
-i.resource-icon.is-blurple {
-    color: #7289DA;
-}
-
-i.resource-icon.is-blurple:hover {
-    color: #93a8da;
-}
-
-i.resource-icon.is-teal {
-    color: #95DBE5;
-}
-
-i.resource-icon.is-teal:hover {
-    color: #a9f5ff;
-}
-
-i.resource-icon.is-youtube-red {
-    color: #BB0000;
-}
-
-i.resource-icon.is-youtube-red:hover {
-    color: #f80000;
-}
-
-i.resource-icon.is-goodreads-cream,
-i.resource-icon.is-black {
-    color: #2c3334;
-}
-
-i.resource-icon.is-goodreads-cream:hover,
-i.resource-icon.is-black:hover {
-    color: #475d6d;
-}
-
-i.has-icon-padding {
-    padding: 0 10px 25px 0;
-}
-
-#tab-content p {
-    display: none;
-}
-
-#tab-content p.is-active {
-display: block;
-}
-- 
cgit v1.2.3