Zum Inhalt springen

Änderungen von Dokument Style

Zuletzt geändert von Holger Engels am 2026/10/22 13:00
Von Version 2.1
bearbeitet von Holger Engels
am 2026/02/28 19:35
Änderungskommentar: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/18.1.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
... ... @@ -50,6 +50,15 @@
50 50   The highlights can happen in the middle of words, and it would look odd. */
51 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 +
53 53   &.hovered,
54 54   &.hovered .annotation-highlight, &.hovered .selection-highlight {
55 55   /* We want to increase the accent on the element when hovered.
... ... @@ -82,14 +82,32 @@
82 82   color: unset;
83 83  }
84 84  
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 +
85 85  /* Annotation boxes */
86 86  .annotation-bubble {
87 87   background: $theme.backgroundSecondaryColor;
88 - border: 1px dotted $theme.borderColor;
115 + border: 1px solid $theme.borderColor;
89 89   width: 560px;
90 90   position: absolute;
91 - border-radius: 0 10px 10px 10px;
92 - 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;
93 93   margin: 0 10px;
94 94   z-index: 2;
95 95  }
... ... @@ -135,8 +135,35 @@
135 135   }
136 136  }
137 137  
138 -.annotation-box {
165 +.annotation-box .annotation {
139 139   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 + }
140 140  }
141 141  
142 142  .annotation-bubble .loading {
... ... @@ -147,41 +147,16 @@
147 147   width: 99%;
148 148  }
149 149  
150 -.annotationAvatar {
151 - float: left;
152 - width: 55px;
153 - text-align: left;
204 +.annotation-bubble-header {
205 + display: flex;
206 + gap: .5em;
154 154  }
155 -.annotationAvatar img {
156 - max-width: 50px;
157 - max-height: 50px;
158 -}
159 159  
160 -#allAnnotations .annotationAvatar {
161 - padding-top: 5px;
162 -}
163 -
164 -#allAnnotations .annotationHeader, #allAnnotations .annotationContent {
165 - margin-left: 60px;
166 -}
167 -#allAnnotations .annotationTitle * {
168 - line-height: 1.4em;
169 -}
170 -.annotation-box .annotationAuthor {
171 - border-bottom: 1px dotted $theme.borderColor;
172 - display: block;
173 -}
174 -.annotation-box .sep {
175 - display: none;
176 -}
177 177  .annotation-box .annotationDate {
178 178   padding-top: 3px;
179 179   margin-right: 51px;
180 180   display: block;
181 181  }
182 -.annotation-bubble .annotationContent {
183 - clear: both;
184 -}
185 185  
186 186  .annotation-box .links {
187 187   float: right;
... ... @@ -196,62 +196,76 @@
196 196  /* Annotations list (extra-tab) */
197 197  #allAnnotations .annotation {
198 198   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 + }
199 199  }
200 -#allAnnotations .annotation .annotationText, #Commentspane .annotation .annotationText {
201 - padding: 0 36px 0 14px;
202 - background: transparent #attImgURL('notesmall') left 4px no-repeat;
243 +
244 +.annotationText {
245 + padding: 0 36px 0 0;
203 203   text-align: justify;
204 204  }
205 -#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
206 - ##background-image: #imgURL('note_error');
207 - background-image: #attImgURL('notesmallorange');
208 -}
209 -#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
210 - ##background-image: #imgURL('note_delete');
211 - background-image: #attImgURL('notesmallred');
212 -}
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;
213 213  
214 -/* General display of an annotation */
215 -.annotationHeader{
216 - padding: 2px 0px 6px;
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 + }
217 217  }
218 -#allAnnotations .annotationHeader:hover {
219 - background-color: $theme.highlightColor;
220 -}
268 +
221 221  .annotationDate {
222 222   color: $theme.textSecondaryColor;
223 223   font-size: 80%;
224 224  }
225 -.annotationTools {
226 - display: block;
227 - float: right;
228 - margin-top: -1.2em;
229 -}
230 230  
231 -.annotationTools .reply {
232 - padding: 1px 3px;
233 -}
234 -
235 -.annotationComment {
236 - padding: 4px 0;
237 -}
238 -
239 239  dt.annotationLabel label {
240 240   color: $theme.textPrimaryColor;
241 241   font-variant: small-caps;
242 242  }
243 243  
244 -.annotationOriginalSelection {
245 - color: $theme.textPrimaryColor;
246 - 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 + }
247 247  }
248 248  
249 -.annotationContent dt {
292 +.annotation-bubble-content dt {
250 250   margin: 0;
251 251  }
252 -.annotationContent dd, .annotationContent blockquote {
295 +.annotation-bubble-content dd, .annotation-bubble-content blockquote {
253 253   margin-bottom: 10px;
254 254  }
255 -.annotationContent blockquote {
298 +.annotation-bubble-content blockquote {
256 256   padding-left: 12px;
257 257  }