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

Improve colors in settings (#7283)

pull/28788/head^2
Šimon Brandner 2022-06-14 20:17:10 +02:00 committed by GitHub
parent 3c5c2bef6d
commit 7da8c51c6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 17 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,7 @@ limitations under the License.
text-align: center; text-align: center;
> span { > span {
color: #fff; // hardcoded to contrast with background color: $primary-content;
position: relative; // tricks the layout engine into putting this on top of the bg position: relative; // tricks the layout engine into putting this on top of the bg
font-weight: 500; font-weight: 500;
} }
@ -51,7 +51,7 @@ limitations under the License.
right: 0; right: 0;
opacity: 0.5; opacity: 0.5;
background-color: $settings-profile-overlay-placeholder-fg-color; background-color: $quinary-content;
border-radius: 90px; border-radius: 90px;
} }
} }
@ -91,7 +91,7 @@ limitations under the License.
} }
.mx_AvatarSetting_avatarPlaceholder::before { .mx_AvatarSetting_avatarPlaceholder::before {
background-color: $settings-profile-overlay-placeholder-fg-color; background-color: $quinary-content;
mask: url("$(res)/img/feather-customised/user.svg"); mask: url("$(res)/img/feather-customised/user.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 36px; mask-size: 36px;
@ -108,7 +108,7 @@ limitations under the License.
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 32px; border-radius: 32px;
background-color: $settings-profile-button-bg-color; background-color: $secondary-content;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -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-overlay-placeholder-fg-color; background-color: $quinary-content;
mask-image: url('$(res)/img/feather-customised/edit.svg'); mask-image: url('$(res)/img/feather-customised/edit.svg');
} }
} }

3
res/css/views/settings/_DevicesPanel.scss
View File

@ -19,9 +19,8 @@ limitations under the License.
max-width: 880px; max-width: 880px;
hr { hr {
opacity: 0.2;
border: none; border: none;
border-bottom: 1px solid $primary-content; border-bottom: 1px solid $quinary-content;
} }
} }

4
res/css/views/settings/_FontScalingPanel.scss
View File

@ -35,7 +35,7 @@ limitations under the License.
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 15px 15px 35px; padding: 15px 15px 35px;
background: rgba($appearance-tab-border-color, 0.2); background: rgba($quinary-content, 0.2);
border-radius: 10px; border-radius: 10px;
font-size: 10px; font-size: 10px;
margin-top: 24px; margin-top: 24px;
@ -43,7 +43,7 @@ limitations under the License.
} }
.mx_FontScalingPanel_fontSlider_preview { .mx_FontScalingPanel_fontSlider_preview {
border: 1px solid $appearance-tab-border-color; border: 1px solid $quinary-content;
border-radius: 10px; border-radius: 10px;
padding: 0 16px 9px 16px; padding: 0 16px 9px 16px;
pointer-events: none; pointer-events: none;

8
res/css/views/settings/_LayoutSwitcher.scss
View File

@ -32,7 +32,7 @@ limitations under the License.
width: 300px; width: 300px;
min-width: 0; min-width: 0;
border: 1px solid $appearance-tab-border-color; border: 1px solid $quinary-content;
border-radius: 10px; border-radius: 10px;
.mx_EventTile_msgOption, .mx_EventTile_msgOption,
@ -67,11 +67,7 @@ limitations under the License.
} }
.mx_StyledRadioButton { .mx_StyledRadioButton {
border-top: 1px solid $appearance-tab-border-color; border-top: 1px solid $quinary-content;
> input + div {
border-color: rgba($muted-fg-color, 0.2);
}
} }
.mx_StyledRadioButton_checked { .mx_StyledRadioButton_checked {

1
res/css/views/settings/_ProfileSettings.scss
View File

@ -48,6 +48,7 @@ limitations under the License.
.mx_ProfileSettings_profileForm { .mx_ProfileSettings_profileForm {
@mixin mx_Settings_fullWidthField; @mixin mx_Settings_fullWidthField;
border-bottom: 1px solid $quinary-content;
} }
.mx_ProfileSettings_buttons { .mx_ProfileSettings_buttons {

23
res/css/views/settings/_ThemeChoicePanel.scss
View File

@ -15,7 +15,6 @@ limitations under the License.
*/ */
.mx_ThemeChoicePanel { .mx_ThemeChoicePanel {
$radio-bg-color: $input-darker-bg-color;
color: $primary-content; color: $primary-content;
> .mx_ThemeSelectors { > .mx_ThemeSelectors {
@ -32,7 +31,7 @@ limitations under the License.
border-radius: 10px; border-radius: 10px;
width: 180px; width: 180px;
background: $radio-bg-color; background: $quinary-content;
opacity: 0.4; opacity: 0.4;
flex-shrink: 1; flex-shrink: 1;
@ -42,7 +41,6 @@ limitations under the License.
margin-top: 10px; margin-top: 10px;
font-weight: 600; font-weight: 600;
color: $muted-fg-color;
> span { > span {
justify-content: center; justify-content: center;
@ -62,25 +60,6 @@ limitations under the License.
// 5% lightened version of 181b21 // 5% lightened version of 181b21
background-color: #25282e; background-color: #25282e;
color: #f3f8fd; color: #f3f8fd;
> input > div {
border-color: $input-darker-bg-color;
> div {
border-color: $input-darker-bg-color;
}
}
}
&.mx_ThemeSelector_black {
background-color: #000000;
color: #f3f8fd;
> input > div {
border-color: $input-darker-bg-color;
> div {
border-color: $input-darker-bg-color;
}
}
} }
} }
} }

4
res/css/views/settings/tabs/_SettingsTab.scss
View File

@ -45,7 +45,7 @@ limitations under the License.
} }
.mx_SettingsTab_subsectionText { .mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color; color: $secondary-content;
font-size: $font-14px; font-size: $font-14px;
display: block; display: block;
margin: 10px 80px 10px 0; // Align with the rest of the view margin: 10px 80px 10px 0; // Align with the rest of the view
@ -98,7 +98,7 @@ limitations under the License.
} }
.mx_SettingsTab a { .mx_SettingsTab a {
color: $accent-alt; color: $links;
} }
.mx_SettingsTab_toggleWithDescription { .mx_SettingsTab_toggleWithDescription {

2
res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
View File

@ -34,6 +34,6 @@ limitations under the License.
.mx_SecurityRoomSettingsTab_encryptionSection { .mx_SecurityRoomSettingsTab_encryptionSection {
padding-bottom: 24px; padding-bottom: 24px;
border-bottom: 1px solid $menu-border-color; border-bottom: 1px solid $quinary-content;
margin-bottom: 32px; margin-bottom: 32px;
} }

2
res/css/views/spaces/_SpaceBasicSettings.scss
View File

@ -64,7 +64,7 @@ limitations under the License.
> .mx_AccessibleButton_kind_link { > .mx_AccessibleButton_kind_link {
display: inline-block; display: inline-block;
margin: auto 18px; margin: auto 18px;
color: #368bd6; color: $links;
font-size: $font-14px; // See _SpaceSettingsDialog.scss font-size: $font-14px; // See _SpaceSettingsDialog.scss
} }

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

@ -76,7 +76,6 @@ $menu-selected-color: $room-highlight-color;
// Settings // Settings
// ******************** // ********************
$settings-profile-overlay-placeholder-fg-color: #454545;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: $text-secondary-color; $settings-subsection-fg-color: $text-secondary-color;
// ******************** // ********************

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

@ -77,8 +77,6 @@ $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-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: $text-secondary-color; $settings-subsection-fg-color: $text-secondary-color;
$topleftmenu-color: $text-primary-color; $topleftmenu-color: $text-primary-color;

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

@ -111,8 +111,6 @@ $preview-widget-bar-color: #ddd;
$blockquote-bar-color: #ddd; $blockquote-bar-color: #ddd;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: #61708b; $settings-subsection-fg-color: #61708b;
$rte-bg-color: #e9e9e9; $rte-bg-color: #e9e9e9;

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

@ -75,7 +75,6 @@ $roomlist-bg-color: var(--roomlist-background-color);
// --timeline-text-color // --timeline-text-color
$message-action-bar-fg-color: var(--timeline-text-color); $message-action-bar-fg-color: var(--timeline-text-color);
$primary-content: var(--timeline-text-color); $primary-content: var(--timeline-text-color);
$settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color);
$roomtopic-color: var(--timeline-text-color-50pct); $roomtopic-color: var(--timeline-text-color-50pct);
$tab-label-fg-color: var(--timeline-text-color); $tab-label-fg-color: var(--timeline-text-color);
// was #212121 // was #212121

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

@ -133,8 +133,6 @@ $menu-selected-color: #f5f8fa;
// Settings // Settings
// ******************** // ********************
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: $menu-border-color;
$settings-subsection-fg-color: $muted-fg-color; $settings-subsection-fg-color: $muted-fg-color;
// ******************** // ********************

2
src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
View File

@ -344,7 +344,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
{ warning } { warning }
<div className="mx_SettingsTab_heading">{ _t("Where you're signed in") }</div> <div className="mx_SettingsTab_heading">{ _t("Where you're signed in") }</div>
<div className="mx_SettingsTab_section"> <div className="mx_SettingsTab_section">
<span> <span className="mx_SettingsTab_subsectionText">
{ _t( { _t(
"Manage your signed-in devices below. " + "Manage your signed-in devices below. " +
"A device's name is visible to people you communicate with.", "A device's name is visible to people you communicate with.",