mirror of
https://github.com/docmost/docmost.git
synced 2026-05-07 14:43:06 +08:00
7d1e5bce0d
* chore: add dev container * feat: add drag handle when hovering cell * feat: add column drag and drop * feat: add support for row drag and drop * refactor: extract preview controllers * fix: hover issue * refactor: add handle controller * chore: f * chore: remove log * chore: remove dev files * feat: hide other drop indicators when table dnd working * feat: add auto scroll and bug fix * chore: f * fix: firefox
140 lines
2.7 KiB
CSS
140 lines
2.7 KiB
CSS
.tableWrapper {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
overflow-x: auto;
|
|
& table {
|
|
overflow-x: hidden;
|
|
min-width: 700px !important;
|
|
}
|
|
}
|
|
|
|
.table-dnd-preview {
|
|
padding: 0;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.table-dnd-drop-indicator {
|
|
background-color: #adf;
|
|
}
|
|
|
|
.ProseMirror {
|
|
table {
|
|
border-collapse: collapse;
|
|
margin: 0;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
|
|
td,
|
|
th {
|
|
border: 1px solid #ced4da;
|
|
box-sizing: border-box;
|
|
min-width: 1em;
|
|
padding: 3px 5px;
|
|
position: relative;
|
|
vertical-align: top;
|
|
|
|
&:first-of-type:not(a) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
|
|
& + p {
|
|
margin-top: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
th {
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-1),
|
|
var(--mantine-color-dark-5)
|
|
);
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
.column-resize-handle {
|
|
background-color: #adf;
|
|
bottom: -1px;
|
|
position: absolute;
|
|
right: -2px;
|
|
pointer-events: none;
|
|
top: 0;
|
|
width: 4px;
|
|
}
|
|
|
|
.selectedCell:after {
|
|
background: rgba(200, 200, 255, 0.4);
|
|
content: "";
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Table cell background colors with dark mode support */
|
|
.ProseMirror {
|
|
table {
|
|
@mixin dark {
|
|
/* Blue */
|
|
td[data-background-color="#b4d5ff"],
|
|
th[data-background-color="#b4d5ff"] {
|
|
background-color: #1a3a5c !important;
|
|
}
|
|
|
|
/* Green */
|
|
td[data-background-color="#acf5d2"],
|
|
th[data-background-color="#acf5d2"] {
|
|
background-color: #1a4d3a !important;
|
|
}
|
|
|
|
/* Yellow */
|
|
td[data-background-color="#fef1b4"],
|
|
th[data-background-color="#fef1b4"] {
|
|
background-color: #7c5014 !important;
|
|
}
|
|
|
|
/* Red */
|
|
td[data-background-color="#ffbead"],
|
|
th[data-background-color="#ffbead"] {
|
|
background-color: #5c2a23 !important;
|
|
}
|
|
|
|
/* Pink */
|
|
td[data-background-color="#ffc7fe"],
|
|
th[data-background-color="#ffc7fe"] {
|
|
background-color: #4d2a4d !important;
|
|
}
|
|
|
|
/* Gray */
|
|
td[data-background-color="#eaecef"],
|
|
th[data-background-color="#eaecef"] {
|
|
background-color: #2a2e33 !important;
|
|
}
|
|
|
|
/* Purple */
|
|
td[data-background-color="#c1b7f2"],
|
|
th[data-background-color="#c1b7f2"] {
|
|
background-color: #3a2f5c !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
|
|
.prosemirror-dropcursor-block {
|
|
display: none;
|
|
}
|
|
|
|
.prosemirror-dropcursor-inline {
|
|
display: none;
|
|
}
|
|
} |