sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-17 06:44:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): pin selection bar to viewport with Confluence-style dark pill

Browse Source
This commit is contained in:
Philipinho
2026-04-18 16:54:49 +01:00
parent b6b6e1809a
commit 3f52e54207
2 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/styles/grid.module.css
+68 -11
View File
@@ -376,28 +376,85 @@
}
.selectionActionBarWrapper {
position: sticky;
bottom: 16px;
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: flex;
justify-content: center;
pointer-events: none;
z-index: 5;
grid-column: 1 / -1;
z-index: 200;
}
.selectionActionBar {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: var(--mantine-radius-md);
box-shadow: var(--mantine-shadow-lg);
background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
gap: 4px;
padding: 6px 6px 6px 14px;
border-radius: 999px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.25),
0 2px 8px rgba(0, 0, 0, 0.18);
background: light-dark(
var(--mantine-color-dark-8),
var(--mantine-color-dark-5)
);
color: var(--mantine-color-white);
border: 1px solid light-dark(
var(--mantine-color-dark-9),
var(--mantine-color-dark-4)
);
}
.selectionActionBarCount {
font-size: var(--mantine-font-size-sm);
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
font-weight: 500;
color: var(--mantine-color-white);
padding-right: 10px;
margin-right: 2px;
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.selectionActionBarDelete {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: none;
background: transparent;
color: var(--mantine-color-red-4);
font-size: var(--mantine-font-size-sm);
font-weight: 500;
border-radius: 999px;
cursor: pointer;
transition: background 120ms ease;
}
.selectionActionBarDelete:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
}
.selectionActionBarDelete:disabled {
opacity: 0.6;
cursor: default;
}
.selectionActionBarClose {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: none;
background: transparent;
color: var(--mantine-color-gray-3);
border-radius: 999px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.selectionActionBarClose:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--mantine-color-white);
}