-288 Removals
+317 Additions

Created by:phpboost

1/* ------------------------------------- 1/* -------------------------------------
2 global.css 2 global.css
3 Contient les classes globales au site, peuvent etre utilisees partout. 3 Contient les classes globales au site, peuvent etre utilisees partout.
4 - Mise en forme du texte 4 - Mise en forme du texte
5 - Mise en forme du contenu 5 - Mise en forme du contenu
6 - Les Icones specifiques PHPBoost de FontAwesome 6 - Les Icones specifiques PHPBoost de FontAwesome
7 - Systeme d upload 7 - Systeme d upload
8 - social connect 8------------------------------------- */
9--------------------------------------*/
10 9
11 10
12/* -- La mise en forme du texte -- */ 11/* -- La mise en forme du texte -- */
13/* ------------------------------- */ 12/* ------------------------------- */
14 13
15/* --- Les liens du site --- */ 14/* --- Les liens du site --- */
16a { 15a {
17 color: #366493;
18 text-decoration: none; 16 text-decoration: none;
17 font-weight: normal;
19} 18}
20 19
21a:hover { 20a:hover,
22 color: #021B34; 21.link-color:hover {
23 text-decoration: underline; 22 text-decoration: underline;
23 transition: all 0.3s ease;
24} 24}
25 25
26/* --- Couleur des liens --- */ 26/* --- Tailles de polices --- */
27a.admin { color: #E27B47; } 27.smaller { font-size: 0.618em; }
28a.modo { color: #2F9674; } 28.small { font-size: 0.809em; }
29a.member { color: #021B34; } 29.normal { font-size: 1.000em; }
30.big { font-size: 1.228em; }
31.bigger { font-size: 1.456em; }
32.biggest { font-size: 2.1618em; }
30 33
31/* --- Couleur de texte --- */ 34/* --- Les titres (balise h) --- */
32.color-alert { color: #B22222; } 35h1 { font-size: 2.4em; }
33.color-notavailable { color: #B22222; } 36h2 { font-size: 2.0em; }
34.color-available { color: #008000; } 37h3 { font-size: 1.8em; }
35.color-unknown { color: #004b80; } 38h4 { font-size: 1.6em; }
39h5 { font-size: 1.4em; }
40h6 { font-size: 1.2em; }
36 41
37.bkgd-color-visible { background-color: #CCFFCC; } 42h1, h2, h3, h4, h5, h6 {
38.bkgd-color-unvisible { background-color: #FFEE99; } 43 font-weight: 400;
39.bkgd-color-unaprobed { background-color: #FFCCCC; } 44 word-wrap: normal;
45 overflow-wrap: normal;
46 hyphens: none;
47 line-height: normal;
48}
40 49
41.bkgd-color-fixed { background-color: #7FFF9C; } 50section header h1 {
42tr td.bkgd-color-fixed { background-color: #7FFF9C; } 51 font-size: 1em;
43.bkgd-color-processing { background-color: #FFD86F; } 52}
44tr td.bkgd-color-processing { background-color: #FFD86F; }
45.bkgd-color-unknown { background-color: #FF796F; }
46tr td.bkgd-color-unknown { background-color: #FF796F; }
47 53
48/* --- Tailles de polices --- */ 54section > header,
49.smaller { font-size: 0.7em; } 55section > header h1 {
50.small { font-size: 0.9em; } 56 text-align: right;
51.normal { font-size: 1.0em; } 57}
52.big { font-size: 1.2em; }
53.bigger { font-size: 1.5em; }
54.biggest { font-size: 2.0em; }
55 58
56/* --- Les titres (balise h) --- */ 59article > header > h1 {
57h1 { font-size: 2.2rem; } 60 font-size: 1.482em;
58h2 { font-size: 2.0rem; }
59h3 { font-size: 1.9rem; }
60h4 { font-size: 1.8rem; }
61h5 { font-size: 1.6rem; }
62h6 { font-size: 1.4rem; }
63
64h1, h2, h3, h4, h5, h6 {
65 overflow: hidden;
66} 61}
67 62
68/* --- Les Titres bbcode --- */ 63/* --- Les Titres bbcode --- */
69.formatter-title { 64.formatter-title {
70 display: inline-block; 65 display: inline-block;
71 margin: 1.5rem 0 1rem 0; 66 margin: 1.618rem 0 1.309rem 0;
72 border-color: #366393; 67 font-weight: 300;
73} 68}
74 69
75h2.formatter-title { 70h2.formatter-title {
71 border-bottom-width: 3px;
76 border-bottom-style: solid; 72 border-bottom-style: solid;
77 border-bottom-width: 3px; 73 border-color: transparent;
78 font-weight: bold; 74 margin-top: 2.618rem;
79 margin-top: 3rem;
80} 75}
81 76
82h3.formatter-title { 77h3.formatter-title {
83 border-bottom-style: solid;
84 border-bottom-width: 2px; 78 border-bottom-width: 2px;
79 border-bottom-style: solid;
80 border-color: transparent;
85} 81}
86 82
87h4.formatter-title { 83h4.formatter-title {
88 text-decoration: underline; 84 text-decoration: underline;
89} 85}
90 86
91h5.formatter-title { 87h5.formatter-title {
92 font-style: italic; 88 font-style: italic;
93 text-decoration: underline; 89 text-decoration: underline;
94} 90}
95 91
96h6.formatter-title { 92h6.formatter-title {
97 font-style: italic; 93 font-style: italic;
98} 94}
99 95
100h2.formatter-title { margin-left: 0; } 96h2.formatter-title { font-size: 2.8rem; margin-left: 0; }
101h3.formatter-title { margin-left: 1rem; } 97h3.formatter-title { font-size: 2.6rem; margin-left: 1rem; }
102h4.formatter-title { margin-left: 2rem; } 98h4.formatter-title { font-size: 2.4rem; margin-left: 2rem; }
103h5.formatter-title { margin-left: 3rem; } 99h5.formatter-title { font-size: 2.2rem; margin-left: 3rem; }
104h6.formatter-title { margin-left: 4rem; } 100h6.formatter-title { font-size: 2.0rem; margin-left: 4rem; }
105 101
106.formatter-title + br + .formatter-title { 102.formatter-title + br + .formatter-title {
107 margin-top: 0; 103 margin-top: 0;
108} 104}
105
109 106
110/* -- Mise en forme du contenu -- */ 107/* -- Mise en forme du contenu -- */
111/* ------------------------------ */ 108/* ------------------------------ */
112 109
113/* --- Affichage du mini calendrier --- */ 110/* --- Affichage du mini calendrier --- */
114.calendar-block-container { 111.calendar-block-container {
115 position: absolute; 112 position: absolute;
116 z-index: 100; 113 z-index: 100;
117 left: 0; 114 left: 0;
118 right: 0; 115 right: 0;
119} 116}
120 117
121.form-field .calendar-container { 118.form-field .calendar-container {
122 display: inline-block; 119 display: inline-block;
123 position: relative; 120 position: relative;
124} 121}
125 122
123.calendar-container a .fa-calendar {
124 font-size: 1.6em;
125}
126
126.calendar-block { 127.calendar-block {
127 position: absolute; 128 position: absolute;
128 border: 1px solid #999999;
129 z-index: 10; 129 z-index: 10;
130 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
131} 130}
132 131
133.calendar-block { 132.calendar-block {
134 top: 25px; 133 top: 2em;
135 left: -104px; 134 left: -104px;
136} 135}
137 136
138.calendar-block .date-picker { 137.calendar-block .date-picker {
139 margin: 0; 138 margin: 0;
140 width: 250px; 139 width: 250px;
141 table-layout: fixed; 140 table-layout: fixed;
142} 141}
143 142
144.calendar-block .date-select-container { 143.calendar-block .date-select-container {
145 background-color: #F5F5F5; 144 padding: 0.809em 0 0.309em;
146 padding: 2px 0;
147} 145}
148 146
149.calendar-block .date-select-previous { 147.calendar-block .date-select-previous {
150 float: left; 148 float: left;
151 margin: 1px 4px 0 4px;
152} 149}
153 150
154.calendar-block .date-select-next { 151.calendar-block .date-select-next {
155 float: right; 152 float: right;
156 margin: 1px 4px 0 4px;
157} 153}
158 154
159.calendar-block .date-select-next i, 155.calendar-block .date-select-previous i,
160.calendar-block .date-select-previous i { 156.calendar-block .date-select-next i {
161 color: #666666; 157 padding: 0.1618em 0.309em;
162} 158}
159
163 160
164.calendar-block .date-select-content { 161.calendar-block .date-select-content {
165 margin: auto; 162 margin: auto;
166 width: 185px; 163 width: 185px;
167 text-align: center; 164 text-align: center;
168} 165}
169 166
170.calendar-block .date-select-content select, 167.calendar-block .date-select-content select,
171.calendar-block .date-select-content select:focus { 168.calendar-block .date-select-content select:focus {
172 padding: 1px 1px; 169 padding: 0.1618em;
173 font-size: 0.9em; 170 font-size: 0.809em;
174 border: none; 171 border: none;
175 background: none; 172 background: none;
176 box-shadow: none; 173 box-shadow: none;
177} 174}
178 175
179.calendar-block .date-select-month { 176.calendar-block .date-select-month {
180 width: 92px; 177 width: 92px;
181 margin: 0 1px 0 5px; 178 margin: 0 0.1618em 0 0.309em;
182} 179}
183 180
184.calendar-block .date-select-year { 181.calendar-block .date-select-year {
185 width: 55px; 182 width: 55px;
186 margin: 0; 183 margin: 0;
187} 184}
188 185
189.calendar-block .date-picker select, 186.calendar-block .date-picker select,
190.calendar-block .date-picker select:focus { 187.calendar-block .date-picker select:focus {
191 box-shadow: none; 188 box-shadow: none;
192 max-width: 75px; 189 max-width: 75px;
193} 190}
194 191
195.calendar-block .date-picker thead tr th { 192.calendar-block .date-picker thead tr th {
196 border-top: 1px solid #CCCCCC; 193 padding: 0.309em 0;
197 padding: 5px 0;
198 background-color: #FFFFFF;
199 font-weight: bold; 194 font-weight: bold;
200 color: #666666;
201} 195}
202 196
203.calendar-block .date-picker tbody tr:last-child { 197.calendar-block .date-picker tbody tr td {
204 border-bottom: none; 198 border-bottom: none;
205} 199}
206 200
207.calendar-block .date-picker tbody td { 201.calendar-block .date-picker tbody td {
208 height: 23px; 202 padding: 0.1618em;
209 padding: 1px 2px; 203}
204
205.calendar-block .date-picker tbody td a {
206 display: block;
207 font-size: 0.809em;
208 padding: 0.456em;
210} 209}
211 210
212.calendar-block .date-picker tbody td:first-child { border-left: none; } 211.calendar-block .date-picker tbody td:first-child { border-left: none; }
213.calendar-block .date-picker tbody td:last-child { border-right: none; } 212.calendar-block .date-picker tbody td:last-child { border-right: none; }
214 213
215tbody td.calendar-none { background-color: #FFFFFF; }
216tbody td.calendar-today { background-color: #B5E5B9; }
217tbody td.calendar-event { background-color: #DBE5EE; }
218tbody td.calendar-weekend { background-color: #FFE3B6; }
219
220.calendar-block .date-picker tbody tr:last-child td { 214.calendar-block .date-picker tbody tr:last-child td {
221 border-bottom: none; 215 border-bottom: none;
222} 216}
223 217
224td.calendar-week { 218.calendar-block .date-picker tbody td.calendar-event a {
225 border-right: 1px solid #BBBBBB; 219 border-width: 1px;
220 border-style: solid;
221 border-color: transparent;
226} 222}
227 223
228/* --- Le selecteur de couleur --- */ 224/* --- Le selecteur de couleur --- */
229.color-picker { 225.color-picker {
230 position: absolute; 226 position: absolute;
231 z-index: 100; 227 z-index: 100;
232} 228}
233 229
234.color-picker .bbcode-block table { 230.color-picker .bbcode-block table {
235 margin: auto; 231 margin: auto;
236 border: none; 232 border: none;
237 border-collapse: collapse; 233 border-collapse: collapse;
238} 234}
239 235
240.color-picker td { 236.color-picker td {
241 padding: 0; 237 padding: 0;
242 border: 1px solid #F3F3F3; 238 border-width: 1px;
239 border-style: solid;
240 border-color: transparent;
243} 241}
244 242
245.color-picker td a { 243.color-picker td a {
246 display: block; 244 display: block;
247 width: 14px; 245 width: 0.809em;
248 height: 14px; 246 height: 0.809em;
249} 247}
250 248
251/* --- les blocs de quote, de code ou caches --- */ 249/* --- les blocs de quote, de code ou caches --- */
252.formatter-container { 250.formatter-container {
253 position: relative; 251 position: relative;
254 display: block; 252 display: block;
255 margin: auto; 253 margin: auto;
256 width: 93%; 254 width: 93%;
257 color: #444444;
258} 255}
259 256
260.formatter-container .formatter-title { 257.formatter-container .formatter-title {
261 font-weight: bold; 258 font-weight: bold;
262} 259}
263 260
264.formatter-content { 261.formatter-content {
265 margin: 0; 262 margin: 0;
266 padding: 8px; 263 padding: 0.456em;
267 background-color: #FAFAFA; 264 border-width: 1px;
268 border: 1px solid #DDDDDD; 265 border-style: solid;
266 border-color: transparent;
269} 267}
270 268
271.formatter-hide .formatter-content { 269.formatter-hide .formatter-content {
272 height: 0; 270 height: 0;
273 max-height: 0; 271 max-height: 0;
274 padding: 0; 272 padding: 0;
275 overflow: hidden; 273 overflow: hidden;
276 visibility: hidden; 274 visibility: hidden;
277 transform: scaleY(0); 275 transform: scaleY(0);
278 transition: transform 0.15s linear; 276 transition: transform 0.15s linear;
279 transform-origin: 50% 0; 277 transform-origin: 50% 0;
280} 278}
281 279
282.formatter-show .formatter-content, 280.formatter-show .formatter-content,
283.formatter-hide.no-js:hover .formatter-content { 281.formatter-hide.no-js:hover .formatter-content {
284 height: auto; 282 height: auto;
285 max-height: 500px; 283 max-height: 500px;
286 padding: 8px; 284 padding: 0.456em;
287 overflow: auto; 285 overflow: auto;
288 visibility: visible; 286 visibility: visible;
289 transform: scaleY(1); 287 transform: scaleY(1);
290} 288}
291 289
292.formatter-hide .formatter-hide-message { 290.formatter-hide .formatter-hide-message {
293 display: block; 291 display: block;
294 font-style: italic; 292 font-style: italic;
295 font-weight: normal; 293 font-weight: normal;
296 font-size: 0.8em; 294 font-size: 0.809em;
297 color: #BBBBBB; 295 padding: 0.228em 0.456em;
298 padding: 4px 8px;
299 width: 100%; 296 width: 100%;
300 margin: 0 auto 0 auto; 297 margin: 0 auto 0 auto;
301 background-color: #FDFDFD;
302 border: 1px solid #EEEEEE;
303 cursor: pointer; 298 cursor: pointer;
299 border-width: 1px;
300 border-style: solid;
301 border-color: transparent;
304} 302}
305 303
306.formatter-show .formatter-hide-message { 304.formatter-show .formatter-hide-message {
307 display: none; 305 display: none;
308} 306}
309 307
310.formatter-hide-close-button { 308.formatter-hide-close-button {
311 position: absolute; 309 position: absolute;
312 display: none; 310 display: none;
313 top: 2em; 311 top: 2.618em;
314 right: 0; 312 right: 0;
315 color: #BBBBBB;
316 font-size: 0.8em; 313 font-size: 0.8em;
317 font-style: italic; 314 font-style: italic;
318 cursor: pointer; 315 cursor: pointer;
319 transition: all 0.3s linear; 316 transition: all 0.3s linear;
320} 317}
321 318
322.formatter-hide-close-button-txt { 319.formatter-hide-close-button-txt {
323 padding: 0 0 0 3px; 320 padding: 0 0 0 0.228em;
324} 321}
325 322
326.formatter-show .formatter-hide-close-button { 323.formatter-show .formatter-hide-close-button {
327 display: block; 324 display: block;
328} 325}
329 326
330.formatter-hide-close-button:hover { 327.formatter-hide-close-button:hover {
331 color: #444444;
332 transition: all 0.3s linear; 328 transition: all 0.3s linear;
333} 329}
334 330
335.formatter-code .formatter-title { 331.formatter-code .formatter-title {
336 margin: 1rem 0 0.5rem 0; 332 margin: 1rem 0 0.5rem 0;
337} 333}
338 334
339.formatter-code .formatter-content { 335.formatter-code .formatter-content {
340 overflow: auto; 336 overflow: auto;
341 max-height: 500px; 337 max-height: 500px;
342} 338}
343 339
340.copy-code-content {
341 border-style: dashed;
342}
343
344.formatter-blockquote .formatter-content{
345 border-width: 0;
346 padding: 1.618%;
347 font-style: italic;
348 position: relative;
349}
350
351.formatter-blockquote .formatter-content:before,
352.formatter-blockquote .formatter-content:after {
353 position: absolute;
354 font-family: 'Font Awesome 5 Free';
355 font-weight: 900;
356 font-size: 1.618em;
357}
358
359.formatter-blockquote .formatter-content:before {
360 content: '\f10d';
361 top: -10px;
362 left: -15px;
363}
364
365.formatter-blockquote .formatter-content:after {
366 content: '\f10e';
367 bottom: -10px;
368 right: -15px;
369}
370
344.copy-code { 371.copy-code {
345 float: right; 372 float: right;
346 padding: 1.2rem 0.5rem 0 0; 373 padding: 1.2rem 0.5rem 0 0;
347 color: #BBBBBB;
348 font-size: 0.8em; 374 font-size: 0.8em;
349 font-style: italic; 375 font-style: italic;
350 cursor: copy; 376 cursor: copy;
351 transition: all 0.3s linear; 377 transition: all 0.3s linear;
352} 378}
353 379
354.copy-code-txt { 380.copy-code-txt {
355 padding: 0 0 0 3px; 381 padding: 0 0 0 0.228em;
356} 382}
357 383
358/* --- les autres element bbcode --- */ 384/* --- les autres element formates --- */
359.indent { 385.indent {
360 margin-left: 30px; 386 margin-left: 1.618em;
361} 387}
362 388
363.formatter-acronym { 389.formatter-acronym {
364 cursor: help; 390 cursor: help;
365} 391}
366 392
367.formatter-block { 393.formatter-block {
368 display: block; 394 display: block;
369 margin: 5px 20px; 395 margin: 0.309em 1.309em;
370 padding: 5px; 396 padding: 0.309em;
371 border: 1px solid #C4CED6;
372 overflow: hidden; 397 overflow: hidden;
373} 398}
374 399
375.formatter-fieldset { 400.formatter-fieldset {
376 margin: 10px; 401 margin: 0.618em;
377} 402}
378 403
379.formatter-ul { 404.formatter-ul {
380 text-align: left; 405 text-align: left;
381 list-style-position: inside;
382} 406}
383 407
384/* --- les listes numerotees --- */ 408/* --- les listes numerotees --- */
385.code ol { 409.code ol {
386 margin-left: 3em; 410 margin-left: 3em;
387} 411}
388 412
389/* --- menu de flux --- */ 413/* --- menu de flux --- */
390.feed-list { 414.feed-list {
391 margin: 5px 0; 415 margin: 0.309em 0;
392 list-style-type: none; 416 list-style-type: none;
393 text-align: left; 417 text-align: left;
394} 418}
395 419
396@media (max-width: 768px) { 420@media (max-width: 768px) {
397 .feed-list li a { 421 .feed-list li a {
398 margin: 1px 0; 422 margin: 1px 0;
399 padding: 7px 0; 423 padding: 0.456em 0;
400 display: inline-block; 424 display: inline-block;
401 } 425 }
402} 426}
427
403/* --- La recherche de membre (AJAX) --- */ 428/* --- La recherche de membre (AJAX) --- */
404.xmlhttprequest-result-search { 429.xmlhttprequest-result-search {
405 margin: 2px 0 0 0;
406 padding: 2px;
407 min-height: 40px;
408 width: 100px;
409 background-color: #FFFFFF;
410 border: 1px solid #CCCCCC;
411 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
412 overflow: auto; 430 overflow: auto;
431 border-width: 1px;
432 border-style: solid;
433 border-color: transparent;
413} 434}
414 435
415/* --- La barre de progression --- */ 436/* --- La barre de progression --- */
416.progressbar-container { 437.progressbar-container {
417 position: relative; 438 position: relative;
418 margin: 4px 0 10px; 439 margin: 0.228em 0 0.618em;
419 padding: 2px;
420 background-color: #F5F5F5;
421 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
422} 440}
423 441
424.progressbar-container .progressbar-infos { 442.progressbar-container .progressbar-infos {
425 position: absolute; 443 position: absolute;
426 top: 50%; 444 top: 50%;
427 transform: translateY(-50%); 445 transform: translateY(-50%);
428 width: 100%; 446 width: 100%;
429 line-height: 13px; 447 line-height: 0.809em;
430 font-size: 11px; 448 font-size: 0.618em;
431 text-align: center; 449 text-align: center;
432} 450}
433 451
434.progressbar {
435 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
436}
437
438.progressbar[style*="100"] {
439
440}
441
442.progressbar-container .progressbar { 452.progressbar-container .progressbar {
443 height: 14px; 453 height: 1.618em;
444 background-color: #8ECF67;
445 transition: width .6s ease; 454 transition: width .6s ease;
446} 455}
447 456
448/* --- Le systeme de notation --- */ 457/* --- Le systeme de notation --- */
449.notation, 458.notation,
450.static-notation { 459.static-notation {
451 display: inline-block; 460 display: inline-block;
452} 461}
453 462
454.notation .star, 463.notation .star,
455.static-notation .star { 464.static-notation .star {
456 padding-right: 5px; 465 position: relative;
457 color: #E3CF7A; 466 font-size: 1.5rem;
458 font-size: 14px;
459 text-decoration: none; 467 text-decoration: none;
460} 468}
461 469
470.notation .star-width {
471 position: absolute;
472 display: inline-block;
473 top:0;
474 left:0;
475}
462 476
463/* -- Les Icones specifiques PHPBoost de FontAwesome -- */ 477.notation .star-width:before {
464/* ---------------------------------------------------- */ 478 font-family: 'Font Awesome 5 Free';
479 font-weight: 900;
480 color: #E3CF7A;
481 left: 0;
482 top:0;
483 content:"\f005";
484 display:block;
485 overflow:hidden;
486}
465 487
466/* --- les couleurs d icones --- */ 488.star-width-0 { width: 0%; }
467.fa-syndication:before { color: #F57900; } 489.star-width-10 { width: 30%; }
468.fa-success:before { color: #478948; } 490.star-width-25 { width: 41%; }
469.fa-forbidden:before { color: #BA4B49; } 491.star-width-50 { width: 50%; }
470.fa-error:before { color: #BA4B49; } 492.star-width-75 { width: 65%; }
471.fa-warning:before { color: #C19954; } 493.star-width-90 { width: 78%; }
472.fa-ban:before { color: #BA4B49; } 494.star-width-100 { width: 100%; }
473.fa-unban:before { color: #478948; } 495
474.fa-male:before { color: #8DC3E9; }
475.fa-female:before { color: #F49CC4; }
476.fa-online:before { color: #52D132; }
477.fa-offline:before { color: #E05759; }
478.fa-trend-up:before { color: #478948; }
479.fa-trend-down:before { color: #BA4B49; }
480 496
481/* --- Les alertes --- */ 497/* --- Les alertes --- */
482li.small-block .fa-stack { 498li.small-block .fa-stack {
483 height: 2.34em; 499 height: 2.34em;
484} 500}
485 501
486.fa-circle-alert { 502.fa-circle-alert {
487 position: absolute; 503 position: absolute;
488 z-index: 1; 504 z-index: 1;
489 top: -3px; 505 top: -3px;
490 left: 20px; 506 left: 20px;
491 font-size: 1.32em; 507 font-size: 1.32em;
492 color: #BA4B49;
493} 508}
494 509
495.fa-circle-alert span { 510.fa-circle-alert span {
496 position: absolute; 511 position: absolute;
497 top: 4px; 512 top: 4px;
498 display: block; 513 display: block;
499 margin: 0 auto; 514 margin: 0 auto;
500 width: 100%; 515 width: 100%;
501 color: #FFFFFF;
502 font-size: 0.7em; 516 font-size: 0.7em;
503 text-align: center; 517 text-align: center;
504} 518}
505 519
520
506/* -- Les messages d erreurs -- */ 521/* -- Les messages d erreurs -- */
507/* ---------------------------- */ 522/* ---------------------------- */
508.error,
509.notice,
510.warning,
511.success,
512.question,
513.message-helper { 523.message-helper {
514 position: relative; 524 position: relative;
515 display: block; 525 display: block;
516 margin: 5px auto 15px auto; 526 margin: 0.309em auto 1em auto;
517 padding: 10px 10px 10px 40px; 527 padding: 0.618em 0.618em 0.618em 2.618em;
518 height: auto; 528 height: auto;
519 border: 1px solid #FFFFFF; 529 border-width: 1px;
520 line-height: 20px; 530 border-style: solid;
531 border-color: transparent;
532 line-height: 1.2;
521 text-align: left; 533 text-align: left;
522 overflow: hidden; 534 overflow: hidden;
523} 535}
524 536
525.error:before,
526.notice:before,
527.warning:before,
528.success:before,
529.question:before,
530.message-helper:before { 537.message-helper:before {
531 position: absolute; 538 position: absolute;
532 left: 6px; 539 left: 6px;
533 top: 7px; 540 top: 7px;
534 width: 28px; 541 width: 28px;
535 font-family: FontAwesome; 542 font-family: 'Font Awesome 5 Free';
543 font-weight: 900; /* Solid icons*/
536 font-style: normal; 544 font-style: normal;
537 font-weight: normal; 545 line-height: normal;
538 line-height: 1; 546 font-size: 1.5em;
539 font-size: 2em;
540 text-align: center; 547 text-align: center;
541 -webkit-font-smoothing: antialiased; 548 -webkit-font-smoothing: antialiased;
542 -moz-osx-font-smoothing: grayscale; 549 -moz-osx-font-smoothing: grayscale;
543} 550}
544 551
545.message-helper-small { 552.message-helper-small {
546 width: 50%; 553 width: 50%;
547} 554}
548 555
549.error:before { content: "\f00d"; } 556.message-helper.error:before { content: "\f00d"; } /* copy times */
550.notice:before { content: "\f12a"; } 557.message-helper.notice:before { content: "\f12a"; } /* copy exclamation */
551.warning:before { content: "\f071"; } 558.message-helper.warning:before { content: "\f071"; } /* copy exclamation-triangle */
552.success:before { content: "\f00c"; } 559.message-helper.success:before { content: "\f00c"; } /* copy check */
553.question:before { content: "\f128"; } 560.message-helper.question:before { content: "\f128"; } /* copy question */
554.member-only:before { content: "\f071"; } 561.message-helper.member-only:before { content: "\f071"; } /* copy exclamation-triangle */
555.modo-only:before { content: "\f071"; } 562.message-helper.modo-only:before { content: "\f071"; } /* copy exclamation-triangle */
556.admin-only:before { content: "\f071"; } 563.message-helper.admin-only:before { content: "\f071"; } /* copy exclamation-triangle */
564
565.floating-message-container {
566 position: fixed;
567 left: 50%;
568 transform: translateX(-50%);
569 z-index: -1;
570 top: 0.618em;
571}
572
573.floating-message-container.active {
574 z-index: 100;
575}
576
577.floating-message-container .message-helper {
578 overflow: visible;
579 opacity: 0;
580}
581
582@media (max-width: 768px) {
583 .floating-message-container {
584 width: 100%;
585 top: 1em;
586 }
587
588 .floating-message-container .message-helper {
589 max-width: 90%;
590 padding: 10px 10px 10px 50px;
591 }
592}
593
594.floating-message-container .message-helper-button {
595 position: absolute;
596 z-index: 1;
597 top: -13px;
598 right: -12px;
599 height: 1.482em;
600 width: 1.482em;
601 border-radius: 100em;
602 text-align: center;
603 padding-top: 0.1618em;
604}
557 605
558.error, .error:before { color: #BA4B49; } 606.floating-message-container .fa-close-message {
559.notice, .notice:before { color: #888888; } 607 display: inline-block;
560.warning, .warning:before { color: #C19954; } 608 color: white;
561.success, .success:before { color: #478948; } 609 font-size: 1em;
562.question, .question:before { color: #3B88AE; } 610 margin: auto;
563.member-only, .member-only:before { color: #C19954; } 611}
564.modo-only, .modo-only:before { color: #C19954; } 612
565.admin-only, .admin-only:before { color: #C19954; } 613.floating-message-container .fa-close-message:before {
614 content: "\f00d";
615}
566 616
567.error { background-color: #F3DFDF; border-color: #ECCDD2; } 617.floating-message-container .message-helper > a {
568.notice { background-color: #F0F0F0; border-color: #E2E2E2; } 618 color: inherit;
569.warning { background-color: #FDF9E4; border-color: #FBECCD; } 619 cursor: pointer;
570.success { background-color: #E0F1D9; border-color: #D7EAC7; } 620}
571.question { background-color: #DAEEF8; border-color: #BDE9F2; }
572.member-only { background-color: #FDF9E4; border-color: #FBECCD; }
573.modo-only { background-color: #FDF9E4; border-color: #FBECCD; }
574.admin-only { background-color: #FDF9E4; border-color: #FBECCD; }
575 621
576 622
577/* -- Systeme d Upload -- */ 623/* -- Systeme d Upload -- */
578/* ---------------------- */ 624/* ---------------------- */
579#module-user-upload { 625#module-user-upload {
580 margin: 5px; 626 margin: 0.309em;
581} 627}
582 628
583.upload-address-bar { 629.upload-address-bar {
584 margin: 0 25px; 630 margin: 0 1.482em;
585 padding: 6px; 631 padding: 0.382em;
586 background-color: #FAFAFA; 632 border-width: 1px;
587 border: 1px solid #DDDDDD; 633 border-style: solid;
588 color: #444444; 634 border-color: transparent;
589} 635}
590 636
591.upload-address-bar-links { 637.upload-address-bar-links {
592 float: right; 638 float: right;
593 margin: 0 25px 25px 25px; 639 margin: 0 1.482em 1.482em 1.482em;
594} 640}
595 641
596.upload-address-bar-links a { 642.upload-address-bar-links a {
597 margin-left: 10px; 643 margin-left: 0.618em;
598} 644}
599 645
600#empty-folder { 646#empty-folder {
601 width: 70%; 647 width: 70%;
602} 648}
603 649
604.upload-elements-container { 650.upload-elements-container {
605 margin: 10px 0 0 20px; 651 margin: 0.618em 0 0 1.309em;
606 overflow: hidden; 652 overflow: hidden;
607 text-align: left; 653 text-align: left;
608} 654}
609 655
610.upload-elements-file, 656.upload-elements-file,
611.upload-elements-repertory { 657.upload-elements-repertory {
612 display: inline-block; 658 display: inline-block;
613 vertical-align: top; 659 vertical-align: top;
614 margin: 10px; 660 margin: 0.618em;
615} 661}
616 662
617.upload-elements-repertory { 663.upload-elements-repertory {
618 line-height: 50px; 664 line-height: 50px;
619 width: 180px; 665 width: 180px;
620 text-align: center; 666 text-align: center;
621 border: 1px solid #366493; 667 border-width: 1px;
622 background-color: #aec7e1; 668 border-style: solid;
669 border-color: transparent;
623} 670}
624 671
625.upload-repertory-controls { 672.upload-repertory-controls {
626 font-size: 0; 673 font-size: 0;
627} 674}
628 675
629.upload-repertory-controls span { 676.upload-repertory-controls span {
630 font-size: 1.6rem; 677 font-size: 1.6rem;
631 width: calc(100% / 3); 678 width: calc(100% / 3);
632 display: inline-block; 679 display: inline-block;
633} 680}
634 681
635.upload-elements-file { 682.upload-elements-file {
636 width: 180px; 683 width: 180px;
684}
685
686.upload-elements-file a:hover {
687 text-decoration: none;
637} 688}
638 689
639.upload-elements-file input { 690.upload-elements-file input {
640 width: 100%; 691 width: 100%;
641} 692}
642 693
643.upload-element-name { 694.upload-element-name {
644 width: 100%; 695 width: 100%;
645 text-align: center; 696 text-align: center;
646} 697}
647 698
648.upload-element-picture { 699.upload-element-picture {
649 width: 100%; 700 width: 100%;
650 height: 100px; 701 height: 100px;
651 display: block; 702 display: block;
652 background-repeat: no-repeat; 703 background-repeat: no-repeat;
653 background-position: center; 704 background-position: center;
654 background-size: contain; 705 background-size: contain;
655} 706}
656 707
657.upload-element-icon { 708.upload-element-icon {
658 width: 100%; 709 width: 100%;
659 line-height: 100px; 710 line-height: 100px;
660 text-align: center; 711 text-align: center;
661 border: 1px solid #d9d9d9; 712 border-width: 1px;
713 border-style: solid;
714 border-color: transparent;
662} 715}
663 716
664.upload-file-controls { 717.upload-file-controls {
665 font-size: 0; 718 font-size: 0;
666} 719}
667 720
668.upload-file-controls a { 721.upload-file-controls a {
669 font-size: 1.6rem; 722 font-size: 1.6rem;
670 width: calc(100% / 4); 723 width: calc(100% / 4);
671 display: inline-block; 724 display: inline-block;
672 text-align: center; 725 text-align: center;
673 padding: 3px 0; 726 padding: 0.228em 0;
674}
675
676.upload-recent-file {
677 color: #BA4B49;
678} 727}
679 728
680.upload-input-bbcode { 729.upload-input-bbcode {
681 margin-top: 2px; 730 margin-top: 0.1618em;
682 cursor: pointer; 731 cursor: pointer;
683} 732}
684 733
685.upload-cat-list, 734.upload-cat-list,
686.upload-cat-explorer { 735.upload-cat-explorer {
687 margin: 0; 736 margin: 0;
688 padding: 0; 737 padding: 0;
689 list-style-type: none; 738 list-style-type: none;
690 line-height: normal; 739 line-height: normal;
691} 740}
692 741
693.upload-cat-explorer { 742.upload-cat-explorer {
694 padding-left: 30px; 743 padding-left: 1.618em;
695} 744}
696 745
697.upload-no-sub-cat { 746.upload-no-sub-cat {
698 padding-left: 17px; 747 padding-left: 1em;
699} 748}
700 749
701/* --- Deplacement des fichiers --- */ 750/* --- Deplacement des fichiers --- */
702.upload-selected-cat { 751.upload-selected-cat {
703 background-color: #F5FBFF; 752 border-width: 1px;
704 border: 1px solid #2C5169; 753 border-style: solid;
754 border-color: transparent;
705} 755}
706 756
707.upload-elements-move-to, 757.upload-elements-move-to,
708.upload-elements-move-file, 758.upload-elements-move-file,
709.upload-elements-move-to-cat, 759.upload-elements-move-to-cat,
710.upload-elements-move-folder { 760.upload-elements-move-folder {
711 float: left; 761 float: left;
712 width: 33%; 762 width: 33%;
713 text-align: center; 763 text-align: center;
714} 764}
715 765
716.upload-elements-move-to { 766.upload-elements-move-to {
717 margin-top: 50px; 767 margin-top: 2.809em;
718} 768}
719 769
720.upload-elements-move-file img { 770.upload-elements-move-file img {
721 width: 100px; 771 width: 100px;
722 height: auto; 772 height: auto;
723} 773}
724 774
725.upload-root-cat { 775.upload-root-cat {
726 padding: 0 0 0 17px; 776 padding: 0 0 0 1em;
727}
728
729
730/* -- social connect -- */
731/* -------------------- */
732a.social-connect {
733 display: inline-block;
734 margin: 10px 0;
735 width: 30px;
736 height: 30px;
737 vertical-align: top;
738 color: #DEDEDE;
739 text-align: center;
740} 777}
741 778
742.horizontal-fieldset a.social-connect {
743 margin: 0;
744 vertical-align: middle;
745}
746 779
747@media (max-width: 768px) { 780/* -- Les icones d'annonces et de messagerie -- */
748 .horizontal-fieldset a.social-connect { 781/* -------------------------------------------- */
749 display: block;
750 width: 100%;
751 margin: 5px auto;
752 }
753 782
754 .horizontal-fieldset a.social-connect i { 783/* --- Les icones d'annonces --- */
755 margin-right: 5px; 784.fa-announce:before,
756 } 785.fa-announce-new:before { content: "\f075"; } /* copy comment */
757} 786.fa-announce-hot:before,
787.fa-announce-new-hot:before { content: "\f086"; } /* copy comments */
788.fa-announce-lock:before,
789.fa-announce-new-lock:before { content: "\f023"; } /* copy lock */
790.fa-announce-post:before,
791.fa-announce-new-post:before { content: "\f071"; } /* copy exclamation-triangle */
792.fa-announce-top:before,
793.fa-announce-new-top:before { content: "\f06a"; } /* copy exclamation-circle */
758 794
759a.social-connect i:before { 795/* --- Icones de messagerie --- */
760 color: #DFDFDF; 796.fa-msg-display:before { content: "\f00c"; } /* copy check */
761 transition: 0.2s ease-out; 797.fa-msg-not-display:before { content: "\f00d"; } /* copy times */
762} 798.fa-msg-track:before { content: "\f004"; } /* copy heart */
763 799.fa-msg-not-track:before { content: "\f004"; } /* copy heart */
764a.social-connect:hover i:before { 800.fa-pm-track:before { content: "\f27a"; } /* copy comment-alt */
765 color: #EFEFEF; 801.fa-pm-not-track:before { content: "\f27a"; } /* copy comment-alt */
766 transition: 0.2s ease-out; 802.fa-mail-track:before { content: "\f0e0"; } /* copy envelope */
767} 803.fa-mail-not-track:before { content: "\f0e0"; } /* copy envelope */
804.fa-lastview:before { content: "\f017"; } /* copy clock-o */
805.fa-notread:before { content: "\f15c"; } /* copy file-alt, regular fonts */
806.fa-showmymsg:before { content: "\f4ad"; } /* copy comments-dots, regular fonts*/
768 807
769a.fb i:before { font-size: 1.9em; } 808.fa-notread,
770a.google i:before { font-size: 1.7em; } 809.fa-lastview,
771 810.fa-showmymsg {
772a.fb { padding: 8px 0 0 4px; } 811 font-weight: 200;
773a.google { padding: 6px 1px 0 0; }
774
775@media (max-width: 768px) {
776 a.fb {
777 padding: 5px 0 0 3px;
778 }
779}
780
781a.fb { background: #3B5998; }
782a.google { background: #D8432E; }
783a.twitter { background: #5EA9DD; }
784
785a.social-connect span {
786 display: none;
787} 812}
Editor
Original Text
Changed Text
Recommended videos