mirror of
https://github.com/moranrs/table-master.git
synced 2026-07-22 06:53:11 +00:00
204 lines
5.6 KiB
CSS
204 lines
5.6 KiB
CSS
/* ===== Floating toolbar ===== */
|
|
.tm-floating-toolbar {
|
|
/* Position is set imperatively by the view plugin; we mount on <body> and
|
|
* always switch to `position: fixed` so transformed editor ancestors
|
|
* cannot anchor the toolbar to themselves. */
|
|
position: fixed;
|
|
/* Some Obsidian themes bump table-widget z-index up into the 30-40s; keep
|
|
* the toolbar above any of them so it's never visually buried. */
|
|
z-index: 100;
|
|
pointer-events: auto;
|
|
/* Stack functional groups vertically — each group becomes its own row.
|
|
* The user explicitly asked for this layout so the toolbar is compact
|
|
* and not stretched across the full editor width. */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 2px;
|
|
padding: 4px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
font-size: var(--font-ui-smaller);
|
|
user-select: none;
|
|
}
|
|
|
|
.tm-floating-toolbar .tm-group {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1px;
|
|
padding: 2px 3px;
|
|
/* Visual separator between vertically-stacked groups. */
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tm-floating-toolbar .tm-group:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tm-floating-toolbar button.tm-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 26px;
|
|
height: 26px;
|
|
padding: 0 6px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tm-floating-toolbar button.tm-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tm-floating-toolbar button.tm-btn.is-active {
|
|
background: var(--background-modifier-active-hover);
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.tm-floating-toolbar button.tm-btn .tm-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* ===== Modal grid editor ===== */
|
|
.tm-modal .modal-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.tm-grid-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.tm-grid-toolbar button {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.tm-grid-wrap {
|
|
max-height: 60vh;
|
|
overflow: auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
table.tm-grid {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
table.tm-grid th,
|
|
table.tm-grid td {
|
|
border: 1px solid var(--background-modifier-border);
|
|
padding: 4px 8px;
|
|
min-width: 80px;
|
|
vertical-align: top;
|
|
position: relative;
|
|
}
|
|
|
|
table.tm-grid th {
|
|
background: var(--background-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
table.tm-grid td.tm-selected,
|
|
table.tm-grid th.tm-selected {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: -2px;
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
table.tm-grid .tm-cell-edit {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 1.4em;
|
|
outline: none;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.tm-grid-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
/* ===== Reading view & Live Preview rebuilt tables ===== */
|
|
/* When the post-processor / live-preview view plugin rewrites a table,
|
|
* Obsidian's widget-scoped CSS (e.g. `.cm-table-widget td`) no longer matches
|
|
* because we replace `<table>`'s children. Re-establish the cell metrics here
|
|
* so the rebuilt table never looks more cramped than the original GFM render.
|
|
*/
|
|
table.tm-rendered {
|
|
border-collapse: collapse;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
table.tm-rendered caption {
|
|
caption-side: top;
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
padding: 4px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
table.tm-rendered th,
|
|
table.tm-rendered td {
|
|
padding: var(--table-cell-padding, 6px 12px);
|
|
border: 1px solid var(--background-modifier-border);
|
|
vertical-align: top;
|
|
line-height: var(--line-height-normal, 1.5);
|
|
}
|
|
|
|
table.tm-rendered th {
|
|
background: var(--background-secondary);
|
|
font-weight: var(--font-semibold, 600);
|
|
}
|
|
|
|
table.tm-rendered tbody + tbody {
|
|
border-top: 2px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Highlight merged anchors so the user can spot the merged region at a
|
|
* glance. The legacy `.tm-merged-anchor` class is kept for backward compat,
|
|
* but the actual marker on rendered tables is `data-tm-merge="anchor"`
|
|
* (set by Live Preview) and the `[rowspan]` / `[colspan]` attributes
|
|
* (set by Reading-view rebuild + grid editor). */
|
|
table.tm-rendered td.tm-merged-anchor,
|
|
table.tm-rendered th.tm-merged-anchor,
|
|
table.tm-rendered td[rowspan]:not([rowspan="1"]),
|
|
table.tm-rendered th[rowspan]:not([rowspan="1"]),
|
|
table.tm-rendered td[colspan]:not([colspan="1"]),
|
|
table.tm-rendered th[colspan]:not([colspan="1"]),
|
|
table td[data-tm-merge="anchor"],
|
|
table th[data-tm-merge="anchor"] {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
/* Vertically center the text inside any cell that spans more than one row.
|
|
* Covers all three renderers: Reading view (`table.tm-rendered td[rowspan]`),
|
|
* Live Preview (anchor cells flagged with `data-tm-merge="anchor"`), and the
|
|
* modal grid editor (`table.tm-grid`). Merging up / down should feel
|
|
* symmetric — the merged text sits between the rows it now spans. */
|
|
table.tm-rendered td[rowspan]:not([rowspan="1"]),
|
|
table.tm-rendered th[rowspan]:not([rowspan="1"]),
|
|
table td[data-tm-merge="anchor"][rowspan]:not([rowspan="1"]),
|
|
table th[data-tm-merge="anchor"][rowspan]:not([rowspan="1"]),
|
|
table.tm-grid td[rowspan]:not([rowspan="1"]),
|
|
table.tm-grid th[rowspan]:not([rowspan="1"]) {
|
|
vertical-align: middle;
|
|
}
|