mirror of
https://github.com/docmost/docmost.git
synced 2026-07-13 10:54:51 +10:00
Philip Okugbe
8a2c457ab9
* feat: support opening property menu directly on options panel * refactor: expose group-by property from useKanbanColumns * feat: rename kanban group by clicking column name * feat: edit group-by property from kanban column menu * fix: license-gate base and kanban inserts * fix: add missing bases strings to en-US translation file
175 lines
3.4 KiB
CSS
175 lines
3.4 KiB
CSS
.standalone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.bandWrap {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.board {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding: 8px var(--embed-grid-pad-right, 12px) 8px var(--embed-grid-pad-left, 12px);
|
|
margin-left: calc(-1 * var(--embed-extend-l, 0px));
|
|
margin-right: calc(-1 * var(--embed-extend-r, 0px));
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
.boardEmbed {
|
|
max-height: min(80vh, calc(100vh - var(--sticky-band-top, 0px)));
|
|
}
|
|
|
|
.boardFullPage {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.column {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
width: 280px;
|
|
min-height: 0;
|
|
background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.columnHeader {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 10px 6px;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.columnHeaderDragging {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.columnDragHandle {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
margin-left: -4px;
|
|
color: var(--mantine-color-dimmed);
|
|
cursor: grab;
|
|
opacity: 0;
|
|
}
|
|
|
|
.columnHeader:hover .columnDragHandle {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.columnDragHandle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.columnTitleButton {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2px 6px;
|
|
margin: -2px -6px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.columnTitleButton:hover {
|
|
background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
|
}
|
|
|
|
.cardList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
gap: 8px;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-anchor: none;
|
|
padding: 4px 8px 8px;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
|
border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.25));
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cardDragging {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
|
|
}
|
|
|
|
.card:focus-visible {
|
|
outline: 2px solid var(--mantine-color-blue-5);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.cardTitle {
|
|
font-size: var(--mantine-font-size-sm);
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.cardUntitled {
|
|
color: var(--mantine-color-dimmed);
|
|
}
|
|
|
|
.count {
|
|
color: var(--mantine-color-dimmed);
|
|
font-size: var(--mantine-font-size-sm);
|
|
}
|
|
|
|
.addCard {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 10px;
|
|
color: var(--mantine-color-dimmed);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: var(--mantine-font-size-sm);
|
|
user-select: none;
|
|
}
|
|
|
|
.addCard:hover {
|
|
background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
|
}
|
|
|
|
.addCard:focus-visible {
|
|
outline: 2px solid var(--mantine-color-blue-5);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.cardDragPreview {
|
|
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));
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
|
padding: 8px 10px;
|
|
}
|