Fix high contrast mode focus (#5796)

<!-- Thank you for your contribution! Please review
https://microsoft.github.io/autogen/docs/Contribute before opening a
pull request. -->

<!-- Please add a reviewer to the assignee section when you create a PR.
If you don't have the access to it, we will shortly find a reviewer and
assign them to your PR. -->

## Why are these changes needed?

Adds sidebar and breadcrumb selection and focus indicators to high
contrast modes.
Fixes (46), (55), (56)

## Related issue number

 #5633 

This change has no affect on normal color modes, but adds selection and
focus indicators to high contrast modes. I'm not sure how to get rid of
the double bars on nested links, but thats a minor issue

before:

![image](https://github.com/user-attachments/assets/62e7ce65-c3f0-4160-8260-b4153a4a2835)

after:

![image](https://github.com/user-attachments/assets/581ed2a2-5f7c-43c8-a675-2f6c57c6a251)
This commit is contained in:
peterychang 2025-03-04 12:41:25 -05:00 committed by GitHub
parent a701e3b4fa
commit 3855989543
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -32,11 +32,33 @@ html[data-theme="dark"] {
color: white;
text-shadow: 0.5px 0 0 currentColor;
}
nav.bd-links .current>a {
box-shadow: inset 1px 0 0 var(--pst-color-primary);
}
@media (forced-colors: active) {
/* Top breadcrumbs navigation (ie: Home > Core > ...) */
.bd-breadcrumbs .breadcrumb-item > a:focus-visible{
border: 2px solid var(--pst-color-primary);
}
/* Left sidebar */
nav.bd-links .navbar-nav .toctree-l1>a:focus-visible {
border: 2px solid var(--pst-color-primary);
}
nav.bd-links .current>a {
box-shadow: none;
border-left: 4px solid var(--pst-color-primary) !important;
}
/* Right sidebar */
.bd-sidebar-secondary .sidebar-secondary-items .nav-item .active {
box-shadow: none;
border-left: 5px solid var(--pst-color-primary) !important;
}
.bd-sidebar-secondary .sidebar-secondary-items .nav-item>a:focus-visible {
border: 2px solid var(--pst-color-primary);
}
}
html[data-theme="light"] .bd-header {
border-bottom: 1px solid var(--pst-color-border);
}
@ -74,6 +96,7 @@ html[data-theme="light"] .bd-header {
transform: translateY(0);
}
.bd-content .sd-tab-set>label {
border: none;
background-color: transparent;
font-weight: 500;
}