Changes for page Style

Last modified by Drunk Monkey on 2026-06-02 07:39

From version 6.1
edited by Drunk Monkey
on 2025-11-05 12:20
Change comment: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/17.9.0]
To version 8.1
edited by Drunk Monkey
on 2026-06-02 07:39
Change comment: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/18.4.0]

Summary

Details

XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,24 +43,54 @@
43 43  }
44 44  
45 45  /* Annotations displayed in the text */
46 -.annotation-highlight {
47 - background-color: #FE9;
48 -}
49 -
50 -.annotation-marker {
51 - background: transparent #attImgURL('notesmall') no-repeat left top;
52 - display: inline-block;
53 - height: 10px;
54 - overflow: hidden;
55 - text-indent: -9999px;
56 - width: 10px;
57 - vertical-align: baseline;
58 - margin: -15px -7px 5px -3px;
59 - z-index: 1;
46 +.annotation-highlight, .selection-highlight {
60 60   position: relative;
48 + background-color: var(--mark-bg);
49 + /* Remove the default mark padding added in bootstrap.
50 + The highlights can happen in the middle of words, and it would look odd. */
51 + padding: 0;
61 61   cursor: pointer;
53 +
54 + &.updated {
55 + background-color: var(--mark-updated-bg);
56 + }
57 +
58 + &.altered {
59 + background-color: var(--mark-altered-bg);
60 + }
61 +
62 + &.hovered,
63 + &.hovered .annotation-highlight, &.hovered .selection-highlight {
64 + /* We want to increase the accent on the element when hovered.
65 + The btn warning background color does that without reducing contrast with the default text color too much.
66 + We use this class set dynamically in JS instead of pseudo classes because we want highlights to span multiple
67 + marks across text blocks. */
68 + /* We repeat the selector because of nested annotation marks. */
69 + background-color: var(--mark-highlighted-bg);
70 + }
71 +
72 + .annotation-toggle {
73 + /* We don't want the annotation toggle to disturb the text layout. */
74 + position: absolute;
75 + margin: 0;
76 + z-index: 1;
77 + /* But we still need to center it relative to its parent. */
78 + top: 50%;
79 + transform: translateY(-50%);
80 + transition: opacity .5s ease;
81 + }
82 +
83 + .annotation-toggle.sr-only {
84 + opacity: 0;
85 + }
62 62  }
63 63  
88 +mark.annotation:not(.annotation-highlight) {
89 + padding: 0;
90 + background-color: unset;
91 + color: unset;
92 +}
93 +
64 64  /* Annotation boxes */
65 65  .annotation-bubble {
66 66   background: $theme.backgroundSecondaryColor;
... ... @@ -67,10 +67,10 @@
67 67   border: 1px dotted $theme.borderColor;
68 68   width: 560px;
69 69   position: absolute;
70 - z-index: 2;
71 71   border-radius: 0 10px 10px 10px;
72 72   box-shadow: 0 2px 4px -1px $theme.linkColor;
73 - margin-left: 20px;
102 + margin: 0 10px;
103 + z-index: 2;
74 74  }
75 75  
76 76  .annotation-bubble:before, .annotation-bubble:after {
... ... @@ -181,12 +181,10 @@
181 181   background: transparent #attImgURL('notesmall') left 4px no-repeat;
182 182   text-align: justify;
183 183  }
184 -#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
185 - ##background-image: #imgURL('note_error');
214 +#allAnnotations .UPDATED .annotationText {
186 186   background-image: #attImgURL('notesmallorange');
187 187  }
188 -#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
189 - ##background-image: #imgURL('note_delete');
217 +#allAnnotations .ALTERED annotationText {
190 190   background-image: #attImgURL('notesmallred');
191 191  }
192 192