Add setting to collapse / fold Properties across all notes by default

Feature requests
, ,
46

Also see Properties visibility on a per-note basis? - Feature requests - Obsidian Forum.

You can use the cssclasses property to give any note a CSS class. Then target that CSS class to hide the properties in that note.

1 Like
47

Been meaning to give the plugin a try after using this CSS Snippet for over a year now but didn’t want to install another plugin :smile:


/* Hide Properties and show on Hover */
.markdown-preview-view, .markdown-source-view { /* Both edit and preview mode */
    .metadata-container {             
        max-height: 2.7rem;             
        opacity: 0.6;             
        overflow: hidden;             
        transition: max-height 250ms ease-in-out, opacity 250ms;
        margin-bottom: 0;         
    }
    .metadata-container:hover,
    .metadata-container:focus-within {
         max-height: 1000px;
         opacity: 1;
         transition: max-height 300ms ease-in-out, opacity 300ms;         
    }
}
1 Like
48

Thanks for posting this! Does exactly what I was hoping for :slight_smile:

1 Like
49

Thanks for this soft open/close variant (and all your videos).

I was annoyed by properties opening every time I move the mouse from tabs to content, so I made a variant that is triggered only by hovering on the properties heading:

/* Hide Properties and show on Hover on Properties heading */

.markdown-preview-view, .markdown-source-view { 
    .metadata-container .metadata-content {             
        max-height: 0;
        opacity: 0.6;             
        overflow: hidden;             
        transition: max-height 300ms ease-in-out, opacity 300ms;
        margin-bottom: 0;         
    }

    .metadata-container:has(.metadata-properties-heading:hover) .metadata-content,
    .metadata-container .metadata-content:hover {
         max-height: 1000px;
         opacity: 1;
         transition: max-height 500ms ease-in-out, opacity 500ms;         
    }

    .metadata-container .metadata-properties-heading { 
        margin: 0;
        padding-bottom: var(--size-4-3);
        width: 150px;
    }

}
1 Like
50

Thanks @Mitja for the snippet!
I adjusted it a bit with more modern flexible CSS features (just removed any extra margins paddings to keep default styles), if anyone cares :smiley:

/* Hide Properties and show on Hover on Properties heading */
body:not(.is-mobile) .mod-root .metadata-container {
    interpolate-size: allow-keywords;

    .metadata-content {
        height: 0;
        opacity: 0.6;
        overflow: hidden;
        transition: height 300ms ease-in-out, opacity 300ms;
    }

    &:hover .metadata-content {
        height: auto;
        opacity: 1;
    }
}
2 Likes
51

Thanks @Kageetai.
FWIW, here is the modernized version of my variant - properties open only by hovering over the properties heading.

body:not(.is-mobile) .mod-root .metadata-container {
    interpolate-size: allow-keywords;

    .metadata-content {
        height: 0;
        opacity: 0.6;
        overflow: hidden;
        transition: height 300ms ease-in-out, opacity 300ms;
    }

    &:has(.metadata-properties-heading:hover) .metadata-content,
    .metadata-content:hover {
        height: auto;
        opacity: 1;
    }
    
    .metadata-properties-heading { 
        margin-bottom: 0;
        padding-bottom: var(--size-4-3);
        width: 10rem;
    }
}
3 Likes
52

This CSS snippet worked like a charm; tyvm!