8
0

iconset.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <style>
  2. #color .ck-toolbar .ck-button {
  3. color: hsl(0deg 100% 50%);
  4. }
  5. #inverted .ck-toolbar {
  6. --ck-custom-background: hsl(270, 1%, 29%);
  7. --ck-custom-border: hsl(300, 1%, 22%);
  8. --ck-color-base-foreground: var(--ck-custom-background);
  9. --ck-color-focus-border: hsl(208, 90%, 62%);
  10. --ck-color-text: hsl(0, 0%, 98%);
  11. --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
  12. --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
  13. --ck-color-button-default-background: var(--ck-custom-background);
  14. --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
  15. --ck-color-button-default-active-background: hsl(270, 2%, 20%);
  16. --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
  17. --ck-color-button-default-disabled-background: var(--ck-custom-background);
  18. --ck-color-toolbar-background: var(--ck-custom-background);
  19. --ck-color-toolbar-border: var(--ck-custom-border);
  20. }
  21. #zoom .ck-toolbar .ck-button {
  22. font-size: 25px;
  23. }
  24. </style>
  25. <h2>Standard</h2>
  26. <div id="standard"></div>
  27. <h2>Colors</h2>
  28. <div id="color"></div>
  29. <h2>Colors inverted</h2>
  30. <div id="inverted"></div>
  31. <h2>Scaled up</h2>
  32. <div id="zoom"></div>