Skip to Content

Changes for page Style

Last modified by Drunk Monkey on 2026-06-02 07:39
From version 1.1
edited by Drunk Monkey
on 2020-04-11 15:51
Change comment: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/12.2.1]
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

Page properties
Enforce required rights
... ... @@ -1,1 +1,1 @@
1 -false
1 +true
XWiki.RequiredRightClass[0]
Level
... ... @@ -1,1 +1,1 @@
1 -programming
1 +wiki_admin
XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,38 +43,64 @@
43 43  }
44 44  
45 45  /* Annotations displayed in the text */
46 -.annotation-highlight {
47 - background-color: #FE9; ## $theme.highlightColor;
48 -}
49 -## In velocity comment: settings for using the larger images from silk
50 -.annotation-marker {
51 - ##background: transparent #imgURL('note') no-repeat left top;
52 - background: transparent #attImgURL('notesmall') no-repeat left top;
53 - display: inline-block;
54 - ##height: 16px;
55 - height: 10px;
56 - overflow: hidden;
57 - text-indent: -9999px;
58 - ##width: 16px;
59 - width: 10px;
60 - vertical-align: baseline;
61 - ##margin: -19px -14px 3px -2px;
62 - margin: -15px -7px 5px -3px;
63 - z-index: 1;
46 +.annotation-highlight, .selection-highlight {
64 64   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;
65 65   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 + }
66 66  }
67 67  
88 +mark.annotation:not(.annotation-highlight) {
89 + padding: 0;
90 + background-color: unset;
91 + color: unset;
92 +}
93 +
68 68  /* Annotation boxes */
69 69  .annotation-bubble {
70 70   background: $theme.backgroundSecondaryColor;
71 71   border: 1px dotted $theme.borderColor;
72 - width: 280px;
98 + width: 560px;
73 73   position: absolute;
74 - z-index: 2;
75 75   border-radius: 0 10px 10px 10px;
76 76   box-shadow: 0 2px 4px -1px $theme.linkColor;
77 - margin-left: 20px;
102 + margin: 0 10px;
103 + z-index: 2;
78 78  }
79 79  
80 80  .annotation-bubble:before, .annotation-bubble:after {
... ... @@ -96,6 +96,28 @@
96 96   border-right-color: $theme.backgroundSecondaryColor;
97 97  }
98 98  
125 +.annotation-bubble.annotation-bubble-position-left {
126 + border-top-left-radius: 10px;
127 + border-top-right-radius: 0;
128 +
129 + &:before, &:after {
130 + border-right: none;
131 + left: unset;
132 + border-left: 10px solid transparent;
133 + border-bottom: 10px solid transparent;
134 + }
135 +
136 + &:before {
137 + right: -11px;
138 + border-left-color: $theme.borderColor;
139 + }
140 +
141 + &:after {
142 + right: -10px;
143 + border-left-color: $theme.backgroundSecondaryColor;
144 + }
145 +}
146 +
99 99  .annotation-box {
100 100   padding: 6px 12px;
101 101  }
... ... @@ -117,9 +117,6 @@
117 117   max-width: 50px;
118 118   max-height: 50px;
119 119  }
120 -* html .annotationAvatar img {
121 - width: 50px;
122 -}
123 123  
124 124  #allAnnotations .annotationAvatar {
125 125   padding-top: 5px;
... ... @@ -166,12 +166,10 @@
166 166   background: transparent #attImgURL('notesmall') left 4px no-repeat;
167 167   text-align: justify;
168 168  }
169 -#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
170 - ##background-image: #imgURL('note_error');
214 +#allAnnotations .UPDATED .annotationText {
171 171   background-image: #attImgURL('notesmallorange');
172 172  }
173 -#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
174 - ##background-image: #imgURL('note_delete');
217 +#allAnnotations .ALTERED annotationText {
175 175   background-image: #attImgURL('notesmallred');
176 176  }
177 177