2022-07-27 13:39:29 +00:00
|
|
|
/* Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847 */
|
2021-10-22 14:18:49 +00:00
|
|
|
$accent: #268075;
|
2022-12-12 11:24:14 +00:00
|
|
|
$alert: #d62c25;
|
|
|
|
$links: #0a6eca;
|
|
|
|
$primary-content: #17191c;
|
|
|
|
$secondary-content: #5e6266;
|
2021-10-27 13:31:54 +00:00
|
|
|
$tertiary-content: $secondary-content;
|
|
|
|
$quaternary-content: $secondary-content;
|
|
|
|
$quinary-content: $secondary-content;
|
2021-10-22 14:18:49 +00:00
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
$username-variant1-color: #0a6eca;
|
|
|
|
$username-variant2-color: #ac3ba8;
|
2021-10-22 14:18:49 +00:00
|
|
|
$username-variant3-color: #078662;
|
2022-12-12 11:24:14 +00:00
|
|
|
$username-variant4-color: #cc1449;
|
|
|
|
$username-variant5-color: #be4c00;
|
|
|
|
$username-variant6-color: #1c7274;
|
|
|
|
$username-variant7-color: #5c56f5;
|
|
|
|
$username-variant8-color: #3e810a;
|
2021-10-22 14:18:49 +00:00
|
|
|
|
2021-11-11 13:37:29 +00:00
|
|
|
$accent-alt: $links;
|
2021-10-27 13:31:54 +00:00
|
|
|
$input-border-color: $secondary-content;
|
2021-10-22 14:18:49 +00:00
|
|
|
$input-darker-bg-color: $quinary-content;
|
2021-10-27 13:31:54 +00:00
|
|
|
$input-darker-fg-color: $secondary-content;
|
2021-10-22 14:18:49 +00:00
|
|
|
$resend-button-divider-color: $input-darker-bg-color;
|
|
|
|
$icon-button-color: $quaternary-content;
|
|
|
|
$theme-button-bg-color: $quinary-content;
|
|
|
|
$presence-offline: $quinary-content;
|
|
|
|
$pinned-color: $tertiary-content;
|
|
|
|
$button-secondary-bg-color: $accent-fg-color;
|
|
|
|
$message-action-bar-fg-color: $primary-content;
|
|
|
|
$voice-record-stop-border-color: $quinary-content;
|
|
|
|
$voice-record-icon-color: $tertiary-content;
|
|
|
|
$appearance-tab-border-color: $input-darker-bg-color;
|
|
|
|
$eventbubble-reply-color: $quaternary-content;
|
2021-10-27 13:31:54 +00:00
|
|
|
$roomtopic-color: $secondary-content;
|
2021-10-22 14:18:49 +00:00
|
|
|
|
2022-07-27 13:39:29 +00:00
|
|
|
/* Draw an outline on buttons with focus */
|
2021-10-27 13:31:54 +00:00
|
|
|
.mx_AccessibleButton:focus {
|
2021-11-11 13:37:29 +00:00
|
|
|
outline: 2px solid $accent;
|
2021-10-27 13:31:54 +00:00
|
|
|
outline-offset: 2px;
|
|
|
|
}
|
|
|
|
|
2022-07-27 13:39:29 +00:00
|
|
|
/* Add padding (and remove margin to compensate), so the outline is not */
|
|
|
|
/* chopped off on the left */
|
2021-11-10 11:24:27 +00:00
|
|
|
.mx_TabbedView_tabPanel {
|
2022-12-12 11:24:14 +00:00
|
|
|
margin-left: 236px !important; /* Remove 4 to allow 4 in mx_SettingsTab */
|
2021-11-10 11:24:27 +00:00
|
|
|
}
|
|
|
|
.mx_SettingsTab {
|
|
|
|
padding-left: 4px !important;
|
|
|
|
}
|
|
|
|
.mx_BaseCard {
|
2022-12-12 11:24:14 +00:00
|
|
|
padding-left: 4px !important; /* Remove 4 to allow 4 in mx_BaseCard_Group */
|
2021-11-10 11:24:27 +00:00
|
|
|
}
|
|
|
|
.mx_BaseCard_Group {
|
|
|
|
padding-left: 4px !important;
|
|
|
|
}
|
|
|
|
|
2021-10-27 13:31:54 +00:00
|
|
|
.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
|
|
|
|
color: $secondary-content;
|
|
|
|
opacity: 1 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_TextualEvent {
|
|
|
|
color: $secondary-content;
|
|
|
|
opacity: 1 !important;
|
|
|
|
}
|
|
|
|
|
2022-12-12 11:24:14 +00:00
|
|
|
.mx_Dialog,
|
|
|
|
.mx_MatrixChat_wrapper {
|
2022-07-15 13:53:23 +00:00
|
|
|
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
|
|
|
|
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
|
2021-10-27 13:31:54 +00:00
|
|
|
.mx_textinput input::placeholder {
|
|
|
|
color: $input-darker-fg-color !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton {
|
2021-11-29 12:52:09 +00:00
|
|
|
background-color: $panel-actions !important;
|
2021-10-27 13:31:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.mx_FontScalingPanel_fontSlider {
|
2021-11-29 12:52:09 +00:00
|
|
|
background-color: $panel-actions !important;
|
2021-10-27 13:31:54 +00:00
|
|
|
}
|
2021-10-28 12:01:50 +00:00
|
|
|
|
2021-11-04 12:57:38 +00:00
|
|
|
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
|
2021-10-28 12:01:50 +00:00
|
|
|
border-color: $primary-content;
|
|
|
|
}
|
|
|
|
|
2021-11-04 12:57:38 +00:00
|
|
|
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
|
2021-10-28 12:01:50 +00:00
|
|
|
color: $primary-content;
|
|
|
|
}
|
2021-12-09 09:13:03 +00:00
|
|
|
|
|
|
|
.mx_RoomSearch {
|
2022-12-12 11:24:14 +00:00
|
|
|
&.mx_RoomSearch_focused,
|
|
|
|
&.mx_RoomSearch_hasQuery {
|
2021-12-09 09:13:03 +00:00
|
|
|
.mx_RoomSearch_clearButton {
|
|
|
|
&::before {
|
|
|
|
background-color: $background !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.mx_PollCreateDialog {
|
|
|
|
.mx_PollCreateDialog_option {
|
|
|
|
.mx_PollCreateDialog_removeOption {
|
|
|
|
&::before {
|
|
|
|
background-color: $background !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-01-21 15:40:51 +00:00
|
|
|
|
|
|
|
.mx_Dialog_buttons button.mx_LocationPicker_cancelButton::before {
|
|
|
|
background-color: $background !important;
|
|
|
|
}
|
2022-06-30 14:17:30 +00:00
|
|
|
|
|
|
|
.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 {
|
2022-12-12 11:24:14 +00:00
|
|
|
&:hover,
|
|
|
|
&[aria-selected="true"] {
|
2022-06-30 14:17:30 +00:00
|
|
|
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 {
|
2022-12-12 11:24:14 +00:00
|
|
|
&:hover,
|
|
|
|
&[aria-selected="true"] {
|
2022-06-30 14:17:30 +00:00
|
|
|
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,
|
2022-07-15 13:53:23 +00:00
|
|
|
.mx_GenericDropdownMenu_button[aria-expanded="true"] {
|
2022-06-30 14:17:30 +00:00
|
|
|
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;
|
|
|
|
}
|