Zum Inhalt springen

Änderungen von Dokument Style

Zuletzt geändert von Holger Engels am 2026/10/22 13:00
Von Version 4.1
bearbeitet von Holger Engels
am 2026/10/22 13:00
Änderungskommentar: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/18.8.0]
Auf Version 1.1
bearbeitet von Holger Engels
am 2025/08/05 10:25
Änderungskommentar: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/17.6.0]

Zusammenfassung

Details

Seiteneigenschaften
Dokument-Autor
... ... @@ -1,1 +1,1 @@
1 -XWiki.holgerengels
1 +XWiki.hengels
notesmall.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hengels
Größe
... ... @@ -1,0 +1,1 @@
1 +241 bytes
Inhalt
notesmallblue.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hengels
Größe
... ... @@ -1,0 +1,1 @@
1 +246 bytes
Inhalt
notesmallorange.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hengels
Größe
... ... @@ -1,0 +1,1 @@
1 +238 bytes
Inhalt
notesmallred.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hengels
Größe
... ... @@ -1,0 +1,1 @@
1 +232 bytes
Inhalt
XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,82 +43,38 @@
43 43  }
44 44  
45 45  /* Annotations displayed in the text */
46 -.annotation-highlight, .selection-highlight {
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;
47 47   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;
52 52   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 - }
86 86  }
87 87  
88 -mark.annotation:not(.annotation-highlight) {
89 - padding: 0;
90 - background-color: unset;
91 - color: unset;
92 -}
93 -
94 -.annotation .annotation-bubble-tools .btn, .annotation .annotation-bubble-close .btn {
95 - background: transparent;
96 - border: none;
97 - /* Align first button with the annotation text. */
98 - margin-left: calc(-1 * var(--padding-base-horizontal));
99 -
100 - /* No background to cast a shadow on, drop it (like .btn-link). */
101 - &:active, &.active {
102 - box-shadow: none;
103 - }
104 -}
105 -
106 -/* The Delete action is a form (so it submits as a real POST, not a link), but it should still sit inline with
107 - its sibling buttons rather than starting a new line, like a form's default block display would. */
108 -.annotation .annotation-bubble-tools .delete-form {
109 - display: inline-block;
110 -}
111 -
112 112  /* Annotation boxes */
113 113  .annotation-bubble {
114 114   background: $theme.backgroundSecondaryColor;
115 - border: 1px solid $theme.borderColor;
71 + border: 1px dotted $theme.borderColor;
116 116   width: 560px;
117 117   position: absolute;
118 - border-radius: 0 var(--border-radius-large) var(--border-radius-large) var(--border-radius-large);
119 - box-shadow: 0 2px 4px -1px;
120 - margin: 0 10px;
121 121   z-index: 2;
75 + border-radius: 0 10px 10px 10px;
76 + box-shadow: 0 2px 4px -1px $theme.linkColor;
77 + margin-left: 20px;
122 122  }
123 123  
124 124  .annotation-bubble:before, .annotation-bubble:after {
... ... @@ -140,57 +140,8 @@
140 140   border-right-color: $theme.backgroundSecondaryColor;
141 141  }
142 142  
143 -.annotation-bubble.annotation-bubble-position-left {
144 - border-top-left-radius: 10px;
145 - border-top-right-radius: 0;
146 -
147 - &:before, &:after {
148 - border-right: none;
149 - left: unset;
150 - border-left: 10px solid transparent;
151 - border-bottom: 10px solid transparent;
152 - }
153 -
154 - &:before {
155 - right: -11px;
156 - border-left-color: $theme.borderColor;
157 - }
158 -
159 - &:after {
160 - right: -10px;
161 - border-left-color: $theme.backgroundSecondaryColor;
162 - }
163 -}
164 -
165 -.annotation-box .annotation {
99 +.annotation-box {
166 166   padding: 6px 12px;
167 - display: grid;
168 - gap: .5em;
169 - grid-template-columns: min-content auto min-content;
170 - width: 100%;
171 -
172 - .annotation-bubble-avatar {
173 - grid-area: 1 / 1 / 3 / 2;
174 - }
175 -
176 - .annotation-bubble-header {
177 - grid-area: 1 / 2 / 2 / 3;
178 - }
179 -
180 - .annotation-bubble-close {
181 - grid-area: 1 / 3 / 3 / 4;
182 - display: flex;
183 - flex-direction: row-reverse;
184 - align-items: flex-start;
185 - }
186 -
187 - .annotation-bubble-content {
188 - grid-area: 2 / 2 / 3 / 4;
189 - }
190 -
191 - .annotation-bubble-tools, .annotation-bubble-edit-tools {
192 - grid-area: 3 / 2 / 4 / 4;
193 - }
194 194  }
195 195  
196 196  .annotation-bubble .loading {
... ... @@ -201,16 +201,41 @@
201 201   width: 99%;
202 202  }
203 203  
204 -.annotation-bubble-header {
205 - display: flex;
206 - gap: .5em;
111 +.annotationAvatar {
112 + float: left;
113 + width: 55px;
114 + text-align: left;
207 207  }
116 +.annotationAvatar img {
117 + max-width: 50px;
118 + max-height: 50px;
119 +}
208 208  
121 +#allAnnotations .annotationAvatar {
122 + padding-top: 5px;
123 +}
124 +
125 +#allAnnotations .annotationHeader, #allAnnotations .annotationContent {
126 + margin-left: 60px;
127 +}
128 +#allAnnotations .annotationTitle * {
129 + line-height: 1.4em;
130 +}
131 +.annotation-box .annotationAuthor {
132 + border-bottom: 1px dotted $theme.borderColor;
133 + display: block;
134 +}
135 +.annotation-box .sep {
136 + display: none;
137 +}
209 209  .annotation-box .annotationDate {
210 210   padding-top: 3px;
211 211   margin-right: 51px;
212 212   display: block;
213 213  }
143 +.annotation-bubble .annotationContent {
144 + clear: both;
145 +}
214 214  
215 215  .annotation-box .links {
216 216   float: right;
... ... @@ -225,76 +225,62 @@
225 225  /* Annotations list (extra-tab) */
226 226  #allAnnotations .annotation {
227 227   margin: 0 0 8px;
228 - /* The gutter a comment reserves for its avatar, see .reply in comments.css. */
229 - padding-left: 60px;
230 - /* Keep the floated avatar inside its own annotation. */
231 - display: flow-root;
232 -
233 - /* Same values as .commentavatar in comments.css: a 50px avatar pulled into the 60px gutter, centered in it, and
234 - nudged down to sit level with the author name. */
235 - .annotation-bubble-avatar {
236 - float: left;
237 - margin-left: -60px;
238 - padding-top: 5px;
239 - text-align: center;
240 - width: 50px;
241 - }
242 242  }
243 -
244 -.annotationText {
245 - padding: 0 36px 0 0;
161 +#allAnnotations .annotation .annotationText, #Commentspane .annotation .annotationText {
162 + padding: 0 36px 0 14px;
163 + background: transparent #attImgURL('notesmall') left 4px no-repeat;
246 246   text-align: justify;
247 247  }
248 -.annotatedText {
249 - font-style: italic;
250 - font-size: 1.2em;
251 - border-left: none;
252 - padding: 10px 0 0 0;
253 - margin: 0;
254 - /* We hide the overflow so that the decorative quote doesn't go over the rest of the UI. */
255 - overflow: hidden;
256 -
257 - &:before {
258 - content: "“";
259 - font-size: 4em;
260 - line-height: .1em;
261 - margin-right: .1em;
262 - vertical-align: -.45em;
263 - font-family: var(--font-family-serif);
264 - font-weight: var(--font-weight-semibold);
265 - font-style: normal;
266 - }
166 +#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
167 + ##background-image: #imgURL('note_error');
168 + background-image: #attImgURL('notesmallorange');
267 267  }
170 +#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
171 + ##background-image: #imgURL('note_delete');
172 + background-image: #attImgURL('notesmallred');
173 +}
268 268  
175 +/* General display of an annotation */
176 +.annotationHeader{
177 + padding: 2px 0px 6px;
178 +}
179 +#allAnnotations .annotationHeader:hover {
180 + background-color: $theme.highlightColor;
181 +}
269 269  .annotationDate {
270 270   color: $theme.textSecondaryColor;
271 271   font-size: 80%;
272 272  }
186 +.annotationTools {
187 + display: block;
188 + float: right;
189 + margin-top: -1.2em;
190 +}
273 273  
192 +.annotationTools .reply {
193 + padding: 1px 3px;
194 +}
195 +
196 +.annotationComment {
197 + padding: 4px 0;
198 +}
199 +
274 274  dt.annotationLabel label {
275 275   color: $theme.textPrimaryColor;
276 276   font-variant: small-caps;
277 277  }
278 278  
279 -/* Quieter than the selection the annotation points at now, without the decorative quote of the live one. */
280 -.originalAnnotatedText {
281 - color: var(--text-muted);
282 - /* Barely smaller, enough to rank it below the live selection without making it hard to read. */
283 - font-size: .95em;
284 - /* Separate it from the message introducing it. */
285 - padding-top: .3em;
286 -
287 - &:before {
288 - content: none;
289 - }
205 +.annotationOriginalSelection {
206 + color: $theme.textPrimaryColor;
207 + font-size: 80%;
290 290  }
291 291  
292 -.annotation-bubble-content dt {
210 +.annotationContent dt {
293 293   margin: 0;
294 294  }
295 -.annotation-bubble-content dd, .annotation-bubble-content blockquote {
213 +.annotationContent dd, .annotationContent blockquote {
296 296   margin-bottom: 10px;
297 297  }
298 -.annotation-bubble-content blockquote {
216 +.annotationContent blockquote {
299 299   padding-left: 12px;
300 300  }