-481 Removals
+433 Additions

Created by:phpboost

1/* -------------------------------------- 1/* --------------------------------------
2 content.css 2 content.css
3Contient les elements : 3Contient les elements :
4 - conteneurs generaux, elements de module, 4 - conteneurs, elements de module,
5 - pagination des pages, 5 - pagination des pages,
6 - exploreur de categorie, 6 - exploreur de categorie,
7 - gestion des categories, 7 - gestion des categories,
8 - mini-module, 8 - mini-module,
9 - message postes, 9 - message postes,
10 - maintenance, 10 - maintenance,
11-----------------------------------------*/ 11 - sharing elements
12 12-------------------------------------- */
13 13
14/* -- Conteneurs, elements de module -- */ 14/* -- Conteneurs, elements de module -- */
15/* ------------------------------------ */ 15/* ------------------------------------ */
16section, 16section,
17article { 17article {
18 position: relative; 18 position: relative;
19 margin: 0 auto; 19 margin: 0 auto;
20 width: 100%; 20 width: 100%;
21 vertical-align: top; 21 vertical-align: top;
22 padding: 0 0 0.809em;
22} 23}
23 24
24@media (min-width: 769px) { 25@media (min-width: 769px) {
25 section, 26 section,
26 article { 27 article {
27 margin: 1em auto; 28 margin: 0.809em auto;
28 width: 98%;
29 } 29 }
30} 30}
31 31
32/* --- Titre d'une page ou d'un element d'un module --- */ 32/* --- Titre d'une page ou d'un element d'un module --- */
33section header h1, 33section header,
34article header h1 { 34article header {
35 border-bottom: 1px solid #366493; 35 padding: 0 0.809em;
36} 36}
37
38@media (min-width: 769px) {
39 article header {
40 margin: 0 0 0.809em 0;
41 }
42}
43
37section header a:hover { 44section header a:hover {
38 text-decoration: none; 45 text-decoration: none;
39} 46}
40 47
41section header h2, 48.cat-actions {
42article header h2 { 49 text-align: right;
43 margin-left: 15px;
44 border-bottom: 1px solid #366493;
45} 50}
46 51
47section header h3, 52.elements-container {
48article header h3 { 53 padding: 1.618em 0 0
49 margin-left: 15px;
50 border-bottom: 1px solid #366493;
51}
52
53@media (min-width: 769px) {
54 section header,
55 article header {
56 margin: 0 0 1em 0;
57 }
58} 54}
59 55
60/* --- Titre d'un bas de page --- */ 56/* --- Titre d'un bas de page --- */
61@media (min-width: 769px) { 57@media (min-width: 769px) {
62 section footer, 58 section footer,
63 article footer { 59 article footer {
64 margin-bottom: 1.5em; 60 margin-bottom: 1.618em;
65 } 61 }
66} 62}
67 63
68section footer, 64section footer,
69article footer { 65article footer {
70 clear: both; 66 clear: both;
71} 67}
72 68
73/* --- Icones actions (edition, suppression, etc) --- */ 69/* --- Icones actions (edition, suppression, etc) --- */
74span.actions { 70.actions {
75 float: right; 71 float: right;
76} 72}
77 73
78header span.actions a { 74.actions a {
79 font-size: 1.2rem; 75 display: inline-block;
76 padding: 0 0.456em;
77}
78
79@media (max-width: 768px) {
80 .actions a {
81 padding: 0 0.809em;
82 }
80} 83}
81 84
82.more { 85header h2 .actions {
83 padding: 10px 5px 0; 86 font-size: 0.456em;
84 font-size: 11px;
85 font-size: 1.1rem;
86 font-style: italic;
87} 87}
88 88
89@media (min-width: 769px) { 89.actions-menu {
90 .more { 90 position: relative;
91 margin: 0 0.2em 2em 1.2em;
92 padding: 0;
93 }
94} 91}
95 92
96/* --- Contenu --- */ 93.actions-title {
97.content { 94 position: relative;
98 padding: 0 1em; 95 display: block;
99 text-align: justify; 96 padding: 0.309em 0.456em;
100} 97}
101 98
102@media (min-width: 769px) { 99@media (max-width: 768px) {
103 div#main.main-with-left.main-with-right section .content { 100 .actions-title {
104 padding: 0 5px; 101 position: relative;
102 display: block;
103 padding: 1em 1.309em;
105 } 104 }
105}
106
107.actions-menu.opened .fa-actions-menu:before {
108 content: "\f00d";
109}
110
111.actions-submenu {
112 position: absolute;
113 list-style: none;
114 padding: 0;
115 top: 100%;
116 left: -9999px;
117 width: 250px;
118 z-index: 1;
119}
120
121.opened .actions-submenu {
122 left: auto;
123 right: 0;
124}
125
126.action {
127 font-size: 1.5rem;
128 padding: 0.309em 0.456em;
106} 129}
107 130
108@media (max-width: 768px) { 131@media (max-width: 768px) {
109 .content { 132 .action {
110 padding: 1em 0; 133 padding: 1em 0.618em;
111 } 134 }
112} 135}
113 136
137.action i {
138 text-align: center;
139 width: 20px;
140}
141
142/* --- Contenu --- */
143.content {
144 text-align: justify;
145 padding: 0.809em;
146}
147
148.content::after,
149.content::before {
150 content: '';
151 display: block;
152 clear: both;
153}
154
114.content + aside { 155.content + aside {
115 clear: both; 156 clear: both;
157 padding: 0.809em;
116} 158}
117 159
118/* --- Block --- */ 160/* --- Block --- */
119.block { 161.block {
120 padding: 0.8em; 162 border-width: 2px 1px 1px 1px;
121 background-color: #FBFDFF;
122 border-style: solid; 163 border-style: solid;
123 border-width: 2px 1px 1px 1px; 164 border-color: transparent;
124 border-color: #366493 #F1F1F1 #F1F1F1 #F1F1F1; 165 margin: 0 0 1.618em;
166 width: 100%;
125} 167}
126 168
127.no-style .block { 169@media (min-width: 769px) {
128 background-color: transparent!important; 170 .block { width: 98%; }
129 border: none!important;
130} 171}
131 172
132.block .content { 173.no-style .block,
133 margin: 0; 174.no-style .block header {
175 background-color: transparent !important;
176 border: none !important;
134} 177}
135 178
136.block h1 { 179.block h1 {
137 border: none; 180 border: none;
138} 181}
139 182
140.block header { 183.block header {
141 margin: 0 0 1% 0; 184 margin: 0 0 0.618em 0;
142} 185}
143 186
144.block footer { 187.block footer {
145 margin: 0; 188 margin: 0;
146} 189}
147 190
148.elements-container { 191/* --- Gestion en colonnes pour ecran large --- */
149 display: flex; 192@media (min-width: 769px) {
150 display: -ms-flexbox; 193 .columns-1 .block { width: 98%; }
151 display: -webkit-flex; 194 .columns-2 .block { width: calc(100% / 2.1); }
152 flex-direction: column; 195 .columns-3 .block { width: calc(100% / 3.1); }
153 -ms-flex-direction: column; 196 .columns-4 .block { width: calc(100% / 4.1); }
154 -webkit-flex-direction: column; 197 .columns-5 .block { width: calc(100% / 5.1); }
155 flex-wrap: wrap; 198 .columns-6 .block { width: calc(100% / 6.1); }
156 -ms-flex-wrap: wrap; 199 .columns-7 .block { width: calc(100% / 7.1); }
157 -webkit-flex-wrap: wrap; 200
158 align-content: flex-start; 201 .block-xlarge { width: 100% !important; }
159 -ms-flex-line-pack: start;
160 -webkit-align-content: flex-start;
161 justify-content: space-around;
162 -ms-flex-pack: distribute;
163 -webkit-justify-content: space-around;
164} 202}
165 203
166.elements-container > .block { 204/* --- Gestion des media --- */
167 flex: 0 1 auto; 205.thumbnail-item {
168 -ms-flex: 0 1 auto; 206 padding: 0.309em 0;
169 -webkit-flex: 0 1 auto; 207 display: block;
170} 208}
171 209
172/* Gestion en colonnes pour ecran large*/
173@media (min-width: 769px) { 210@media (min-width: 769px) {
174 .elements-container { 211 .thumbnail-item {
175 flex-direction: row; 212 max-width: 38%;
176 -ms-flex-direction: row; 213 float: left;
177 -webkit-flex-direction: row; 214 padding: 0.309em 0.618em 0.309em 0;
178 margin-left: -5px; /* @{gutter} */
179 } 215 }
180 216
181 .block { 217 .columns-3 .thumbnail-item,
182 margin-left: 5px; /* @{gutter} */ 218 .columns-4 .thumbnail-item,
183 width: 100%; 219 .columns-5 .thumbnail-item,
184 } 220 .columns-6 .thumbnail-item,
185 221 .columns-7 .thumbnail-item {
186 .columns-2 .block { width: calc(100% / 2 - 5px); } /* calc(100% / @{number} - @{gutter}); */ 222 float: none;
187 .columns-3 .block { width: calc(100% / 3 - 5px); } 223 max-width: 100%;
188 .columns-4 .block { width: calc(100% / 4 - 5px); } 224 padding: 0.309em 0;
189 .columns-5 .block { width: calc(100% / 5 - 5px); } 225 }
190 .columns-6 .block { width: calc(100% / 6 - 5px); }
191 .columns-7 .block { width: calc(100% / 7 - 5px); }
192
193 .block-xlarge { width: 100%!important; } /* Extension du bloc sur une ligne complète */
194} 226}
195 227
196/* Gestion en ligne pour petit ecran */
197@media (max-width: 768px) { 228@media (max-width: 768px) {
198 .block { 229 .media-content {
199 margin-bottom: 5px; 230 clear: both;
231 position: relative;
232 padding-bottom: 56.25%;
233 height: 0;
234 }
235
236 .media-content object,
237 .media-content embed,
238 .media-content video,
239 .media-content iframe,
240 .media-content .video-player {
241 position: absolute;
242 top: 0;
243 left: 0;
200 width: 100%; 244 width: 100%;
201 } 245 height: 100%;
246 }
202} 247}
203 248
249@media (min-width:769px) {
250 .media-content embed,
251 .media-content iframe {
252 width: auto;
253 height: auto;
254 }
255}
204 256
205/* ---- Friends content ---- */ 257/* --- Friends content --- */
206.content-friends { 258.content-friends {
207 border-width: 7px 1px 1px 1px; 259 border-width: 7px 1px 1px 1px;
208 border-top-color: #103B67;
209} 260}
210 261
211.content-privileged-friends { 262.content-privileged-friends {
212 border-width: 7px 1px 1px 1px; 263 border-width: 7px 1px 1px 1px;
213 border-top-color: #E2BE47;
214} 264}
215 265
216 266
217/* -- Pagination des pages -- */ 267/* -- Pagination des pages -- */
218/* -------------------------- */ 268/* -------------------------- */
219section footer ul.pagination { 269section footer ul.pagination {
220 text-align: center; 270 text-align: center;
221} 271}
222 272
223ul.pagination { 273ul.pagination {
224 margin: 0; 274 margin: 0;
225} 275}
226 276
227ul.pagination .fa:before { 277ul.pagination .fa:before {
228 font-size: 0.8em; 278 font-size: 0.809em;
229} 279}
230 280
231ul.pagination-block { 281ul.pagination-block {
232 margin: 5px 0; 282 margin: 0.309em 0;
233} 283}
234 284
235ul.pagination-block li { 285ul.pagination-block li {
236 padding: 2px 2px; 286 padding: 0.1618em;
237} 287}
238 288
239ul.pagination-block li a { 289ul.pagination-block li a {
240 display: inline-block; 290 display: inline-block;
241 padding: 2px 7px; 291 padding: 0.1618em 0.618em;
242 outline: none; 292 outline: none;
243 font-weight: bold; 293 font-weight: bold;
244 font-size: 0.8em; 294 font-size: 0.809em;
245 text-align: center; 295 text-align: center;
246 text-decoration: none; 296 text-decoration: none;
247} 297}
248 298
249ul.pagination-block li a { 299ul.pagination-block li a {
250 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
251 background-color: #FAFAFA;
252 border-style: solid;
253 border-width: 1px; 300 border-width: 1px;
254 border-color: #E1E1E1 #D1D1D1 #C9C9C9 #DDDDDD; 301 border-style: solid;
255 box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05); 302 border-color: transparent;
256 color: #777777;
257 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
258 transition: all 0.2s linear; 303 transition: all 0.2s linear;
259} 304}
260 305
261ul.pagination-block li a:hover { 306ul.pagination-block li a:hover {
262 background-color: #FDFDFD;
263 box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
264 transition: all 0.1s linear; 307 transition: all 0.1s linear;
265} 308}
266 309
267ul.pagination-block li a:active { 310ul.pagination-block li a:active {
268 background-color: #F1F1F1;
269 border: 1px solid #DDDDDD;
270 transition: all 0.2s linear; 311 transition: all 0.2s linear;
271} 312}
272 313
273ul.pagination-block li a.current-page { 314ul.pagination-block li a.current-page {
274 background-color: #366493;
275 border-color: #1E5083;
276 color: #F1F1F1;
277 text-decoration: none; 315 text-decoration: none;
278} 316}
279 317
280ul.pagination-block li a.current-page:hover {
281 background-color: #517BA6;
282 border-color: #366493;
283}
284
285ul.pagination-block-bis li a.prev-page,
286ul.pagination-block-bis li a.next-page {
287 border: none;
288 background: none;
289 box-shadow: none;
290 text-shadow: none;
291}
292
293ul.pagination-block-bis li a.prev-page:hover, 318ul.pagination-block-bis li a.prev-page:hover,
294ul.pagination-block-bis li a.next-page:hover { 319ul.pagination-block-bis li a.next-page:hover {
295 text-decoration: underline; 320 text-decoration: underline;
296} 321}
297 322
298.pages-pagination a { 323.pages-pagination a {
299 text-decoration: none; 324 text-decoration: none;
300} 325}
301 326
302 327
303/* -- Exploreur des categories -- */ 328/* -- Exploreur des categories -- */
304/* ------------------------------ */ 329/* ------------------------------ */
305.explorer .cats, 330.explorer .cats,
306.explorer .files { 331.explorer .files {
332 width: 100%;
307 display: inline-block; 333 display: inline-block;
308 margin: 5px 0.33%; 334 margin: 0.309em 0;
309 width: 48%;
310 vertical-align: top; 335 vertical-align: top;
311} 336}
312 337
313@media (max-width: 480px) { 338.explorer h2 {
339 font-size: 1.618em;
340}
341
342@media (min-width: 481px) {
314 .explorer .cats, 343 .explorer .cats,
315 .explorer .files { 344 .explorer .files {
316 width: 100%; 345 width: calc(100% / 2.1);
317 } 346 }
318} 347}
319 348
320.explorer .cats { 349.explorer .cats {
321 min-width: 200px; 350 min-width: 200px;
322} 351}
323 352
324.explorer h1 {
325 margin: 5px 0;
326 color: #666666;
327 font-size: 13px;
328}
329
330.explorer .content { 353.explorer .content {
331 padding: 5px 0; 354 padding: 0;
332 min-height: 120px; 355 min-height: 120px;
333 border: 1px solid #DDDDDD; 356 border-width: 1px;
357 border-style: solid;
358 border-color: transparent;
334} 359}
335 360
336.explorer .content ul { 361.explorer .content ul {
337 margin: 0; 362 margin: 0;
338 padding: 0; 363 padding: 0;
339 list-style-type: none; 364 list-style-type: none;
340} 365}
341 366
342.explorer .content ul ul { 367.explorer .content ul ul {
343 margin-left: 22px; 368 margin-left: 1em;
344} 369}
345 370
346.explorer .content ul a.parent { 371.explorer .content ul a.parent {
347 float: left; 372 float: left;
348 height: 0; 373 height: 0;
349} 374}
350 375
351.explorer .content ul a.parent i[id^="img2_"] { 376.explorer .content ul a.parent [id^="img2_"] {
352 margin-left: -18px; 377 margin-left: -1em;
378 margin-right: 0.1618em;
353} 379}
354 380
355.explorer .content ul a { 381.explorer .content ul a {
356 display: block; 382 display: block;
357 padding: 3px 0; 383 padding: 0.228em 0.309em;
358 color: #666666;
359 text-decoration: none; 384 text-decoration: none;
360 text-align: left; 385 text-align: left;
361} 386}
362 387
363.explorer .content > ul > li > a { 388.explorer .content ul i {
364 padding: 3px 5px; 389 width: 1.309em;
365}
366
367.explorer .content ul .fa {
368 width: 20px;
369 vertical-align: top; 390 vertical-align: top;
391 margin-right: 0.309em;
370} 392}
371 393
372.explorer .content ul .fa:before { 394.explorer .content ul i:before {
373 vertical-align: middle; 395 vertical-align: middle;
374} 396}
375 397
376.explorer .content ul a.parent .fa:first-child { 398.explorer .content ul a.parent i:first-child {
377 width: 14px; 399 width: 0.809em;
378}
379
380.explorer .content ul a.parent .fa:first-child:before {
381 width: 14px;
382 font-size: 11px;
383}
384
385.explorer .content ul a:hover,
386.explorer .content ul a:hover + a {
387 background-color: #EEEEEE;
388} 400}
389 401
390.explorer .content ul .sub a.parent { 402.explorer .content ul a.parent i:first-child:before {
391 padding-left: 4px; 403 font-size: 0.809em;
392}
393
394.explorer .selected {
395 background-color: #DDDDDD;
396} 404}
397 405
398.options { 406.options {
399 float: right; 407 margin: 0.309em 0;
400 margin: 5px; 408 padding: 0.456em 0.809em;
401 padding: 6px 12px;
402 max-width: 100%; 409 max-width: 100%;
403 background-color: #EEEEEE; 410 border-width: 1px;
404 border: 1px solid #DDDDDD; 411 border-style: solid;
412 border-color: transparent;
413 font-size: 0.809em;
405} 414}
406 415
407.options h6 { 416@media (min-width: 769px) {
408 margin: 10px 3px; 417 .options {
409 font-size: 14px; 418 float: right;
419 margin: 0.309em 0 0.309em 1em;
420 }
410} 421}
411 422
412.options > h6, 423.options .horizontal-fieldset,
413.options > a , 424.options .horizontal-fieldset-element,
414.options > span > a.small { 425.options .horizontal-fieldset .form-element {
415 color: #333333; 426 margin: 0;
416} 427}
417 428
418.options img { 429.options h6 {
419 margin: 0 0 5px 0; 430 margin: 0 auto;
431 vertical-align: middle;
432 font-weight: 400;
433 padding: 0.228em;
420} 434}
421 435
422.infos { 436.infos {
423 margin-left: 20px; 437 width: 100%;
424} 438}
425 439
426@media (max-width: 480px) { 440.infos img {
441 padding: 0 0 0.618em 0;
442 display: block;
443 margin: auto;
444}
445
446@media (min-width: 769px) {
427 .infos { 447 .infos {
428 float: none; 448 max-width: 38%;
429 width: 100%;
430 margin: 0 0 10px;
431 } 449 }
450}
451
452.infos-options {
453 display: block;
432} 454}
433 455
434 456
435/* -- Gestion des categories -- */ 457/* -- Gestion des categories -- */
436/* ---------------------------- */ 458/* ---------------------------- */
437.cat-description { 459.cat-description {
438 margin: 10px 5px; 460 margin: 0.618em 0.309em;
439} 461 text-align: left;
440
441.subcat-container {
442 margin: 10px 0 5px 0;
443 font-size: 0;
444} 462}
445 463
446.subcat-element { 464.subcat-element {
447 margin-bottom: 20px;
448 font-size: 13px;
449 text-align: center; 465 text-align: center;
450 border: none;
451 background-color: transparent;
452} 466}
453 467
454.subcat-content { 468.subcat-thumbnail,
455 margin: auto; 469.subcat-title,
456 padding: 0 5px; 470.subcat-options {
471 display: block;
457} 472}
458 473
459.subcat-content img { 474.subcat-thumbnail {
460 margin-bottom: 10px; 475 margin-bottom: 0.309em;
461} 476}
462
463 477
464/* --- Systeme de drag&Drop --- */ 478/* --- Systeme de drag&Drop --- */
465.sortable-block .sortable-element > .sortable-block { 479.sortable-block .sortable-element > .sortable-block {
466 margin-left: 30px; 480 flex: 1 0 calc(100% - 0.618em);
481 -ms-flex: 1 0 calc(100% - 0.618em);
482 -webkit-flex: 1 0 calc(100% - 0.618em);
483 margin: 0 0 0 0.618em;
467} 484}
468 485
469.sortable-block { 486.sortable-block {
470 margin: 0; 487 margin: 0;
471 padding: 0; 488 padding: 0;
472 min-height: 24px; 489 min-height: 24px;
473 list-style-type: none; 490 list-style-type: none;
474 list-style-position: outside; 491 list-style-position: outside;
475 color: #777777;
476} 492}
477 493
478.sortable-block .sortable-element { 494.sortable-block .sortable-element {
479 display: table; 495 display: flex;
480 margin-bottom: 6px; 496 display: -ms-flexbox;
497 display: -webkit-flex;
498 flex-direction: row;
499 -ms-flex-direction: row;
500 -webkit-flex-direction: row;
501 align-items: center;
502 -webkit-align-items: center;
503 -ms-align-items: center;
504 align-content: center;
505 -webkit-align-content: center;
506 -ms-align-content: center;
507 flex-wrap: wrap;
508 -webkit-flex-wrap: center;
509 -ms-flex-wrap: center;
510 margin-bottom: 0.309em;
481 padding: 0; 511 padding: 0;
482 width: 100%; 512 width: 100%;
483 border-color: #517BA6; 513 transition: all 0.2s;
484 border-style: solid;
485 border-width: 0 0 0 3px;
486 transition: all 0.2s;
487} 514}
488 515
489.sortable-block .sortable-element:hover { 516.sortable-block .sortable-element:hover {
490 border-color: #366493;
491 transition: all 0.2s; 517 transition: all 0.2s;
492} 518}
493 519
494@media (min-width:769px){ 520.sortable-block .sortable-selector {
521 padding: 0 0 0 0.309em;
522}
523
524@media (min-width:769px){
495 .sortable-block .sortable-element .sortable-selector { 525 .sortable-block .sortable-element .sortable-selector {
496 display: table-cell; 526 flex: 0 0 1.309em;
497 position: relative; 527 -ms-flex: 0 0 1.309em;
498 width: 20px; 528 -webkit-flex: 0 0 1.309em;
499 opacity: 0.2; 529 opacity: 0.2;
500 transition: opacity 0.3s; 530 transition: opacity 0.3s;
501 cursor: move; 531 cursor: move;
502 } 532 }
503 533
504 .sortable-selector:after { 534 .sortable-selector:after {
505 position: absolute; 535 content: "\f0b2";
506 content: "\f047"; 536 font-family: 'Font Awesome 5 Free';
507 top: 34%; 537 font-weight: 900;
508 left: 4px;
509 color: #517BA6;
510 font-family: fontawesome;
511 } 538 }
512} 539}
513 540
514.sortable-block .sortable-element:hover .sortable-actions { 541.sortable-block .sortable-element:hover .sortable-actions {
515 opacity: 1; 542 opacity: 1;
516 transition: opacity 0.3s; 543 transition: opacity 0.3s;
517} 544}
518 545
519.sortable-block .sortable-element:hover .sortable-selector { 546.sortable-block .sortable-element:hover .sortable-selector {
520 opacity: 1; 547 opacity: 1;
521 transition: opacity 0.3s; 548 transition: opacity 0.3s;
522} 549}
523 550
524.sortable-block .sortable-title { 551.sortable-block .sortable-title {
525 padding: 8px 5px 5px 10px; 552 flex: 1 1 auto;
553 -ms-flex: 1 1 auto;
554 -webkit-flex: 1 1 auto;
555 padding: 0.618em;
556 max-width: calc(100% - 5.2em)
526} 557}
527 558
528.sortable-block .sortable-title:hover { 559.sortable-block .sortable-title:hover {
529 background-color: #FAFAFA;
530 transition: all 0.2s linear; 560 transition: all 0.2s linear;
531} 561}
532 562
533.sortable-block .sortable-title > span { 563.sortable-block .sortable-title > span {
534 font-size: 1.5em; 564 font-size: 1.482em;
535 font-weight: bold;
536}
537
538.sortable-block .sortable-title a {
539 color: #555555;
540} 565}
541 566
542.sortable-block .sortable-title span.cat-desc { 567.sortable-block .sortable-title span.cat-desc {
543 font-size: 0.8em; 568 font-size: 0.8em;
544 font-weight: normal; 569 font-weight: normal;
545 font-style: italic; 570 font-style: italic;
546} 571}
547 572
548.sortable-block fieldset { 573.sortable-block fieldset {
549 padding: 0 30px; 574 padding: 0 1.618em;
550} 575}
551 576
552.sortable-block .sortable-actions { 577.sortable-block .sortable-actions {
553 float: right; 578 flex: 0 1 auto;
554 padding: 3px 3px; 579 -ms-flex: 0 1 auto;
580 -webkit-flex: 0 1 auto;
581 padding: 0.1618em;
555 opacity: 0.2; 582 opacity: 0.2;
556 transition: opacity 0.2s; 583 transition: opacity 0.2s;
557} 584}
558 585
559.sortable-block .sortable-element hr { 586.sortable-block .sortable-element hr {
560 margin-top: 5px; 587 margin-top: 0.309em;
561 background-color: #999999;
562} 588}
563 589
564.sortable-block .sortable-element label { 590.sortable-block .sortable-element label {
565 margin-left: 14px; 591 margin-left: 0.809em;
566 color: #1F507F;
567} 592}
568 593
569.sortable-block .sortable-actions img, 594.sortable-block .sortable-actions img,
570.sortable-block .sortable-element:hover label, 595.sortable-block .sortable-element:hover label,
571.sortable-block .sortable-element .fa:hover { 596.sortable-block .sortable-element .fa:hover {
572 cursor: pointer; 597 cursor: pointer;
573} 598}
574 599
575.dragged { 600.dragged {
576 position: absolute; 601 position: absolute;
577 opacity: 0.9; 602 opacity: 0.9;
578 z-index: 2000; 603 z-index: 2000;
579 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
580} 604}
581 605
582body.dragging, 606body.dragging,
583body.dragging * { 607body.dragging * {
584 cursor: move !important; 608 cursor: move !important;
585} 609}
586 610
587.dropzone { 611.dropzone {
588 margin: 10px 0; 612 margin: 0.618em 0;
589 padding-top: 5px; 613 padding: 0.309em;
590 height: 30px;
591 opacity: 0.6; 614 opacity: 0.6;
592 border: 1px dashed #AAAAAA;
593 text-align: center; 615 text-align: center;
594 color: #AAAAAA; 616 border-width: 1px;
617 border-style: dashed;
618 border-color: transparent;
595} 619}
596 620
597.preview img { 621.preview img {
598 overflow: hidden; 622 overflow: hidden;
599} 623}
600 624
601 625
602/* -- Modules minis -- */ 626/* -- Modules minis -- */
603/* ------------------- */ 627/* ------------------- */
604.module-mini-container { 628.module-mini-container {
605 margin: 0 0 10px 0; 629 margin: 0 0 0.618em 0;
606 padding: 5px;
607 border-spacing: 1px;
608 clear: both; 630 clear: both;
609} 631}
610 632
611.module-mini-top { 633.module-mini-top {
612 padding: 0.2em 0 0.2em 0; 634 padding: 0.1618em 0;
613 min-height: 24px; 635 min-height: 1.482em;
614 border-bottom: 2px #366493 solid; 636 border-width: 0 0 1px;
637 border-style: solid;
638 border-color: transparent;
615 text-align: center; 639 text-align: center;
616} 640}
617 641
618.module-mini-container .sub-title { 642.module-mini-container .sub-title {
619 display: block; 643 display: block;
620 margin-top: 5px; 644 margin-top: 0.309em;
621 color: #366493;
622 font-size: 1.6rem;
623 font-weight: bold; 645 font-weight: bold;
624} 646}
625 647
626.module-mini-contents { 648.module-mini-contents {
627 padding: 5px 4px 0 4px; 649 padding: 0.309em;
628 border-top: none;
629 border-bottom: none;
630 text-align: center; 650 text-align: center;
631} 651}
632 652
633.module-mini-bottom { 653.module-mini-bottom {
634 height: 15px; 654 height: 1em;
635} 655}
636 656
637 657
638/* -- Messages postes par les membres -- */ 658/* -- Messages postes par les membres -- */
639/* (mp & commentaires) */
640/* ------------------------------------- */ 659/* ------------------------------------- */
641#comments-list { 660#comments-list {
642 clear: both; 661 clear: both;
643} 662}
644 663
645#comments-list > header { 664#comments-list > header {
646 display: none; 665 display: none;
647} 666}
648 667
668#comments-list .message > header {
669 display:none;
670}
671
649.message { 672.message {
650 width: 98%; 673 margin-bottom: 1.309em;
651 margin-bottom: 20px;
652 overflow: auto; 674 overflow: auto;
653} 675}
654 676
655#comments-list .message > header {
656 display:none;
657}
658
659.message > footer { 677.message > footer {
660 clear: both; 678 clear: both;
661} 679}
662 680
663.view-topic { 681.message-user-infos,
664 margin-top: 10px;
665}
666
667.view-topic i {
668 margin: 0 0 1px 5px;
669}
670
671/* --- infos du message --- */
672.message-date { 682.message-date {
673 margin-left: 150px; 683 overflow: hidden;
674} 684 padding: 0.309em;
675
676.message-date i {
677 vertical-align: top;
678}
679
680.message-user-infos {
681 float: left;
682 width: 120px;
683 text-align: center;
684}
685
686.message-message {
687 position: relative;
688 margin: 5px 0 0 140px;
689 padding: 15px;
690 min-height: 80px;
691 background-color: #ECEFFA;
692 border: 1px solid #D6DEE7;
693 color: #333333;
694}
695
696.message-message::before {
697 position: absolute;
698 top: 15px;
699 bottom: auto;
700 left: -25px;
701 display: block;
702 width: 0;
703 border-width: 15px 25px 15px 0;
704 border-color: transparent #D6DEE7;
705 border-style: solid;
706 content: "";
707} 685}
708 686
709.message-message::after { 687.message-pseudo {
710 position: absolute; 688 float: left;
711 content: "";
712 top: 16px;
713 bottom: auto;
714 left: -24px;
715 display: block;
716 width: 0;
717 border-width: 14px 24px 14px 0;
718 border-color: transparent #ECEFFA;
719 border-style: solid;
720} 689}
721 690
722.message-avatar { 691.message-avatar {
723 width: 80px; 692 float: right;
693 max-width: 3.82em;
724} 694}
725 695
726.message-user-infos img.message-avatar { 696.view-topic {
727 padding: 10px 0; 697 padding: 0.809em 0;
728} 698}
729 699
730article .message-user-infos .message-user-group { 700.view-topic i {
731 display: none; 701 margin: 0 0 0.1618em 0.309em;
732} 702}
733 703
734@media (max-width: 480px) { 704/* --- infos du message --- */
735 .message-user-infos img.message-avatar { 705@media (min-width: 769px) {
736 float: left; 706 .message-pseudo,
737 margin: 5px 5px 0 15px; 707 .message-avatar {
738 padding: 4px; 708 float: none;
739 max-height: 54px;
740 width: auto;
741 }
742
743 .message-message {
744 border-top: 1px solid #CAD1EB;
745 } 709 }
746 710
747 .message-pseudo { 711 .message-avatar {
748 float: right; 712 max-width: 100%;
749 padding: 20px 10px 0 0px; 713 padding: 0.309em 0 0;
750 } 714 }
751 715
752 .message-level { 716 .message-user-infos {
753 display: none; 717 float: left;
718 width: 120px;
719 text-align: center;
720 padding: 0;
754 } 721 }
755 722
756 .message-date { 723 .message-date {
757 float: right; 724 padding: 0;
758 margin: 0 15px 0 0;
759 padding: 20px 0 0 0;
760 max-width: 120px;
761 text-align: right;
762 }
763
764}
765
766@media (min-width: 481px) and (max-width: 768px) {
767 .message-container {
768 padding-left: 70px;
769 }
770
771 .message-pseudo {
772 padding: 20px 10px 0 15px;
773 }
774
775 .message-user-infos img {
776 position: absolute;
777 top: 20px;
778 left: 15px;
779 max-width: 54px;
780 } 725 }
781 726
782 .message-date { 727 .message-date {
783 margin: 0; 728 margin-left: 150px;
784 padding: 23px 0 0 0;
785 text-align: left;
786 }
787
788}
789
790@media (max-width: 768px) {
791 .message-container {
792 position: relative;
793 min-height: 80px;
794 background-color: #ECEFFA;
795 border: 1px solid #D6DEE7;
796 color: #333333;
797 } 729 }
798 730
799 .message-message { 731 .message-message {
800 background-color: transparent; 732 position: relative;
801 border: none; 733 margin: 0.309em 0 0 150px;
734 min-height: 4.56em;
735 border-width: 1px;
736 border-style: solid;
737 border-color: transparent;
802 } 738 }
803 739
804 .message-message::after,
805 .message-message::before { 740 .message-message::before {
806 display: none; 741 position: absolute;
807 } 742 top: 15px;
808 743 bottom: auto;
809 .message-user-infos { 744 left: -20px;
810 display: inline-block; 745 display: block;
811 } 746 width: 0;
812 747 border-width: 15px 20px 15px 0;
813 .message-pseudo { 748 border-style: solid;
814 text-align: left; 749 border-color: transparent;
815 } 750 content: "";
816
817 .message-pseudo a {
818 color: #555555;
819 font-size: 1.2em;
820 font-weight: bold;
821 }
822 .message-pseudo a:hover {
823 color: #222222;
824 text-decoration: none;
825 }
826
827 .message-user-infos {
828 width: auto;
829 }
830
831 .message-user-infos img {
832 padding: 3px;
833 background-color: #FFFFFF;
834 box-shadow: 0 1px 9px #e0e0e0,inset 0 0 2px rgba(215, 215, 215, 0.75);
835 }
836
837 .message-date {
838 display: inline-block;
839 font-size: 0.8em;
840 } 751 }
841 752
842 .message-date span.actions { 753 .message-message::after {
843 position: absolute; 754 position: absolute;
844 bottom: 0; 755 content: "";
845 right: 6px; 756 top: 16px;
846 z-index: 1; 757 bottom: auto;
758 left: -19px;
847 display: block; 759 display: block;
848 text-align: right; 760 width: 0;
849 font-size: 1.2em; 761 border-width: 14px 19px 14px 0;
850 } 762 border-style: solid;
851 .message-date span.actions a { 763 border-color: transparent;
852 display: inline-block;
853 padding: 5px 2px 5px 2px;
854 } 764 }
855 765
856 .message-message { 766 .message-content {
857 margin: 0 auto 10px auto; 767 padding: 0.809em;
858 clear: both;
859 } 768 }
860 769
861 .message-message::before { 770 .view-topic {
862 top: auto; 771 padding: 0.809em;
863 bottom: 100%;
864 left: 204px;
865 border-width: 15px;
866 border-color: transparent;
867 border-bottom-color: #D6DEE7;
868 border-style: solid;
869 }
870
871 .message-message::after {
872 top: auto;
873 bottom: 100%;
874 left: 205px;
875 border-width: 14px;
876 border-color: transparent;
877 border-bottom-color: #ECEFFA;
878 border-style: solid;
879 } 772 }
880} 773}
881 774
882/* --- Moderation des messages --- */ 775/* --- Moderation des messages --- */
883.message-moderate { 776.message-moderate {
884 margin-bottom: 10px; 777 margin-bottom: 0.618em;
885 padding: 4px 0 4px 0; 778 padding: 0.309em 0 0.309em 0;
886 width: 98%; 779 width: 98%;
887 background-color: #ECEFFA;
888 border: 1px solid #D6DEE7;
889 text-align: center; 780 text-align: center;
890 vertical-align: middle; 781 vertical-align: middle;
891} 782}
892 783
893.message-moderate a { 784.message-moderate a {
894 vertical-align: top; 785 vertical-align: top;
895} 786}
896 787
897i.message-announce, 788i.message-announce,
898i.message-announce-new, 789i.message-announce-new,
899i.message-announce-track { 790i.message-announce-track {
900 font-size: 1.6em; 791 font-size: 1.618em;
901}
902
903i.message-announce {
904 color: #D1D2D4;
905}
906
907i.message-announce-new {
908 color: #4372AA;
909} 792}
910 793
911 794
912/* -- Le maintenance -- */ 795/* -- Le maintenance -- */
913/* -------------------- */ 796/* -------------------- */
914#maintain { 797#maintain {
915 margin: 10px 0; 798 margin: 0.618em 0;
916} 799}
917 800
918div.delay { 801div.delay {
919 margin: 20px 0; 802 margin: 1.309em 0;
920} 803}
921 804
922#global.global-maintain { 805#global.global-maintain {
923 flex-direction: column; 806 flex-direction: column;
924 -ms-flex-direction: column; 807 -ms-flex-direction: column;
925 -webkit-flex-direction: column; 808 -webkit-flex-direction: column;
926} 809}
927 810
928div#message-maintain { 811div#message-maintain {
929 position: absolute; 812 position: absolute;
930 z-index: 20; 813 z-index: 20;
931 top: 5px; 814 top: 1em;
932 width: 100%; 815 width: 100%;
933 opacity: 0.98; 816 opacity: 0.98;
934 text-align: center; 817 text-align: center;
935} 818}
936 819
937div#message-maintain > div { 820div#message-maintain > div {
938 margin: 0 auto; 821 margin: 0 auto;
939} 822}
940 823
941div#release { 824div#release {
942 margin-top: 20px; 825 margin-top: 1.309em;
943} 826}
944 827
945 828
829/* -- Elements .more d'un contenu -- */
830/* --------------------------------- */
946 831
832/* --- General --- */
833.more {
834 padding: 0.618em 0.618em 1.618em;
835 font-size: 0.809em;
836 font-size: 0.809em;
837 font-style: italic;
838}
839
840/* --- Sharing items --- */
841.more-element-sharing {
842 position: relative;
843 margin: 0.309em 0 0 0;
844 padding: 0;
845}
846
847@media (min-width: 769px) {
848 .more-element-sharing {
849 margin: 1.309em 0 0.309em 0;
850 }
851}
852
853.sharing-button {
854 display: none;
855}
856
857.sharing-elements-list {
858 list-style-type: none;
859 margin: 0;
860 padding: 0;
861 display: flex;
862 display: -ms-flexbox;
863 display: -webkit-flex;
864 flex-direction: row;
865 -ms-flex-direction: row;
866 -webkit-flex-direction: row;
867 text-align: center;
868 justify-content: center;
869 -ms-flex-pack: center;
870 -webkit-justify-content: center;
871 flex-wrap: wrap;
872 -ms-flex-wrap: wrap;
873 -webkit-flex-wrap: wrap;
874}
875
876@media (min-width: 769px) {
877 .sharing-elements-list {
878 justify-content: flex-start;
879 -ms-flex-pack: flex-start;
880 -webkit-justify-content: flex-start;
881 }
882}
883
884.sharing-element {
885 flex: 0 0 auto;
886 -ms-flex: 0 0 auto;
887 -webkit-flex: 0 0 auto;
888}
889
890@media (min-width: 769px) {
891 .sharing-element {
892 margin: 0 0.309em 0.309em 0;
893 }
894}
895
896.sharing-element a {
897 display: block;
898 padding: 0.618em 1.228em;
899 display: block;
900 margin: 0 0.1em 0.309em 0;
901}
Editor
Original Text
Changed Text
Recommended videos