Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support a dark theme for voice messages

Browse Source 
Fixes https://github.com/vector-im/element-web/issues/17137
This commit is contained in:
Travis Ralston 2021-05-03 16:08:38 -06:00
parent 8dbcc85249
commit ba2da6826f
6 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,7 +40,7 @@ limitations under the License.
height: 18px;
vertical-align: middle;
margin-right: 7px; // distance from left edge of waveform container (container has some margin too)
background-color: $muted-fg-color;
background-color: $voice-record-icon-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/trashcan.svg');

4
res/css/views/voice_messages/_PlayPauseButton.scss
View File

@ -19,12 +19,12 @@ limitations under the License.
width: 32px;
height: 32px;
border-radius: 32px;
background-color: $primary-bg-color;
background-color: $voice-playback-button-bg-color;
&::before {
content: '';
position: absolute; // sizing varies by icon
background-color: $muted-fg-color;
background-color: $voice-playback-button-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
}

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

@ -42,6 +42,14 @@ $preview-bar-bg-color: $header-panel-bg-color;
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
$inverted-bg-color: $base-color;
$voice-record-stop-border-color: #6F7882; // "Quarterly"
$voice-record-waveform-bg-color: #394049; // "Dark Tile"
$voice-record-waveform-fg-color: $tertiary-fg-color;
$voice-record-waveform-incomplete-fg-color: #5b646d;
$voice-record-icon-color: $tertiary-fg-color;
$voice-playback-button-bg-color: $tertiary-fg-color;
$voice-playback-button-fg-color: $bg-color;
// used by AddressSelector
$selected-color: $room-highlight-color;

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

@ -124,6 +124,15 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%)
$groupFilterPanel-divider-color: $roomlist-header-color;
// See non-legacy dark for variable information
$voice-record-stop-border-color: #6F7882;
$voice-record-waveform-bg-color: #394049;
$voice-record-waveform-fg-color: $tertiary-fg-color;
$voice-record-waveform-incomplete-fg-color: #5b646d;
$voice-record-icon-color: $tertiary-fg-color;
$voice-playback-button-bg-color: $tertiary-fg-color;
$voice-playback-button-fg-color: $bg-color;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #1A1D23;

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

@ -198,6 +198,9 @@ $voice-record-waveform-bg-color: #E3E8F0;
$voice-record-waveform-fg-color: $muted-fg-color;
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
$voice-record-live-circle-color: #ff4b55;
$voice-record-icon-color: $muted-fg-color;
$voice-playback-button-bg-color: $primary-bg-color;
$voice-playback-button-fg-color: $muted-fg-color;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;

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

@ -188,6 +188,9 @@ $voice-record-waveform-bg-color: #E3E8F0;
$voice-record-waveform-fg-color: $muted-fg-color;
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
$voice-record-icon-color: $muted-fg-color;
$voice-playback-button-bg-color: $primary-bg-color;
$voice-playback-button-fg-color: $muted-fg-color;
$roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b;