diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss index b9716ecfba2a..7945af8cfb9e 100644 --- a/assets/scss/_registry.scss +++ b/assets/scss/_registry.scss @@ -40,39 +40,38 @@ @extend .shadow; } - -// Optimize styles and responsiveness for dark and light mode, see https://getbootstrap.com/docs/5.3/customize/color-modes/ -.btn.btn-outline-success { - color: var(--bs-emphasis-color); - - &:hover, - &:focus, - &:active - { - color: var(--bs-white); +// Optimize styles and responsiveness for dark and light mode, see https://getbootstrap.com/docs/5.3/customize/color-modes/ +#searchForm .btn.btn-outline-success, +.btn-outline-danger, +.btn-outline-secondary { + &:hover { + color: var(--bs-white); } } -.badge.rounded-pill.text-bg-primary{ +.badge.rounded-pill.text-bg-primary { font-weight: $font-weight-bold; } - // override search box entry border styling in dark mode for mobile devices -$color-mode-type: data; +$color-mode-type: data; @include color-mode(dark) { @media (max-width: 767.98px) { .form-control { - border: 1px solid rgba(var(--bs-body-color-rgb), 0.6); + border: 1px solid rgba(var(--bs-body-color-rgb), 0.6); } - .ms-auto > .badge{ + .ms-auto > .badge { font-size: $font-size-sm; } - } } +// Define dark mode colors for data container +$dark-border-color: darken(#cccccc, 20%); - - +@media (prefers-color-scheme: dark) { + .registry-entry .border-secondary { + border-color: $dark-border-color; + } +}