72 lines
1.8 KiB
CSS
72 lines
1.8 KiB
CSS
/* src/styles.css */
|
|
[unread] {
|
|
border-left: 10px solid var(--text-warning);
|
|
}
|
|
:root {
|
|
--thread-view-height-with-tools: 8rem;
|
|
--thread-view-width-with-tools: 20rem;
|
|
--footer-top-line: calc(var(--control-height) + var(--safe-area-bottom));
|
|
}
|
|
.object-entry-wide {
|
|
width: 280px;
|
|
min-width: 280px;
|
|
}
|
|
#message-tab {
|
|
flex-direction: column;
|
|
}
|
|
.message-tab-content-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.chat-object-view {
|
|
display: none;
|
|
}
|
|
#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
|
|
overflow: scroll;
|
|
position: absolute;
|
|
padding: 0px;
|
|
}
|
|
#message-tab:has([showingchattools]) header {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
#message-tab:has([showingchattools]) .chat-object-view {
|
|
display: flex;
|
|
top: var(--header-height);
|
|
bottom: calc(var(--thread-view-height-with-tools) + var(--footer-top-line));
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
#message-tab:has([showingchattools]) .thread-view {
|
|
display: flex;
|
|
height: var(--thread-view-height-with-tools);
|
|
top: unset;
|
|
bottom: var(--footer-top-line);
|
|
flex: 1;
|
|
}
|
|
@media (min-width: 640px) and (max-width: 1400px) {
|
|
main.split:has(#message-tab [showingchattools]) {
|
|
display: flex;
|
|
}
|
|
main.split:has(#message-tab [showingchattools]) #settings-tab {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) {
|
|
top: var(--header-height);
|
|
bottom: var(--footer-top-line);
|
|
}
|
|
#message-tab:has([showingchattools]) .chat-object-view {
|
|
left: 0px;
|
|
right: var(--thread-view-width-with-tools);
|
|
border-bottom: none;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
#message-tab:has([showingchattools]) .thread-view {
|
|
display: flex;
|
|
left: unset;
|
|
right: 0px;
|
|
height: unset;
|
|
width: var(--thread-view-width-with-tools);
|
|
}
|
|
}
|