8
0

slotconversion.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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]:after {
  22. content: attr(data-insert-count);
  23. position: relative;
  24. font-size: 10px;
  25. top: -5px;
  26. right: 0;
  27. float: right;
  28. border: 1px solid hsl(219, 86%, 31%);
  29. background: hsl(219, 100%, 91%);
  30. padding: 0 2px;
  31. opacity: 0.8;
  32. }
  33. </style>
  34. </head>
  35. <div id="editor">
  36. <div class="box">
  37. <div class="box__wrapper">
  38. <div class="box-meta box-meta-header">
  39. <div class="box-meta-header-icon"></div>
  40. <div class="box-meta-header-title">
  41. <h2>I'm a title</h2>
  42. </div>
  43. </div>
  44. <div class="box-content">
  45. <div class="box-content-field"><p>Foo</p></div>
  46. <div class="box-content-field">
  47. <ul>
  48. <li>Bar</li>
  49. </ul>
  50. </div>
  51. <div class="box-content-field"><p>Baz</p></div>
  52. </div>
  53. <div class="box-meta box-meta-author">
  54. <a href="www.example.com">@john</a>
  55. </div>
  56. </div>
  57. </div>
  58. </div>