mirror of https://github.com/vector-im/riot-web
Improve high-contrast support for spotlight (#8948)
Janne Mareike Koschinski
GitHub
parent
bb859d5886
commit
c3f26d619e
|
|
@ -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 <kbd> 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 <kbd> elements
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $tertiary-content;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment
|
|||
role="option"
|
||||
>
|
||||
{ children }
|
||||
<div className="mx_SpotlightDialog_enterPrompt" aria-hidden>↵</div>
|
||||
<kbd className="mx_SpotlightDialog_enterPrompt" aria-hidden>↵</kbd>
|
||||
{ endAdornment }
|
||||
</AccessibleButton>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -996,10 +996,10 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
|
|||
<div id="mx_SpotlightDialog_keyboardPrompt">
|
||||
{ _t("Use <arrows/> to scroll", {}, {
|
||||
arrows: () => <>
|
||||
<div>↓</div>
|
||||
<div>↑</div>
|
||||
{ !filter !== null && !query && <div>←</div> }
|
||||
{ !filter !== null && !query && <div>→</div> }
|
||||
<kbd>↓</kbd>
|
||||
<kbd>↑</kbd>
|
||||
{ !filter !== null && !query && <kbd>←</kbd> }
|
||||
{ !filter !== null && !query && <kbd>→</kbd> }
|
||||
</>,
|
||||
}) }
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue