Changes for page Style

Summary

• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

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	}
...	...	@@ -163,12 +163,10 @@
163	163	background: transparent #attImgURL('notesmall') left 4px no-repeat;
164	164	text-align: justify;
165	165	}
166		-#allAnnotations .UPDATED .annotationText, #xwikicontent .UPDATED {
167		- ##background-image: #imgURL('note_error');
	214	+#allAnnotations .UPDATED .annotationText {
168	168	background-image: #attImgURL('notesmallorange');
169	169	}
170		-#allAnnotations .ALTERED annotationText, #xwikicontent .ALTERED {
171		- ##background-image: #imgURL('note_delete');
	217	+#allAnnotations .ALTERED annotationText {
172	172	background-image: #attImgURL('notesmallred');
173	173	}
174	174