inverted.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <style>
  2. body {
  3. height: 2000px;
  4. }
  5. :root {
  6. /* Helper variables to avoid duplication in the colors. */
  7. --ck-custom-background: hsl(270, 1%, 29%);
  8. --ck-custom-foreground: hsl(255, 3%, 18%);
  9. --ck-custom-border: hsl(300, 1%, 22%);
  10. --ck-custom-white: hsl(0, 0%, 100%);
  11. /* -- Overrides generic colors -------------------------------------------------------------- */
  12. --ck-color-base-foreground: var(--ck-custom-background);
  13. --ck-color-focus-border: hsl(208, 90%, 62%);
  14. --ck-color-text: hsl(0, 0%, 98%);
  15. --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
  16. --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
  17. /* -- Overrides the default .ck-button class colors ----------------------------------------- */
  18. --ck-color-button-default-background: var(--ck-custom-background);
  19. --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
  20. --ck-color-button-default-active-background: hsl(270, 2%, 20%);
  21. --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
  22. --ck-color-button-default-disabled-background: var(--ck-custom-background);
  23. --ck-color-button-on-background: var(--ck-custom-foreground);
  24. --ck-color-button-on-hover-background: hsl(255, 4%, 16%);
  25. --ck-color-button-on-active-background: hsl(255, 4%, 14%);
  26. --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
  27. --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
  28. --ck-color-button-action-background: hsl(168, 76%, 42%);
  29. --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
  30. --ck-color-button-action-active-background: hsl(168, 76%, 36%);
  31. --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
  32. --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
  33. --ck-color-button-action-text: var(--ck-custom-white);
  34. --ck-color-button-save: hsl(120, 100%, 46%);
  35. --ck-color-button-cancel: hsl(15, 100%, 56%);
  36. /* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
  37. --ck-color-dropdown-panel-background: var(--ck-custom-background);
  38. --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
  39. /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
  40. --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
  41. --ck-color-split-button-hover-border: var(--ck-custom-foreground);
  42. /* -- Overrides the default .ck-input class colors ------------------------------------------ */
  43. --ck-color-input-background: var(--ck-custom-foreground);
  44. --ck-color-input-border: hsl(257, 3%, 43%);
  45. --ck-color-input-text: hsl(0, 0%, 98%);
  46. --ck-color-input-disabled-background: hsl(255, 4%, 21%);
  47. --ck-color-input-disabled-border: hsl(250, 3%, 38%);
  48. --ck-color-input-disabled-text: hsl(0, 0%, 46%);
  49. /* -- Overrides the default .ck-list class colors ------------------------------------------- */
  50. --ck-color-list-background: var(--ck-custom-background);
  51. --ck-color-list-button-hover-background: var(--ck-custom-foreground);
  52. --ck-color-list-button-on-background: hsl(208, 88%, 52%);
  53. --ck-color-list-button-on-text: var(--ck-custom-white);
  54. /* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
  55. --ck-color-panel-background: var(--ck-custom-background);
  56. --ck-color-panel-border: var(--ck-custom-border);
  57. /* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
  58. --ck-color-toolbar-background: var(--ck-custom-background);
  59. --ck-color-toolbar-border: var(--ck-custom-border);
  60. /* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
  61. --ck-color-tooltip-background: hsl(252, 7%, 14%);
  62. --ck-color-tooltip-text: hsl(0, 0%, 93%);
  63. /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
  64. --ck-color-image-caption-background: hsl(0, 0%, 97%);
  65. --ck-color-image-caption-text: hsl(0, 0%, 20%);
  66. /* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
  67. --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
  68. --ck-color-widget-hover-border: hsl(43, 100%, 68%);
  69. --ck-color-widget-editable-focus-background: var(--ck-custom-white);
  70. /* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
  71. --ck-color-link-default: hsl(190, 100%, 75%);
  72. }
  73. </style>
  74. <h2>Editor-classic</h2>
  75. <div id="editor-classic">
  76. <h2>The three greatest things you learn from traveling</h2><p>Like all the great things on earth traveling teaches us by example. Here are some of the most <strong>precious lessons</strong> I’ve learned over the years of traveling.</p><h3>Appreciation of diversity</h3><p>Getting used to an <a href="https://ckeditor.com">entirely different culture</a> can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
  77. </div>
  78. <h2>Editor-balloon</h2>
  79. <div id="editor-balloon">
  80. <h2>The three greatest things you learn from traveling</h2><p>Like all the great things on earth traveling teaches us by example. Here are some of the most <strong>precious lessons</strong> I’ve learned over the years of traveling.</p><h3>Appreciation of diversity</h3><p>Getting used to an <a href="https://ckeditor.com">entirely different culture</a> can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
  81. </div>