summaryrefslogtreecommitdiff
path: root/lib/ckeditor5/sample
diff options
context:
space:
mode:
Diffstat (limited to 'lib/ckeditor5/sample')
-rw-r--r--lib/ckeditor5/sample/index.html294
-rw-r--r--lib/ckeditor5/sample/styles.css965
2 files changed, 630 insertions, 629 deletions
diff --git a/lib/ckeditor5/sample/index.html b/lib/ckeditor5/sample/index.html
index 8f3ac18..d46296a 100644
--- a/lib/ckeditor5/sample/index.html
+++ b/lib/ckeditor5/sample/index.html
@@ -1,164 +1,130 @@
1<!DOCTYPE html><!-- 1<!DOCTYPE html><!--
2 Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved. 2 Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
3 This file is licensed under the terms of the MIT License (see LICENSE.md). 3 This file is licensed under the terms of the MIT License (see LICENSE.md).
4--> 4-->
5 5
6<html lang="en" dir="ltr"></html> 6<html lang="en" dir="ltr">
7<head> 7 <head>
8 <title>CKEditor 5 ClassicEditor build</title> 8 <title>CKEditor 5 ClassicEditor build</title>
9 <meta charset="UTF-8"> 9 <meta charset="UTF-8">
10 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <meta name="viewport" content="width=device-width, initial-scale=1">
11 <link rel="icon" type="image/png" href="https://c.cksource.com/a/1/logos/ckeditor5.png"> 11 <link rel="icon" type="image/png" href="https://c.cksource.com/a/1/logos/ckeditor5.png">
12 <link rel="stylesheet" type="text/css" href="styles.css"> 12 <link rel="stylesheet" type="text/css" href="styles.css">
13</head> 13 </head>
14<body data-editor="ClassicEditor" data-collaboration="false"> 14 <body data-editor="ClassicEditor" data-collaboration="false" data-revision-history="false">
15 <header> 15 <header>
16 <div class="centered"> 16 <div class="centered">
17 <h1><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer"><img src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1> 17 <h1><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer"><img src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1>
18 <nav> 18 <nav>
19 <ul> 19 <ul>
20 <li><a href="https://ckeditor.com/docs/ckeditor5/" target="_blank" rel="noopener noreferrer">Documentation</a></li> 20 <li><a href="https://ckeditor.com/docs/ckeditor5/" target="_blank" rel="noopener noreferrer">Documentation</a></li>
21 <li><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Website</a></li> 21 <li><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Website</a></li>
22 </ul> 22 </ul>
23 </nav> 23 </nav>
24 </div> 24 </div>
25 </header> 25 </header>
26 <main> 26 <main>
27 <div class="message"> 27 <div class="message">
28 <div class="centered"> 28 <div class="centered">
29 <h2>CKEditor 5 online builder demo - ClassicEditor build</h2> 29 <h2>CKEditor 5 online builder demo - ClassicEditor build</h2>
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="centered"> 32 <div class="centered">
33 <div class="row row-editor"> 33 <div class="row row-editor">
34 <div class="editor"> 34 <div class="editor-container">
35 <h2>Bilingual Personality Disorder</h2> 35 <div class="editor">
36 <figure class="image image-style-side"><img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg"> 36 <h2>Bilingual Personality Disorder</h2>
37 <figcaption>One language, one person.</figcaption> 37 <figure class="image image-style-side"><img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
38 </figure> 38 <figcaption>One language, one person.</figcaption>
39 <p> 39 </figure>
40 This may be the first time you hear about this made-up disorder but 40 <p>
41 it actually isn’t so far from the truth. Even the studies that were conducted almost half a century show that 41 This may be the first time you hear about this made-up disorder but
42 <strong>the language you speak has more effects on you than you realise</strong>. 42 it actually isn’t so far from the truth. Even the studies that were conducted almost half a century show that
43 </p> 43 <strong>the language you speak has more effects on you than you realise</strong>.
44 <p> 44 </p>
45 One of the very first experiments conducted on this topic dates back to 1964. 45 <p>
46 <a href="https://www.researchgate.net/publication/9440038_Language_and_TAT_content_in_bilinguals">In the experiment</a> 46 One of the very first experiments conducted on this topic dates back to 1964.
47 designed by linguist Ervin-Tripp who is an authority expert in psycholinguistic and sociolinguistic studies, 47 <a href="https://www.researchgate.net/publication/9440038_Language_and_TAT_content_in_bilinguals">In the experiment</a>
48 adults who are bilingual in English in French were showed series of pictures and were asked to create 3-minute stories. 48 designed by linguist Ervin-Tripp who is an authority expert in psycholinguistic and sociolinguistic studies,
49 In the end participants emphasized drastically different dynamics for stories in English and French. 49 adults who are bilingual in English in French were showed series of pictures and were asked to create 3-minute stories.
50 </p> 50 In the end participants emphasized drastically different dynamics for stories in English and French.
51 <p> 51 </p>
52 Another ground-breaking experiment which included bilingual Japanese women married to American men in San Francisco were 52 <p>
53 asked to complete sentences. The goal of the experiment was to investigate whether or not human feelings and thoughts 53 Another ground-breaking experiment which included bilingual Japanese women married to American men in San Francisco were
54 are expressed differently in <strong>different language mindsets</strong>. 54 asked to complete sentences. The goal of the experiment was to investigate whether or not human feelings and thoughts
55 <Here>is a sample from the the experiment:</Here> 55 are expressed differently in <strong>different language mindsets</strong>.
56 </p> 56 Here is a sample from the the experiment:
57 <table> 57 </p>
58 <thead> 58 <table>
59 <tr> 59 <thead>
60 <th></th> 60 <tr>
61 <th>English</th> 61 <th></th>
62 <th>Japanese</th> 62 <th>English</th>
63 </tr> 63 <th>Japanese</th>
64 </thead> 64 </tr>
65 <tbody> 65 </thead>
66 <tr> 66 <tbody>
67 <td>Real friends should</td> 67 <tr>
68 <td>Be very frank</td> 68 <td>Real friends should</td>
69 <td>Help each other</td> 69 <td>Be very frank</td>
70 </tr> 70 <td>Help each other</td>
71 <tr> 71 </tr>
72 <td>I will probably become</td> 72 <tr>
73 <td>A teacher</td> 73 <td>I will probably become</td>
74 <td>A housewife</td> 74 <td>A teacher</td>
75 </tr> 75 <td>A housewife</td>
76 <tr> 76 </tr>
77 <td>When there is a conflict with family</td> 77 <tr>
78 <td>I do what I want</td> 78 <td>When there is a conflict with family</td>
79 <td>It's a time of great unhappiness</td> 79 <td>I do what I want</td>
80 </tr> 80 <td>It's a time of great unhappiness</td>
81 </tbody> 81 </tr>
82 </table> 82 </tbody>
83 <p> 83 </table>
84 More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the language a person speaks affects 84 <p>
85 their cognition, behaviour, emotions and hence <strong>their personality</strong>. 85 More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the language a person speaks affects
86 This shouldn’t come as a surprise 86 their cognition, behaviour, emotions and hence <strong>their personality</strong>.
87 <a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already know</a> that different regions 87 This shouldn’t come as a surprise
88 of the brain become more active depending on the person’s activity at hand. Since structure, information and especially 88 <a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already know</a> that different regions
89 <strong>the culture</strong> of languages varies substantially and the language a person speaks is an essential element of daily life. 89 of the brain become more active depending on the person’s activity at hand. Since structure, information and especially
90 </p> 90 <strong>the culture</strong> of languages varies substantially and the language a person speaks is an essential element of daily life.
91 </div> 91 </p>
92 </div></div> 92 </div>
93 </div> 93 </div>
94 </main> 94 </div></div>
95 <footer> 95 </div>
96 <p><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener">CKEditor 5</a> 96 </main>
97 – Rich text editor of tomorrow, available today 97 <footer>
98 </p> 98 <p><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener">CKEditor 5</a>
99 <p>Copyright © 2003-2021, 99 – Rich text editor of tomorrow, available today
100 <a href="https://cksource.com/" target="_blank" rel="noopener">CKSource</a> 100 </p>
101 – Frederico Knabben. All rights reserved. 101 <p>Copyright © 2003-2022,
102 </p> 102 <a href="https://cksource.com/" target="_blank" rel="noopener">CKSource</a>
103 </footer> 103 Holding sp. z o.o. All rights reserved.
104 <script src="../build/ckeditor.js"></script> 104 </p>
105 <script>ClassicEditor 105 </footer>
106 .create( document.querySelector( '.editor' ), { 106 <script src="../build/ckeditor.js"></script>
107 107 <script>ClassicEditor
108 toolbar: { 108 .create( document.querySelector( '.editor' ), {
109 items: [ 109
110 'heading', 110 licenseKey: '',
111 '|', 111
112 'bold', 112
113 'italic', 113
114 'link', 114 } )
115 'bulletedList', 115 .then( editor => {
116 'numberedList', 116 window.editor = editor;
117 '|', 117
118 'imageUpload', 118
119 'blockQuote', 119
120 'insertTable', 120
121 'undo', 121 } )
122 'redo' 122 .catch( error => {
123 ] 123 console.error( 'Oops, something went wrong!' );
124 }, 124 console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
125 language: 'fr', 125 console.warn( 'Build id: snbfnxyy4drd-nofxirpg8ewj' );
126 image: { 126 console.error( error );
127 toolbar: [ 127 } );
128 'imageTextAlternative', 128 </script>
129 'imageStyle:full', 129 </body>
130 'imageStyle:side', 130</html> \ No newline at end of file
131 'linkImage'
132 ]
133 },
134 table: {
135 contentToolbar: [
136 'tableColumn',
137 'tableRow',
138 'mergeTableCells',
139 'tableProperties'
140 ]
141 },
142 licenseKey: '',
143
144
145 } )
146 .then( editor => {
147 window.editor = editor;
148
149
150
151
152
153
154
155
156 } )
157 .catch( error => {
158 console.error( 'Oops, something went wrong!' );
159 console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
160 console.warn( 'Build id: aovpauzd25hi-dqoovaepm42n' );
161 console.error( error );
162 } );
163 </script>
164</body> \ No newline at end of file
diff --git a/lib/ckeditor5/sample/styles.css b/lib/ckeditor5/sample/styles.css
index 218ca9d..c7cbf76 100644
--- a/lib/ckeditor5/sample/styles.css
+++ b/lib/ckeditor5/sample/styles.css
@@ -1,465 +1,500 @@
1/** 1/**
2 * @license Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved. 2 * @license Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
3 * This file is licensed under the terms of the MIT License (see LICENSE.md). 3 * This file is licensed under the terms of the MIT License (see LICENSE.md).
4 */ 4 */
5 5
6 :root { 6:root {
7 --ck-sample-base-spacing: 2em; 7 --ck-sample-base-spacing: 2em;
8 --ck-sample-color-white: #fff; 8 --ck-sample-color-white: #fff;
9 --ck-sample-color-green: #279863; 9 --ck-sample-color-green: #279863;
10 --ck-sample-color-blue: #1a9aef; 10 --ck-sample-color-blue: #1a9aef;
11 --ck-sample-container-width: 1285px; 11 --ck-sample-container-width: 1285px;
12 --ck-sample-sidebar-width: 350px; 12 --ck-sample-sidebar-width: 350px;
13 --ck-sample-editor-min-height: 400px; 13 --ck-sample-editor-min-height: 400px;
14 --ck-sample-editor-z-index: 10; 14 --ck-sample-editor-z-index: 10;
15} 15}
16 16
17/* --------- EDITOR STYLES ---------------------------------------------------------------------------------------- */ 17/* --------- EDITOR STYLES ---------------------------------------------------------------------------------------- */
18 18
19.editor__editable, 19.editor__editable,
20/* Classic build. */ 20/* Classic build. */
21main .ck-editor[role='application'] .ck.ck-content, 21main .ck-editor[role='application'] .ck.ck-content,
22/* Decoupled document build. */ 22/* Decoupled document build. */
23.ck.editor__editable[role='textbox'], 23.ck.editor__editable[role='textbox'],
24.ck.ck-editor__editable[role='textbox'], 24.ck.ck-editor__editable[role='textbox'],
25/* Inline & Balloon build. */ 25/* Inline & Balloon build. */
26.ck.editor[role='textbox'] { 26.ck.editor[role='textbox'] {
27 width: 100%; 27 width: 100%;
28 background: #fff; 28 background: #fff;
29 font-size: 1em; 29 font-size: 1em;
30 line-height: 1.6em; 30 line-height: 1.6em;
31 min-height: var(--ck-sample-editor-min-height); 31 min-height: var(--ck-sample-editor-min-height);
32 padding: 1.5em 2em; 32 padding: 1.5em 2em;
33} 33}
34 34
35.ck.ck-editor__editable { 35main .ck-editor[role='application'] {
36 background: #fff; 36 overflow: auto;
37 border: 1px solid hsl(0, 0%, 70%); 37}
38 width: 100%; 38
39} 39.ck.ck-editor__editable {
40 40 background: #fff;
41.ck.ck-editor { 41 border: 1px solid hsl(0, 0%, 70%);
42 /* To enable toolbar wrapping. */ 42 width: 100%;
43 width: 100%; 43}
44 overflow-x: hidden; 44
45} 45/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
46 46.ck.ck-editor__editable {
47/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */ 47 position: relative;
48.ck.ck-editor__editable { 48 z-index: var(--ck-sample-editor-z-index);
49 position: relative; 49}
50 z-index: var(--ck-sample-editor-z-index); 50
51} 51.editor-container {
52 52 display: flex;
53/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/ 53 flex-direction: row;
54body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar { 54 flex-wrap: nowrap;
55 width: 100%; 55 position: relative;
56} 56 width: 100%;
57 57 justify-content: center;
58body[ data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable, 58}
59body[ data-editor='DecoupledDocumentEditor'] .row-editor .editor { 59
60 width: 18.5cm; 60/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
61 height: 100%; 61body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
62 min-height: 26.25cm; 62 width: 100%;
63 padding: 1.75cm 1.5cm; 63}
64 margin: 2.5rem; 64
65 border: 1px hsl( 0, 0%, 82.7% ) solid; 65body[data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
66 background-color: var(--ck-sample-color-white); 66body[data-editor='DecoupledDocumentEditor'] .row-editor .editor {
67 box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 ); 67 /* A pixel is added for each of the border. */
68} 68 width: calc(21cm + 2px);
69 69 min-height: calc(29.7cm + 2px);
70body[ data-editor='DecoupledDocumentEditor'] .row-editor { 70 /* To avoid having extra scrolls inside the editor container. */
71 display: flex; 71 height: fit-content;
72 position: relative; 72 padding: 2cm 1.2cm;
73 justify-content: center; 73 margin: 2.5rem;
74 overflow-y: auto; 74 border: 1px hsl( 0, 0%, 82.7% ) solid;
75 background-color: #f2f2f2; 75 background-color: var(--ck-sample-color-white);
76 border: 1px solid hsl(0, 0%, 77%); 76 box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
77} 77 box-sizing: border-box;
78 78}
79body[data-editor='DecoupledDocumentEditor'] .sidebar { 79
80 background: transparent; 80body[data-editor='DecoupledDocumentEditor'] .row-editor {
81 border: 0; 81 display: flex;
82 box-shadow: none; 82 position: relative;
83} 83 justify-content: center;
84 84 overflow-y: auto;
85/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */ 85 background-color: #f2f2f2;
86.sidebar { 86 border: 1px solid hsl(0, 0%, 77%);
87 padding: 0 15px; 87 /* Limit the max-height of the editor to avoid scrolling from bottom to top to see the toolbar. */
88 position: relative; 88 max-height: 700px;
89 min-width: var(--ck-sample-sidebar-width); 89}
90 max-width: var(--ck-sample-sidebar-width); 90
91 font-size: 20px; 91body[data-editor='DecoupledDocumentEditor'] .sidebar {
92 border: 1px solid hsl(0, 0%, 77%); 92 background: transparent;
93 background: hsl(0, 0%, 98%); 93 border: 0;
94 border-left: 0; 94 box-shadow: none;
95 overflow: hidden; 95}
96 min-height: 100%; 96
97 flex-grow: 1; 97/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */
98} 98.sidebar {
99 99 padding: 0 15px;
100/* Do not inherit styles related to the editable editor content. See line 25.*/ 100 position: relative;
101.sidebar .ck-content[role='textbox'], 101 min-width: var(--ck-sample-sidebar-width);
102.ck.ck-annotation-wrapper .ck-content[role='textbox'] { 102 max-width: var(--ck-sample-sidebar-width);
103 min-height: unset; 103 font-size: 20px;
104 width: unset; 104 border: 1px solid hsl(0, 0%, 77%);
105 padding: 0; 105 background: hsl(0, 0%, 98%);
106 background: transparent; 106 border-left: 0;
107} 107 overflow: hidden;
108 108 min-height: 100%;
109.sidebar.narrow { 109 flex-grow: 1;
110 min-width: 60px; 110}
111 flex-grow: 0; 111
112} 112/* Do not inherit styles related to the editable editor content. See line 25.*/
113 113.sidebar .ck-content[role='textbox'],
114.sidebar.hidden { 114.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
115 display: none !important; 115 min-height: unset;
116} 116 width: unset;
117 117 padding: 0;
118#sidebar-display-toggle { 118 background: transparent;
119 position: absolute; 119}
120 z-index: 1; 120
121 width: 30px; 121.sidebar.narrow {
122 height: 30px; 122 min-width: 60px;
123 text-align: center; 123 flex-grow: 0;
124 left: 15px; 124}
125 top: 30px; 125
126 border: 0; 126.sidebar.hidden {
127 padding: 0; 127 display: none !important;
128 color: hsl( 0, 0%, 50% ); 128}
129 transition: 250ms ease color; 129
130 background-color: transparent; 130#sidebar-display-toggle {
131} 131 position: absolute;
132 132 z-index: 1;
133#sidebar-display-toggle:hover { 133 width: 30px;
134 color: hsl( 0, 0%, 30% ); 134 height: 30px;
135 cursor: pointer; 135 text-align: center;
136} 136 left: 15px;
137 137 top: 30px;
138#sidebar-display-toggle:focus, 138 border: 0;
139#sidebar-display-toggle:active { 139 padding: 0;
140 outline: none; 140 color: hsl( 0, 0%, 50% );
141 border: 1px solid #a9d29d; 141 transition: 250ms ease color;
142} 142 background-color: transparent;
143 143}
144#sidebar-display-toggle svg { 144
145 fill: currentColor; 145#sidebar-display-toggle:hover {
146} 146 color: hsl( 0, 0%, 30% );
147 147 cursor: pointer;
148/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */ 148}
149.row-presence { 149
150 width: 100%; 150#sidebar-display-toggle:focus,
151 border: 1px solid hsl(0, 0%, 77%); 151#sidebar-display-toggle:active {
152 border-bottom: 0; 152 outline: none;
153 background: hsl(0, 0%, 98%); 153 border: 1px solid #a9d29d;
154 padding: var(--ck-spacing-small); 154}
155 155
156 /* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */ 156#sidebar-display-toggle svg {
157 box-shadow: 0 1px 0 0 hsl(0, 0%, 77%); 157 fill: currentColor;
158 158}
159 /* Make `z-index` bigger than `.editor` to properly display tooltips. */ 159
160 z-index: 20; 160/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */
161} 161.row-presence {
162 162 width: 100%;
163.ck.ck-presence-list { 163 border: 1px solid hsl(0, 0%, 77%);
164 flex: 1; 164 border-bottom: 0;
165 padding: 1.25rem .75rem; 165 background: hsl(0, 0%, 98%);
166} 166 padding: var(--ck-spacing-small);
167 167
168.presence .ck.ck-presence-list__counter { 168 /* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */
169 order: 2; 169 box-shadow: 0 1px 0 0 hsl(0, 0%, 77%);
170 margin-left: var(--ck-spacing-large) 170
171} 171 /* Make `z-index` bigger than `.editor` to properly display tooltips. */
172 172 z-index: 20;
173/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */ 173}
174.collaboration-demo__row { 174
175 display: flex; 175.ck.ck-presence-list {
176 position: relative; 176 flex: 1;
177 justify-content: center; 177 padding: 1.25rem .75rem;
178 overflow-y: auto; 178}
179 background-color: #f2f2f2; 179
180 border: 1px solid hsl(0, 0%, 77%); 180.presence .ck.ck-presence-list__counter {
181} 181 order: 2;
182 182 margin-left: var(--ck-spacing-large)
183body[ data-editor='InlineEditor'] .collaboration-demo__row { 183}
184 border: 0; 184
185} 185/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */
186 186.collaboration-demo__row {
187.collaboration-demo__container { 187 display: flex;
188 max-width: var(--ck-sample-container-width); 188 position: relative;
189 margin: 0 auto; 189 justify-content: center;
190 padding: 1.25rem; 190 overflow-y: auto;
191} 191 background-color: #f2f2f2;
192 192 border: 1px solid hsl(0, 0%, 77%);
193.presence, .collaboration-demo__row { 193}
194 transition: .2s opacity; 194
195} 195body[data-editor='InlineEditor'] .collaboration-demo__row {
196 196 border: 0;
197.collaboration-demo__topbar { 197}
198 background: #fff; 198
199 border: 1px solid var(--ck-color-toolbar-border); 199.collaboration-demo__container {
200 display: flex; 200 max-width: var(--ck-sample-container-width);
201 justify-content: space-between; 201 margin: 0 auto;
202 align-items: center; 202 padding: 1.25rem;
203 border-bottom: 0; 203}
204 border-radius: 4px 4px 0 0; 204
205} 205.presence, .collaboration-demo__row {
206 206 transition: .2s opacity;
207.collaboration-demo__topbar .btn { 207}
208 margin-right: 1em; 208
209 outline-offset: 2px; 209.collaboration-demo__topbar {
210 outline-width: 2px; 210 background: #fff;
211 background-color: var( --ck-sample-color-blue ); 211 border: 1px solid var(--ck-color-toolbar-border);
212} 212 display: flex;
213 213 justify-content: space-between;
214.collaboration-demo__topbar .btn:focus, 214 align-items: center;
215.collaboration-demo__topbar .btn:hover { 215 border-bottom: 0;
216 border-color: var( --ck-sample-color-blue ); 216 border-radius: 4px 4px 0 0;
217} 217}
218 218
219.collaboration-demo__share { 219.collaboration-demo__topbar .btn {
220 display: flex; 220 margin-right: 1em;
221 align-items: center; 221 outline-offset: 2px;
222 padding: 1.25rem .75rem 222 outline-width: 2px;
223} 223 background-color: var( --ck-sample-color-blue );
224 224}
225.collaboration-demo__share-description p { 225
226 margin: 0; 226.collaboration-demo__topbar .btn:focus,
227 font-weight: bold; 227.collaboration-demo__topbar .btn:hover {
228 font-size: 0.9em; 228 border-color: var( --ck-sample-color-blue );
229} 229}
230 230
231.collaboration-demo__share input { 231.collaboration-demo__share {
232 height: auto; 232 display: flex;
233 font-size: 0.9em; 233 align-items: center;
234 min-width: 220px; 234 padding: 1.25rem .75rem
235 margin: 0 10px; 235}
236 border-radius: 4px; 236
237 border: 1px solid var(--ck-color-toolbar-border) 237.collaboration-demo__share-description p {
238} 238 margin: 0;
239 239 font-weight: bold;
240.collaboration-demo__share button, 240 font-size: 0.9em;
241.collaboration-demo__share input { 241}
242 height: 40px; 242
243 padding: 5px 10px; 243.collaboration-demo__share input {
244} 244 height: auto;
245 245 font-size: 0.9em;
246.collaboration-demo__share button { 246 min-width: 220px;
247 position: relative; 247 margin: 0 10px;
248} 248 border-radius: 4px;
249 249 border: 1px solid var(--ck-color-toolbar-border)
250.collaboration-demo__share button:focus { 250}
251 outline: none; 251
252} 252.collaboration-demo__share button,
253 253.collaboration-demo__share input {
254.collaboration-demo__share button[data-tooltip]::before, 254 height: 40px;
255.collaboration-demo__share button[data-tooltip]::after { 255 padding: 5px 10px;
256 position: absolute; 256}
257 visibility: hidden; 257
258 opacity: 0; 258.collaboration-demo__share button {
259 pointer-events: none; 259 position: relative;
260 transition: all .15s cubic-bezier(.5,1,.25,1); 260}
261 z-index: 1; 261
262} 262.collaboration-demo__share button:focus {
263 263 outline: none;
264.collaboration-demo__share button[data-tooltip]::before { 264}
265 content: attr(data-tooltip); 265
266 padding: 5px 15px; 266.collaboration-demo__share button[data-tooltip]::before,
267 border-radius: 3px; 267.collaboration-demo__share button[data-tooltip]::after {
268 background: #111; 268 position: absolute;
269 color: #fff; 269 visibility: hidden;
270 text-align: center; 270 opacity: 0;
271 font-size: 11px; 271 pointer-events: none;
272 top: 100%; 272 transition: all .15s cubic-bezier(.5,1,.25,1);
273 left: 50%; 273 z-index: 1;
274 margin-top: 5px; 274}
275 transform: translateX(-50%); 275
276} 276.collaboration-demo__share button[data-tooltip]::before {
277 277 content: attr(data-tooltip);
278.collaboration-demo__share button[data-tooltip]::after { 278 padding: 5px 15px;
279 content: ''; 279 border-radius: 3px;
280 border: 5px solid transparent; 280 background: #111;
281 width: 0; 281 color: #fff;
282 font-size: 0; 282 text-align: center;
283 line-height: 0; 283 font-size: 11px;
284 top: 100%; 284 top: 100%;
285 left: 50%; 285 left: 50%;
286 transform: translateX(-50%); 286 margin-top: 5px;
287 border-bottom: 5px solid #111; 287 transform: translateX(-50%);
288 border-top: none; 288}
289} 289
290 290.collaboration-demo__share button[data-tooltip]::after {
291.collaboration-demo__share button[data-tooltip]:hover:before, 291 content: '';
292.collaboration-demo__share button[data-tooltip]:hover:after { 292 border: 5px solid transparent;
293 visibility: visible; 293 width: 0;
294 opacity: 1; 294 font-size: 0;
295} 295 line-height: 0;
296 296 top: 100%;
297.collaboration-demo--ready { 297 left: 50%;
298 overflow: visible; 298 transform: translateX(-50%);
299 height: auto; 299 border-bottom: 5px solid #111;
300} 300 border-top: none;
301 301}
302.collaboration-demo--ready .presence, 302
303.collaboration-demo--ready .collaboration-demo__row { 303.collaboration-demo__share button[data-tooltip]:hover:before,
304 opacity: 1; 304.collaboration-demo__share button[data-tooltip]:hover:after {
305} 305 visibility: visible;
306 306 opacity: 1;
307/* --------- PAGINATION FEATURE ------------------------------------------------------------------------------------ */ 307}
308 308
309/* Pagination view line must be stacked at least at the same level as the editor, 309.collaboration-demo--ready {
310 otherwise it will be hidden underneath. */ 310 overflow: visible;
311.ck.ck-pagination-view-line { 311 height: auto;
312 z-index: var(--ck-sample-editor-z-index); 312}
313} 313
314 314.collaboration-demo--ready .presence,
315/* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */ 315.collaboration-demo--ready .collaboration-demo__row {
316body, html { 316 opacity: 1;
317 padding: 0; 317}
318 margin: 0; 318
319 319/* --------- PAGINATION FEATURE ------------------------------------------------------------------------------------ */
320 font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 320
321 font-size: 16px; 321/* Pagination view line must be stacked at least at the same level as the editor,
322 line-height: 1.5; 322 otherwise it will be hidden underneath. */
323} 323.ck.ck-pagination-view-line {
324 324 z-index: var(--ck-sample-editor-z-index);
325body { 325}
326 height: 100%; 326
327 color: #2D3A4A; 327/* --------- REVISION HISTORY FEATURE ------------------------------------------------------------------------------ */
328} 328
329 329.revision-viewer-container {
330body * { 330 display: none;
331 box-sizing: border-box; 331}
332} 332
333 333.revision-viewer-sidebar {
334a { 334 position: relative;
335 color: #38A5EE; 335 min-width: 310px;
336} 336 overflow: hidden;
337 337 background: var(--ck-color-toolbar-background);
338header .centered { 338 border: 1px solid var(--ck-color-toolbar-border);
339 display: flex; 339 margin-left: -1px;
340 flex-flow: row nowrap; 340}
341 justify-content: space-between; 341
342 align-items: center; 342/* A case when Pagination and Revision History features are enabled in the editor. */
343 min-height: 8em; 343/* Move the square with page number from the Pagination plugin to the left side, so that it does not cover the RH sidebar. */
344} 344body[data-revision-history='true'] .ck.ck-pagination-view-line::after {
345 345 transform: translateX(-100%) !important;
346header h1 a { 346 left: -1px !important;
347 font-size: 20px; 347 right: unset !important;
348 display: flex; 348}
349 align-items: center; 349
350 color: #2D3A4A; 350/* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */
351 text-decoration: none; 351body, html {
352} 352 padding: 0;
353 353 margin: 0;
354header h1 img { 354
355 display: block; 355 font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
356 height: 64px; 356 font-size: 16px;
357} 357 line-height: 1.5;
358 358}
359header nav ul { 359
360 margin: 0; 360body {
361 padding: 0; 361 height: 100%;
362 list-style-type: none; 362 color: #2D3A4A;
363} 363}
364 364
365header nav ul li { 365body * {
366 display: inline-block; 366 box-sizing: border-box;
367} 367}
368 368
369header nav ul li + li { 369a {
370 margin-left: 1em; 370 color: #38A5EE;
371} 371}
372 372
373header nav ul li a { 373header .centered {
374 font-weight: bold; 374 display: flex;
375 text-decoration: none; 375 flex-flow: row nowrap;
376 color: #2D3A4A; 376 justify-content: space-between;
377} 377 align-items: center;
378 378 min-height: 8em;
379header nav ul li a:hover { 379}
380 text-decoration: underline; 380
381} 381header h1 a {
382 382 font-size: 20px;
383main .message { 383 display: flex;
384 padding: 0 0 var(--ck-sample-base-spacing); 384 align-items: center;
385 background: var(--ck-sample-color-green); 385 color: #2D3A4A;
386 color: var(--ck-sample-color-white); 386 text-decoration: none;
387} 387}
388 388
389main .message::after { 389header h1 img {
390 content: ""; 390 display: block;
391 z-index: -1; 391 height: 64px;
392 display: block; 392}
393 height: 10em; 393
394 width: 100%; 394header nav ul {
395 background: var(--ck-sample-color-green); 395 margin: 0;
396 position: absolute; 396 padding: 0;
397 left: 0; 397 list-style-type: none;
398} 398}
399 399
400main .message h2 { 400header nav ul li {
401 position: relative; 401 display: inline-block;
402 padding-top: 1em; 402}
403 font-size: 2em; 403
404} 404header nav ul li + li {
405 405 margin-left: 1em;
406.centered { 406}
407 /* Hide overlapping comments. */ 407
408 overflow: hidden; 408header nav ul li a {
409 max-width: var(--ck-sample-container-width); 409 font-weight: bold;
410 margin: 0 auto; 410 text-decoration: none;
411 padding: 0 var(--ck-sample-base-spacing); 411 color: #2D3A4A;
412} 412}
413 413
414.row { 414header nav ul li a:hover {
415 display: flex; 415 text-decoration: underline;
416 position: relative; 416}
417} 417
418 418main .message {
419.btn { 419 padding: 0 0 var(--ck-sample-base-spacing);
420 cursor: pointer; 420 background: var(--ck-sample-color-green);
421 padding: 8px 16px; 421 color: var(--ck-sample-color-white);
422 font-size: 1rem; 422}
423 user-select: none; 423
424 border-radius: 4px; 424main .message::after {
425 transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out; 425 content: "";
426 background-color: var(--ck-sample-color-button-blue); 426 z-index: -1;
427 border-color: var(--ck-sample-color-button-blue); 427 display: block;
428 color: var(--ck-sample-color-white); 428 height: 10em;
429 display: inline-block; 429 width: 100%;
430} 430 background: var(--ck-sample-color-green);
431 431 position: absolute;
432.btn--tiny { 432 left: 0;
433 padding: 6px 12px; 433}
434 font-size: .8rem; 434
435} 435main .message h2 {
436 436 position: relative;
437footer { 437 padding-top: 1em;
438 margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing); 438 font-size: 2em;
439 font-size: .8em; 439}
440 text-align: center; 440
441 color: rgba(0,0,0,.4); 441.centered {
442} 442 /* Hide overlapping comments. */
443 443 overflow: hidden;
444/* --------- RWD --------------------------------------------------------------------------------------------------- */ 444 max-width: var(--ck-sample-container-width);
445@media screen and ( max-width: 800px ) { 445 margin: 0 auto;
446 :root { 446 padding: 0 var(--ck-sample-base-spacing);
447 --ck-sample-base-spacing: 1em; 447}
448 } 448
449 449.row {
450 header h1 { 450 display: flex;
451 width: 100%; 451 position: relative;
452 } 452}
453 453
454 header h1 img { 454.btn {
455 height: 40px; 455 cursor: pointer;
456 } 456 padding: 8px 16px;
457 457 font-size: 1rem;
458 header nav ul { 458 user-select: none;
459 text-align: right; 459 border-radius: 4px;
460 } 460 transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out;
461 461 background-color: var(--ck-sample-color-button-blue);
462 main .message h2 { 462 border-color: var(--ck-sample-color-button-blue);
463 font-size: 1.5em; 463 color: var(--ck-sample-color-white);
464 } 464 display: inline-block;
465} 465}
466
467.btn--tiny {
468 padding: 6px 12px;
469 font-size: .8rem;
470}
471
472footer {
473 margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing);
474 font-size: .8em;
475 text-align: center;
476 color: rgba(0,0,0,.4);
477}
478
479/* --------- RWD --------------------------------------------------------------------------------------------------- */
480@media screen and ( max-width: 800px ) {
481 :root {
482 --ck-sample-base-spacing: 1em;
483 }
484
485 header h1 {
486 width: 100%;
487 }
488
489 header h1 img {
490 height: 40px;
491 }
492
493 header nav ul {
494 text-align: right;
495 }
496
497 main .message h2 {
498 font-size: 1.5em;
499 }
500}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-15 14:10:22 +0000