h1.svelte-8od9u6,p.svelte-8od9u6{margin:0 auto}h1.svelte-8od9u6{font-size:2.8em;font-weight:700;margin:0 0 0.5em 0}p.svelte-8od9u6{margin:1em auto}@media(min-width: 480px){h1.svelte-8od9u6{font-size:4em}} /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-heading_heading1 { font-size: 20px; } .ck.ck-heading_heading2 { font-size: 17px; } .ck.ck-heading_heading3 { font-size: 14px; } .ck[class*="ck-heading_heading"] { font-weight: bold; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content .image { clear: both; text-align: center; /* Make sure there is some space between the content and the image. */ margin: 1em 0; & > img { /* Prevent unnecessary margins caused by line-height (see #44). */ display: block; /* Center the image if its width is smaller than the content's width. */ margin: 0 auto; /* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */ max-width: 100%; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content .image > figcaption { color: hsl(0, 0%, 20%); background-color: hsl(0, 0%, 97%); padding: .6em; font-size: .75em; outline-offset: -1px; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-editor { /* All the elements within `.ck-editor` are positioned relatively to it. If any element needs to be positioned with respect to the , etc., it must land outside of the `.ck-editor` in DOM. */ position: relative; & .ck-editor__top .ck-sticky-panel .ck-toolbar { /* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */ z-index: var(--ck-z-modal); } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-image-style-spacing: 1.5em; } .ck-content { & .image-style-side, & .image-style-align-left, & .image-style-align-center, & .image-style-align-right { max-width: 50%; } & .image-style-side { float: right; margin-left: var(--ck-image-style-spacing); } & .image-style-align-left { float: left; margin-right: var(--ck-image-style-spacing); } & .image-style-align-center { margin-left: auto; margin-right: auto; } & .image-style-align-right { float: right; margin-left: var(--ck-image-style-spacing); } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Infinite progress bar default width. */ :root { --ck-image-upload-progress-line-width: 30px; } .ck-content .image { position: relative; overflow: hidden; /* Upload progress bar. */ & .ck-progress-bar { position: absolute; top: 0; left: 0; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-image-upload-complete-icon { display: block; position: absolute; top: 10px; right: 10px; border-radius: 50%; &::after { content: ""; position: absolute; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-upload-placeholder-loader { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; &::before { content: ''; position: relative; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css"; .ck.ck-link-actions { display: flex; flex-direction: row; flex-wrap: nowrap; & .ck-link-actions__preview { display: inline-block; & .ck-button__label { overflow: hidden; } } @mixin ck-media-phone { flex-wrap: wrap; & .ck-link-actions__preview { flex-basis: 100%; } & .ck-button:not(.ck-link-actions__preview) { flex-basis: 50%; } } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css"; .ck.ck-link-form { display: flex; & .ck-label { display: none; } @mixin ck-media-phone { flex-wrap: wrap; & .ck-labeled-input { flex-basis: 100%; } & .ck-button { flex-basis: 50%; } } } /* * Style link form differently when manual decorators are available. * See: https://github.com/ckeditor/ckeditor5-link/issues/186. */ .ck.ck-link-form_layout-vertical { display: block; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-resizer: var(--ck-color-focus-border); --ck-resizer-size: 10px; --ck-resizer-border-width: 1px; --ck-resizer-border-radius: 2px; /* Set resizer with 50% offset. */ --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px); --ck-resizer-tooltip-offset: 10px; --ck-color-resizer-tooltip-background: hsl(0, 0%, 15%); --ck-color-resizer-tooltip-text: hsl(0, 0%, 95%); } .ck .ck-widget_with-resizer { /* Make the widget wrapper a relative positioning container for the drag handle. */ position: relative; } .ck .ck-widget__resizer { display: none; position: absolute; /* The wrapper itself should not interfere with pointer device, only the handles. */ pointer-events: none; left: 0; top: 0; outline: 1px solid var(--ck-color-resizer); } .ck-focused .ck-widget_with-resizer.ck-widget_selected { & > .ck-widget__resizer { display: block; } } .ck .ck-widget__resizer__handle { position: absolute; /* Resizers are the only UI elements that should interfere with pointer device. */ pointer-events: all; width: var(--ck-resizer-size); height: var(--ck-resizer-size); background: var(--ck-color-focus-border); border: var(--ck-resizer-border-width) solid #fff; border-radius: var(--ck-resizer-border-radius); &.ck-widget__resizer__handle-top-left { top: var( --ck-resizer-offset ); left: var( --ck-resizer-offset ); cursor: nwse-resize; } &.ck-widget__resizer__handle-top-right { top: var( --ck-resizer-offset ); right: var( --ck-resizer-offset ); cursor: nesw-resize; } &.ck-widget__resizer__handle-bottom-right { bottom: var( --ck-resizer-offset ); right: var( --ck-resizer-offset ); cursor: nwse-resize; } &.ck-widget__resizer__handle-bottom-left { bottom: var( --ck-resizer-offset ); left: var( --ck-resizer-offset ); cursor: nesw-resize; } } .ck .ck-widget.ck-widget_with-selection-handler { /* Make the widget wrapper a relative positioning container for the drag handler. */ position: relative; /* Show the selection handler on mouse hover over the widget. */ &:hover { & .ck-widget__selection-handler { visibility: visible; } } & .ck-widget__selection-handler { position: absolute; & .ck-icon { /* Make sure the icon in not a subject to font-size/line-height to avoid unnecessary spacing around it. */ display: block; } } /* Show the selection handler when the widget is selected. */ &.ck-widget_selected .ck-widget__selection-handler { visibility: visible; } } .ck .ck-size-view { background: var(--ck-color-resizer-tooltip-background); color: var(--ck-color-resizer-tooltip-text); border: 1px solid var(--ck-color-resizer-tooltip-text); border-radius: var(--ck-resizer-border-radius); font-size: var(--ck-font-size-tiny); display: block; padding: var(--ck-spacing-small); &.ck-orientation-top-left, &.ck-orientation-top-right, &.ck-orientation-bottom-right, &.ck-orientation-bottom-left { position: absolute; } &.ck-orientation-top-left { top: var( --ck-resizer-tooltip-offset ); left: var( --ck-resizer-tooltip-offset ); } &.ck-orientation-top-right { top: var( --ck-resizer-tooltip-offset ); right: var( --ck-resizer-tooltip-offset ); } &.ck-orientation-bottom-right { bottom: var( --ck-resizer-tooltip-offset ); right: var( --ck-resizer-tooltip-offset ); } &.ck-orientation-bottom-left { bottom: var( --ck-resizer-tooltip-offset ); left: var( --ck-resizer-tooltip-offset ); } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* See ckeditor/ckeditor5#936. */ .ck.ck-placeholder, .ck .ck-placeholder { &::before { content: attr(data-placeholder); /* See ckeditor/ckeditor5#469. */ pointer-events: none; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css"; .ck.ck-text-alternative-form { display: flex; flex-direction: row; flex-wrap: nowrap; & .ck-labeled-input { display: inline-block; } & .ck-label { display: none; } @mixin ck-media-phone { flex-wrap: wrap; & .ck-labeled-input { flex-basis: 100%; } & .ck-button { flex-basis: 50%; } } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* See ckeditor/ckeditor5#936. */ .ck.ck-placeholder, .ck .ck-placeholder { &::before { content: attr(data-placeholder); /* See ckeditor/ckeditor5#469. */ pointer-events: none; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "./_hidden.css"; @import "./_reset.css"; @import "./_zindex.css"; /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "../../mixins/_unselectable.css"; .ck.ck-toolbar { @mixin ck-unselectable; display: flex; flex-flow: row wrap; align-items: center; &.ck-toolbar_vertical { flex-direction: column; } &.ck-toolbar_floating { flex-wrap: nowrap; } } .ck.ck-toolbar__separator { display: inline-block; } .ck.ck-toolbar__newline { display: block; width: 100%; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "../../mixins/_unselectable.css"; @import "../tooltip/mixins/_tooltip.css"; .ck.ck-button, a.ck.ck-button { @mixin ck-unselectable; @mixin ck-tooltip_enabled; position: relative; display: inline-flex; align-items: center; justify-content: left; &.ck-button_with-text { & .ck-button__label { display: inline-block; } } /* Center the icon horizontally in a button without text. */ &:not(.ck-button_with-text) { justify-content: center; } &:hover { @mixin ck-tooltip_visible; } /* Get rid of the native focus outline around the tooltip when focused (but not :hover). */ &:focus:not(:hover) { @mixin ck-tooltip_disabled; } & .ck-button__label { display: none; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-button.ck-switchbutton { & .ck-button__toggle { display: block; & .ck-button__toggle__inner { display: block; } } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-toolbar-dropdown { & .ck-toolbar { flex-wrap: nowrap; } & .ck-dropdown__panel .ck-button { &:focus { z-index: calc(var(--ck-z-default) + 1); } } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-sticky-panel { & .ck-sticky-panel__content_sticky { z-index: var(--ck-z-modal); /* #315 */ position: fixed; top: 0; } & .ck-sticky-panel__content_sticky_bottom-limit { top: auto; position: absolute; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-balloon-rotator__navigation { display: flex; align-items: center; justify-content: center; } /* Buttons inside a toolbar should be centered when rotator bar is wider. * See: https://github.com/ckeditor/ckeditor5-ui/issues/495 */ .ck .ck-balloon-rotator__content .ck-toolbar { justify-content: center; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-fake-panel { position: absolute; /* Fake panels should be placed under main balloon content. */ z-index: calc(var(--ck-z-modal) - 1); } .ck .ck-fake-panel div { position: absolute; } .ck .ck-fake-panel div:nth-child( 1 ) { z-index: 2; } .ck .ck-fake-panel div:nth-child( 2 ) { z-index: 1; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* Make sure the balloon arrow does not float over its children. */ --ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3); } .ck.ck-balloon-panel { display: none; position: absolute; z-index: var(--ck-z-modal); &.ck-balloon-panel_with-arrow { &::before, &::after { content: ""; position: absolute; } &::before { z-index: var(--ck-balloon-panel-arrow-z-index); } &::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } } &[class*="arrow_n"] { &::before { z-index: var(--ck-balloon-panel-arrow-z-index); } &::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } } &[class*="arrow_s"] { &::before { z-index: var(--ck-balloon-panel-arrow-z-index); } &::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } } &.ck-balloon-panel_visible { display: block; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "../../mixins/_unselectable.css"; @import "../tooltip/mixins/_tooltip.css"; .ck.ck-button, a.ck.ck-button { @mixin ck-unselectable; @mixin ck-tooltip_enabled; position: relative; display: inline-flex; align-items: center; justify-content: left; &.ck-button_with-text { & .ck-button__label { display: inline-block; } } /* Center the icon horizontally in a button without text. */ &:not(.ck-button_with-text) { justify-content: center; } &:hover { @mixin ck-tooltip_visible; } /* Get rid of the native focus outline around the tooltip when focused (but not :hover). */ &:focus:not(:hover) { @mixin ck-tooltip_disabled; } & .ck-button__label { display: none; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-balloon-rotator__navigation { display: flex; align-items: center; justify-content: center; } /* Buttons inside a toolbar should be centered when rotator bar is wider. * See: https://github.com/ckeditor/ckeditor5-ui/issues/495 */ .ck .ck-balloon-rotator__content .ck-toolbar { justify-content: center; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-fake-panel { position: absolute; /* Fake panels should be placed under main balloon content. */ z-index: calc(var(--ck-z-modal) - 1); } .ck .ck-fake-panel div { position: absolute; } .ck .ck-fake-panel div:nth-child( 1 ) { z-index: 2; } .ck .ck-fake-panel div:nth-child( 2 ) { z-index: 1; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "../tooltip/mixins/_tooltip.css"; .ck.ck-dropdown { display: inline-block; position: relative; & .ck-dropdown__arrow { pointer-events: none; z-index: var(--ck-z-default); } /* Dropdown button should span horizontally, e.g. in vertical toolbars */ & .ck-button.ck-dropdown__button { width: 100%; /* Disable main button's tooltip when the dropdown is open. Otherwise the panel may partially cover the tooltip */ &.ck-on { @mixin ck-tooltip_disabled; } } & .ck-dropdown__panel { /* This is to get rid of flickering when the tooltip is shown under the panel, which looks like the panel moves vertically a pixel down and up. */ -webkit-backface-visibility: hidden; display: none; z-index: var(--ck-z-modal); position: absolute; &.ck-dropdown__panel-visible { display: inline-block; /* This will prevent blurry icons in dropdown on Firefox. See #340. */ will-change: transform; } &.ck-dropdown__panel_ne, &.ck-dropdown__panel_nw { bottom: 100%; } &.ck-dropdown__panel_se, &.ck-dropdown__panel_sw { transform: translate3d( 0, 100%, 0 ); } &.ck-dropdown__panel_ne, &.ck-dropdown__panel_se { left: 0px; } &.ck-dropdown__panel_nw, &.ck-dropdown__panel_sw { right: 0px; } } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-icon { vertical-align: middle; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* Make sure the balloon arrow does not float over its children. */ --ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3); } .ck.ck-balloon-panel { display: none; position: absolute; z-index: var(--ck-z-modal); &.ck-balloon-panel_with-arrow { &::before, &::after { content: ""; position: absolute; } &::before { z-index: var(--ck-balloon-panel-arrow-z-index); } &::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } } &[class*="arrow_n"] { &::before { z-index: var(--ck-balloon-panel-arrow-z-index); } &::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } } &[class*="arrow_s"] { &::before { z-index: var(--ck-balloon-panel-arrow-z-index); } &::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } } &.ck-balloon-panel_visible { display: block; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "./_hidden.css"; @import "./_reset.css"; @import "./_zindex.css"; /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-tooltip, .ck.ck-tooltip .ck-tooltip__text::after { position: absolute; /* Without this, hovering the tooltip could keep it visible. */ pointer-events: none; /* This is to get rid of flickering when transitioning opacity in Chrome. It's weird but it works. */ -webkit-backface-visibility: hidden; } .ck-tooltip { /* Tooltip is hidden by default. */ visibility: hidden; opacity: 0; display: none; z-index: var(--ck-z-modal); & .ck-tooltip__text { display: inline-block; &::after { content: ""; width: 0; height: 0; } } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "../../mixins/_unselectable.css"; .ck.ck-list { @mixin ck-unselectable; display: flex; flex-direction: column; & .ck-list__item, & .ck-list__separator { display: block; } /* Make sure that whatever child of the list item gets focus, it remains on the top. Thanks to that, styles like box-shadow, outline, etc. are not masked by adjacent list items. */ & .ck-list__item > *:focus { position: relative; z-index: var(--ck-z-default); } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-label { display: block; } .ck.ck-voice-label { display: none; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-icon { vertical-align: middle; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-tooltip, .ck.ck-tooltip .ck-tooltip__text::after { position: absolute; /* Without this, hovering the tooltip could keep it visible. */ pointer-events: none; /* This is to get rid of flickering when transitioning opacity in Chrome. It's weird but it works. */ -webkit-backface-visibility: hidden; } .ck-tooltip { /* Tooltip is hidden by default. */ visibility: hidden; opacity: 0; display: none; z-index: var(--ck-z-modal); & .ck-tooltip__text { display: inline-block; &::after { content: ""; width: 0; height: 0; } } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "./_hidden.css"; @import "./_reset.css"; @import "./_zindex.css"; /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @import "../../mixins/_unselectable.css"; @import "../tooltip/mixins/_tooltip.css"; .ck.ck-button, a.ck.ck-button { @mixin ck-unselectable; @mixin ck-tooltip_enabled; position: relative; display: inline-flex; align-items: center; justify-content: left; &.ck-button_with-text { & .ck-button__label { display: inline-block; } } /* Center the icon horizontally in a button without text. */ &:not(.ck-button_with-text) { justify-content: center; } &:hover { @mixin ck-tooltip_visible; } /* Get rid of the native focus outline around the tooltip when focused (but not :hover). */ &:focus:not(:hover) { @mixin ck-tooltip_disabled; } & .ck-button__label { display: none; } } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-label { display: block; } .ck.ck-voice-label { display: none; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-icon { vertical-align: middle; } /* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-tooltip, .ck.ck-tooltip .ck-tooltip__text::after { position: absolute; /* Without this, hovering the tooltip could keep it visible. */ pointer-events: none; /* This is to get rid of flickering when transitioning opacity in Chrome. It's weird but it works. */ -webkit-backface-visibility: hidden; } .ck-tooltip { /* Tooltip is hidden by default. */ visibility: hidden; opacity: 0; display: none; z-index: var(--ck-z-modal); & .ck-tooltip__text { display: inline-block; &::after { content: ""; width: 0; height: 0; } } }