OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Color cleanup number six (#7050) 

* Remove $voip-decline-color and $voip-accept-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $dialog-background-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $mention-user-pill-bg-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $plinth-bg-color -> $secondary-accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-lighter-fg-color -> $input-darker-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-valid-border-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-invalid-border-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $avatar-bg-color -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $preview-widget-fg-color -> $greyed-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $settings-profile-button-fg-color -> $settings-profile-overlay-placeholder-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $presence-online -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $pinned-unread-color -> $notice-primary-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $event-highlight-fg-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $tab-label-active-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-primary-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-danger-bg-color -> $notice-primary-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-link-fg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $togglesw-on-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $slider-selection-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $progressbar-fg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $authpage-body-bg-color -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix merge issue

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix second merge issue

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-11-08 12:50:53 +01:00 committed by GitHub
parent f08c0b3592
commit 07d9e93d67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 65 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/_common.scss
View File

@ -221,7 +221,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput { .mx_textinput {
color: $input-lighter-fg-color; color: $input-darker-fg-color;
background-color: $input-lighter-bg-color; background-color: $input-lighter-bg-color;
border: none; border: none;
} }

2
res/css/structures/_RightPanel.scss
View File

@ -104,7 +104,7 @@ limitations under the License.
} }
$dot-size: 8px; $dot-size: 8px;
$pulse-color: $pinned-unread-color; $pulse-color: $notice-primary-color;
.mx_RightPanel_pinnedMessagesButton { .mx_RightPanel_pinnedMessagesButton {
&::before { &::before {

2
res/css/structures/_TabbedView.scss
View File

@ -44,7 +44,7 @@ limitations under the License.
} }
.mx_TabbedView_tabLabel_active { .mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color; background-color: $accent-color;
color: $tab-label-active-fg-color; color: $tab-label-active-fg-color;
} }

8
res/css/views/auth/_AuthBody.scss
View File

@ -19,7 +19,7 @@ limitations under the License.
width: 500px; width: 500px;
font-size: $font-12px; font-size: $font-12px;
color: $authpage-secondary-color; color: $authpage-secondary-color;
background-color: $authpage-body-bg-color; background-color: $background;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
padding: 25px 60px; padding: 25px 60px;
box-sizing: border-box; box-sizing: border-box;
@ -55,7 +55,7 @@ limitations under the License.
.mx_Field input, .mx_Field input,
.mx_Field select { .mx_Field select {
color: $authpage-primary-color; color: $authpage-primary-color;
background-color: $authpage-body-bg-color; background-color: $background;
} }
.mx_Field_labelAlwaysTopLeft label, .mx_Field_labelAlwaysTopLeft label,
@ -64,7 +64,7 @@ limitations under the License.
.mx_Field input:not(:placeholder-shown) + label, .mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label, .mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + label { .mx_Field textarea:not(:placeholder-shown) + label {
background-color: $authpage-body-bg-color; background-color: $background;
} }
input.error { input.error {
@ -88,7 +88,7 @@ limitations under the License.
} }
.mx_Dropdown_menu { .mx_Dropdown_menu {
background-color: $authpage-body-bg-color; background-color: $background;
.mx_Dropdown_option_highlight { .mx_Dropdown_option_highlight {
background-color: $authpage-focus-bg-color; background-color: $authpage-focus-bg-color;

2
res/css/views/auth/_CompleteSecurityBody.scss
View File

@ -18,7 +18,7 @@ limitations under the License.
.mx_CompleteSecurityBody { .mx_CompleteSecurityBody {
width: 600px; width: 600px;
color: $authpage-primary-color; color: $authpage-primary-color;
background-color: $authpage-body-bg-color; background-color: $background;
border-radius: 4px; border-radius: 4px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;

2
res/css/views/avatars/_BaseAvatar.scss
View File

@ -43,5 +43,5 @@ limitations under the License.
object-fit: cover; object-fit: cover;
border-radius: 125px; border-radius: 125px;
vertical-align: top; vertical-align: top;
background-color: $avatar-bg-color; background-color: $background;
} }

2
res/css/views/avatars/_DecoratedRoomAvatar.scss
View File

@ -56,7 +56,7 @@ limitations under the License.
} }
.mx_DecoratedRoomAvatar_icon_online::before { .mx_DecoratedRoomAvatar_icon_online::before {
background-color: $presence-online; background-color: $accent-color;
} }
.mx_DecoratedRoomAvatar_icon_away::before { .mx_DecoratedRoomAvatar_icon_away::before {

4
res/css/views/dialogs/_ForwardDialog.scss
View File

@ -138,7 +138,7 @@ limitations under the License.
} }
&.mx_ForwardList_sending .mx_ForwardList_sendIcon { &.mx_ForwardList_sending .mx_ForwardList_sendIcon {
background-color: $button-primary-bg-color; background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/circle-sending.svg'); mask-image: url('$(res)/img/element-icons/circle-sending.svg');
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -148,7 +148,7 @@ limitations under the License.
} }
&.mx_ForwardList_sent .mx_ForwardList_sendIcon { &.mx_ForwardList_sent .mx_ForwardList_sendIcon {
background-color: $button-primary-bg-color; background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/circle-sent.svg'); mask-image: url('$(res)/img/element-icons/circle-sent.svg');
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;

8
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View File

@ -100,18 +100,18 @@ limitations under the License.
} }
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { .mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
color: $input-valid-border-color; color: $accent-color;
&::before { &::before {
mask-image: url('$(res)/img/feather-customised/check.svg'); mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $input-valid-border-color; background-color: $accent-color;
} }
} }
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { .mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
color: $input-invalid-border-color; color: $warning-color;
&::before { &::before {
mask-image: url('$(res)/img/feather-customised/x.svg'); mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $input-invalid-border-color; background-color: $warning-color;
} }
} }

2
res/css/views/directory/_NetworkDropdown.scss
View File

@ -108,7 +108,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/feather-customised/check.svg'); mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $input-valid-border-color; background-color: $accent-color;
} }
} }
} }

26
res/css/views/elements/_AccessibleButton.scss
View File

@ -35,15 +35,15 @@ limitations under the License.
.mx_AccessibleButton_kind_primary { .mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color; color: $button-primary-fg-color;
background-color: $button-primary-bg-color; background-color: $accent-color;
border: 1px solid $button-primary-bg-color; // account for size loss of no border border: 1px solid $accent-color; // account for size loss of no border
font-weight: 600; font-weight: 600;
} }
.mx_AccessibleButton_kind_primary_outline { .mx_AccessibleButton_kind_primary_outline {
color: $button-primary-bg-color; color: $accent-color;
background-color: $button-secondary-bg-color; background-color: $button-secondary-bg-color;
border: 1px solid $button-primary-bg-color; border: 1px solid $accent-color;
font-weight: 600; font-weight: 600;
} }
@ -60,7 +60,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm { .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
padding: 5px 12px; padding: 5px 12px;
color: $button-primary-fg-color; color: $button-primary-fg-color;
background-color: $button-primary-bg-color; background-color: $accent-color;
} }
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled { .mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
@ -69,13 +69,13 @@ limitations under the License.
.mx_AccessibleButton_kind_danger { .mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color; color: $button-danger-fg-color;
background-color: $button-danger-bg-color; background-color: $notice-primary-color;
} }
.mx_AccessibleButton_kind_danger_outline { .mx_AccessibleButton_kind_danger_outline {
color: $button-danger-bg-color; color: $notice-primary-color;
background-color: transparent; background-color: transparent;
border: 1px solid $button-danger-bg-color; border: 1px solid $notice-primary-color;
} }
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled { .mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
@ -91,7 +91,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm { .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
padding: 5px 12px; padding: 5px 12px;
color: $button-danger-fg-color; color: $button-danger-fg-color;
background-color: $button-danger-bg-color; background-color: $notice-primary-color;
} }
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled { .mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
@ -100,7 +100,7 @@ limitations under the License.
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
color: $button-link-fg-color; color: $accent-color;
background-color: $button-link-bg-color; background-color: $button-link-bg-color;
} }
@ -110,7 +110,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm { .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px; padding: 5px 12px;
color: $button-link-fg-color; color: $accent-color;
background-color: $button-link-bg-color; background-color: $button-link-bg-color;
} }
@ -119,7 +119,7 @@ limitations under the License.
} }
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm { .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm {
background-color: $button-primary-bg-color; background-color: $accent-color;
&::before { &::before {
mask-image: url('$(res)/img/feather-customised/check.svg'); mask-image: url('$(res)/img/feather-customised/check.svg');
@ -127,7 +127,7 @@ limitations under the License.
} }
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm { .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm {
background-color: $button-danger-bg-color; background-color: $notice-primary-color;
&::before { &::before {
mask-image: url('$(res)/img/feather-customised/x.svg'); mask-image: url('$(res)/img/feather-customised/x.svg');

2
res/css/views/elements/_DirectorySearchBox.scss
View File

@ -25,7 +25,7 @@ limitations under the License.
padding: 3px; padding: 3px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: $plinth-bg-color; background-color: $secondary-accent-color;
border-radius: 3px; border-radius: 3px;
background-image: url('$(res)/img/icon-return.svg'); background-image: url('$(res)/img/icon-return.svg');
background-position: 8px 70%; background-position: 8px 70%;

8
res/css/views/elements/_Field.scss
View File

@ -152,24 +152,24 @@ limitations under the License.
.mx_Field_valid { .mx_Field_valid {
&.mx_Field, &.mx_Field,
&.mx_Field:focus-within { &.mx_Field:focus-within {
border-color: $input-valid-border-color; border-color: $accent-color;
} }
&.mx_Field label, &.mx_Field label,
&.mx_Field:focus-within label { &.mx_Field:focus-within label {
color: $input-valid-border-color; color: $accent-color;
} }
} }
.mx_Field_invalid { .mx_Field_invalid {
&.mx_Field, &.mx_Field,
&.mx_Field:focus-within { &.mx_Field:focus-within {
border-color: $input-invalid-border-color; border-color: $warning-color;
} }
&.mx_Field label, &.mx_Field label,
&.mx_Field:focus-within label { &.mx_Field:focus-within label {
color: $input-invalid-border-color; color: $warning-color;
} }
} }

2
res/css/views/elements/_ProgressBar.scss
View File

@ -22,7 +22,7 @@ progress.mx_ProgressBar {
border: none; border: none;
@mixin ProgressBarBorderRadius 6px; @mixin ProgressBarBorderRadius 6px;
@mixin ProgressBarColour $progressbar-fg-color; @mixin ProgressBarColour $accent-color;
@mixin ProgressBarBgColour $progressbar-bg-color; @mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value { ::-webkit-progress-value {
transition: width 1s; transition: width 1s;

2
res/css/views/elements/_ReplyChain.scss
View File

@ -20,7 +20,7 @@ limitations under the License.
margin-right: 0; margin-right: 0;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0 10px; padding: 0 10px;
border-left: 2px solid $button-bg-color; border-left: 2px solid $accent-color;
border-radius: 2px; border-radius: 2px;
.mx_ReplyChain_show { .mx_ReplyChain_show {

2
res/css/views/elements/_RichText.scss
View File

@ -57,7 +57,7 @@ a.mx_Pill {
.mx_EventTile_content .mx_AtRoomPill, .mx_EventTile_content .mx_AtRoomPill,
.mx_MessageComposer_input .mx_AtRoomPill { .mx_MessageComposer_input .mx_AtRoomPill {
color: $accent-fg-color; color: $accent-fg-color;
background-color: $mention-user-pill-bg-color; background-color: $warning-color;
} }
/* More specific to override `.markdown-body a` color */ /* More specific to override `.markdown-body a` color */

6
res/css/views/elements/_SSOButtons.scss
View File

@ -46,13 +46,13 @@ limitations under the License.
} }
.mx_SSOButton_default { .mx_SSOButton_default {
color: $button-primary-bg-color; color: $accent-color;
background-color: $button-secondary-bg-color; background-color: $button-secondary-bg-color;
border-color: $button-primary-bg-color; border-color: $accent-color;
} }
.mx_SSOButton_default.mx_SSOButton_primary { .mx_SSOButton_default.mx_SSOButton_primary {
color: $button-primary-fg-color; color: $button-primary-fg-color;
background-color: $button-primary-bg-color; background-color: $accent-color;
} }
.mx_SSOButton_mini { .mx_SSOButton_mini {

6
res/css/views/elements/_Slider.scss
View File

@ -56,7 +56,7 @@ limitations under the License.
position: absolute; position: absolute;
width: $slider-selection-dot-size; width: $slider-selection-dot-size;
height: $slider-selection-dot-size; height: $slider-selection-dot-size;
background-color: $slider-selection-color; background-color: $accent-color;
border-radius: 50%; border-radius: 50%;
z-index: 10; z-index: 10;
} }
@ -72,7 +72,7 @@ limitations under the License.
.mx_Slider_selection > hr { .mx_Slider_selection > hr {
margin: 0; margin: 0;
border: 0.2em solid $slider-selection-color; border: 0.2em solid $accent-color;
} }
.mx_Slider_dot { .mx_Slider_dot {
@ -84,7 +84,7 @@ limitations under the License.
} }
.mx_Slider_dotActive { .mx_Slider_dotActive {
background-color: $slider-selection-color; background-color: $accent-color;
} }
.mx_Slider_dotValue { .mx_Slider_dotValue {

2
res/css/views/elements/_ToggleSwitch.scss
View File

@ -32,7 +32,7 @@ limitations under the License.
} }
.mx_ToggleSwitch.mx_ToggleSwitch_on { .mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: $togglesw-on-color; background-color: $accent-color;
> .mx_ToggleSwitch_ball { > .mx_ToggleSwitch_ball {
left: calc(100% - $font-20px); left: calc(100% - $font-20px);

8
res/css/views/elements/_Validation.scss
View File

@ -50,20 +50,20 @@ limitations under the License.
} }
&.mx_Validation_valid { &.mx_Validation_valid {
color: $input-valid-border-color; color: $accent-color;
&::before { &::before {
mask-image: url('$(res)/img/feather-customised/check.svg'); mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $input-valid-border-color; background-color: $accent-color;
} }
} }
&.mx_Validation_invalid { &.mx_Validation_invalid {
color: $input-invalid-border-color; color: $warning-color;
&::before { &::before {
mask-image: url('$(res)/img/feather-customised/x.svg'); mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $input-invalid-border-color; background-color: $warning-color;
} }
} }
} }

6
res/css/views/emojipicker/_EmojiPicker.scss
View File

@ -52,7 +52,7 @@ limitations under the License.
&:not(:disabled):hover { &:not(:disabled):hover {
background-color: $focus-bg-color; background-color: $focus-bg-color;
border-bottom: 2px solid $button-bg-color; border-bottom: 2px solid $accent-color;
} }
} }
@ -82,7 +82,7 @@ limitations under the License.
.mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg'); } .mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg'); }
.mx_EmojiPicker_anchor_visible { .mx_EmojiPicker_anchor_visible {
border-bottom: 2px solid $button-bg-color; border-bottom: 2px solid $accent-color;
} }
.mx_EmojiPicker_search { .mx_EmojiPicker_search {
@ -178,7 +178,7 @@ limitations under the License.
.mx_EmojiPicker_item_selected { .mx_EmojiPicker_item_selected {
color: rgba(0, 0, 0, .5); color: rgba(0, 0, 0, .5);
border: 1px solid $input-valid-border-color; border: 1px solid $accent-color;
padding: 4px; padding: 4px;
} }

2
res/css/views/rooms/_BasicMessageComposer.scss
View File

@ -54,7 +54,7 @@ limitations under the License.
width: $font-16px; width: $font-16px;
height: $font-16px; height: $font-16px;
margin-right: 0.24rem; margin-right: 0.24rem;
background: var(--avatar-background), $avatar-bg-color; background: var(--avatar-background), $background;
color: $avatar-initial-color; color: $avatar-initial-color;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: $font-16px; background-size: $font-16px;

2
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -43,7 +43,7 @@ limitations under the License.
background-color: $event-highlight-bg-color; background-color: $event-highlight-bg-color;
} }
color: $event-highlight-fg-color; color: $warning-color;
} }
/* For replies */ /* For replies */

2
res/css/views/rooms/_EventTile.scss
View File

@ -128,7 +128,7 @@ $left-gutter: 64px;
&.mx_EventTile_highlight, &.mx_EventTile_highlight,
&.mx_EventTile_highlight .markdown-body { &.mx_EventTile_highlight .markdown-body {
color: $event-highlight-fg-color; color: $warning-color;
.mx_EventTile_line { .mx_EventTile_line {
background-color: $event-highlight-bg-color; background-color: $event-highlight-bg-color;

2
res/css/views/rooms/_LinkPreviewWidget.scss
View File

@ -21,7 +21,7 @@ limitations under the License.
display: flex; display: flex;
border-left: 2px solid $preview-widget-bar-color; border-left: 2px solid $preview-widget-bar-color;
border-radius: 2px; border-radius: 2px;
color: $preview-widget-fg-color; color: $greyed-fg-color;
} }
.mx_LinkPreviewWidget_image { .mx_LinkPreviewWidget_image {

2
res/css/views/rooms/_MemberList.scss
View File

@ -86,7 +86,7 @@ limitations under the License.
.mx_MemberList_invite { .mx_MemberList_invite {
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
background-color: $button-bg-color; background-color: $accent-color;
border-radius: 4px; border-radius: 4px;
margin: 5px 9px 9px; margin: 5px 9px 9px;
display: flex; display: flex;

2
res/css/views/rooms/_MessageComposer.scss
View File

@ -282,7 +282,7 @@ limitations under the License.
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 100%; border-radius: 100%;
background-color: $button-bg-color; background-color: $accent-color;
&::before { &::before {
position: absolute; position: absolute;

2
res/css/views/rooms/_Stickers.scss
View File

@ -42,7 +42,7 @@
.mx_Stickers_addLink { .mx_Stickers_addLink {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
color: $button-link-fg-color; color: $accent-color;
} }
.mx_Stickers_hideStickers { .mx_Stickers_hideStickers {

2
res/css/views/settings/_AvatarSetting.scss
View File

@ -123,7 +123,7 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 55%; mask-size: 55%;
background-color: $settings-profile-button-fg-color; background-color: $settings-profile-overlay-placeholder-fg-color;
mask-image: url('$(res)/img/feather-customised/edit.svg'); mask-image: url('$(res)/img/feather-customised/edit.svg');
} }
} }

16
res/themes/dark/css/_dark.scss
View File

@ -38,7 +38,6 @@ $light-fg-color: $header-panel-text-secondary-color;
// used for focusing form controls // used for focusing form controls
$focus-bg-color: $room-highlight-color; $focus-bg-color: $room-highlight-color;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: $room-highlight-color; $other-user-pill-bg-color: $room-highlight-color;
$rte-room-pill-color: $room-highlight-color; $rte-room-pill-color: $room-highlight-color;
$rte-group-pill-color: $room-highlight-color; $rte-group-pill-color: $room-highlight-color;
@ -66,10 +65,7 @@ $input-border-color: rgba(231, 231, 231, 0.2);
$input-darker-bg-color: $search-bg-color; $input-darker-bg-color: $search-bg-color;
$input-darker-fg-color: $search-placeholder-color; $input-darker-fg-color: $search-placeholder-color;
$input-lighter-bg-color: #f2f5f8; $input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5; $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity. $resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
@ -84,7 +80,6 @@ $menu-box-shadow-color: $background;
$menu-selected-color: $room-highlight-color; $menu-selected-color: $room-highlight-color;
$avatar-initial-color: #ffffff; $avatar-initial-color: #ffffff;
$avatar-bg-color: $background;
$h3-color: $primary-content; $h3-color: $primary-content;
@ -93,14 +88,12 @@ $dialog-backdrop-color: #000;
$dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba; $dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: $header-panel-bg-color;
$lightbox-background-bg-color: #000; $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85; $lightbox-background-bg-opacity: 0.85;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-overlay-placeholder-fg-color: #454545; $settings-profile-overlay-placeholder-fg-color: #454545;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
$settings-subsection-fg-color: $text-secondary-color; $settings-subsection-fg-color: $text-secondary-color;
$topleftmenu-color: $primary-content; $topleftmenu-color: $primary-content;
@ -137,7 +130,6 @@ $widget-body-bg-color: rgba(141, 151, 165, 0.2);
$event-redacted-fg-color: #606060; $event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000; $event-redacted-border-color: #000000;
$event-highlight-fg-color: $warning-color;
$event-highlight-bg-color: #25271F; $event-highlight-bg-color: #25271F;
// event timestamp // event timestamp
@ -147,19 +139,15 @@ $event-timestamp-color: $text-secondary-color;
$tab-label-fg-color: $primary-content; $tab-label-fg-color: $primary-content;
$tab-label-active-fg-color: $primary-content; $tab-label-active-fg-color: $primary-content;
$tab-label-bg-color: transparent; $tab-label-bg-color: transparent;
$tab-label-active-bg-color: $accent-color;
$tab-label-icon-bg-color: $primary-content; $tab-label-icon-bg-color: $primary-content;
$tab-label-active-icon-bg-color: $primary-content; $tab-label-active-icon-bg-color: $primary-content;
// Buttons // Buttons
$button-primary-fg-color: $primary-content; $button-primary-fg-color: $primary-content;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: transparent; $button-secondary-bg-color: transparent;
$button-danger-fg-color: $primary-content; $button-danger-fg-color: $primary-content;
$button-danger-bg-color: $notice-primary-color;
$button-danger-disabled-fg-color: $primary-content; $button-danger-disabled-fg-color: $primary-content;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-fg-color: $accent-color;
$button-link-bg-color: transparent; $button-link-bg-color: transparent;
// Toggle switch // Toggle switch
@ -168,14 +156,12 @@ $togglesw-off-color: $room-highlight-color;
// Slider // Slider
$slider-background-color: $quinary-content; $slider-background-color: $quinary-content;
$progressbar-fg-color: $accent-color;
$progressbar-bg-color: $system; $progressbar-bg-color: $system;
$visual-bell-bg-color: #800; $visual-bell-bg-color: #800;
$room-warning-bg-color: $header-panel-bg-color; $room-warning-bg-color: $header-panel-bg-color;
$authpage-body-bg-color: $background;
$authpage-primary-color: $primary-content; $authpage-primary-color: $primary-content;
$dark-panel-bg-color: $header-panel-bg-color; $dark-panel-bg-color: $header-panel-bg-color;
@ -231,7 +217,7 @@ $eventbubble-reply-color: #C1C6CD;
font-family: $font-family; font-family: $font-family;
font-size: $font-14px; font-size: $font-14px;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $accent-color;
width: auto; width: auto;
padding: 7px; padding: 7px;
padding-left: 1.5em; padding-left: 1.5em;

18
res/themes/legacy-dark/css/_legacy-dark.scss
View File

@ -23,15 +23,12 @@ $tertiary-fg-color: $primary-fg-color;
$primary-bg-color: $bg-color; $primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-color; $muted-fg-color: $header-panel-text-primary-color;
// used for dialog box text // used for dialog box text
$light-fg-color: $header-panel-text-secondary-color; $light-fg-color: $header-panel-text-secondary-color;
// used for focusing form controls // used for focusing form controls
$focus-bg-color: $room-highlight-color; $focus-bg-color: $room-highlight-color;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: $room-highlight-color; $other-user-pill-bg-color: $room-highlight-color;
$rte-room-pill-color: $room-highlight-color; $rte-room-pill-color: $room-highlight-color;
$rte-group-pill-color: $room-highlight-color; $rte-group-pill-color: $room-highlight-color;
@ -59,10 +56,7 @@ $input-border-color: #e7e7e7;
$input-darker-bg-color: $search-bg-color; $input-darker-bg-color: $search-bg-color;
$input-darker-fg-color: $search-placeholder-color; $input-darker-fg-color: $search-placeholder-color;
$input-lighter-bg-color: #f2f5f8; $input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5; $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$resend-button-divider-color: $muted-fg-color; $resend-button-divider-color: $muted-fg-color;
@ -77,7 +71,6 @@ $menu-box-shadow-color: $bg-color;
$menu-selected-color: $room-highlight-color; $menu-selected-color: $room-highlight-color;
$avatar-initial-color: #ffffff; $avatar-initial-color: #ffffff;
$avatar-bg-color: $bg-color;
$h3-color: $primary-fg-color; $h3-color: $primary-fg-color;
@ -86,14 +79,12 @@ $dialog-backdrop-color: #000;
$dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba; $dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: $header-panel-bg-color;
$lightbox-background-bg-color: #000; $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85; $lightbox-background-bg-opacity: 0.85;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-overlay-placeholder-fg-color: #454545; $settings-profile-overlay-placeholder-fg-color: #454545;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
$settings-subsection-fg-color: $text-secondary-color; $settings-subsection-fg-color: $text-secondary-color;
$topleftmenu-color: $text-primary-color; $topleftmenu-color: $text-primary-color;
@ -133,7 +124,6 @@ $space-nav: rgba($panel-base, 0.1);
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color; $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color; $roomlist-bg-color: $header-panel-bg-color;
@ -156,7 +146,6 @@ $widget-body-bg-color: #1A1D23;
$event-redacted-fg-color: #606060; $event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000; $event-redacted-border-color: #000000;
$event-highlight-fg-color: $warning-color;
$event-highlight-bg-color: #25271F; $event-highlight-bg-color: #25271F;
// event timestamp // event timestamp
@ -166,25 +155,20 @@ $event-timestamp-color: $text-secondary-color;
$tab-label-fg-color: $text-primary-color; $tab-label-fg-color: $text-primary-color;
$tab-label-active-fg-color: $text-primary-color; $tab-label-active-fg-color: $text-primary-color;
$tab-label-bg-color: transparent; $tab-label-bg-color: transparent;
$tab-label-active-bg-color: $accent-color;
$tab-label-icon-bg-color: $text-primary-color; $tab-label-icon-bg-color: $text-primary-color;
$tab-label-active-icon-bg-color: $text-primary-color; $tab-label-active-icon-bg-color: $text-primary-color;
// Buttons // Buttons
$button-primary-fg-color: #ffffff; $button-primary-fg-color: #ffffff;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: transparent; $button-secondary-bg-color: transparent;
$button-danger-fg-color: #ffffff; $button-danger-fg-color: #ffffff;
$button-danger-bg-color: $notice-primary-color;
$button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-fg-color: $accent-color;
$button-link-bg-color: transparent; $button-link-bg-color: transparent;
// Toggle switch // Toggle switch
$togglesw-off-color: $room-highlight-color; $togglesw-off-color: $room-highlight-color;
$progressbar-fg-color: $accent-color;
$progressbar-bg-color: #21262c; $progressbar-bg-color: #21262c;
$visual-bell-bg-color: #800; $visual-bell-bg-color: #800;
@ -240,7 +224,7 @@ $eventbubble-reply-color: #C1C6CD;
font-family: $font-family; font-family: $font-family;
font-size: $font-14px; font-size: $font-14px;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $accent-color;
width: auto; width: auto;
padding: 7px; padding: 7px;
padding-left: 1.5em; padding-left: 1.5em;

28
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -49,7 +49,6 @@ $orange-warning-color: #ff8d13; // used for true warnings
// background colour for warnings // background colour for warnings
$warning-bg-color: #df2a8b; $warning-bg-color: #df2a8b;
$info-bg-color: #2a9edf; $info-bg-color: #2a9edf;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// informational plinth // informational plinth
@ -65,9 +64,6 @@ $tertiary-accent-color: #d3efe1;
$groupFilterPanel-bg-color: #27303a; $groupFilterPanel-bg-color: #27303a;
$inverted-bg-color: $groupFilterPanel-bg-color; $inverted-bg-color: $groupFilterPanel-bg-color;
// used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color;
// used by RoomDropTarget // used by RoomDropTarget
$droptarget-bg-color: rgba(255, 255, 255, 0.5); $droptarget-bg-color: rgba(255, 255, 255, 0.5);
@ -85,14 +81,10 @@ $input-border-color: #e7e7e7;
$input-darker-bg-color: #e3e8f0; $input-darker-bg-color: #e3e8f0;
$input-darker-fg-color: #9fa9ba; $input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8; $input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5; $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$resend-button-divider-color: $input-darker-bg-color; $resend-button-divider-color: $input-darker-bg-color;
$button-bg-color: $accent-color;
$button-fg-color: white; $button-fg-color: white;
// apart from login forms, which have stronger border // apart from login forms, which have stronger border
@ -111,7 +103,6 @@ $menu-box-shadow-color: rgba(118, 131, 156, 0.6);
$menu-selected-color: #f5f8fa; $menu-selected-color: #f5f8fa;
$avatar-initial-color: #ffffff; $avatar-initial-color: #ffffff;
$avatar-bg-color: #ffffff;
$h3-color: #3d3b39; $h3-color: #3d3b39;
@ -120,7 +111,6 @@ $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #c1c1c1; $dialog-close-fg-color: #c1c1c1;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000; $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.95; $lightbox-background-bg-opacity: 0.95;
@ -133,7 +123,6 @@ $greyed-fg-color: #888;
$neutral-badge-color: #dbdbdb; $neutral-badge-color: #dbdbdb;
$preview-widget-bar-color: #ddd; $preview-widget-bar-color: #ddd;
$preview-widget-fg-color: $greyed-fg-color;
$blockquote-bar-color: #ddd; $blockquote-bar-color: #ddd;
$blockquote-fg-color: #777; $blockquote-fg-color: #777;
@ -141,12 +130,8 @@ $blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
$settings-subsection-fg-color: #61708b; $settings-subsection-fg-color: #61708b;
$voip-decline-color: #f48080;
$voip-accept-color: #80f480;
$rte-bg-color: #e9e9e9; $rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-code-bg-color: rgba(0, 0, 0, 0.04);
$rte-room-pill-color: #aaa; $rte-room-pill-color: #aaa;
@ -179,7 +164,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #fff; $roomtile-selected-bg-color: #fff;
$presence-online: $accent-color;
$presence-away: #d9b072; $presence-away: #d9b072;
$presence-offline: #e3e8f0; $presence-offline: #e3e8f0;
@ -232,7 +216,6 @@ $yellow-background: #fff8e3;
// event tile lifecycle // event tile lifecycle
$event-notsent-color: #f44; $event-notsent-color: #f44;
$event-highlight-fg-color: $warning-color;
$event-highlight-bg-color: $yellow-background; $event-highlight-bg-color: $yellow-background;
// event redaction // event redaction
@ -261,33 +244,26 @@ $lightbox-border-color: #ffffff;
$tab-label-fg-color: #45474a; $tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff; $tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent; $tab-label-bg-color: transparent;
$tab-label-active-bg-color: $accent-color;
$tab-label-icon-bg-color: #454545; $tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: $tab-label-active-fg-color; $tab-label-active-icon-bg-color: $tab-label-active-fg-color;
// Buttons // Buttons
$button-primary-fg-color: #ffffff; $button-primary-fg-color: #ffffff;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: $accent-fg-color; $button-secondary-bg-color: $accent-fg-color;
$button-danger-fg-color: #ffffff; $button-danger-fg-color: #ffffff;
$button-danger-bg-color: $notice-primary-color;
$button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-fg-color: $accent-color;
$button-link-bg-color: transparent; $button-link-bg-color: transparent;
$visual-bell-bg-color: #faa; $visual-bell-bg-color: #faa;
// Toggle switch // Toggle switch
$togglesw-off-color: #c1c9d6; $togglesw-off-color: #c1c9d6;
$togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff; $togglesw-ball-color: #fff;
// Slider // Slider
$slider-selection-color: $accent-color;
$slider-background-color: #c1c9d6; $slider-background-color: #c1c9d6;
$progressbar-fg-color: $accent-color;
$progressbar-bg-color: rgba(141, 151, 165, 0.2); $progressbar-bg-color: rgba(141, 151, 165, 0.2);
$room-warning-bg-color: $yellow-background; $room-warning-bg-color: $yellow-background;
@ -296,7 +272,6 @@ $memberstatus-placeholder-color: $muted-fg-color;
$authpage-bg-color: #2e3649; $authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59); $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
$authpage-focus-bg-color: #dddddd; $authpage-focus-bg-color: #dddddd;
$authpage-lang-color: #4e5054; $authpage-lang-color: #4e5054;
$authpage-primary-color: #232f32; $authpage-primary-color: #232f32;
@ -344,7 +319,6 @@ $eventbubble-avatar-outline: #fff;
$eventbubble-reply-color: #C1C6CD; $eventbubble-reply-color: #C1C6CD;
// pinned events indicator // pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $tertiary-content; $pinned-color: $tertiary-content;
$groupFilterPanel-divider-color: $tertiary-content; $groupFilterPanel-divider-color: $tertiary-content;
@ -359,7 +333,7 @@ $groupFilterPanel-divider-color: $tertiary-content;
font-family: $font-family; font-family: $font-family;
font-size: $font-14px; font-size: $font-14px;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $accent-color;
width: auto; width: auto;
padding: 7px; padding: 7px;
padding-left: 1.5em; padding-left: 1.5em;

16
res/themes/light-custom/css/_custom.scss
View File

@ -39,22 +39,14 @@ $space-nav: rgba($panel-base, 0.1);
// --accent-color // --accent-color
$accent-color: var(--accent-color); $accent-color: var(--accent-color);
$accent-bg-color: var(--accent-color-15pct); $accent-bg-color: var(--accent-color-15pct);
$button-bg-color: var(--accent-color);
$button-link-fg-color: var(--accent-color);
$button-primary-bg-color: var(--accent-color);
$input-valid-border-color: var(--accent-color);
$reaction-row-button-selected-border-color: var(--accent-color); $reaction-row-button-selected-border-color: var(--accent-color);
$tab-label-active-bg-color: var(--accent-color);
$togglesw-on-color: var(--accent-color);
$username-variant3-color: var(--accent-color); $username-variant3-color: var(--accent-color);
$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 $accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
// //
// --timeline-background-color // --timeline-background-color
$authpage-body-bg-color: var(--timeline-background-color);
$button-secondary-bg-color: var(--timeline-background-color); $button-secondary-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color); $lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color); $menu-bg-color: var(--timeline-background-color);
$avatar-bg-color: var(--timeline-background-color);
$message-action-bar-bg-color: var(--timeline-background-color); $message-action-bar-bg-color: var(--timeline-background-color);
$background: var(--timeline-background-color); $background: var(--timeline-background-color);
$togglesw-ball-color: var(--timeline-background-color); $togglesw-ball-color: var(--timeline-background-color);
@ -78,7 +70,6 @@ $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-backgroun
// these were #f2f5f8 instead of #f3f8fd, but close enough // these were #f2f5f8 instead of #f3f8fd, but close enough
$dark-panel-bg-color: var(--roomlist-background-color); $dark-panel-bg-color: var(--roomlist-background-color);
$input-lighter-bg-color: var(--roomlist-background-color); $input-lighter-bg-color: var(--roomlist-background-color);
$plinth-bg-color: var(--roomlist-background-color);
$secondary-accent-color: var(--roomlist-background-color); $secondary-accent-color: var(--roomlist-background-color);
$selected-color: var(--roomlist-background-color); $selected-color: var(--roomlist-background-color);
$widget-menu-bar-bg-color: var(--roomlist-background-color); $widget-menu-bar-bg-color: var(--roomlist-background-color);
@ -123,19 +114,14 @@ $blockquote-fg-color: var(--timeline-text-secondary-color);
// was #888888 // was #888888
$greyed-fg-color: var(--timeline-text-secondary-color); $greyed-fg-color: var(--timeline-text-secondary-color);
$info-plinth-fg-color: var(--timeline-text-secondary-color); $info-plinth-fg-color: var(--timeline-text-secondary-color);
$preview-widget-fg-color: var(--timeline-text-secondary-color);
// //
// --primary-color // --primary-color
$accent-color-alt: var(--primary-color); $accent-color-alt: var(--primary-color);
$input-focused-border-color: var(--primary-color); $input-focused-border-color: var(--primary-color);
// //
// --warning-color // --warning-color
$button-danger-bg-color: var(--warning-color); $warning-color: var(--warning-color);
$event-highlight-fg-color: var(--warning-color);
$input-invalid-border-color: var(--warning-color);
$mention-user-pill-bg-color: var(--warning-color);
$notice-primary-color: var(--warning-color); $notice-primary-color: var(--warning-color);
$pinned-unread-color: var(--warning-color);
$warning-color: var(--warning-color); $warning-color: var(--warning-color);
$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5 $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
// //

15
res/themes/light-high-contrast/css/_light-high-contrast.scss
View File

@ -24,23 +24,13 @@ $accent-color-alt: $links;
$input-border-color: $secondary-content; $input-border-color: $secondary-content;
$input-darker-bg-color: $quinary-content; $input-darker-bg-color: $quinary-content;
$input-darker-fg-color: $secondary-content; $input-darker-fg-color: $secondary-content;
$input-lighter-fg-color: $input-darker-fg-color;
$input-valid-border-color: $accent-color;
$input-focused-border-color: $accent-color; $input-focused-border-color: $accent-color;
$button-bg-color: $accent-color;
$resend-button-divider-color: $input-darker-bg-color; $resend-button-divider-color: $input-darker-bg-color;
$icon-button-color: $quaternary-content; $icon-button-color: $quaternary-content;
$theme-button-bg-color: $quinary-content; $theme-button-bg-color: $quinary-content;
$presence-online: $accent-color;
$presence-offline: $quinary-content; $presence-offline: $quinary-content;
$pinned-color: $tertiary-content; $pinned-color: $tertiary-content;
$tab-label-active-bg-color: $accent-color;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: $accent-fg-color; $button-secondary-bg-color: $accent-fg-color;
$button-link-fg-color: $accent-color;
$togglesw-on-color: $accent-color;
$slider-selection-color: $accent-color;
$progressbar-fg-color: $accent-color;
$message-action-bar-fg-color: $primary-content; $message-action-bar-fg-color: $primary-content;
$reaction-row-button-selected-border-color: $accent-color; $reaction-row-button-selected-border-color: $accent-color;
$voice-record-stop-border-color: $quinary-content; $voice-record-stop-border-color: $quinary-content;
@ -49,11 +39,6 @@ $appearance-tab-border-color: $input-darker-bg-color;
$eventbubble-reply-color: $quaternary-content; $eventbubble-reply-color: $quaternary-content;
$notice-primary-color: $alert; $notice-primary-color: $alert;
$warning-color: $notice-primary-color; // red $warning-color: $notice-primary-color; // red
$pinned-unread-color: $notice-primary-color;
$button-danger-bg-color: $notice-primary-color;
$mention-user-pill-bg-color: $warning-color;
$input-invalid-border-color: $warning-color;
$event-highlight-fg-color: $warning-color;
$roomtopic-color: $secondary-content; $roomtopic-color: $secondary-content;
@define-mixin mx_DialogButton_danger { @define-mixin mx_DialogButton_danger {

28
res/themes/light/css/_light.scss
View File

@ -64,7 +64,6 @@ $orange-warning-color: #ff8d13; // used for true warnings
// background colour for warnings // background colour for warnings
$warning-bg-color: #DF2A8B; $warning-bg-color: #DF2A8B;
$info-bg-color: #2A9EDF; $info-bg-color: #2A9EDF;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// informational plinth // informational plinth
@ -79,9 +78,6 @@ $tertiary-accent-color: #d3efe1;
$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77); $groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
// used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color;
// used by AddressSelector // used by AddressSelector
$selected-color: $secondary-accent-color; $selected-color: $secondary-accent-color;
@ -96,12 +92,8 @@ $input-border-color: #e7e7e7;
$input-darker-bg-color: $quinary-content; $input-darker-bg-color: $quinary-content;
$input-darker-fg-color: #9fa9ba; $input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8; $input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-focused-border-color: #238cf5; $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$button-bg-color: $accent-color;
$button-fg-color: white; $button-fg-color: white;
$resend-button-divider-color: $input-darker-bg-color; $resend-button-divider-color: $input-darker-bg-color;
@ -122,7 +114,6 @@ $menu-box-shadow-color: rgba(118, 131, 156, 0.6);
$menu-selected-color: #f5f8fa; $menu-selected-color: #f5f8fa;
$avatar-initial-color: $background; $avatar-initial-color: $background;
$avatar-bg-color: $background;
$h3-color: #3d3b39; $h3-color: #3d3b39;
@ -131,7 +122,6 @@ $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48); $dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #c1c1c1; $dialog-close-fg-color: #c1c1c1;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000; $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.95; $lightbox-background-bg-opacity: 0.95;
@ -144,7 +134,6 @@ $greyed-fg-color: #888;
$neutral-badge-color: #dbdbdb; $neutral-badge-color: #dbdbdb;
$preview-widget-bar-color: #ddd; $preview-widget-bar-color: #ddd;
$preview-widget-fg-color: $greyed-fg-color;
$blockquote-bar-color: #ddd; $blockquote-bar-color: #ddd;
$blockquote-fg-color: #777; $blockquote-fg-color: #777;
@ -152,12 +141,8 @@ $blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
$settings-subsection-fg-color: #61708b; $settings-subsection-fg-color: #61708b;
$voip-decline-color: #f48080;
$voip-accept-color: #80f480;
$rte-bg-color: #e9e9e9; $rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-code-bg-color: rgba(0, 0, 0, 0.04);
$rte-room-pill-color: #aaa; $rte-room-pill-color: #aaa;
@ -188,7 +173,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$presence-online: $accent-color;
$presence-away: #d9b072; $presence-away: #d9b072;
$presence-offline: $quinary-content; $presence-offline: $quinary-content;
@ -206,7 +190,6 @@ $username-variant8-color: #74d12c;
$panel-divider-color: transparent; $panel-divider-color: transparent;
// pinned events indicator // pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $tertiary-content; $pinned-color: $tertiary-content;
// ******************** // ********************
@ -224,7 +207,6 @@ $yellow-background: #fff8e3;
// event tile lifecycle // event tile lifecycle
$event-notsent-color: #f44; $event-notsent-color: #f44;
$event-highlight-fg-color: $warning-color;
$event-highlight-bg-color: $yellow-background; $event-highlight-bg-color: $yellow-background;
// event redaction // event redaction
@ -253,33 +235,26 @@ $lightbox-border-color: #ffffff;
$tab-label-fg-color: #45474a; $tab-label-fg-color: #45474a;
$tab-label-active-fg-color: $background; $tab-label-active-fg-color: $background;
$tab-label-bg-color: transparent; $tab-label-bg-color: transparent;
$tab-label-active-bg-color: $accent-color;
$tab-label-icon-bg-color: #454545; $tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: $tab-label-active-fg-color; $tab-label-active-icon-bg-color: $tab-label-active-fg-color;
// Buttons // Buttons
$button-primary-fg-color: #ffffff; $button-primary-fg-color: #ffffff;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: $accent-fg-color; $button-secondary-bg-color: $accent-fg-color;
$button-danger-fg-color: $background; $button-danger-fg-color: $background;
$button-danger-bg-color: $notice-primary-color;
$button-danger-disabled-fg-color: $background; $button-danger-disabled-fg-color: $background;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-fg-color: $accent-color;
$button-link-bg-color: transparent; $button-link-bg-color: transparent;
$visual-bell-bg-color: #faa; $visual-bell-bg-color: #faa;
// Toggle switch // Toggle switch
$togglesw-off-color: #c1c9d6; $togglesw-off-color: #c1c9d6;
$togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff; $togglesw-ball-color: #fff;
// Slider // Slider
$slider-selection-color: $accent-color;
$slider-background-color: #c1c9d6; $slider-background-color: #c1c9d6;
$progressbar-fg-color: $accent-color;
$progressbar-bg-color: rgba(141, 151, 165, 0.2); $progressbar-bg-color: rgba(141, 151, 165, 0.2);
$room-warning-bg-color: $yellow-background; $room-warning-bg-color: $yellow-background;
@ -288,7 +263,6 @@ $memberstatus-placeholder-color: $muted-fg-color;
$authpage-bg-color: #2e3649; $authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(245, 245, 245, 0.90); $authpage-modal-bg-color: rgba(245, 245, 245, 0.90);
$authpage-body-bg-color: $background;
$authpage-focus-bg-color: #dddddd; $authpage-focus-bg-color: #dddddd;
$authpage-lang-color: #4e5054; $authpage-lang-color: #4e5054;
$authpage-primary-color: #232f32; $authpage-primary-color: #232f32;
@ -352,7 +326,7 @@ $eventbubble-reply-color: $quaternary-content;
font-family: $font-family; font-family: $font-family;
font-size: $font-14px; font-size: $font-14px;
color: $button-fg-color; color: $button-fg-color;
background-color: $button-bg-color; background-color: $accent-color;
width: auto; width: auto;
padding: 7px; padding: 7px;
padding-left: 1.5em; padding-left: 1.5em;