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 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
XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,54 +43,28 @@
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 94  /* Annotation boxes */
95 95  .annotation-bubble {
96 96   background: $theme.backgroundSecondaryColor;
... ... @@ -97,10 +97,10 @@
97 97   border: 1px dotted $theme.borderColor;
98 98   width: 560px;
99 99   position: absolute;
74 + z-index: 2;
100 100   border-radius: 0 10px 10px 10px;
101 101   box-shadow: 0 2px 4px -1px $theme.linkColor;
102 - margin: 0 10px;
103 - z-index: 2;
77 + margin-left: 20px;
104 104  }
105 105  
106 106  .annotation-bubble:before, .annotation-bubble:after {
... ... @@ -122,28 +122,6 @@
122 122   border-right-color: $theme.backgroundSecondaryColor;
123 123  }
124 124  
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 -
147 147  .annotation-box {
148 148   padding: 6px 12px;
149 149  }
... ... @@ -206,14 +206,17 @@
206 206  #allAnnotations .annotation {
207 207   margin: 0 0 8px;
208 208  }
209 -.annotationText {
210 - 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;
211 211   text-align: justify;
212 212  }
213 -#allAnnotations .UPDATED .annotationText {
166 +#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
167 + ##background-image: #imgURL('note_error');
214 214   background-image: #attImgURL('notesmallorange');
215 215  }
216 -#allAnnotations .ALTERED annotationText {
170 +#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
171 + ##background-image: #imgURL('note_delete');
217 217   background-image: #attImgURL('notesmallred');
218 218  }
219 219  
... ... @@ -221,28 +221,6 @@
221 221  .annotationHeader{
222 222   padding: 2px 0px 6px;
223 223  }
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 -
246 246  #allAnnotations .annotationHeader:hover {
247 247   background-color: $theme.highlightColor;
248 248  }