|
@@ -3,64 +3,21 @@
|
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
-/*
|
|
|
|
|
- * !!! TODO: Lots of these styles should go to ckeditor5-theme-lark before production.
|
|
|
|
|
- */
|
|
|
|
|
-
|
|
|
|
|
-:root {
|
|
|
|
|
- --ck-widget-type-around-button-size: 20px;
|
|
|
|
|
- --ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
|
|
|
|
|
- --ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
|
|
|
|
|
- --ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
|
|
|
|
|
- --ck-color-widget-type-around-button-radar-start-alpha: 0;
|
|
|
|
|
- --ck-color-widget-type-around-button-radar-end-alpha: .3;
|
|
|
|
|
- --ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.ck .ck-widget {
|
|
.ck .ck-widget {
|
|
|
/*
|
|
/*
|
|
|
* Styles of the type around buttons
|
|
* Styles of the type around buttons
|
|
|
*/
|
|
*/
|
|
|
& .ck-widget__type-around__button {
|
|
& .ck-widget__type-around__button {
|
|
|
- cursor: pointer;
|
|
|
|
|
display: none;
|
|
display: none;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- width: var(--ck-widget-type-around-button-size);
|
|
|
|
|
- height: var(--ck-widget-type-around-button-size);
|
|
|
|
|
-
|
|
|
|
|
z-index: var(--ck-z-default);
|
|
z-index: var(--ck-z-default);
|
|
|
- background: var(--ck-color-widget-type-around-button);
|
|
|
|
|
- border-radius: 100px;
|
|
|
|
|
- animation: fadein linear 300ms 1 normal forwards;
|
|
|
|
|
- transition: opacity 100ms linear;
|
|
|
|
|
|
|
|
|
|
& svg {
|
|
& svg {
|
|
|
- width: 10px;
|
|
|
|
|
- height: 8px;
|
|
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
-
|
|
|
|
|
z-index: calc(var(--ck-z-default) + 2);
|
|
z-index: calc(var(--ck-z-default) + 2);
|
|
|
- transform: translate(-50%,-50%);
|
|
|
|
|
- transition: transform .5s ease;
|
|
|
|
|
- margin-top: 1px;
|
|
|
|
|
-
|
|
|
|
|
- & * {
|
|
|
|
|
- stroke-dasharray: 10;
|
|
|
|
|
- stroke-dashoffset: 0;
|
|
|
|
|
-
|
|
|
|
|
- fill: none;
|
|
|
|
|
- stroke: var(--ck-color-widget-type-around-button-icon);
|
|
|
|
|
- stroke-width: 1.5px;
|
|
|
|
|
- stroke-linecap: round;
|
|
|
|
|
- stroke-linejoin: round;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- & line {
|
|
|
|
|
- stroke-dasharray: 7;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&.ck-widget__type-around__button_before {
|
|
&.ck-widget__type-around__button_before {
|
|
@@ -78,26 +35,6 @@
|
|
|
|
|
|
|
|
transform: translateY(50%);
|
|
transform: translateY(50%);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- &:hover {
|
|
|
|
|
- /*
|
|
|
|
|
- * Display the "sonar" around the button when hovered.
|
|
|
|
|
- */
|
|
|
|
|
- animation: ck-widget-type-around-button-sonar 1s ease infinite;
|
|
|
|
|
-
|
|
|
|
|
- /*
|
|
|
|
|
- * Animate active button's icon.
|
|
|
|
|
- */
|
|
|
|
|
- & svg {
|
|
|
|
|
- & polyline {
|
|
|
|
|
- animation: ck-widget-type-around-arrow-dash 2s linear;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- & line {
|
|
|
|
|
- animation: ck-widget-type-around-arrow-tip-dash 2s linear;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
/*
|
|
@@ -121,14 +58,6 @@
|
|
|
display: none;
|
|
display: none;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- /*
|
|
|
|
|
- * Styles for the buttons when the widget is NOT selected (but the buttons are visible
|
|
|
|
|
- * and still can be hovered).
|
|
|
|
|
- */
|
|
|
|
|
- &:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button {
|
|
|
|
|
- background: var(--ck-color-widget-type-around-button-hover);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
/*
|
|
/*
|
|
|
* Styles for the buttons when:
|
|
* Styles for the buttons when:
|
|
|
* - the widget is selected,
|
|
* - the widget is selected,
|
|
@@ -136,61 +65,13 @@
|
|
|
*/
|
|
*/
|
|
|
&.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button,
|
|
&.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button,
|
|
|
& > .ck-widget__type-around > .ck-widget__type-around__button:hover {
|
|
& > .ck-widget__type-around > .ck-widget__type-around__button:hover {
|
|
|
- background: var(--ck-color-widget-type-around-button-active);
|
|
|
|
|
-
|
|
|
|
|
&::after {
|
|
&::after {
|
|
|
content: "";
|
|
content: "";
|
|
|
- width: calc(var(--ck-widget-type-around-button-size) - 2px);
|
|
|
|
|
- height: calc(var(--ck-widget-type-around-button-size) - 2px);
|
|
|
|
|
display: block;
|
|
display: block;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 1px;
|
|
top: 1px;
|
|
|
left: 1px;
|
|
left: 1px;
|
|
|
-
|
|
|
|
|
- border-radius: 100px;
|
|
|
|
|
z-index: calc(var(--ck-z-default) + 1);
|
|
z-index: calc(var(--ck-z-default) + 1);
|
|
|
- background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%);
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-/*
|
|
|
|
|
- * Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor).
|
|
|
|
|
- */
|
|
|
|
|
-.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) {
|
|
|
|
|
- background: var(--ck-color-widget-type-around-button-blurred-editable);
|
|
|
|
|
-
|
|
|
|
|
- & svg * {
|
|
|
|
|
- stroke: hsl(0,0%,60%);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-@keyframes ck-widget-type-around-arrow-dash {
|
|
|
|
|
- 0% {
|
|
|
|
|
- stroke-dashoffset: 10;
|
|
|
|
|
- }
|
|
|
|
|
- 20%, 100% {
|
|
|
|
|
- stroke-dashoffset: 0;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-@keyframes ck-widget-type-around-arrow-tip-dash {
|
|
|
|
|
- 0%, 20% {
|
|
|
|
|
- stroke-dashoffset: 7;
|
|
|
|
|
- }
|
|
|
|
|
- 40%, 100% {
|
|
|
|
|
- stroke-dashoffset: 0;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-@keyframes ck-widget-type-around-button-sonar {
|
|
|
|
|
- 0% {
|
|
|
|
|
- box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
|
|
|
|
|
- }
|
|
|
|
|
- 50% {
|
|
|
|
|
- box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha));
|
|
|
|
|
- }
|
|
|
|
|
- 100% {
|
|
|
|
|
- box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|