diff --git a/theme/ckeditor5-font/fontcolor.css b/theme/ckeditor5-font/fontcolor.css index 8a95801..243cba0 100644 --- a/theme/ckeditor5-font/fontcolor.css +++ b/theme/ckeditor5-font/fontcolor.css @@ -6,11 +6,14 @@ @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; .ck .ck-button.ck-color-table__remove-color { - border-bottom: 1px solid var(--ck-color-base-border); padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard); border-bottom-left-radius: 0; border-bottom-right-radius: 0; + &:not(:focus) { + border-bottom: 1px solid var(--ck-color-base-border); + } + & .ck.ck-icon { @mixin ck-dir ltr { margin-right: var(--ck-spacing-standard); diff --git a/theme/ckeditor5-table/inserttable.css b/theme/ckeditor5-table/inserttable.css new file mode 100644 index 0000000..2386601 --- /dev/null +++ b/theme/ckeditor5-table/inserttable.css @@ -0,0 +1,35 @@ +/* + * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +:root { + --ck-insert-table-dropdown-padding: 10px; + --ck-insert-table-dropdown-box-height: 11px; + --ck-insert-table-dropdown-box-width: 12px; + --ck-insert-table-dropdown-box-margin: 1px; +} + +.ck .ck-insert-table-dropdown__grid { + /* The width of a container should match 10 items in a row so there will be a 10x10 grid. */ + width: calc(var(--ck-insert-table-dropdown-box-width) * 10 + var(--ck-insert-table-dropdown-box-margin) * 20 + var(--ck-insert-table-dropdown-padding) * 2); + padding: var(--ck-insert-table-dropdown-padding) var(--ck-insert-table-dropdown-padding) 0; +} + +.ck .ck-insert-table-dropdown__label { + text-align: center; +} + +.ck .ck-insert-table-dropdown-grid-box { + width: var(--ck-insert-table-dropdown-box-width); + height: var(--ck-insert-table-dropdown-box-height); + margin: var(--ck-insert-table-dropdown-box-margin); + border: 1px solid var(--ck-color-base-border); + border-radius: 1px; + + &.ck-on { + border-color: var(--ck-color-focus-border); + background: var(--ck-color-focus-outer-shadow); + } +} + diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css index 4593a13..84297e2 100644 --- a/theme/ckeditor5-ui/components/button/button.css +++ b/theme/ckeditor5-ui/components/button/button.css @@ -35,8 +35,8 @@ a.ck.ck-button { /* Avoid flickering when the foucs border shows up. */ border: 1px solid transparent; - /* Apply some smooth transition to the box-shadow. */ - transition: box-shadow 200ms ease-in-out; + /* Apply some smooth transition to the box-shadow and border. */ + transition: box-shadow .2s ease-in-out, border .2s ease-in-out; /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */ -webkit-appearance: none; @@ -45,9 +45,6 @@ a.ck.ck-button { &:focus { @mixin ck-focus-ring; @mixin ck-box-shadow var(--ck-focus-outer-shadow); - - /* Disable border part of the focus ring for the buttons. It is too much. */ - border-color: transparent; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ diff --git a/theme/ckeditor5-ui/components/colorgrid/colorgrid.css b/theme/ckeditor5-ui/components/colorgrid/colorgrid.css index a7a7367..3444b75 100644 --- a/theme/ckeditor5-ui/components/colorgrid/colorgrid.css +++ b/theme/ckeditor5-ui/components/colorgrid/colorgrid.css @@ -6,23 +6,26 @@ @import "../../../mixins/_rounded.css"; :root { - --ck-color-grid-tile-size: 20px; + --ck-color-grid-tile-size: 24px; + + /* Not using global colors here because these may change but some colors in a pallette + * require special treatment. For instance, this ensures no matter what the UI text color is, + * the check icon will look good on the black color tile. */ + --ck-color-color-grid-check-icon: hsl(0, 0%, 0%); } .ck.ck-color-grid { - grid-gap: calc( var(--ck-spacing-standard) / 2 ); - padding: var(--ck-spacing-standard); + grid-gap: 5px; + padding: 8px; } .ck.ck-color-grid__tile { - @mixin ck-rounded-corners; - width: var(--ck-color-grid-tile-size); height: var(--ck-color-grid-tile-size); min-width: var(--ck-color-grid-tile-size); min-height: var(--ck-color-grid-tile-size); padding: 0; - transition: 200ms ease box-shadow; + transition: .2s ease box-shadow; border: 0; &.ck-disabled { @@ -36,18 +39,27 @@ & .ck.ck-icon { display: none; + color: var(--ck-color-color-grid-check-icon); } &.ck-on { - box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text); + box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text); & .ck.ck-icon { display: block; } } + &.ck-on, + &:focus:not( .ck-disabled ), + &:hover:not( .ck-disabled ) { + /* Disable the default .ck-button's border ring. */ + border: 0; + } + + &:focus:not( .ck-disabled ), &:hover:not( .ck-disabled ) { - box-shadow: 0 0 0 2px var(--ck-color-focus-border); + box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border); } } diff --git a/theme/ckeditor5-ui/components/list/list.css b/theme/ckeditor5-ui/components/list/list.css index 1581fde..aa479d4 100644 --- a/theme/ckeditor5-ui/components/list/list.css +++ b/theme/ckeditor5-ui/components/list/list.css @@ -23,7 +23,6 @@ width: 100%; text-align: left; border-radius: 0; - border: 0; /* List items should have the same height. Use absolute units to make sure it is so because e.g. different heading styles may have different height @@ -45,13 +44,17 @@ background: var(--ck-color-list-button-on-background); color: var(--ck-color-list-button-on-text); - &:hover:not(ck-disabled) { + &:hover:not(.ck-disabled) { background: var(--ck-color-list-button-on-background-focus); } &:active { box-shadow: none; } + + &:focus:not(.ck-disabled) { + border-color: var(--ck-color-base-background); + } } &:hover:not(.ck-disabled) { diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 0714758..50e7489 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -16,8 +16,8 @@ /* -- Generic colors ------------------------------------------------------------------------ */ - --ck-color-focus-border: hsl(208, 90%, 62%); - --ck-color-focus-shadow: hsla(209, 90%, 72%,.5); + --ck-color-focus-border: hsl(208, 79%, 51%); + --ck-color-focus-outer-shadow: hsl(207, 89%, 86%); --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3); --ck-color-focus-error-shadow: hsla(9,100%,56%,.3); --ck-color-text: var(--ck-color-base-text); diff --git a/theme/ckeditor5-ui/globals/_focus.css b/theme/ckeditor5-ui/globals/_focus.css index bedd5cb..f77a33f 100644 --- a/theme/ckeditor5-ui/globals/_focus.css +++ b/theme/ckeditor5-ui/globals/_focus.css @@ -12,7 +12,7 @@ /** * A visual style of focused element's outer shadow. */ - --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-shadow); + --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); /** * A visual style of focused element's outer shadow (when disabled).