131 lines
2.9 KiB
CSS
131 lines
2.9 KiB
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;
|
|
}
|
|
.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 (max-width: 600px) or ((min-width: 750px) and (max-width: 1100px)) {
|
|
.day-miniature {
|
|
padding: 0px !important;
|
|
align-items: center !important;
|
|
justify-content: center;
|
|
}
|
|
.day-miniature h3 {
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
.day-miniature > div {
|
|
display: none;
|
|
}
|
|
}
|