Add ability to highlight specific rows with fragments

BrandonXLF · Apr 25, 2024 · 0c6d4ba · 0c6d4ba
1 parent 1e51968
commit 0c6d4ba
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/includes/LinkCount.php b/includes/LinkCount.php
@@ -176,6 +176,7 @@ public function getHtml() {
 
 			$out->appendContent(
 				(new OOUI\Tag('div'))->setAttributes([
+					'id' => $key,
 					'role' => 'row'
 				])->appendContent(
 					(new OOUI\Tag('div'))->addClasses(['type'])->appendContent($label),

diff --git a/static/index.css b/static/index.css
@@ -90,6 +90,25 @@ footer, #out {
 	border-radius: 0 2px 2px 0;
 }
 
+[role="row"]:target .type,
+[role="row"]:target .all,
+[role="row"]:target .direct,
+[role="row"]:target .indirect {
+	border-top-width: 3px;
+	border-bottom-width: 3px;
+	border-color: #36c;
+}
+
+[role="row"]:target .type {
+	border-left-width: 3px;
+	border-radius: 4px 0 0 4px;
+}
+
+[role="row"]:target .indirect {
+	border-right-width: 3px;
+	border-radius: 0 4px 4px 0;
+}
+
 @media (max-width: 575px) {
 	.type {
 		grid-column-start: 1;
@@ -124,5 +143,20 @@ footer, #out {
 	.out > :first-child {
 		display: none;
 	}
+
+	[role="row"]:target .type {
+		border-right-width: 3px;
+		border-bottom-width: 1px;
+		border-radius: 4px 4px 0 0;
+	}
+
+	[role="row"]:target .all {
+		border-left-width: 3px;
+		border-radius: 0 0 0 4px;
+	}
+
+	[role="row"]:target .indirect {
+		border-radius: 0 0 4px 0;
+	}
 }