|
|
@@ -0,0 +1,140 @@
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ height: 2000px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ /* Helper variables to avoid duplication in the colors. */
|
|
|
+ --ck-custom-background: #4A494B;
|
|
|
+ --ck-custom-foreground: #3a393d;
|
|
|
+ --ck-custom-border: #383738;
|
|
|
+ --ck-custom-white: #fff;
|
|
|
+
|
|
|
+ --ck-color-base-foreground: var(--ck-custom-background);
|
|
|
+
|
|
|
+ /* -- Overrides generic colors -------------------------------------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-focus-border: #48a3f5;
|
|
|
+ --ck-color-text: #fafafa;
|
|
|
+ --ck-color-shadow-drop: rgba( 0, 0, 0, .2 );
|
|
|
+ --ck-color-shadow-inner: rgba( 0, 0, 0, .1 );
|
|
|
+
|
|
|
+ /* -- Overrides the default .ck-button class colors ----------------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-button-default-background: var(--ck-custom-background);
|
|
|
+ --ck-color-button-default-border: var(--ck-custom-border);
|
|
|
+ --ck-color-button-default-focus-background: #434244;
|
|
|
+ --ck-color-button-default-focus-border: #323232;
|
|
|
+ --ck-color-button-default-active-background: #3f3e40;
|
|
|
+ --ck-color-button-default-active-border: #302f30;
|
|
|
+ --ck-color-button-default-active-shadow: #3b3a3c;
|
|
|
+ --ck-color-button-default-disabled-background: var(--ck-custom-background);
|
|
|
+ --ck-color-button-default-disabled-border: var(--ck-custom-border);
|
|
|
+
|
|
|
+ --ck-color-button-on-background: var(--ck-custom-foreground);
|
|
|
+ --ck-color-button-on-border: var(--ck-custom-border);
|
|
|
+ --ck-color-button-on-focus-background: #343337;
|
|
|
+ --ck-color-button-on-focus-border: #323232;
|
|
|
+ --ck-color-button-on-active-background: #313034;
|
|
|
+ --ck-color-button-on-active-border: #302f30;
|
|
|
+ --ck-color-button-on-active-shadow: #2e2e31;
|
|
|
+ --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
|
|
|
+ --ck-color-button-on-disabled-border: var(--ck-custom-border);
|
|
|
+
|
|
|
+ --ck-color-button-action-background: #1ABC9C;
|
|
|
+ --ck-color-button-action-border: #49d2b7;
|
|
|
+ --ck-color-button-action-focus-background: #17a98c;
|
|
|
+ --ck-color-button-action-focus-border: #42bda5;
|
|
|
+ --ck-color-button-action-active-background: #16a085;
|
|
|
+ --ck-color-button-action-active-border: #3eb39c;
|
|
|
+ --ck-color-button-action-active-shadow: #15967d;
|
|
|
+ --ck-color-button-action-disabled-background: #1ABC9C;
|
|
|
+ --ck-color-button-action-disabled-border: #49d2b7;
|
|
|
+ --ck-color-button-action-text: var(--ck-custom-white);
|
|
|
+
|
|
|
+ /* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-dropdown-panel-background: var(--ck-custom-background);
|
|
|
+ --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
|
|
|
+ --ck-color-dropdown-symbol: #f1f1f1;
|
|
|
+
|
|
|
+ /* -- Overrides the default .ck-input class colors ------------------------------------------ */
|
|
|
+
|
|
|
+ --ck-color-input-background: var(--ck-custom-foreground);
|
|
|
+ --ck-color-input-border: #6b6970;
|
|
|
+ --ck-color-input-text: #fafafa;
|
|
|
+ --ck-color-input-disabled-background: #343337;
|
|
|
+ --ck-color-input-disabled-border: #605f65;
|
|
|
+ --ck-color-input-disabled-text: #757575;
|
|
|
+
|
|
|
+ /* -- Overrides the default .ck-list class colors ------------------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-list-background: var(--ck-custom-background);
|
|
|
+ --ck-color-list-item-background-hover: var(--ck-custom-foreground);
|
|
|
+ --ck-color-list-item-background-active: #1A8BF1;
|
|
|
+ --ck-color-list-item-text-active: var(--ck-custom-white);
|
|
|
+
|
|
|
+ /* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-panel-background: var(--ck-custom-background);
|
|
|
+ --ck-color-panel-border: var(--ck-custom-border);
|
|
|
+
|
|
|
+ /* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-toolbar-background: var(--ck-custom-foreground);
|
|
|
+ --ck-color-toolbar-border: var(--ck-custom-border);
|
|
|
+
|
|
|
+ /* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-tooltip-background: #212025;
|
|
|
+ --ck-color-tooltip-text: #eee;
|
|
|
+
|
|
|
+ /* -- Overrides the default colors used by the editor --------------------------------------- */
|
|
|
+
|
|
|
+ --ck-color-editor-border: var(--ck-custom-background);
|
|
|
+ --ck-color-editor-toolbar-background: var(--ck-custom-background);
|
|
|
+
|
|
|
+ --ck-color-editor-toolbar-button-on-background: #3c3c3c;
|
|
|
+ --ck-color-editor-toolbar-button-on-border: transparent;
|
|
|
+ --ck-color-editor-toolbar-button-on-focus-background: #353535;
|
|
|
+ --ck-color-editor-toolbar-button-on-focus-border: transparent;
|
|
|
+ --ck-color-editor-toolbar-button-on-active-background: #272727;
|
|
|
+ --ck-color-editor-toolbar-button-on-active-border: transparent;
|
|
|
+ --ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d;
|
|
|
+ --ck-color-editor-toolbar-button-on-disabled-background: transparent;
|
|
|
+ --ck-color-editor-toolbar-button-on-disabled-border: transparent;
|
|
|
+
|
|
|
+ --ck-color-editor-dropdown-background: #535254;
|
|
|
+
|
|
|
+ /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
|
|
|
+
|
|
|
+ --ck-color-image-caption-background: #f7f7f7;
|
|
|
+ --ck-color-image-caption-text: #333;
|
|
|
+
|
|
|
+ /* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
|
|
|
+
|
|
|
+ --ck-color-widget-border-blurred: #ddd;
|
|
|
+ --ck-color-widget-border-hover: #FFD25C;
|
|
|
+ --ck-color-widget-editable-focused-background: var(--ck-custom-white);
|
|
|
+
|
|
|
+ /* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
|
|
|
+
|
|
|
+ --ck-color-link-default: #81eaff;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<h2>Editor-classic</h2>
|
|
|
+
|
|
|
+<div id="editor-classic">
|
|
|
+ <h2>Heading 1</h2>
|
|
|
+ <p>Paragraph</p>
|
|
|
+ <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
|
|
|
+</div>
|
|
|
+
|
|
|
+<h2>Editor-balloon</h2>
|
|
|
+
|
|
|
+<div id="editor-balloon">
|
|
|
+ <h2>Heading 1</h2>
|
|
|
+ <p>Paragraph</p>
|
|
|
+ <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
|
|
|
+</div>
|