From 3e586f307ccd1c03d6adae75e08b396d1ed812a9 Mon Sep 17 00:00:00 2001
From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com>
Date: Sun, 16 Feb 2025 00:37:09 +0000
Subject: [PATCH] Fixed Category & Folder tag-buttons [Issue #4]

---
 bookface_auto.css | 168 ++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 154 insertions(+), 14 deletions(-)

diff --git a/bookface_auto.css b/bookface_auto.css
index 451deb3..b4ed0f7 100644
--- a/bookface_auto.css
+++ b/bookface_auto.css
@@ -1399,41 +1399,111 @@ a.tag.label,
 		}
 	/* Category Buttons */
 	.wall-item-bottom .wall-item-tags .category.label.btn-success {
-		border-color: green !important;
-		color: green !important;
-		font-size: 0px !important; /* to get rid of parentheses */
+		border-color: limegreen !important;
+		color: limegreen !important;
+		font-size: 12px;
 	}
 		/* replace (x) remove with icon button */
 		.wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type {
-			font-size: 12px;
+			margin-right: 4px;
+		}
+		.wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type {
+			font-size: 0px;
 		}
 		.wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after {
 			content: '\f00d';
 			font-family: ForkAwesome;
 			font-size: 12px;
-			margin-left: 4px;
 		}
 		.wall-item-bottom .wall-item-tags .category.label.btn-success:hover,
 		.wall-item-bottom .wall-item-tags .category.label.btn-success:focus {
-			background-color: green !important;
-			color: white !important;
+			background-color: limegreen !important;
+			color: black !important;
 		}
 		/* when a category is removed need to visually indicate it */
 		.wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
 			border-color: #ccc !important;
 			color: #ccc !important;
-			font-size: 0px !important;
 		}
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{
 				font-size: 12px;
 				text-decoration: line-through;
+				margin-right: 4px;
+			}
+			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type {
+				font-size: 0px;
 			}
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after {
-				content: '';
+				content: '\f00d';
+				font-family: ForkAwesome;
+				font-size: 12px;
+				text-decoration: line-through;	
 			}
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover,
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus {
 				background-color: red !important;
+				color: #ccc !important;
+			}
+			/* overrides for Saved File page where buttons structure is different */
+			body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success {
+				font-size: 12px !important;
+			}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a {
+					font-size: 0px !important;
+					margin: 0px;
+				}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after {
+					margin-left: 0px;
+				}
+			body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+				font-size: 12px !important;
+				text-decoration: line-through !important;
+			}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a {
+					font-size: 0px !important;
+				}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after {
+					content: '\f00d';
+					font-family: ForkAwesome;
+					font-size: 12px;
+					text-decoration: line-through;
+				}
+	/* Folder Buttons */
+	.wall-item-bottom .wall-item-tags .folder.label.btn-danger {
+		border-color: red !important;
+		color: red !important;
+	}
+		/* replace (x) remove with icon button */
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{
+			font-size: 0px;
+		}
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after {
+			content: '\f00d';
+			font-family: ForkAwesome;
+			font-size: 12px;
+		}
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover,
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus {
+			background-color: red !important;
+			color: white !important;
+		}
+		/* when a category is removed need to visually indicate it */
+		.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){
+			border-color: #ccc !important;
+			color: #ccc !important;
+			text-decoration: line-through !important;
+		}
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{
+				font-size: 0px;
+			}
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after {
+				content: '\f00d';
+				font-family: ForkAwesome;
+				font-size: 12px;
+			}
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover,
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{
+				background-color: black !important;
 				color: white !important;
 			}
 	/* @ Mention Buttons */
@@ -3540,17 +3610,19 @@ a.tag.label,
 	.wall-item-bottom .wall-item-tags .category.label.btn-success {
 		border-color: limegreen !important;
 		color: limegreen !important;
-		font-size: 0px !important; /* to get rid of parentheses */
+		font-size: 12px;
 	}
 		/* replace (x) remove with icon button */
 		.wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type {
-			font-size: 12px;
+			margin-right: 4px;
+		}
+		.wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type {
+			font-size: 0px;
 		}
 		.wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after {
 			content: '\f00d';
 			font-family: ForkAwesome;
 			font-size: 12px;
-			margin-left: 4px;
 		}
 		.wall-item-bottom .wall-item-tags .category.label.btn-success:hover,
 		.wall-item-bottom .wall-item-tags .category.label.btn-success:focus {
@@ -3561,20 +3633,88 @@ a.tag.label,
 		.wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
 			border-color: #ccc !important;
 			color: #ccc !important;
-			font-size: 0px !important;
 		}
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{
 				font-size: 12px;
 				text-decoration: line-through;
+				margin-right: 4px;
+			}
+			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type {
+				font-size: 0px;
 			}
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after {
-				content: '';
+				content: '\f00d';
+				font-family: ForkAwesome;
+				font-size: 12px;
+				text-decoration: line-through;	
 			}
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover,
 			.wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus {
 				background-color: red !important;
 				color: #ccc !important;
 			}
+			/* overrides for Saved File page where buttons structure is different */
+			body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success {
+				font-size: 12px !important;
+			}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a {
+					font-size: 0px !important;
+					margin: 0px;
+				}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after {
+					margin-left: 0px;
+				}
+			body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+				font-size: 12px !important;
+				text-decoration: line-through !important;
+			}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a {
+					font-size: 0px !important;
+				}
+				body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after {
+					content: '\f00d';
+					font-family: ForkAwesome;
+					font-size: 12px;
+					text-decoration: line-through;
+				}
+	/* Folder Buttons */
+	.wall-item-bottom .wall-item-tags .folder.label.btn-danger {
+		border-color: hotpink !important;
+		color: hotpink !important;
+	}
+		/* replace (x) remove with icon button */
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{
+			font-size: 0px;
+		}
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after {
+			content: '\f00d';
+			font-family: ForkAwesome;
+			font-size: 12px;
+		}
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover,
+		.wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus {
+			background-color: hotpink !important;
+			color: black !important;
+		}
+		/* when a category is removed need to visually indicate it */
+		.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){
+			border-color: #ccc !important;
+			color: #ccc !important;
+			text-decoration: line-through !important;
+		}
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{
+				font-size: 0px;
+			}
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after {
+				content: '\f00d';
+				font-family: ForkAwesome;
+				font-size: 12px;
+			}
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover,
+			.wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{
+				background-color: black !important;
+				color: white !important;
+			}
 	/* @ Mention Buttons */
 	.wall-item-bottom .wall-item-tags .mention.label.btn-warning {
 		border-color: gold !important;