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;
> 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
font-weight: 500;
}
@ -51,7 +51,7 @@ limitations under the License.
right: 0;
opacity: 0.5;
background-color: $settings-profile-overlay-placeholder-fg-color;
background-color: $quinary-content;
border-radius: 90px;
}
}
@ -91,7 +91,7 @@ limitations under the License.
}
.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-repeat: no-repeat;
mask-size: 36px;
@ -108,7 +108,7 @@ limitations under the License.
width: 32px;
height: 32px;
border-radius: 32px;
background-color: $settings-profile-button-bg-color;
background-color: $secondary-content;
position: absolute;
bottom: 0;
@ -123,7 +123,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-position: center;
mask-size: 55%;
background-color: $settings-profile-overlay-placeholder-fg-color;
background-color: $quinary-content;
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;
hr {
opacity: 0.2;
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;
align-items: center;
padding: 15px 15px 35px;
background: rgba($appearance-tab-border-color, 0.2);
background: rgba($quinary-content, 0.2);
border-radius: 10px;
font-size: 10px;
margin-top: 24px;
@ -43,7 +43,7 @@ limitations under the License.
}
.mx_FontScalingPanel_fontSlider_preview {
border: 1px solid $appearance-tab-border-color;
border: 1px solid $quinary-content;
border-radius: 10px;
padding: 0 16px 9px 16px;
pointer-events: none;

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

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

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

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

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

@ -15,7 +15,6 @@ limitations under the License.
*/
.mx_ThemeChoicePanel {
$radio-bg-color: $input-darker-bg-color;
color: $primary-content;
> .mx_ThemeSelectors {
@ -32,7 +31,7 @@ limitations under the License.
border-radius: 10px;
width: 180px;
background: $radio-bg-color;
background: $quinary-content;
opacity: 0.4;
flex-shrink: 1;
@ -42,7 +41,6 @@ limitations under the License.
margin-top: 10px;
font-weight: 600;
color: $muted-fg-color;
> span {
justify-content: center;
@ -62,25 +60,6 @@ limitations under the License.
// 5% lightened version of 181b21
background-color: #25282e;
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 {
color: $settings-subsection-fg-color;
color: $secondary-content;
font-size: $font-14px;
display: block;
margin: 10px 80px 10px 0; // Align with the rest of the view
@ -98,7 +98,7 @@ limitations under the License.
}
.mx_SettingsTab a {
color: $accent-alt;
color: $links;
}
.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 {
padding-bottom: 24px;
border-bottom: 1px solid $menu-border-color;
border-bottom: 1px solid $quinary-content;
margin-bottom: 32px;
}

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

@ -64,7 +64,7 @@ limitations under the License.
> .mx_AccessibleButton_kind_link {
display: inline-block;
margin: auto 18px;
color: #368bd6;
color: $links;
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-profile-overlay-placeholder-fg-color: #454545;
$settings-profile-button-bg-color: #e7e7e7;
$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;
$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;
$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;
$settings-grey-fg-color: #a2a2a2;
$settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: #61708b;
$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
$message-action-bar-fg-color: 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);
$tab-label-fg-color: var(--timeline-text-color);
// was #212121

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

@ -133,8 +133,6 @@ $menu-selected-color: #f5f8fa;
// Settings
// ********************
$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;
// ********************

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 }
<div className="mx_SettingsTab_heading">{ _t("Where you're signed in") }</div>
<div className="mx_SettingsTab_section">
<span>
<span className="mx_SettingsTab_subsectionText">
{ _t(
"Manage your signed-in devices below. " +
"A device's name is visible to people you communicate with.",