Panda Sneak Peek: A Work-in-Progress Markdown Editor and Library 🐼

Announcement
75

Would it be possible to give the editing pane a floating material look? An example is attached using Obsidian (and CSS if anyone wants to tinker).

bamboo theme
bamboo theme2948×1966 980 KB

/* Default theme, Light base colour scheme */

/* Rounded top-left corner for the tab header */
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
	border-top-left-radius: 8px;
}

/* Background colour when not focused */
body:not(.is-focused) .mod-root .workspace-tabs.mod-stacked .workspace-tab-container {
	background-color: var(--background-secondary);
}

/* Remove bottom margin for stacked tab headers */
.mod-root .workspace-tabs.mod-stacked .workspace-tab-header {
	margin-bottom: 0;
}

/* Rounded square for normal tab with drop shadow */
.mod-root .workspace-tabs .workspace-tab-header.is-active {
	box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.8);
}

.workspace .mod-root .workspace-tab-header-inner::after {
	right: -1px;
}

/* Rounded corners for the workspace tab container */
.mod-root .workspace-tab-container {
	box-shadow:
		-2px 0 4px rgba(0, 0, 0, 0.05),
		/* Left shadow */
		2px 0 4px rgba(0, 0, 0, 0.175),
		/* Right shadow */
		0 2px 4px rgba(0, 0, 0, 0.4);
	/* Bottom shadow */
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	margin: -.2em 1em 1em 1em;
	/* margin for better visibility */
}

.mod-root .workspace-tabs {
	background-color: var(--titlebar-background-focused);
}

/* Adjust UI font size based on 
settings in Appearance > Font > Font Size */
body {
	--font-ui-medium: 14px;
	--font-ui-small: 1.125em;
	/*sidebar*/
	--font-ui-smaller: 11px;
	--icon-xs: 14px;
	--icon-s: 15px;
	--icon-m: 17px;
	--icon-l: 17px;
	--header-height: 38px;
	--ribbon-width: 10px;
	/*40px*/
}

body {
	--divider-color: var(--background-secondary);
	--h1-font: 'Brandon Text', serif;
	--h2-font: 'Brandon Text', serif;
	--h3-font: 'Brandon Text', serif;
	--h4-font: 'Brandon Text', sans-serif;
	--h5-font: 'Brandon Text', sans-serif;
	--h6-font: 'Brandon Text', sans-serif;
	--default-font: 'Brandon Text', sans-serif;
	font-weight: 500;
	--font-text-theme: 'Brandon Text', sans-serif;
	--keyheader-font: 'Brandon Text', sans-serif;
	--h1-size: 1.75em;
	--h2-size: 1.625em;
	--h3-size: 1.325em;
	--h4-size: 1.25rem;
	--h5-size: 1.125rem;
	--h6-size: 1.0625rem;
	--h1-weight: 400;
	--h2-weight: 400;
	--h3-weight: 400;
	--h4-weight: 500;
	--h5-weight: 500;
	--h6-weight: 500;
	--h1-line-height: 2em;
	--h2-line-height: 2em;
	--h3-line-height: 2em;
	--h4-line-height: 1em;
	--h5-line-height: 1em;
}

.theme-light {
	--background-primary: #f9fffc;
	--background-secondary: #e6e2db;
	--background-secondary-alt: #e6e2db;
	--background-accent: #afbfcf;
	--background-accent-alt: var(--background-secondary);
	--background-modifier-border: #ada7a4;
	--background-modifier-cover: var(--background-secondary);
	--background-modifier-form-field: #e6e6e6;
	--interactive-accent-hover: #708ca9 --h1-color: #6e151b;
	--h2-color: #064d83;
	--h3-color: #06837b;
	--h4-color: #31373f;
	--h5-color: #31373f;
	--h6-color: #31373f;
	--text-selection: #e8f1f9;

	.markdown-preview-view .internal-link {
		text-decoration: none;
	}

	/* Make Status bar accommodate two lines */
	.status-bar {
		padding-top: 0.1em;
		padding-bottom: 0.1em;
		line-height: 1em;
		max-height: unset;
	}

	.markdown-preview-view>div ul:not(ul ul) {
		padding-inline-start: var(--list-indent-first);
	}

	/* Remove hyperlink underline Preview Mode */
	.markdown-source-view.mod-cm6 .cm-underline {
		text-decoration: none;
		color: #82080e;
	}

	/* Reading Mode */
	.markdown-rendered .internal-link {
		text-decoration: none;
		font-weight: normal;
		color: #075000;
	}

	/* Editor and Preview View Styles */
	.cm-s-obsidian,
	.markdown-preview-view {
		color: #1f3c4e;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		-webkit-font-smoothing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		padding: .25em 1em;

		/* top bottom sides*/
		@media only screen and (min-width: 414px) and (max-width: 767px) {
			/* iPhone 11 Max */
			padding: 0 0.5em;
		}

		@media only screen and (min-device-width: 744px) and (max-device-width: 1133px) and (-webkit-min-device-pixel-ratio: 2) {
			/* iPad Mini 6th Generation */
			font-size: 28px;
			padding: 0 2em;
		}
	}

	.markdown-source-view :is(.cm-line + .cm-line) {
		padding: 0.5em 0;
		text-indent: 0em;
		line-height: 1.5em;
	}
1 Like