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