|
|
@@ -1,3 +1,41 @@
|
|
|
<style>
|
|
|
- svg.ck-icon .ck-icon__fill { fill: yellow; }
|
|
|
+ #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>
|