gnoxnahte_obsidian-auto-embed/styles.css
2024-06-28 20:08:45 +08:00

116 lines
No EOL
2.4 KiB
CSS

/* If this doesn't work, try this. Found when selecting
.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false]
*/
/* Select the placeholder image and alt that appears when Obsidian doesn't render the link. */
img[src^="https:"][contenteditable=false]:has(+ div iframe),
img[src^="http:"][contenteditable=false]:has(+ div iframe) {
display: none !important;
}
/* Removes obsidian's embeds */
/* iframe[src^="https://platform.twitter.com/embed"].external-embed,
iframe[src^="https://www.youtube.com/embed"].external-embed
{
display: none !important;
} */
iframe.auto-embed {
max-width: 100%;
/* min-height: 500px; */
display: inline-block;
}
.auto-embed iframe.default-fallback-embed {
width: 100%;
height: 100%;
}
.auto-embed.twitter-embed {
width: 600px;
height: 350px;
min-height: unset;
}
.auto-embed.youtube-shorts-embed {
height: 560px;
aspect-ratio: 9/16;
}
.auto-embed.youtube-embed {
/* Default size of YouTube videos when using Share > Embed option on YoutTube's website */
/* width: 560px;
height: 315px; */
width: 100%;
aspect-ratio: 16 / 9;
}
.auto-embed.error-embed {
border: 3px solid #555;
border-radius: 15px;
padding: 10px;
color: var(--text-error);
margin: 0;
}
.auto-embed.steam-embed {
/* Default size of Steam previews when using Embed option on Steam's website */
/* width: 646px;
height: 190px; */
width: 100%;
height: 190px;
/* Even if height is set to very big and width is small, it doesn't change the height,
and height stays at 190px. So set a fixed height.*/
}
.auto-embed.reddit-embed {
height: 240px;
width: 100%;
/* height: 500px; */
}
.auto-embed.spotify-embed-container {
left: 0;
width: 100%;
height: 80px;
position: relative;
}
.auto-embed.spotify-embed-container.spotify-song-large,
.auto-embed.spotify-embed-container.spotify-playlist-small {
height: 152px;
}
.auto-embed.spotify-playlist-embed {
height: 369px;
}
.auto-embed.spotify-embed {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
.auto-embed.codepen-embed {
width: 100%;
height: 300px;
/* min-height: 300px; */
}
.auto-embed.google-docs-embed-edit-default {
height: 76.5rem;
width: 100%;
}
.auto-embed.google-docs-embed-preview {
width: 100%;
aspect-ratio: 4/5;
}
.auto-embed.google-docs-embed-edit-minimal {
width: 100%;
height: 70rem;
}