Update colors and styles (#314)

site/.vuepress/config.js

@@ -84,7 +84,7 @@ head: [
         "url": "/statistiques.html",
       },
       {
-        "title": "A propos",
+        "title": "À propos",
         "url": "/apropos.html",
       },
     ],
@@ -108,7 +108,7 @@ head: [
         url: '/schemas.html'
       },
       {
-        img: '/assets/chat.png',
+        img: '/assets/community.png',
         text: 'Contribuez en proposant votre propre schéma',
         url: '/contribuer.html'
       },

site/.vuepress/styles/style.css

@@ -12,4 +12,14 @@ h3 {
 
 h4 {
   margin-top: 2rem;
-}
+}
+
+.fr-btn { /* Styles pour les boutons avec classe `fr-btn` */
+  background-color: #3558A2; /* Couleur de fond */
+  color: white; /* Couleur du texte */
+}
+
+.fr-btn--secondary { /* Styles pour les boutons avec classe `fr-btn--secondary` */
+  background-color: white; /* Couleur personnalisée pour le bouton secondaire */
+  color: #3558A2; /* Couleur du texte */
+}

site/.vuepress/theme/components/Header.vue

@@ -60,7 +60,7 @@ export default {
 }
 
 .rss-span {
-  color: #000091;
+  color: #3558A2;
   font-weight: bold;
   font-size: 12px;
   padding: 8px 16px;

site/.vuepress/theme/components/Hero.vue

@@ -11,16 +11,16 @@
                 <br />
                 <button @click="goto($site.themeConfig.hero.url1)" class="heroButton fr-btn fr-btn--secondary">
                     {{ $site.themeConfig.hero.button1 }}&nbsp;&nbsp;
-                    <img src="../../public/assets/right-arrow.png" width="15" />
+                    <img src="../../public/assets/right-arrow.png" width="20" />
                 </button>
                 <br /><br />
                 <button @click="goto($site.themeConfig.hero.url2)" class="heroButton fr-btn fr-btn--secondary">
                     {{ $site.themeConfig.hero.button2 }}&nbsp;&nbsp;
-                    <img src="../../public/assets/right-arrow.png" width="15" />
+                    <img src="../../public/assets/right-arrow.png" width="20" />
                 </button>
             </div>
             <div class="heroImage">
-                <img src="../../public/assets/logo-schema.png" width="350" />
+                <img src="../../public/assets/logo_schema.png" width="250" />
             </div>
         </div>
     </div>
@@ -56,9 +56,9 @@ export default {
 }
 .hero{
     min-height: 430px;
-    background-color: #000091;
+    background-color: #E6EEFE;
     display: flex;
-    color: white;
+    color: #3558A2;
     padding-bottom: 30px;
 }
 .heroText{

site/.vuepress/theme/components/InfoBanner.vue

@@ -18,8 +18,8 @@ export default {
 
 <style scoped>
 .custom-notice {
-  background-color: #e5efff; /* Couleur de fond */
-  color: #0053b3; /* Couleur du texte */
+  background-color: #E6EEFE; /* Couleur de fond */
+  color: #3558A2; /* Couleur du texte */
   padding: 1rem; /* Espace interne */
 }
 
@@ -41,6 +41,6 @@ export default {
 }
 
 .custom-notice__title a {
-  color: #0053b3; /* Couleur du lien */
+  color: #3558A2; /* Couleur du lien */
 }
 </style>

site/.vuepress/theme/components/Menu.vue

@@ -74,8 +74,8 @@ export default {
     font-size: 15px;
     padding: 19px;
     line-height: 100%;
-    color: #000091;
-    border-bottom: 2px solid #000091;
+    color: #3558A2;
+    border-bottom: 2px solid #3558A2;
 }
 .menuItem:hover{
     background-color: #ebebeb;
@@ -99,8 +99,8 @@ export default {
     font-size: 18px;
     padding: 19px;
     line-height: 100%;
-    color: #000091;
-    border-bottom: 2px solid #000091;
+    color: #3558A2;
+    border-bottom: 2px solid #3558A2;
     font-weight: bold;
 }
 .menuItemList:hover{

site/.vuepress/theme/components/PresentationBox.vue

@@ -6,7 +6,7 @@
         <div class="pbBoxes">
             <div v-for="pbbox in $site.themeConfig.presentationBox" v-bind:key="pbbox.text" class="pbBox" @click="goto(pbbox.url)">
                 <div class="pbBoxImage">
-                     <img :src="pbbox.img" width="45" />
+                     <img :src="pbbox.img" width="50" />
                 </div>
                 <div class="pbBoxText">
                     {{ pbbox.text }}
@@ -47,6 +47,7 @@ export default {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
+    align-items: stretch;
 }
 .pbHeader{
     text-align: center;
@@ -56,13 +57,13 @@ export default {
     margin-bottom: 50px;
 }
 .pbBox{
-    width: 250px;
+    width: 320px;
     height: 220px;
     background-color: #ebebeb;
     margin-left: 30px;
     margin-right: 30px;
     margin-bottom: 50px;
-    border-bottom: 5px solid #000091;
+    border-bottom: 5px solid #3558A2;
     cursor: pointer;
 }
 .pbBoxImage{
@@ -74,6 +75,11 @@ export default {
 .pbBoxText{
     margin-bottom: 20px;
     margin-right: 20px;
+    margin-left: 20px;
     text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 10px
+
 }
 </style>

site/.vuepress/theme/global-components/Contribution.vue

@@ -257,15 +257,15 @@ export default {
   margin-right: 5px;
   border-radius: 5px;
   padding: 15px;
-  color: #000091;
+  color: #3558A2;
   margin-bottom: 5px;
 }
 .answerSelected{
   background-color: #CCCCFF;
   margin-right: 5px;
   border-radius: 5px;
   padding: 15px;
-  color: #000091;
+  color: #3558A2;
   margin-bottom: 5px;
 }
 

site/.vuepress/theme/global-components/MenuSchema.vue

@@ -105,15 +105,15 @@
                 <button 
                     @click="gotoInternal('')" 
                     class="ongletItem"
-                    :style="this.pageInfo ? 'background-color: var(--bf200-bf300); border-top: 1px solid #000091; border-left: 1px solid #000091; border-right: 1px solid #000091;' : ''"
+                    :style="this.pageInfo ? 'background-color: var(--bf200-bf300); border-top: 1px solid #3558A2; border-left: 1px solid #3558A2; border-right: 1px solid #3558A2;' : ''"
                 >
                     <img src="../../public/assets/info.png" width="15" />&nbsp;
                     Informations
                 </button>
                 <span v-if="schema_infos['versions'][version]['pages'].includes('documentation.md')">
                     <button 
                         class="ongletItem"
-                        :style="this.pageDoc ? 'background-color: var(--bf200-bf300); border-top: 1px solid #000091; border-left: 1px solid #000091; border-right: 1px solid #000091;' : ''"
+                        :style="this.pageDoc ? 'background-color: var(--bf200-bf300); border-top: 1px solid #3558A2; border-left: 1px solid #3558A2; border-right: 1px solid #3558A2;' : ''"
                         @click="gotoInternal('documentation.html')"
                     >
                         <img src="../../public/assets/file-blue.png" width="15" />&nbsp;
@@ -124,7 +124,7 @@
                     <button 
                         @click="gotoInternal('CHANGELOG.html')"
                         class="ongletItem"
-                        :style="this.pageChange ? 'background-color: var(--bf200-bf300); border-top: 1px solid #000091; border-left: 1px solid #000091; border-right: 1px solid #000091;' : ''"
+                        :style="this.pageChange ? 'background-color: var(--bf200-bf300); border-top: 1px solid #3558A2; border-left: 1px solid #3558A2; border-right: 1px solid #3558A2;' : ''"
                     >
                         <img src="../../public/assets/couple-de-fleches-changeant-de-place.png" width="15" />&nbsp;
                         Changements
@@ -269,7 +269,7 @@ export default {
 .box-left{
   width: 75%;
   display: flex;
-  border-bottom: 1px solid #000091;
+  border-bottom: 1px solid #3558A2;
 }
 
 .fr-select-custom{

site/.vuepress/theme/global-components/SchemaCards.vue

@@ -469,11 +469,11 @@ export default {
   border: 2px solid #ebebeb;
 }
 .addSchemaDiv{
-  border: 2px solid #000091;
+  border: 2px solid #3558A2;
   float: left;
   padding: 10px;
   border-radius: 15px;
-  color: #000091;
+  color: #3558A2;
   cursor: pointer;
 }
 .search-bar{
@@ -484,13 +484,13 @@ export default {
   margin: 0px;
   width: 80%;
   border: 0px;
-  border-bottom: 2px solid #000091;
+  border-bottom: 2px solid #3558A2;
   font-size: 16px;
   border-top-left-radius: 5px;
   padding-left: 15px;
 }
 .rf-button-search{
-  background-color: #000091;
+  background-color: #3558A2;
   color: white;
   padding: 15px;
   margin: 0px;
@@ -515,7 +515,7 @@ export default {
   padding: 7px;
   font-size: 13px;
   border-radius: 15px;
-  color: #000091;
+  color: #3558A2;
   text-decoration: underline dotted;
 }
 
@@ -526,7 +526,7 @@ export default {
 .labelSelected{
   margin-right: 15px;
   padding: 7px;
-  background-color: #000091;
+  background-color: #3558A2;
   border-radius: 15px;
   color: white;
   font-size: 13px;
@@ -536,7 +536,7 @@ export default {
   padding: 7px;
   background-color: #ECEDFE;
   border-radius: 15px;
-  color: #000091;
+  color: #3558A2;
   font-size: 13px;
 }
 
@@ -557,15 +557,15 @@ export default {
   border-radius: 15px;
   font-size: 13px;
   background-color: #ECEDFE;
-  color: #000091;
+  color: #3558A2;
 }
 
 .statutNotSelected:hover{
   cursor: pointer;
 }
 
 .tousSelected{
-  background-color: #000091;
+  background-color: #3558A2;
   color: white;
 }
 .adopteSelected{

site/.vuepress/theme/global-components/SchemaCardsSample.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="schemaCardsSample">
     <div class="fr-container schemaCardsTitle">
-      Découvrez les schémas référencés
+      <b>Découvrez les schémas référencés</b>
     </div>
     <div class="fr-container boxes">
       <div
@@ -28,7 +28,7 @@
     <div class="schemaCardsSampleButtonDiv">
       <button @click="maingoto()" class="schemaCardsSampleButton fr-btn fr-btn--secondary">
           Découvrez tous les schémas référencés&nbsp;&nbsp;
-          <img src="../../public/assets/right-arrow.png" width="15" />
+          <img src="../../public/assets/right-arrow.png" width="20" />
       </button>
     </div>
   </div>
@@ -100,13 +100,13 @@ export default {
 <style scoped>
 
 .schemaCardsSample{
-  background-color: #000091;
+  background-color: #E6EEFE;
   padding-top: 50px;
   padding-bottom: 50px;
 
 }
 .schemaCardsTitle{
-  color: white;
+  color: #3558A2;
   text-align: center;
   font-size: 24px;
   margin-bottom: 30px;

site/.vuepress/theme/global-components/Stats.vue

@@ -130,7 +130,7 @@ export default {
     height: 150px;
     background-color: #ebebeb;
     margin: auto;
-    border-bottom: 5px solid #000091;
+    border-bottom: 5px solid #3558A2;
     cursor: pointer;
 }
 .pbBoxImage{
@@ -139,7 +139,7 @@ export default {
     margin-top: 20px;
     margin-bottom: 20px;
     font-size: 40px;
-    color: #000091;
+    color: #3558A2;
 }
 .pbBoxText{
     margin-bottom: 20px;
@@ -152,15 +152,15 @@ export default {
     padding-left: 10px;
     padding-right: 10px;
     margin-right: 20px;
-    background-color: #000091;
+    background-color: #3558A2;
     border-radius: 5px;
     float: left;
     cursor: pointer;
 }
 .nameJDD{
     float: left;
     cursor: pointer;
-    color: #000091;
+    color: #3558A2;
 }
 .nameJDD:hover{
     text-decoration: underline;