Zum Inhalt springen

Änderungen von Dokument Style

Zuletzt geändert von Holger Engels am 2026/10/22 13:00
Von Version 3.1
bearbeitet von Holger Engels
am 2026/09/22 10:06
Änderungskommentar: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/18.7.0]
Auf 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]

Zusammenfassung

Details

notesmall.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hengels
Größe
... ... @@ -1,1 +1,0 @@
1 -241 bytes
Inhalt
notesmallblue.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hengels
Größe
... ... @@ -1,1 +1,0 @@
1 -241 bytes
Inhalt
notesmallorange.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hengels
Größe
... ... @@ -1,1 +1,0 @@
1 -241 bytes
Inhalt
notesmallred.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hengels
Größe
... ... @@ -1,1 +1,0 @@
1 -241 bytes
Inhalt
XWiki.StyleSheetExtension[0]
Code
... ... @@ -91,14 +91,32 @@
91 91   color: unset;
92 92  }
93 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 +
94 94  /* Annotation boxes */
95 95  .annotation-bubble {
96 96   background: $theme.backgroundSecondaryColor;
97 - border: 1px dotted $theme.borderColor;
115 + border: 1px solid $theme.borderColor;
98 98   width: 560px;
99 99   position: absolute;
100 - border-radius: 0 10px 10px 10px;
101 - box-shadow: 0 2px 4px -1px $theme.linkColor;
118 + border-radius: 0 var(--border-radius-large) var(--border-radius-large) var(--border-radius-large);
119 + box-shadow: 0 2px 4px -1px;
102 102   margin: 0 10px;
103 103   z-index: 2;
104 104  }
... ... @@ -144,8 +144,35 @@
144 144   }
145 145  }
146 146  
147 -.annotation-box {
165 +.annotation-box .annotation {
148 148   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 + }
149 149  }
150 150  
151 151  .annotation-bubble .loading {
... ... @@ -156,41 +156,16 @@
156 156   width: 99%;
157 157  }
158 158  
159 -.annotationAvatar {
160 - float: left;
161 - width: 55px;
162 - text-align: left;
204 +.annotation-bubble-header {
205 + display: flex;
206 + gap: .5em;
163 163  }
164 -.annotationAvatar img {
165 - max-width: 50px;
166 - max-height: 50px;
167 -}
168 168  
169 -#allAnnotations .annotationAvatar {
170 - padding-top: 5px;
171 -}
172 -
173 -#allAnnotations .annotationHeader, #allAnnotations .annotationContent {
174 - margin-left: 60px;
175 -}
176 -#allAnnotations .annotationTitle * {
177 - line-height: 1.4em;
178 -}
179 -.annotation-box .annotationAuthor {
180 - border-bottom: 1px dotted $theme.borderColor;
181 - display: block;
182 -}
183 -.annotation-box .sep {
184 - display: none;
185 -}
186 186  .annotation-box .annotationDate {
187 187   padding-top: 3px;
188 188   margin-right: 51px;
189 189   display: block;
190 190  }
191 -.annotation-bubble .annotationContent {
192 - clear: both;
193 -}
194 194  
195 195  .annotation-box .links {
196 196   float: right;
... ... @@ -205,23 +205,26 @@
205 205  /* Annotations list (extra-tab) */
206 206  #allAnnotations .annotation {
207 207   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 + }
208 208  }
243 +
209 209  .annotationText {
210 210   padding: 0 36px 0 0;
211 211   text-align: justify;
212 212  }
213 -#allAnnotations .UPDATED .annotationText {
214 - background-image: #attImgURL('notesmallorange');
215 -}
216 -#allAnnotations .ALTERED annotationText {
217 - background-image: #attImgURL('notesmallred');
218 -}
219 -
220 -/* General display of an annotation */
221 -.annotationHeader{
222 - padding: 2px 0px 6px;
223 -}
224 -
225 225  .annotatedText {
226 226   font-style: italic;
227 227   font-size: 1.2em;
... ... @@ -243,43 +243,35 @@
243 243   }
244 244  }
245 245  
246 -#allAnnotations .annotationHeader:hover {
247 - background-color: $theme.highlightColor;
248 -}
249 249  .annotationDate {
250 250   color: $theme.textSecondaryColor;
251 251   font-size: 80%;
252 252  }
253 -.annotationTools {
254 - display: block;
255 - float: right;
256 - margin-top: -1.2em;
257 -}
258 258  
259 -.annotationTools .reply {
260 - padding: 1px 3px;
261 -}
262 -
263 -.annotationComment {
264 - padding: 4px 0;
265 -}
266 -
267 267  dt.annotationLabel label {
268 268   color: $theme.textPrimaryColor;
269 269   font-variant: small-caps;
270 270  }
271 271  
272 -.annotationOriginalSelection {
273 - color: $theme.textPrimaryColor;
274 - font-size: 80%;
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 + }
275 275  }
276 276  
277 -.annotationContent dt {
292 +.annotation-bubble-content dt {
278 278   margin: 0;
279 279  }
280 -.annotationContent dd, .annotationContent blockquote {
295 +.annotation-bubble-content dd, .annotation-bubble-content blockquote {
281 281   margin-bottom: 10px;
282 282  }
283 -.annotationContent blockquote {
298 +.annotation-bubble-content blockquote {
284 284   padding-left: 12px;
285 285  }