mirror of
https://github.com/docmost/docmost.git
synced 2026-05-09 15:53:10 +08:00
Philipinho
125 lines
2.8 KiB
CSS
125 lines
2.8 KiB
CSS
div[data-type="columns"] {
|
|
display: flex;
|
|
margin: 0.75rem 0;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
div[data-type="columns"] > div[data-type="column"] {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
div[data-type="columns"] > div[data-type="column"]:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
div[data-type="columns"] > div[data-type="column"] + div[data-type="column"] {
|
|
border-left: 1px solid transparent;
|
|
padding-left: 1rem;
|
|
transition: border 0.3s;
|
|
}
|
|
|
|
div[data-type="columns"]:hover
|
|
> div[data-type="column"]
|
|
+ div[data-type="column"],
|
|
div[data-type="columns"].has-focus
|
|
> div[data-type="column"]
|
|
+ div[data-type="column"] {
|
|
border-left: 1px solid
|
|
light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7));
|
|
}
|
|
|
|
/* Confluence layout types */
|
|
div[data-type="columns"][data-layout="two_left_sidebar"]
|
|
> div[data-type="column"]:first-child {
|
|
flex: 1;
|
|
}
|
|
|
|
div[data-type="columns"][data-layout="two_left_sidebar"]
|
|
> div[data-type="column"]:last-child {
|
|
flex: 2;
|
|
}
|
|
|
|
div[data-type="columns"][data-layout="two_right_sidebar"]
|
|
> div[data-type="column"]:first-child {
|
|
flex: 2;
|
|
}
|
|
|
|
div[data-type="columns"][data-layout="two_right_sidebar"]
|
|
> div[data-type="column"]:last-child {
|
|
flex: 1;
|
|
}
|
|
|
|
div[data-type="columns"][data-layout="three_left_wide"]
|
|
> div[data-type="column"]:first-child {
|
|
flex: 2;
|
|
}
|
|
|
|
div[data-type="columns"][data-layout="three_right_wide"]
|
|
> div[data-type="column"]:last-child {
|
|
flex: 2;
|
|
}
|
|
|
|
div[data-type="columns"][data-layout="three_with_sidebars"]
|
|
> div[data-type="column"]:first-child,
|
|
div[data-type="columns"][data-layout="three_with_sidebars"]
|
|
> div[data-type="column"]:last-child {
|
|
flex: 1;
|
|
}
|
|
|
|
div[data-type="columns"][data-layout="three_with_sidebars"]
|
|
> div[data-type="column"]:nth-child(2) {
|
|
flex: 2;
|
|
}
|
|
|
|
/* Stack columns vertically on small viewports */
|
|
@media (max-width: 680px) {
|
|
div[data-type="columns"] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
div[data-type="columns"] > div[data-type="column"] + div[data-type="column"] {
|
|
border-left: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
div[data-type="columns"]:hover
|
|
> div[data-type="column"]
|
|
+ div[data-type="column"] {
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
/* Wide width mode — extends columns to full container width */
|
|
div[data-type="columns"][data-width-mode="wide"] {
|
|
margin-left: -3rem;
|
|
margin-right: -3rem;
|
|
width: calc(100% + 6rem);
|
|
}
|
|
|
|
@media (max-width: $mantine-breakpoint-sm) {
|
|
div[data-type="columns"][data-width-mode="wide"] {
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
width: calc(100% + 2rem);
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
div[data-type="columns"] {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
div[data-type="columns"] > div[data-type="column"] + div[data-type="column"] {
|
|
border-left: none;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
div[data-type="columns"][data-width-mode="wide"] {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|