135 lines
2.5 KiB
CSS
135 lines
2.5 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: calc(var(--control-height) + 2 * var(--gap-between-tiles));
|
|
}
|
|
|
|
#chat-page > div,
|
|
#chat-page > div > #ribbon,
|
|
#chat-page > div > #main,
|
|
#chat-page > div > #main > div,
|
|
#chat-page > div > #main > div > .pane,
|
|
#chat-page > div > #main > div > .pane > .toolbar,
|
|
#chat-page > div > #main > div > .pane > .content {
|
|
display: flex;
|
|
}
|
|
|
|
#chat-page > div {
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#chat-page > div > #main {
|
|
width: calc(100% - var(--ribbon-size));
|
|
}
|
|
|
|
#chat-page #main > div,
|
|
#chat-page > div > #main > div > .pane,
|
|
#chat-page > div > #main > div > .pane > .content {
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane {
|
|
flex-direction: column;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .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 {
|
|
width: var(--ribbon-size);
|
|
border-right: 1px solid var(--border);
|
|
|
|
justify-content: space-between;
|
|
|
|
padding-bottom: var(--safe-area-bottom);
|
|
}
|
|
|
|
#chat-page > div > #ribbon > span {
|
|
height: 100%;
|
|
|
|
flex: 1;
|
|
overflow: auto;
|
|
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#chat-page > div > #main > div > .pane > .toolbar {
|
|
height: var(--ribbon-size);
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
overflow-x: auto;
|
|
|
|
padding-left: var(--content-padding);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
#chat-page > div > #ribbon,
|
|
#chat-page > div > #main > div > .pane > .toolbar {
|
|
align-items: center;
|
|
}
|
|
|
|
#chat-page #ribbon > span,
|
|
#chat-page > div > #main > div > .pane > .toolbar > span {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding: var(--gap-between-tiles);
|
|
gap: var(--gap-between-tiles);
|
|
}
|
|
|
|
#chat-page > div > #ribbon > span {
|
|
width: 100%;
|
|
}
|
|
|
|
#chat-page > div > #ribbon button,
|
|
#chat-page > div > #main > div > .pane > .toolbar button {
|
|
padding: 0px;
|
|
|
|
width: 100%;
|
|
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 {
|
|
margin-top: var(--gap-between-tiles);
|
|
}
|