Files
docmost/apps/client/src/features/editor/styles/table.css
T
Mirone 7d1e5bce0d feat: table row/column drag and drop (#1467)
* 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
2025-08-31 18:53:27 +01:00

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;
}
}