How to achieve such effect for inline parenthesized fields?

[ricochet_ariel]

Hi, wonderful community!
This is a demand expended from another post inline property style

• Preview of original CSS snippet:
  • 

---

Since via this CSS snippet, I can put the unique display effect on my inlined properties, what about the alternative parenthesis syntax (which hides the key when rendered in Reader mode)?
dataview - adding metadate - inline fields - parenthesis syntax

(properties field:: value)

[holroy]

Currently you don’t have the same control over fields with hidden key field, as the other type. My take when I wanted to add specific formatting and also how the key part I’ve done it all using CSS.

That is to use [key:: value] , and then hide the key part, and do special formatting to the value part. Do you understand how this is done?

[ricochet_ariel]

Thanks for your reply! How do you hide key field? Can you show me your CSS snippet?

[holroy]

Here is one variant of it:

.inline-field-key[data-dv-key="assigned"] {
  display: none;

  && + .inline-field-value {
    border: thin solid var(--text-muted);
    border-radius: 10px; 
    background: hsl(
        var(--accent-h), 
        var(--accent-s), 
        calc(var(--accent-l) / 0.5 ));
  }
}

The main selector targets the key part, and then the && + ... extends the selector to apply to the value part. Making your example text look like:

Which surely would look better in light mode… Note that I’ve used [assigned:: John] and similar for all the inline fields in the example.

[ricochet_ariel]

Wow, this is pretty cool! Thank you for sharing.