search

drbap / magicuser-theme-for-obsidian

MagicUser theme for Obsidian.md (light and dark themes)
MIT License
33 stars 0 forks source link

Suggestion: Numbered table colums and rows #38

Closed merlinuwe closed 5 months ago

merlinuwe commented 6 months ago

What do you think about optional numbered table columns and rows?

The result:

Nummerierte erste Spalte in Tabellen css-1716284865923.pdf

The markdown test file:

Nummerierte erste Spalte in Tabellen css.md

The corresponding css:


.theme-dark table  {
  counter-reset: rowNumber +1 colNumber -0;
}

.theme-light table  {
  counter-reset: rowNumber +1 colNumber -0;
}

table tr:not(:first-child)  {
  counter-increment: rowNumber;
}

/* Nummerierung der ersten SPALTE */
table td:first-child::before  {
  content: counter(rowNumber) ".";
  display: inline-block; /* Um die Breite zu beeinflussen */
  width: 1.5em; /* Festlegen einer festen Breite für die Nummer */
  height: 1em;
  text-align: center;
  font-size: 0.8em; /* Schriftgröße der ersten Spalte */
/* color: #dadada; keine Auswirkung, deshalb auskommentiert */

  color: #ffffff !important;  /* Damit better export plugin es lesbarer und druckbarer anzeigt */
  background-color: #1d1d1d !important;  /* Damit better export plugin es lesbarer und druckbarer anzeigt */
  padding-top: auto;
  padding-bottom: 0.1em;
  padding-left: auto;
  padding-right: auto;
  border-radius: 2px;
  margin-right: 0.3em;

  border: 1px solid rgba(255, 255, 255, 0.5);
}

table td:first-child  {
}

/* Nummerierung der ersten ZEILE */
table tr:first-child th:not(:first-child)::before  {
  counter-increment: colNumber;
  content: counter(colNumber, decimal) ".";

  display: inline-block; /* Um die Breite zu beeinflussen */
  width: 1em; /* Festlegen einer festen Breite für die Nummer */
  height: 1em;
  text-align: center;
  min-width: 1em;
  font-size: 0.75em;
  font-weight: normal;
  color: #ffffff !important;  /* Damit better export plugin es lesbarer und druckbarer anzeigt */
  background-color: #1d1d1d !important;  /* Damit better export plugin es lesbarer und druckbarer anzeigt */
  padding-top: 0.0em;
  padding-left: auto;
  padding-right: auto;
  border-radius: 2px;
  margin-right: 0.3em;
  margin-top: auto;
  margin-bottom: auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

  /* Änderung der zweiten, vierten, sechsten ... Tabellenüberschrift */
.markdown-rendered thead tr > th:nth-child(2n+2)  {
    border-top-width: var(--table-header-border-width);  /* unklar */
    border-color:  #363636;  /* Rahmen oben und unten der zweiten Überschrift */

    background-color: #3d3e41;  /* Hintergrund der zweiten Überschrift */

    border-right-color: #6c6c6c;  /* Rand der zweiten Überschrift rechts */

    border-top-color: #6c6c6c;  /* Rand der zweiten Überschrift rechts */
    border-bottom-color: #6c6c6c;  /* Rand der zweiten Überschrift rechts */
    color: #dadada;  /* Farbe der Spaltenüberschriften; gleich mit der Nummerierung */
}
/*############################*/
/* Innere Tabellenrahmen, aber nicht außen oben und nicht außen links */
.markdown-rendered td  {
    border-color: #6c6c6c;  /* Rahmen um die äußeren td; keine Auswirkung? */
    /* border-color: red !important; */  /* Rahmen um die äußeren td */
}

/* Rahmen um die äußeren td */

.markdown-rendered th,
.table-view-th  {
    /* border-color: #6c6c6c;  Keine Auswirkung? */
}

/* Kopfzeilen;  wirkt sich auf markdown und dataview Tabellen aus */
.markdown-preview-view th, 
.table-view-table > thead > tr > th, 
.markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th  {
    /* background-image: none;
    background-repeat: no-repeat;
    background-position: right, left; */
    /* padding-right: 21px;
    padding-left: 21px; */
    cursor: pointer;
    /* background: #1e1e1e !important; */
    border: 1px solid rgba(108, 108, 108, 0.5) !important;  /* Der Alphawert ist der Trick, um die Linie feiner als 1px erscheinen zu lassen. */
}

/* Rahmen um die Tabellenzellen der Tabelle */
.markdown-preview-view td  {
    border: 1px solid rgba(108, 108, 108, 0.5) !important; 

}
drbap commented 6 months ago

@merlinuwe Thanks for the suggestion and the snippet, my friend. It looks really good!

I am posting below some adjustments in order to make it work with other table presets (1 to 6) in MagicUser. I had to fix some things that will be available on the next theme update (accent color on tables, now it is fixed -> presets 4-6 in some preset themes).

Please check it out below, I did this really fast, I have to test it on dataview tables. Your snippet works really well, but some parts use border (and !important) that can interfere with other table adjustments (the table options menu - Style Settings and table presets). I used the same name for the counters, so it will be easier to edit and customize it the way you like it.

.theme-light table,
.theme-dark table  {
  counter-reset: rowNumber +1 colNumber 0;
  --mu-number-table-bg: #00000082;
}

table tr:not(:first-child)  {
  counter-increment: rowNumber;
}

table tr th::before,
table td::before  {
  float: left;
}

table tr th::after,
table td::after {
  clear: left;
}

table tr th::before,
table td::before  {
  display: block;
  width: 1.5em;
  min-width: 1.5em;
  margin-right: 0.5em;
  text-align: center;
  font-size: .8em;
  font-weight: normal;
  background-color: var(--mu-number-table-bg);
  color: #f1f1f1 !important; 
  border-radius: var(--radius-s);
}

table tr:hover td::before {
  --mu-number-table-bg: #0072d38f;
}

table tr td:first-child::before  {
  content: counter(rowNumber);
}

table tr th::before  {
  counter-increment: colNumber;
  content: counter(colNumber, decimal);
  background-color: #8f008f82;
  color: #f1f1f1;
}

When hovering on the table row, the number will be highlighted to make it easier to find it.

Still many things to test, but hopefully you will find it useful. Please let me know if you encounter any bug.

Congrats again on the snippet.

All the best

merlinuwe commented 6 months ago

Well choosen color, I like it. image

You're right: The points after the numbers are pointless. ;-)

In my testfile (see before; I also use dataview queries) it looks so:

image

image

The numbers could be a little bit more (1px?) to the bottom.

image

The numbers could be a little bit more (1px?) to the bottom.

image

The numbers could be a little bit more (1px?) to the bottom.

image

The numbers could be a little bit more (1px?) to the bottom.

image

Absolutely ok, that lists have no numbers.

image

The numbers could be a little bit more (1px?) to the bottom.

image

The numbers could be a little bit more (1px?) to the bottom.

Hovering works in every row.

merlinuwe commented 6 months ago

Tested with the light mode of MagicUser Moon.

Don't worry about this:

image

I think it has something to do with the plugin for making an image from the complete note. In Obsidian it looks ok.

image

image

The headline contrast is too weak.

--

image

The headline contrast is too weak.

As in the black theme: Try to set the numbers a little bit more to the bottom.

image

drbap commented 6 months ago

Thanks for the screenshots.

Here is an updated version. I added a class named "num-table" you can add this class only on the notes you want with numbered tables (please check the screenshot below the code - dataview tables).

.num-table:not(.cards) table  {
  counter-reset: rowNumber +1 colNumber 0;
  --mu-number-table-bg: #00000082;
}

.num-table:not(.cards) table tr:not(:first-child)  {
  counter-increment: rowNumber;
}

.num-table:not(.cards) table tr th::before,
.num-table:not(.cards) table td::before  {
  float: left;
  padding: 2px;
  padding-top: 4px;
}

.num-table:not(.cards) table tr th::after,
.num-table:not(.cards) table td::after {
  clear: left;
}

.num-table:not(.cards) table tr th::before,
.num-table:not(.cards) table td::before  {
  display: block;
  width: 1.5em;
  min-width: 1.5em;
  margin-right: 0.5em;
  text-align: center;
  font-size: .8em;
  font-weight: normal;
  background-color: var(--mu-number-table-bg);
  color: #f1f1f1 !important; 
  border-radius: var(--radius-s);
}

.num-table:not(.cards) table tr:hover td::before {
  --mu-number-table-bg: #0072d38f;
}

.num-table:not(.cards) table tr td:first-child::before  {
  content: counter(rowNumber);
}

.num-table:not(.cards) table tr th::before  {
  counter-increment: colNumber;
  content: counter(colNumber, decimal);
  background-color: #8f008f82;
  color: #f1f1f1;
}

test_numtable_01

test_numtable_02

I don't know why the table header is looking dark on your screenshot (light mode). Are you using any custom style (Style Settings)?

drbap commented 6 months ago

If you find any bug or you have suggestions to improve it, please let me know. Thanks

drbap commented 6 months ago

I added the column number in another color (purple) just to make it easier to see that these are table header numbers (columns)... I can use a blue color or let the user select any color (using Style Settings).

drbap commented 6 months ago

That hover color in light mode I will also have to check...

drbap commented 6 months ago

The table row hover in light mode for me (reading mode).

test_numtable_03

drbap commented 6 months ago

It would help a lot if you could post the Style Settings (export). Please see the image below:

test_numtable_04

Then I could test using the same colors.

drbap commented 6 months ago

Please download theme version 19.7.3. You can now customize the table header foreground color and background color of dataview tables using the Style Settings (it was working for normal non-dataview tables, but now it works for dataview tables too). Some minor adjustments to receive new classes to control tables (including your suggestion of numbered tables).

I didn't add the num-table class because it needs more testing. But hopefully I will add it in future updates.

merlinuwe commented 6 months ago

Here are my style settings:

{
  "minimal-style@@active-line-on": true,
  "minimal-style@@icon-color-hover@@dark": "#32FF00",
  "minimal-style@@checkbox-shape": "checkbox-square",
  "minimal-advanced@@cursor": "default",
  "minimal-style@@image-muted": 1,
  "minimal-style@@h1-l": false,
  "minimal-style@@h2-l": false,
  "minimal-style@@h3-l": false,
  "minimal-style@@h4-l": false,
  "minimal-style@@h5-l": false,
  "minimal-style@@h6-l": false,
  "minimal-style@@icon-color@@dark": "#C81C80",
  "minimal-style@@icon-color-active@@dark": "#009CE7",
  "minimal-style@@ax1@@dark": "#C81C80",
  "minimal-style@@callout-blend-mode": "normal",
  "minimal-style@@hl1@@dark": "#138D7E",
  "supercharged-links@@19a8-795d-color": "#1C1C1C",
  "supercharged-links@@a26d-077b-color": "#1C1C1C",
  "supercharged-links@@6f83-48af-color": "#1C1C1C",
  "supercharged-links@@6f83-48af-background-color": "#F98012",
  "supercharged-links@@c-6f83-48af-use-background": true,
  "supercharged-links@@a26d-077b-background-color": "#F98012",
  "supercharged-links@@c-a26d-077b-use-background": true,
  "supercharged-links@@c-19a8-795d-use-background": true,
  "supercharged-links@@19a8-795d-background-color": "#F98012",
  "supercharged-links@@df57-5760-color": "#FF0000",
  "supercharged-links@@df57-5760-weight": "bold",
  "supercharged-links@@df57-5760-background-color": "#FFFFE0",
  "supercharged-links@@c-df57-5760-use-background": true,
  "supercharged-links@@df57-5760-after": " ❗",
  "supercharged-links@@df57-5760-before": "❗ ",
  "minimal-style@@icon-color-focused@@dark": "#C81C80",
  "minimal-style@@list-spacing": 0.075,
  "minimal-style@@sidebar-tabs-style": "sidebar-tabs-index",
  "minimal-style@@file-header-visibility": "minimal-tab-title-visible",
  "minimal-advanced@@styled-scrollbars": true,
  "supercharged-links@@c-d1d9-2372-use-background": true,
  "supercharged-links@@d1d9-2372-background-color": "#2F4F4F",
  "supercharged-links@@d1d9-2372-color": "#FFFFFF",
  "supercharged-links@@2c27-3bd0-before": "\"\"",
  "minimal-style@@row-lines": true,
  "minimal-style@@col-lines": true,
  "minimal-style@@table-lines": false,
  "minimal-style@@row-alt": true,
  "minimal-style@@col-alt": true,
  "minimal-style@@table-tabular": false,
  "minimal-style@@table-numbers": false,
  "minimal-style@@table-nowrap": false,
  "minimal-style@@row-hover": true,
  "minimal-style@@callouts-style": "callouts-outlined",
  "minimal-style@@code-size": "15px",
  "minimal-style@@ui1@@dark": "#C81C80",
  "minimal-style@@minimal-unstyled-tags": false,
  "obsidian-execute-code@@code-output-text-color": "#49A3BF",
  "minimal-style@@file-header-justify": "left",
  "minimal-style@@title-color-inactive@@dark": "#C81C80",
  "minimal-style@@pdf-invert-dark": false,
  "obsidian-execute-code@@use-custom-output-color": true,
  "supercharged-links@@4f58-7ed8-color": "#000000",
  "supercharged-links@@4f58-7ed8-before": "○ ",
  "supercharged-links@@4f58-7ed8-weight": "initial",
  "supercharged-links@@c-4f58-7ed8-use-background": true,
  "supercharged-links@@4f58-7ed8-background-color": "#60FFCC",
  "supercharged-links@@820a-684b-before": "🤫",
  "supercharged-links@@c-820a-684b-use-background": true,
  "supercharged-links@@820a-684b-background-color": "#440000",
  "supercharged-links@@820a-684b-color": "#FF0000",
  "supercharged-links@@5205-1697-color": "#FFFFFF",
  "supercharged-links@@c-24cd-fb68-use-background": true,
  "supercharged-links@@24cd-fb68-background-color": "#00FF00",
  "supercharged-links@@24cd-fb68-color": "#000000",
  "supercharged-links@@5205-1697-before": "[PS] ",
  "supercharged-links@@5205-1697-weight": "normal",
  "supercharged-links@@c-6fcd-dd37-use-background": true,
  "supercharged-links@@6fcd-dd37-background-color": "#FF6033",
  "supercharged-links@@6fcd-dd37-color": "#1C1C1C",
  "supercharged-links@@6486-e1ee-before": "[Py] ",
  "supercharged-links@@6486-e1ee-color": "#FFD343",
  "supercharged-links@@6486-e1ee-background-color": "#1C3B56",
  "supercharged-links@@c-6486-e1ee-use-background": true,
  "supercharged-links@@5205-1697-background-color": "#0078D4",
  "supercharged-links@@c-5205-1697-use-background": true,
  "supercharged-links@@c-471d-9f55-use-background": true,
  "supercharged-links@@471d-9f55-background-color": "#193A63",
  "supercharged-links@@471d-9f55-color": "#FFFFFF",
  "supercharged-links@@879e-3a30-color": "#FF0000",
  "supercharged-links@@879e-3a30-weight": "bold",
  "supercharged-links@@879e-3a30-after": "!",
  "supercharged-links@@c-8f4b-eaf1-use-background": true,
  "supercharged-links@@8f4b-eaf1-background-color": "#FF7F50",
  "supercharged-links@@8f4b-eaf1-weight": "normal",
  "supercharged-links@@c-ac38-8ba7-use-background": true,
  "supercharged-links@@ac38-8ba7-background-color": "#FFFFBB",
  "supercharged-links@@af13-d158-background-color": "#006E94",
  "supercharged-links@@c-af13-d158-use-background": true,
  "supercharged-links@@af13-d158-color": "#FFFFFF",
  "minimal-style@@window-title-off": false,
  "minimal-style@@titlebar-text-color@@dark": "#000000",
  "minimal-style@@frame-icon-color@@dark": "#C81C80",
  "minimal-style@@max-col-width": "20em",
  "supercharged-links@@c-4091-e88b-use-background": true,
  "supercharged-links@@4091-e88b-background-color": "#67747E",
  "supercharged-links@@4091-e88b-color": "#FFFF00",
  "supercharged-links@@4091-e88b-before": "\\00A7 \\00A0",
  "minimal-advanced@@font-ui-smaller": 13,
  "minimal-advanced@@font-ui-small": 15,
  "minimal-style@@header-height": "40px",
  "minimal-style@@tabs-style": "tabs-default",
  "minimal-style@@ribbon-style": "ribbon-hidden",
  "minimal-style@@metadata-dividers": false,
  "supercharged-links@@e0ae-2cd1-decoration": "initial",
  "supercharged-links@@c-e0ae-2cd1-use-background": true,
  "supercharged-links@@e0ae-2cd1-weight": "normal",
  "supercharged-links@@e0ae-2cd1-color": "#000000",
  "supercharged-links@@c-6b1d-0353-use-background": true,
  "supercharged-links@@6b1d-0353-background-color": "#003E61",
  "supercharged-links@@c-a1a4-1504-use-background": true,
  "supercharged-links@@a1a4-1504-background-color": "#006E94",
  "supercharged-links@@a1a4-1504-color": "#FFFFFF",
  "supercharged-links@@e0ae-2cd1-background-color": "#F3B762",
  "supercharged-links@@c-b34e-7356-use-background": true,
  "supercharged-links@@3856-1328-background-color": "#708090",
  "supercharged-links@@c-3856-1328-use-background": true,
  "supercharged-links@@8f4b-eaf1-color": "#000000",
  "supercharged-links@@c-9545-3c61-use-background": true,
  "supercharged-links@@9545-3c61-background-color": "#FFFF00",
  "supercharged-links@@9545-3c61-color": "#000000",
  "supercharged-links@@ac38-8ba7-color": "#000000",
  "supercharged-links@@b34e-7356-color": "#000000",
  "supercharged-links@@3856-1328-color": "#DCDCDC",
  "supercharged-links@@19e9-cc7b-background-color": "#2E0146",
  "supercharged-links@@19e9-cc7b-color": "#FFC0CB",
  "supercharged-links@@19e9-cc7b-before": "☰ ",
  "supercharged-links@@19e9-cc7b-after": "\"\"",
  "minimal-style@@tx3@@dark": "#CECECE",
  "supercharged-links@@c-19e9-cc7b-use-background": true,
  "minimal-style@@frame-background@@dark": "#2E0146",
  "minimal-style@@titlebar-text-weight": 900,
  "minimal-style@@icon-muted": 1,
  "minimal-style@@folding-offset": 32,
  "minimal-style@@gutter-background@@dark": "#4C4C4C",
  "minimal-style@@line-number-color@@dark": "#DDDDDD",
  "minimal-style@@line-number-color-active@@dark": "#00FF00",
  "supercharged-links@@c-36a4-4d5c-use-background": true,
  "supercharged-links@@36a4-4d5c-background-color": "#F98012",
  "supercharged-links@@36a4-4d5c-color": "#000000",
  "minimal-style@@frame-background@@light": "#E6E6E6",
  "quick-explorer@@qe-obsidian-title": "qe-title-center",
  "quick-explorer@@qe-hide-breadcrumbs": false,
  "supercharged-links@@c-dbf7-4274-use-background": true,
  "supercharged-links@@dbf7-4274-background-color": "#98D982",
  "supercharged-links@@dbf7-4274-color": "#000000",
  "supercharged-links@@92d6-a462-before": "👥 ",
  "supercharged-links@@8b78-c2ef-background-color": "#C81C80",
  "supercharged-links@@c-8b78-c2ef-use-background": true,
  "supercharged-links@@6b1d-0353-color": "#FFFFFF",
  "magicuser-theme-for-obsidian@@mu-presets-themes": "magicuser-moon-theme",
  "magicuser-theme-for-obsidian@@mu-bg-image-overlay": 0,
  "magicuser-theme-for-obsidian@@mu-rainbow-folders": true,
  "magicuser-theme-for-obsidian@@mu-laser-active": false,
  "magicuser-theme-for-obsidian@@mu-laser-type": "mu-laser-type-line",
  "magicuser-theme-for-obsidian@@mu-laser-color": "mu-laser-pink",
  "magicuser-theme-for-obsidian@@mu-laser-top-value": 50,
  "magicuser-theme-for-obsidian@@mu-line-highlight-border": "line-highlight-border-pink",
  "magicuser-theme-for-obsidian@@mu-line-highlight-background": "line-highlight-background-purple",
  "magicuser-theme-for-obsidian@@mu-hover-underline": false,
  "magicuser-theme-for-obsidian@@mu-hover-underline-style": "mu-hover-underline-style-dashed",
  "magicuser-theme-for-obsidian@@mu-neon-mode": true,
  "magicuser-theme-for-obsidian@@mu-outline-neon-mode": false,
  "supercharged-links@@c-66e6-befd-use-background": true,
  "supercharged-links@@66e6-befd-background-color": "#4285F4",
  "supercharged-links@@66e6-befd-color": "#FBBC04",
  "magicuser-theme-for-obsidian@@mu-underline-headings": false,
  "magicuser-theme-for-obsidian@@mu-neon-mode-glow-value": 0.5,
  "magicuser-theme-for-obsidian@@text-highlight-bg@@dark": "#C81C8088",
  "magicuser-theme-for-obsidian@@mu-presets-tables": "table2",
  "magicuser-theme-for-obsidian@@mu-reading-glow": "reading-glow-blue",
  "magicuser-theme-for-obsidian@@mu-warm-screen-mode": 0.5,
  "magicuser-theme-for-obsidian@@mu-distraction-free-mode": false,
  "magicuser-theme-for-obsidian@@mu-hide-status-bar": true,
  "magicuser-theme-for-obsidian@@mu-folder-color-hue-value": 360,
  "magicuser-theme-for-obsidian@@mu-file-color-hue-value": 206,
  "magicuser-theme-for-obsidian@@mu-hide-folders": false,
  "magicuser-theme-for-obsidian@@mu-hide-file-icons": false,
  "supercharged-links@@b3cf-4649-background-color": "#0094C7",
  "supercharged-links@@c-b3cf-4649-use-background": true,
  "supercharged-links@@b3cf-4649-color": "#FFFFFF",
  "supercharged-links@@b34e-7356-background-color": "#DEBD00",
  "supercharged-links@@19a8-795d-before": "[M] ",
  "supercharged-links@@a26d-077b-before": "[M2] ",
  "supercharged-links@@6f83-48af-before": "[M3] ",
  "supercharged-links@@6fcd-dd37-weight": "initial",
  "supercharged-links@@6fcd-dd37-decoration": "initial",
  "supercharged-links@@1107-c27e-before": "🚮",
  "supercharged-links@@c-1107-c27e-use-background": true,
  "supercharged-links@@1107-c27e-background-color": "#2A2A2A",
  "supercharged-links@@1107-c27e-color": "#66BE00",
  "supercharged-links@@7234-4fb1-before": "🤫",
  "supercharged-links@@c-7234-4fb1-use-background": true,
  "supercharged-links@@7234-4fb1-background-color": "#440000",
  "supercharged-links@@7234-4fb1-color": "#FF0000",
  "supercharged-links@@93f0-3fad-before": "🟦🦷",
  "supercharged-links@@93f0-3fad-background-color": "#004E7D",
  "supercharged-links@@c-93f0-3fad-use-background": true,
  "supercharged-links@@93f0-3fad-color": "#FFFFFF",
  "sticky-heading@@sticky-heading-shadow-level": "none",
  "sticky-heading@@sticky-heading-show-level": "block",
  "supercharged-links@@c94e-e7d1-background-color": "#67747E",
  "supercharged-links@@c-c94e-e7d1-use-background": true,
  "supercharged-links@@8b78-c2ef-color": "#2A2A2A",
  "supercharged-links@@6e7a-a941-before": "🤫",
  "supercharged-links@@6e7a-a941-color": "#FF0000",
  "supercharged-links@@c-6e7a-a941-use-background": true,
  "supercharged-links@@6e7a-a941-background-color": "#40010F",
  "supercharged-links@@58b8-616b-color": "#FF0000",
  "supercharged-links@@c-58b8-616b-use-background": true,
  "supercharged-links@@58b8-616b-background-color": "#40010F",
  "supercharged-links@@5461-c7c5-color": "#FF0000",
  "supercharged-links@@c-5461-c7c5-use-background": true,
  "supercharged-links@@5461-c7c5-background-color": "#40010F",
  "supercharged-links@@696e-8acd-color": "#FF0000",
  "supercharged-links@@c-696e-8acd-use-background": true,
  "supercharged-links@@696e-8acd-before": "🤫",
  "supercharged-links@@696e-8acd-background-color": "#40010F",
  "supercharged-links@@5461-c7c5-before": "🤫",
  "supercharged-links@@58b8-616b-before": "🤫",
  "note-toolbar@@cg-nt-tbar-border-radius": 4,
  "magicuser-theme-for-obsidian@@mu-cards-interface": true,
  "magicuser-theme-for-obsidian@@mu-slanted-breadcrumb": false,
  "magicuser-theme-for-obsidian@@mu-hide-folder-open-area": false,
  "magicuser-theme-for-obsidian@@mu-active-line-zoom": false,
  "magicuser-theme-for-obsidian@@mu-compact-prompt": false,
  "magicuser-theme-for-obsidian@@mu-checkbox-type": "mu-checkbox-square",
  "note-toolbar@@cg-nt-item-bg-color-hover@@dark": "#180F34",
  "note-toolbar@@cg-nt-item-button-bg-color@@dark": "#000000",
  "note-toolbar@@cg-nt-tbar-border-color@@dark": "#6487A4",
  "magicuser-theme-for-obsidian@@mu-scrollbar-thumb-bg@@dark": "#A300A382",
  "magicuser-theme-for-obsidian@@mu-scrollbar-thumb-bg-hover@@dark": "#D300D382",
  "magicuser-theme-for-obsidian@@mu-scrollbar-thumb-size-value": 10,
  "magicuser-theme-for-obsidian@@mu-scrollbar-width-value": 22,
  "magicuser-theme-for-obsidian@@mu-scrollbar-track-bg@@dark": "#000B14",
  "magicuser-theme-for-obsidian@@mu-scrollbar-track-bg-hover@@dark": "#000B149C",
  "obsidian-scroll-to-top-plugin@@scroll-to-top-bottom": 12,
  "obsidian-scroll-to-top-plugin@@scroll-to-cursor-left": 2.55,
  "obsidian-scroll-to-top-plugin@@scroll-to-top-left": 2.55,
  "obsidian-scroll-to-top-plugin@@scroll-to-bottom-left": 2.55,
  "obsidian-scroll-to-top-plugin@@scroll-to-bottom-bottom": 6.6,
  "obsidian-scroll-to-top-plugin@@scroll-to-cursor-bottom": 9.3
}
merlinuwe commented 6 months ago

Here is a first screenshot of dark mode table color test with the recent release 19.7.3. And your css from yesterday. (Later, I'll test with your latest css.)

I use these colors:

image

This is the result with my testfile with dataview tables:

MagicUser Moon dark mode

image

MagicUser Moon light mode

image

First impressions:

markdown tables

Even colors (2, 4, 6, ...) are not used.

The (lightgreen) table header background color is not used.

The (orange) table row background color (odd) is not used.

dataview tables

Even and odd colors are not used.

There are no outer borders around the tables.

both

The colors and sizes of the numbers in the first row in markdown tables compared with dataview tables are not the same.

I think, the font sizes of markdown tables compared with dataview tables should be the same. Better: They should look the same.

merlinuwe commented 6 months ago

Here is a test result with the recent release 19.7.3 and your css from your latest css from ~ 9 hours ago with class named "num-table".)

No screenshot because of a side effect with the export image plugin (https://github.com/zhouhua/obsidian-export-image):

image

If I delete cssclasses: numtable,

image

the window is shown as usual:

image

Here is a screenshot with deleted cssclasses: numtable from YAML front matter:

image

Now, the numbers are perfectly centered in their boxes.

The numbers in markdown tables have all the same dimensions, which I prefer.

image

The numbers in dataview tables have different dimensions. In the first row, they are too big.

image

The colors in the even/odd rows only change on hover as intended.

merlinuwe commented 6 months ago

What can I do to use your latest css in all of my notes (without adding cssclasses: numtable)?

drbap commented 6 months ago

Thanks for the screenshots and the detailed information. Much appreciated. I will add the option to the theme to make the num-table available to all notes (tables). You will have both options (add it to the notes you want with cssclasses and the option to activate it globally). I hope to make it available as a toggle (you can activate or deactivate it using a shortcut key or command palette). So you don't have to keep adding num-table class.

I will have to check the table row colors that are not appearing. I can select any row color for markdown tables (odd/even). Maybe it is the preset... I will check it out.

Well, here is the list so far, according to your post/suggestions (only testing with the most recent css will be considered). Please add items to the list as needed (if I missed any):

Table improvements

Markdown tables:

  1. Even colors (2, 4, 6, ...) are not used (preset table selected).
  2. Table header background color is not used (preset table selected).

[!important] Question: Could you try to set the th and table row colors for markdown tables without the preset table selected (option "Default table" selected)?

You wrote table row background color (odd) is not used. But they are appearing in purple color. Maybe it is other thing, please let me know.

Dataview tables

  1. Even and odd colors are not used.
  2. There are no outer borders around the tables.

Md and dv tables (numbering size and font size)

  1. Make the numbering the same size (table columns - th and rows)

I didn't understand well when you said about the numbering colors. Could you explain it better? Maybe because it is a transparent purple, I will fix it, maybe add the option so the user can customize it using Style Settings.

  1. Same font sizes of md tables and dv tables.

  2. Test table presets 1-6 in markdown and dv tables (consistent look).

[!note] When I made the dataview table layout for the theme, my initial goal was to have a different look (md tables and dv tables). The theme did not have preset tables at that time, I will try to make them consistent (markdown and dataview tables). This will take longer.

Please let me know if I forgot to add any item, because this will take some time, so I will try to fix them all together after the list is completed. Thanks

drbap commented 6 months ago

Shorter version of the list:

Markdown tables

  1. Even colors (2, 4, 6, ...) are not used (preset table selected).

  2. Table header background color is not used (preset table selected).

Dataview tables

  1. Even and odd colors are not used.

  2. There are no outer borders around the tables.

Md and dv tables (numbering size and font size)

  1. Make the numbering the same size (table columns - th and rows)

  2. Same font sizes of md tables and dv tables.

  3. Test table presets 1-6 in markdown and dv tables (consistent look).

drbap commented 6 months ago

Happy to say that all 7 items on the list are ready (fixed/adjusted). Further testing now.

Stay tuned =)

drbap commented 6 months ago

Please check theme version 19.9.1. Let me know if it is working well for you.

I added 2 new preset tables (numbered table and plain data). Please test the features (those 7 items on the list, if possible). You can now customize the number colors (row number and column number). I selected neutral colors as default, but you can select any color you want (Style Settings -> Tables menu).

The numbered table preset, when selected, will add the numbering to all tables in your notes. No need to add it to cssclasses.

I had to redo many parts of the tables layout. Now I think they are consistent (markdown and dataview tables). I tested on Windows and Linux.

Thanks for the suggestions and testing. This update took really a good amount of time, I had to adapt the tables layout with many other features, including calendars, tables -> cards, inline comments on tables, preset tables etc.

EDIT: I fixed a calendar bug when using numbered table preset (so please test the 19.9.1). It is already fixed for Calendar, dataview calendars and Full Calendar plugins.

If it is working well for you, you can close this issue.

All the best

merlinuwe commented 6 months ago

I test with 19.9.1.

Two table presets have lines between the rows: preset table 2, 4.

This contradicts this setting:

image

Markdown tables have bigger numbers than dataview tables. Suggestion: let them look like the dataview tables format.

image

Disable table row hover doesn't work with markdown tables, regardless of the preset.

"Preset plain data" does not affect markdown tables (they hold their colors).

image

Holding the colors for the headings and the border at the bottom of the headings is ok.

preset table 1, 6: How can one change the black background?

image

Changing the "Table body text foreground color" does not affect markdown tables.

image

drbap commented 6 months ago

Well I will quote your post and try to answer to each suggestion. Next

drbap commented 6 months ago

Point 1

Two table presets have lines between the rows: preset table 2, 4.

This contradicts this setting:

image

Comment: They are table presets. Hopefully the table rows (odd/even) colors and table headers are using the colors you selected. If you select a custom border (border 0) using other Style Settings theme options and then change the preset table and nothing happens, it really looks strange to me (bug) also pointless to have a preset, in my opinion. The goal of the presets is to quickly change the appearance of tables, because using the available theme table settings you can create any preset you want, except presets 1, 4, 5 and 6 (and the numbered tables). Preset 1 and 6 are for column striped tables (they will also keep the odd/even rows colors in odd columns).

Therefore I had to keep the borders in some presets (independently of the proper border controller), because the user can quickly have a table with borders and without borders, especially when using cssclasses on individual notes.

This point I can't fix because it is not a bug. I had to keep it as a feature to quickly alternate the appearance of tables (cssclasses).

Point 2: Suggestion: let them look like the dataview tables format.

Markdown tables have bigger numbers than dataview tables. Suggestion: let them look like the dataview tables format.

image

Comment: I will check it out and see what I can do.

Point 3

Disable table row hover doesn't work with markdown tables, regardless of the preset.

"Preset plain data" does not affect markdown tables (they hold their colors).

image

Comment: I can disable the table row hover (row highlight when hovering) using the usual turn on/off switch. I can't disable the number hover (numbered table presets, this was intended), but that table row highlight is disabled here. Please check it out if there is any table plugin installed that uses hover effect. Anyway. I will check it out again.

[!Note] Preset plain data is closer to the older look of dataview tables (theme). If you don't select any table rows custom color, you can still have a similar dataview table layout of older versions of the theme. So this is intended. It will affect dataview tables.

Point 4

Holding the colors for the headings and the border at the bottom of the headings is ok.

preset table 1, 6: How can one change the black background?

image

Comment: This is a column stripped table, it will use the secondary background color of the theme (on this case the dark blue, almost black indeed). I can let the user customize it. This is not a bug.

Point 5

Changing the "Table body text foreground color" does not affect markdown tables.

image

Comment: Please check it out again if you are using any table plugin setting the color of table text. Just tested it again and it works well here (markdown and dataview tables).

The body text looks green on both screenshots, but the issue I notice is the table header color of the number (that 1 is gray)... it is not yellow in the first table of the image (probably the markdown table). Could you confirm this? Thanks.

I'll wait to see your comments before continuing to work on the tables code. Especially since some features work here for me (Windows and Linux) and are not working as expected on your computer.

drbap commented 6 months ago

Point 5: Check it out how it is working for me.

test_numtable_colors

I can change the color of th and table body text normally. The numbers will have the same color selected.

merlinuwe commented 6 months ago

It seems, that css settings for an other plugin (better export pdf, export image plugin or pandoc, ... ) had interfered the testing, sorry for that.

I aggree to your comments.

Point 2: For my taste it is better to have the same styling for all tables (markdown and dataview). One can see by the number (0), if it is a dataview table.

image

Point 4: Customizing this would be useful, because the default value is very dark and breaks the visuality.

Point 5: These are the set colors:

image image

These are the resulting markdown table colors:

image

Does that answer your question?

drbap commented 6 months ago

Thank you very much for the detailed screenshots. Well, I think the colors selected for the table are correct (th background, table rows odd/even, table header foreground color and table body text colors are ok as well).

I agree with Point 2. I will try to make them same size. But remember some plugins can really change table appearance defined by any theme.

So here is the new list of things to improve/implement:

  1. ~Make numbering the same size on markdown tables and dataview tables (numbered tables).~ EDIT: It is working as expected.
  2. ~Add the option to control table header font size, if the user wants to increase th size to read better the titles.~ EDIT: Removed this feature.
  3. Point 4 - Even columns color. Add the option to customize column stripped tables (that dark area of even columns when using dark mode) -> light and dark modes.

The next theme update will have some new features to control headings display (more typography options). My goal is to release the update as soon as these 3 items are implemented. Stay tuned!

All the best

drbap commented 6 months ago

Please check it out because the numbers are exactly the same size on markdown and dataview tables. There is no need to change the code. Maybe it is a plugin that is changing the size of table headers on your computer.

test_numtable_05

drbap commented 6 months ago

So I will remove items 1 and 2. There is no need to add this option to control table header font size, in my opinion.

I am working on the column stripped tables preset 1 and 6 now.

drbap commented 6 months ago

Ok implemented item 3 -> Point 4. It will be available on the next update.

  1. Point 4 - Even columns color. Add the option to customize column stripped tables (that dark area of even columns when using dark mode) -> light and dark modes.
drbap commented 6 months ago

Update should be released today or tomorrow. Thanks

merlinuwe commented 6 months ago

I'm already looking forward to it. Thank you very much.

drbap commented 6 months ago

It will have some cool typographic features in addition to your table suggestions and some other theme adjustments. Headings can be really fully customized. Full control over the appearance of headings. You will just have to select a compatible font with different weights (light to bold) because you will be able to refine to thin -> bold font using sliders for H1 to H6 independently and select individual fonts for each heading (H1-H6).

If you activate neon mode, those thinner(light weight) headings look really cool especially when they are mixed with other weights.

drbap commented 6 months ago

Please check theme version 20.0.0. Let me know if it is working well for you.

All the best

merlinuwe commented 6 months ago

First impressions and feedback.

  1. So cool...

image

  1. Ahh, the pink #c81c80 color comes from my accent color.

image

  1. The problem with the too dark colums is gone, a very good solution.

image

  1. The numbers of the first row are indented to the right. By design or was it not intended? I like it better if all the numbers in the first column are exactly one below the other. The other numbers should also be a little more to the left with the headings.

image

  1. Here is the output made with export image plugin. The numbers are lost.

The same issue is with better export pdf plugin.

Is this something you can adjust or is this a job for the people who make these plugins?

image

drbap commented 6 months ago

Thank you very much for testing and the valuable feedback 👍

Could you show the source mode of notes with markdown or dataview tables where the numbers are indented to the right? The default is to the left. I think it is the code used to align the column. I haven't changed any part of the code that controls this alignment (code and/or plugin).

I can try to check the plugins you are using to control the tables. Which one do you think is causing this? I will check it out.

drbap commented 6 months ago

4. The numbers of the first row are indented to the right. By design or was it not intended? I like it better if all the numbers in the first column are exactly one below the other. The other numbers should also be a little more to the left with the headings.

Like I said above. I would like to check the source mode of this table. I think the th is centered. I don't know it is plugin-related or if is the code using the markdown code to center the th text using :---:.

The default is aligned to the left.

drbap commented 6 months ago

9. Here is the output made with export image plugin. The numbers are lost.

The same issue is with better export pdf plugin.

Is this something you can adjust or is this a job for the people who make these plugins?

I'll check this out tomorrow and see what I can do. I hope be able to fix this (I will try).

merlinuwe commented 6 months ago

This is the source code 

## 1 Testdaten

| ID  | Beschreibung          | Betrag (€) | Datum       | Uhrzeit   | Menge | Status      | Kategorie       |
|-----|-----------------------|-----------:|-------------|:---------:|------:|-------------|-----------------|
| 1   | Einkauf               |       45,90| 2024-05-24  | 14:30     |     3 | Abgeschlossen| Lebensmittel    |
| 2   | Miete                 |      850,00| 2024-05-01  | 08:00     |     1 | Überfällig   | Wohnen          |
| 3   | Gehalt                |     2500,00| 2024-05-20  | 09:00     |     1 | Eingegangen  | Einkommen       |
| 4   | Versorgungsrechnung   |      120,75| 2024-05-15  | 10:00     |     2 | Bezahlt      | Nebenkosten     |
| 5   | Restaurantbesuch      |       65,50| 2024-05-18  | 19:45     |     2 | Abgeschlossen| Unterhaltung    |
| 6   | Fahrtkosten           |       35,00| 2024-05-22  | 07:30     |     5 | Offen        | Transport       |
| 7   | Stromrechnung         |       75,20| 2024-05-05  | 11:00     |     1 | Überfällig   | Nebenkosten     |
| 8   | Internetgebühr        |       50,00| 2024-05-10  | 12:00     |     1 | Bezahlt      | Kommunikation   |
| 9   | Büromaterial          |       23,45| 2024-05-17  | 16:00     |     4 | Abgeschlossen| Arbeitsbedarf   |
| 10  | Fitnessstudio         |       40,00| 2024-05-25  | 18:00     |     1 | Offen        | Freizeit        |

of that rendered table in my TestVault:

image

and that rendered table in my productive Vault:

image

The problem is, that every table is rendered with the indention in my productive vault.

This is the md file which I use for testing.

---
aliases:
  - css
  - table
  - Tabelle
  - Nummerierung
  - dataview
  - group
  - export
  - image
  - plugin
tags:
  - css
  - table
  - Tabelle
  - Nummerierung
  - dataview
  - group
  - export
  - image
  - plugin
filename: Nummerierte erste Spalte in Tabellen css
erstellt: Freitag, 19. April 2024, 19:32:24 Uhr
geändert: Freitag, 24. Mai 2024, 19:27:16 Uhr
---

## 1 Testdaten

| ID  | Beschreibung          | Betrag (€) | Datum       | Uhrzeit   | Menge | Status      | Kategorie       |
|-----|-----------------------|-----------:|-------------|:---------:|------:|-------------|-----------------|
| 1   | Einkauf               |       45,90| 2024-05-24  | 14:30     |     3 | Abgeschlossen| Lebensmittel    |
| 2   | Miete                 |      850,00| 2024-05-01  | 08:00     |     1 | Überfällig   | Wohnen          |
| 3   | Gehalt                |     2500,00| 2024-05-20  | 09:00     |     1 | Eingegangen  | Einkommen       |
| 4   | Versorgungsrechnung   |      120,75| 2024-05-15  | 10:00     |     2 | Bezahlt      | Nebenkosten     |
| 5   | Restaurantbesuch      |       65,50| 2024-05-18  | 19:45     |     2 | Abgeschlossen| Unterhaltung    |
| 6   | Fahrtkosten           |       35,00| 2024-05-22  | 07:30     |     5 | Offen        | Transport       |
| 7   | Stromrechnung         |       75,20| 2024-05-05  | 11:00     |     1 | Überfällig   | Nebenkosten     |
| 8   | Internetgebühr        |       50,00| 2024-05-10  | 12:00     |     1 | Bezahlt      | Kommunikation   |
| 9   | Büromaterial          |       23,45| 2024-05-17  | 16:00     |     4 | Abgeschlossen| Arbeitsbedarf   |
| 10  | Fitnessstudio         |       40,00| 2024-05-25  | 18:00     |     1 | Offen        | Freizeit        |

## 2 Tabelle *mit* erster Spalte

| Nr. | Produkte   | Preise |
| --- | ---------- | ------:|
|     | Uhr        | 3,95 € |
|     | Füller     | 1,95 € |
|     | Smartphone | 2,95 € |
|     | Uhr        | 3,95 € |
|     | Füller     | 1,95 € |
|     | Smartphone | 2,95 € |
|     | Uhr        | 3,95 € |
|     | Füller     | 1,95 € |
|     | Smartphone | 2,95 € |
|     | Uhr        | 3,95 € |
|     | Füller     | 1,95 € |
|     | Smartphone | 2,95 € |

## 3 Tabelle *ohne* erste Spalte

| Eigenschaften                             |
| ----------------------------------------- |
| Homage: Submariner                        |
| Model: PD-1639                            |
| Movement: Seiko NH35A                     |
| Water resistance: 100 M (10ATM)           |
| Bezel rotation: Yes                       |
| Glass material: Sapphire Glass            |
| Bezel material: Ceramic                   |
| Strap: Stainless Steel                    |
| Case material: Stainless Steel            |
| Bottom material: Sapphire Glass           |
| Case thickness: 13 MM                     |
| Case diameter: 43 MM                      |
| Strap width: 20 MM                        |
| Weight: 162 G                             |
| Clasp: Folding Clasp (with Safety Buckle) |

## 4 Dataview-Tabelle mit erster leerer Spalte

```dataview
TABLE without ID
"" AS "",
file.link AS "Dateien",
tags AS "Tags"
FROM "BBZ/Schulisches mein eKb"
WHERE 
contains(tags, "Fach")
AND
contains(BG, "") = true

5 Dataview-Tabelle ohne erste leere Spalte

TABLE without ID
file.link
FROM "BBZ/Schulisches mein eKb"
WHERE 
contains(tags, "Fach")
AND
contains(BG, "") = true
SORT file.link ASC

6 Listen sind nur ohne Nummern möglich

LIST
rows.file.link
FROM "BBZ/Schulisches mein eKb"
WHERE
contains(tags, "Fach")
AND
contains(BG, "") = true
SORT file.link ASC

Group by BG

7 Gruppierte Tabellen

TABLE
rows.file.link AS "Datei(en)"
FROM "BBZ/Schulisches mein eKb"
WHERE
contains(tags, "Fach")
AND
contains(BG, "") = true
SORT file.link ASC
GROUP by BG

8 FW oben, HH unten, CTA ganz unten

TABLE
rows.file.link AS "Klassen"
FROM "BBZ/Schulisches mein eKb"
WHERE
contains(Bl, "Hb") AND
contains(tags, "Fach")
AND
contains(BG, "") = true
SORT file.link ASC
GROUP by BG AS "Hb"
sort BG desc
TABLE
rows.file.link AS "Klassen"
FROM "BBZ/Schulisches mein eKb"
WHERE
contains(Bl, "Cb") AND
contains(tags, "Fach")
AND
contains(BG, "") = true
SORT file.link ASC
GROUP by BG AS "Cb"
sort BG DESC

%%## 8 Verbesserungsmöglichkeiten

Die Plugins https://github.com/zhouhua/obsidian-export-image und [[Plugin - Better Export PDF]] auf die Ausgabe hin mit dem jeweiligen Theme testen.%%

%%## 9 export image plugin

Mit dem export image plugin kann man solche Bilder aus einer Notiz erzeugen:

![[Nummerierte_erste_Spalte_in_Tabellen_css.png]]%%

9 Query

tag:account
print("Hello", 1)


I deactivated/reactivated each css file and each plugin one by one. When I deactive style settings plugin, the test file in the TestVault looks as so:

![image](https://github.com/drbap/magicuser-theme-for-obsidian/assets/4138869/dfd0cfaf-a871-403c-9104-bb74e7b46d16)

and in the productive vault as so:

![image](https://github.com/drbap/magicuser-theme-for-obsidian/assets/4138869/819f7880-9e55-4750-9c04-e5573243afdf)
merlinuwe commented 6 months ago

I deactivated/reactivated each css file and each plugin one by one. When I deactive style settings plugin, the test file in the TestVault looks as so:

image

and in the productive vault as so:

image

merlinuwe commented 6 months ago

Found it!

The obsidian sortable plugin makes the ident.

https://github.com/alexandru-dinu/obsidian-sortable

Sadly, it sorts the tables ...

drbap commented 6 months ago

Found it!

The obsidian sortable plugin makes the ident.

https://github.com/alexandru-dinu/obsidian-sortable

Sadly, it sorts the tables ...

Thanks for the screenshots. I will check if the plugin uses a CSS file. If everything is done using JavaScript at runtime, I can't control it (unrelated to the theme). But if it uses a class in its styles.css, maybe I can add a snippet to control that.

Well, I am glad you found the cause.

drbap commented 6 months ago

Another option is to ask the plugin developer to add an option (plugin's settings tab) to display the table without formatting it (or adding styles to table header, indentation, etc).

merlinuwe commented 6 months ago

Another option is to ask the plugin developer to add an option (plugin's settings tab) to display the table without formatting it (or adding styles to table header, indentation, etc).

"This repository has been archived by the owner on Mar 12, 2024. It is now read-only."

But I found a solution: It its styles.css there was a padding-left: 21px;, which I commented out. ;-)

.theme-light {
    --arrows-up: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cpath d='M6.5 4l4-4 4 4z'/%3E%3C/svg%3E");
    --arrows-down: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cpath d='M14.5 0l-4 4-4-4z'/%3E%3C/svg%3E");
}

.theme-dark {
    --arrows-up: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cpath fill='grey' d='M6.5 4l4-4 4 4z'/%3E%3C/svg%3E");
    --arrows-down: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cpath fill='grey' d='M14.5 0l-4 4-4-4z'/%3E%3C/svg%3E");
}

.markdown-preview-view th,
.table-view-table > thead > tr > th,
.markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th {
    background-image: none;
    background-repeat: no-repeat;
    background-position: right, left;
    padding-right: 21px; 
    /*  padding-left: 21px; So., 2024-05-26, 18:07:56 Uhr: entfernt, wegen Einrückung im magicUser theme; Nummerierte Tabellen erhalten eine unerwünschte Einrückung. */
    cursor: pointer;
}

th[sortable-style="sortable-asc"] {
    background-image: var(--arrows-up) !important;
}

th[sortable-style="sortable-desc"] {
    background-image: var(--arrows-down) !important;
}
drbap commented 6 months ago

Congrats 👍 . There is also a padding-right property. But if it is working well for you (tables), it is fixed. Great job on finding the cause of the issue.

drbap commented 6 months ago

Let me know if you find any bug related to the update (tables/numbered tables).

If it is working well, you can close this issue here.

Thanks again for the suggestions and detailed feedback/testing. If you have other suggestions, just open another issue.

All the best

merlinuwe commented 5 months ago

You know, that you are the best? ;-)

Thanks a lot for your engagement. I'm impressed, again.

I'll close this issue.

drbap commented 5 months ago

Thank you so much, my friend.

Great suggestions and feedback. If you have other suggestions or find any bug, please just let me know.

All the best