-257 Removals
+133 Additions

Created by:phpboost

1/*-------------------------------------- 1/* --------------------------------------
2 design.css 2 design.css
3Contient les conteneurs de mise en page. 3Contient les conteneurs de mise en page.
4Le design.css permet de mettre en forme votre site web avec le design de votre choix 4Le design.css permet de mettre en forme votre site web avec le design de votre choix
5--------------------------------------*/ 5-------------------------------------- */
6
7 6
8/* -- Elements HTML generiques specifique au theme -- */ 7/* -- Elements HTML generiques specifique au theme -- */
9/* -------------------------------------------------- */ 8/* -------------------------------------------------- */
10html { 9html {
11 font-size: 100%; 10 font-size: 100%;
12 font-size: 10px; 11 font-size: 10px;
13} 12}
14 13
15body { 14body {
16 position: relative; 15 position: relative;
17 height: auto; 16 height: auto;
18 min-height: 100%; 17 min-height: 100%;
19 font-size: 1.3em; 18 font-size: 1.456em;
20 font-family: 'Open Sans', sans-serif; 19 font-family: 'Open Sans', sans-serif;
20 font-weight: 300;
21 line-height: 1.6;
21} 22}
22 23
23@media (max-width: 768px) { 24@media (min-width: 769px) {
24 body { 25 body {
25 font-size: 1.4em; 26 font-size: 1.618em;
26 } 27 }
27} 28}
29
28 30
29/* -- Gestion de la taille du site -- */ 31/* -- Gestion de la taille du site -- */
30/* ---------------------------------- */ 32/* ---------------------------------- */
31
32#header, 33#header,
33#global, 34#global,
34#footer { 35#footer {
35 width: 100%; 36 width: 100%;
37 padding: 0.809em;
36} 38}
37 39
38@media (min-width: 768px) { 40@media (min-width: 769px) {
39 #header, 41 #header {
42 padding: 1.618em 0;
43 }
44
45 #top-header,
46 #sub-header,
40 #global, 47 #global,
41 #footer { 48 #footer {
42 max-width: 1024px; 49 margin: auto;
50 padding: 1.618em 0;
51 }
52
53 #top-header,
54 #sub-header,
55 #global,
56 #footer {
57 width: 768px;
43 } 58 }
44} 59}
45 60
46/* -- Gestion des couleurs principales -- */ 61@media (min-width: 1025px) { #top-header, #sub-header, #global, #footer { width: 1024px; } }
47/* -------------------------------------- */ 62@media (min-width: 1367px) { #top-header, #sub-header, #global, #footer { width: 1280px; } }
48 63
49/*
50 Blue => #021B34; #1E5083; #366493; #517BA6; #81A4C8;
51 Green => #003524; #168561; #2F9674; #4BAA8B; #7CCAB0;
52 red => #490011; #B81F43; #CF4162; #EA6886; #F294AA;
53 Orange => #511B00; #C95A21; #E27B47; #FFA172; #FFBF9C;
54 Yellow => #513000; #C98621; #E2A447; #FFC672; #FFD79C;
55 Purple => #080437; #2E278B; #47409D; #645CB1; #8F8ACF;
56*/
57
58body { background-color: #F1F1F1; }
59#header, #global { background-color: #FAFAFA; }
60#sub-header { background-color: #366493; }
61#footer { background-color: #81A4C8; }
62
63#top-header, #global { border-color: #E1E1E1; }
64#footer { border-color: #366493; }
65.footer-infos { border-color: #366493; }
66
67body { color: #021B34; }
68#site-name { color: #366493; }
69#site-slogan { color: #81A4C8; }
70#sub-header,
71#sub-header a { color: #FFFFFF; }
72.footer-infos span { color: #366493; }
73.footer-infos span a { color: #021B34; }
74 64
75/* -- En-tete de page - Header -- */ 65/* -- En-tete de page - Header -- */
76/* ------------------------------ */ 66/* ------------------------------ */
77#header { 67#header {
78 margin: auto;
79}
80
81/* --- Partie superieure du header --- */
82#top-header {
83 position: relative; 68 position: relative;
84 display: flex;
85 display: -ms-flexbox;
86 display: -webkit-flex;
87 flex-direction: row;
88 -ms-flex-direction: row;
89 -webkit-flex-direction: row;
90 margin: auto;
91 min-height: 139px;
92 border-width: 0 1px 0 1px;
93 border-style: solid;
94}
95
96#top-header-content {
97 flex: 1 1 auto;
98 -ms-flex: 1 1 auto;
99 -webkit-flex: 1 1 auto;
100}
101
102@media (max-width: 768px) {
103 #top-header {
104 flex-direction: column;
105 -ms-flex-direction: column;
106 -webkit-flex-direction: column;
107 }
108
109 #top-header-content {
110 align-self: flex-end;
111 -ms-align-self: flex-end;
112 -webkit-align-self: flex-end;
113 }
114} 69}
115 70
116/* --- Partie inferieur du header --- */ 71/* --- Partie inferieur du header --- */
117#sub-header {
118 min-height: 35px;
119}
120
121#sub-header-content{
122 margin: auto;
123}
124
125/* --- Logo et Nom du site web --- */
126#site-infos {
127 display: flex;
128 display: -ms-flexbox;
129 display: -webkit-flex;
130 margin: 1.5em 0 0 1.5em;
131 max-width: 940px;
132 flex: 1 1 auto;
133}
134
135#site-logo { 72#site-logo {
136 margin: 0 1em 0 0;
137 width: 60px; 73 width: 60px;
138 height: 60px; 74 height: 60px;
139 background-image: url(images/logo.png); 75 background-image: url(images/logo.png);
140 background-position: center; 76 background-position: center;
141 background-repeat: no-repeat; 77 background-repeat: no-repeat;
142 background-size: cover; 78 background-size: cover;
143 flex: 0 0 auto;
144 -ms-flex: 0 0 auto;
145 -webkit-flex: 0 0 auto;
146} 79}
147 80
148#site-name-container { 81#site-name-container {
149 margin: 0.4em 0 0 0; 82 margin: 0.2em 0 0 0.809em;
150} 83}
151 84
152#site-name { 85#site-name {
153 font-size: 3em; 86 font-size: 1.618em;
154 font-weight: bold; 87 display: block;
155 line-height: 1em; 88 font-weight: 400;
156 letter-spacing: 0.02em;
157 text-decoration: none; 89 text-decoration: none;
158} 90}
159 91
160#site-slogan { 92#site-slogan {
161 display: block; 93 display: block;
162 padding: 0.1em 0 0 0.1em; 94 padding: 0.3236em 0 0 0.1618em;
163 font-size: 1em; 95 font-size: 0.8em;
164 letter-spacing: 0.1em; 96 letter-spacing: 0.1em;
165} 97}
166 98
167@media (min-width: 769px) { 99@media (min-width: 769px) {
168 #site-logo { 100 #site-logo {
169 width: 90px; 101 width: 90px;
170 height: 90px; 102 height: 90px;
171 } 103 }
172 104
173 #site-name-container { 105 #site-name-container {
174 margin: 1em 0 0 0; 106 margin: 0 0 0 1.618em;
175 } 107 }
176 108
177 #site-name { 109 #site-name {
178 font-size: 4em; 110 font-size: 3.236em;
111 line-height: 1.2em;
179 } 112 }
180 113
114 #site-slogan {
115 font-size: 1em;
116 padding: 0.1em 0 0 0.1618em;
117 }
181} 118}
119
182 120
183/* -- Conteneur global du site -- */ 121/* -- Conteneur global du site -- */
184/* ------------------------------ */ 122/* ------------------------------ */
185#global {
186 display: flex;
187 display: -ms-flexbox;
188 display: -webkit-flex;
189 flex-direction: column;
190 -ms-flex-direction: column;
191 -webkit-flex-direction: column;
192 margin: 0 auto 0 auto;
193 padding: 0;
194 border-width: 0 1px 0 1px;
195 border-style: solid;
196}
197
198#main { 123#main {
199 padding: 0 0 10px 0; 124 width: 100%;
200 max-width: 100%;
201 order : 1;
202 -ms-flex-order: 1;
203 -webkit-flex-order: 1;
204} 125}
205 126
206#menu-left, 127#menu-left,
207#menu-right { 128#menu-right {
208 width: 100%; 129 width: 100%;
209} 130}
210 131
211#menu-left {
212 order : 2;
213 -ms-flex-order: 2;
214 -webkit-flex-order: 2;
215}
216#menu-right {
217 order : 3;
218 -ms-flex-order: 3;
219 -webkit-flex-order: 3;
220}
221
222@media (min-width: 769px) { 132@media (min-width: 769px) {
223 #global { 133 #menu-left { margin-right: 1.618em; }
224 min-height: 100vh; 134 #menu-right { margin-left: 1.618em; }
225 flex-direction: row;
226 -ms-flex-direction: row;
227 -webkit-flex-direction: row;
228 }
229
230 #main {
231 padding: 0 10px;
232 order : 2;
233 -ms-flex-order: 2;
234 -webkit-flex-order: 2;
235 flex: 1 0 auto;
236 -ms-flex: 1 0 100%;
237 }
238 135
239 #menu-left, 136 #menu-left,
240 #menu-right { 137 #menu-right {
241 width: 200px; 138 width: calc(100% / 13 * 3.5);
242 } 139 }
243 140
244 #menu-left { 141 #menu-left.narrow-menu-left { margin-right: 0.809em; }
245 order : 1; 142 #menu-right.narrow-menu-right { margin-left: 0.809em; }
246 -ms-flex-order: 1; 143
247 -webkit-flex-order: 1; 144 #menu-left.narrow-menu-left,
145 #menu-right.narrow-menu-right {
146 width: calc(100% / 13 * 2.5);
248 } 147 }
249 #menu-right { 148
250 order : 3; 149 #main {
251 -ms-flex-order: 3; 150 padding: 0 0 1.618em;
252 -webkit-flex-order: 3;
253 } 151 }
254 152
255 #main.main-with-left, 153 #main.main-with-left,
256 #main.main-with-right { 154 #main.main-with-right {
257 width: calc(100% - 200px); 155 width: calc(100% - ((100% / 13 * 5)));
258 -ms-flex: 1 0 auto; /*Tricks IE*/
259 } 156 }
260 157
261 #main.main-with-left.main-with-right { 158 #main.main-with-left.main-with-right {
262 width: calc(100% - 400px); 159 width: calc(100% - ((100% / 13 * 8)));
263 -ms-flex: 1 0 auto; /*Tricks IE*/
264 } 160 }
265} 161}
266 162
267#top-footer { 163#top-footer {
268 padding: 0.5em 0; 164 padding: 0.809em;
269}
270
271
272/* -- Contenu de la page -- */
273/* ------------------------ */
274
275/* --- Contenu central --- */
276#main-content {
277 padding: 1.5em 0.8em;
278} 165}
279 166
280.block-container { 167.block-container {
281 margin-top: 15px; 168 margin-top: 1em;
282} 169}
283 170
284/* --- Emplacement au dessus et en dessous du contenu de la page --- */ 171/* --- Emplacement au dessus et en dessous du contenu de la page --- */
285#top-content { 172#top-content {
286 margin: 0 0 2% 0; 173 margin: 0 0 1.618em 0;
287 padding: 0.1em 0.8em;
288} 174}
289 175
290/* --- Emplacement au dessus du pied de page --- */ 176/* --- Emplacement au dessus du pied de page --- */
291#bottom-content { 177#bottom-content {
292 margin: 2% 0 0 0; 178 margin: 1.618em 0 0;
293 padding: 0.1em 0.8em;
294} 179}
295 180
296 181
297/* -- Pied de page - Footer -- */ 182/* -- Pied de page - Footer -- */
298/* --------------------------- */ 183/* --------------------------- */
299#footer { 184#footer {
300 margin: auto;
301 clear: both; 185 clear: both;
302 border-width: 4px 0 0 0; 186 border-width: 4px 0 0 0;
303 border-style: solid; 187 border-style: solid;
188 border-color: transparent;
304} 189}
305 190
306.footer-content { 191.footer-content {
307 margin: 0 auto 0 auto; 192 margin: 0 auto 0 auto;
308 padding: 1.5em 0; 193 padding: 0.809em;
309} 194}
310 195
311.footer-infos { 196.footer-infos {
312 margin: auto; 197 margin: auto;
313 padding-top: 10px; 198 padding: 0.809em;
314 min-height: 40px; 199 min-height: 40px;
315 border-width: 1px 0 0 0; 200 border-width: 1px 0 0 0;
316 border-style: solid; 201 border-style: solid;
202 border-color: transparent;
317 text-align: center; 203 text-align: center;
318} 204}
319 205
320@media (min-width: 769px) {
321 .footer-infos {
322 width: 400px;
323 }
324}
325
326.footer-infos span { 206.footer-infos span {
327 font-size: 0.8em; 207 font-size: 0.8em;
208 display: block;
328} 209}
329 210
330@media (max-width: 768px) { 211.footer-infos span.footer-infos-separator {
331 .footer-infos span { 212 display: none;
332 display: block 213}
333 }
334 214
215@media (min-width: 769px) {
216 .footer-infos span,
335 .footer-infos span.footer-infos-separator { 217 .footer-infos span.footer-infos-separator {
336 display: none; 218 display: inline-block;
337 } 219 }
338 220
339 .footer-infos { 221 .footer-infos {
340 padding: 10px; 222 padding: 0.618em 0 0;
341 } 223 }
342} 224}
343 225
344 226
345/* -- Elements specifiques PHPboost -- */ 227/* -- Elements specifiques PHPboost -- */
346/* ----------------------------------- */ 228/* ----------------------------------- */
347 229
348/* --- Compteur de visites --- */ 230/* --- Compteur de visites --- */
349#visit-counter { 231#visit-counter {
350 position: absolute; 232 position: absolute;
351 right: 0; 233 right: 1.618em;
352 bottom : 1em; 234 top : 92.5%;
353 margin-right: 10px;
354 font-size: 0.9em; 235 font-size: 0.9em;
355 text-align: right; 236 text-align: right;
356} 237}
357 238
358/* --- Barre de lien rapide --- */ 239/* --- Barre de lien rapide --- */
359#breadcrumb { 240#breadcrumb {
360 margin: 0 0 20px 10px; 241 padding: 0.618em;
361 text-indent: 10px; 242 font-size: 0.809em;
362} 243}
363 244
364#breadcrumb ol { 245#breadcrumb ol {
365 margin: 0; 246 margin: 0;
366 list-style: none; 247 list-style: none;
367} 248}
368 249
369#breadcrumb li { 250#breadcrumb li {
370 display: inline; 251 display: inline;
371} 252}
372 253
373#breadcrumb li:not(.current):after { 254#breadcrumb li:not(.current):after {
374 content: '/'; 255 content: '/';
375 color: #616161;
376} 256}
377 257
378/* --- Scroll to Top --- */ 258/* --- Scroll to Top --- */
379.scroll-to { 259.scroll-to {
380 position: fixed; 260 position: fixed;
381 z-index: 10; 261 z-index: 10;
382 display: none; 262 display: none;
383 background-color: rgba(15, 15, 16, 0.8); 263 cursor: pointer;
384} 264}
385 265
386#scroll-to-top { 266#scroll-to-top {
387 right: 25px; 267 right: 0;
388 bottom: 0; 268 bottom: 0.618em;
389 padding: 2px 11px 3px 10px; 269 padding: 0.618em 0.809em;
390 transition: 0.2s;
391} 270}
392 271
272#scroll-to-top,
393.scroll-to i { 273.scroll-to i {
394 color: rgba(255, 255, 255, 0.8);
395 transition: 0.2s; 274 transition: 0.2s;
396} 275}
397 276
277#scroll-to-top:hover,
398.scroll-to:hover i { 278.scroll-to:hover i {
399 color: rgba(255, 255, 255, 1);
400 transition: 0.3s; 279 transition: 0.3s;
401} 280}
402 281
403@media (min-width: 769px) { 282@media (min-width: 769px) {
404 #scroll-to-top { 283 #scroll-to-top {
405 bottom: 25px; 284 right: 0.618em;
406 padding: 9px 11px 11px 10px;
407 } 285 }
408 286
409 .scroll-to i { 287 .scroll-to i {
410 font-size: 2em; 288 font-size: 1.618em;
411 }
412}
413
414@media (max-width: 768px) {
415 #scroll-to-top:hover {
416 padding: 9px 11px 11px 10px;
417 transition: 0.3s;
418 } 289 }
419} 290}
420 291
421/* -- Cookie Bar -- */ 292/* --- Cookie Bar --- */
422/* ------------------- */
423.cookiebar-container { 293.cookiebar-container {
424 z-index: 100; 294 z-index: 100;
425 left: 0; 295 left: 0;
426 right: 0; 296 right: 0;
427 top: 0; 297 top: 0;
428 padding: 7px 20px; 298 padding: 0.456em 1.309em;
429 background-color: #F2F2F2; 299 font-size: 0.809em;
430 border-bottom: 1px solid #E2E2E2;
431 font-size: 0.9em;
432 text-align: center; 300 text-align: center;
433} 301}
434 302
303@media (max-width: 768px) {
304 .cookiebar-container {
305 position: fixed;
306 top: auto;
307 bottom: 0;
308 padding: 1.309em 1.309em 0.456em 1.309em;
309 margin: 1em 0.456em;
310 border-style: solid;
311 border-width: 1px;
312 font-size: 1em;
313 }
314}
315
435.cookiebar-container.fixed { 316.cookiebar-container.fixed {
436 position: fixed; 317 position: fixed;
437} 318}
438 319
439.cookiebar-content { 320.cookiebar-content {
440 text-align: justify; 321 text-align: justify;
441} 322}
442 323
443@media (min-width: 769px) { 324@media (min-width: 769px) {
444 .cookiebar-content { 325 .cookiebar-content {
445 display: inline-block; 326 display: inline-block;
446 max-width: calc(100% - 250px); 327 max-width: calc(100% - 400px);
447 vertical-align: middle; 328 vertical-align: top;
448 } 329 }
449 330
450 .cookiebar-actions { 331 .cookiebar-actions {
451 display: inline-block; 332 display: inline-block;
452 width: 250px; 333 width: 400px;
453 } 334 }
454} 335}
455 336
456@media (max-width: 768px) { 337@media (max-width: 768px) {
457 .cookiebar-content { 338 .cookiebar-content {
458 margin-bottom: 5px; 339 margin-bottom: 0.309em;
459 } 340 }
460 341
461 .cookiebar-actions { 342 .cookiebar-actions {
462 margin: 15px 0 5px 0; 343 margin: 1em 0 0.309em 0;
463 } 344 }
464} 345}
465 346
466.cookiebar-button { 347.cookiebar-button {
467 margin: 0 5px 0 5px; 348 margin: 0 0.309em;
468 border-radius: 4px;
469 color: #FEFEFE;
470} 349}
471 350
472@media (max-width: 768px) { 351@media (max-width: 768px) {
473 .cookiebar-button { 352 .cookiebar-button {
474 margin: 0 10px 0 10px; 353 margin: 0 0.618em;
475 } 354 }
476} 355}
477 356
478.cookiebar-button-understand { background-color: #337AB7; border-color: #2E6DA4; }
479.cookiebar-button-understand:hover { background-color: #2E6DA4; }
480
481.cookiebar-button-allowed { background-color: #5CB85C; border-color: #4CAE4C; }
482.cookiebar-button-allowed:hover { background-color: #4CAE4C; }
483
484.cookiebar-button-declined { background-color: #E84E40; border-color: #CE271A; }
485.cookiebar-button-declined:hover { background-color: #CE271A; }
486
487@media (max-width: 468px) { 357@media (max-width: 468px) {
488 .cookiebar-more { 358 .cookiebar-more {
489 display: block; 359 display: block;
490 margin: 10px 0 5px 0; 360 margin: 0.618em 0 0.309em 0;
491 } 361 }
492} 362}
493 363
494.aboutcookie-title { 364.aboutcookie-title {
495 font-size: 1.3em; 365 font-size: 1.3em;
496 line-height: 1.3em; 366 line-height: 1.3em;
497 font-weight: bold 367 font-weight: bold
498} 368}
499 369
500.aboutcookie-title + p { 370.aboutcookie-title + p {
501 margin: 0px 0 20px 0px; 371 margin: 0 0 1.309 0;
502} 372}
503 373
504#cookiebar-change-choice { 374#cookiebar-change-choice {
505 margin-top: 10px; 375 margin-top: 0.618em;
506 text-align: center; 376 text-align: center;
507} 377}
508 378
509.cookiebar-change-choice-link { 379.cookiebar-change-choice-link {
510 text-align: center; 380 text-align: center;
511} 381}
382
383/* --- Search engines --- */
384.robot {
385 font-size: 0.9em;
386 font-weight: bold;
387}
Editor
Original Text
Changed Text
Recommended videos