| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <div id="snippet-title">
- <h1></h1>
- <p></p>
- </div>
- <h3>Console</h3>
- <pre><code class="plaintext title-console title-console__title">''</code></pre>
- <pre><code class="plaintext title-console title-console__body">'<p>&nbsp;</p>'</code></pre>
- <pre><code class="plaintext title-console title-console__data">''</code></pre>
- <style>
- .ck.ck-editor__editable_inline {
- border-color: hsl(0, 0%, 77%);
- }
- /* Let's move pilcrow icon inside the editor space. */
- .ck.ck-block-toolbar-button {
- transform: translateX( 40px );
- }
- #snippet-title {
- min-height: 300px;
- max-width: 450px;
- padding: 50px;
- margin: 50px auto 0;
- box-shadow: 5px 5px 1px 0px hsla( 0, 0%, 0%, 0.1);
- }
- #snippet-title h1 {
- padding-top: 0;
- }
- #title-console {
- max-height: 300px;
- overflow: auto;
- white-space: normal;
- background: #2b2c26;
- margin-top: 20px;
- transition: background-color 500ms;
- }
- #title-console.updated {
- background: green;
- }
- .title-console__title,
- .title-console__body {
- margin-bottom: 10px;
- }
- .title-console__title::before,
- .title-console__body::before,
- .title-console__data::before {
- display: inline-block;
- margin-right: 5px;
- opacity: 0.5;
- }
- .title-console__title::before {
- content: 'Title:'
- }
- .title-console__body::before {
- content: 'Body:'
- }
- .title-console__data::before {
- content: 'Data:';
- }
- </style>
|