From 2c970f635ae7ca749960b40765d226613d750f75 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 30 Dec 2022 23:09:25 +0800
Subject: [PATCH] Make focus ring nicer
---
src/app.css | 1 +
src/index.css | 5 +++++
2 files changed, 6 insertions(+)
diff --git a/src/app.css b/src/app.css
index 424d6e45..849d1a19 100644
--- a/src/app.css
+++ b/src/app.css
@@ -343,6 +343,7 @@ a.mention span {
}
.status-link:is(:hover, :focus) {
background-color: var(--link-bg-hover-color);
+ outline-offset: -2px;
}
.status-link:active {
filter: brightness(0.95);
diff --git a/src/index.css b/src/index.css
index c97c455b..2b4956d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,6 +16,7 @@
--link-light-color: #4169e199;
--link-faded-color: #4169e155;
--link-bg-hover-color: #f0f2f599;
+ --focus-ring-color: var(--link-color);
--button-bg-color: var(--blue-color);
--button-bg-blur-color: #4169e1aa;
--button-text-color: white;
@@ -246,6 +247,10 @@ code {
outline: 0;
}
+:not([tabindex='-1']):focus {
+ outline: 2px solid var(--focus-ring-color);
+}
+
/* UTILS */
.ib {