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

Improve UI

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2020-12-26 16:56:25 +01:00
parent 1dc1bc68db
commit 675ca58eef
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
3 changed files with 123 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.scss
View file

@ -106,6 +106,7 @@
@import "./views/elements/_AddressTile.scss";
@import "./views/elements/_DesktopBuildsNotice.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_DesktopCapturerSourcePicker.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss";

73
res/css/views/elements/_DesktopCapturerSourcePicker.scss
View file

@ -21,53 +21,60 @@ limitations under the License.
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
padding-right: 80px;
}
.desktop-capturer-selection-scroller {
.mx_streamSelectorDialog_tabLabels {
display: flex;
padding: 0 0 8px 0;
}
.mx_streamSelectorDialog_tabLabel,
.mx_streamSelectorDialog_tabLabel_selected
{
width: 100%;
max-height: 100vh;
overflow-y: auto;
text-align: center;
border-radius: 8px;
padding: 8px 0;
border-radius: 8px;
font-size: $font-13px;
position: relative;
}
.desktop-capturer-selection-list {
max-width: calc(100% - 100px);
margin: 0 50px 0 50px;
padding: 0;
.mx_streamSelectorDialog_tabLabel_selected {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
.mx_streamSelectorDialog_panel {
display: flex;
flex-wrap: wrap;
list-style: none;
overflow: hidden;
justify-content: center;
align-items: flex-start;
height: 500px;
overflow: overlay;
}
.desktop-capturer-selection-item {
display: flex;
margin: 4px;
}
.desktop-capturer-selection-button {
.mx_streamSelectorDialog_stream_button {
display: flex;
flex-direction: column;
align-items: stretch;
width: 145px;
margin: 0;
border: 0;
margin: 8px;
border-radius: 4px;
padding: 4px;
background: #20262b;
color: #ffffff;
text-align: left;
transition: background-color .15s, box-shadow .15s;
}
.desktop-capturer-selection-button:hover,
.desktop-capturer-selection-button:focus {
background: #363c43;
.mx_streamSelectorDialog_stream_button:hover,
.mx_streamSelectorDialog_stream_button:focus {
background: $roomtile-selected-bg-color;
}
.desktop-capturer-selection-thumbnail {
width: 100%;
height: 81px;
object-fit: cover;
.mx_streamSelectorDialog_stream_thumbnail {
margin: 4px;
width: 312px;
}
.desktop-capturer-selection-name {
margin: 6px 0 6px;
.mx_streamSelectorDialog_stream_name {
margin: 0 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 312px;
}