Metadata Prettify

[ProudBenzene]

A suggestion, I would like to be able to set up the metadata, especially in List form, to be beautified like the selected properties in Notion. The distinction between List Metadata is too unclear now.

Hoping you could take me up on my offer and thank you for your hard work in developing the wonderful theme!

[Akifyss]

You can try importing this CSS snippet:

.metadata-property:not([data-property-key="tags"]) .multi-select-pill {
    --pill-padding-x: var(--tag-padding-x);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill::after {
    width: 100% !important;
    left: 0 !important;
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+1) {
    --pill-background: rgba(var(--color-red-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-red-rgb), 0.25);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+2) {
    --pill-background: rgba(var(--color-orange-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-orange-rgb), 0.25);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+3) {
    --pill-background: rgba(var(--color-yellow-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-yellow-rgb), 0.25);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+4) {
    --pill-background: rgba(var(--color-green-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-green-rgb), 0.25);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+5) {
    --pill-background: rgba(var(--color-cyan-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-cyan-rgb), 0.25);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+6) {
    --pill-background: rgba(var(--color-blue-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-blue-rgb), 0.25);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+7) {
    --pill-background: rgba(var(--color-purple-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-purple-rgb), 0.25);
}

.metadata-property:not([data-property-key="tags"]) .multi-select-pill:nth-child(8n+8) {
    --pill-background: rgba(var(--color-pink-rgb), 0.2);
    --pill-background-hover: rgba(var(--color-pink-rgb), 0.25);
}

[ProudBenzene]

Thanks so much! You're the best!🥰🥰🥰