help: can anyone to share the CSS code of this style?

[MugenLee]

hello, I saw a style shared by the author on discord and thought it was great.
like this:
https://discord.com/channels/686053708261228577/931552763467411487/932793858134253629

Obsidian_c3uw8deo1h.mp4

I've been using "[key::value]" to write daily
And use DataView to extract them weekly for easy review

I like this way very much, but there is a small problem that it is not very friendly to read

Until I saw this style, I felt that if I could use the style of the video demonstration, it would be very helpful to improve my daily reading.

But I haven't been able to find the CSS code for this style

So want to request a CSS code here

Hope someone can help me

thank you very much

[nothingislost]

This is a pretty complex style which is why I haven't released it. Unfortunately I can't really provide support for how to modify this right now so hopefully it works out for you as is.

{
  "dataview": {
    "class": "dataview",
    "color": "",
    "regex": true,
    "query": "(?<hide>\\[[_\\*~`]*)(?<inlineFieldKey>[0-9\\w\\p{Letter}][-0-9\\w\\p{Letter}\\p{Extended_Pictographic} /]*)[_\\*~`]*(?<invisible> *:: *)(?<inlineFieldValue>.+?)(?<hide3>\\])",
    "mark": [
      "group",
      "line",
      "start",
      "end"
    ],
    "css": ".inlineFieldKey {\n  font-weight: 800;\n  font-family: var(--font-monospace);\n  background-color: var(--background-primary-alt);\n  color: var(--text-nav-selected);\n}\n.inlineFieldValue {\n  font-family: var(--font-monospace);\n  background-color: var(--background-secondary-alt);\n  color: var(--text-nav-selected);\n}\ndiv.cm-line:not(.cm-active) .invisible {\n  color: transparent;\n  letter-spacing: -5.5px;\n  font-family: var(--font-monospace);\n  background: linear-gradient(\n    90deg,\n    var(--background-primary-alt) 0%,\n    var(--background-primary-alt) 50%,\n    var(--background-secondary-alt) 50%\n  );\n}\n.dataview-start {\n  border-top-left-radius: 250px;\n  border-bottom-left-radius: 250px;\n  padding-left: 1em;\n  padding-right: 0px;\n  font-family: var(--font-monospace);\n  background-color: var(--background-primary-alt);\n}\n.dataview-end {\n  border-top-right-radius: 250px;\n  border-bottom-right-radius: 250px;\n  padding-left: 0px;\n  padding-right: 1em;\n  font-family: var(--font-monospace);\n  background-color: var(--background-secondary-alt);\n}\ndiv.cm-line.cm-active span:where(.dataview-start, .dataview-end, .inlineFieldKey, .inlineFieldValue) {\n  background: none;\n}\ndiv.cm-line.cm-active .dataview-start {\n  padding-left: 0.635em;\n}\ndiv.cm-line.cm-active .dataview-end {\n  padding-right: 0.635em;\n}\ndiv.cm-line:not(.cm-active) [class^=\"hide\"] {\n  font-family: var(--font-monospace);\n  font-size: 0;\n}"
  }
}

[MugenLee]

Thank you very much for your reply
This code is working fine, thanks for sharing

One small problem is that in my workflow, the "key" in [key::value] uses Emoji
This doesn't seem to have a way to correctly identify

like this:

What should I do?
@nothingislost
Looking forward to your reply

[MugenLee]

Although I have never learned regular expressions before

But in order to achieve this purpose, I have achieved this effect by learning the syntax of regular expressions

The writing of this regular expression is very powerful, and there are many places to learn, so I learned the usage of capturing groups

Anyway, thanks very much