/* * Copyright (c) 2003-2019, 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 to fix space rendering. It breaks CKEditor 5 (see how

[]

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 and . */ .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; } /* 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; } .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/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 rgba(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: rgba(5, 22, 42, 0.59); font-weight: 600; font-size: 1.6rem; } /* examples/builds/document-editor.html */ .live-snippet .document-editor { margin: 1.5em 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 rgba(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; }