implement group create styles, split group sidebar into sections

This commit is contained in:
2025-01-05 19:30:20 -06:00
parent 7b301c73e9
commit 7eb12b4c02

View File

@@ -1005,7 +1005,7 @@ body.blog .page-container .article .link { font-weight: bold; }
/* == DASHBOARD */
@media (orientation: portrait) {
body.dashboard .dash-container {
body.dashboard .page-container {
display: flex;
flex-direction: column-reverse;
}
@@ -1017,11 +1017,6 @@ body.blog .page-container .article .link { font-weight: bold; }
}
@media (orientation: landscape) {
body.dashboard .dash-container {
max-width: 1000px;
margin: auto;
}
body.dashboard .section { margin: 0px -2px; }
body.dashboard .section .container { padding: 4px; }
body.dashboard .primary { width: 60%; }
@@ -1709,12 +1704,69 @@ body.group div.page-container div.group-section div.tabbed-page {
body.group div.page-container div.group-section div.sidebar {
min-width: 200px;
flex-grow: 0;
}
body.group div.page-container div.group-section div.sidebar > .section {
background-color: var(--tab-selected);
border: var(--tab-border);
margin: 4px auto;
padding: 4px;
}
body.group.create div.groupcard {
display: flex;
background: var(--primary-container-background);
background-size: cover;
background-position: center;
border: var(--primary-container-border);
padding: 64px 0px 0px 0px;
margin: 4px;
}
body.group.create div.groupcard .gbody {
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
}
body.group.create div.groupcard .gbody div.row {
background:var(--primary-container-background);
border-top: var(--primary-container-border);
box-sizing: border-box;
padding: 8px;
}
body.group.create div.groupcard .gbody div.title.row {
display: flex;
padding: 8px;
width: 100%;
}
body.group.create div.groupcard .gbody div.title.row h2 {
font-family: Arial;
font-weight: bold;
flex-grow: 1;
margin: 0;
}
body.group.create div.groupcard .gbody div.title.row input {
background: none;
font-weight: bold;
flex-grow: 1;
margin: 0;
border: none;
width: 100%;
}
body.group.create div.groupcard img.gicon {
background: var(--primary-container-background);
border: var(--primary-container-border);
border-bottom: none;
border-left: none;
padding: 4px;
}
@media only screen and (orientation: portrait) {
body.group div.page-container div.group-section {
flex-direction: column-reverse;