Merge pull request #2236 from Inist-CNRS/theme-Istex/ButtonShadow+com…

…posants/version-export-filariane-pagination button primary, secondary,button shadow for lodex composents
Inist-CNRS · Dec 4, 2024 · e1ee918 · e1ee918
2 parents ee1c488 + 614fe1c
commit e1ee918
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 32 deletions.
diff --git a/src/app/custom/themes/istex/css/istex-internalclass.css b/src/app/custom/themes/istex/css/istex-internalclass.css
@@ -367,6 +367,7 @@ div[class*='BanniereTexte'] .property_value_container h2 {
 div[class*='ResourceCompose'],
 .main-resource-section div[class*='HomeSidebar'] {
     padding: 1.5rem 3rem !important;
+    margin-bottom: 0 !important;
 }
 .resource
     div[class*='HomeSidebar']
@@ -435,7 +436,7 @@ div[class*='ResourceCompose'] .property_value_container h2 {
 div[class*='Exergue'] {
     box-shadow: 0px 0px 20px var(--neutral-main);
     padding: 3rem 5rem;
-    margin: 5rem 0;
+    margin: 3rem 0;
 }
 div[class*='Exergue'] p {
     margin: 0 auto 1.5rem;

diff --git a/src/app/custom/themes/istex/css/istex-linksclass.css b/src/app/custom/themes/istex/css/istex-linksclass.css
@@ -1,10 +1,15 @@
 :root {
     /* Couleur icône pour lien et bouton */
-    --filtreBleuMain: invert(55%) sepia(9%) saturate(2387%) hue-rotate(150deg) brightness(88%) contrast(81%);
-    --filtreBleuHoverFocus: invert(39%) sepia(60%) saturate(480%) hue-rotate(150deg) brightness(90%) contrast(85%);
-    --filtreBleuActive: invert(24%) sepia(74%) saturate(509%) hue-rotate(150deg) brightness(99%) contrast(88%);
-    --filtreBlancLight: invert(88%) sepia(54%) saturate(7152%) hue-rotate(182deg) brightness(124%) contrast(89%);
-    --filtreBlancMainHFA: invert(100%) sepia(100%) saturate(0%) hue-rotate(327deg) brightness(107%) contrast(101%);
+    --filtreBleuMain: invert(55%) sepia(9%) saturate(2387%) hue-rotate(150deg)
+        brightness(88%) contrast(81%);
+    --filtreBleuHoverFocus: invert(39%) sepia(60%) saturate(480%)
+        hue-rotate(150deg) brightness(90%) contrast(85%);
+    --filtreBleuActive: invert(24%) sepia(74%) saturate(509%) hue-rotate(150deg)
+        brightness(99%) contrast(88%);
+    --filtreBlancLight: invert(88%) sepia(54%) saturate(7152%)
+        hue-rotate(182deg) brightness(124%) contrast(89%);
+    --filtreBlancMainHFA: invert(100%) sepia(100%) saturate(0%)
+        hue-rotate(327deg) brightness(107%) contrast(101%);
 }
 
 /************************/
@@ -31,19 +36,33 @@
 }
 
 /* Lien externe = icône base noire filtre couleur position */
-.property a:not(:empty, div[class*='ButtonPrimary'] :is(button, a), div[class*='ButtonSecondary'] :is(button, a), div[class*='ButtonShadow'] :is(button, a))[target='_blank']::after {
+.property
+    a:not(
+        :empty,
+        div[class*='ButtonPrimary'] :is(button, a),
+        div[class*='ButtonSecondary'] :is(button, a),
+        div[class*='ButtonShadow'] :is(button, a)
+    )[target='_blank']::after {
     color: black;
     filter: var(--filtreBleuMain);
     display: inline-block;
     content: url('../img/suivre-le-lien-nouvel-onglet.png');
     padding-left: 5px;
 }
 
-div[class*='HomeSidebar'] .property a:not(:empty, div[class*='ButtonPrimary'] :is(button, a), div[class*='ButtonSecondary'] :is(button, a), div[class*='ButtonShadow'] :is(button, a))[target='_blank']::after {
+div[class*='HomeSidebar']
+    .property
+    a:not(
+        :empty,
+        div[class*='ButtonPrimary'] :is(button, a),
+        div[class*='ButtonSecondary'] :is(button, a),
+        div[class*='ButtonShadow'] :is(button, a)
+    )[target='_blank']::after {
     filter: var(--filtreBlancLight);
 }
 
-.property a:not(:empty, .property_value):is(:hover, :focus)[target='_blank']::after {
+.property
+    a:not(:empty, .property_value):is(:hover, :focus)[target='_blank']::after {
     color: black;
     filter: var(--filtreBleuHoverFocus);
 }
@@ -58,16 +77,23 @@ div[class*='HomeSidebar'] .property a:not(:empty, div[class*='ButtonPrimary'] :i
 div[class*='HomeSidebar'] a:not(:empty, .property_value) {
     color: var(--contrast-light);
 }
-div[class*='HomeSidebar'] a:not(:empty, .property_value):is(:hover, :focus, :active) {
+div[class*='HomeSidebar']
+    a:not(:empty, .property_value):is(:hover, :focus, :active) {
     color: var(--contrast-main);
 }
 
 /* Lien externe = icône base noire filtre couleur position */
-div[class*='HomeSidebar'] a:not(:empty, .property_value)[target='_blank']::after {
+div[class*='HomeSidebar']
+    a:not(:empty, .property_value)[target='_blank']::after {
     color: black;
     filter: var(--filtreBlancLight);
 }
-div[class*='HomeSidebar'] a:not(:empty, .property_value):is(:hover, :focus, :active)[target='_blank']::after {
+div[class*='HomeSidebar']
+    a:not(:empty, .property_value):is(
+        :hover,
+        :focus,
+        :active
+    )[target='_blank']::after {
     color: black;
     filter: var(--filtreBlancMainHFA);
 }
@@ -106,14 +132,19 @@ div[class*='Button'] div[class*='property_value'] :is(button, a) {
 }
 
 /* Bouton Primaire Sidebar lodex - MODAL */
-div[class*='HomeSidebar'] div[class*='ButtonPrimary'] div[class*='property_value'] :is(button,a){
+div[class*='HomeSidebar']
+    div[class*='ButtonPrimary']
+    div[class*='property_value']
+    :is(button, a) {
     background-color: var(--contrast-main) !important;
     color: var(--primary-main) !important;
     border: 1px solid transparent !important;
     box-shadow: 2px 2px 5px 0px #00000026;
 }
 
-div[class*='ButtonPrimary'] div[class*='property_value'] a, div[class*='ButtonSecondary'] div[class*='property_value'] a, div[class*='ButtonShadow'] div[class*='property_value'] a {
+div[class*='ButtonPrimary'] div[class*='property_value'] a,
+div[class*='ButtonSecondary'] div[class*='property_value'] a,
+div[class*='ButtonShadow'] div[class*='property_value'] a {
     display: inline-flex;
     -webkit-box-align: center;
     align-items: center;
@@ -126,80 +157,119 @@ div[class*='ButtonPrimary'] div[class*='property_value'] a, div[class*='ButtonSe
     font-size: 1.6rem !important;
 }
 
-div[class*='HomeSidebar'] div[class*='ButtonPrimary'] div[class*='property_value'] :is(button, a):is(:hover, :focus) {
+div[class*='HomeSidebar']
+    div[class*='ButtonPrimary']
+    div[class*='property_value']
+    :is(button, a):is(:hover, :focus) {
     background-color: var(--primary-secondary) !important;
     color: var(--contrast-main) !important;
 }
-div[class*='HomeSidebar'] div[class*='ButtonPrimary'] div[class*='property_value'] :is(button, a):is(:active) {
+div[class*='HomeSidebar']
+    div[class*='ButtonPrimary']
+    div[class*='property_value']
+    :is(button, a):is(:active) {
     background-color: var(--link-dark) !important;
     color: var(--contrast-main) !important;
 }
 
 /* Bouton Secondaire Sidebar lodex - MODAL */
-div[class*='HomeSidebar'] div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a) {
+div[class*='HomeSidebar']
+    div[class*='ButtonSecondary']
+    div[class*='property_value']
+    :is(button, a) {
     background-color: transparent !important;
     color: var(--contrast-main) !important;
     border: 1px solid var(--contrast-main) !important;
     box-shadow: none !important;
     text-decoration: none;
 }
-div[class*='HomeSidebar'] div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):is(:hover, :focus) {
+div[class*='HomeSidebar']
+    div[class*='ButtonSecondary']
+    div[class*='property_value']
+    :is(button, a):is(:hover, :focus) {
     background-color: var(--contrast-light) !important;
     color: var(--primary-main) !important;
     border: 1px solid transparent !important;
 }
-div[class*='HomeSidebar'] div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):is(:active) {
+div[class*='HomeSidebar']
+    div[class*='ButtonSecondary']
+    div[class*='property_value']
+    :is(button, a):is(:active) {
     background-color: var(--contrast-main) !important;
     color: var(--primary-main) !important;
 }
 
 /* Bouton Primaire lodex - MODAL */
-div[class*='ButtonPrimary'] div[class*='property_value'] :is(button, a):not([class*='HomeSidebar']) {
+div[class*='ButtonPrimary']
+    div[class*='property_value']
+    :is(button, a):not([class*='HomeSidebar']) {
     background-color: var(--primary-main) !important;
     color: var(--contrast-main) !important;
     border: 1px solid transparent !important;
     box-shadow: 2px 2px 5px 0px #00000026;
     text-decoration: none;
 }
-div[class*='ButtonPrimary'] div[class*='property_value'] :is(button, a):is(:hover, :focus):not([class*='HomeSidebar']) {
+div[class*='ButtonPrimary']
+    div[class*='property_value']
+    :is(button, a):is(:hover, :focus):not([class*='HomeSidebar']) {
     background-color: var(--primary-secondary) !important;
 }
-div[class*='ButtonPrimary'] div[class*='property_value'] :is(button, a):is(:active):not([class*='HomeSidebar']) {
+div[class*='ButtonPrimary']
+    div[class*='property_value']
+    :is(button, a):is(:active):not([class*='HomeSidebar']) {
     background-color: var(--link-dark) !important;
     color: var(--contrast-main) !important;
 }
 
 /* Bouton Secondaire lodex - MODAL */
-div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):not([class*='HomeSidebar']) {
+div[class*='ButtonSecondary']
+    div[class*='property_value']
+    :is(button, a):not([class*='HomeSidebar']) {
     background-color: transparent !important;
     color: var(--primary-main) !important;
     border: 1px solid var(--primary-main) !important;
     box-shadow: none !important;
     text-decoration: none;
 }
-div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):is(:hover, :focus):not([class*='HomeSidebar']) {
+div[class*='ButtonSecondary']
+    div[class*='property_value']
+    :is(button, a):is(:hover, :focus):not([class*='HomeSidebar']) {
     background-color: var(--primary-main) !important;
     color: var(--contrast-main) !important;
     border: 1px solid transparent !important;
 }
-div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):is(:active):not([class*='HomeSidebar']) {
+div[class*='ButtonSecondary']
+    div[class*='property_value']
+    :is(button, a):is(:active):not([class*='HomeSidebar']) {
     background-color: var(--link-dark) !important;
     color: var(--contrast-main) !important;
     border: 1px solid transparent !important;
 }
 
-/* Bouton Ombre lodex - MODAL */
-div[class*='ButtonShadow'] div[class*='property_value'] :is(button, a):not([class*='HomeSidebar']) {
+/* Bouton Ombre lodex - EXPORT - LANGUE */
+button[class*='css-m9dicq'] {
+    margin: 0 0.5rem;
+}
+buttonbutton:is([class*='css-w9y1zr'], [class*='css-m9dicq']),
+div[class*='ButtonShadow']
+    div[class*='property_value']
+    :is(button, a):not([class*='HomeSidebar']) {
     background-color: var(--contrast-main) !important;
     color: var(--primary-main) !important;
     border: 1px solid transparent !important;
     box-shadow: 2px 2px 5px 0px #00000026 !important;
     text-decoration: none;
 }
-div[class*='ButtonShadow'] div[class*='property_value'] :is(button, a):is(:hover, :focus):not([class*='HomeSidebar']) {
+button:is([class*='css-w9y1zr'], [class*='css-m9dicq']):is(:hover, :focus),
+div[class*='ButtonShadow']
+    div[class*='property_value']
+    :is(button, a):is(:hover, :focus):not([class*='HomeSidebar']) {
     background-color: var(--primary-very-light) !important;
 }
-div[class*='ButtonShadow'] div[class*='property_value'] :is(button, a):is(:active):not([class*='HomeSidebar']) {
+button:is([class*='css-w9y1zr'], [class*='css-m9dicq']):is(:active),
+div[class*='ButtonShadow']
+    div[class*='property_value']
+    :is(button, a):is(:active):not([class*='HomeSidebar']) {
     background-color: var(--link-dark) !important;
     color: var(--contrast-main) !important;
-}
+}
diff --git a/src/app/custom/themes/istex/css/istex.css b/src/app/custom/themes/istex/css/istex.css
@@ -655,7 +655,6 @@ ul.MuiList-root.facets-list > li .facet-value-list svg {
 /*a.search-result-link*/
 .search-result-list-container a {
     text-decoration: none;
-    flex: 1 0 325px;
     color: rgb(74, 74, 74);
     transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     border-radius: 5px;
@@ -765,7 +764,7 @@ ul.MuiList-root.facets-list > li .facet-value-list svg {
 }
 /*barre fonctionnelle*/
 .main-resource-section > div .MuiCardActions-root {
-    margin-top: 5rem;
+    margin-top: 1rem;
 }
 
 /*****************************/