Changes for page Style
on 2025-11-05 12:20
on 2026-06-02 07:39
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -43,24 +43,54 @@ 43 43 } 44 44 45 45 /* Annotations displayed in the text */ 46 -.annotation-highlight { 47 - background-color: #FE9; 48 -} 49 - 50 -.annotation-marker { 51 - background: transparent #attImgURL('notesmall') no-repeat left top; 52 - display: inline-block; 53 - height: 10px; 54 - overflow: hidden; 55 - text-indent: -9999px; 56 - width: 10px; 57 - vertical-align: baseline; 58 - margin: -15px -7px 5px -3px; 59 - z-index: 1; 46 +.annotation-highlight, .selection-highlight { 60 60 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; 61 61 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 + } 62 62 } 63 63 88 +mark.annotation:not(.annotation-highlight) { 89 + padding: 0; 90 + background-color: unset; 91 + color: unset; 92 +} 93 + 64 64 /* Annotation boxes */ 65 65 .annotation-bubble { 66 66 background: $theme.backgroundSecondaryColor; ... ... @@ -67,10 +67,10 @@ 67 67 border: 1px dotted $theme.borderColor; 68 68 width: 560px; 69 69 position: absolute; 70 - z-index: 2; 71 71 border-radius: 0 10px 10px 10px; 72 72 box-shadow: 0 2px 4px -1px $theme.linkColor; 73 - margin-left: 20px; 102 + margin: 0 10px; 103 + z-index: 2; 74 74 } 75 75 76 76 .annotation-bubble:before, .annotation-bubble:after { ... ... @@ -181,12 +181,10 @@ 181 181 background: transparent #attImgURL('notesmall') left 4px no-repeat; 182 182 text-align: justify; 183 183 } 184 -#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED { 185 - ##background-image: #imgURL('note_error'); 214 +#allAnnotations .UPDATED .annotationText { 186 186 background-image: #attImgURL('notesmallorange'); 187 187 } 188 -#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED { 189 - ##background-image: #imgURL('note_delete'); 217 +#allAnnotations .ALTERED annotationText { 190 190 background-image: #attImgURL('notesmallred'); 191 191 } 192 192