diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css index 6ade485d5..7ac1a3d7f 100644 --- a/web/chat/chat-thread-list.css +++ b/web/chat/chat-thread-list.css @@ -1,233 +1,238 @@ div.thread { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 8px; padding-top: 4px; padding-bottom: 4px; padding-left: 16px; padding-right: 10px; } div.thread:first-child { padding-top: 6px; } div.activeThread, div.thread:hover { background: var(--selected-thread-bg); } div.thread 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); } div.thread div.title.unread, div.thread.activeThread div.title, div.thread.activeThread div.lastMessage, div.thread.activeThread div.breadCrumbs, div.thread.activeThread div.lastActivity, div.thread.activeThread .menu button { color: var(--fg); } div.thread.activeThread p.breadCrumbs { color: var(--breadcrumb-color-unread); } a.threadButton { flex: 1; cursor: pointer; overflow: hidden; padding-left: 8px; } div.threadRow { display: flex; justify-content: space-between; align-items: center; } p.breadCrumbs { display: flex; align-items: center; font-size: var(--xs-font-12); font-weight: var(--normal); color: var(--breadcrumb-color); } p.breadCrumbs.unread { color: var(--breadcrumb-color-unread); } span.breadCrumb { padding-right: 4px; white-space: nowrap; text-overflow: ellipsis; } span.breadCrumb svg { color: var(--fg); } div.colorSplotch { height: 40px; width: 40px; 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); } div.thread.activeThread a { color: red; } 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.italic { font-style: italic; } div.thread 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.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 { + display: none; +} +div.sidebar:hover .menu { + display: block; +} .menu { position: relative; display: flex; justify-content: flex-end; } .menu > button { background-color: transparent; color: var(--thread-color-read); border: none; cursor: pointer; align-self: flex-start; } .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; } .menuContent ul { list-style: none; } .menuContent li:not(:last-child) { border-bottom: 1px solid #dddddd; } .menuContent button { border: none; cursor: pointer; padding: 10px; font-size: 16px; } .menuContent button: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; }