« MediaWiki:Common.css » : différence entre les versions
Aller à la navigation
Aller à la recherche
mAucun résumé des modifications |
mAucun résumé des modifications |
||
(116 versions intermédiaires par 2 utilisateurs non affichées) | |||
Ligne 4 : | Ligne 4 : | ||
<pre> | <pre> | ||
*/ | */ | ||
.counter-start { | |||
counter-reset: counter; | |||
} | |||
.count:before { | |||
content: counter(counter); | |||
counter-increment: counter; | |||
} | |||
/* round image*/ | |||
.round img{border-radius:50%;filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));} | |||
/* rounded corner image */ | |||
.rounded img{border-radius:10%;filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));} | |||
/* Mediawiki generic color https://www.mediawiki.org/wiki/Design/Archive/Wikimedia_Foundation_Design/Color_usage*/ | |||
.background-blue{background:#3366BB} | |||
.text-blue{color:#3366BB} | |||
.background-green{background:#008640} | |||
.text-green{color:#008640} | |||
.background-red{background:#CB0000} | |||
.text-red{color:#CB0000} | |||
.background-yellow{background:#ffa700} | |||
.text-yellow{color:#ffa700} | |||
.background-grey{background:#808083} | |||
.text-grey{color:#808083} | |||
/* Simple tableform style */ | |||
table.formtable th {background:rgba(0,0,0,0.1);padding:0.5em;} | |||
table.formtable td {padding:0.5em;} | |||
/*Fix a bug with leaflet map... (otherwise map appears above every elements even info windows, popups, input dropdowns etc.) */ | |||
.pfLeafletInput{ | |||
position:relative; | |||
z-index: 0; | |||
} | |||
/* fix a strange bug with semantic mediawiki multiple input form*/ | |||
.multipleTemplateInstance.multipleTemplate.minimized { | |||
overflow: hidden; | |||
} | |||
/*css for template {{toggle}}*/ | |||
.toggle-template .mw-collapsible::before, .toggle-template .mw-collapsed::before{ | |||
content:"▲"; | |||
text-align: right; | |||
margin-top: -2em; | |||
display: block; | |||
width: auto; | |||
padding: 0 1em; | |||
white-space: pre; | |||
line-height: 2em; | |||
border-radius: 0em 0.2em 0 0; | |||
z-index: 2; | |||
position: relative; | |||
float:right; | |||
color:#fff; | |||
background:#808083; | |||
pointer-events:none; | |||
} | |||
/*css for template {{felxGrid}}*/ | |||
.flexGrid p{margin:0;} | |||
.flexGrid img{ | |||
width: 100%; | |||
height: auto; | |||
max-width: 500px; | |||
} | |||
/*css for template {{printonly}}*/ | |||
.hidden{ | |||
display:none; | |||
} | |||
/*css for template {{button}}*/ | |||
.modele-button{ | |||
color: #fff; | |||
cursor:pointer; | |||
display:inline-block; | |||
font-weight:600; | |||
margin:2px auto; | |||
padding:0 0.5em; | |||
box-sizing:border-box; | |||
white-space: nowrap; | |||
vertical-align: middle; | |||
border-radius:0.2em; | |||
box-shadow: 1px 1px 0.1em rgba(0,0,0,0.2); | |||
border-bottom: 1px solid rgba(0,0,0,0.3); | |||
font-size:0.85em; | |||
} | |||
.modele-button:hover{ | |||
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2); | |||
} | |||
.modele-button:active{ | |||
border:1px solid rgba(0,0,0,0.4); | |||
} | |||
.modele-button a{ | |||
text-decoration:none !important; | |||
display:inline-block; | |||
color:inherit !important; | |||
} | |||
.modele-button.small a{ | |||
font-size:0.85em; | |||
} | |||
.modele-button.medium a{ | |||
font-size:0.92em; | |||
padding-top:0.15em; | |||
padding-bottom:0.15em; | |||
} | |||
.modele-button.large a,.modele-button.full a{ | |||
font-size:1em; | |||
padding-top:0.45em; | |||
padding-bottom:0.45em; | |||
} | |||
.modele-button.full a{ | |||
width: calc(100% + 1em); | |||
} | |||
/* Badges */ | /* Badges */ | ||
Ligne 14 : | Ligne 160 : | ||
top: 10px; | top: 10px; | ||
left:-6px; | left:-6px; | ||
display:none; | display:none;go | ||
padding: 0 3px 3px 3px; | padding: 0 3px 3px 3px; | ||
z-index: 1000000; | z-index: 1000000; | ||
Ligne 46 : | Ligne 192 : | ||
/*front page */ | /*front page */ | ||
@media screen { | |||
#front_left {padding: | [class*="front-"] {width: 100%} | ||
#front_right {float:left; width:40%; background: #FAF9EC; border:1px solid | |||
div.front_title { | @media only screen and (min-width: 768px){ | ||
} | #front_left {padding: 0.25em 1em;float: left;width: 57%;border: 1px solid rgba(33,33,33,0.1);background: #EAF5FB;box-sizing: border-box;border-radius: 0.2em;box-sizing:border-box;} | ||
#front_right {padding: 0.25em 1em;float:left; width:40%; background: #FAF9EC; border: 1px solid rgba(33,33,33,0.1); margin-left: 4px;box-sizing:border-box;border-radius: 0.2em;} | |||
div.front_title {font-size: large;border-bottom: 2px solid #36b;padding: 0.1em 0;margin: 0 0 0.5em 0;font-variant: small-caps;} | |||
@media print | @media print{ | ||
#front_left {} | #front_left {} | ||
#front_right {} | #front_right {} | ||
} | } | ||
/* Cours bases */ | |||
.PageFormsRadioButton {display:block;} | |||
/* collection extension */ | /* collection extension */ | ||
Ligne 62 : | Ligne 213 : | ||
/* Space out main section titles */ | /* Space out main section titles */ | ||
h2 {margin-top: | h1 {font-weight:bold;} | ||
h2 {margin-top:3ex;font-weight:bold;} | |||
h3 {margin-top:1ex;} | h3 {margin-top:1ex;} | ||
Ligne 103 : | Ligne 255 : | ||
margin-right: inherit; | margin-right: inherit; | ||
} | } | ||
/* Extralarge big element in tables of class emoji, to display emojis */ | |||
table.emoji big {font-size:xx-large} | |||
/* Removes useless links from printout */ | /* Removes useless links from printout */ | ||
Ligne 218 : | Ligne 373 : | ||
.GoBlock{ | .GoBlock{ | ||
background: rgb(207,234,153); | |||
border-radius: 3px; | |||
background:rgb( | |||
display:inline-block; | display:inline-block; | ||
color:#333333; | color:#333333; | ||
font-family:arial; | font-family:arial; | ||
font-size: | font-size:0.9em; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
padding: | padding:0 13px; | ||
text-align:center; | text-align:center; | ||
border: 1px solid rgba(0,0,0,0.05); | |||
line-height:1.5em; | |||
} | } | ||
Ligne 293 : | Ligne 437 : | ||
.tableBlue tr.row-even{background:rgb(235,245,255);} | .tableBlue tr.row-even{background:rgb(235,245,255);} | ||
/* Leyla formulaires STIC III/IV */ | |||
.annee.radioButtonItem { | |||
width: 10%; | |||
display: block; | |||
float:left; | |||
} | |||
.technologie.checkboxLabel { | |||
width: 25%; | |||
display: block; | |||
float:left; | |||
} | |||
.type.checkboxLabel { | |||
width: 25%; | |||
display: block; | |||
float:left; | |||
} | |||
.domaine_enseignement.checkboxLabel { | |||
width: 25%; | |||
display: block; | |||
float:left; | |||
} | |||
.niveau_enseignement.checkboxLabel { | |||
width: 33.3%; | |||
display: block; | |||
float:left; | |||
} | |||
.public_cible.checkboxLabel { | |||
width: 20%; | |||
display: block; | |||
float:left; | |||
} | |||
.public_age.checkboxLabel { | |||
width: 20%; | |||
display: block; | |||
float:left; | |||
} | |||
/* for smartphone display*/ | |||
pre{ | |||
word-break: break-word; | |||
} | |||
/* | /* | ||
</pre> | </pre> | ||
*/ | */ |
Dernière version du 29 novembre 2021 à 17:30
1 /** Le CSS placé ici sera appliqué à toutes les apparences. */
2
3 /*
4 <pre>
5 */
6
7 .counter-start {
8 counter-reset: counter;
9 }
10 .count:before {
11 content: counter(counter);
12 counter-increment: counter;
13 }
14
15 /* round image*/
16 .round img{border-radius:50%;filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));}
17
18 /* rounded corner image */
19 .rounded img{border-radius:10%;filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));}
20
21
22 /* Mediawiki generic color https://www.mediawiki.org/wiki/Design/Archive/Wikimedia_Foundation_Design/Color_usage*/
23
24 .background-blue{background:#3366BB}
25 .text-blue{color:#3366BB}
26
27
28 .background-green{background:#008640}
29 .text-green{color:#008640}
30
31
32 .background-red{background:#CB0000}
33 .text-red{color:#CB0000}
34
35
36 .background-yellow{background:#ffa700}
37 .text-yellow{color:#ffa700}
38
39
40 .background-grey{background:#808083}
41 .text-grey{color:#808083}
42
43 /* Simple tableform style */
44
45 table.formtable th {background:rgba(0,0,0,0.1);padding:0.5em;}
46 table.formtable td {padding:0.5em;}
47
48
49 /*Fix a bug with leaflet map... (otherwise map appears above every elements even info windows, popups, input dropdowns etc.) */
50
51 .pfLeafletInput{
52 position:relative;
53 z-index: 0;
54 }
55
56 /* fix a strange bug with semantic mediawiki multiple input form*/
57
58 .multipleTemplateInstance.multipleTemplate.minimized {
59 overflow: hidden;
60 }
61
62
63 /*css for template {{toggle}}*/
64
65 .toggle-template .mw-collapsible::before, .toggle-template .mw-collapsed::before{
66 content:"▲";
67 text-align: right;
68 margin-top: -2em;
69 display: block;
70 width: auto;
71 padding: 0 1em;
72 white-space: pre;
73 line-height: 2em;
74 border-radius: 0em 0.2em 0 0;
75 z-index: 2;
76 position: relative;
77 float:right;
78 color:#fff;
79 background:#808083;
80 pointer-events:none;
81 }
82
83 /*css for template {{felxGrid}}*/
84
85 .flexGrid p{margin:0;}
86 .flexGrid img{
87 width: 100%;
88 height: auto;
89 max-width: 500px;
90 }
91
92
93 /*css for template {{printonly}}*/
94
95 .hidden{
96 display:none;
97 }
98
99
100
101 /*css for template {{button}}*/
102
103 .modele-button{
104 color: #fff;
105 cursor:pointer;
106 display:inline-block;
107 font-weight:600;
108 margin:2px auto;
109 padding:0 0.5em;
110 box-sizing:border-box;
111 white-space: nowrap;
112 vertical-align: middle;
113 border-radius:0.2em;
114 box-shadow: 1px 1px 0.1em rgba(0,0,0,0.2);
115 border-bottom: 1px solid rgba(0,0,0,0.3);
116 font-size:0.85em;
117 }
118
119 .modele-button:hover{
120 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2);
121 }
122
123 .modele-button:active{
124 border:1px solid rgba(0,0,0,0.4);
125 }
126
127
128 .modele-button a{
129 text-decoration:none !important;
130 display:inline-block;
131 color:inherit !important;
132 }
133
134
135 .modele-button.small a{
136 font-size:0.85em;
137 }
138 .modele-button.medium a{
139 font-size:0.92em;
140 padding-top:0.15em;
141 padding-bottom:0.15em;
142 }
143 .modele-button.large a,.modele-button.full a{
144 font-size:1em;
145 padding-top:0.45em;
146 padding-bottom:0.45em;
147 }
148 .modele-button.full a{
149 width: calc(100% + 1em);
150 }
151
152
153 /* Badges */
154
155 div.appear {
156 width: 184px;
157 border: red 2px solid;
158 background:#F8F8F8;
159 position: absolute;
160 top: 10px;
161 left:-6px;
162 display:none;go
163 padding: 0 3px 3px 3px;
164 z-index: 1000000;
165 }
166
167 div.appear_left {
168 width: 184px;
169 border: red 2px solid;
170 background:#F8F8F8;
171 position: absolute;
172 top: 10px;
173 left:-50%;
174 display:none;
175 padding: 0 3px 3px 3px;
176 z-index: 1000000;
177 }
178
179 div.badge {
180 cursor:pointer;
181 position: relative;
182 display: inline-block;
183 border: green 1px solid;
184 width: 130px;
185 margin-bottom: 3px;
186 text-align: center;
187 }
188
189 div.badge:hover div.appear, div.badge:hover div.appear_left{
190 display:block;
191 }
192
193 /*front page */
194
195 [class*="front-"] {width: 100%}
196
197 @media only screen and (min-width: 768px){
198 #front_left {padding: 0.25em 1em;float: left;width: 57%;border: 1px solid rgba(33,33,33,0.1);background: #EAF5FB;box-sizing: border-box;border-radius: 0.2em;box-sizing:border-box;}
199 #front_right {padding: 0.25em 1em;float:left; width:40%; background: #FAF9EC; border: 1px solid rgba(33,33,33,0.1); margin-left: 4px;box-sizing:border-box;border-radius: 0.2em;}
200 div.front_title {font-size: large;border-bottom: 2px solid #36b;padding: 0.1em 0;margin: 0 0 0.5em 0;font-variant: small-caps;}
201
202 @media print{
203 #front_left {}
204 #front_right {}
205 }
206
207 /* Cours bases */
208 .PageFormsRadioButton {display:block;}
209
210 /* collection extension */
211
212 .onlyinprint {display: none}
213
214 /* Space out main section titles */
215 h1 {font-weight:bold;}
216 h2 {margin-top:3ex;font-weight:bold;}
217 h3 {margin-top:1ex;}
218
219 table.wikitable,
220 table.prettytable,
221 table.datatable {
222 margin: 1em 1em 1em 0;
223 background: #f9f9f9;
224 border: 1px #aaaaaa solid;
225 border-collapse: collapse;
226 }
227
228 table.datatable {
229 font-size:70%
230 }
231
232 table.wikitable th, table.wikitable td,
233 table.prettytable th, table.prettytable td {
234 border: 1px #aaaaaa solid;
235 padding: 0.2em;
236 }
237
238 table.datatable th, table.datatable td {
239 border: 1px #aaaaaa solid;
240 font-size:70%
241 padding: 0em;
242 }
243
244 table.wikitable th,
245 table.datatable th,
246 table.prettytable th {
247 background: #f2f2f2;
248 text-align: center;
249 }
250
251 table.wikitable caption,
252 table.datatable caption,
253 table.prettytable caption {
254 margin-left: inherit;
255 margin-right: inherit;
256 }
257
258 /* Extralarge big element in tables of class emoji, to display emojis */
259 table.emoji big {font-size:xx-large}
260
261 /* Removes useless links from printout */
262 @media print {
263 .portlet, #privacy, #about, #disclaimer {display:none;}
264 }
265
266
267 /* Banner Styles used in EduTech wiki
268 - use class names like Banner_xxxx
269 */
270
271 .Banner_incomplete {
272 float:right;
273 clear:right;
274 width:200px;
275 border:1px solid orange;
276 background-color:#FFFACD;
277 padding:7px;
278 margin-bottom: 10px;
279 margin-left: 1em;
280 }
281
282 /* See http://svn.wikimedia.org/svnroot/mediawiki/trunk/extensions/PageBy/README */
283 ul.pageby {
284 border:1px solid #60606F;
285 background-color:#E0E0EF;
286 font-size: 80%;
287 margin:1ex;
288 padding:1ex;
289 list-style-type:none;
290 }
291
292 .Banner_tutorial {
293 float:right;
294 clear:right;
295 width:200px;
296 border:1px solid blue;
297 background-color:#F8C9E4;
298 padding:7px;
299 margin-bottom: 10px;
300 margin-left: 1em;
301 }
302
303 .tut_goals{
304 background-color:#F8C9E4;
305 padding:7px;
306 margin-bottom: 10px;
307 border:1px solid #AAAAAA;
308 }
309
310 .Banner_copyright{
311 background-color:#d0f0c0;
312 padding:7px;
313 margin-bottom: 10px;
314 border:1px solid #AAAAAA;
315 }
316
317 .tagcloud {
318 width: 95%;
319 text-align: center;
320 background-color: #FDFDFD;
321 border: 1px solid #EEEEEE;
322 padding: 15px 10px 15px 10px;
323 }
324 .tagcloud a {
325 color: #0052CB;
326 margin-left: 10px;
327 margin-right: 10px;
328 font-weight: bold;
329 }
330
331 code {
332 border: 1px solid #ddd;
333 padding: 1px 4px;
334 border-radius: 2px;
335 }
336
337 /* category tree - first is just for portlet - second for all trees */
338 /*
339 #p-categorytree-portlet {font-size: 80% }
340 */
341 .CategoryTreeTag {font-size: 90%; }
342
343
344 /* Syntaxhighlight geshi */
345 div.mw-geshi {
346 border: 1px dotted grey;
347 padding: 2px;
348 margin-left:1em;
349 font-size: 120%;
350 margin-top:2px;
351 margin-right:2px;
352 margin-bottom:2px
353 }
354
355
356 .sidebar_banner {
357 margin-top: 5px;
358 margin-bottom: 5px;
359 }
360
361 h3 .editsection { font-size: 76%; font-weight: normal; }
362 h4 .editsection { font-size: 86%; font-weight: normal; }
363 h5 .editsection { font-weight: normal; }
364 h6 .editsection { font-size: 125%; font-weight: normal; }
365
366 /* Contribution Scores */
367 .contributionscores-wrapper { font-size: 80%; }
368 .contributionscores-title { margin-left: 0; padding-left: 0em; margin-bottom: 0;}
369 .contributionscores .header { border-bottom: 1px solid #999999; font-weight: bold; }
370 .contributionscores .odd { background-color: #eeeeee; }
371 .contributionscores .header td { padding-left: .2em; padding-right: .2em; }
372 .contributionscores .content { padding-left: .2em; padding-right: .2em; }
373
374 .GoBlock{
375 background: rgb(207,234,153);
376 border-radius: 3px;
377 display:inline-block;
378 color:#333333;
379 font-family:arial;
380 font-size:0.9em;
381 box-sizing: border-box;
382 padding:0 13px;
383 text-align:center;
384 border: 1px solid rgba(0,0,0,0.05);
385 line-height:1.5em;
386 }
387
388 .StopBlock{
389 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
390 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
391 box-shadow:inset 0px 1px 0px 0px #ffffff;
392 background:rgb(200, 230, 140);
393 background-image: linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
394 background-image: -webkit-linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
395 -webkit-border-radius: 6px;
396 -moz-border-radius: 6px;
397 border-radius: 6px;
398 text-indent:0;
399 border:1px solid rgb(155,185,95);
400 display:inline-block;
401 color:#333333;
402 font-family:arial;
403 font-size:13px;
404 font-style:normal;
405 text-decoration:none;
406 -webkit-box-sizing: border-box;
407 -moz-box-sizing: border-box;
408 box-sizing: border-box;
409 padding:0px 8px;
410 text-align:center;
411 line-height:2.5em;
412 }
413
414 .tableBlue{
415 margin:auto;
416 background: #f9f9f9;
417 border-collapse: collapse;
418 width:98%;
419 text-align:center;
420 }
421
422 .tableBlue td{
423 border: 1px #aaaaaa solid;
424 padding:8px !important;
425 }
426
427 .tableBlue th{
428 background: rgb(200,220,240);
429 text-align: center;
430 font-weight:bold;
431 color:rgb(120,140,180);
432 padding: 8px 15px 8px 15px;
433 border: 1px #aaaaaa solid;
434 }
435
436 .tableBlue tr.row-odd{background:white;}
437 .tableBlue tr.row-even{background:rgb(235,245,255);}
438
439 /* Leyla formulaires STIC III/IV */
440
441 .annee.radioButtonItem {
442 width: 10%;
443 display: block;
444 float:left;
445 }
446
447 .technologie.checkboxLabel {
448 width: 25%;
449 display: block;
450 float:left;
451 }
452
453 .type.checkboxLabel {
454 width: 25%;
455 display: block;
456 float:left;
457 }
458
459 .domaine_enseignement.checkboxLabel {
460 width: 25%;
461 display: block;
462 float:left;
463 }
464
465 .niveau_enseignement.checkboxLabel {
466 width: 33.3%;
467 display: block;
468 float:left;
469 }
470
471 .public_cible.checkboxLabel {
472 width: 20%;
473 display: block;
474 float:left;
475 }
476 .public_age.checkboxLabel {
477 width: 20%;
478 display: block;
479 float:left;
480 }
481
482 /* for smartphone display*/
483 pre{
484 word-break: break-word;
485 }
486
487 /*
488 </pre>
489 */