Page MenuHomePhabricator
Files F3509558

No OneTemporary
Actions

View Options

diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
index 22547bd62..2f65f869b 100644
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,300 +1,310 @@
div.thread {
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 10px;
}
div.threadListSidebar {
display: flex;
flex-direction: row;
align-items: flex-start;
padding-bottom: 4px;
padding-left: 16px;
padding-right: 10px;
position: relative;
}
div.threadListSidebar > svg {
position: absolute;
top: -13px;
left: 30px;
}
div.thread:first-child {
padding-top: 6px;
}
div.activeThread,
-div.thread:hover,
div.threadListSidebar:hover {
- background: var(--selected-thread-bg);
+ background: var(--thread-active-bg);
+}
+
+div.activeThread :is(div.dark, button, .lastMessage span.light, .title) {
+ color: var(--fg);
+}
+
+div.activeThread.thread:hover {
+ background: var(--thread-active-bg);
+}
+div.thread:hover {
+ background: var(--thread-hover-bg);
}
div.title {
flex: 1;
font-size: var(--m-font-16);
font-weight: var(--semi-bold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--thread-color-read);
line-height: var(--line-height-text);
}
a.threadButton {
flex: 1;
cursor: pointer;
overflow: hidden;
padding-left: 8px;
}
.threadButtonSidebar {
flex: 1;
cursor: pointer;
overflow: hidden;
padding-left: 8px;
}
p.breadCrumbs {
display: flex;
font-size: var(--xs-font-12);
font-weight: var(--normal);
color: var(--breadcrumb-color);
}
p.breadCrumbs.unread {
color: var(--breadcrumb-color-unread);
}
span.breadCrumb {
display: flex;
align-items: center;
white-space: nowrap;
text-overflow: ellipsis;
}
div.colorContainer {
display: flex;
}
div.spacer,
div.colorSplotch {
height: 42px;
width: 42px;
border-radius: 1.68px;
}
div.lastActivity {
font-size: var(--xxs-font-10);
color: var(--fg);
line-height: 1.5;
font-weight: var(--semi-bold);
white-space: nowrap;
}
div.lastMessage {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
div.threadRow > .lastMessage {
color: var(--thread-last-message-color-read);
font-size: var(--s-font-14);
}
div.unread {
color: var(--fg);
font-weight: var(--semi-bold);
}
div.lastMessage.black {
color: var(--fg);
}
div.dark {
color: var(--thread-color-read);
}
.light {
color: var(--thread-from-color-read);
}
div.dotContainer {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
}
div.unreadDot {
height: 4px;
width: 4px;
background: var(--fg);
border-radius: 15px;
align-self: center;
}
div.italic {
font-style: italic;
}
div.sidebarTitle {
flex: 1;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--thread-color-read);
align-self: flex-start;
}
div.sidebarTitle.unread {
color: var(--fg);
}
div.sidebarLastActivity {
white-space: nowrap;
font-size: var(--xxs-font-10);
line-height: var(--line-height-text);
font-weight: var(--semi-bold);
}
svg.sidebarIcon {
color: var(--thread-color-read);
padding: 0 6px;
font-size: 20px;
}
div.sidebar .menu > button svg {
font-size: 16px;
color: var(--thread-color-read);
}
div.sidebar .menu {
opacity: 0;
}
div.sidebar:hover .menu {
display: flex;
align-self: flex-end;
opacity: 1;
}
.menu {
position: relative;
display: flex;
justify-content: flex-end;
}
.menu > button {
background-color: transparent;
color: var(--thread-color-read);
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
.menu > button:focus {
outline: none;
}
.menuContent {
display: none;
position: absolute;
top: calc(100% + 1px);
right: 0;
z-index: 1;
width: max-content;
overflow: hidden;
background-color: #eeeeee;
border-radius: 5px;
box-shadow: 1px 1px 5px 2px #00000022;
}
.menuContentVisible {
display: block;
}
button.menuContent {
border: none;
cursor: pointer;
padding: 10px;
font-size: 16px;
}
button.menuContent:hover {
background-color: #dddddd;
}
ul.list {
margin: 5px 3px 10px 0px;
overflow: auto;
}
div.search {
display: flex;
background-color: #dddddd;
border-radius: 5px;
padding: 3px 5px;
align-items: center;
}
svg.searchVector {
fill: #aaaaaa;
height: 22px;
width: 22px;
padding: 0 3px;
margin-left: 8px;
}
div.search > input {
color: black;
padding: 0;
border: none;
background-color: #dddddd;
font-weight: 600;
font-size: 15px;
flex-grow: 1;
margin-left: 3px;
}
div.search > input:focus {
outline: none;
}
svg.clearQuery {
font-size: 15px;
padding-bottom: 1px;
padding-right: 2px;
color: #aaaaaa;
}
svg.clearQuery:hover {
font-size: 15px;
padding-bottom: 1px;
padding-right: 2px;
color: white;
}
div.spacer {
height: 6px;
}
div.emptyItem {
padding: 10px;
font-size: 16px;
text-align: center;
white-space: pre-wrap;
color: var(--fg);
}
div.threadListContainer {
display: flex;
flex-direction: column;
}
div.searchContainer {
background-color: var(--text-input-bg);
display: flex;
align-items: center;
margin: 1rem;
}
input.searchInput {
background-color: var(--text-input-bg);
font-size: var(--s-font-14);
padding: 1rem;
flex: 1;
border: none;
color: var(--text-input-color);
outline: none;
}
input.searchInput::placeholder {
color: var(--text-input-placeholder);
}
button.clearSearch {
color: var(--text-input-color);
transition: ease-in-out 0.15s;
border: none;
padding: 0 1rem;
font-size: var(--m-font-16);
background: none;
}
button.clearSearchDisabled {
opacity: 0;
}
diff --git a/web/theme.css b/web/theme.css
index 3df3e7e25..918a3850f 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,116 +1,117 @@
:root {
/* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
The reason we never use color values defined here directly in CSS is
1. It makes changing themes from light / dark / user generated impossible.
2. Gives the programmer context into the color being used.
3. If our color system changes it's much easier to change color values in one place.
Add a color value to the theme below, and then use it in your CSS.
naming convention:
- bg: background.
- fg: foreground.
- color: text-color
*/
--shades-white-100: #ffffff;
--shades-white-90: #f5f5f5;
--shades-white-80: #ebebeb;
--shades-white-70: #e0e0e0;
--shades-white-60: #cccccc;
--shades-black-100: #0a0a0a;
--shades-black-90: #1f1f1f;
--shades-black-80: #404040;
--shades-black-70: #666666;
--shades-black-60: #808080;
--violet-dark-100: #7e57c2;
--violet-dark-80: #6d49ab;
--violet-dark-60: #563894;
--violet-dark-40: #44297a;
--violet-dark-20: #331f5c;
--violet-light-100: #ae94db;
--violet-light-80: #b9a4df;
--violet-light-60: #d3c6ec;
--violet-light-40: #e8e0f5;
--violet-light-20: #f3f0fa;
--success-light-10: #d5f6e3;
--success-light-50: #6cdf9c;
--success-primary: #00c853;
--success-dark-50: #029841;
--success-dark-90: #034920;
--error-light-10: #feebe6;
--error-light-50: #f9947b;
--error-primary: #f53100;
--error-dark-50: #b62602;
--error-dark-90: #4f1203;
--bg: var(--shades-black-100);
--fg: var(--shades-white-100);
--color-disabled: var(--shades-black-60);
--text-input-bg: var(--shades-black-80);
--text-input-color: var(--shades-white-60);
--text-input-placeholder: var(--shades-white-60);
--border: var(--shades-black-80);
--error: var(--error-primary);
--success: var(--success-dark-50);
/* Color Theme */
--btn-bg-primary: var(--violet-dark-100);
--btn-bg-danger: var(--error-primary);
--chat-bg: var(--violet-dark-80);
--chat-confirmation-icon: var(--violet-dark-100);
--keyserver-selection: var(--violet-dark-60);
--thread-selection: var(--violet-light-80);
- --selected-thread-bg: var(--shades-black-90);
+ --thread-hover-bg: var(--shades-black-90);
+ --thread-active-bg: var(--shades-black-80);
--chat-timestamp-color: var(--shades-black-60);
--tool-tip-bg: var(--shades-black-80);
--tool-tip-color: var(--shades-white-60);
--border-color: var(--shades-black-80);
--calendar-chevron: var(--shades-black-60);
--calendar-day-bg: var(--shades-black-60);
--calendar-day-selected-color: var(--violet-dark-80);
--community-bg: var(--shades-black-90);
--unread-bg: var(--error-primary);
--settings-btn-bg: var(--violet-dark-100);
--modal-bg: var(--shades-black-90);
--join-bg: var(--shades-black-90);
--help-color: var(--shades-black-60);
- --breadcrumb-color: var(--shades-black-60);
+ --breadcrumb-color: var(--shades-white-60);
--breadcrumb-color-unread: var(--shades-white-60);
--btn-secondary-border: var(--shades-black-60);
--thread-color-read: var(--shades-black-60);
--thread-from-color-read: var(--shades-black-80);
--thread-last-message-color-read: var(--shades-black-60);
--relationship-button-green: var(--success-dark-50);
--relationship-button-red: var(--error-primary);
--relationship-button-text: var(--fg);
--disconnected-bar-alert-bg: var(--error-dark-50);
--disconnected-bar-alert-color: var(--shades-white-100);
--disconnected-bar-connecting-bg: var(--shades-white-70);
--disconnected-bar-connecting-color: var(--shades-black-100);
--permission-color: var(--shades-white-60);
--thread-top-bar-color: var(--shades-white-100);
--thread-top-bar-menu-color: var(--shades-white-70);
--thread-ancestor-keyserver-border: var(--shades-black-70);
--thread-ancestor-color-light: var(--shades-white-70);
--thread-ancestor-color-dark: var(--shades-black-100);
--thread-ancestor-separator-color: var(--shades-white-60);
--text-message-default-background: var(--shades-black-80);
--message-action-tooltip-bg: var(--shades-black-90);
--thread-menu-bg: var(--shades-black-90);
--thread-menu-separator-color: var(--shades-black-80);
--thread-menu-color: var(--shades-black-60);
--thread-menu-color-hover: var(--shades-white-100);
--thread-menu-color-dangerous: var(--error-primary);
--thread-menu-color-dangerous-hover: var(--error-light-50);
--app-list-icon-read-only-color: var(--shades-black-60);
--app-list-icon-enabled-color: var(--success-primary);
--app-list-icon-disabled-color: var(--shades-white-80);
--account-settings-label: var(--shades-black-60);
--account-button-color: var(--violet-dark-100);
}

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 6:14 AM (18 h, 8 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690455
Default Alt Text
(10 KB)

Event Timeline