| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <head>
- <style>
- body {
- max-width: 800px;
- margin: 20px auto;
- }
- .box {
- border: 1px solid hsl(0, 0%, 20%);
- padding: 2px;
- background: hsl(0, 0%, 40%);
- }
- .box-meta {
- border: 1px solid hsl(0, 0%, 80%);
- background: hsl(0, 0%, 60%);
- }
- .box-content-field {
- padding: .5em;
- background: hsl(0, 0%, 100%);
- border: 1px solid hsl(0, 0%, 80%)
- }
- .ck.ck-content [data-insert-count] {
- position: relative;
- }
- .ck.ck-content [data-insert-count]:after {
- content: attr(data-insert-count);
- position: absolute;
- font-size: 10px;
- top: 2px;
- right: 2px;
- border: 1px solid hsl(219, 86%, 31%);
- background: hsl(219, 100%, 91%);
- padding: 0 2px;
- opacity: 0.8;
- }
- </style>
- </head>
- <div id="editor">
- <div class="box">
- <div class="box__wrapper">
- <div class="box-meta box-meta-header">
- <div class="box-meta-header-icon"></div>
- <div class="box-meta-header-title">
- <h2>I'm a title</h2>
- </div>
- </div>
- <div class="box-content">
- <div class="box-content-field"><p>Foo</p></div>
- <div class="box-content-field">
- <ul>
- <li>Bar</li>
- </ul>
- </div>
- <div class="box-content-field"><p>Baz</p></div>
- </div>
- <div class="box-meta box-meta-author">
- <a href="www.example.com">@john</a>
- </div>
- </div>
- </div>
- </div>
|