From a8dd7125f16a559ba96a9713759e78862c7a48cf Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Oct 2023 21:45:30 +0200 Subject: Update --- theme.css | 440 ++++++++++++++++++++++++++++++++------------------------------ 1 file changed, 225 insertions(+), 215 deletions(-) diff --git a/theme.css b/theme.css index 974e8d7..c10fb14 100644 --- a/theme.css +++ b/theme.css @@ -1,4 +1,4 @@ -@import 'default.css'; +@import "default.css"; :root { --gray0: hsl(270deg, 0%, 7%); @@ -12,83 +12,83 @@ /* * */ - --bg-hi: var(--gray0); - --bg: var(--gray1); + --bg-hi: var(--gray0); + --bg: var(--gray1); --obj-hi: var(--gray2); - --obj: var(--gray3); + --obj: var(--gray3); --obj-lo: var(--gray4); - --fg-hi: var(--gray5); - --fg: var(--gray6); - --fg-lo: var(--gray7); + --fg-hi: var(--gray5); + --fg: var(--gray6); + --fg-lo: var(--gray7); /* * */ - --color--red: hsl(0, 91%, 73%); - --color--dark-red: hsl(0, 79%, 64%); - --color--brown: hsl(14, 58%, 59%); - --color--orange: hsl(19, 100%, 76%); - --color--blue: hsl(214, 100%, 76%); - --color--dark-blue: hsl(214, 100%, 57%); - --color--yellow: hsl(38, 100%, 76%); - --color--green: hsl(123, 43%, 66%); + --color--red: hsl(0, 91%, 73%); + --color--dark-red: hsl(0, 79%, 64%); + --color--brown: hsl(14, 58%, 59%); + --color--orange: hsl(19, 100%, 76%); + --color--blue: hsl(214, 100%, 76%); + --color--dark-blue: hsl(214, 100%, 57%); + --color--yellow: hsl(38, 100%, 76%); + --color--green: hsl(123, 43%, 66%); --color--dark-green: hsl(123, 43%, 56%); - --color--cyan: hsl(180, 43%, 66%); - --color--dark-cyan: hsl(180, 43%, 54%); - --color--purple: hsl(267, 69%, 73%); - --color--pink: hsl(294, 69%, 73%); - --color--gray: hsl(0, 0%, 58%); + --color--cyan: hsl(180, 43%, 66%); + --color--dark-cyan: hsl(180, 43%, 54%); + --color--purple: hsl(267, 69%, 73%); + --color--pink: hsl(294, 69%, 73%); + --color--gray: hsl(0, 0%, 58%); --color--light-gray: hsl(204, 5%, 82%); /* * */ - --color--sidebar--bg: var(--bg-hi); - --color--sidebar--fg: var(--fg); + --color--sidebar--bg: var(--bg-hi); + --color--sidebar--fg: var(--fg); --color--sidebar--fg-hi: var(--fg-hi); - --color--window--bg: var(--bg); + --color--window--bg: var(--bg); --color--header--title-fg: var(--fg-lo); - --color--input--bg: var(--obj); - --color--input--fg: var(--fg-lo); + --color--input--bg: var(--obj); + --color--input--fg: var(--fg-lo); --color--input--ph-fg: var(--fg-hi); - --color--sidebar-input--bg: var(--obj-hi); - --color--sidebar-input--fg: var(--fg-lo); + --color--sidebar-input--bg: var(--obj-hi); + --color--sidebar-input--fg: var(--fg-lo); --color--sidebar-input--ph-fg: var(--fg-hi); - --color--sidebar-btn--bg: var(--obj-hi); - --color--sidebar-btn--fg: var(--fg); + --color--sidebar-btn--bg: var(--obj-hi); + --color--sidebar-btn--fg: var(--fg); --color--sidebar-btn--active-fg: var(--fg-lo); --color--sidebar-badge--bg: var(--obj); --color--sidebar-badge--fg: var(--fg-lo); - --color--header--bg: var(--obj-hi); - --color--header--fg: var(--fg); + --color--header--bg: var(--obj-hi); + --color--header--fg: var(--fg); --color--header--title-fg: var(--fg-lo); - --color--date-marker--fg: var(--fg-hi); + --color--date-marker--fg: var(--fg-hi); --color--date-marker--border: var(--obj); - --color--msg--bg: var(--obj-hi); - --color--msg--border: var(--obj); - --color--msg--fg: var(--fg); - --color--msg--emph-fg: var(--fg-lo); - --color--msg--meta-fg: var(--fg-hi); - --color--msg--self-bg: var(--obj); - --color--msg--self-fg: var(--fg-lo); + --color--msg--bg: var(--obj-hi); + --color--msg--border: var(--obj); + --color--msg--fg: var(--fg); + --color--msg--emph-fg: var(--fg-lo); + --color--msg--meta-fg: var(--fg-hi); + --color--msg--self-bg: var(--obj); + --color--msg--self-fg: var(--fg-lo); --color--msg--self-border: var(--fg-lo); - --color--msg--action-fg: var(--fg-hi); + --color--msg--action-fg: var(--fg-hi); - --color--channels--title: var(--fg-lo); + --color--channels--title: var(--fg-lo); --color--channels--border: var(--obj); - --color--cform--bg: var(--obj-hi); - --color--cform--fg: var(--fg-lo); - --color--cform--btn-fg: var(--fg); - --color--cform--ph-fg: var(--fg-hi); + --color--cform--bg: var(--obj-hi); + --color--cform--fg: var(--fg-lo); + --color--cform--btn-fg: var(--fg); + --color--cform--ph-fg: var(--fg-hi); --color--cform--nick-bg: var(--obj-lo); --color--cform--nick-fg: var(--fg-lo); @@ -98,55 +98,57 @@ --color--tooltip--bg: var(--obj); --color--tooltip--fg: var(--fg-lo); - --color--popup--bg: var(--obj-hi); - --color--popup--fg: var(--fg); - --color--popup--title-fg: var(--fg-lo); - --color--popup--meta-fg: var(--fg-hi); - --color--popup--border: var(--obj); + --color--popup--bg: var(--obj-hi); + --color--popup--fg: var(--fg); + --color--popup--title-fg: var(--fg-lo); + --color--popup--meta-fg: var(--fg-hi); + --color--popup--border: var(--obj); --color--popup--item-hover-bg: var(--obj); --color--popup--item-hover-fg: var(--fg-lo); - --color--popup--msg-bg: var(--obj); - --color--popup--msg-fg: var(--fg-lo); + --color--popup--msg-bg: var(--obj); + --color--popup--msg-fg: var(--fg-lo); /* * */ --dim--spacing: 1rem; - --dim--container--pad: .75rem; + --dim--container--pad: 0.75rem; --dim--container-lg--pad: 1.5rem; --dim--input--height: 2.2rem; - --dim--input--pad-h: .7rem; + --dim--input--pad-h: 0.7rem; - --dim--btn--pad-v: .6rem; - --dim--btn--pad-h: .7rem; + --dim--btn--pad-v: 0.6rem; + --dim--btn--pad-h: 0.7rem; - --dim--msg--pad-v: .5rem; - --dim--msg--pad-h: .7rem; + --dim--msg--pad-v: 0.5rem; + --dim--msg--pad-h: 0.7rem; - --dim--popup--pad: .3rem; - --dim--popup--item-pad-v: .4rem; - --dim--popup--item-pad-h: .7rem; + --dim--popup--pad: 0.3rem; + --dim--popup--item-pad-v: 0.4rem; + --dim--popup--item-pad-h: 0.7rem; /* * */ - --body-bg-color: var(--color--sidebar--bg); - --window-bg-color: var(--color--window--bg); - --window-heading-color: var(--color--header--title-fg); - --body-color: var(--color--sidebar--fg); - --body-color-muted: var(--color--sidebar--fg-hi); - --link-color: var(--color--yellow); - --unread-marker-color: var(--color--yellow); - --date-marker-color: var(--color--date-marker--fg); - --highlight-bg-color: var(--bg-lo); - --highlight-border-color: var(--color--yellow); - --overlay-bg-color: rgba(0, 0, 0, .75); - --button-color: var(--color--yellow); + --body-bg-color: var(--color--sidebar--bg); + --window-bg-color: var(--color--window--bg); + --window-heading-color: var(--color--header--title-fg); + --body-color: var(--color--sidebar--fg); + --body-color-muted: var(--color--sidebar--fg-hi); + --link-color: var(--color--yellow); + --unread-marker-color: var(--color--yellow); + --date-marker-color: var(--color--date-marker--fg); + --highlight-bg-color: var(--bg-lo); + --highlight-border-color: var(--color--yellow); + --overlay-bg-color: rgba(0, 0, 0, 0.75); + --button-color: var(--color--yellow); --button-text-color-hover: #000; } body { - font-family: IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial; + font-family: IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto, + Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, + Helvetica Neue, Arial; scrollbar-color: var(--color--scrollbar--fg) var(--color--scrollbar--bg); } @@ -240,27 +242,27 @@ body { .window { border-radius: 0; - box-shadow: none; + box-shadow: none; } .window h1 { - color: var(--fg-lo); - font-size: 1em; - font-weight: bold; + color: var(--fg-lo); + font-size: 1em; + font-weight: bold; text-transform: uppercase; } .window h2 { - margin: calc(var(--dim--spacing) * 2) 0 0; + margin: calc(var(--dim--spacing) * 2) 0 0; padding-bottom: 0; - border-bottom: 0; - color: var(--fg-lo); - font-size: 1em; + border-bottom: 0; + color: var(--fg-lo); + font-size: 1em; } .window h2 small { - color: var(--fg); - font-size: 1em; + color: var(--fg); + font-size: 1em; line-height: inherit; } @@ -274,15 +276,15 @@ body { #connect .connect-row { align-items: baseline; - margin-top: var(--dim--spacing); + margin-top: var(--dim--spacing); } #connect .connect-row + .connect-row { - margin-top: calc(var(--dim--spacing) * .5); + margin-top: calc(var(--dim--spacing) * 0.5); } #connect label { - margin-top: 0; + margin-top: 0; white-space: nowrap; } @@ -302,7 +304,7 @@ body { #connect .connect-row > .input, #connect .connect-row > .input-wrap { - margin-top: calc(var(--dim--spacing) * .5); + margin-top: calc(var(--dim--spacing) * 0.5); } } @@ -323,7 +325,7 @@ body { #footer button { border-radius: 0; - color: var(--color--sidebar-btn--fg); + color: var(--color--sidebar-btn--fg); } .channel-list-item, @@ -346,17 +348,17 @@ body { #footer button:hover, .channel-list-item:hover { background-color: var(--color--sidebar-btn--bg); - color: var(--color--sidebar-btn--active-fg); + color: var(--color--sidebar-btn--active-fg); } .channel-list-item.active::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: calc(var(--dim--container--pad) * -1); - width: 2px; + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: calc(var(--dim--container--pad) * -1); + width: 2px; background-color: #fff; } @@ -374,11 +376,11 @@ body { .channel-list-item .badge { background-color: var(--color--sidebar-badge--bg); - color: var(--color--sidebar-badge--fg); + color: var(--color--sidebar-badge--fg); } #sidebar .network .collapse-network { - width: 14px; + width: 14px; margin-right: 12px; padding-left: 0; } @@ -395,17 +397,17 @@ body { .input, #chat .userlist .search { - height: var(--dim--input--height); - padding: 0 var(--dim--input--pad-h); - transition: border-color .2s, box-shadow .2s; - border: 2px solid transparent; + height: var(--dim--input--height); + padding: 0 var(--dim--input--pad-h); + transition: border-color 0.2s, box-shadow 0.2s; + border: 2px solid transparent; border-radius: 3px; - color: var(--color--input--fg); - line-height: var(--dim--input--height); + color: var(--color--input--fg); + line-height: var(--dim--input--height); } .input { - margin: 0; + margin: 0; background-color: var(--color--input--bg); } @@ -417,17 +419,17 @@ body { .jump-to-input::before, #chat .count::before { - right: var(--dim--input--pad-h); - color: var(--color--sidebar-input--ph-fg); - font-size: 14px; + right: var(--dim--input--pad-h); + color: var(--color--sidebar-input--ph-fg); + font-size: 14px; line-height: var(--dim--input--height) !important; } .jump-to-input .input { - border: 2px solid transparent; - border-radius: 3px; + border: 2px solid transparent; + border-radius: 3px; background-color: var(--color--sidebar-input--bg); - color: var(--color--sidebar-input--fg); + color: var(--color--sidebar-input--fg); } .jump-to-input .input::placeholder { @@ -445,7 +447,7 @@ body { } #chat .userlist .count { - height: var(--dim--input--height); + height: var(--dim--input--height); background-color: var(--color--sidebar-input--bg); } @@ -454,7 +456,9 @@ textarea.input { } .password-container input { - padding-right: calc(2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px); + padding-right: calc( + 2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px + ); } .password-container .reveal-password { @@ -462,9 +466,9 @@ textarea.input { } .password-container .reveal-password span { - width: calc(var(--dim--input--height) - 2 * 2px); + width: calc(var(--dim--input--height) - 2 * 2px); height: calc(var(--dim--input--height) - 2 * 2px); - color: var(--color--sidebar-input--fg); + color: var(--color--sidebar-input--fg); } .password-container .reveal-password-visible span::before { @@ -474,15 +478,15 @@ textarea.input { /* HEADER */ #chat .header { - position: relative; - z-index: 5; - border-bottom: 0; + position: relative; + z-index: 5; + border-bottom: 0; background-color: var(--color--header--bg); - box-shadow: 0 0 2rem rgba(0, 0, 0, .25); + box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25); } .header .title { - color: var(--color--header--title-fg); + color: var(--color--header--title-fg); font-weight: bold; } @@ -509,14 +513,15 @@ textarea.input { /* USERLIST */ #chat .userlist { - padding: var(--dim--container--pad); + padding: var(--dim--container--pad); border-left: 0; - background: transparent linear-gradient(to top, transparent, var(--color--sidebar--bg) 80px); + background: transparent + linear-gradient(to top, transparent, var(--color--sidebar--bg) 80px); line-height: inherit; } #chat .user-mode { - margin-top: var(--dim--spacing); + margin-top: var(--dim--spacing); margin-bottom: 0; } @@ -526,7 +531,7 @@ textarea.input { #chat .user-mode::before, #chat .names .user { - padding: calc(var(--dim--btn--pad-v) * .5) var(--dim--btn--pad-h); + padding: calc(var(--dim--btn--pad-v) * 0.5) var(--dim--btn--pad-h); } #chat .user-mode::before { @@ -539,7 +544,7 @@ textarea.input { #chat .userlist .user.active { background-color: var(--color--sidebar-btn--bg); - color: var(--color--sidebar-btn--active-fg); + color: var(--color--sidebar-btn--active-fg); } @media (max-width: 768px) { @@ -570,7 +575,7 @@ textarea.input { #chat .date-marker, #chat .unread-marker { margin-right: var(--dim--container--pad); - margin-left: var(--dim--container--pad); + margin-left: var(--dim--container--pad); } } @@ -581,10 +586,10 @@ textarea.input { } #chat .messages { - display: flex; + display: flex; flex-direction: column; - align-items: stretch; - padding: var(--dim--container-lg--pad) 0; + align-items: stretch; + padding: var(--dim--container-lg--pad) 0; } #chat .chat-view[data-type="special"] .messages { @@ -592,13 +597,13 @@ textarea.input { } #chat .msg { - display: grid; - align-self: flex-start; + display: grid; + align-self: flex-start; grid-template-columns: auto auto 1fr; - grid-template-rows: auto; - grid-template-areas: "time user content"; - margin-top: calc(var(--dim--spacing) * .5); - padding: 0 var(--dim--container-lg--pad); + grid-template-rows: auto; + grid-template-areas: "time user content"; + margin-top: calc(var(--dim--spacing) * 0.5); + padding: 0 var(--dim--container-lg--pad); } #chat .ban-list, @@ -612,34 +617,34 @@ textarea.input { #chat .from, #chat .time { align-self: baseline; - padding: 0; - font-size: 13px; + padding: 0; + font-size: 13px; } #chat .from, #chat .time { - width: auto; + width: auto; margin-right: var(--dim--spacing); - color: var(--color--msg--meta-fg); + color: var(--color--msg--meta-fg); } #chat .content { - grid-area: content; + grid-area: content; border-left: 0; - color: var(--color--msg--action-fg); + color: var(--color--msg--action-fg); } #chat .from { - grid-area: user; - min-width: 1.2rem; - text-align: left; + grid-area: user; + min-width: 1.2rem; + text-align: left; -webkit-mask-image: none; - mask-image: none; + mask-image: none; } #chat .time { - grid-area: time; - justify-self: flex-start; + grid-area: time; + justify-self: flex-start; font-variant-numeric: tabular-nums; } @@ -649,9 +654,9 @@ textarea.input { } #chat .msg[data-type="message"] { - max-width: 80%; + max-width: 80%; grid-template-columns: auto 1fr; - grid-template-areas: "user time" "content content"; + grid-template-areas: "user time" "content content"; } #chat .msg[data-type="message"] .time { @@ -659,11 +664,11 @@ textarea.input { } #chat .msg[data-type="message"] .content { - margin-top: calc(var(--dim--spacing) * .5); - padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); + margin-top: calc(var(--dim--spacing) * 0.5); + padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); background-color: var(--color--msg--bg); - color: var(--color--msg--fg); - font-size: 15px; + color: var(--color--msg--fg); + font-size: 15px; } #chat:not(.colored-nicks) .msg[data-type="message"] .content .user { @@ -681,7 +686,7 @@ textarea.input { #chat .self[data-type="message"] .content { background-color: var(--color--msg--self-bg); - color: var(--color--msg--self-fg); + color: var(--color--msg--self-fg); } #chat .msg[data-type="condensed"] { @@ -694,7 +699,7 @@ textarea.input { #chat .msg[data-type="monospace_block"] { grid-template-columns: auto 1fr; - grid-template-areas: "time user" "content content"; + grid-template-areas: "time user" "content content"; } #chat .msg[data-type="monospace_block"] .content { @@ -702,14 +707,14 @@ textarea.input { } #chat .msg[data-type="monospace_block"] .text { - margin-top: calc(var(--dim--spacing) * .5); - padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); - border-radius: 0; + margin-top: calc(var(--dim--spacing) * 0.5); + padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); + border-radius: 0; background-color: var(--color--msg--bg); - color: var(--color--msg--fg); - font-family: monospace; - font-size: 15px; - white-space: pre; + color: var(--color--msg--fg); + font-family: monospace; + font-size: 15px; + white-space: pre; } #chat .msg[data-type="notice"] .content, @@ -753,7 +758,7 @@ textarea.input { } #chat .msg + .previous-source[data-type="message"] { - margin-top: calc(var(--dim--spacing) * .25); + margin-top: calc(var(--dim--spacing) * 0.25); } #chat .msg + .previous-source[data-type="message"] .from, @@ -766,40 +771,41 @@ textarea.input { } #chat .chat-view[data-type="channel"] .msg.highlight { - border-left: 0; + border-left: 0; background-color: transparent; - box-shadow: 2px 0 var(--color--msg--self-border) inset; + box-shadow: 2px 0 var(--color--msg--self-border) inset; } #chat .chat-view[data-type="channel"] .msg.highlight .time { padding-left: 0; - color: var(--color--msg--meta-fg); + color: var(--color--msg--meta-fg); } #chat .chat-view[data-type="channel"] .msg.highlight .content { background-color: var(--color--msg--self-bg); - color: var(--color--msg--self-fg); + color: var(--color--msg--self-fg); } #chat .preview { - margin: var(--dim--msg--pad-v) calc(var(--dim--msg--pad-h) * -1) calc(var(--dim--msg--pad-v) * -1); + margin: var(--dim--msg--pad-v) calc(var(--dim--msg--pad-h) * -1) + calc(var(--dim--msg--pad-v) * -1); border-top: 1px solid var(--color--msg--border); } #chat .preview::after { - content: ""; - display: block; - width: 1px; + content: ""; + display: block; + width: 1px; min-width: 0; } #chat .toggle-content { - flex: 0 0 auto; - margin: 0; - padding: var(--dim--msg--pad-h); - border-radius: 0; + flex: 0 0 auto; + margin: 0; + padding: var(--dim--msg--pad-h); + border-radius: 0; background-color: transparent; - box-shadow: none; + box-shadow: none; } #chat .toggle-content .toggle-text, @@ -838,9 +844,9 @@ textarea.input { #chat table.channel-list, #chat table.ignore-list, #chat table.invite-list { - width: 100%; - margin: 0; - table-layout: fixed; + width: 100%; + margin: 0; + table-layout: fixed; border-spacing: 0; } @@ -851,7 +857,7 @@ textarea.input { #chat table.ignore-list th, #chat table.invite-list td, #chat table.invite-list th { - padding: var(--dim--container--pad); + padding: var(--dim--container--pad); border-color: var(--color--channels--border); } @@ -859,19 +865,23 @@ textarea.input { color: var(--color--channels--title); } +#chat table.channel-list .topic { + white-space: normal; +} + #chat table.channel-list .channel { width: 20%; } #chat table.channel-list .users { - width: 5em; + width: 5em; text-align: right; } /* SCROLL DOWN BUTTON */ .scroll-down { - right: var(--dim--container-lg--pad); + right: var(--dim--container-lg--pad); bottom: 0; } @@ -884,16 +894,16 @@ textarea.input { /* CHAT INPUT */ #form { - margin: var(--dim--container-lg--pad); - border-top: 0; + margin: var(--dim--container-lg--pad); + border-top: 0; background-color: var(--color--cform--bg); - box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .25); - color: var(--color--cform--ph-fg); + box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25); + color: var(--color--cform--ph-fg); } #form #nick { background-color: var(--color--cform--nick-bg); - color: var(--color--cform--nick-fg); + color: var(--color--cform--nick-fg); } #form #input { @@ -926,22 +936,22 @@ textarea.input { #context-menu, .mentions-popup, .textcomplete-menu { - z-index: 2000; - padding: var(--dim--popup--pad); - border: 0; - border-radius: 0; + z-index: 2000; + padding: var(--dim--popup--pad); + border: 0; + border-radius: 0; background-color: var(--color--popup--bg); - box-shadow: 0 .3rem 1.5rem rgba(0, 0, 0, .4); - color: var(--color--popup--fg); + box-shadow: 0 0.3rem 1.5rem rgba(0, 0, 0, 0.4); + color: var(--color--popup--fg); } .context-menu-item, .textcomplete-item { - margin-top: 0; + margin-top: 0; margin-bottom: 0; - padding: var(--dim--popup--item-pad-v) var(--dim--popup--item-pad-h); + padding: var(--dim--popup--item-pad-v) var(--dim--popup--item-pad-h); border-radius: 0; - color: var(--color--popup--fg); + color: var(--color--popup--fg); } .textcomplete-item a { @@ -953,7 +963,7 @@ textarea.input { .textcomplete-item:hover, .textcomplete-menu .active { background-color: var(--color--popup--item-hover-bg); - color: var(--color--popup--item-hover-fg); + color: var(--color--popup--item-hover-fg); } .textcomplete-item.active a { @@ -971,17 +981,17 @@ textarea.input { } .mentions-popup > .mentions-popup-title { - align-items: center; + align-items: center; margin-bottom: 0; - padding: var(--dim--container--pad); - color: var(--color--popup--title-fg); - font-size: 1em; - font-weight: bold; + padding: var(--dim--container--pad); + color: var(--color--popup--title-fg); + font-size: 1em; + font-weight: bold; } .mentions-popup > .mentions-popup-title + p { - margin: 0; - padding: var(--dim--container--pad); + margin: 0; + padding: var(--dim--container--pad); border-top: 1px solid var(--color--popup--border); } @@ -990,27 +1000,27 @@ textarea.input { } .mentions-popup .from { - color: var(--color--popup--title-fg); + color: var(--color--popup--title-fg); font-size: 13px; } .mentions-popup .time { - color: var(--color--popup--meta-fg); + color: var(--color--popup--meta-fg); font-size: 13px; } .mentions-popup .msg { margin-bottom: 0; - padding: var(--dim--container--pad); - border-top: 1px solid var(--color--popup--border); + padding: var(--dim--container--pad); + border-top: 1px solid var(--color--popup--border); } .mentions-popup .msg .content { - margin-top: calc(var(--dim--spacing) * .5); - padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); - border-radius: 0; + margin-top: calc(var(--dim--spacing) * 0.5); + padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); + border-radius: 0; background-color: var(--color--popup--msg-bg); - color: var(--color--popup--msg-fg); + color: var(--color--popup--msg-fg); } @media (max-width: 768px) { @@ -1022,9 +1032,9 @@ textarea.input { /* TOOLTIP */ .tooltipped::after { - border-radius: 0; + border-radius: 0; background-color: var(--color--tooltip--bg); - color: var(--color--tooltip--fg); + color: var(--color--tooltip--fg); } .tooltipped-s::before, -- cgit v1.2.3-54-g00ecf