209 lines
4.1 KiB
CSS
209 lines
4.1 KiB
CSS
/* show/hide */
|
|
#chat-page-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
body[showing-chat] #home-page {
|
|
display: none;
|
|
}
|
|
|
|
body[showing-chat] #chat-page-wrapper {
|
|
display: flex;
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
|
|
background-color: var(--background);
|
|
|
|
z-index: 2;
|
|
}
|
|
|
|
/* layout */
|
|
#chat-page {
|
|
--ribbon-size: var(--control-height);
|
|
}
|
|
|
|
#chat-page > div,
|
|
#chat-page > div > #ribbon,
|
|
#chat-page > div > #ribbon > span,
|
|
#chat-page > div > #main,
|
|
#chat-page > div > #main > div,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
|
|
display: flex;
|
|
}
|
|
|
|
#chat-page > div {
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#chat-page > div > #main {
|
|
width: calc(100% - var(--ribbon-size));
|
|
|
|
overflow-x: scroll;
|
|
scroll-behavior: smooth;
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
|
|
#chat-page #main > div,
|
|
#chat-page > div > #main > div > .pane-wrapper,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane-wrapper,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane {
|
|
flex-direction: column;
|
|
scroll-snap-align: center;
|
|
|
|
min-width: 100%;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side) .content {
|
|
animation: slide-up var(--animation-duration);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
#chat-page > div > #main > div > .pane-wrapper {
|
|
min-width: unset;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane-wrapper.side {
|
|
max-width: 18rem;
|
|
}
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
padding: var(--content-padding);
|
|
}
|
|
|
|
#chat-page #ribbon,
|
|
#chat-page #main,
|
|
#chat-page #main .content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ribbon, toolbar */
|
|
#chat-page > div > #ribbon,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
|
|
align-items: center;
|
|
}
|
|
|
|
#chat-page > div > #ribbon > span,
|
|
#chat-page
|
|
> div
|
|
> #main
|
|
> div
|
|
> .pane-wrapper
|
|
> .pane
|
|
> .toolbar
|
|
> span.ribbon {
|
|
gap: calc(var(--gap-between-tiles) * 2);
|
|
padding: var(--gap-between-tiles);
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
|
|
justify-content: start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#chat-page > div > #ribbon {
|
|
width: var(--ribbon-size);
|
|
|
|
padding-bottom: var(--safe-area-bottom);
|
|
}
|
|
|
|
#chat-page > div > #ribbon > span {
|
|
height: 100%;
|
|
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
|
|
flex-direction: column;
|
|
justify-content: end;
|
|
}
|
|
|
|
#chat-page > div > #ribbon button,
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
|
|
padding: 0px;
|
|
|
|
width: var(--control-height);
|
|
max-width: var(--control-height);
|
|
height: var(--control-height);
|
|
min-height: var(--control-height);
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#chat-page > div > #ribbon button.ribbon-button,
|
|
#chat-page
|
|
> div
|
|
> #main
|
|
> div
|
|
> .pane-wrapper
|
|
> .pane
|
|
> .toolbar
|
|
button.ribbon-button {
|
|
width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
|
|
max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
|
|
|
|
min-height: unset;
|
|
height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
|
|
}
|
|
|
|
#chat-page > div > #ribbon button > .icon,
|
|
#chat-page
|
|
> div
|
|
> #main
|
|
> div
|
|
> .pane-wrapper
|
|
> .pane
|
|
> .toolbar
|
|
button
|
|
> .icon {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
#chat-page > div > #ribbon > span {
|
|
width: 100%;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
|
|
height: var(--ribbon-size);
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
overflow-x: auto;
|
|
|
|
padding: 0px;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
|
|
padding-left: var(--content-padding);
|
|
}
|
|
|
|
#chat-page
|
|
> div
|
|
> #main
|
|
> div
|
|
> .pane-wrapper
|
|
> .pane
|
|
> .toolbar
|
|
:is(input, select, button) {
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|