CT/dist/index.css

/* 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;
}
@media (min-width: 900px) {
  .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);
  }
}