@ckeditor/ckeditor5-revision-history 49.0.1 → 49.1.0-alpha.0

package/dist/index-editor.css

@@ -100,10 +100,6 @@
 }
 
 .ck.ck-revision-history-sidebar__revision-name {
-  left: calc(-1 * var(--ck-spacing-small, var(--ck-spacing-sm)));
-  margin-right: 30px;
-  font-size: 1.2em;
-  font-weight: bold;
   display: block;
   position: relative;
 
@@ -113,35 +109,16 @@
     }
 
     & > .ck-input {
-      padding: var(--ck-spacing-control-padding-block) var(--ck-spacing-control-padding-inline-compact);
-      min-height: auto;
-      color: inherit;
-      font-family: inherit;
-      font-weight: bold;
-      font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
-      border-radius: var(--ck-border-radius-control);
       width: 100%;
       min-width: auto;
       transition: var(--ck-revision-history-revision-transition);
       text-overflow: ellipsis;
-      background: none;
+      font-family: inherit;
 
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }
 
-      &, &:focus, &[readonly] {
-        background: none;
-      }
-
-      &:not(.ck-input_focused) {
-        border-color: #0000;
-      }
-
-      &::placeholder {
-        color: inherit;
-      }
-
       &[readonly] {
         pointer-events: none;
       }
@@ -149,6 +126,20 @@
   }
 }
 
+.ck.ck-revision-history-sidebar__revision:not(.ck-revision-history-sidebar__revision_editing) .ck-revision-history-sidebar__revision-name {
+  & > .ck-labeled-field-view__input-wrapper > .ck-input {
+    min-height: auto;
+    box-shadow: none;
+    color: inherit;
+    font-weight: var(--ck-font-weight-ui-heading);
+    line-height: var(--ck-line-height-base);
+    background: none;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
 .ck.ck-revision-history-sidebar__revision-author {
   transition: var(--ck-revision-history-revision-transition);
   display: block;
@@ -162,19 +153,20 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
-    font-weight: bold;
     font-size: var(--ck-revision-history-revision-author-font-size);
+    line-height: var(--ck-line-height-base);
     color: var(--ck-revision-history-revision-author-text-color);
     display: block;
     overflow: hidden;
   }
 
   & .ck-icon {
-    left: calc(-1 * var(--ck-revision-history-revision-author-icon-offset));
-    top: calc(var(--ck-revision-history-revision-author-font-size)/2);
-    width: 11px;
-    height: 10px;
+    inset-inline-start: calc(-1 * var(--ck-revision-history-revision-author-icon-offset));
+    width: calc(var(--ck-revision-history-revision-author-icon-offset) - var(--ck-spacing-gap-snug));
+    height: calc(.625 * var(--ck-font-size-normal, var(--ck-font-size-base)));
     position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   &:not(:first-of-type) .ck-icon {
@@ -185,58 +177,34 @@
 .ck {
   &.ck-revision-history-sidebar__revision {
     & .ck-revision-history-sidebar__revision__actions {
-      top: var(--ck-revision-history-revision-padding-block);
-      right: var(--ck-revision-history-revision-padding-inline);
-      display: none;
-      position: absolute;
-
-      & .ck-dropdown__button {
-        min-width: unset;
-        min-height: unset;
-
-        & .ck-button__icon {
-          transform: scale(.7);
-        }
-      }
+      opacity: 0;
 
       & .ck-dropdown__arrow {
         display: none;
       }
 
-      & .ck-list__item__danger {
-        color: var(--ck-color-button-cancel, var(--ck-button-cancel-color));
+      & .ck-dropdown__button:focus:not(:focus-visible) {
+        border-color: var(--ck-button-border-color);
+        box-shadow: none;
       }
-    }
 
-    &.ck-revision-history-sidebar__revision_selected {
-      & .ck-revision-history-sidebar__revision__actions {
-        & .ck-dropdown__button {
-          color: var(--ck-revision-history-revision-selected-input-text-color);
+      & .ck-list__item > .ck-button .ck-button__label {
+        line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-normal, var(--ck-font-size-base)));
+      }
 
-          &:hover, &.ck-on {
-            background: var(--ck-button-hover-background);
-            color: initial;
-          }
-        }
+      & .ck-list__item__danger {
+        color: var(--ck-color-button-cancel, var(--ck-button-cancel-color));
       }
     }
 
-    &.ck-revision-history-sidebar__revision_highlighted {
-      & .ck-revision-history-sidebar__revision__actions {
-        & .ck-dropdown__button {
-          &:hover, &.ck-on {
-            background: var(--ck-revision-history-revision-highlighted-hover-background-color);
-
-            &:hover {
-              filter: brightness(95%);
-            }
-          }
-        }
-      }
+    &.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button {
+      --ck-button-default-text-color: var(--ck-revision-history-revision-selected-actions-text-color);
+      --ck-button-default-hover-text-color: var(--ck-revision-history-revision-selected-actions-hover-text-color);
+      --ck-button-on-text-color: var(--ck-revision-history-revision-selected-actions-hover-text-color, var(--ck-color-interactive-selected-text));
     }
 
-    &:hover:not(.ck-disabled) .ck-revision-history-sidebar__revision__actions, &:not(.ck-disabled) .ck-revision-history-sidebar__revision__actions.ck-on {
-      display: block;
+    &:has(:focus-visible) .ck-revision-history-sidebar__revision__actions, &:not(.ck-disabled):hover .ck-revision-history-sidebar__revision__actions, &:not(.ck-disabled) .ck-revision-history-sidebar__revision__actions.ck-on {
+      opacity: 1;
     }
   }
 }
@@ -244,41 +212,51 @@
 :root, :host {
   --ck-revision-history-revision-background-color: var(--ck-color-surface-container);
   --ck-revision-history-revision-padding-inline: var(--ck-spacing-padding-comfortable);
-  --ck-revision-history-revision-padding-block: var(--ck-spacing-large, var(--ck-spacing-lg));
-  --ck-revision-history-revision-padding: var(--ck-spacing-padding-comfortable);
-  --ck-revision-history-revision-border-color: #47576b;
-  --ck-revision-history-revision-selected-border-color: var(--ck-color-base-active);
-  --ck-revision-history-revision-highlighted-border-color: transparent;
+  --ck-revision-history-revision-padding-block: var(--ck-spacing-padding-comfortable);
+  --ck-revision-history-revision-padding: var(--ck-revision-history-revision-padding-block) var(--ck-revision-history-revision-padding-inline);
+  --ck-revision-history-revision-border-color: var(--ck-color-border-container);
+  --ck-revision-history-revision-selected-border-color: var(--ck-color-border-accent);
+  --ck-revision-history-revision-highlighted-border-color: var(--ck-color-border-accent);
   --ck-revision-history-revision-author-text-color: inherit;
-  --ck-revision-history-revision-date-text-color: inherit;
+  --ck-revision-history-revision-date-text-color: var(--ck-color-text-secondary);
   --ck-revision-history-revision-shadow: var(--ck-revision-history-revision-box-shadow, 0);
-  --ck-revision-history-revision-author-icon-offset: 20px;
+  --ck-revision-history-revision-author-icon-offset: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) + var(--ck-spacing-gap-snug));
   --ck-revision-history-revision-transition: var(--ck-revision-history-revision-transitions, background var(--ck-transition-duration-control-fast) ease-in, border var(--ck-transition-duration-control-fast) ease-in);
   --ck-revision-history-revision-selected-text-color: var(--ck-color-text-primary);
-  --ck-revision-history-revision-selected-input-text-color: #4a67d6;
+  --ck-revision-history-revision-selected-input-text-color: var(--ck-color-interactive-selected-text);
   --ck-revision-history-revision-selected-input-empty-text-color: var(--ck-revision-history-revision-selected-input-text-color-empty, var(--ck-color-base-background));
   --ck-revision-history-revision-selected-author-text-color: var(--ck-revision-history-revision-selected-text-color);
   --ck-revision-history-revision-author-font-size: var(--ck-font-size-md);
-  --ck-revision-history-revision-selected-date-text-color: #525252;
+  --ck-revision-history-revision-selected-date-text-color: var(--ck-color-text-secondary);
+  --ck-revision-history-revision-selected-actions-text-color: initial;
+  --ck-revision-history-revision-selected-actions-hover-text-color: initial;
   --ck-revision-history-revision-selected-background-color: var(--ck-color-surface-canvas);
-  --ck-revision-history-revision-highlighted-background-color: #e0f1ff;
+  --ck-revision-history-revision-highlighted-background-color: var(--ck-color-surface-container);
   --ck-revision-history-revision-highlighted-hover-background-color: var(--ck-revision-history-revision-highlighted-background-color-hover, #cce7ff);
   --ck-revision-history-revision-delete-confirmation-background-color: var(--ck-revision-history-revision-delete-confirmation-background, #fcc);
   --ck-revision-history-revision-delete-confirmation-active-button-background-color: var(--ck-revision-history-revision-delete-confirmation-active-button-background, #ffb3b3);
   --ck-revision-history-revision-radius: var(--ck-border-radius-surface);
-  --ck-revision-history-revision-active-radius: 0 var(--ck-border-radius-surface) var(--ck-border-radius-surface) 0;
+  --ck-revision-history-revision-active-radius: var(--ck-border-radius-surface);
 }
 
 .ck.ck-revision-history-sidebar__revision-wrapper {
   & .ck-revision-history-sidebar__revision {
+    column-gap: var(--ck-spacing-gap);
+    color: var(--ck-color-text);
     background: var(--ck-revision-history-revision-background-color);
     padding: var(--ck-revision-history-revision-padding);
     border-radius: var(--ck-revision-history-revision-radius);
-    border-left: 3px solid var(--ck-revision-history-revision-border-color);
+    border: var(--ck-border-width-surface) solid var(--ck-revision-history-revision-border-color);
     box-shadow: var(--ck-revision-history-revision-shadow);
     width: 100%;
     transition: transform var(--ck-transition-duration-control-emphasized) ease;
-    display: block;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "name actions"
+                         "date actions"
+                         "edit edit"
+                         "authors authors"
+                         "pill pill";
+    display: grid;
     position: relative;
 
     @media (prefers-reduced-motion: reduce) {
@@ -289,46 +267,88 @@
       margin-bottom: 0;
     }
 
+    & .ck-revision-history-sidebar__revision-name {
+      grid-area: name;
+    }
+
+    & .ck-revision-history-sidebar__revision__actions {
+      grid-area: actions;
+      align-self: start;
+      display: flex;
+    }
+
     & .ck-revision-history-sidebar__revision__date {
       color: var(--ck-revision-history-revision-date-text-color);
       font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
-      opacity: .8;
+      line-height: var(--ck-line-height-base);
       text-overflow: ellipsis;
       white-space: nowrap;
+      grid-area: date;
       width: 100%;
-      font-weight: bold;
       display: block;
       overflow: hidden;
     }
 
+    & .ck-revision-history-sidebar__revision__edit-actions {
+      justify-content: flex-end;
+      gap: var(--ck-spacing-gap);
+      margin-top: var(--ck-spacing-gap);
+      grid-area: edit;
+      display: flex;
+    }
+
     & .ck-revision-history-sidebar__revision__controls-wrapper {
       margin: var(--ck-spacing-standard, var(--ck-spacing-base)) 0 0;
       flex-direction: row;
+      grid-area: authors;
       align-items: flex-start;
       display: flex;
     }
 
     & .ck-revision-history-sidebar__revision-authors {
-      margin: 0 0 0 var(--ck-revision-history-revision-author-icon-offset);
+      gap: var(--ck-spacing-gap-compact);
+      margin: 0;
+      flex-direction: column;
       flex: 0 auto;
       min-width: 0;
+      margin-inline-start: var(--ck-revision-history-revision-author-icon-offset);
       padding: 0;
+      display: flex;
     }
 
     & .ck-revision-history-sidebar__revision-ai-pill-row {
       width: 100%;
-      margin-top: var(--ck-spacing-small, var(--ck-spacing-sm));
+      margin-top: var(--ck-spacing-gap);
+      grid-area: pill;
       justify-content: flex-end;
       display: flex;
     }
 
+    &.ck-revision-history-sidebar__revision_editing .ck-revision-history-sidebar__revision-name {
+      grid-column: 1 / -1;
+    }
+
+    &:not(.ck-revision-history-sidebar__revision_editing):has(:focus-visible) {
+      border-color: var(--ck-interactive-focus-border-color);
+      box-shadow: var(--ck-interactive-focus-shadow);
+    }
+
     &.ck-revision-history-sidebar__revision_selected, &.ck-revision-history-sidebar__revision_highlighted {
-      transform: translateX(calc(-1 * var(--ck-revision-history-sidebar-timeline-padding)));
       border-radius: var(--ck-revision-history-revision-active-radius);
+
+      &:before {
+        content: "";
+        background: var(--ck-revision-history-revision-selected-border-color);
+        border-start-end-radius: var(--ck-border-radius-control-small);
+        border-end-end-radius: var(--ck-border-radius-control-small);
+        width: 3px;
+        position: absolute;
+        inset-block: 3px;
+        inset-inline-start: calc(-1 * (var(--ck-revision-history-sidebar-timeline-padding) + var(--ck-border-width-surface)));
+      }
     }
 
     &.ck-revision-history-sidebar__revision_selected {
-      border-left-color: var(--ck-revision-history-revision-selected-border-color);
       background: var(--ck-revision-history-revision-selected-background-color);
       color: var(--ck-revision-history-revision-selected-text-color);
 
@@ -340,18 +360,17 @@
         color: var(--ck-revision-history-revision-selected-author-text-color);
       }
 
-      & .ck-revision-history-sidebar__revision-name .ck-input {
+      & .ck-revision-history-sidebar__revision-name {
         color: var(--ck-revision-history-revision-selected-input-text-color);
-
-        &.ck-input-text_empty::placeholder {
-          opacity: .7;
-        }
       }
     }
 
     &.ck-revision-history-sidebar__revision_highlighted {
-      border-left-color: var(--ck-revision-history-revision-highlighted-border-color);
       background: var(--ck-revision-history-revision-highlighted-background-color);
+
+      &:before {
+        background: var(--ck-revision-history-revision-highlighted-border-color);
+      }
     }
 
     &.ck-revision-history-sidebar__actions_dropdown_open {
@@ -427,7 +446,8 @@
 }
 
 :root, :host {
-  --ck-revision-history-sidebar-revision-vertical-spacing: calc(2 * var(--ck-spacing-standard, var(--ck-spacing-base)));
+  --ck-revision-history-sidebar-revision-vertical-spacing: var(--ck-spacing-gap);
+  --ck-revision-history-sidebar-time-period-vertical-spacing: var(--ck-spacing-gap-spacious);
 }
 
 .ck.ck-revision-history-sidebar__time-period {
@@ -435,16 +455,16 @@
 
   & .ck-revision-history-sidebar__time-period__label {
     background: var(--ck-revision-history-sidebar-period-background-color);
-    padding: var(--ck-spacing-control-padding-block) var(--ck-spacing-control-padding-inline);
+    width: fit-content;
+    font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
+    font-weight: var(--ck-font-weight-ui-label);
+    line-height: var(--ck-line-height-base);
+    letter-spacing: .02em;
+    padding: 0 var(--ck-spacing-padding-snug);
     border-radius: var(--ck-border-radius-control);
-    color: var(--ck-color-text-inverse);
+    color: var(--ck-revision-history-sidebar-period-text-color);
     text-transform: uppercase;
-    font-size: 9px;
-    font-weight: bold;
-
-    &:first-child {
-      margin-top: var(--ck-spacing-standard, var(--ck-spacing-base));
-    }
+    display: block;
   }
 
   & .ck-revision-history-sidebar__time-period__revisions {
@@ -457,40 +477,46 @@
   }
 
   &:not(.ck-hidden) + .ck-revision-history-sidebar__time-period {
-    margin-top: var(--ck-revision-history-sidebar-revision-vertical-spacing);
+    margin-top: var(--ck-revision-history-sidebar-time-period-vertical-spacing);
   }
 }
 
+:root, :host {
+  --ck-revision-history-sidebar-header-border-bottom: var(--ck-border-width-divider) solid var(--ck-color-divider);
+}
+
 .ck.ck-revision-history-sidebar__header {
-  --header-height: max(calc(var(--ck-ui-component-min-height, var(--ck-size-min-height)) + 2 * var(--ck-spacing-small, var(--ck-spacing-sm)) + 1px),
-		calc(var(--ck-icon-size) + 2 * var(--ck-spacing-small, var(--ck-spacing-sm)) + 2 * var(--ck-spacing-small, var(--ck-spacing-sm)) + 1px));
+  --header-height: max(calc(var(--ck-size-control-min-height) + 2 * var(--ck-spacing-small, var(--ck-spacing-sm)) + var(--ck-border-width-surface)),
+		calc(var(--ck-icon-size) + 2 * var(--ck-spacing-small, var(--ck-spacing-sm)) + 2 * var(--ck-spacing-small, var(--ck-spacing-sm)) + var(--ck-border-width-surface)));
   height: var(--header-height);
   min-height: var(--header-height);
   line-height: var(--header-height);
-  border-bottom: var(--ck-border-divider);
+  border-bottom: var(--ck-revision-history-sidebar-header-border-bottom);
+  font-family: inherit;
+  font-size: var(--ck-font-size-md);
   color: inherit;
   padding: 0 var(--ck-revision-history-sidebar-timeline-padding);
   flex-direction: row;
   align-items: center;
-  font-family: inherit;
   font-weight: bold;
   display: flex;
   overflow: hidden;
 
   & .ck-revision-history-sidebar__header__label {
-    color: inherit;
     font-family: inherit;
-    font-size: 1.2em;
-    font-weight: bold;
+    font-weight: var(--ck-font-weight-ui-heading);
+    color: inherit;
+    font-size: var(--ck-font-size-md);
   }
 
   & .ck-icon {
-    margin-right: var(--ck-spacing-large, var(--ck-spacing-lg));
+    margin-inline-end: var(--ck-spacing-gap);
   }
 }
 
 :root, :host {
-  --ck-revision-history-sidebar-period-background-color: var(--ck-revision-history-sidebar-period-background, #ff5724);
+  --ck-revision-history-sidebar-period-background-color: var(--ck-revision-history-sidebar-period-background, var(--ck-color-surface-subtle));
+  --ck-revision-history-sidebar-period-text-color: var(--ck-color-text-secondary);
   --ck-revision-history-sidebar-timeline-padding: var(--ck-spacing-padding-comfortable);
 }
 
@@ -546,7 +572,7 @@
 
   & > * {
     vertical-align: bottom;
-    font-size: var(--ck-font-size-standard);
+    font-size: var(--ck-font-size-md);
   }
 
   &.ck-revision-change__add {
@@ -564,14 +590,16 @@
   }
 
   & .ck-revision-change__author {
-    vertical-align: baseline;
     font-weight: normal;
+    font-size: inherit;
+    vertical-align: baseline;
   }
 
   & .ck-revision-change__ai-note {
     color: var(--ck-color-suggestion-ai-accent, var(--ck-suggestion-ai-accent-color));
-    vertical-align: baseline;
     font-weight: bold;
+    font-size: inherit;
+    vertical-align: baseline;
   }
 
   &.ck-revision-change_ai > span {
@@ -588,6 +616,25 @@
   }
 }
 
+.ck.ck-editor.ck-revision-viewer-editor {
+  & .ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
+    &, & > :first-child {
+      border-start-end-radius: 0;
+    }
+  }
+
+  & .ck-editor__main > .ck-editor__editable_root {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &[dir="rtl"] .ck-editor__main > .ck-editor__editable_root {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: var(--ck-editor-frame-border-radius);
+  }
+}
+
 .ck.ck-button {
   &.ck-revision-history-ui__back-to-editing {
     background: var(--ck-color-interactive-primary-surface);
@@ -600,7 +647,7 @@
 }
 
 .ck.ck-editor__editable_inline.ck-revision-history-root-add {
-  border: 3px solid var(--ck-suggestion-marker-insertion-border-color);
+  border: var(--ck-suggestion-marker-border-width, 3px) var(--ck-suggestion-marker-insertion-border-style, solid) var(--ck-suggestion-marker-insertion-border-color);
 
   &.ck-revision-history-root--active {
     border-color: var(--ck-color-suggestion-marker-insertion-border-active, var(--ck-suggestion-marker-insertion-active-border-color));
@@ -608,7 +655,7 @@
 }
 
 .ck.ck-editor__editable_inline.ck-revision-history-root-remove {
-  border: 3px solid var(--ck-suggestion-marker-deletion-border-color);
+  border: var(--ck-suggestion-marker-border-width, 3px) var(--ck-suggestion-marker-deletion-border-style, solid) var(--ck-suggestion-marker-deletion-border-color);
 
   &.ck-revision-history-root--active {
     border-color: var(--ck-suggestion-marker-deletion-active-border-color);