PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6963 from SimonBrandner/task/colors-5

Browse source 
Color clean-up numero cinco
This commit is contained in:
David Baker 2021-10-18 17:09:39 +01:00 committed by GitHub
commit e0027895e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 49 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/structures/_GroupFilterPanel.scss
View file

@ -51,7 +51,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
height: 0px;
width: 90%;
border: none;
border-bottom: 1px solid $groupFilterPanel-divider-color;
border-bottom: 1px solid $tertiary-content;
}
.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {

4
res/css/structures/_LeftPanelWidget.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
align-items: center;
height: 24px;
color: $roomlist-header-color;
color: $tertiary-content;
margin-top: 4px;
.mx_LeftPanelWidget_stickable {
@ -62,7 +62,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $roomlist-header-color;
background-color: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}

4
res/css/structures/_SpacePanel.scss
View file

@ -49,7 +49,7 @@ $activeBorderColor: $secondary-content;
mask-repeat: no-repeat;
margin-left: $gutterSize;
margin-bottom: 12px;
background-color: $roomlist-header-color;
background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
&.expanded {
@ -170,7 +170,7 @@ $activeBorderColor: $secondary-content;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
background-color: $roomlist-header-color;
background-color: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}

2
res/css/structures/auth/_CompleteSecurity.scss
View file

@ -51,7 +51,7 @@ limitations under the License.
}
.mx_CompleteSecurity_waiting {
color: $notice-secondary-color;
color: $tertiary-content;
}
.mx_CompleteSecurity_actionRow {

4
res/css/views/audio_messages/_PlayPauseButton.scss
View file

@ -21,12 +21,12 @@ limitations under the License.
min-width: 32px; // for when the button is used in a flexbox
min-height: 32px; // for when the button is used in a flexbox
border-radius: 32px;
background-color: $voice-playback-button-bg-color;
background-color: $system;
&::before {
content: '';
position: absolute; // sizing varies by icon
background-color: $voice-playback-button-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
}

2
res/css/views/audio_messages/_PlaybackContainer.scss
View file

@ -31,7 +31,7 @@ limitations under the License.
.mx_Waveform {
.mx_Waveform_bar {
background-color: $voice-record-waveform-incomplete-fg-color;
background-color: $quaternary-content;
height: 100%;
/* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));

2
res/css/views/dialogs/_NewSessionReviewDialog.scss
View file

@ -33,5 +33,5 @@ limitations under the License.
.mx_NewSessionReviewDialog_deviceID {
font-size: $font-12px;
color: $notice-secondary-color;
color: $tertiary-content;
}

4
res/css/views/elements/_Field.scss
View file

@ -128,7 +128,7 @@ limitations under the License.
font-size: $font-10px;
transform: translateY(-13px);
padding: 0 2px;
background-color: $field-focused-label-bg-color;
background-color: $background;
pointer-events: initial;
}
@ -144,7 +144,7 @@ limitations under the License.
.mx_Field input:disabled + label,
.mx_Field textarea:disabled,
.mx_Field textarea:disabled + label {
background-color: $field-focused-label-bg-color;
background-color: $background;
color: $greyed-fg-color;
}

2
res/css/views/messages/_common_CryptoEvent.scss
View file

@ -56,7 +56,7 @@ limitations under the License.
padding: 10px 20px;
margin: auto 0;
text-align: center;
color: $notice-secondary-color;
color: $tertiary-content;
overflow-wrap: break-word;
font-size: $font-12px;
}

2
res/css/views/right_panel/_UserInfo.scss
View file

@ -122,7 +122,7 @@ limitations under the License.
h3 {
text-transform: uppercase;
color: $notice-secondary-color;
color: $tertiary-content;
font-weight: 600;
font-size: $font-12px;
margin: 4px 0;

2
res/css/views/rooms/_EntityTile.scss
View file

@ -122,7 +122,7 @@ limitations under the License.
.mx_EntityTile_power {
padding-inline-start: 6px;
font-size: $font-10px;
color: $notice-secondary-color;
color: $tertiary-content;
max-width: 6em;
overflow: hidden;
text-overflow: ellipsis;

10
res/css/views/rooms/_RoomSublist.scss
View file

@ -48,7 +48,7 @@ limitations under the License.
// to work correctly.
padding-bottom: 8px;
height: 24px;
color: $roomlist-header-color;
color: $tertiary-content;
.mx_RoomSublist_stickable {
flex: 1;
@ -165,7 +165,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $roomlist-header-color;
background-color: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
@ -236,7 +236,7 @@ limitations under the License.
cursor: pointer;
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile-preview-color;
color: $secondary-content;
// Update the render() function for RoomSublist if these change
// Update the ListLayout class for minVisibleTiles if these change.
@ -256,7 +256,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $roomlist-header-color;
background: $tertiary-content;
left: -1px; // adjust for image position
}
@ -368,7 +368,7 @@ limitations under the License.
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; // additional 16px
border: 1px solid $roomsublist-divider-color;
border: 1px solid $primary-content;
opacity: 0.1;
}

2
res/css/views/rooms/_RoomTile.scss
View file

@ -71,7 +71,7 @@ limitations under the License.
.mx_RoomTile_messagePreview {
font-size: $font-13px;
line-height: $font-18px;
color: $roomtile-preview-color;
color: $secondary-content;
}
.mx_RoomTile_nameWithPreview {

12
res/themes/dark/css/_dark.scss
View file

@ -71,8 +71,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $background;
$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
// scrollbars
@ -124,19 +122,12 @@ $theme-button-bg-color: #e3e8f0;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(33, 38, 44, 0.90);
$roomlist-header-color: $tertiary-content;
$roomsublist-divider-color: $primary-content;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: $secondary-content;
$roomtile-default-badge-bg-color: #61708b;
// ********************
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent;
$widget-menu-bar-bg-color: $header-panel-bg-color;
@ -206,10 +197,7 @@ $tooltip-timeline-fg-color: $primary-content;
$breadcrumb-placeholder-bg-color: #272c35;
$voice-record-stop-border-color: $quaternary-content;
$voice-record-waveform-incomplete-fg-color: $quaternary-content;
$voice-record-icon-color: $quaternary-content;
$voice-playback-button-bg-color: $system;
$voice-playback-button-fg-color: $secondary-content;
// Appearance tab colors
$appearance-tab-border-color: $room-highlight-color;

39
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -64,8 +64,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $bg-color;
$resend-button-divider-color: $muted-fg-color;
// scrollbars
@ -111,6 +109,26 @@ $roomtopic-color: $text-secondary-color;
$header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color;
// Legacy theme backports
$accent: #0DBD8B;
$alert: #FF5B55;
$links: #0086e6;
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882;
$quinary-content: $quaternary-content;
$system: #21262C;
$background: $primary-bg-color;
$panels: rgba($system, 0.9);
$panel-base: #8D97A5; // This color is not intended for use in the app
$panel-selected: rgba($panel-base, 0.3);
$panel-hover: rgba($panel-base, 0.1);
$panel-actions: $roomtile-selected-bg-color;
$space-nav: rgba($panel-base, 0.1);
// Legacy theme backports
// ********************
$theme-button-bg-color: #e3e8f0;
@ -120,12 +138,10 @@ $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore b
$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$groupFilterPanel-divider-color: $tertiary-content;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #1A1D23;
@ -198,10 +214,7 @@ $breadcrumb-placeholder-bg-color: #272c35;
// See non-legacy dark for variable information
$voice-record-stop-border-color: #6F7882;
$voice-record-waveform-incomplete-fg-color: #6F7882;
$voice-record-icon-color: #6F7882;
$voice-playback-button-bg-color: $tertiary-fg-color;
$voice-playback-button-fg-color: #21262C;
// Appearance tab colors
$appearance-tab-border-color: $room-highlight-color;
@ -215,16 +228,6 @@ $eventbubble-bg-hover: #1C2026;
$eventbubble-avatar-outline: $bg-color;
$eventbubble-reply-color: #C1C6CD;
// Legacy theme backports
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882;
$quinary-content: $quaternary-content;
$background: $primary-bg-color;
$panel-actions: $roomtile-selected-bg-color;
// Legacy theme backports
// ***** Mixins! *****
@define-mixin mx_DialogButton {

20
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -18,7 +18,6 @@ $accent-color: #03b381;
$accent-bg-color: rgba(3, 179, 129, 0.16);
$notice-primary-color: #ff4b55;
$notice-primary-bg-color: rgba(255, 75, 85, 0.16);
$notice-secondary-color: #61708b;
$header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin)
@ -53,10 +52,6 @@ $info-bg-color: #2a9edf;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
// informational plinth
$info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888;
@ -95,8 +90,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: #ffffff;
$resend-button-divider-color: $input-darker-bg-color;
$button-bg-color: $accent-color;
@ -181,12 +174,8 @@ $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore butt
$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
$roomlist-bg-color: $header-panel-bg-color;
$roomlist-header-color: $primary-fg-color;
$roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #fff;
@ -338,10 +327,7 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: #E3E8F0;
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
$voice-record-icon-color: $tertiary-fg-color;
$voice-playback-button-bg-color: $system;
$voice-playback-button-fg-color: $secondary-content;
// FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color;
@ -355,6 +341,12 @@ $eventbubble-bg-hover: #FAFBFD;
$eventbubble-avatar-outline: #fff;
$eventbubble-reply-color: #C1C6CD;
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $tertiary-content;
$groupFilterPanel-divider-color: $tertiary-content;
// ***** Mixins! *****
@define-mixin mx_DialogButton {

5
res/themes/light-custom/css/_custom.scss
View file

@ -52,7 +52,6 @@ $accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
// --timeline-background-color
$authpage-body-bg-color: var(--timeline-background-color);
$button-secondary-bg-color: var(--timeline-background-color);
$field-focused-label-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color);
$avatar-bg-color: var(--timeline-background-color);
@ -103,8 +102,6 @@ $roomheader-color: var(--timeline-text-color);
// was #232f32
$authpage-primary-color: var(--timeline-text-color);
// --roomlist-text-secondary-color
$roomtile-preview-color: var(--roomlist-text-secondary-color);
$roomlist-header-color: var(--roomlist-text-secondary-color);
$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
//
@ -112,12 +109,10 @@ $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
$input-darker-bg-color: var(--roomlist-separator-color);
$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough
$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
$roomsublist-divider-color: var(--roomlist-separator-color);
//
// --timeline-text-secondary-color
$authpage-secondary-color: var(--timeline-text-secondary-color);
$memberstatus-placeholder-color: var(--timeline-text-secondary-color);
$notice-secondary-color: var(--timeline-text-secondary-color);
$pinned-color: var(--timeline-text-secondary-color);
$settings-subsection-fg-color: var(--timeline-text-secondary-color);
$roomheader-addroom-bg-color: var(--timeline-text-secondary-color);

14
res/themes/light/css/_light.scss
View file

@ -101,8 +101,6 @@ $input-focused-border-color: #238cf5;
$input-valid-border-color: $accent-color;
$input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $background;
$button-bg-color: $accent-color;
$button-fg-color: white;
@ -186,13 +184,8 @@ $theme-button-bg-color: $quinary-content;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
$roomlist-bg-color: rgba(245, 245, 245, 0.90);
$roomlist-header-color: $tertiary-content;
$roomsublist-divider-color: $primary-content;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: $secondary-content;
$roomtile-default-badge-bg-color: #61708b;
$presence-online: $accent-color;
@ -210,13 +203,11 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c;
$notice-secondary-color: $roomlist-header-color;
$panel-divider-color: transparent;
// pinned events indicator
$pinned-unread-color: $notice-primary-color;
$pinned-color: $notice-secondary-color;
$pinned-color: $tertiary-content;
// ********************
@ -331,10 +322,7 @@ $voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: $quinary-content;
$voice-record-waveform-incomplete-fg-color: $quaternary-content;
$voice-record-icon-color: $tertiary-content;
$voice-playback-button-bg-color: $system;
$voice-playback-button-fg-color: $secondary-content;
// FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color;