Diff
checker
Texte
Texte
Images
Documents
Excel
Dossiers
Legal
Enterprise
Application de bureau
Prix
Se connecter
Télécharger Diffchecker Desktop
Comparer le texte
Trouver la différence entre deux fichiers texte
Outils
Historique
Éditeur live
Cacher identiques
Sans retour à la ligne
Vue
Divisé
Unifié
Niveau de précision
Intelligent
Mot
Caractère
Coloration syntaxique
Choisir la syntaxe
Ignorer
Transformer le texte
Aller au premier écart
Modifier l'entrée
Diffchecker Desktop
La façon la plus sécurisée d'utiliser Diffchecker. Obtenez l'application Diffchecker Desktop : vos diffs ne quittent jamais votre ordinateur !
Obtenir Desktop
Untitled diff
Créé
il y a 7 ans
Le diff n'expire jamais
Effacer
Exporter
Partager
Expliquer
251 suppressions
Lignes
Total
Supprimé
Caractères
Total
Supprimé
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
512 lignes
Copier tout
129 ajouts
Lignes
Total
Ajouté
Caractères
Total
Ajouté
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
388 lignes
Copier tout
Copier
Copié
Copier
Copié
/*
--------------------------------------
/*
--------------------------------------
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
Copier
Copié
Copier
Copié
--------------------------------------
*/
--------------------------------------
*/
/* -- 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%;
Copier
Copié
Copier
Copié
font-size: 1.
3em
;
font-size: 1.
456em
;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
Copier
Copié
Copier
Copié
font-weight: 300;
line-height: 1.6;
}
}
Copier
Copié
Copier
Copié
@media (
max
-width: 76
8
px) {
@media (
min
-width: 76
9
px) {
body {
body {
Copier
Copié
Copier
Copié
font-size: 1.
4em
;
font-size: 1.
618em
;
}
}
}
}
Copier
Copié
Copier
Copié
/* -- Gestion de la taille du site -- */
/* -- Gestion de la taille du site -- */
/* ---------------------------------- */
/* ---------------------------------- */
Copier
Copié
Copier
Copié
#header,
#header,
#global,
#global,
#footer {
#footer {
width: 100%;
width: 100%;
Copier
Copié
Copier
Copié
padding: 0.809em;
}
}
Copier
Copié
Copier
Copié
@media (min-width: 76
8
px)
{
@media (min-width: 76
9
px)
{
#header
,
#header
{
padding: 1.618em 0;
}
#top-header,
#sub-header
,
#global,
#global,
#footer {
#footer {
Copier
Copié
Copier
Copié
max-
width:
1024px
;
margin: auto;
padding: 1.618em 0;
}
#top-header,
#sub-header,
#global,
#footer {
width:
768px
;
}
}
}
}
Copier
Copié
Copier
Copié
/* -- 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; }
Copier
Copié
Copier
Copié
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 -- */
/* ------------------------------ */
/* ------------------------------ */
Copier
Copié
Copier
Copié
#header {
#header {
margin: auto;
}
/* --- Partie superieure du header --- */
#top-header {
position: relative;
position: relative;
Copier
Copié
Copier
Copié
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 --- */
Copier
Copié
Copier
Copié
#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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
flex: 0 0 auto;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
}
#site-name-container {
#site-name-container {
Copier
Copié
Copier
Copié
margin: 0.
4
em 0 0 0
;
margin: 0.
2
em 0 0 0
.809em
;
}
}
#site-name {
#site-name {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
padding: 0.
1em
0 0 0.1
em;
padding: 0.
3236em
0 0 0.1
618
em;
font-size:
1
em;
font-size:
0.8
em;
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 {
Copier
Copié
Copier
Copié
margin:
1em
0 0 0
;
margin:
0 0 0
1.618em
;
}
}
#site-name {
#site-name {
Copier
Copié
Copier
Copié
font-size:
4
em;
font-size:
3.236em;
line-height: 1.2
em;
}
}
Copier
Copié
Copier
Copié
#site-slogan {
font-size: 1em;
padding: 0.1em 0 0 0.1618em;
}
}
}
Copier
Copié
Copier
Copié
/* -- Conteneur global du site -- */
/* -- Conteneur global du site -- */
/* ------------------------------ */
/* ------------------------------ */
Copier
Copié
Copier
Copié
#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 {
Copier
Copié
Copier
Copié
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%;
}
}
Copier
Copié
Copier
Copié
#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) {
Copier
Copié
Copier
Copié
#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 {
Copier
Copié
Copier
Copié
width:
200px
;
width:
calc(100% / 13 * 3.5)
;
}
}
Copier
Copié
Copier
Copié
#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)
;
}
}
Copier
Copié
Copier
Copié
#menu-right {
order : 3;
#main {
-ms-flex-order: 3;
padding: 0 0 1.618em
;
-webkit-flex-order: 3
;
}
}
Copier
Copié
Copier
Copié
#main.main-with-left,
#main.main-with-left,
#main.main-with-right {
#main.main-with-right {
Copier
Copié
Copier
Copié
width: calc(100% -
200px);
width: calc(100% -
((100% / 13 * 5)));
-ms-flex: 1 0 auto; /*Tricks IE*/
}
}
Copier
Copié
Copier
Copié
#main.main-with-left.main-with-right {
#main.main-with-left.main-with-right {
Copier
Copié
Copier
Copié
width: calc(100% -
400px);
width: calc(100% -
((100% / 13 * 8)));
-ms-flex: 1 0 auto; /*Tricks IE*/
}
}
}
}
#top-footer {
#top-footer {
Copier
Copié
Copier
Copié
padding: 0.
5em 0;
padding: 0.
809em;
}
/* -- Contenu de la page -- */
/* ------------------------ */
/* --- Contenu central --- */
#main-content {
padding: 1.5em 0.8em;
}
}
.block-container {
.block-container {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
margin: 0 0
2% 0;
margin: 0 0
1.618
em 0
;
padding: 0.1
em 0
.8em
;
}
}
/* --- Emplacement au dessus du pied de page --- */
/* --- Emplacement au dessus du pied de page --- */
#bottom-content {
#bottom-content {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
margin: auto;
clear: both;
clear: both;
border-width: 4px 0 0 0;
border-width: 4px 0 0 0;
border-style: solid;
border-style: solid;
Copier
Copié
Copier
Copié
border-color: transparent;
}
}
.footer-content {
.footer-content {
margin: 0 auto 0 auto;
margin: 0 auto 0 auto;
Copier
Copié
Copier
Copié
padding:
1.5em 0
;
padding:
0.809em
;
}
}
.footer-infos {
.footer-infos {
margin: auto;
margin: auto;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
border-color: transparent;
text-align: center;
text-align: center;
}
}
Copier
Copié
Copier
Copié
Text moved with changes to lines 310-315 (82.4% similarity)
@media (min-width: 769px) {
.footer-infos {
width: 400px;
}
}
.footer-infos span {
.footer-infos span {
font-size: 0.8em;
font-size: 0.8em;
Copier
Copié
Copier
Copié
display: block;
}
}
Copier
Copié
Copier
Copié
@media (max-width: 768px) {
.footer-infos span
.footer-infos-separator
{
.footer-infos span
{
display:
none;
display:
block
}
}
Copier
Copié
Copier
Copié
@media (min-width: 769px) {
.footer-infos span,
.footer-infos span.footer-infos-separator {
.footer-infos span.footer-infos-separator {
Copier
Copié
Copier
Copié
display:
none
;
display:
inline-block
;
}
}
.footer-infos {
.footer-infos {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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: '/';
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
background-color: rgba(15, 15, 16, 0.8)
;
cursor: pointer
;
}
}
#scroll-to-top {
#scroll-to-top {
Copier
Copié
Copier
Copié
right:
25px
;
right:
0
;
bottom: 0
;
bottom: 0
.618em
;
padding:
2px 11px 3px 10px;
padding:
0.618em
0.
809em
;
transition:
0.
2s
;
}
}
Copier
Copié
Copier
Copié
#scroll-to-top,
.scroll-to i {
.scroll-to i {
Copier
Copié
Copier
Copié
color: rgba(255, 255, 255, 0.8);
transition: 0.2s;
transition: 0.2s;
}
}
Copier
Copié
Copier
Copié
#scroll-to-top:hover,
.scroll-to:hover i {
.scroll-to:hover i {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
bottom: 25px;
right: 0.618em
;
padding: 9px 11px 11px 10px
;
}
}
.scroll-to i {
.scroll-to i {
Copier
Copié
Copier
Copié
font-size:
2em;
font-size:
1.618em;
}
}
@media (max-width: 768px) {
#scroll-to-top:hover {
padding: 9px 11px 11px 10px;
transition: 0.3s;
}
}
}
}
Copier
Copié
Copier
Copié
/* --
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;
Copier
Copié
Copier
Copié
padding:
7px 20px;
padding:
0.456em 1.309em
;
background-color: #F2F2F2;
font-size: 0.
80
9em;
border-bottom: 1px solid #E2E2E2
;
font-size: 0.
9em;
text-align: center;
text-align: center;
}
}
Copier
Copié
Copier
Copié
@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;
Text moved with changes from lines 320-325 (82.4% similarity)
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
width:
250px
;
width:
400px
;
}
}
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
.cookiebar-content {
.cookiebar-content {
Copier
Copié
Copier
Copié
margin-bottom:
5px
;
margin-bottom:
0.309em
;
}
}
.cookiebar-actions {
.cookiebar-actions {
Copier
Copié
Copier
Copié
margin:
15px
0
5px
0;
margin:
1em
0
0.309em
0;
}
}
}
}
.cookiebar-button {
.cookiebar-button {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
margin: 0
10px 0 10px
;
margin: 0
0.618em
;
}
}
}
}
Copier
Copié
Copier
Copié
.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;
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
margin:
0px
0
20px 0px
;
margin:
0
0
1.309 0
;
}
}
#cookiebar-change-choice {
#cookiebar-change-choice {
Copier
Copié
Copier
Copié
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;
}
}
Copier
Copié
Copier
Copié
/* --- Search engines --- */
.robot {
font-size: 0.9em;
font-weight: bold;
}
Différences enregistrées
Texte d'origine
Ouvrir un fichier
/*-------------------------------------- design.css Contient les conteneurs de mise en page. Le design.css permet de mettre en forme votre site web avec le design de votre choix --------------------------------------*/ /* -- Elements HTML generiques specifique au theme -- */ /* -------------------------------------------------- */ html { font-size: 100%; font-size: 10px; } body { position: relative; height: auto; min-height: 100%; font-size: 1.3em; font-family: 'Open Sans', sans-serif; } @media (max-width: 768px) { body { font-size: 1.4em; } } /* -- Gestion de la taille du site -- */ /* ---------------------------------- */ #header, #global, #footer { width: 100%; } @media (min-width: 768px) { #header, #global, #footer { max-width: 1024px; } } /* -- Gestion des couleurs principales -- */ /* -------------------------------------- */ /* 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 -- */ /* ------------------------------ */ #header { margin: auto; } /* --- Partie superieure du header --- */ #top-header { 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 --- */ #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 { margin: 0 1em 0 0; width: 60px; height: 60px; background-image: url(images/logo.png); background-position: center; background-repeat: no-repeat; background-size: cover; flex: 0 0 auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; } #site-name-container { margin: 0.4em 0 0 0; } #site-name { font-size: 3em; font-weight: bold; line-height: 1em; letter-spacing: 0.02em; text-decoration: none; } #site-slogan { display: block; padding: 0.1em 0 0 0.1em; font-size: 1em; letter-spacing: 0.1em; } @media (min-width: 769px) { #site-logo { width: 90px; height: 90px; } #site-name-container { margin: 1em 0 0 0; } #site-name { font-size: 4em; } } /* -- 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 { padding: 0 0 10px 0; max-width: 100%; order : 1; -ms-flex-order: 1; -webkit-flex-order: 1; } #menu-left, #menu-right { 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) { #global { min-height: 100vh; 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-right { width: 200px; } #menu-left { order : 1; -ms-flex-order: 1; -webkit-flex-order: 1; } #menu-right { order : 3; -ms-flex-order: 3; -webkit-flex-order: 3; } #main.main-with-left, #main.main-with-right { width: calc(100% - 200px); -ms-flex: 1 0 auto; /*Tricks IE*/ } #main.main-with-left.main-with-right { width: calc(100% - 400px); -ms-flex: 1 0 auto; /*Tricks IE*/ } } #top-footer { padding: 0.5em 0; } /* -- Contenu de la page -- */ /* ------------------------ */ /* --- Contenu central --- */ #main-content { padding: 1.5em 0.8em; } .block-container { margin-top: 15px; } /* --- Emplacement au dessus et en dessous du contenu de la page --- */ #top-content { margin: 0 0 2% 0; padding: 0.1em 0.8em; } /* --- Emplacement au dessus du pied de page --- */ #bottom-content { margin: 2% 0 0 0; padding: 0.1em 0.8em; } /* -- Pied de page - Footer -- */ /* --------------------------- */ #footer { margin: auto; clear: both; border-width: 4px 0 0 0; border-style: solid; } .footer-content { margin: 0 auto 0 auto; padding: 1.5em 0; } .footer-infos { margin: auto; padding-top: 10px; min-height: 40px; border-width: 1px 0 0 0; border-style: solid; text-align: center; } @media (min-width: 769px) { .footer-infos { width: 400px; } } .footer-infos span { font-size: 0.8em; } @media (max-width: 768px) { .footer-infos span { display: block } .footer-infos span.footer-infos-separator { display: none; } .footer-infos { padding: 10px; } } /* -- Elements specifiques PHPboost -- */ /* ----------------------------------- */ /* --- Compteur de visites --- */ #visit-counter { position: absolute; right: 0; bottom : 1em; margin-right: 10px; font-size: 0.9em; text-align: right; } /* --- Barre de lien rapide --- */ #breadcrumb { margin: 0 0 20px 10px; text-indent: 10px; } #breadcrumb ol { margin: 0; list-style: none; } #breadcrumb li { display: inline; } #breadcrumb li:not(.current):after { content: '/'; color: #616161; } /* --- Scroll to Top --- */ .scroll-to { position: fixed; z-index: 10; display: none; background-color: rgba(15, 15, 16, 0.8); } #scroll-to-top { right: 25px; bottom: 0; padding: 2px 11px 3px 10px; transition: 0.2s; } .scroll-to i { color: rgba(255, 255, 255, 0.8); transition: 0.2s; } .scroll-to:hover i { color: rgba(255, 255, 255, 1); transition: 0.3s; } @media (min-width: 769px) { #scroll-to-top { bottom: 25px; padding: 9px 11px 11px 10px; } .scroll-to i { font-size: 2em; } } @media (max-width: 768px) { #scroll-to-top:hover { padding: 9px 11px 11px 10px; transition: 0.3s; } } /* -- Cookie Bar -- */ /* ------------------- */ .cookiebar-container { z-index: 100; left: 0; right: 0; top: 0; padding: 7px 20px; background-color: #F2F2F2; border-bottom: 1px solid #E2E2E2; font-size: 0.9em; text-align: center; } .cookiebar-container.fixed { position: fixed; } .cookiebar-content { text-align: justify; } @media (min-width: 769px) { .cookiebar-content { display: inline-block; max-width: calc(100% - 250px); vertical-align: middle; } .cookiebar-actions { display: inline-block; width: 250px; } } @media (max-width: 768px) { .cookiebar-content { margin-bottom: 5px; } .cookiebar-actions { margin: 15px 0 5px 0; } } .cookiebar-button { margin: 0 5px 0 5px; border-radius: 4px; color: #FEFEFE; } @media (max-width: 768px) { .cookiebar-button { margin: 0 10px 0 10px; } } .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) { .cookiebar-more { display: block; margin: 10px 0 5px 0; } } .aboutcookie-title { font-size: 1.3em; line-height: 1.3em; font-weight: bold } .aboutcookie-title + p { margin: 0px 0 20px 0px; } #cookiebar-change-choice { margin-top: 10px; text-align: center; } .cookiebar-change-choice-link { text-align: center; }
Texte modifié
Ouvrir un fichier
/* -------------------------------------- design.css Contient les conteneurs de mise en page. Le design.css permet de mettre en forme votre site web avec le design de votre choix -------------------------------------- */ /* -- Elements HTML generiques specifique au theme -- */ /* -------------------------------------------------- */ html { font-size: 100%; font-size: 10px; } body { position: relative; height: auto; min-height: 100%; font-size: 1.456em; font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 1.6; } @media (min-width: 769px) { body { font-size: 1.618em; } } /* -- Gestion de la taille du site -- */ /* ---------------------------------- */ #header, #global, #footer { width: 100%; padding: 0.809em; } @media (min-width: 769px) { #header { padding: 1.618em 0; } #top-header, #sub-header, #global, #footer { margin: auto; padding: 1.618em 0; } #top-header, #sub-header, #global, #footer { width: 768px; } } @media (min-width: 1025px) { #top-header, #sub-header, #global, #footer { width: 1024px; } } @media (min-width: 1367px) { #top-header, #sub-header, #global, #footer { width: 1280px; } } /* -- En-tete de page - Header -- */ /* ------------------------------ */ #header { position: relative; } /* --- Partie inferieur du header --- */ #site-logo { width: 60px; height: 60px; background-image: url(images/logo.png); background-position: center; background-repeat: no-repeat; background-size: cover; } #site-name-container { margin: 0.2em 0 0 0.809em; } #site-name { font-size: 1.618em; display: block; font-weight: 400; text-decoration: none; } #site-slogan { display: block; padding: 0.3236em 0 0 0.1618em; font-size: 0.8em; letter-spacing: 0.1em; } @media (min-width: 769px) { #site-logo { width: 90px; height: 90px; } #site-name-container { margin: 0 0 0 1.618em; } #site-name { font-size: 3.236em; line-height: 1.2em; } #site-slogan { font-size: 1em; padding: 0.1em 0 0 0.1618em; } } /* -- Conteneur global du site -- */ /* ------------------------------ */ #main { width: 100%; } #menu-left, #menu-right { width: 100%; } @media (min-width: 769px) { #menu-left { margin-right: 1.618em; } #menu-right { margin-left: 1.618em; } #menu-left, #menu-right { width: calc(100% / 13 * 3.5); } #menu-left.narrow-menu-left { margin-right: 0.809em; } #menu-right.narrow-menu-right { margin-left: 0.809em; } #menu-left.narrow-menu-left, #menu-right.narrow-menu-right { width: calc(100% / 13 * 2.5); } #main { padding: 0 0 1.618em; } #main.main-with-left, #main.main-with-right { width: calc(100% - ((100% / 13 * 5))); } #main.main-with-left.main-with-right { width: calc(100% - ((100% / 13 * 8))); } } #top-footer { padding: 0.809em; } .block-container { margin-top: 1em; } /* --- Emplacement au dessus et en dessous du contenu de la page --- */ #top-content { margin: 0 0 1.618em 0; } /* --- Emplacement au dessus du pied de page --- */ #bottom-content { margin: 1.618em 0 0; } /* -- Pied de page - Footer -- */ /* --------------------------- */ #footer { clear: both; border-width: 4px 0 0 0; border-style: solid; border-color: transparent; } .footer-content { margin: 0 auto 0 auto; padding: 0.809em; } .footer-infos { margin: auto; padding: 0.809em; min-height: 40px; border-width: 1px 0 0 0; border-style: solid; border-color: transparent; text-align: center; } .footer-infos span { font-size: 0.8em; display: block; } .footer-infos span.footer-infos-separator { display: none; } @media (min-width: 769px) { .footer-infos span, .footer-infos span.footer-infos-separator { display: inline-block; } .footer-infos { padding: 0.618em 0 0; } } /* -- Elements specifiques PHPboost -- */ /* ----------------------------------- */ /* --- Compteur de visites --- */ #visit-counter { position: absolute; right: 1.618em; top : 92.5%; font-size: 0.9em; text-align: right; } /* --- Barre de lien rapide --- */ #breadcrumb { padding: 0.618em; font-size: 0.809em; } #breadcrumb ol { margin: 0; list-style: none; } #breadcrumb li { display: inline; } #breadcrumb li:not(.current):after { content: '/'; } /* --- Scroll to Top --- */ .scroll-to { position: fixed; z-index: 10; display: none; cursor: pointer; } #scroll-to-top { right: 0; bottom: 0.618em; padding: 0.618em 0.809em; } #scroll-to-top, .scroll-to i { transition: 0.2s; } #scroll-to-top:hover, .scroll-to:hover i { transition: 0.3s; } @media (min-width: 769px) { #scroll-to-top { right: 0.618em; } .scroll-to i { font-size: 1.618em; } } /* --- Cookie Bar --- */ .cookiebar-container { z-index: 100; left: 0; right: 0; top: 0; padding: 0.456em 1.309em; font-size: 0.809em; 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 { position: fixed; } .cookiebar-content { text-align: justify; } @media (min-width: 769px) { .cookiebar-content { display: inline-block; max-width: calc(100% - 400px); vertical-align: top; } .cookiebar-actions { display: inline-block; width: 400px; } } @media (max-width: 768px) { .cookiebar-content { margin-bottom: 0.309em; } .cookiebar-actions { margin: 1em 0 0.309em 0; } } .cookiebar-button { margin: 0 0.309em; } @media (max-width: 768px) { .cookiebar-button { margin: 0 0.618em; } } @media (max-width: 468px) { .cookiebar-more { display: block; margin: 0.618em 0 0.309em 0; } } .aboutcookie-title { font-size: 1.3em; line-height: 1.3em; font-weight: bold } .aboutcookie-title + p { margin: 0 0 1.309 0; } #cookiebar-change-choice { margin-top: 0.618em; text-align: center; } .cookiebar-change-choice-link { text-align: center; } /* --- Search engines --- */ .robot { font-size: 0.9em; font-weight: bold; }
Trouver la différence