VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change layout styles, move BoardPage to separate file

Browse Source
This commit is contained in:
marlon-erler
2024-07-23 12:43:30 +02:00
parent 12947f8063
commit 3aae049106
7 changed files with 277 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+22 -20
View File
@@ -238,9 +238,9 @@ body[showing-chat] #chat-page-wrapper {
#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 {
#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 > .content {
display: flex;
}
#chat-page > div {
@@ -254,33 +254,35 @@ body[showing-chat] #chat-page-wrapper {
scroll-snap-type: x mandatory;
}
#chat-page #main > div,
#chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .content {
#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 {
#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:not(.side),
#chat-page > div > #main > div > .pane:not(.side) .content {
#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 {
#chat-page > div > #main > div > .pane-wrapper {
min-width: unset;
}
#chat-page > div > #main > div > .pane.side {
#chat-page > div > #main > div > .pane-wrapper.side {
max-width: 18rem;
}
}
#chat-page > div > #main > div > .pane:not(:last-child) {
#chat-page > div > #main > div > .pane-wrapper:not(:last-child) {
border-right: 1px solid var(--border);
}
#chat-page > div > #main > div > .pane > .content {
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
flex-direction: column;
overflow: auto;
padding: var(--content-padding);
@@ -291,11 +293,11 @@ body[showing-chat] #chat-page-wrapper {
flex-direction: column;
}
#chat-page > div > #ribbon,
#chat-page > div > #main > div > .pane > .toolbar {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
align-items: center;
}
#chat-page #ribbon > span,
#chat-page > div > #main > div > .pane > .toolbar {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
display: flex;
flex-direction: row;
align-items: center;
@@ -319,7 +321,7 @@ body[showing-chat] #chat-page-wrapper {
flex-direction: column;
}
#chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane > .toolbar button {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px;
width: 100%;
max-width: var(--control-height);
@@ -329,18 +331,18 @@ body[showing-chat] #chat-page-wrapper {
justify-content: center;
}
#chat-page > div > #ribbon button.ribbon-button,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
}
#chat-page > div > #ribbon button.ribbon-button > .icon,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button > .icon {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button > .icon {
font-size: 1.1rem;
}
#chat-page > div > #ribbon > span {
width: 100%;
}
#chat-page > div > #main > div > .pane > .toolbar {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
height: var(--ribbon-size);
border-bottom: 1px solid var(--border);
overflow-y: hidden;
@@ -348,10 +350,10 @@ body[showing-chat] #chat-page-wrapper {
padding: 0px;
border-top: 1px solid var(--border);
}
#chat-page > div > #main > div > .pane > .toolbar > span {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
padding-left: var(--content-padding);
}
#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
height: 100%;
flex: 1;
}