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

View File

@ -804,6 +804,12 @@
--color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 15%);
--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 */
--color-background-direct-mention: hsl(240deg 52% 95%);
--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-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 */
--color-background-direct-mention: hsl(240deg 13% 20%);
--color-background-group-mention: hsl(180deg 13% 15%);

View File

@ -670,20 +670,6 @@
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 {
background: hsl(0deg 0% 0% / 20%);
box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);

View File

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