Update visual style of plain files in the timeline

This commit is contained in:
Travis Ralston 2021-05-04 21:13:37 -06:00
parent 2bf931b9d3
commit b0cb996cac
5 changed files with 25 additions and 16 deletions

View file

@ -61,9 +61,9 @@ limitations under the License.
.mx_MFileBody_info { .mx_MFileBody_info {
background-color: $message-body-panel-bg-color; background-color: $message-body-panel-bg-color;
border-radius: 4px; border-radius: 12px;
width: 270px; width: 243px; // same width as a playable voice message, accounting for padding
padding: 8px; padding: 6px 12px;
color: $message-body-panel-fg-color; color: $message-body-panel-fg-color;
.mx_MFileBody_info_icon { .mx_MFileBody_info_icon {
@ -82,7 +82,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: cover; mask-size: cover;
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg'); mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
background-color: $message-body-panel-fg-color; background-color: $message-body-panel-icon-fg-color;
width: 13px; width: 13px;
height: 15px; height: 15px;

View file

@ -213,9 +213,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-bg-color: #21262c82; $message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: #8e99a4; $message-body-panel-bg-color: $voice-record-waveform-bg-color;
$message-body-panel-fg-color: $primary-fg-color; $message-body-panel-icon-fg-color: $primary-bg-color;
$message-body-panel-icon-bg-color: $tertiary-fg-color;
// Appearance tab colors // Appearance tab colors
$appearance-tab-border-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;

View file

@ -209,9 +209,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-bg-color: #21262c82; $message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: #8e99a4; $message-body-panel-bg-color: $voice-record-waveform-bg-color;
$message-body-panel-fg-color: $primary-fg-color; $message-body-panel-icon-fg-color: $primary-bg-color;
$message-body-panel-icon-bg-color: $secondary-fg-color;
// Appearance tab colors // Appearance tab colors
$appearance-tab-border-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;

View file

@ -202,6 +202,11 @@ $voice-record-icon-color: $muted-fg-color;
$voice-playback-button-bg-color: $primary-bg-color; $voice-playback-button-bg-color: $primary-bg-color;
$voice-playback-button-fg-color: $muted-fg-color; $voice-playback-button-fg-color: $muted-fg-color;
$fileinfo-bg-color: $voice-record-waveform-bg-color;
$fileinfo-fg-color: $secondary-fg-color;
$fileinfo-icon-bg-color: $primary-bg-color;
$fileinfo-icon-fg-color: $secondary-fg-color;
$roomtile-preview-color: #9e9e9e; $roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #fff; $roomtile-selected-bg-color: #fff;
@ -334,9 +339,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-bg-color: #e3e8f082; $message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: #ffffff; $message-body-panel-bg-color: $voice-record-waveform-bg-color;
$message-body-panel-fg-color: $muted-fg-color; $message-body-panel-icon-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: $primary-bg-color;
// FontSlider colors // FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color; $appearance-tab-border-color: $input-darker-bg-color;

View file

@ -331,9 +331,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-bg-color: #e3e8f082; $message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: #ffffff; $message-body-panel-bg-color: $voice-record-waveform-bg-color;
$message-body-panel-fg-color: $muted-fg-color; $message-body-panel-icon-fg-color: $secondary-fg-color;
$message-body-panel-icon-bg-color: $primary-bg-color;
// FontSlider colors // FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color; $appearance-tab-border-color: $input-darker-bg-color;