Ä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 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]

Zusammenfassung

Details

Seiteneigenschaften
Dokument-Autor
... ... @@ -1,1 +1,1 @@
1 -XWiki.hengels
1 +XWiki.holgerengels
XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,28 +43,54 @@
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,10 +71,10 @@
71 71   border: 1px dotted $theme.borderColor;
72 72   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  }
... ... @@ -158,17 +158,14 @@
158 158  #allAnnotations .annotation {
159 159   margin: 0 0 8px;
160 160  }
161 -#allAnnotations .annotation .annotationText, #Commentspane .annotation .annotationText {
162 - padding: 0 36px 0 14px;
163 - background: transparent #attImgURL('notesmall') left 4px no-repeat;
209 +.annotationText {
210 + padding: 0 36px 0 0;
164 164   text-align: justify;
165 165  }
166 -#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
167 - ##background-image: #imgURL('note_error');
213 +#allAnnotations .UPDATED .annotationText {
168 168   background-image: #attImgURL('notesmallorange');
169 169  }
170 -#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
171 - ##background-image: #imgURL('note_delete');
216 +#allAnnotations .ALTERED annotationText {
172 172   background-image: #attImgURL('notesmallred');
173 173  }
174 174  
... ... @@ -176,6 +176,28 @@
176 176  .annotationHeader{
177 177   padding: 2px 0px 6px;
178 178  }
224 +
225 +.annotatedText {
226 + font-style: italic;
227 + font-size: 1.2em;
228 + border-left: none;
229 + padding: 10px 0 0 0;
230 + margin: 0;
231 + /* We hide the overflow so that the decorative quote doesn't go over the rest of the UI. */
232 + overflow: hidden;
233 +
234 + &:before {
235 + content: "“";
236 + font-size: 4em;
237 + line-height: .1em;
238 + margin-right: .1em;
239 + vertical-align: -.45em;
240 + font-family: var(--font-family-serif);
241 + font-weight: var(--font-weight-semibold);
242 + font-style: normal;
243 + }
244 +}
245 +
179 179  #allAnnotations .annotationHeader:hover {
180 180   background-color: $theme.highlightColor;
181 181  }