/* * 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 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; } .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 `` inside a `

`, 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; }