imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/develop' into task/colors-2

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-08-24 08:57:12 +02:00
commit b6ea75b681
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
96 changed files with 2815 additions and 1833 deletions
Download patch file Download diff file Expand all files Collapse all files

7
res/css/_common.scss
View file

@ -168,7 +168,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// it has the appearance of a text box so the controls
// appear to be part of the input
.mx_Dialog, .mx_MatrixChat {
.mx_Dialog, .mx_MatrixChat_wrapper {
.mx_textinput > input[type=text],
.mx_textinput > input[type=search] {
border: none;
@ -381,6 +381,11 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
font-size: $font-14px;
color: $primary-content;
word-wrap: break-word;
a {
color: $accent-color;
cursor: pointer;
}
}
.mx_Dialog_buttons {

3
res/css/_components.scss
View file

@ -17,6 +17,7 @@
@import "./structures/_LeftPanelWidget.scss";
@import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss";
@import "./structures/_BackdropPanel.scss";
@import "./structures/_MyGroups.scss";
@import "./structures/_NonUrgentToastContainer.scss";
@import "./structures/_NotificationPanel.scss";
@ -27,8 +28,8 @@
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_SpaceHierarchy.scss";
@import "./structures/_SpacePanel.scss";
@import "./structures/_SpaceRoomDirectory.scss";
@import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss";

35
res/css/structures/_BackdropPanel.scss Normal file
View file

@ -0,0 +1,35 @@
/*
Copyright 2021 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_BackdropPanel {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
filter: blur(var(--lp-background-blur));
}
.mx_BackdropPanel--image {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}

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

@ -14,10 +14,27 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
.mx_GroupFilterPanelContainer {
flex-grow: 0;
flex-shrink: 0;
width: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
flex-direction: column;
// GroupFilterPanel handles its own CSS
}
.mx_GroupFilterPanel {
flex: 1;
z-index: 1;
background-color: $groupFilterPanel-bg-color;
flex: 1;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;

37
res/css/structures/_LeftPanel.scss
View file

@ -14,31 +14,38 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
$roomListCollapsedWidth: 68px;
.mx_MatrixChat--with-avatar {
.mx_LeftPanel,
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
background-color: transparent;
}
}
.mx_LeftPanel_wrapper {
display: flex;
max-width: 50%;
.mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color;
display: flex;
overflow: hidden;
position: relative;
}
}
.mx_LeftPanel {
background-color: $roomlist-bg-color;
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
min-width: 206px;
max-width: 50%;
// Create a row-based flexbox for the GroupFilterPanel and the room list
display: flex;
contain: content;
.mx_LeftPanel_GroupFilterPanelContainer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
flex-direction: column;
// GroupFilterPanel handles its own CSS
}
position: relative;
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc

7
res/css/structures/_MatrixChat.scss
View file

@ -29,8 +29,6 @@ limitations under the License.
.mx_MatrixChat_wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
@ -42,13 +40,12 @@ limitations under the License.
}
.mx_MatrixChat {
position: relative;
width: 100%;
height: 100%;
display: flex;
order: 2;
flex: 1;
min-height: 0;
}
@ -66,7 +63,7 @@ limitations under the License.
}
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
background-color: $background;
flex: 1 1 0;

10
res/css/structures/_RoomView.scss
View file

@ -14,10 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomView_wrapper {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
justify-content: center;
}
.mx_RoomView {
word-wrap: break-word;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
}

66
res/css/structures/_SpaceRoomDirectory.scss → res/css/structures/_SpaceHierarchy.scss
View file

@ -14,21 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
}
.mx_SpaceRoomDirectory {
height: 100%;
margin-bottom: 12px;
color: $primary-content;
word-break: break-word;
display: flex;
flex-direction: column;
}
.mx_SpaceRoomDirectory,
.mx_SpaceRoomView_landing {
.mx_Dialog_title {
display: flex;
@ -68,7 +53,7 @@ limitations under the License.
margin: 24px 0 16px;
}
.mx_SpaceRoomDirectory_noResults {
.mx_SpaceHierarchy_noResults {
text-align: center;
> div {
@ -78,13 +63,19 @@ limitations under the License.
}
}
.mx_SpaceRoomDirectory_listHeader {
.mx_SpaceHierarchy_listHeader {
display: flex;
min-height: 32px;
align-items: center;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
margin-bottom: 12px;
> h4 {
font-weight: $font-semi-bold;
margin: 0;
}
.mx_AccessibleButton {
padding: 4px 12px;
@ -105,7 +96,7 @@ limitations under the License.
}
}
.mx_SpaceRoomDirectory_error {
.mx_SpaceHierarchy_error {
position: relative;
font-weight: $font-semi-bold;
color: $notice-primary-color;
@ -124,13 +115,14 @@ limitations under the License.
background-image: url("$(res)/img/element-icons/warning-badge.svg");
}
}
}
.mx_SpaceRoomDirectory_list {
margin-top: 16px;
padding-bottom: 40px;
.mx_SpaceHierarchy_list {
list-style: none;
padding: 0;
margin: 0;
}
.mx_SpaceRoomDirectory_roomCount {
.mx_SpaceHierarchy_roomCount {
> h3 {
display: inline;
font-weight: $font-semi-bold;
@ -147,13 +139,13 @@ limitations under the License.
}
}
.mx_SpaceRoomDirectory_subspace {
.mx_SpaceHierarchy_subspace {
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
.mx_SpaceRoomDirectory_subspace_toggle {
.mx_SpaceHierarchy_subspace_toggle {
position: absolute;
left: -1px;
top: 10px;
@ -177,17 +169,17 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_SpaceRoomDirectory_subspace_toggle_shown::before {
&.mx_SpaceHierarchy_subspace_toggle_shown::before {
transform: rotate(0deg);
}
}
.mx_SpaceRoomDirectory_subspace_children {
.mx_SpaceHierarchy_subspace_children {
position: relative;
padding-left: 12px;
}
.mx_SpaceRoomDirectory_roomTile {
.mx_SpaceHierarchy_roomTile {
position: relative;
padding: 8px 16px;
border-radius: 8px;
@ -204,7 +196,7 @@ limitations under the License.
grid-column: 1;
}
.mx_SpaceRoomDirectory_roomTile_name {
.mx_SpaceHierarchy_roomTile_name {
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
@ -232,7 +224,7 @@ limitations under the License.
}
}
.mx_SpaceRoomDirectory_roomTile_info {
.mx_SpaceHierarchy_roomTile_info {
font-size: $font-14px;
line-height: $font-18px;
color: $secondary-content;
@ -244,7 +236,7 @@ limitations under the License.
overflow: hidden;
}
.mx_SpaceRoomDirectory_actions {
.mx_SpaceHierarchy_actions {
text-align: right;
margin-left: 20px;
grid-column: 3;
@ -278,12 +270,12 @@ limitations under the License.
}
}
li.mx_SpaceRoomDirectory_roomTileWrapper {
li.mx_SpaceHierarchy_roomTileWrapper {
list-style: none;
}
.mx_SpaceRoomDirectory_roomTile,
.mx_SpaceRoomDirectory_subspace_children {
.mx_SpaceHierarchy_roomTile,
.mx_SpaceHierarchy_subspace_children {
&::before {
content: "";
position: absolute;
@ -295,8 +287,8 @@ limitations under the License.
}
}
.mx_SpaceRoomDirectory_actions {
.mx_SpaceRoomDirectory_actionsText {
.mx_SpaceHierarchy_actions {
.mx_SpaceHierarchy_actionsText {
font-weight: normal;
font-size: $font-12px;
line-height: $font-15px;
@ -311,7 +303,7 @@ limitations under the License.
margin: 20px 0;
}
.mx_SpaceRoomDirectory_createRoom {
.mx_SpaceHierarchy_createRoom {
display: block;
margin: 16px auto 0;
width: max-content;

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

@ -23,10 +23,13 @@ $activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-content;
.mx_SpacePanel {
flex: 0 0 auto;
background-color: $groupFilterPanel-bg-color;
flex: 0 0 auto;
padding: 0;
margin: 0;
position: relative;
// Fix for the blurred avatar-background
z-index: 1;
// Create another flexbox so the Panel fills the container
display: flex;

9
res/css/structures/_SpaceRoomView.scss
View file

@ -62,6 +62,9 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_SpaceRoomView {
overflow-y: auto;
flex: 1;
.mx_MainSplit > div:first-child {
padding: 80px 60px;
flex-grow: 1;
@ -248,6 +251,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_landing {
display: flex;
flex-direction: column;
min-width: 0;
> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
@ -359,11 +363,6 @@ $SpaceRoomViewInnerWidth: 428px;
width: max-content;
margin: 0 0 -40px auto; // collapse its own height to not push other components down
}
.mx_SpaceRoomDirectory_list {
// we don't want this container to get forced into the flexbox layout
display: contents;
}
}
.mx_SpaceRoomView_privateScope {

287
res/css/views/messages/_CallEvent.scss
View file

@ -14,126 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallEvent {
.mx_CallEvent_wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: $dark-panel-bg-color;
border-radius: 8px;
margin: 10px auto;
width: 75%;
box-sizing: border-box;
height: 60px;
&.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
&.mx_CallEvent_video {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
}
&.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-voice.svg');
}
&.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-video.svg');
}
.mx_CallEvent_info {
.mx_CallEvent {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 12px;
justify-content: space-between;
.mx_CallEvent_info_basic {
display: flex;
flex-direction: column;
margin-left: 10px; // To match mx_CallEvent
.mx_CallEvent_sender {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: 3px;
}
.mx_CallEvent_type {
font-weight: 400;
color: $secondary-content;
font-size: 1.2rem;
line-height: $font-13px;
display: flex;
align-items: center;
.mx_CallEvent_type_icon {
height: 13px;
width: 13px;
margin-right: 5px;
&::before {
content: '';
position: absolute;
height: 13px;
width: 13px;
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
}
}
}
}
.mx_CallEvent_content {
display: flex;
flex-direction: row;
align-items: center;
color: $secondary-content;
margin-right: 16px;
.mx_CallEvent_content_button {
height: 24px;
padding: 0px 12px;
margin-left: 8px;
span {
padding: 8px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 8px;
}
}
}
.mx_CallEvent_content_button_reject span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
.mx_CallEvent_content_tooltip {
margin-right: 5px;
}
background-color: $dark-panel-bg-color;
border-radius: 8px;
width: 65%;
box-sizing: border-box;
height: 60px;
margin: 4px 0;
.mx_CallEvent_iconButton {
display: inline-flex;
@ -144,7 +41,7 @@ limitations under the License.
height: 16px;
width: 16px;
background-color: $tertiary-content;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
@ -158,5 +55,165 @@ limitations under the License.
.mx_CallEvent_unSilence::before {
mask-image: url('$(res)/img/voip/un-silence.svg');
}
&.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
&.mx_CallEvent_video {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
}
&.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-voice.svg');
}
&.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-video.svg');
}
&.mx_CallEvent_voice.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
&.mx_CallEvent_voice.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-voice.svg');
}
&.mx_CallEvent_video.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
&.mx_CallEvent_video.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-video.svg');
}
.mx_CallEvent_info {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 12px;
min-width: 0;
.mx_CallEvent_info_basic {
display: flex;
flex-direction: column;
margin-left: 10px; // To match mx_CallEvent
min-width: 0;
.mx_CallEvent_sender {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_CallEvent_type {
font-weight: 400;
color: $secondary-content;
font-size: 1.2rem;
line-height: $font-13px;
display: flex;
align-items: center;
.mx_CallEvent_type_icon {
height: 13px;
width: 13px;
margin-right: 5px;
&::before {
content: '';
position: absolute;
height: 13px;
width: 13px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
}
}
}
}
.mx_CallEvent_content {
display: flex;
flex-direction: row;
align-items: center;
color: $secondary-content;
margin-right: 16px;
gap: 8px;
min-width: max-content;
.mx_CallEvent_content_button {
padding: 0px 12px;
span {
padding: 1px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
}
}
.mx_CallEvent_content_button_reject span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
.mx_CallEvent_content_tooltip {
margin-right: 5px;
}
}
&.mx_CallEvent_narrow {
height: unset;
width: 290px;
flex-direction: column;
align-items: unset;
gap: 16px;
.mx_CallEvent_iconButton {
position: absolute;
margin-right: 0;
top: 12px;
right: 12px;
height: 16px;
width: 16px;
display: flex;
}
.mx_CallEvent_info {
align-items: unset;
margin-top: 12px;
margin-right: 12px;
.mx_CallEvent_sender {
margin-bottom: 8px;
}
}
.mx_CallEvent_content {
margin-left: 54px; // mx_CallEvent margin (12px) + avatar (32px) + mx_CallEvent_info_basic margin (10px)
margin-bottom: 16px;
}
}
}
}

4
res/css/views/messages/_MImageBody.scss
View file

@ -36,6 +36,10 @@ $timelineImageBorderRadius: 4px;
animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
border-radius: $timelineImageBorderRadius;
}
.mx_no-image-placeholder {
background-color: $primary-bg-color;
}
}
.mx_MImageBody_thumbnail_container {

11
res/css/views/rooms/_Autocomplete.scss
View file

@ -7,13 +7,15 @@
background: $background;
border-bottom: none;
border-radius: 8px 8px 0 0;
max-height: 50vh;
overflow: auto;
max-height: 35vh;
overflow: clip;
display: flex;
box-shadow: 0px -16px 32px $composer-shadow-color;
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid $primary-hairline-color;
width: 100%;
}
/* a "block" completion takes up a whole line */
@ -59,8 +61,8 @@
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
flex-flow: wrap;
height: 100%;
overflow-y: scroll;
}
.mx_Autocomplete_Completion_container_truncate {
@ -68,7 +70,6 @@
.mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions */
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

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

@ -105,6 +105,8 @@ limitations under the License.
.mx_ReplyTile .mx_SenderProfile {
display: block;
top: unset;
left: unset;
}
.mx_ReactionsRow {
@ -188,8 +190,6 @@ limitations under the License.
}
.mx_ReplyThread {
margin: 0 calc(-1 * var(--gutterSize));
.mx_EventTile_reply {
max-width: 90%;
padding: 0;
@ -223,11 +223,6 @@ limitations under the License.
margin-left: -9px;
}
.mx_ReplyThread {
border-left-width: 2px;
border-left-color: $eventbubble-reply-color;
}
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
&.mx_EventTile_bad > .mx_EventTile_line {
display: grid;
@ -264,6 +259,7 @@ limitations under the License.
}
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
.mx_EventTile.mx_EventTile_info[data-layout=bubble],
.mx_EventListSummary[data-layout=bubble][data-expanded=false] {
--backgroundColor: transparent;

1
res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
View file

@ -36,6 +36,7 @@ limitations under the License.
margin-top: 10px;
padding: 10px;
width: max-content;
max-width: 100%;
.mx_HelpUserSettingsTab_copyButton {
flex-shrink: 0;

7
res/css/views/toasts/_IncomingCallToast.scss
View file

@ -30,7 +30,14 @@ limitations under the License.
font-size: $font-15px;
line-height: $font-18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 2px;
margin-right: 6px;
max-width: 200px;
}
.mx_CallEvent_type {

13
res/css/views/voip/_CallContainer.scss
View file

@ -26,19 +26,6 @@ limitations under the License.
// different level.
pointer-events: none;
.mx_CallPreview {
pointer-events: initial; // restore pointer events so the user can leave/interact
.mx_VideoFeed_remote.mx_VideoFeed_voice {
min-height: 150px;
}
.mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
}
.mx_AppTile_persistedWrapper div {
min-width: 350px;
}

11
res/css/views/voip/_CallPreview.scss
View file

@ -18,4 +18,15 @@ limitations under the License.
position: fixed;
left: 0;
top: 0;
pointer-events: initial; // restore pointer events so the user can leave/interact
.mx_VideoFeed_remote.mx_VideoFeed_voice {
min-height: 150px;
}
.mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
}

1
res/css/views/voip/_CallView.scss
View file

@ -43,6 +43,7 @@ limitations under the License.
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
border-radius: 8px;
.mx_CallView_video_hold,
.mx_CallView_voice {
height: 180px;
}