fix: mode toggle not outlined when receiving keyboard focus (#1690)

The Tab key focus
This commit is contained in:
Cotes Chung 2024-04-21 00:15:14 +08:00 committed by GitHub
parent 015d5670a1
commit cd37f63a01
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 5 deletions

View file

@ -44,7 +44,7 @@
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"> <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
{% unless site.theme_mode %} {% unless site.theme_mode %}
<button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle"> <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
<i class="fas fa-adjust"></i> <i class="fas fa-adjust"></i>
</button> </button>

View file

@ -823,7 +823,10 @@ $btn-mb: 0.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:not(:focus-visible) {
box-shadow: var(--sidebar-border-color) 0 0 0 1px; box-shadow: var(--sidebar-border-color) 0 0 0 1px;
}
&:hover { &:hover {
background-color: var(--sidebar-hover-bg); background-color: var(--sidebar-hover-bg);
@ -845,9 +848,6 @@ $btn-mb: 0.5rem;
} }
#mode-toggle { #mode-toggle {
padding: 0;
border: 0;
@extend %button; @extend %button;
@extend %sidebar-links; @extend %sidebar-links;
@extend %sidebar-link-hover; @extend %sidebar-link-hover;