Obsidian single-line and multi-line flashcard styling

README.md

This was made specifically for this Obsidian plugin. I will assume you know how to add custom CSS snippets.

The code here is not maintained. I am too lazy.

Usage

The following styles render the content as flashcard content when in Reading Mode. The styling will be similar to a callout's.

Content touches the hashtag:

outside flashcard

#flashcards 
flashcard content here
lorem ipsum dolor sit amet

outside flashcard

Content is in a blockquote directly containing the hashtag

outside flashcard

> #flashcards
> 
> content here
>
> lorem ipsum dolor sit amet

outside flashcard

flashcards.css

/* style hashtag */

.tag[href^="#flashcards"] {
	font-size: var(--callout-title-size);
	font-weight: var(--callout-title-weight);
	padding: var(--callout-title-padding);
	background: none;

	&:hover {
		background: none;
	}

	/* add space between hastag and content */

	& + br {
		content: "";
		display: block;
		margin-bottom: var(--size-4-4);
	}

	/* container
	 * style as container unless:
	 * 1. it does not have content directly after it, or
	 * 2. it has content directly before it
	 * 3. it is inside a blockquote and passes the first two points */

	*:has(>&),
	blockquote:has(>*>&) {
		border-radius: var(--callout-radius);
		padding: var(--callout-padding);
		padding-bottom: var(--size-4-6) !important;
		background: var(--color-base-20);
		border: none;

	}

	/* see container notes - 1 */
	*:has(>&):not(:has(br)) {
		padding: unset !important;
		background: unset;
	}

	/* see container notes - 2 */
	*:has(> br + &), /*    - 3 */
	blockquote>*:not(blockquote):has(>&) {
		padding: unset !important;
		background: unset;
	}
	*:has(> br + &) & + br {
		content: unset;
		display: unset;
		margin-bottom: unset;
	}

}

I did this because.... uh.... in my defense, I had finished all my homework.

also, it looked kinda ugly when I made flashcards within a file so I wanna make it ✨️pretty 🎀✨️