Skip to Content

Changes for page Style

Last modified by Drunk Monkey on 2026-06-02 07:39
From version 5.1
edited by Drunk Monkey
on 2025-10-12 05:38
Change comment: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/17.8.0]
To 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]

Summary

Details

XWiki.StyleSheetExtension[0]
Code
... ... @@ -43,28 +43,45 @@
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 + &.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 + }
66 66  }
67 67  
79 +mark.annotation:not(.annotation-highlight) {
80 + padding: 0;
81 + background-color: unset;
82 + color: unset;
83 +}
84 +
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;
93 + margin: 0 10px;
94 + z-index: 2;
78 78  }
79 79  
80 80  .annotation-bubble:before, .annotation-bubble:after {