Wiki source code of Color Themes Extensions
Last modified by Vincent Massol on 2024/02/26 17:54
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | {{velocity}} | ||
2 | $xwiki.ssx.use("Standards.WebHome") | ||
3 | {{/velocity}} | ||
4 | |||
5 | {{velocity}} | ||
6 | $xwiki.ssx.use("Standards.Icons") | ||
7 | {{/velocity}} | ||
8 | |||
9 | = Color Themes Extensions = | ||
10 | |||
11 | {{toc/}} | ||
12 | |||
13 | == Remarks == | ||
14 | |||
15 | * Difficulties in determine where textPrimaryColor and textSecondaryColor goes; | ||
16 | |||
17 | == Needed Colors == | ||
18 | |||
19 | === -- -Add Menu Entry Color- -- === | ||
20 | |||
21 | * **Fixed** [[XE-796: Customizable "Add" menu entry from the Color Theme Wizard>>http://jira.xwiki.org/jira/browse/XE-796]] | ||
22 | * Problem [[XSCOLIBRI-221>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-221]] | ||
23 | * background-color for .actionmenu .tmCreate (currently #4D9244) | ||
24 | |||
25 | === Selected-Highlight Color === | ||
26 | |||
27 | Besided $theme.highlightColor we would need a $theme.selectedColor that can be the background of a selected value. | ||
28 | This would be useful in: | ||
29 | - [[Rights>>Improvements.Rights43Proposal]]: mark right that are changed this session and that will be applied after Save; | ||
30 | - [[Hightlight applied filters in livetable>>http://markmail.org/message/5maylva3vjgre66c]]: mark what filter is currently applied | ||
31 | |||
32 | |||
33 | === Light Background Color === | ||
34 | |||
35 | User profile bg, Watchlist, Import UI, etc. | ||
36 | |||
37 | {{html}} | ||
38 | <ul class="showColors"> | ||
39 | <li style="background-color: #F7F7F7;" class="color dark"> | ||
40 | #F7F7F7 | ||
41 | </li> | ||
42 | </ul> | ||
43 | <div class="clearfloats"></div> | ||
44 | {{/html}} | ||
45 | |||
46 | === -- -Actions/Notification Colors- -- === | ||
47 | |||
48 | * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]] | ||
49 | |||
50 | {{html}} | ||
51 | <ul class="showColors"> | ||
52 | <li style="background-color: #EFEFEF; color: #336699;" class="color"> | ||
53 | #336699 Info | ||
54 | </li> | ||
55 | <li style="background-color: #EFEFEF; color: #008000;" class="color"> | ||
56 | #008000 Success | ||
57 | </li> | ||
58 | <li style="background-color: #EFEFEF; color: #D6AE00;" class="color"> | ||
59 | #D6AE00 Warning | ||
60 | </li> | ||
61 | <li style="background-color: #EFEFEF; color: #CC3333;" class="color"> | ||
62 | #CC3333 Error | ||
63 | </li> | ||
64 | </ul> | ||
65 | <div class="clearfloats"></div> | ||
66 | {{/html}} | ||
67 | |||
68 | {{html}} | ||
69 | <ul class="showColors"> | ||
70 | <li style="background-color: #336699;" class="color light"> | ||
71 | #336699 Info | ||
72 | </li> | ||
73 | <li style="background-color: #008000;" class="color light"> | ||
74 | #008000 Success | ||
75 | </li> | ||
76 | <li style="background-color: #D6AE00;" class="color light"> | ||
77 | #D6AE00 Warning | ||
78 | </li> | ||
79 | <li style="background-color: #CC3333;" class="color light"> | ||
80 | #CC3333 Error | ||
81 | </li> | ||
82 | </ul> | ||
83 | <div class="clearfloats"></div> | ||
84 | {{/html}} | ||
85 | |||
86 | ==== -- -A. History Compare Versions- -- ==== | ||
87 | |||
88 | * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]] | ||
89 | * Obs. Could use an opacity property for the red color | ||
90 | |||
91 | skin/skins/colibri/colibri.css | ||
92 | .diffremoveword ; .diffaddword | ||
93 | [[image:history.png||width="600px"]] | ||
94 | |||
95 | {{html}} | ||
96 | <ul class="showColors"> | ||
97 | <li style="background-color: #CA9A9B;" class="color light"> | ||
98 | #CA9A9B | ||
99 | </li> | ||
100 | <li style="background-color: #287F00;" class="color light"> | ||
101 | #287F00 | ||
102 | </li> | ||
103 | </ul> | ||
104 | <div class="clearfloats"></div> | ||
105 | {{/html}} | ||
106 | |||
107 | ==== -- -B. Add Actions (Original Version)- -- ==== | ||
108 | |||
109 | xwiki/resources/js/xwiki/viewers/attachments.css | ||
110 | .add-file-input | ||
111 | [[image:attachments.png]] | ||
112 | |||
113 | {{html}} | ||
114 | <ul class="showColors"> | ||
115 | <li style="background-color: #287F00;" class="color light"> | ||
116 | #287F00 | ||
117 | </li> | ||
118 | </ul> | ||
119 | <div class="clearfloats"></div> | ||
120 | {{/html}} | ||
121 | |||
122 | ==== -- -C. Boxes- -- ==== | ||
123 | |||
124 | * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]] | ||
125 | |||
126 | skin/skins/colibri/colibri.css | ||
127 | .xwikirenderingerror | ||
128 | .errormessage, .warningmessage, .infomessage, .plainmessage | ||
129 | [[image:infoBox.png||width="600px"]] | ||
130 | |||
131 | {{html}} | ||
132 | <ul class="showColors"> | ||
133 | <li style="background-color: #E14726;" class="color light"> | ||
134 | <span class="iconExclamation">Error: #E14726</span> | ||
135 | </li> | ||
136 | <li style="background-color: #D5A13D;" class="color light"> | ||
137 | <span class="iconError">Warning: #D5A13D</span> | ||
138 | </li> | ||
139 | <li style="background-color: #336699;" class="color light"> | ||
140 | <span class="iconInfo">Info: #336699</span> | ||
141 | </li> | ||
142 | </ul> | ||
143 | <div class="clearfloats"></div> | ||
144 | {{/html}} | ||
145 | |||
146 | ==== -- -D. Notification- -- ==== | ||
147 | |||
148 | * **Fixed** [[XWIKI-5838: Make notification.css use the notification Color Theme variables>>http://jira.xwiki.org/jira/browse/XWIKI-5838]] | ||
149 | |||
150 | xwiki/resources/uicomponents/widgets/notification.css | ||
151 | [[image:notifications.png]] | ||
152 | |||
153 | {{html}} | ||
154 | <ul class="showColors"> | ||
155 | <li style="background-color: #226688;" class="color light"> | ||
156 | Info: #226688 | ||
157 | </li> | ||
158 | <li style="background-color: #AA0000;" class="color light"> | ||
159 | Error: #AA0000 | ||
160 | </li> | ||
161 | <li style="background-color: #FFDD88; color: #333300" class="color"> | ||
162 | Warning: #FFDD88 | ||
163 | </li> | ||
164 | <li style="background-color: #333333;" class="color light"> | ||
165 | <span class="iconSpinner">Progress: #333333</span> | ||
166 | </li> | ||
167 | <li style="background-color: #116600;" class="color light"> | ||
168 | Done: #116600 | ||
169 | </li> | ||
170 | </ul> | ||
171 | <div class="clearfloats"></div> | ||
172 | {{/html}} | ||
173 | |||
174 | ==== -- -E. Groups- -- ==== | ||
175 | |||
176 | * **Fixed** [[XWIKI-5837: Make usersandgroups.css use the current Color Theme variables>>http://jira.xwiki.org/jira/browse/XWIKI-5837]] | ||
177 | |||
178 | xwiki\resources\js\xwiki\usersandgroups\usersandgroups.css | ||
179 | #errMsg | ||
180 | [[image:group.png]] | ||
181 | |||
182 | {{html}} | ||
183 | <ul class="showColors"> | ||
184 | <li style="background-color: #D70;" class="color light"> | ||
185 | #D70 | ||
186 | </li> | ||
187 | </ul> | ||
188 | <div class="clearfloats"></div> | ||
189 | {{/html}} | ||
190 | |||
191 | === Other === | ||
192 | |||
193 | |||
194 | |||
195 | ==== F. Code Macro ==== | ||
196 | |||
197 | skin/skins/colibri/colibri.css | ||
198 | Syntax 1.0 .java-keyword, .java-object, .xml-tag, .sql-keyword, .java-quote | ||
199 | http://code.xwiki.org/xwiki/bin/view/Macros/CodeMacro20 | ||
200 | |||
201 | {{code language="c"}} | ||
202 | //valid | ||
203 | var x: Int = 1; | ||
204 | var s: String = "abcdefg"; | ||
205 | |||
206 | //also valid | ||
207 | var x: = 1; | ||
208 | var s: = "abcdefg"; | ||
209 | |||
210 | //also valid | ||
211 | var x: = 1 | ||
212 | ... | ||
213 | {{/code}} | ||
214 | |||
215 | {{code language="sql" width="css"}} | ||
216 | body { | ||
217 | font-size: 13px; | ||
218 | font-family: Arial, 'Times New Roman', sans-serif; | ||
219 | width: 900px; | ||
220 | margin: 0 auto; | ||
221 | color: #303030; | ||
222 | } | ||
223 | {{/code}} | ||
224 | |||
225 | {{code width="xml"}} | ||
226 | <?xml version="1.0"?> | ||
227 | <doc> | ||
228 | <tag argument="value">Content</tag> | ||
229 | {{/code}} | ||
230 | |||
231 | {{code language="javascript"}} | ||
232 | // Everything else, we just grab the value | ||
233 | return (elem.value || "").replace(/\r/g, ""); | ||
234 | |||
235 | } | ||
236 | |||
237 | return undefined; | ||
238 | } | ||
239 | |||
240 | if ( typeof value === "number" ) | ||
241 | value += ''; | ||
242 | |||
243 | return this.each(function(){ | ||
244 | if ( this.nodeType != 1 ) | ||
245 | return; | ||
246 | {{/code}} | ||
247 | |||
248 | {{code language="java"}} | ||
249 | body { | ||
250 | font-size: 13px; | ||
251 | font-family: Arial, 'Times New Roman', sans-serif; | ||
252 | width: 900px; | ||
253 | margin: 0 auto; | ||
254 | color: #303030; | ||
255 | } | ||
256 | {{/code}} | ||
257 | |||
258 | ==== G. Panel Wizard Maquette ==== | ||
259 | |||
260 | skin/skins/colibri/colibri.css | ||
261 | |||
262 | [[image:panelMachette.png]] | ||
263 | |||
264 | ==== H. WYSIWYG Selection ==== | ||
265 | |||
266 | xwiki/resources/js/xwiki/wysiwyg/xwe/stylesheets/Wysiwyg.css | ||
267 | |||
268 | [[image:selectMacro.png]] | ||
269 | |||
270 | |||
271 | |||
272 | = Colors to add to the ColorThemeClass (DRAFT) = | ||
273 | |||
274 | (% class="leftMargin column50" %) | ||
275 | ((( | ||
276 | Add Menu Entry Color ([[JIRA: XSCOLIBRI-221>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-221]]) | ||
277 | |||
278 | panelLinkColor ([[JIRA:XSCOLIBRI-159>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-159]]) | ||
279 | |||
280 | backgroundAlternativeColor TODO: find a better name (should this one be used for message boxes too?) | ||
281 | |||
282 | textColorAdd : "Add" links, added content in the version diff | ||
283 | textColorDelete : "Delete" links, deleted content in the version diff | ||
284 | |||
285 | notificationTextColor | ||
286 | notificationErrorBackgroundColor | ||
287 | notificationWarningBackgroundColor | ||
288 | notificationInfoBackgroundColor | ||
289 | notificationDoneBackgroundColor | ||
290 | notificationProgressBackgroundColor | ||
291 | |||
292 | messageErrorTextColor (for message boxes and other error messages in custom apps) | ||
293 | messageWarningTextColor | ||
294 | messageInfoTextColor | ||
295 | messageOKTextColor | ||
296 | |||
297 | |||
298 | Wysiwyg selection should use highlightColor. | ||
299 | ))) | ||
300 | |||
301 | (% class="left column50" %) | ||
302 | ((( | ||
303 | panelLinkColor - agree | ||
304 | |||
305 | - we have primary/secondary naming. We have backgroundSecondaryColor, but miss backgroundPrimaryColor, though this naming is not very explicit either. | ||
306 | |||
307 | actionAddColor , actionDeleteColor | ||
308 | |||
309 | if we have only a solo notification's text color, than the Warning Color must be darker, so the white is seen correctly. | ||
310 | |||
311 | I would like to have the same color on the add|delete actions as on the done|error notifications, and done|ok messages. | ||
312 | |||
313 | Var 1: | ||
314 | infoTextColor | infoBackgroundColor | ||
315 | successfulTextColor | successfulBackgroundColor | ||
316 | progressTextColor | progressBackgroundColor | ||
317 | warningTextColor | warningBackgroundColor | ||
318 | errorTextColor | errorBackgroundColor | ||
319 | |||
320 | Var 2: | ||
321 | infoColor, successfulColor, progressColor, warningColor, errorColor | ||
322 | neutralColor | ||
323 | ))) | ||
324 | |||
325 | {{html}} | ||
326 | <div class="clearfloats"></div> | ||
327 | {{/html}} | ||
328 | |||
329 | |||
330 | {{html}} | ||
331 | <ul class="showColors"> | ||
332 | <li style="background-color: #c2d1f0; color: #3366cc" class="color"> | ||
333 | Info | ||
334 | </li> | ||
335 | <li style="background-color: #d1e6b3; color: #66aa00" class="color"> | ||
336 | Successful | ||
337 | </li> | ||
338 | <li style="background-color: #e6e6e6; color: #99a0a6" class="color"> | ||
339 | Progress | ||
340 | </li> | ||
341 | <li style="background-color: #f3e7b3; color: #d6ae00" class="color"> | ||
342 | Warning | ||
343 | </li> | ||
344 | <li style="background-color: #f0c2c2; color: #cc3333" class="color"> | ||
345 | Error | ||
346 | </li> | ||
347 | </ul> | ||
348 | <div class="clearfloats"></div> | ||
349 | {{/html}} | ||
350 | |||
351 | {{html}} | ||
352 | <ul class="showColors"> | ||
353 | <li style="background-color: #3366cc; color: #fff" class="color"> | ||
354 | Info | ||
355 | </li> | ||
356 | <li style="background-color: #66aa00; color: #fff" class="color"> | ||
357 | Successful | ||
358 | </li> | ||
359 | <li style="background-color: #99a0a6; color: #fff" class="color"> | ||
360 | Progress | ||
361 | </li> | ||
362 | <li style="background-color: #d6ae00; color: #fff" class="color"> | ||
363 | Warning | ||
364 | </li> | ||
365 | <li style="background-color: #cc3333; color: #fff" class="color"> | ||
366 | Error | ||
367 | </li> | ||
368 | </ul> | ||
369 | <div class="clearfloats"></div> | ||
370 | {{/html}} | ||
371 | |||
372 | {{html}} | ||
373 | <ul class="showColors"> | ||
374 | <li style="background-color: #3366cc; color: #000" class="color"> | ||
375 | Info | ||
376 | </li> | ||
377 | <li style="background-color: #66aa00; color: #000" class="color"> | ||
378 | Successful | ||
379 | </li> | ||
380 | <li style="background-color: #99a0a6; color: #000" class="color"> | ||
381 | Progress | ||
382 | </li> | ||
383 | <li style="background-color: #d6ae00; color: #000" class="color"> | ||
384 | Warning | ||
385 | </li> | ||
386 | <li style="background-color: #cc3333; color: #000" class="color"> | ||
387 | Error | ||
388 | </li> | ||
389 | </ul> | ||
390 | <div class="clearfloats"></div> | ||
391 | {{/html}} | ||
392 | |||
393 | = Conclusion = | ||
394 | |||
395 | * **Added in** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]] | ||
396 | |||
397 | * $theme.notificationInfoColor | ||
398 | * $theme.notificationSuccessColor | ||
399 | * $theme.notificationWarningColor | ||
400 | * $theme.notificationErrorColor | ||
401 | |||
402 | {{html}} | ||
403 | <ul class="showColors"> | ||
404 | <li style="background-color: #EFEFEF; color: #336699;" class="color"> | ||
405 | #336699 Info | ||
406 | </li> | ||
407 | <li style="background-color: #EFEFEF; color: #008000;" class="color"> | ||
408 | #008000 Success | ||
409 | </li> | ||
410 | <li style="background-color: #EFEFEF; color: #D6AE00;" class="color"> | ||
411 | #D6AE00 Warning | ||
412 | </li> | ||
413 | <li style="background-color: #EFEFEF; color: #CC3333;" class="color"> | ||
414 | #CC3333 Error | ||
415 | </li> | ||
416 | </ul> | ||
417 | <div class="clearfloats"></div> | ||
418 | {{/html}} | ||
419 | |||
420 | {{html}} | ||
421 | <ul class="showColors"> | ||
422 | <li style="background-color: #336699;" class="color light"> | ||
423 | #336699 Info | ||
424 | </li> | ||
425 | <li style="background-color: #008000;" class="color light"> | ||
426 | #008000 Success | ||
427 | </li> | ||
428 | <li style="background-color: #D6AE00;" class="color light"> | ||
429 | #D6AE00 Warning | ||
430 | </li> | ||
431 | <li style="background-color: #CC3333;" class="color light"> | ||
432 | #CC3333 Error | ||
433 | </li> | ||
434 | </ul> | ||
435 | <div class="clearfloats"></div> | ||
436 | {{/html}} |