paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Modal read receipts CSS to modal.css.

Browse Source
This commit is contained in:
Tim Abbott
2022-09-23 16:21:31 -07:00
parent ff899e5c31
commit 155787512f
2 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
static/styles/modal.css
View File

@@ -127,6 +127,85 @@
margin-bottom: 10px;
}
#read_receipts_modal {
.modal__container {
width: 360px;
.modal__content {
/* When showing read receipts, we use simplebar
to make the list scrollable. It requires this to
be flex. */
display: flex;
/* Setting a minimum height prevents the loading indicator
appearing/disappearing from resizing the modal in the
common case that one is requesting read receipts for
PMs. */
min-height: 120px;
/* Setting a maximum height is just for aesthetics; the modal looks
weird if its aspect ratio gets too stretched. */
max-height: 480px;
/* For the notification bot error, we want to keep the modal clean and small.
The 16px padding is intended to match the padding at the top of the modal. */
&.compact {
min-height: unset;
padding-bottom: 16px;
}
}
}
.modal__header {
padding-bottom: 0;
}
hr {
margin: 10px 0;
}
.modal__content {
padding: 0 24px 8px;
}
.loading_indicator {
margin: auto;
}
#read_receipts_list {
margin-left: 0;
li {
.read_receipts_user_avatar {
display: inline-block;
height: 20px;
width: 20px;
position: relative;
right: 8px;
border-radius: 4px;
}
margin: 2px 0;
list-style-type: none;
overflow-x: hidden;
padding-left: 10px;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
line-height: 26px;
&:hover {
background-color: hsla(0, 0%, 0%, 0.05);
}
&:active,
&:focus {
background-color: hsla(0, 0%, 0%, 0.1);
outline: none;
}
}
}
}
.email_field {
margin-top: 10px;

79
static/styles/zulip.css
View File

@@ -650,85 +650,6 @@ strong {
display: none;
}
#read_receipts_modal {
.modal__container {
width: 360px;
.modal__content {
/* When showing read receipts, we use simplebar
to make the list scrollable. It requires this to
be flex. */
display: flex;
/* Setting a minimum height prevents the loading indicator
appearing/disappearing from resizing the modal in the
common case that one is requesting read receipts for
PMs. */
min-height: 120px;
/* Setting a maximum height is just for aesthetics; the modal looks
weird if its aspect ratio gets too stretched. */
max-height: 480px;
/* For the notification bot error, we want to keep the modal clean and small.
The 16px padding is intended to match the padding at the top of the modal. */
&.compact {
min-height: unset;
padding-bottom: 16px;
}
}
}
.modal__header {
padding-bottom: 0;
}
hr {
margin: 10px 0;
}
.modal__content {
padding: 0 24px 8px;
}
.loading_indicator {
margin: auto;
}
#read_receipts_list {
margin-left: 0;
li {
.read_receipts_user_avatar {
display: inline-block;
height: 20px;
width: 20px;
position: relative;
right: 8px;
border-radius: 4px;
}
margin: 2px 0;
list-style-type: none;
overflow-x: hidden;
padding-left: 10px;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
line-height: 26px;
&:hover {
background-color: hsla(0, 0%, 0%, 0.05);
}
&:active,
&:focus {
background-color: hsla(0, 0%, 0%, 0.1);
outline: none;
}
}
}
}
/* .dropdown-menu from v2.3.2
+ https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
basic idea of this fix is to remove decorations from :hover and apply them only