Zum Inhalt springen

Änderungen von Dokument Style

Zuletzt geändert von Holger Engels am 2026/10/22 13:00
Von 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]
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

Seiteneigenschaften
Dokument-Autor
... ... @@ -1,1 +1,1 @@
1 -XWiki.hengels
1 +XWiki.holgerengels
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 -246 bytes
Inhalt
notesmallorange.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hengels
Größe
... ... @@ -1,1 +1,0 @@
1 -238 bytes
Inhalt
notesmallred.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hengels
Größe
... ... @@ -1,1 +1,0 @@
1 -232 bytes
Inhalt
XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,38 +43,82 @@
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 +
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 +
68 68  /* Annotation boxes */
69 69  .annotation-bubble {
70 70   background: $theme.backgroundSecondaryColor;
71 - border: 1px dotted $theme.borderColor;
115 + border: 1px solid $theme.borderColor;
72 72   width: 560px;
73 73   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;
74 74   z-index: 2;
75 - border-radius: 0 10px 10px 10px;
76 - box-shadow: 0 2px 4px -1px $theme.linkColor;
77 - margin-left: 20px;
78 78  }
79 79  
80 80  .annotation-bubble:before, .annotation-bubble:after {
... ... @@ -96,8 +96,57 @@
96 96   border-right-color: $theme.backgroundSecondaryColor;
97 97  }
98 98  
99 -.annotation-box {
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 {
100 100   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 + }
101 101  }
102 102  
103 103  .annotation-bubble .loading {
... ... @@ -108,41 +108,16 @@
108 108   width: 99%;
109 109  }
110 110  
111 -.annotationAvatar {
112 - float: left;
113 - width: 55px;
114 - text-align: left;
204 +.annotation-bubble-header {
205 + display: flex;
206 + gap: .5em;
115 115  }
116 -.annotationAvatar img {
117 - max-width: 50px;
118 - max-height: 50px;
119 -}
120 120  
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 -}
138 138  .annotation-box .annotationDate {
139 139   padding-top: 3px;
140 140   margin-right: 51px;
141 141   display: block;
142 142  }
143 -.annotation-bubble .annotationContent {
144 - clear: both;
145 -}
146 146  
147 147  .annotation-box .links {
148 148   float: right;
... ... @@ -157,62 +157,76 @@
157 157  /* Annotations list (extra-tab) */
158 158  #allAnnotations .annotation {
159 159   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 + }
160 160  }
161 -#allAnnotations .annotation .annotationText, #Commentspane .annotation .annotationText {
162 - padding: 0 36px 0 14px;
163 - background: transparent #attImgURL('notesmall') left 4px no-repeat;
243 +
244 +.annotationText {
245 + padding: 0 36px 0 0;
164 164   text-align: justify;
165 165  }
166 -#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
167 - ##background-image: #imgURL('note_error');
168 - background-image: #attImgURL('notesmallorange');
169 -}
170 -#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
171 - ##background-image: #imgURL('note_delete');
172 - background-image: #attImgURL('notesmallred');
173 -}
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;
174 174  
175 -/* General display of an annotation */
176 -.annotationHeader{
177 - 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 + }
178 178  }
179 -#allAnnotations .annotationHeader:hover {
180 - background-color: $theme.highlightColor;
181 -}
268 +
182 182  .annotationDate {
183 183   color: $theme.textSecondaryColor;
184 184   font-size: 80%;
185 185  }
186 -.annotationTools {
187 - display: block;
188 - float: right;
189 - margin-top: -1.2em;
190 -}
191 191  
192 -.annotationTools .reply {
193 - padding: 1px 3px;
194 -}
195 -
196 -.annotationComment {
197 - padding: 4px 0;
198 -}
199 -
200 200  dt.annotationLabel label {
201 201   color: $theme.textPrimaryColor;
202 202   font-variant: small-caps;
203 203  }
204 204  
205 -.annotationOriginalSelection {
206 - color: $theme.textPrimaryColor;
207 - 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 + }
208 208  }
209 209  
210 -.annotationContent dt {
292 +.annotation-bubble-content dt {
211 211   margin: 0;
212 212  }
213 -.annotationContent dd, .annotationContent blockquote {
295 +.annotation-bubble-content dd, .annotation-bubble-content blockquote {
214 214   margin-bottom: 10px;
215 215  }
216 -.annotationContent blockquote {
298 +.annotation-bubble-content blockquote {
217 217   padding-left: 12px;
218 218  }