slotconversion.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <head>
  2. <style>
  3. body {
  4. max-width: 800px;
  5. margin: 20px auto;
  6. }
  7. .box {
  8. border: 1px solid hsl(0, 0%, 20%);
  9. padding: 2px;
  10. background: hsl(0, 0%, 40%);
  11. }
  12. .box-meta {
  13. border: 1px solid hsl(0, 0%, 80%);
  14. background: hsl(0, 0%, 60%);
  15. }
  16. .box-content-field {
  17. padding: .5em;
  18. background: hsl(0, 0%, 100%);
  19. border: 1px solid hsl(0, 0%, 80%)
  20. }
  21. .ck.ck-content [data-insert-count] {
  22. position: relative;
  23. }
  24. .ck.ck-content [data-insert-count]:after {
  25. content: attr(data-insert-count);
  26. position: absolute;
  27. font-size: 10px;
  28. top: 2px;
  29. right: 2px;
  30. border: 1px solid hsl(219, 86%, 31%);
  31. background: hsl(219, 100%, 91%);
  32. padding: 0 2px;
  33. opacity: 0.8;
  34. }
  35. </style>
  36. </head>
  37. <div id="editor">
  38. <div class="box">
  39. <div class="box__wrapper">
  40. <div class="box-meta box-meta-header">
  41. <div class="box-meta-header-icon"></div>
  42. <div class="box-meta-header-title">
  43. <h2>I'm a title</h2>
  44. </div>
  45. </div>
  46. <div class="box-content">
  47. <div class="box-content-field"><p>Foo</p></div>
  48. <div class="box-content-field">
  49. <ul>
  50. <li>Bar</li>
  51. </ul>
  52. </div>
  53. <div class="box-content-field"><p>Baz</p></div>
  54. </div>
  55. <div class="box-meta box-meta-author">
  56. <a href="www.example.com">@john</a>
  57. </div>
  58. </div>
  59. </div>
  60. </div>