mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 03:05:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

CSS for notif & file panel

Browse source
This commit is contained in:
Matthew Hodgson 2016-09-11 02:15:03 +01:00
parent dd39813cc2
commit 3a8c94de5a
3 changed files with 108 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
View file

@ -29,32 +29,90 @@ limitations under the License.
overflow-y: auto; overflow-y: auto;
} }
.mx_FilePanel .mx_RoomView_messageListWrapper {
margin-right: 20px;
}
.mx_FilePanel .mx_RoomView_MessageList h2 { .mx_FilePanel .mx_RoomView_MessageList h2 {
display: none; display: none;
} }
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
we should make EventTile a base CSS class and customise it specifically
for usage in {Message,File,Notification}Panel. */
.mx_FilePanel .mx_EventTile_avatar { .mx_FilePanel .mx_EventTile_avatar {
display: none; display: none;
} }
/* Overrides for the attachment body tiles */
.mx_FilePanel .mx_EventTile .mx_MImageBody {
margin-right: 0px;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
display: flex;
font-size: 14px;
color: #acacac;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
flex: 1 1 auto;
color: #747474;
word-break: break-all;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
font-size: 11px;
text-align: right;
white-space: nowrap;
}
/* Overides for the sender details line */
.mx_FilePanel .mx_EventTile_senderDetails {
display: flex;
margin-top: -2px;
}
.mx_FilePanel .mx_EventTile_senderDetailsLink {
text-decoration: none;
}
.mx_FilePanel .mx_EventTile .mx_SenderProfile { .mx_FilePanel .mx_EventTile .mx_SenderProfile {
flex: 1 1 auto;
line-height: initial;
padding: 0px; padding: 0px;
font-size: 11px;
opacity: 1.0;
color: #acacac;
word-break: break-all;
} }
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp { .mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
flex: 1 0 0;
text-align: right;
visibility: visible; visibility: visible;
position: initial; position: initial;
font-size: 11px;
opacity: 1.0;
color: #acacac;
} }
/* Overrides for the wrappers around the body tile */
.mx_FilePanel .mx_EventTile_line { .mx_FilePanel .mx_EventTile_line {
margin-right: 0px; margin-right: 0px;
padding-left: 0px; padding-left: 0px;
} }
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff;
}
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0px; padding-left: 0px;
} }
.mx_FilePanel .mx_EventTile_content {
margin-right: 0px;
}

52
src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
View file

@ -29,26 +29,68 @@ limitations under the License.
overflow-y: auto; overflow-y: auto;
} }
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
margin-right: 20px;
}
.mx_NotificationPanel .mx_RoomView_MessageList h2 { .mx_NotificationPanel .mx_RoomView_MessageList h2 {
margin-left: 0px; margin-left: 0px;
} }
.mx_NotificationPanel .mx_EventTile_avatar { /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
display: none; we should make EventTile a base CSS class and customise it specifically
for usage in {Message,File,Notification}Panel. */
.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: bold;
font-size: 14px;
} }
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile { .mx_NotificationPanel .mx_EventTile_roomName a {
padding: 0px; color: #4a4a4a;
}
.mx_NotificationPanel .mx_EventTile_avatar {
top: 8px;
left: 0px;
}
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: #000;
opacity: 0.3;
font-size: 12px;
display: inline;
padding-left: 0px;
}
.mx_NotificationPanel .mx_EventTile_senderDetails {
padding-left: 32px;
padding-top: 8px;
position: relative;
}
.mx_NotificationPanel .mx_EventTile_roomName a,
.mx_NotificationPanel .mx_EventTile_senderDetails a {
text-decoration: none ! important;
} }
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
visibility: visible; visibility: visible;
position: initial; position: initial;
display: inline;
} }
.mx_NotificationPanel .mx_EventTile_line { .mx_NotificationPanel .mx_EventTile_line {
margin-right: 0px; margin-right: 0px;
padding-left: 0px; padding-left: 32px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff;
} }
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line { .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {

1
src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
View file

@ -30,7 +30,6 @@ limitations under the License.
.mx_MImageBody_download { .mx_MImageBody_download {
color: #76cfa6; color: #76cfa6;
cursor: pointer;
} }
.mx_MImageBody_download a { .mx_MImageBody_download a {