1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | :root {
|
7 | --ck-color-table-caption-background: hsl(0, 0%, 97%);
|
8 | --ck-color-table-caption-text: hsl(0, 0%, 20%);
|
9 | --ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
|
10 | }
|
11 |
|
12 |
|
13 | .ck-content .table > figcaption {
|
14 | display: table-caption;
|
15 | caption-side: top;
|
16 | word-break: break-word;
|
17 | text-align: center;
|
18 | color: var(--ck-color-table-caption-text);
|
19 | background-color: var(--ck-color-table-caption-background);
|
20 | padding: .6em;
|
21 | font-size: .75em;
|
22 | outline-offset: -1px;
|
23 | }
|
24 |
|
25 |
|
26 | .ck.ck-editor__editable .table > figcaption {
|
27 | &.table__caption_highlighted {
|
28 | animation: ck-table-caption-highlight .6s ease-out;
|
29 | }
|
30 |
|
31 | &.ck-placeholder::before {
|
32 | padding-left: inherit;
|
33 | padding-right: inherit;
|
34 |
|
35 | |
36 |
|
37 |
|
38 |
|
39 | white-space: nowrap;
|
40 | overflow: hidden;
|
41 | text-overflow: ellipsis;
|
42 | }
|
43 | }
|
44 |
|
45 | @keyframes ck-table-caption-highlight {
|
46 | 0% {
|
47 | background-color: var(--ck-color-table-caption-highlighted-background);
|
48 | }
|
49 |
|
50 | 100% {
|
51 | background-color: var(--ck-color-table-caption-background);
|
52 | }
|
53 | }
|