Meta Post - Common CSS Hacks

I updated the snippet to remove embedding borders, to work in edit mode as well.

/*
    clean-embeds-all.css snippet

    Removes title, link, padding, margins from embeds,
    so they really look like the same note.

    This will not require a `cssclass` to be set but work for _all_ notes.
    Derived from the `clean-embeds.css` snippet.

    2021-08-24 Matthias C. Hormann (Moonbase59)

    TODO: Find out how to correct PDF export. L/R margins & vspace too large on embeds.
*/

/* remove title and the table from the "Metatable" plugin */
.markdown-preview-view .markdown-embed-title,
.markdown-preview-view .obsidian-metatable,
.internal-embed .markdown-embed-title,
.internal-embed .obsidian-metatable {
    display: none;
}

/*
  For links to embeds NOT to be shown, uncomment the following
  and comment out the other section below.
*/

/*
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link {
  display: none;
}
*/

/*
  For links to embeds to BE shown, uncomment the following
  until the "End link show/hide stuff" comment
  and comment out the section above.
*/

/* Link icon */
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link,
.internal-embed .markdown-embed-link,
.internal-embed .file-embed-link {
    top: 0;
    right: 0;
    left: unset;
    text-align: right;
    border: none;
    margin: 0;
    width: 24px;
    height: 24px;
    color: var(--text-faint);
    cursor: pointer;
}

/* for Ars Magna theme and others that change ::before */
.markdown-preview-view .markdown-embed-link::before,
.markdown-preview-view .file-embed-link::before,
.internal-embed .markdown-embed-link::before,
.internal-embed .file-embed-link::before {
    display: none;
}

/* Link icon size & hide */
.markdown-preview-view .file-embed-link svg,
.markdown-preview-view .markdown-embed-link svg,
.internal-embed .file-embed-link svg,
.internal-embed .markdown-embed-link svg {
    height: 24px;
    width: 24px;
    opacity: 0;
    display: unset;
}

/* show on hover */
.markdown-preview-view .markdown-embed:hover .file-embed-link svg,
.markdown-preview-view .markdown-embed:hover .markdown-embed-link svg {
    opacity: 1;
}

/* change background on hover, to exactly see what’s embedded */
.markdown-preview-view .markdown-embed:hover,
.markdown-preview-view .file-embed:hover {
    background-color: var(--background-secondary) !important;
}

/* End link show/hide stuff */



/* remove border and scroll */
/* unfortunately needs !important for some themes */
.markdown-preview-view .markdown-embed,
.markdown-preview-view .file-embed {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
}

.markdown-embed {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
}

.internal-embed .markdown-embed .inline-embed {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
}

/* remove <br> between internal embeds */
.markdown-preview-section div>br {
    display: none;
}


/* remove vertical space added by markdown-preview-sizer */
div.markdown-preview-sizer.markdown-preview-section {
    min-height: unset !important;
    padding-bottom: 0 !important;
}

/* special considerations for printing (PDF export) */
@media print {

    /* remove frontmatter box if "Show frontmatter" was enabled */
    /* Also remove metadata table from "Metatable" plugin */
    pre.frontmatter,
    .obsidian-metatable {
        display: none;
    }
}
6 Likes