MediaWiki:Common.css

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