@saooti/octopus-sdk 30.0.21 → 30.0.25

package/README.md

@@ -518,4 +518,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.18 Responsive select
  * 30.0.19 Mise à jour Api
  * 30.0.20 Petit refacto commentaires
- * 30.0.21 #10701 & #10698
+ * 30.0.21 #10701 & #10698
+ * 30.0.22 Accessibilité
+ * 30.0.23 Css +  Accessibilité
+ * 30.0.24 Css +  Accessibilité
+ * 30.0.25 Css +  Accessibilité

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.21",
+  "version": "30.0.25",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/assets/bootstrap-diff.scss

@@ -10,7 +10,7 @@
     .btn{
         font-size:.7rem;
         border-radius: 50px;
-        background: $octopus-light-secondary-color; 
+        background: $octopus-secondary-color; 
         transition: background .2s, border .2s, box-shadow .2s, color .2s;
         text-decoration: none !important;
         white-space: nowrap;
@@ -30,56 +30,33 @@
         // Button Primary
         &.btn-primary {
             background: $octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
+            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-linear-background));
+            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#50b685', GradientType=1 );
             border-radius: 50px;
             height: auto;
             border: 0;
-            color: white !important;
+            color: black !important;
             &:focus,
             &:hover {
             background:$octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-            border: 0;
-            }
-            &:active,
-            &.active {
-            background: darken($octopus-primary-color, 4%);
-            border-color: darken($octopus-primary-color, 7%);
-            }
-        }
-        &.btn-light{
-            color: $octopus-primary-color;
-            background: transparent;
-        }
-        &.btn-auth{
-            &:focus,
-            &:hover {
-            background:$octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-            border: 0;
+                background: -moz-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -webkit-gradient(left top, right bottom, color-stop(0%, darken($octopus-third-color,7%)), color-stop(100%, darken($octopus-primary-linear-background, 7%)));
+                background: -webkit-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -o-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -ms-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: linear-gradient(135deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
+                border: 0;
             }
             &:active,
             &.active {
-            background: darken($octopus-primary-color, 4%);
-            border-color: darken($octopus-primary-color, 7%);
+                background: darken($octopus-primary-linear-background, 4%);
+                border-color: darken($octopus-primary-linear-background, 7%);
             }
         }
         //Button disable halo after click
@@ -98,49 +75,29 @@
         }
     
         &.btn-link {
-            background: $octopus-secondary-color;
-            color: $octopus-primary-color;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: $octopus-primary-dark;
+            border: 2px solid $octopus-primary-dark;
+            color: white;
             font-weight: bold;
-            margin: 2rem;
             width: fit-content;
             align-self: center;
             &:focus,
             &:hover,
             &:active,
             &.active {
-            background: darken($octopus-secondary-color, 5%);
-            color: $octopus-primary-color;
+                background: transparent;
+                color: $octopus-primary-dark;
             }
             @media (max-width: 500px){
             margin: 0.3rem;
             }
         }
-    
-        &.btn-link-plus {
-            padding: 8px 16px;
-            font-size: 0.8rem;
-            border-radius: 50px;
-            background-color: #ddd;
-            color: #000;
-            box-shadow: none;
-            display: flex;
-            border: 1px solid transparent;
-            .saooti-plus{
-            line-height: 1.5 !important;
-            margin-left: 5px; 
-            }
-            &:focus,
-            &:hover,
-            &:active,
-            &.active {
-            background: $octopus-primary-color;
-            color: white;
-            border: 1px solid $octopus-primary-color;
-            }
-        }
-    
+
         &.btn-more{
-            background: $octopus-primary-color;
+            background: $octopus-primary-dark;
             color: $octopus-background;
             width: 2rem;
             height: 2rem;
@@ -163,8 +120,7 @@
             height: 5rem;
         }
     
-        &.admin-button,
-        &.btn-arrow  {
+        &.admin-button{
             padding: 0.3rem;
             height: 1.8rem;
             width: 1.8rem;
@@ -172,13 +128,7 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
-        }
-        &.btn-arrow {
-            margin: 0.2rem;
-            background: $octopus-secondary-color;
-            &:hover {
-            background: $octopus-secondary-color;
-            }
+            color : $octopus-primary-dark;
         }
     
     }
@@ -191,6 +141,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        color : $octopus-primary-dark;
     }
 
     .btn-rss {
@@ -229,13 +180,9 @@
         }
     }
 
-    .custom-control-label {
-        //border: 1px solid #ddd;
-        border-radius: 5px;
-    }
     .dropdown-toggle-no-caret::after{
         display: none;
-      }    
+    }    
     .dropdown-menu {
         padding: 0.5rem;
     }

package/src/assets/form.scss

@@ -1,6 +1,9 @@
 .octopus-app{
 	.input-no-outline{
-	outline-width: 0 !important;
+		outline-width: 0 !important;
+	}
+	:-moz-focusring {
+		outline: 0px solid black;
 	}
 	.width-auto{
 	width: auto !important;
@@ -64,8 +67,8 @@
 				border-bottom: 0.1rem solid transparent;
 			}
 			.active{
-			border-bottom-color: $octopus-primary-color;
-			color: $octopus-primary-color;
+				border-bottom-color: $octopus-primary-dark;
+				color: $octopus-primary-dark;
 			}
 		}
 	}

package/src/assets/general.scss

@@ -8,7 +8,7 @@ body{
   font-family: Montserrat,sans-serif,Helvetica Neue;
   font-size: 0.8rem;
   overflow-x: hidden;
-  background: #fafafa;
+  background: #ebebeb;
   min-height: 100%;
   overscroll-behavior-y: contain;
 }
@@ -73,6 +73,12 @@ body{
   .secondary-bg{
     background: $octopus-background;
   }
+  .light-primary-bg{
+		background-color: $primaryColorTransparent !important;
+	}
+	.really-light-primary-bg{
+		background-color: $primaryColorReallyTransparent !important;
+	}
   .width-fit-content{
     width: fit-content !important;
   }
@@ -93,7 +99,7 @@ body{
   }
 
   .module-box{
-    background-color: $octopus-secondary-background;
+    background-color: white;
     padding: 1.3rem;
     margin: 0.5rem 0.5rem 0 0.5rem;
     border-radius: 1rem;
@@ -125,7 +131,7 @@ body{
     color: black !important;
   }
   a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
-    color: $octopus-primary-color !important;
+    color: $octopus-primary-dark !important;
   }
   .descriptionText{
     white-space: pre-wrap; 
@@ -158,6 +164,11 @@ body{
       display: none !important;
     }
   }
+  .hide-small-screen{
+		@media (max-width: 450px) {
+			display: none !important;
+		}
+	}
   .show-phone{
     display: none;
     @media (max-width: 960px) {

package/src/assets/share.scss

@@ -19,14 +19,6 @@
 			background: #f3f3f3;
 		}
 	}
-  .category-rubrique-item-plus {
-    display: flex;
-    height: 1.8rem;
-    width: 1.8rem;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.5rem;
-  }
   .icon-caution {
       margin-right: 5px;
       margin-bottom: 2px;
@@ -172,7 +164,6 @@
       margin-right: 0.5rem;
   }
 
-
   .saooti-stitcher-logo,
   .saooti-google-podcasts,
   .saooti-amazon,

package/src/components/display/aggregator/RssSection.vue

@@ -5,6 +5,4 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({})
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/categories/CategoryChooser.vue

@@ -255,6 +255,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/categories/CategoryFilter.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="mt-3" v-if="isDisplay">
+  <div
+    v-if="isDisplay"
+    class="mt-3"
+  >
     <nav
       v-if="categoryFilter || rubriqueFilter.length"
       title="breadcrumb"
@@ -142,6 +145,4 @@ export default defineComponent({
     }
   }
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/categories/CategoryList.vue

@@ -8,7 +8,7 @@
         v-for="category in categories"
         :id="'category' + category.id"
         :key="category.id"
-        class="category-item text-dark secondary-bg"
+        class="category-item text-dark bg-white"
         @click="checkIfFilter(category)"
       >
         {{ category.name }}
@@ -19,7 +19,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle category-rubrique-item-plus dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"
@@ -163,6 +163,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+@import '../../../sass/_variables.scss';
 .category-list-container {
   display: inline-flex;
   justify-content: flex-start;
@@ -184,20 +185,8 @@ export default defineComponent({
   justify-content: center;
   white-space: nowrap;
   flex-shrink: 0;
-  .router-link-active {
-    background: #ddd !important;
+  .router-link-active,&:hover {
+    background: $octopus-secondary-color !important;
   }
-  &:hover {
-    background: #ddd !important;
-  }
-}
-
-.category-list .category-item-plus {
-  display: flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.5rem;
 }
 </style>

package/src/components/display/comments/CommentInput.vue

@@ -25,7 +25,7 @@
         {{ $t('Cancel') }}
       </button>
       <button
-        class="btn btn-primary"
+        class="btn btn-link"
         :disabled="temporaryName.length < 2"
         @click="validEdit"
       >
@@ -52,7 +52,7 @@
         {{ $t('Cancel') }}
       </button>
       <button
-        class="btn btn-primary"
+        class="btn btn-link"
         :disabled="0 === newComment.trim().length"
         @mousedown="requestToSend"
       >
@@ -295,7 +295,7 @@ export default defineComponent({
 @import '../../../sass/_variables.scss';
 .comment-input-container {
   textarea::placeholder {
-    color: $octopus-primary-color;
+    color: $octopus-primary-dark;
   }
   textarea:focus::placeholder {
     color: black;

package/src/components/display/comments/CommentItem.vue

@@ -27,7 +27,7 @@
           {{ $t('Cancel') }}
         </button>
         <button
-          class="btn btn-primary m-1"
+          class="btn btn-link m-1"
           :disabled="0 === temporaryContent.length || temporaryName.length < 2"
           @click="validEdit"
         >
@@ -38,7 +38,7 @@
     <div class="d-flex align-items-center mt-1">
       <button
         v-if="null === comment.commentIdReferer && 'Valid'=== comment.status"
-        class="btn primary-color py-1 px-3 me-2"
+        class="btn py-1 px-3 me-2"
         :data-selenium="'answer-button-comment-' + seleniumFormat(comment.name)"
         @click="answerComment"
       >
@@ -49,7 +49,7 @@
           (!isFlat && comment.relatedComments) ||
             (isFlat && comment.commentIdReferer)
         "
-        class="d-flex align-items-center small-text primary-color c-hand"
+        class="d-flex align-items-center small-text primary-darker c-hand"
         @click="collapseVisible=!collapseVisible"
       >
         <div v-if="comment.relatedComments">

package/src/components/display/comments/CommentList.vue

@@ -25,7 +25,7 @@
     </transition-group>
     <button
       v-show="!allFetched && (!loading || 0!==first)"
-      class="btn btn-primary mt-2"
+      class="btn btn-link mt-2"
       :class="comId ? 'align-self-start' : 'align-self-center'"
       :disabled="loading"
       :title="$t('See more comments')"

package/src/components/display/comments/CommentSection.vue

@@ -18,7 +18,7 @@
       <button
         v-if="!isLive"
         :title="$t('Refresh')"
-        class="btn admin-button primary-color saooti-refresh-stud"
+        class="btn admin-button saooti-refresh-stud"
         @click="reloadComments"
       />
     </div>

package/src/components/display/edit/EditBox.vue

@@ -14,5 +14,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss"></style>

package/src/components/display/edit/EditCommentBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex">
     <button
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="edit"
       @click="editComment"
     >
@@ -12,7 +12,7 @@
     </button>
     <button
       v-if="'Pending' === comment.status || 'Invalid' === comment.status"
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="valid"
       @click="commentModal('Valid')"
     >
@@ -23,7 +23,7 @@
     </button>
     <button
       v-if="'Pending' === comment.status || 'Valid' === comment.status"
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="invalid"
       @click="commentModal('Invalid')"
     >
@@ -34,7 +34,7 @@
     </button>
     <button
       v-if="organisation"
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       :title="$t('See more')"
       @click="seeMore = true"
     >
@@ -44,7 +44,7 @@
       />
     </button>
     <button
-      class="btn admin-button primary-color me-1"
+      class="btn admin-button me-1"
       title="delete"
       @click="commentModal('Delete')"
     >

package/src/components/display/emission/EmissionChooser.vue

@@ -206,6 +206,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/emission/EmissionInlineList.vue

@@ -6,7 +6,7 @@
     >
       <div class="hide-phone">
         <button
-          class="btn btn-arrow"
+          class="btn admin-button m-1"
           :class="{ disabled: !previousAvailable }"
           :title="$t('Display previous')"
           @click="displayPrevious()"
@@ -14,7 +14,7 @@
           <div class="saooti-arrow-left2" />
         </button>
         <button
-          class="btn btn-arrow"
+          class="btn admin-button m-1"
           :class="{ disabled: !nextAvailable }"
           :title="$t('Display next')"
           @click="displayNext()"
@@ -57,7 +57,7 @@
     <router-link
       v-if="!overflowScroll"
       :to="href"
-      class="btn btn-link"
+      class="btn btn-link m-4"
     >
       {{
         buttonText

package/src/components/display/emission/EmissionItem.vue

@@ -133,5 +133,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-<style lang="scss"></style>
+</script>

package/src/components/display/emission/EmissionList.vue

@@ -41,7 +41,7 @@
       <button
         v-show="!allFetched"
         class="btn"
-        :class="buttonPlus ? 'btn-link-plus' : 'btn-more'"
+        :class="buttonPlus ? 'btn-link  m-4' : 'btn-more'"
         :disabled="loading"
         :title="$t('See more')"
         @click="fetchContent(false)"
@@ -49,7 +49,10 @@
         <template v-if="buttonPlus">
           {{ $t('See more') }}
         </template>
-        <div class="saooti-plus" />
+        <div
+          :class="buttonPlus?'ms-1':''"
+          class="saooti-plus"
+        />
       </button>
     </template>
   </div>

package/src/components/display/filter/AdvancedSearch.vue

@@ -15,7 +15,7 @@
       class="advanced-search-container"
     >
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2">
+        <div class="primary-darker mb-2">
           {{ $t('Filter') }}
         </div>
         <MonetizableFilter
@@ -111,7 +111,7 @@
         </div>
       </div>
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2">
+        <div class="primary-darker mb-2">
           {{ $t('Sort') }}
         </div>
         <ClassicRadio

package/src/components/display/filter/CategoryFilter.vue

@@ -112,5 +112,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss"></style>

package/src/components/display/filter/MonetizableFilter.vue

@@ -7,7 +7,7 @@
       <select
         ref="select"
         v-model="monetization"
-        class="ms-2 mb-0 c-hand"
+        class="ms-2 mb-0 pe-4 c-hand"
         @change="onChange"
       >
         <option
@@ -48,6 +48,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/filter/ProductorSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-items-center">
+  <div class="d-flex align-items-center my-3">
     <div
       v-if="!isPodcastmaker && !filterOrga"
       class="filter-organisation-chooser"
@@ -146,7 +146,7 @@ export default defineComponent({
 
 .filter-speech-bubble {
   position: absolute;
-  background: $octopus-primary-color;
+  background: $octopus-primary-dark;
   border-radius: 0.4em;
   width: 10rem;
   right: 4rem;
@@ -165,7 +165,7 @@ export default defineComponent({
   width: 0;
   height: 0;
   border: 18px solid transparent;
-  border-left-color: $octopus-primary-color;
+  border-left-color: $octopus-primary-dark;
   border-right: 0;
   border-bottom: 0;
   margin-top: -9px;

package/src/components/display/filter/RubriqueChoice.vue

@@ -97,6 +97,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/filter/RubriqueFilter.vue

@@ -235,6 +235,4 @@ export default defineComponent({
     }
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/live/CountDown.vue

@@ -67,6 +67,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/live/LiveHorizontalList.vue

@@ -16,7 +16,7 @@
     <button
       v-show="!allFetched"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link m-4 mt-3' : 'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"
@@ -24,7 +24,10 @@
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>
@@ -111,6 +114,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/organisation/OrganisationChooser.vue

@@ -272,6 +272,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/playlist/PlaylistItem.vue

@@ -59,7 +59,7 @@
         }"
         class="text-dark"
       >
-        <div class="emission-producer primary-color">
+        <div class="emission-producer primary-darker">
           © {{ playlist.organisation.name }}
         </div>
       </router-link>
@@ -137,6 +137,4 @@ export default defineComponent({
   },
   methods: {},
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/playlist/PlaylistList.vue

@@ -19,7 +19,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
+      :class="buttonPlus ? 'btn-link  m-4':'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"
@@ -27,7 +27,10 @@
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>
@@ -140,6 +143,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/playlist/PodcastList.vue

@@ -40,14 +40,17 @@
     <button
       v-show="size < podcasts.length && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
+      :class="buttonPlus ? 'btn-link  m-4':'btn-more'"
       :title="$t('See more')"
       @click="displayMore"
     >
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>

package/src/components/display/podcasts/ParticipantDescription.vue

@@ -90,6 +90,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/podcasts/PodcastFilterList.vue

@@ -96,6 +96,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/podcasts/PodcastInlineList.vue

@@ -26,7 +26,7 @@
         class="hide-phone"
       >
         <button
-          class="btn btn-arrow"
+          class="btn admin-button m-1"
           :class="{ disabled: !previousAvailable }"
           :title="$t('Display previous')"
           @click="displayPrevious()"
@@ -34,7 +34,7 @@
           <div class="saooti-arrow-left2" />
         </button>
         <button
-          class="btn btn-arrow"
+          class="btn admin-button m-1"
           :class="{ disabled: !nextAvailable }"
           :title="$t('Display next')"
           @click="displayNext()"
@@ -62,14 +62,13 @@
       />
     </transition-group>
     <router-link
-      class="btn btn-link"
-      :class="buttonPlus ? 'btn-link-plus' : ''"
+      class="btn btn-link m-4"
       :to="refTo"
     >
       {{ buttonText }}
       <div
         v-if="buttonPlus"
-        class="saooti-plus"
+        class="ms-1 saooti-plus"
       />
     </router-link>
   </div>
@@ -279,6 +278,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/podcasts/PodcastList.vue

@@ -23,7 +23,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link  m-4' : 'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"
@@ -31,7 +31,10 @@
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>
@@ -201,6 +204,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -281,6 +281,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/podcasts/TagList.vue

@@ -1,8 +1,11 @@
 <template>
   <div
-    v-if="undefined !== tagList"
-    class="tag-list-component d-flex flex-wrap"
+    v-if="undefined !== tagList && 0!==tagList.length"
+    class="tag-list-component d-flex align-items-center flex-wrap"
   >
+    <div class="fw-bold">
+      {{ $t('Podcast tags') + ": " }}
+    </div>
     <div
       v-for="(tag, index) in tagList"
       :key="tag"

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -243,6 +243,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/rubriques/RubriqueList.vue

@@ -20,7 +20,7 @@
         v-for="rubrique in rubriqueDisplay"
         :id="'rubrique' + rubrique.rubriqueId"
         :key="rubrique.rubriqueId"
-        class="rubrique-item"
+        class="rubrique-item bg-white"
         @click="addFilter(rubrique)"
       >
         {{ rubrique.name }}
@@ -31,7 +31,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle category-rubrique-item-plus dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"
@@ -205,7 +205,7 @@ export default defineComponent({
   white-space: nowrap;
   flex-shrink: 0;
   &:hover {
-    background: #ddd !important;
+    background: #eee !important;
   }
 }
 </style>

package/src/components/display/sharing/QrCode.vue

@@ -77,6 +77,4 @@ export default defineComponent({
     },
   }
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/sharing/ShareDistribution.vue

@@ -3,11 +3,11 @@
     <h3>{{ $t('Distribute') }}</h3>
     <p class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
-      <span class="primary-color text-break">{{ rss }}</span>
+      <span class="primary-darker hide-small-screen text-break">{{ rss }}</span>
       <input
         type="button"
         :value="$t('Copy')"
-        class="btn btn-primary"
+        class="btn btn-link"
         :title="$t('Copy')"
         @click="onCopyCode(rss, afterCopy)"
       >
@@ -192,10 +192,5 @@ export default defineComponent({
     flex-wrap: wrap;
     margin: 0.2rem 0.5rem;
   }
-  @media (max-width: 450px) {
-    .primary-color {
-      display: none;
-    }
-  }
 }
 </style>

package/src/components/display/sharing/SharePlayer.vue

@@ -366,10 +366,11 @@ export default defineComponent({
 @import '../../../sass/_variables.scss';
 .sticker {
   align-self: center;
-  background: rgba($octopus-primary-color, 0.3);
+  background: $octopus-primary-dark;
   padding: 0.5rem;
   transition: all 0.5s ease;
-  color: #41403e;
+  color: white;
+  font-weight: bold;
   letter-spacing: 1px;
   outline: none;
   box-shadow: 10px 10px 34px -15px hsla(0, 0%, 0%, 0.4);
@@ -377,6 +378,8 @@ export default defineComponent({
   border: solid 2px #41403e;
   &:hover {
     box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
+    background: transparent;
+    color: $octopus-primary-dark;
   }
 }
 .max-iframe {

package/src/components/display/sharing/SubscribeButtons.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="module-box flex-grow-0">
-    <div class="d-flex align-items-center mb-3">
-      <h3 class="mb-0">
-        {{ $t('Subscribe emission') }}
-      </h3>
-    </div>
+    <h3 class="mb-3">
+      {{ $t('Subscribe emission') }}
+    </h3>
     <div class="d-flex flex-wrap">
       <a
         v-if="amazon"

package/src/components/display/studio/RecordingItemButton.vue

@@ -5,6 +5,4 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({})
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/form/ClassicSearch.vue

@@ -60,23 +60,25 @@ export default defineComponent({
 	}
 });
 </script>
-<style lang="scss" scoped>
-.champs-searchPage input {
-  border: 2px solid #dee2e6;
-  border-radius: 10px;
-  margin: 0 !important;
-}
-.saooti-search-bounty,
-.saooti-cross {
-  font-size: 1rem;
-}
-.search-icon-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  margin: 1rem;
-}
+<style lang="scss">
+.champs-searchPage{
+  input {
+    border: 2px solid #dee2e6;
+    border-radius: 10px;
+    margin: 0 !important;
+  }
+  .saooti-search-bounty,
+  .saooti-cross {
+    font-size: 1rem;
+  }
+  .search-icon-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    margin: 1rem;
+  }
+} 
 </style>

package/src/components/misc/TopBar.vue

@@ -101,7 +101,7 @@
     </div>
     <div class="d-flex flex-column">
       <div class="hosted-by">
-        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
+        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-darker">Saooti</span>
       </div>
       <div class="d-flex justify-content-end flex-nowrap">
         <HomeDropdown :is-education="isEducation" />

package/src/components/misc/modal/ClipboardModal.vue

@@ -21,7 +21,7 @@
             <input
               type="button"
               :value="$t('Copy')"
-              class="btn btn-primary"
+              class="btn btn-link"
               :title="$t('Copy')"
               @click="onCopyCode(link, afterCopy)"
             >

package/src/components/misc/modal/MessageModal.vue

@@ -32,20 +32,20 @@
         >
           <button
             v-if="canceltext"
-            class="btn btn-light m-1"
+            class="btn m-1"
             @click="onCancel"
           >
             {{ canceltext }}
           </button>
           <button
             v-if="thirdText"
-            class="btn btn-primary m-1"
+            class="btn btn-link m-1"
             @click="onThirdAction"
           >
             {{ thirdText }}
           </button>
           <button
-            class="btn btn-primary m-1"
+            class="btn btn-link m-1"
             @click="onValid"
           >
             {{ validatetext }}
@@ -86,6 +86,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/misc/modal/NewsletterModal.vue

@@ -71,7 +71,7 @@
           </div>
           <div class="modal-footer">
             <button
-              class="btn btn-primary m-1"
+              class="btn btn-link m-1"
               @click="closePopup"
             >
               {{ $t('Close') }}

package/src/components/misc/modal/QrCodeModal.vue

@@ -22,7 +22,7 @@
         </div>
         <div class="modal-footer">
           <button
-            class="btn btn-primary m-1"
+            class="btn btn-link m-1"
             @click="closePopup"
           >
             {{ $t('Close') }}
@@ -84,6 +84,4 @@ export default defineComponent({
     },
   }
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -75,7 +75,7 @@
           </div>
           <div class="modal-footer">
             <button
-              class="btn btn-primary m-1"
+              class="btn btn-link m-1"
               @click="closePopup"
             >
               {{ $t('Close') }}

package/src/components/pages/Playlists.vue

@@ -4,7 +4,7 @@
     <router-link
       v-if="editRight && !isPodcastmaker"
       to="/main/priv/edit/playlist"
-      class="d-flex justify-content-center"
+      class="d-flex justify-content-center my-3"
     >
       <button class="btn btn-primary">
         {{ $t('Create playlist') }}

package/src/components/pages/Rubrique.vue

@@ -49,6 +49,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/locale/en.ts

@@ -296,4 +296,5 @@ export default{
   "Download started": 'Download started',
   'From RSS': "From an RSS feed",
   "User menu":"User menu",
+  'Podcast tags': 'Podcast tags',
 };

package/src/locale/fr.ts

@@ -296,4 +296,5 @@ export default{
   "Download started": 'Téléchargement lancé',
   'From RSS': "Issu d'un flux RSS",
   "User menu":"Menu utilisateur",
+  'Podcast tags': "Mot-clé de l'épisode",
 };

package/src/sass/_variables.scss

@@ -5,7 +5,7 @@ $body-bg: #f8fafc;
 $font-family-sans-serif: 'Roboto', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
-$primary: #40a372;
+$primary: #32815C;
 
 // Colors
 $blue: #3490dc;
@@ -20,13 +20,16 @@ $teal: #4dc0b5;
 $cyan: #6cb2eb;
 
 //Octopus style
-$octopus-background: #f3f3f3;
-$octopus-secondary-background: #fafafa;
+$octopus-background: #fafafa;
 $octopus-primary-color: #40a372;
 $octopus-secondary-color : #ddd;
-$octopus-light-secondary-color: #eee;
-$octopus-third-color: rgba(214,217,31,1);
-$octopus-primary-dark : #48a879;
-$primaryColorReallyTransparent : #a2f3c993;
+$octopus-primary-linear-background: #7fd8ab;
+$octopus-third-color: #fdff7b;
+$octopus-primary-dark : #32815C;
+$primaryColorReallyTransparent : #05050593;
+
+$primaryColorTransparent : #40a37193;
+$primaryColorMoreTransparent : #40a37154;
+$primaryColorReallyTransparent : #cef7e250;