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

Tidy up _FilePanel.scss (#8953)

Browse Source 
* Include in mx_FilePanel

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_RoomView_MessageList * and mx_EventTile *

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* &:not([data-layout=bubble])

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Variables, logical properties, etc.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Cancel the left stroke of the event tile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add comment to indicate that text-align of MessageTimestamp is not effective

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-04 15:20:18 +09:00 committed by GitHub
parent 0909bfeb38
commit 4b17307d79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 94 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
res/css/structures/_FilePanel.scss
View File

@ -19,103 +19,114 @@ limitations under the License.
flex: 1 1 0;
overflow-y: auto;
display: flex;
}
.mx_FilePanel .mx_RoomView_messageListWrapper {
flex-direction: row;
align-items: center;
justify-content: center;
}
.mx_RoomView_messageListWrapper {
flex-direction: row;
align-items: center;
justify-content: center;
}
.mx_FilePanel .mx_RoomView_MessageList {
width: 100%;
}
.mx_RoomView_MessageList {
width: 100%;
.mx_FilePanel .mx_RoomView_MessageList h2 {
display: none;
}
h2 {
display: none;
}
}
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
/* 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 {
display: none;
}
.mx_EventTile_avatar {
display: none;
}
/* Overrides for the attachment body tiles */
.mx_EventTile {
/* Overrides for the attachment body tiles */
&:not([data-layout=bubble]) {
word-break: break-word;
margin-top: 10px;
padding-top: 0;
.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) {
word-break: break-word;
margin-top: 10px;
padding-top: 0;
.mx_EventTile_line {
padding-inline-start: 0;
}
&:hover {
&.mx_EventTile_verified,
&.mx_EventTile_unverified,
&.mx_EventTile_unknown {
.mx_EventTile_line {
box-shadow: none;
}
}
}
}
.mx_MFileBody {
line-height: 2.4rem;
}
.mx_MFileBody_download {
padding-top: $spacing-8;
display: flex;
font-size: $font-14px;
color: $event-timestamp-color;
}
.mx_MFileBody_downloadLink {
flex: 1 1 auto;
color: $light-fg-color;
}
.mx_MImageBody_size {
flex: 1 0 0;
font-size: $font-14px;
text-align: right;
white-space: nowrap;
}
.mx_DisambiguatedProfile {
flex: 1 1 auto;
line-height: initial;
opacity: 1.0;
color: $event-timestamp-color;
}
.mx_MessageTimestamp {
flex: 1 0 0;
text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp
visibility: visible;
position: initial;
font-size: $font-14px;
opacity: 1.0;
}
}
/* Overides for the sender details line */
.mx_EventTile_senderDetails {
display: flex;
margin-top: -2px;
}
.mx_EventTile_senderDetailsLink {
text-decoration: none;
}
/* Overrides for the wrappers around the body tile */
.mx_EventTile_line {
padding-left: 0;
margin-inline-end: 0;
padding-inline-start: 0;
.mx_EventTile_selected & {
padding-inline-start: 0;
}
}
}
.mx_FilePanel .mx_EventTile .mx_MFileBody {
line-height: 2.4rem;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
padding-top: 8px;
display: flex;
font-size: $font-14px;
color: $event-timestamp-color;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
flex: 1 1 auto;
color: $light-fg-color;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
font-size: $font-14px;
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_DisambiguatedProfile {
flex: 1 1 auto;
line-height: initial;
opacity: 1.0;
color: $event-timestamp-color;
}
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
flex: 1 0 0;
text-align: right;
visibility: visible;
position: initial;
font-size: $font-14px;
opacity: 1.0;
}
/* Overrides for the wrappers around the body tile */
.mx_FilePanel .mx_EventTile_line {
margin-right: 0px;
padding-left: 0px;
}
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0px;
}
.mx_FilePanel_empty::before {
mask-image: url('$(res)/img/element-icons/room/files.svg');
}