ckeditor5-image-upload-base64/docs/assets/snippet-styles.css

The development environment of CKEditor 5 – the best browser-based rich text editor.

/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 */

:root {
	/* This custom property is read by the JS and passed to editor configurations
	as config.toolbar.viewportTopOffset. */
	--ck-snippet-viewport-top-offset: 100
}

@media (max-width: 960px) {
	:root {
		/* The mobile layout of Umberto is different and the toolbar offset must be
		smaller (https://github.com/ckeditor/ckeditor5/issues/1348). */
		--ck-snippet-viewport-top-offset: 55;
	}
}

.ck.ck-editor {
	margin: 1.5em 0;
}

.ck.ck-content {
	padding: 1em;
}

.ck.ck-content > :first-child {
	margin-top: 0;
}

.ck.ck-content > :last-child {
	margin-bottom: 0;
}

/* Override default Umberto's styles because they apply margins to media embed widgets with iframe
previews breaking their structure. */
.ck.ck-content iframe {
	margin: initial;
}

/* Reset h1's styling – https://github.com/ckeditor/ckeditor5-heading/issues/86 */
.ck.ck-content h1 {
	display: block;
	margin-bottom: .5em;
}

/* By default Umberto uses a trick with non breaking spaces around <code> to fix space rendering.
It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
.ck.ck-content code:before,
.ck.ck-content code:after {
	content: '' !important;
	letter-spacing: 0 !important;
	display: none !important; /* Firefox is very stubborn. */
}

/* Restore default browser styles for <sub> and <sup>. */
.ck.ck-content sub {
	vertical-align: sub;
	font-size: smaller;
}

.ck.ck-content sup {
	vertical-align: super;
	font-size: smaller;
}

.ck.ck-list {
	/* See https://github.com/ckeditor/ckeditor5/issues/494 */
	margin-left: 0;
}

.demo-row {
	width: 100%;
	display: -ms-flexbox;
	display: flex;
}

.demo-row__half {
	width: 50%;
}

.demo-row__half:first-of-type {
	padding-right: .5rem;
}

.demo-row__half:last-of-type {
	padding-left: .5rem;
}

.demo-row__third {
	width: 33.3333%;
}

.demo-row__third > div {
	padding: 2.5rem;
	border: 1px solid hsla(0, 0%, 0%, 0.15);
}

.demo-row__third:nth-of-type(2) {
	padding-left: 1rem;
	padding-right: 1rem;
}

.demo-row h3 {
	margin: 0;
}

.demo-row p {
	margin-bottom: 0;
}

/* warning notification */

.main__notification.notice {
	position: fixed;
	max-width: 650px;
	border: 1px solid hsl(0, 0%, 89%);
	border-left-color: hsl(38.8, 92.3%, 69.4%);
	border-left-width: 3px;
	box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.18);
	/* override .notice class' margins and paddings */
	padding: 20px 40px 20px 20px;
	margin: 0;
	/* elevate the warning above the editor's toolbars */
	z-index: 99999999;
	animation: fadeIn .3s ease-in-out forwards;
}

/* class chaining for style overriding */
.formatted .main__notification-title {
	font-weight: bold;
	font-size: 16px;
	padding: 0;
	margin: 0;
}

.main__notification-body {
	margin-top: 10px;
}

.main__notification-body p {
	margin-bottom: 0.3em;
}

.main__notification-body p:last-child {
	margin-bottom: 0;
}

.main__notification-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
	/* reset default button styling */
	background: none;
	border: none;
	box-shadow: none;
	line-height: 1;
	transition: background 150ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

.main__notification-close:hover {
	background: hsl(0, 0%, 93%);
}

.main__notification-close:active:focus {
	outline: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* examples/builds/inline-editor.html */
.live-snippet .image-style-left, .live-snippet .image-style-right {
	float: left;
	height: auto;
	width: 50%;
	margin-top: .5rem;
	margin-right: 2.5rem;
}

.live-snippet .image-style-right {
	float: right;
	margin-right: 0;
	margin-left: 2.5rem;
}

/* Umberto stylesheet is centering `<img>` inside a `<p>`, let's overwrite it with higher CSS Specificity.
 * See: https://github.com/ckeditor/ckeditor5/issues/2080.
 */
.live-snippet p img {
	display: initial;
	margin: initial;
	box-sizing: initial;
}

.live-snippet .image img {
	margin: 0 auto;
}

.live-snippet blockquote p:first-of-type {
	margin-bottom: 1.5rem;
}

/* https://github.com/ckeditor/ckeditor5/issues/896 */
.live-snippet .ck.ck-content h2,
.live-snippet .ck.ck-content h3,
.live-snippet .ck.ck-content h4 {
	position: static;
}

/* https://github.com/ckeditor/ckeditor5/issues/899 */
.live-snippet .ck-dropdown .ck.ck-list {
	margin: 0;
	padding: 0;
}

/* https://github.com/ckeditor/ckeditor5/pull/1060 */
.live-snippet .ck.ck-content .table table {
	margin: 0;
	display: table;
}

/* https://github.com/ckeditor/ckeditor5/issues/7310 */
.live-snippet .ck.ck-content .table td,
.live-snippet .ck.ck-content .table th {
	vertical-align: middle;
}

/* https://github.com/ckeditor/ckeditor5/issues/1282 */
.live-snippet .ck.ck-content .table p:first-child {
	padding-top: 0;
}

/* https://github.com/ckeditor/ckeditor5/issues/1282 */
.live-snippet .ck.ck-content .table p:last-child,
.live-snippet .ck.ck-content .table ul:last-child,
.live-snippet .ck.ck-content .table ol:last-child {
	margin-bottom: 0;
}

#snippet-inline-editor .ck-content {
	margin-bottom: 1rem;
	padding: 2rem;
}

/* Visually separate inline editors from example description.
https://github.com/ckeditor/ckeditor5/issues/1545 */
#snippet-inline-editor .ck-content:not(.ck-focused),
#snippet-balloon-editor.ck-content:not(.ck-focused),
#snippet-balloon-block-editor.ck-content:not(.ck-focused) {
	border: 1px solid hsla(0, 0%, 0%, 0.15);
}

#snippet-inline-editor h2, #snippet-inline-editor h3 {
	margin-top: 0;
	padding-top: 0;
	border-bottom: 0;
}

#snippet-inline-editor header.ck-content {
	text-align: center;
}

#snippet-inline-editor header.ck-content h2 {
	margin-bottom: 0;
	font-size: 2.1rem;
}

#snippet-inline-editor header.ck-content h3 {
	color: hsla(212, 79%, 9%, 0.59);
	font-weight: 600;
	font-size: 1.6rem;
}

/* examples/builds/document-editor.html */

.live-snippet .document-editor {
	margin: 1.5em 0;
}