mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 22:13:26 +00:00
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:
@@ -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%);
|
||||||
|
|||||||
@@ -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%);
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user