| 1234567891011121314151617181920212223242526272829303132333435363738394041 |
- <style>
- #color .ck-toolbar .ck-button {
- color: hsl(0deg 100% 50%);
- }
- #inverted .ck-toolbar {
- --ck-custom-background: hsl(270, 1%, 29%);
- --ck-custom-border: hsl(300, 1%, 22%);
- --ck-color-base-foreground: var(--ck-custom-background);
- --ck-color-focus-border: hsl(208, 90%, 62%);
- --ck-color-text: hsl(0, 0%, 98%);
- --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
- --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
- --ck-color-button-default-background: var(--ck-custom-background);
- --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
- --ck-color-button-default-active-background: hsl(270, 2%, 20%);
- --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
- --ck-color-button-default-disabled-background: var(--ck-custom-background);
- --ck-color-toolbar-background: var(--ck-custom-background);
- --ck-color-toolbar-border: var(--ck-custom-border);
- }
- #zoom .ck-toolbar .ck-button {
- font-size: 25px;
- }
- </style>
- <h2>Standard</h2>
- <div id="standard"></div>
- <h2>Colors</h2>
- <div id="color"></div>
- <h2>Colors inverted</h2>
- <div id="inverted"></div>
- <h2>Scaled up</h2>
- <div id="zoom"></div>
|