Skip to Content

Changes for page Style

Last modified by Drunk Monkey on 2026-06-02 07:39
From version 7.1
edited by Drunk Monkey
on 2026-02-04 10:30
Change comment: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/18.0.0]
To version 1.1
edited by Drunk Monkey
on 2020-04-11 15:51
Change comment: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/12.2.1]

Summary

Details

Page properties
Enforce required rights
... ... @@ -1,1 +1,1 @@
1 -true
1 +false
XWiki.RequiredRightClass[0]
Level
... ... @@ -1,1 +1,1 @@
1 -wiki_admin
1 +programming
XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,55 +43,38 @@
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 - &.hovered,
54 - &.hovered .annotation-highlight, &.hovered .selection-highlight {
55 - /* We want to increase the accent on the element when hovered.
56 - The btn warning background color does that without reducing contrast with the default text color too much.
57 - We use this class set dynamically in JS instead of pseudo classes because we want highlights to span multiple
58 - marks across text blocks. */
59 - /* We repeat the selector because of nested annotation marks. */
60 - background-color: var(--mark-highlighted-bg);
61 - }
62 -
63 - .annotation-toggle {
64 - /* We don't want the annotation toggle to disturb the text layout. */
65 - position: absolute;
66 - margin: 0;
67 - z-index: 1;
68 - /* But we still need to center it relative to its parent. */
69 - top: 50%;
70 - transform: translateY(-50%);
71 - transition: opacity .5s ease;
72 - }
73 -
74 - .annotation-toggle.sr-only {
75 - opacity: 0;
76 - }
77 77  }
78 78  
79 -mark.annotation:not(.annotation-highlight) {
80 - padding: 0;
81 - background-color: unset;
82 - color: unset;
83 -}
84 -
85 85  /* Annotation boxes */
86 86  .annotation-bubble {
87 87   background: $theme.backgroundSecondaryColor;
88 88   border: 1px dotted $theme.borderColor;
89 - width: 560px;
72 + width: 280px;
90 90   position: absolute;
74 + z-index: 2;
91 91   border-radius: 0 10px 10px 10px;
92 92   box-shadow: 0 2px 4px -1px $theme.linkColor;
93 - margin: 0 10px;
94 - z-index: 2;
77 + margin-left: 20px;
95 95  }
96 96  
97 97  .annotation-bubble:before, .annotation-bubble:after {
... ... @@ -113,28 +113,6 @@
113 113   border-right-color: $theme.backgroundSecondaryColor;
114 114  }
115 115  
116 -.annotation-bubble.annotation-bubble-position-left {
117 - border-top-left-radius: 10px;
118 - border-top-right-radius: 0;
119 -
120 - &:before, &:after {
121 - border-right: none;
122 - left: unset;
123 - border-left: 10px solid transparent;
124 - border-bottom: 10px solid transparent;
125 - }
126 -
127 - &:before {
128 - right: -11px;
129 - border-left-color: $theme.borderColor;
130 - }
131 -
132 - &:after {
133 - right: -10px;
134 - border-left-color: $theme.backgroundSecondaryColor;
135 - }
136 -}
137 -
138 138  .annotation-box {
139 139   padding: 6px 12px;
140 140  }
... ... @@ -156,6 +156,9 @@
156 156   max-width: 50px;
157 157   max-height: 50px;
158 158  }
120 +* html .annotationAvatar img {
121 + width: 50px;
122 +}
159 159  
160 160  #allAnnotations .annotationAvatar {
161 161   padding-top: 5px;