/* 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); } 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: calc(var(--control-height) + var(--safe-area-bottom)); width: 100%; height: var(--split-thread-height); padding: 0px; } [showingobjects][chatvisible][chatopen] footer { width: 100%; } } :root { --day-view-width: 400px; } .calendar-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; } .calendar-wrapper .month-grid { border-bottom: 1px solid var(--border); } .calendar-wrapper > * { width: 100%; height: 100%; flex: 1; } .day-miniature[today] h3 { color: var(--primary); } .day-miniature:has(> div:not(:empty)):not([selected]) { border: var(--gap-between-tiles) solid var(--text-warning); } @media (min-width: 750px) { .calendar-wrapper:not([chatvisible] *) { flex-direction: row; } .calendar-wrapper:not([chatvisible] *) .month-grid { border-bottom: none; border-right: 1px solid var(--border); } .calendar-wrapper:not([chatvisible] *) .day-view { max-width: var(--day-view-width); } } @media (min-width: 1200px) { .calendar-wrapper { flex-direction: row; } .calendar-wrapper .month-grid { border-bottom: none; border-right: 1px solid var(--border); } .calendar-wrapper .day-view { max-width: var(--day-view-width); } } @media (min-width: 750px) and (max-width: 1000px) { .day-miniature { padding: var(--control-padding) !important; align-items: center; justify-content: center; } .day-miniature h3 { font-size: 1rem; text-align: center; } .day-miniature > div { display: none; } }