@varlet/schema-repl/src/repl.css

Lightweight Schema repl component based on Vue3

:root {
	--schema-repl-border-color: #ddd;
	--schema-repl-tab-active-color: #3a7afe;
	--schema-repl-background-color: #fff;
	--schema-repl-text-color: #333;
	--schema-repl-tab-container-height: 44px;
	--schema-repl-tab-font-size: 15px;
	--schema-repl-tab-indicator-size: 2px;
}

.var-schema-repl {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--schema-repl-background-color);
	color: var(--schema-repl-text-color);
}

.var-schema-repl-tab-container {
	display: flex;
	flex-shrink: 0;
	height: var(--schema-repl-tab-container-height);
	border-bottom: thin solid var(--schema-repl-border-color);
}

.var-schema-repl-tab {
	display: flex;
	align-items: center;
	padding: 0 20px;
	height: 100%;
	color: var(--schema-repl-text-color);
	cursor: pointer;
	font-size: var(--schema-repl-tab-font-size);
	border-bottom: var(--schema-repl-tab-indicator-size) solid transparent;
}

.var-schema-repl-tab-active {
	font-weight: bold;
	color: var(--schema-repl-tab-active-color);
	border-bottom: var(--schema-repl-tab-indicator-size) solid var(--schema-repl-tab-active-color);
}

.var-schema-repl-editor-container {
	display: flex;
	flex: 1;
}

.var-schema-repl-editor {
	width: 50%;
	height: 100%;
	overflow: auto;
	border-right: thin solid var(--schema-repl-border-color)
}

.var-schema-renderer {
	width: 50%;
}

.var-schema-repl-transfer {
	position: fixed;
	left: 50%;
	bottom: 20px;
	padding: 14px;
	transform: translateX(-50%);
	border: thin solid var(--schema-repl-border-color);
	border-radius: 4px;
	outline: none;
	cursor: pointer;
	background-color: var(--schema-repl-background-color);
	transition: all .2s;
	color: var(--schema-repl-text-color);
}

.var-schema-repl-vs-dark {
	--schema-repl-border-color: rgba(255, 255, 255, 0.14);
	--schema-repl-tab-active-color: #4a7afe;
	--schema-repl-background-color: #212121;
	--schema-repl-text-color: #fff;
}