diff --git a/res/css/views/dialogs/_SpotlightDialog.scss b/res/css/views/dialogs/_SpotlightDialog.scss index 93e4289ad5f..93385f29576 100644 --- a/res/css/views/dialogs/_SpotlightDialog.scss +++ b/res/css/views/dialogs/_SpotlightDialog.scss @@ -34,7 +34,7 @@ limitations under the License. line-height: $font-15px; color: $secondary-content; - > span > div { + kbd { display: inline-block; padding: 2px $spacing-4; // TODO: Use a spacing variable margin: 0 $spacing-4; @@ -42,6 +42,10 @@ limitations under the License. background-color: $quinary-content; vertical-align: middle; color: $tertiary-content; + // To avoid any styling inherent with elements + font-family: inherit; + font-weight: inherit; + font-size: inherit; } } } @@ -424,6 +428,9 @@ limitations under the License. .mx_SpotlightDialog_enterPrompt { padding: 2px $spacing-4; // TODO: Use a spacing variable + // To avoid any styling inherent with elements + font-family: inherit; + font-weight: inherit; font-size: $font-12px; line-height: $font-15px; color: $tertiary-content; diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.scss b/res/themes/light-high-contrast/css/_light-high-contrast.scss index 0c5d48314cb..33b1239aa0f 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.scss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.scss @@ -129,3 +129,112 @@ $roomtopic-color: $secondary-content; .mx_Dialog_buttons button.mx_LocationPicker_cancelButton::before { background-color: $background !important; } + +.mx_SpotlightDialog_wrapper .mx_Dialog { + #mx_SpotlightDialog_keyboardPrompt { + kbd { + color: $background !important; + } + } +} + +.mx_SpotlightDialog { + .mx_SpotlightDialog_searchBox { + > .mx_SpotlightDialog_filter { + color: $background !important; + &::before { + background-color: $background !important; + } + } + } + #mx_SpotlightDialog_content { + .mx_SpotlightDialog_recentlyViewed { + .mx_SpotlightDialog_option { + &:hover, &[aria-selected=true] { + color: $background !important; + + .mx_DecoratedRoomAvatar_icon::before { + background-color: $background !important; + } + } + } + } + .mx_SpotlightDialog_results, + .mx_SpotlightDialog_recentSearches, + .mx_SpotlightDialog_otherSearches, + .mx_SpotlightDialog_hiddenResults { + .mx_SpotlightDialog_option { + &:hover, &[aria-selected=true] { + background-color: $quinary-content !important; + color: $background !important; + + &.mx_SpotlightDialog_startChat::before, + &.mx_SpotlightDialog_joinRoomAlias::before, + &.mx_SpotlightDialog_explorePublicRooms::before, + &.mx_SpotlightDialog_startGroupChat::before { + background-color: $background !important; + } + + .mx_DecoratedRoomAvatar_icon::before { + background-color: $background !important; + } + + .mx_SpotlightDialog_result_publicRoomDetails { + .mx_SpotlightDialog_result_publicRoomHeader { + .mx_SpotlightDialog_result_publicRoomName { + color: $background; + } + .mx_SpotlightDialog_result_publicRoomAlias { + color: $background; + } + } + .mx_SpotlightDialog_result_publicRoomDescription { + color: $background; + } + } + + .mx_NotificationBadge { + background-color: $background !important; + } + + .mx_SpotlightDialog_result_details { + color: $background !important; + } + } + } + } + .mx_SpotlightDialog_enterPrompt { + background-color: $background !important; + } + } +} + +.mx_GenericDropdownMenu_button:hover, +.mx_GenericDropdownMenu_button[aria-expanded=true] { + color: $background !important; +} + +.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper { + .mx_GenericDropdownMenu_Option { + &.mx_GenericDropdownMenu_Option--item { + &:hover { + background-color: $quinary-content !important; + color: $background !important; + + &[aria-checked="true"]::before { + background-color: $background !important; + } + + > .mx_GenericDropdownMenu_Option--label { + span:first-child { + color: $background !important; + } + } + } + } + } +} + +.mx_NetworkDropdown_removeServer::before { + background-color: $background !important; +} diff --git a/src/components/views/dialogs/spotlight/Option.tsx b/src/components/views/dialogs/spotlight/Option.tsx index 3e11e7c38fd..6e082f6e1bc 100644 --- a/src/components/views/dialogs/spotlight/Option.tsx +++ b/src/components/views/dialogs/spotlight/Option.tsx @@ -37,7 +37,7 @@ export const Option: React.FC = ({ inputRef, children, endAdornment role="option" > { children } -
+ { endAdornment } ; }; diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx index cb2950c6867..f633ca66ddb 100644 --- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx +++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx @@ -996,10 +996,10 @@ const SpotlightDialog: React.FC = ({ initialText = "", initialFilter = n
{ _t("Use to scroll", {}, { arrows: () => <> -
-
- { !filter !== null && !query &&
} - { !filter !== null && !query &&
} + + + { !filter !== null && !query && } + { !filter !== null && !query && } , }) }