Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Refactor theme colors for `.message_edit_history_content`. 

This change moves the light and dark theme colors for
`.message_edit_history_content` to CSS variables.
This commit is contained in:
sanchi-t 2024-09-15 19:06:25 +05:30 committed by Tim Abbott
parent 1ddc1d2d12
commit 07af9b357b
3 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/styles/app_variables.css
View File

@ -804,6 +804,12 @@
--color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 15%); --color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 15%);
--color-show-more-less-button-background-active: hsl(240deg 44% 56% / 20%); --color-show-more-less-button-background-active: hsl(240deg 44% 56% / 20%);
/* Message edit history colors */
--color-message-edit-history-text-inserted: hsl(122deg 72% 30%);
--color-message-edit-history-background-inserted: hsl(120deg 64% 95%);
--color-message-edit-history-text-deleted: hsl(0deg 100% 50%);
--color-message-edit-history-background-deleted: hsl(7deg 90% 92%);
/* Mention pill colors */ /* Mention pill colors */
--color-background-direct-mention: hsl(240deg 52% 95%); --color-background-direct-mention: hsl(240deg 52% 95%);
--color-background-group-mention: hsl(180deg 40% 94%); --color-background-group-mention: hsl(180deg 40% 94%);
@ -1265,6 +1271,12 @@
--color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 25%); --color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 25%);
--color-show-more-less-button-background-active: hsl(240deg 44% 56% / 15%); --color-show-more-less-button-background-active: hsl(240deg 44% 56% / 15%);
/* Message edit history colors */
--color-message-edit-history-text-inserted: hsl(122deg 100% 81%);
--color-message-edit-history-background-inserted: hsl(120deg 64% 95% / 30%);
--color-message-edit-history-text-deleted: hsl(0deg 90% 67%);
--color-message-edit-history-background-deleted: hsl(7deg 54% 62% / 38%);
/* Mention pill colors */ /* Mention pill colors */
--color-background-direct-mention: hsl(240deg 13% 20%); --color-background-direct-mention: hsl(240deg 13% 20%);
--color-background-group-mention: hsl(180deg 13% 15%); --color-background-group-mention: hsl(180deg 13% 15%);

14
web/styles/dark_theme.css
View File

@ -670,20 +670,6 @@
color: inherit; color: inherit;
} }
#message-edit-history-overlay-container {
.message_edit_history_content {
.highlight_text_inserted {
color: hsl(122deg 100% 81%);
background-color: hsl(120deg 64% 95% / 30%);
}
.highlight_text_deleted {
color: hsl(0deg 90% 67%);
background-color: hsl(7deg 54% 62% / 38%);
}
}
}
& time { & time {
background: hsl(0deg 0% 0% / 20%); background: hsl(0deg 0% 0% / 20%);
box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%); box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);

12
web/styles/message_edit_history.css
View File

@ -25,13 +25,17 @@
.message_edit_history_content { .message_edit_history_content {
.highlight_text_inserted { .highlight_text_inserted {
color: hsl(122deg 72% 30%); color: var(--color-message-edit-history-text-inserted);
background-color: hsl(120deg 64% 95%); background-color: var(
--color-message-edit-history-background-inserted
);
} }
.highlight_text_deleted { .highlight_text_deleted {
color: hsl(0deg 100% 50%); color: var(--color-message-edit-history-text-deleted);
background-color: hsl(7deg 90% 92%); background-color: var(
--color-message-edit-history-background-deleted
);
text-decoration: line-through; text-decoration: line-through;
word-break: break-all; word-break: break-all;
} }