/* src/styles.css */ [unread] { border-left: 10px solid var(--text-warning); } :root { --split-thread-height: 8rem; --split-thread-width: 20rem; } .object-entry-wide { width: 320px; min-width: 320px; } #message-tab { flex-direction: column; } .chat-object-view { display: none; } [showingobjects] header { border-bottom: 1px solid var(--border); } [showingobjects] footer { display: none; } [showingobjects] .chat-object-view { display: flex; top: var(--header-height); } [showingobjects] .thread-view { display: none; } [showingobjects][chatvisible] .chat-object-view { right: var(--split-thread-width); border-right: 1px solid var(--border); } [showingobjects][chatvisible] .thread-view { top: var(--header-height); padding-top: var(--content-padding); } [showingobjects][chatvisible] :is(.thread-view, footer) { display: flex; right: 0px; left: unset; width: var(--split-thread-width); } @media (max-width: 1300px) { main:has([showingobjects][chatopen]) { display: flex; } main:has([showingobjects][chatopen]) #settings-tab { display: none; } } @media (max-width: 640px) { [showingobjects][chatvisible][chatopen] .chat-object-view { width: 100%; bottom: calc(var(--split-thread-height) + var(--control-height)); border-right: none; border-bottom: 1px solid var(--border); } [showingobjects][chatvisible][chatopen] .thread-view { top: unset; bottom: var(--control-height); width: 100%; height: var(--split-thread-height); padding: 0px; } [showingobjects][chatvisible][chatopen] footer { width: 100%; } }