carta-md/dist/default.css

A lightweight, fully customizable, Markdown editor

.carta-theme__default {
	--border-color: #b9b9b9;
	--selection-color: #b5f0ff3d;
	--focus-outline: #76bbf3;
	--hover-color: #e9e9e9;
	--caret-color: #161616;
	--text-color: #1a1a1a;

	--border-color-dark: #4d4d4c;
	--selection-color-dark: #b5f0ff3d;
	--focus-outline-dark: #76bbf3;
	--hover-color-dark: #4d4d4c;
	--caret-color-dark: #ffffff;
	--text-color-dark: #f1f1f1;
}

.carta-theme__default.carta-editor {
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

.carta-theme__default .carta-editor ::selection {
	background: var(--selection-color);
}

/* Box sizings */
.carta-theme__default .carta-toolbar {
	border-bottom: 1px solid var(--border-color);
}

.carta-theme__default .carta-wrapper {
	padding: 0 1rem 0 1rem;
}

.carta-theme__default .carta-container > * {
	margin: 1rem 0 1rem 0;
}

/* Text settings */
.carta-theme__default .carta-input {
	caret-color: var(--caret-color);
	font-size: 0.95rem;
}

.carta-theme__default .carta-input ::placeholder {
	color: var(--text-color);
}

/* Splitter */
.carta-theme__default .mode-split.carta-container::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--border-color);
}

.carta-theme__default .mode-split .carta-input {
	padding-right: 1rem;
}

.carta-theme__default .mode-split .carta-renderer {
	padding-left: 1rem;
}

/* Toolbar */
.carta-theme__default .carta-toolbar {
	padding: 0 12px;
}

.carta-theme__default .carta-toolbar-left {
	display: flex;
	align-items: flex-end;
}

.carta-theme__default button {
	color: var(--text-color);
}

/* Markdown input and renderer */
.carta-theme__default .carta-input,
.carta-theme__default .carta-renderer {
	height: 600px;
	overflow-y: scroll;
}

/* Icons */
.carta-theme__default .carta-icon,
.carta-theme__default .carta-icon-full {
	border: 0;
	background: transparent;
}

.carta-theme__default .carta-icon-full {
	padding: 6px 4px;
}

.carta-theme__default .carta-icon-full span {
	margin-left: 6px;
}

.carta-theme__default .carta-icon:hover,
.carta-theme__default .carta-icon-full:hover {
	background: var(--hover-color);
}

.carta-input > pre {
	background: inherit;
}

.carta-theme__default .carta-icons-menu {
	padding: 6px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	min-width: 180px;
}

.carta-theme__default .carta-icons-menu .carta-icon-full {
	margin-top: 2px;
}

.carta-theme__default .carta-icons-menu .carta-icon-full:first-child {
	margin-top: 0;
}

/* Buttons */
.carta-theme__default .carta-toolbar-left button {
	background: none;
	border: none;
	font-size: 0.9rem;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	margin-right: 12px;
	cursor: pointer;
}

.carta-theme__default .carta-toolbar-left button:last-child {
	margin-right: 0;
}

.carta-theme__default .carta-toolbar-left button.carta-active {
	font-weight: 600;
	border-bottom: 2px solid var(--hover-color);
}