Sign inCreate an account

Recent DiffsClear

nD0b65lv
Recent diffs are deleted on refresh

Saved Diffs

You must to save diffs
-257 Removals
+133 Additions
https://www.diffchecker.com/nD0b65lv

Created by:phpboost

/*-------------------------------------- /* --------------------------------------
design.css design.css
Contient les conteneurs de mise en page. Contient les conteneurs de mise en page.
Le design.css permet de mettre en forme votre site web avec le design de votre choix Le design.css permet de mettre en forme votre site web avec le design de votre choix
--------------------------------------*/ -------------------------------------- */
/* -- Elements HTML generiques specifique au theme -- */ /* -- Elements HTML generiques specifique au theme -- */
/* -------------------------------------------------- */ /* -------------------------------------------------- */
html { html {
font-size: 100%; font-size: 100%;
font-size: 10px; font-size: 10px;
} }
body { body {
position: relative; position: relative;
height: auto; height: auto;
min-height: 100%; min-height: 100%;
font-size: 1.3em; font-size: 1.456em;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.6;
} }
@media (max-width: 768px) { @media (min-width: 769px) {
body { body {
font-size: 1.4em; font-size: 1.618em;
} }
} }
/* -- Gestion de la taille du site -- */ /* -- Gestion de la taille du site -- */
/* ---------------------------------- */ /* ---------------------------------- */
#header, #header,
#global, #global,
#footer { #footer {
width: 100%; width: 100%;
padding: 0.809em;
} }
@media (min-width: 768px) { @media (min-width: 769px) {
#header, #header {
padding: 1.618em 0;
}
#top-header,
#sub-header,
#global, #global,
#footer { #footer {
max-width: 1024px; margin: auto;
padding: 1.618em 0;
}
#top-header,
#sub-header,
#global,
#footer {
width: 768px;
} }
} }
/* -- Gestion des couleurs principales -- */ @media (min-width: 1025px) { #top-header, #sub-header, #global, #footer { width: 1024px; } }
/* -------------------------------------- */ @media (min-width: 1367px) { #top-header, #sub-header, #global, #footer { width: 1280px; } }
/*
Blue => #021B34; #1E5083; #366493; #517BA6; #81A4C8;
Green => #003524; #168561; #2F9674; #4BAA8B; #7CCAB0;
red => #490011; #B81F43; #CF4162; #EA6886; #F294AA;
Orange => #511B00; #C95A21; #E27B47; #FFA172; #FFBF9C;
Yellow => #513000; #C98621; #E2A447; #FFC672; #FFD79C;
Purple => #080437; #2E278B; #47409D; #645CB1; #8F8ACF;
*/
body { background-color: #F1F1F1; }
#header, #global { background-color: #FAFAFA; }
#sub-header { background-color: #366493; }
#footer { background-color: #81A4C8; }
#top-header, #global { border-color: #E1E1E1; }
#footer { border-color: #366493; }
.footer-infos { border-color: #366493; }
body { color: #021B34; }
#site-name { color: #366493; }
#site-slogan { color: #81A4C8; }
#sub-header,
#sub-header a { color: #FFFFFF; }
.footer-infos span { color: #366493; }
.footer-infos span a { color: #021B34; }
/* -- En-tete de page - Header -- */ /* -- En-tete de page - Header -- */
/* ------------------------------ */ /* ------------------------------ */
#header { #header {
margin: auto;
}
/* --- Partie superieure du header --- */
#top-header {
position: relative; position: relative;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
margin: auto;
min-height: 139px;
border-width: 0 1px 0 1px;
border-style: solid;
}
#top-header-content {
flex: 1 1 auto;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
@media (max-width: 768px) {
#top-header {
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
#top-header-content {
align-self: flex-end;
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
}
} }
/* --- Partie inferieur du header --- */ /* --- Partie inferieur du header --- */
#sub-header {
min-height: 35px;
}
#sub-header-content{
margin: auto;
}
/* --- Logo et Nom du site web --- */
#site-infos {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
margin: 1.5em 0 0 1.5em;
max-width: 940px;
flex: 1 1 auto;
}
#site-logo { #site-logo {
margin: 0 1em 0 0;
width: 60px; width: 60px;
height: 60px; height: 60px;
background-image: url(images/logo.png); background-image: url(images/logo.png);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
flex: 0 0 auto;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
} }
#site-name-container { #site-name-container {
margin: 0.4em 0 0 0; margin: 0.2em 0 0 0.809em;
} }
#site-name { #site-name {
font-size: 3em; font-size: 1.618em;
font-weight: bold; display: block;
line-height: 1em; font-weight: 400;
letter-spacing: 0.02em;
text-decoration: none; text-decoration: none;
} }
#site-slogan { #site-slogan {
display: block; display: block;
padding: 0.1em 0 0 0.1em; padding: 0.3236em 0 0 0.1618em;
font-size: 1em; font-size: 0.8em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
#site-logo { #site-logo {
width: 90px; width: 90px;
height: 90px; height: 90px;
} }
#site-name-container { #site-name-container {
margin: 1em 0 0 0; margin: 0 0 0 1.618em;
} }
#site-name { #site-name {
font-size: 4em; font-size: 3.236em;
line-height: 1.2em;
} }
#site-slogan {
font-size: 1em;
padding: 0.1em 0 0 0.1618em;
}
} }
/* -- Conteneur global du site -- */ /* -- Conteneur global du site -- */
/* ------------------------------ */ /* ------------------------------ */
#global {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
margin: 0 auto 0 auto;
padding: 0;
border-width: 0 1px 0 1px;
border-style: solid;
}
#main { #main {
padding: 0 0 10px 0; width: 100%;
max-width: 100%;
order : 1;
-ms-flex-order: 1;
-webkit-flex-order: 1;
} }
#menu-left, #menu-left,
#menu-right { #menu-right {
width: 100%; width: 100%;
} }
#menu-left {
order : 2;
-ms-flex-order: 2;
-webkit-flex-order: 2;
}
#menu-right {
order : 3;
-ms-flex-order: 3;
-webkit-flex-order: 3;
}
@media (min-width: 769px) { @media (min-width: 769px) {
#global { #menu-left { margin-right: 1.618em; }
min-height: 100vh; #menu-right { margin-left: 1.618em; }
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
}
#main {
padding: 0 10px;
order : 2;
-ms-flex-order: 2;
-webkit-flex-order: 2;
flex: 1 0 auto;
-ms-flex: 1 0 100%;
}
#menu-left, #menu-left,
#menu-right { #menu-right {
width: 200px; width: calc(100% / 13 * 3.5);
} }
#menu-left { #menu-left.narrow-menu-left { margin-right: 0.809em; }
order : 1; #menu-right.narrow-menu-right { margin-left: 0.809em; }
-ms-flex-order: 1;
-webkit-flex-order: 1; #menu-left.narrow-menu-left,
#menu-right.narrow-menu-right {
width: calc(100% / 13 * 2.5);
} }
#menu-right {
order : 3; #main {
-ms-flex-order: 3; padding: 0 0 1.618em;
-webkit-flex-order: 3;
} }
#main.main-with-left, #main.main-with-left,
#main.main-with-right { #main.main-with-right {
width: calc(100% - 200px); width: calc(100% - ((100% / 13 * 5)));
-ms-flex: 1 0 auto; /*Tricks IE*/
} }
#main.main-with-left.main-with-right { #main.main-with-left.main-with-right {
width: calc(100% - 400px); width: calc(100% - ((100% / 13 * 8)));
-ms-flex: 1 0 auto; /*Tricks IE*/
} }
} }
#top-footer { #top-footer {
padding: 0.5em 0; padding: 0.809em;
}
/* -- Contenu de la page -- */
/* ------------------------ */
/* --- Contenu central --- */
#main-content {
padding: 1.5em 0.8em;
} }
.block-container { .block-container {
margin-top: 15px; margin-top: 1em;
} }
/* --- Emplacement au dessus et en dessous du contenu de la page --- */ /* --- Emplacement au dessus et en dessous du contenu de la page --- */
#top-content { #top-content {
margin: 0 0 2% 0; margin: 0 0 1.618em 0;
padding: 0.1em 0.8em;
} }
/* --- Emplacement au dessus du pied de page --- */ /* --- Emplacement au dessus du pied de page --- */
#bottom-content { #bottom-content {
margin: 2% 0 0 0; margin: 1.618em 0 0;
padding: 0.1em 0.8em;
} }
/* -- Pied de page - Footer -- */ /* -- Pied de page - Footer -- */
/* --------------------------- */ /* --------------------------- */
#footer { #footer {
margin: auto;
clear: both; clear: both;
border-width: 4px 0 0 0; border-width: 4px 0 0 0;
border-style: solid; border-style: solid;
border-color: transparent;
} }
.footer-content { .footer-content {
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
padding: 1.5em 0; padding: 0.809em;
} }
.footer-infos { .footer-infos {
margin: auto; margin: auto;
padding-top: 10px; padding: 0.809em;
min-height: 40px; min-height: 40px;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
border-style: solid; border-style: solid;
border-color: transparent;
text-align: center; text-align: center;
} }
@media (min-width: 769px) {
.footer-infos {
width: 400px;
}
}
.footer-infos span { .footer-infos span {
font-size: 0.8em; font-size: 0.8em;
display: block;
} }
@media (max-width: 768px) { .footer-infos span.footer-infos-separator {
.footer-infos span { display: none;
display: block }
}
@media (min-width: 769px) {
.footer-infos span,
.footer-infos span.footer-infos-separator { .footer-infos span.footer-infos-separator {
display: none; display: inline-block;
} }
.footer-infos { .footer-infos {
padding: 10px; padding: 0.618em 0 0;
} }
} }
/* -- Elements specifiques PHPboost -- */ /* -- Elements specifiques PHPboost -- */
/* ----------------------------------- */ /* ----------------------------------- */
/* --- Compteur de visites --- */ /* --- Compteur de visites --- */
#visit-counter { #visit-counter {
position: absolute; position: absolute;
right: 0; right: 1.618em;
bottom : 1em; top : 92.5%;
margin-right: 10px;
font-size: 0.9em; font-size: 0.9em;
text-align: right; text-align: right;
} }
/* --- Barre de lien rapide --- */ /* --- Barre de lien rapide --- */
#breadcrumb { #breadcrumb {
margin: 0 0 20px 10px; padding: 0.618em;
text-indent: 10px; font-size: 0.809em;
} }
#breadcrumb ol { #breadcrumb ol {
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
#breadcrumb li { #breadcrumb li {
display: inline; display: inline;
} }
#breadcrumb li:not(.current):after { #breadcrumb li:not(.current):after {
content: '/'; content: '/';
color: #616161;
} }
/* --- Scroll to Top --- */ /* --- Scroll to Top --- */
.scroll-to { .scroll-to {
position: fixed; position: fixed;
z-index: 10; z-index: 10;
display: none; display: none;
background-color: rgba(15, 15, 16, 0.8); cursor: pointer;
} }
#scroll-to-top { #scroll-to-top {
right: 25px; right: 0;
bottom: 0; bottom: 0.618em;
padding: 2px 11px 3px 10px; padding: 0.618em 0.809em;
transition: 0.2s;
} }
#scroll-to-top,
.scroll-to i { .scroll-to i {
color: rgba(255, 255, 255, 0.8);
transition: 0.2s; transition: 0.2s;
} }
#scroll-to-top:hover,
.scroll-to:hover i { .scroll-to:hover i {
color: rgba(255, 255, 255, 1);
transition: 0.3s; transition: 0.3s;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
#scroll-to-top { #scroll-to-top {
bottom: 25px; right: 0.618em;
padding: 9px 11px 11px 10px;
} }
.scroll-to i { .scroll-to i {
font-size: 2em; font-size: 1.618em;
}
}
@media (max-width: 768px) {
#scroll-to-top:hover {
padding: 9px 11px 11px 10px;
transition: 0.3s;
} }
} }
/* -- Cookie Bar -- */ /* --- Cookie Bar --- */
/* ------------------- */
.cookiebar-container { .cookiebar-container {
z-index: 100; z-index: 100;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
padding: 7px 20px; padding: 0.456em 1.309em;
background-color: #F2F2F2; font-size: 0.809em;
border-bottom: 1px solid #E2E2E2;
font-size: 0.9em;
text-align: center; text-align: center;
} }
@media (max-width: 768px) {
.cookiebar-container {
position: fixed;
top: auto;
bottom: 0;
padding: 1.309em 1.309em 0.456em 1.309em;
margin: 1em 0.456em;
border-style: solid;
border-width: 1px;
font-size: 1em;
}
}
.cookiebar-container.fixed { .cookiebar-container.fixed {
position: fixed; position: fixed;
} }
.cookiebar-content { .cookiebar-content {
text-align: justify; text-align: justify;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
.cookiebar-content { .cookiebar-content {
display: inline-block; display: inline-block;
max-width: calc(100% - 250px); max-width: calc(100% - 400px);
vertical-align: middle; vertical-align: top;
} }
.cookiebar-actions { .cookiebar-actions {
display: inline-block; display: inline-block;
width: 250px; width: 400px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.cookiebar-content { .cookiebar-content {
margin-bottom: 5px; margin-bottom: 0.309em;
} }
.cookiebar-actions { .cookiebar-actions {
margin: 15px 0 5px 0; margin: 1em 0 0.309em 0;
} }
} }
.cookiebar-button { .cookiebar-button {
margin: 0 5px 0 5px; margin: 0 0.309em;
border-radius: 4px;
color: #FEFEFE;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.cookiebar-button { .cookiebar-button {
margin: 0 10px 0 10px; margin: 0 0.618em;
} }
} }
.cookiebar-button-understand { background-color: #337AB7; border-color: #2E6DA4; }
.cookiebar-button-understand:hover { background-color: #2E6DA4; }
.cookiebar-button-allowed { background-color: #5CB85C; border-color: #4CAE4C; }
.cookiebar-button-allowed:hover { background-color: #4CAE4C; }
.cookiebar-button-declined { background-color: #E84E40; border-color: #CE271A; }
.cookiebar-button-declined:hover { background-color: #CE271A; }
@media (max-width: 468px) { @media (max-width: 468px) {
.cookiebar-more { .cookiebar-more {
display: block; display: block;
margin: 10px 0 5px 0; margin: 0.618em 0 0.309em 0;
} }
} }
.aboutcookie-title { .aboutcookie-title {
font-size: 1.3em; font-size: 1.3em;
line-height: 1.3em; line-height: 1.3em;
font-weight: bold font-weight: bold
} }
.aboutcookie-title + p { .aboutcookie-title + p {
margin: 0px 0 20px 0px; margin: 0 0 1.309 0;
} }
#cookiebar-change-choice { #cookiebar-change-choice {
margin-top: 10px; margin-top: 0.618em;
text-align: center; text-align: center;
} }
.cookiebar-change-choice-link { .cookiebar-change-choice-link {
text-align: center; text-align: center;
} }
/* --- Search engines --- */
.robot {
font-size: 0.9em;
font-weight: bold;
}
Editor
Original Text
Changed Text