paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Change look of date and time in message list.

Browse Source 
Fixes #21752.
This commit is contained in:
Aman Agrawal
2022-08-04 13:35:52 +00:00
committed by Tim Abbott
parent 659ad1544b
commit 8946e9eaa5
1 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
static/styles/zulip.css
View File

@@ -53,13 +53,13 @@ body,
:root { :root {
color-scheme: light; color-scheme: light;
--color-message-time: hsl(0, 0%, 20%); --color-default-text: hsl(0, 0%, 15%);
--color-recipient-row-date: hsl(0, 0%, 53%); --color-date: hsl(0, 0%, 15%, 0.75);
} }
:root.dark-theme { :root.dark-theme {
--color-message-time: hsl(236, 33%, 90%); --color-default-text: hsl(0, 0%, 100%);
--color-recipient-row-date: hsl(236, 33%, 90%); --color-date: hsl(0, 0%, 100%, 0.75);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -912,13 +912,16 @@ td.pointer {
.messagebox-content .message_time { .messagebox-content .message_time {
display: block; display: block;
font-size: 12px; font-size: 12px;
opacity: 0.4; font-weight: normal;
font-weight: 400; text-align: right;
color: var(--color-message-time); opacity: 0.6;
color: var(--color-default-text);
font-feature-settings: "pnum" on, "lnum" on;
letter-spacing: 0.02em;
/* Disable blue link styling for the message timestamp link. */ /* Disable blue link styling for the message timestamp link. */
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: var(--color-message-time); color: var(--color-default-text);
} }
a& { a& {
@@ -1178,12 +1181,17 @@ td.pointer {
} }
.recipient_row_date { .recipient_row_date {
color: var(--color-recipient-row-date); color: var(--color-date);
font-size: 12px; font-size: calc(12em / 14);
padding: 0 10px;
text-align: right;
display: flex;
align-items: center;
font-style: normal;
font-weight: 600; font-weight: 600;
padding: 3px 11px 2px 10px; line-height: 17px; /* identical to box height, or 131% */
height: 17px; letter-spacing: 0.04em;
line-height: 17px; text-transform: uppercase;
&.hide-date { &.hide-date {
display: none; display: none;
@@ -1490,6 +1498,16 @@ div.message_table {
.date_row { .date_row {
/* We only want padding for the date rows between recipient blocks */ /* We only want padding for the date rows between recipient blocks */
padding-bottom: 0; padding-bottom: 0;
span {
font-size: calc(12em / 14);
font-style: normal;
font-weight: 600;
line-height: 17px; /* identical to box height, or 131% */
text-align: right;
letter-spacing: 0.04em;
color: var(--color-date);
}
} }
} }
@@ -2554,11 +2572,9 @@ select.invite-as {
padding: 4px; padding: 4px;
overflow: hidden; overflow: hidden;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.8em;
} }
.sub-unsub-message .stream-status, .sub-unsub-message .stream-status {
.date_row span {
opacity: 0.6; opacity: 0.6;
} }
@@ -2580,7 +2596,7 @@ select.invite-as {
content: " "; content: " ";
vertical-align: middle; vertical-align: middle;
height: 0; height: 0;
opacity: 0.2; opacity: 0.35;
border-bottom: 1px solid hsl(0, 0%, 0%); border-bottom: 1px solid hsl(0, 0%, 0%);
} }