-
-
Notifications
You must be signed in to change notification settings - Fork 79.2k
Closed
Labels
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
In Windows high contrast mode the navbar in bootstrap docs https://getbootstrap.com/docs/5.3/getting-started/introduction/ becomes transparent.
Also see: #35941
Maybe just change
bootstrap/site/assets/scss/_navbar.scss
Lines 1 to 13 in 048f56f
| .bd-navbar { | |
| padding: .75rem 0; | |
| background-color: transparent; | |
| box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); | |
| &::after { | |
| position: absolute; | |
| inset: 0; | |
| z-index: -1; | |
| display: block; | |
| content: ""; | |
| background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); | |
| } |
.bd-navbar {
background-color: transparent;
&::after {
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
}to something like
.bd-navbar {
background-color: rgba(var(--bd-violet-rgb), .00001);
&::after {
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
}or
.bd-navbar {
background-color: transparent;
@media (forced-colors) {
background-color: var(--bd-violet);
}
&::after {
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
}Reduced test cases
https://codepen.io/rr-it/pen/MWMVXKQ
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.3
coliff