riot-web/res/css/structures/_NotificationPanel.pcss

114 lines
2.7 KiB
Plaintext
Raw Normal View History

/*
Copyright 2015, 2016 OpenMarket 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_NotificationPanel {
order: 2;
flex: 1 1 0;
overflow-y: auto;
display: flex;
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
.mx_RoomView_messageListWrapper {
flex-direction: row;
align-items: center;
justify-content: center;
}
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
.mx_RoomView_MessageList {
width: 100%;
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
h2 {
margin-left: 0;
}
}
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
/* 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. */
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
.mx_EventTile_avatar {
display: none;
}
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
.mx_EventTile {
word-break: break-word;
position: relative;
padding-block: 18px;
.mx_EventTile_senderDetails,
.mx_EventTile_line {
padding-left: 36px; // align with the room name
}
.mx_EventTile_senderDetails {
position: relative;
a {
display: flex;
column-gap: 5px; // TODO: Use a spacing variable
}
}
.mx_DisambiguatedProfile,
.mx_MessageTimestamp {
color: $primary-content;
font-size: $font-12px;
display: inline;
}
&:hover .mx_EventTile_line {
background-color: $background;
}
&:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: $tertiary-content;
height: 1px;
opacity: 0.4;
content: '';
}
}
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
.mx_EventTile_roomName {
2020-05-26 16:56:16 +02:00
display: flex;
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
align-items: center;
column-gap: $spacing-8;
font-weight: bold;
font-size: $font-14px;
a {
color: $primary-content;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2020-05-26 16:56:16 +02:00
}
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
.mx_EventTile_selected .mx_EventTile_line {
padding-left: 0;
}
Improve _NotificationPanel.scss (#9036) * Include in mx_NotificationPanel 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> * Include in mx_RoomView_MessageList Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile_roomName Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Same order as _FilePanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant and obsolete declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Shorthand for padding Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a obsolete declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations out of mx_EventTile:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Apply the block start margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Improve style rules Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Align elements with flexbox, specifying how to handle overflow room name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use column-gap instead Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add indent to the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-12 15:52:15 +02:00
.mx_EventTile_content {
margin-right: 0;
}
}
.mx_NotificationPanel_empty::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}