MakeMD Banner (deprecated).css

/*
    Make.MD Tweaks
    Quite a lot of tweaks here, make.md is great and I really like the banner functionality.
    There are tweaks for 'spaces' here, but I gave up on spaces and disabled the feature
    https://github.com/replete/obsidian-minimal-theme-css-snippets
    
    cssclass frontmatter options:
    hide-tags       Hide tags from top
    hide-meta       Hide meta view entirely in live preview mode
    meta-short      hides/shows properties on hover/target

    banner-short    short banner
    banner-tall     tall banner
    banner-muted    less visually prominent banner, desaturated on light themes
    banner-blur     blurred banner image
    banner-top      align banner image to top
    banner-bottom   align banner image to bottom
*/

/* cssclass: hide-meta */
.is-live-preview.hide-meta .mk-header {
    display:none !important;
}

/* Disable file stickers */
.mk-note-header + .mk-file-context-component .mk-file-icon {
    display:none
}

/* align field buttons */
.mk-note-header + .mk-file-context-component .mk-file-context-field-new {
    transform:translate(-7px,0);
    opacity:1;
}

/* reposition tags */
.mk-note-header + .mk-file-context-component .mk-tag-selector {
    position: absolute;
    right:10px;
    top:15px;
}

/* cssclass: Hide tags */
.mk-note-header + .mk-file-context-component .mk-tag-selector {
display:none
}

/* cssclass: Hide meta in preview */
.mk-note-header + .mk-file-context-component .mk-tag-selector {
    display:none
}

/* Make field values less visible */
.mk-file-context-value input {
    color: var(--tx3) !important
}

.mk-file-context-value input:hover {
    color:var(--tx1) !important
}
.mk-file-context-value input:focus {
    color:var(--tx1) !important
}

/* cover image gradient */
.mk-note-header::after {
    content:'';
    display: block;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:
        linear-gradient(to bottom, transparent 20%, var(--background-primary)),
        linear-gradient(to bottom, transparent 60%, var(--background-primary));
    position: absolute;
    pointer-events:none;
}

/* Disable Type '/' for commands placeholder text */
.cm-active.mk-placeholder:before {
    content:''
}

/* Disable img zoom cursor */
.mk-note-header img {
    cursor: default !important;
}

.mk-note-header {
    z-index:-1;
}

/* Hide empty last spacer div */
.mk-header .mk-file-context-section + div:empty {
    display:none;
}

/* cssclass override: short banner */
.cm-s-obsidian.banner-short .mk-note-header img{
    height:150px !important;
}
.cm-s-obsidian.banner-short .cm-content > .mk-header .mk-spacer{
    height:70px !important
}

/* cssclass override: tall banner */
.cm-s-obsidian.banner-tall .mk-note-header img{
    height:250px !important;
}
.cm-s-obsidian.banner-tall .cm-content > .mk-header .mk-spacer{
    height:160px !important
}


/* cssclass override: muted banner */
.cm-s-obsidian.banner-muted .mk-note-header::before{
    content:'';
    position:absolute;
    display: block;
    background:var(--background-primary);
    top:0;
    left:0;
    z-index:500;
    width:100%;
    height:100%;
    opacity:0.4;
}

.theme-light .cm-s-obsidian.banner-muted .mk-note-header::before {
    opacity:0.6
}

.cm-s-obsidian.banner-muted .mk-note-header {
    background: var(--background-primary)
}
.theme-light .cm-s-obsidian.banner-muted .mk-note-header img {
    filter:brightness(1.2) saturate(0.2);
}

.theme-dark .cm-s-obsidian.banner-muted .mk-note-header img {
    filter:contrast(0.5);
}
.cm-s-obsidian.banner-tall .cm-content > .mk-header .mk-spacer{
    height:160px !important
}

/* cssclass override: align banner to top */
.cm-s-obsidian.banner-top .mk-note-header img {
    object-position: top
}

/* cssclass override: align banner to bottom */
.cm-s-obsidian.banner-top .mk-note-header img {
    object-position: bottom
}

/* cssclass override: hide meta values in fold until focus */
.is-live-preview.meta-short .cm-content > .mk-header .mk-file-context-component,
.is-live-preview.meta-short .cm-content > .mk-header .mk-file-context-section{
    opacity:0;
    transition: .2s opacity ease-in;
}
.is-live-preview.meta-short .cm-content > .mk-header .mk-file-context-section {
    height:0;
}
.is-live-preview.meta-short .cm-content > .mk-header:hover .mk-file-context-component,
.is-live-preview.meta-short .cm-content > .mk-header:focus-within .mk-file-context-component {
    opacity:1;
}
.is-live-preview.meta-short.is-live-view .cm-content > .mk-header:hover .mk-file-context-section,
.is-live-preview.meta-short .cm-content > .mk-header:focus-within .mk-file-context-section,
.is-live-preview.meta-short .cm-content > .mk-header:hover .mk-file-context-section,
.is-live-preview.meta-short .cm-content > .mk-header:focus-within .mk-file-context-section {
    opacity:1;
    height:auto;
}

/* cssclass override: blend banner image to background */
.cm-s-obsidian.banner-blur .mk-note-header img {
    filter:blur(5px);
    transform:scale(1.05) translate(0, -10px);
}

/* Fixes hover cursor target */
.cm-s-obsidian .mk-header {
    overflow:hidden;
}

/* Hide banner in hover popover */
.hover-popover .mk-header {
    display:none;
}