Non-flat buttons, tabs, and Kanban tags

[SmartFinn]

First of all, thank you for this fantastic theme! It's honestly one of my favorites — clean, elegant, and beautifully minimal. I really appreciate the flat aesthetic, which gives everything a calm and distraction-free look.

I noticed recently that some UI elements, like buttons, tabs, and especially kanban tags, appear to have inner shadows. I wanted to mention that this slightly breaks the flat design of the theme.

I would be very grateful if you change the style of those elements and bring them back in line with the theme's flat look.

Thanks again for your great work.

[ElitheDumbGuy]

Yes I completely agree! Or if we could have an option in style settings to adjust this back to how it was

[ElitheDumbGuy]

@SmartFinn

So if you delete

.theme-light a.tag,
.theme-light .cm-hashtag,
.theme-light .community-item .flair,
.theme-light .metadata-property[data-property-key="tags"] .multi-select-pill {
    box-shadow: inset 0 -2px 6px 0 var(--tag-background), inset 0 2px 6px 0 rgba(255, 255, 255, .4), inset 0 1px 0 0 rgba(255, 255, 255, .85);
}

.theme-dark a.tag,
.theme-dark .cm-hashtag,
.theme-dark .community-item .flair,
.theme-dark .metadata-property[data-property-key="tags"] .multi-select-pill {
    box-shadow: inset 0 2px 6px 0 var(--tag-background), inset 0 -2px 6px 0 rgba(0, 0, 0, .1), inset 0 1px 0 0 rgba(255, 255, 255, .15);
}

in the settings it should restore the flat look for now (go to .obsidian/themes/Border/theme.css

[Vasdranna]

@SmartFinn

So if you delete

.theme-light a.tag,
.theme-light .cm-hashtag,
.theme-light .community-item .flair,
.theme-light .metadata-property[data-property-key="tags"] .multi-select-pill {
    box-shadow: inset 0 -2px 6px 0 var(--tag-background), inset 0 2px 6px 0 rgba(255, 255, 255, .4), inset 0 1px 0 0 rgba(255, 255, 255, .85);
}

.theme-dark a.tag,
.theme-dark .cm-hashtag,
.theme-dark .community-item .flair,
.theme-dark .metadata-property[data-property-key="tags"] .multi-select-pill {
    box-shadow: inset 0 2px 6px 0 var(--tag-background), inset 0 -2px 6px 0 rgba(0, 0, 0, .1), inset 0 1px 0 0 rgba(255, 255, 255, .15);
}

in the settings it should restore the flat look for now (go to .obsidian/themes/Border/theme.css

This doesn't seem to work —or at least, I haven't found those lines in the CSS. I'll have to tinker with it. I wonder how this new design came about; it completely broke the overall theme aesthetic.

[SmartFinn]

@Vasdranna styles in that snippet were removed in this commit 164c493 It fixes tags on Kanban boards, but left the inner shadows on the tabs and toolbar buttons untouched. Still waiting for a solution.

[Vasdranna]

@Vasdranna styles in that snippet were removed in this commit 164c493 It fixes tags on Kanban boards, but left the inner shadows on the tabs and toolbar buttons untouched. Still waiting for a solution.

Just in case you find it useful, I did a quick edit and kind of fixed it by changing the following line in the body selector in theme.css:

--shadow-activated-tab-header-dark: inset 0 0 0 1px var(--background-modifier-border), inset 0 2px 4px 0 var(--background-modifier-border), inset 0 1px 1px 1px var(--background-modifier-border);

With this:

--shadow-activated-tab-header-dark: inset 0 0 0 1px var(--background-modifier-border), inset 0 0px 0px 0 var(--background-modifier-border), inset 0 0px 0px 0px var(--background-modifier-border);

I haven't tested it much, but at first glance, it seems like an improvement.