From 0a7a6dfff5dca6551714485f16baeda1706ee030 Mon Sep 17 00:00:00 2001 From: HeleneCreusot Date: Wed, 21 Aug 2024 15:28:59 +0200 Subject: [PATCH] refactor(theme istex): maxZiseXl to class container + new structure refactor index refactor all css add istex-linkclass.css --- .../themes/istex/css/istex-internalclass.css | 335 +++++++++------ .../themes/istex/css/istex-linksclass.css | 210 ++++++++++ src/app/custom/themes/istex/css/istex.css | 394 ++++++------------ src/app/custom/themes/istex/index.ejs | 12 +- 4 files changed, 556 insertions(+), 395 deletions(-) create mode 100644 src/app/custom/themes/istex/css/istex-linksclass.css diff --git a/src/app/custom/themes/istex/css/istex-internalclass.css b/src/app/custom/themes/istex/css/istex-internalclass.css index 6788a8d56..65fa74034 100644 --- a/src/app/custom/themes/istex/css/istex-internalclass.css +++ b/src/app/custom/themes/istex/css/istex-internalclass.css @@ -1,128 +1,154 @@ -/* boutons */ -.design-bouton-primaire, -.design-bouton-secondaire, -.design-bouton-ombre { - width: max-content; -} -.designCta2 .property_value_container button:hover, -.designCta2 .property_value_container button:focus, -.button.cta2:hover, -.button.cta2:focus { - color: var(--primary-main) !important; - background-color: var(--contrast-light); -} /***************************/ -/*.designHomeContentSidebar */ +/*div[class*='HomeContentSidebar'] */ /* fond blanc casse + decor */ -.designHomeContentSidebar { +div[class*='HomeContentSidebar'] { background-color: var(--neutral-dark-very-light); background-image: url('../img/svgfond.svg'); background-repeat: repeat-x; background-position: bottom center; - margin: 0 auto !important; - margin-bottom: 0 !important; padding: 0 !important; width: 100% !important; } /*s'il est en fin de home*/ .dataset-characteristics > div - > div.property.designHomeContentSidebar:not(:last-child) { - margin-bottom: 3rem !important; + > div.property[class*='HomeContentSidebar']:last-child { + margin-bottom: 0rem !important; } -.designHomeContentSidebar .MuiBox-root.css-oa9bdm { +div[class*='HomeContentSidebar'] .MuiBox-root.css-oa9bdm { padding: 0 !important; } -/*.designHomeContentSidebar : champs composant*/ -.designHomeContentSidebar - > .property_value_container - > div.MuiBox-root - > div - > div { - gap: 64px; -} -/*.designHomeContentSidebar : champs composant*/ -.designHomeContentSidebar - > .property_value_container - > div.MuiBox-root - > div - > div, -.designHomeContent .property_value_container > div.MuiBox-root > div > div, -.designHomeSidebar .property_value_container > div.MuiBox-root > div > div { - padding-left: 0 !important; - margin-left: 0 !important; - border-left: 0px !important; - gap: 4%; -} -/*Home .designHomeContent et*/ -/*Home .designHomeSidebar*/ -.designHomeContentSidebar .designHomeContent, -.designHomeSidebar { +/*Home div[class*='HomeContent'] et*/ +/*Home div[class*='HomeSidebar']*/ +div[class*='HomeContentSidebar'] div[class*='designHomeContent'], +div[class*='HomeSidebar'] { width: auto !important; margin-bottom: 0 !important; - padding: 10rem 0; - min-height: 20rem; + padding: 3rem 1rem 6rem; display: flex; flex-direction: column; justify-content: center; } /*Home texte principal*/ -/* .designHomeContent*/ -.designHomeContent { +/* div[class*='HomeContent']*/ +div[class*='HomeContentSidebar'] div[class*='HomeContent'] { flex: 2; background-color: transparent !important; - padding-left: inherit 20px 70px 20px; + /*padding: 0 20px 70px 20px;*/ } /*contents home label = titre as h2*/ -.designHomeContent span.property_label[style*='color: rgb(158, 158, 158)'] { - font-size: 2.8rem !important; +/*a eviter car probleme indexation par robots cause pas de semantique html*/ +/*.dataset-characteristics + div + span.property_label[style*='color: rgb(158, 158, 158)']:not(:empty) { + font-size: 2rem !important; line-height: 3.4rem; font-weight: 700 !important; color: var(--text-main) !important; padding: 3rem 0 20px; -} +}*/ /*sauf le premier titre*/ -.designHomeContent +/*div[class*='HomeContent'] > div.property_label_container span.property_label[style*='color: rgb(158, 158, 158)'] { font-size: 2.8rem !important; - line-height: 3.4rem; - font-weight: 700 !important; - color: var(--text-main) !important; padding: 0 0 3rem; } -.designHomeContent span.property_label:empty { +span.property_label:empty { padding: 0; +}*/ +/********************/ +/* home ou resource */ +/* liste en pave */ +/********************/ +[class*='ListePave'] div.property_value_container:first-child { + padding: 0 !important; } -/*home syndication elements*/ -.designHomeContent li.resources-grid-item { - width: 48%; - background-color: var(--contrast-light); - position: relative; +.body [class*='ListePave'] :is(ul, li) { + padding: 0; + margin: 0; } -.designHomeContent .resources-grid-content { - background-color: var(--contrast-light) !important; - padding: 0 !important; +.body [class*='ListePave'] ul { + display: flex; + flex-wrap: wrap; + gap: 12px; +} +/*avec liste syndication*/ +div.property_value_container li[class*='item'], +[class*='ListePave'] div.property_value_container li div { + background: transparent; + box-shadow: none; + border: 0px; + width: auto; +} +[class*='ListePave'] div.property_value_container li div[class*='wrapper'] { + padding: 0rem; +} +[class*='ListePave'] li a { + display: block; + width: 325px; + min-height: 80px; + padding: 1.3rem; + background-color: var(--primary-light); + border: 1px solid var(--primary-main); + border-radius: 4px; } -.designHomeContent .resources-grid-content > div > a > div { - margin: 2rem; - height: 80px; - background: var(--contrast-light) url('../img/fleched.svg') no-repeat bottom - 0rem right 1rem; +[class*='ListePave'] li a > div { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; } -.designHomeContent - .resources-grid-content - > div - > a - .lodex-resource-contentTitle { - font-size: 1.6rem; - line-height: 2rem; +/* titre du bloc toutes liste */ +[class*='ListePave'] a div[class*='contentTitle'] { + flex: 1; + font-family: var(--font-titre); + color: var(--primary-main); font-weight: 700; - padding-bottom: 1rem; + font-size: 1.6rem; } - -/*ISTEX design sidebar*/ -.designHomeSidebar { +/*liste pave dans designHomeContent*/ +div[class*='HomeContentSidebar'] + div[class*='designHomeContent'] + /* [class*='ListePave']*/ + li + a { + background-color: var(--contrast-light); + border-color: var(--contrast-light); +} +div[class*='HomeContentSidebar'] + div[class*='designHomeContent'] + /* [class*='ListePave']*/ + div.property_value_container + li + a + > div { + display: flex; + flex-direction: column; + gap: 0 2px; +} +div[class*='HomeContentSidebar'] + div[class*='designHomeContent'] + /* [class*='ListePave']*/ + a + div[class*='contentTitle'] { + background: var(--contrast-light) url('../img/fleched.svg') no-repeat center + right 1.3rem; +} +div[class*='HomeContentSidebar'] + div[class*='designHomeContent'] + /* [class*='ListePave']*/ + div.property_value_container + li + a + div[class*='contentParagraph'] { + flex: 2; +} +/******************/ +/* home ISTEX */ +/* design sidebar */ +/******************/ +div[class*='HomeSidebar'] { align-items: flex-start !important; background-color: var(--primary-main); padding: 3rem 3rem 1.5rem !important; @@ -131,42 +157,31 @@ max-width: 475px !important; flex: 1; } -/*.designHomeSidebar contrast color text*/ -.designHomeSidebar *:not(button, svg) { - color: var(--secondary-contrast-text) !important; - text-align: left; -} -/*.designHomeSidebar champs composant 1er niveau*/ -.designHomeSidebar > .property_value_container > div .property { +/*div[class*='HomeSidebar'] champs composant 1er niveau*/ +div[class*='HomeSidebar'] > .property_value_container > div .property { margin-bottom: 1.5rem; } /*espace titre-texte*/ -.designHomeSidebar > .property_value_container > div .property .MuiBox-root { +div[class*='HomeSidebar'] + > .property_value_container + > div + .property + .MuiBox-root { padding: 0 !important; } -.designHomeSidebar > .property_value_container > div .property p { +div[class*='HomeSidebar'] > .property_value_container > div .property p { padding: 0 !important; margin: 0 !important; } -/*a avec url en texte*/ -.designHomeSidebar > .property_value_container > div .property a { +/*texte en blanc*/ +div[class*='HomeSidebar'] *:not(a, button, svg, [class*='Bouton']) { color: var(--secondary-contrast-text) !important; - overflow-wrap: anywhere !important; - word-break: break-all !important; - hyphens: auto; -} -.designHomeSidebar - > .property_value_container - > div - .property - a[target='_blank']::after { - background: url('../img/lien-externe_blanc.svg') bottom right no-repeat; - background-size: 15px; + text-align: left; } -/*Home tools explorter bouton en savoir plus*/ -/*voir button*/ +/*Home tools explorter bouton en savoir plus et links sidebar see*/ +/*istex-linksclass.css*/ /*tools explorer compteur la phrase*/ -.designHomeCompteur .MuiBox-root div { +div[class*='HomeCompteur'] .MuiBox-root div { display: inline !important; margin: 0 !important; padding: 0 !important; @@ -175,7 +190,7 @@ text-align: left; } /*compteur nb outils .numberStroke*/ -.designHomeCompteur div.content { +div[class*='HomeCompteur'] div.content { font-family: var(--font-titre) !important; font-size: 5rem !important; font-weight: 700 !important; @@ -186,7 +201,7 @@ padding-left: 5px; } /*tools explorer img licence*/ -.dataset-characteristics .designHomeSidebar img:last-child { +.dataset-characteristics div[class*='HomeSidebar'] img:last-child { filter: opacity(90%); } /* tdm tools home*/ @@ -256,6 +271,68 @@ #backZoneContainer #backZoneTexte div#url a:hover { font-weight: bold; } +/*autre version */ + +/*************************/ +/* design Home bottom */ +/* full screen */ +/* content fond et promo */ +/*************************/ +/*istex home promo*/ +/* galaxieIstex */ + +/*istex home promo*/ +/* galaxieIstex */ +div[class*='designHomeGalaxieIstex'] { + width: 100vw !important; + background-image: url(../img/galaxie-istex-1.jpg); + background-image: url(../img/galaxie-istex.jpg); + background-image: url(../img/galaxie-istex-2.jpg); + background-position: center bottom; + background-size: cover; + background-repeat: no-repeat; + margin: 0 0 !important; +} +div[class*='designHomeGalaxieIstex'] div.MuiBox-root { + margin: 0 0 !important; + padding: 0 0 !important; +} +#design-home-galaxieIstex-container #design-home-galaxieIstex-texte { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5rem; + width: 100%; + height: 45rem; + max-width: var(--maxWidth); + margin: 0 auto; +} +#design-home-galaxieIstex-texte * { + color: var(--secondary-contrast-text); + margin: 0; +} +#design-home-galaxieIstex-texte span#surtitre { + display: block; + font-weight: 400; + font-family: var(--font-titre); + font-size: 2rem; + line-height: 4rem; +} +#design-home-galaxieIstex-texte h2 { + text-align: center !important; + color: #c4d733; + font-size: 4.3rem; + line-height: 5.3rem; +} +#design-home-galaxieIstex-texte div#texte { + font-size: 2rem; + line-height: 3rem; +} +#design-home-galaxieIstex-texte div#url a { + font-size: 1.6rem; + line-height: 2rem; +} /*****************/ /*page resource*/ /*ex: tools explorer website*/ @@ -275,77 +352,79 @@ justify-content: initial; padding: 0 !important; } -.designResourceCompose, -.main-resource-section .designHomeSidebar { +div[class*='ResourceCompose'], +.main-resource-section div[class*='HomeSidebar'] { padding: 1.5rem 3rem !important; } .resource - .designHomeSidebar + div[class*='HomeSidebar'] span.property_label[style*='color: rgb(158, 158, 158)'] { color: inherit !important; } /*champs composés*/ -.designResourceCompose { +div[class*='ResourceCompose'] { background-color: var(--primary-light); flex: 2.79; } /*titre*/ -.designResourceCompose .property_label_container { +div[class*='ResourceCompose'] .property_label_container { margin-top: 0rem !important; } -.designResourceCompose > .property_label_container span.property_label { +div[class*='ResourceCompose'] > .property_label_container span.property_label { color: var(--text-main) !important; font-size: 1.8rem !important; line-height: 2rem; font-weight: 600 !important; } -.designResourceCompose .property_value_container > div > div > div { +div[class*='ResourceCompose'] .property_value_container > div > div > div { margin-left: 0 !important; border-left: 0px !important; padding: 0 !important; background-color: var(--primary-light); } -.designResourceCompose div.property { +div[class*='ResourceCompose'] div.property { margin: 0rem auto; } -.designResourceCompose .property_value_container .property_value_container { +div[class*='ResourceCompose'] + .property_value_container + .property_value_container { background-color: var(--contrast-main); } -.designResourceCompose +div[class*='ResourceCompose'] .property_value_container .property_value_container > .MuiBox-root { margin: 0 !important; padding: 0 !important; } -.designResourceCompose ul, -.designResourceCompose ol { +div[class*='ResourceCompose'] ul, +div[class*='ResourceCompose'] ol { margin: 0 !important; padding: 8px; } -.designResourceCompose li { +div[class*='ResourceCompose'] li { display: inline-block; padding: 3px 8px !important; } -.designResourceCompose li p { +div[class*='ResourceCompose'] li p { padding: 0 !important; } -.designResourceCompose li:not(:last-child) > span::after { +div[class*='ResourceCompose'] li:not(:last-child) > span::after { content: ','; } -/*.designResourceCompose > .property_label_container span.property_label:empty { +/*div[class*='ResourceCompose'] > .property_label_container span.property_label:empty { display: none; }*/ -.designResourceCompose .property_value_container h2 { +div[class*='ResourceCompose'] .property_value_container h2 { margin-top: 0rem !important; } /*ref bib = .blocExergue*/ -.blocExergue { +div[class*='Exergue'] { box-shadow: 0px 0px 20px var(--neutral-main); padding: 3rem 5rem; margin: 5rem 0; } -.blocExergue p { +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 new file mode 100644 index 000000000..7b8641b23 --- /dev/null +++ b/src/app/custom/themes/istex/css/istex-linksclass.css @@ -0,0 +1,210 @@ +/* lien du content*/ +.body > div:last-child a { + text-decoration: underline; +} +/*a avec url comme texte*/ +.property div[class*="designHomeSidebar"] a.property_value { + overflow-wrap: anywhere !important; + word-break: break-all !important; + hyphens: auto; + width: inherit; +} +/*lien externe icone couleur position*/ +.property a:not(:empty)[target="_blank"] { + display: inline-flex; +} +.property a:not(:empty)[target="_blank"]::after { + filter: invert(55%) sepia(9%) saturate(2387%) hue-rotate(150deg) + brightness(88%) contrast(81%); + color: black; + display: inline-block; +} +/* link in text fond clair*/ +.property a { + color: var(--primary-main); + cursor: pointer; +} +.property a:is(:hover, :focus) { + color: var(--link-secondary); +} +.property a:active { + color: var(--link-dark); +} +/*link externe in text fond clair*/ +.property a:not(:empty, .property_value)[target="_blank"]::after { + content: url("../img/suivre-le-lien-nouvel-onglet.png"); + padding-left: 5px; +} +.property a:is(:hover, :focus):not(:empty)[target="_blank"]::after, +div[class*="Icon"] a:is(:hover, :focus)::after { + filter: invert(39%) sepia(60%) saturate(480%) hue-rotate(150deg) + brightness(90%) contrast(85%); + color: black; +} +.property a:active:not(:empty, .property_value)[target="_blank"]::after, +div[class*="Icon"] a:active::after { + filter: invert(24%) sepia(74%) saturate(509%) hue-rotate(150deg) + brightness(99%) contrast(88%); + color: black; +} +/*link in text fond sombre*/ +/*lien externe icon*/ +div[class*="HomeSidebar"] a { + color: var(--contrast-light); +} +div[class*="HomeSidebar"] a:is(:hover, :focus, :active) { + color: var(--contrast-main); +} +/*link externe in text fond sombre*/ +/*link externe icon */ +div[class*="HomeSidebar"] a:not(:empty)[target="_blank"]::after, +div[class*="HomeSidebar"] div[class*="Icon"] a::after { + filter: invert(88%) sepia(54%) saturate(7152%) hue-rotate(182deg) + brightness(124%) contrast(89%); + color: black; +} +div[class*="HomeSidebar"] + a:is(:hover, :focus, :active):not(:empty)[target="_blank"]::after, +div[class*="HomeSidebar"] + div[class*="Icon"] + a:is(:hover, :focus, :active)::after { + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(327deg) + brightness(107%) contrast(101%); + color: black; +} +/*linkIcon = bloc ? */ + +/************************/ +/* linkIcon & bouton */ +/************************/ +/* la forme */ +div[class*="LinkIcon"] a.property_value, +div[class*="Bouton"] a.property_value { + font-family: var(--font-texte); + font-size: 16px !important; + text-decoration: none !important; + text-transform: uppercase; + padding: 12px 0; + width: auto; + line-height: auto; + display: inline-flex; +} +div[class*="LinkIcon"] a.property_value { + font-weight: 700; + padding-right: 20px; +} +div[class*="Bouton"] a.property_value { + font-family: var(--font-texte); + border: 1px solid transparent; + border-radius: 8px; + cursor: pointer; + padding: 12px 20px; +} +div[class*="BoutonOmbre"] a.property_value { + border: none !important; + box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15); +} +/*avec Icon*/ +div[class*="Icon"] a.property_value { + display: inline-flex; + gap: 10px; + padding-right: 20px; + padding-left: 20px; +} +div[class*="Icon"] a.property_value::after { + color: black; +} +/*Icon fleche droite */ +div[class*="IconFlecheDroite"] a.property_value.link::after { + content: url("../img/fleche-petite-droite.png"); +} +/*Icon chevron droit*/ +div[class*="IconChevronDroit"] a.property_value::after { + content: url("../img/chevron-droit.png"); +} +/*couleurs + bordures fond clair*/ +/* couleurs */ +/*BoutonPrimaire*/ +div[class*="BoutonPrimaire"] a.property_value { + color: var(--contrast-light); + background-color: var(--primary-main) !important; +} +/* les autres */ +div[class*="Bouton"] a.property_value { + background-color: var(--contrast-light); +} +/*bordure : BoutonPrimaire Bouton secondaire*/ +div[class*="Bouton"] a.property_value { + border: 1px solid var(--primary-main) !important; +} +/*hover&focus&active Bouton*/ +div:is([class*="BoutonPrimaire"], [class*="BoutonSecondaire"]) + a.property_value:is(:hover, :focus) { + color: var(--contrast-main); + background-color: var(--link-secondary) !important; + border-color: var(--link-secondary) !important; +} +div[class*="BoutonOmbre"] a.property_value:is(:hover, :focus) { + background-color: var(--neutral-dark-very-light) !important; +} +/*tous les boutons actifs fond clair*/ +div[class*="Bouton"] a.property_value:active { + color: var(--contrast-main); + background-color: var(--link-dark) !important; + border-color: var(--link-dark) !important; +} +/*couleurs + bordures fond sombre*/ +/* couleurs */ +/*BoutonPrimaire*/ +div[class*="BoutonPrimaire"] a.property_value { + color: var(--primary-main); + background-color: var(--contrast-light); + border: 1px solid var(--contrast-light); +} +/* les autres */ +div[class*="HomeSidebar"] + div:is([class*="LinkIcon"], [class*="Bouton"]) + a.property_value { + background-color: transparent; +} +/*bordure : Bouton secondaire*/ +div[class*="HomeSidebar"] div[class*="BoutonSecondaire"] a.property_value { + border: 1px solid var(--contrast-light) !important; +} +/*hover&focus&active*/ +div[class*="BoutonPrimaire"] a:is(:hover, :focus).property_value { + color: var(--contrast-main) !important; + background-color: var(--link-secondary) !important; + border: 1px solid var(--link-secondary) !important; +} +div[class*="BoutonPrimaire"] a.property_value:active { + color: var(--contrast-main); + background-color: var(--link-dark) !important; + border: 1px solid var(--link-secondary) !important; +} +/*les autres*/ +div[class*="HomeSidebar"] + div[class*="BoutonSecondaire"] + a:is(:hover, :focus, :active).property_value { + border-color: var(--contrast-main); +} +/*********************/ +/*liste liens en pave*/ +/*********************/ +[class*="ListePave"] div.property_value_container a { + text-decoration: none; +} +/*home designHomeContent*/ +/*div[class*='HomeContentSidebar'] + div[class*='designHomeContent']*/ + +/**.designHomeContent + .resources-grid-content + > div + > a + .lodex-resource-contentTitle { + font-size: 1.6rem; + line-height: 2rem; + font-weight: 700; + padding-bottom: 1rem; +}*/ diff --git a/src/app/custom/themes/istex/css/istex.css b/src/app/custom/themes/istex/css/istex.css index 46cb15d05..a6083c2fd 100644 --- a/src/app/custom/themes/istex/css/istex.css +++ b/src/app/custom/themes/istex/css/istex.css @@ -1,4 +1,5 @@ @import 'istex-internalclass.css'; +@import 'istex-linksclass.css'; @font-face { font-family: 'Montserrat'; src: @@ -48,6 +49,11 @@ /*****************************/ /* General *******************/ /*****************************/ +*, +*::before, +*::after { + box-sizing: border-box; +} html { font-size: 62.5%; width: 100%; @@ -60,14 +66,9 @@ body { :root { --font-titre: Montserrat, Arial, Helvetica, sans-serif; --font-texte: Inter, Arial, Helvetica, sans-serif; + --maxWidth: 1700px; /* .css-19r6kue-MuiContainer-root 19.08.2024*/ } /*otdm2023.css pour header footer*/ -.zutile { - max-width: 1200px; - min-width: 360px; - padding: 0 10px; - margin: 0 auto; -} .flexrow { display: flex; flex-direction: row; @@ -163,14 +164,21 @@ header { color: var(--second-color); } .banner { - height: 150px; background: #fff url(../img/fondistex.png) center center; background-size: cover; - padding-top: 30px; color: #ffffff; } +.banner a { + display: flex; + flex-wrap: wrap; + padding: 10px 0; + align-items: flex-end; +} .banner img { margin-right: 10px; + width: max-content; + height: max-content; + align-self: center; } .banner h1.siteTitle { display: inline-block; @@ -181,14 +189,16 @@ header { font-size: 5rem; line-height: 6rem; font-weight: 400; + flex: 3; } .subTitle { + flex-wrap: wrap; font-family: var(--font-titre); font-size: 1.8rem; + width: 100%; } -.banner .zutile a, -.banner .zutile a:hover, -.banner .zutile a:visited { +.banner a, +.banner a:is(:hover, :focus, :active, :visited) { color: var(--contrast-light) !important; text-decoration: none; } @@ -223,18 +233,18 @@ footer.site-footer::after { background-color: transparent; text-decoration: none; } -.footer3 { +.footer3.container { justify-content: space-between; margin-top: 40px; } -.footer1 { +.footer1.container { font-family: var(--font-titre); font-weight: 500; justify-content: center; gap: 20px; margin-top: 30px; } -.footer4 { +.footer4.container { color: var(--neutral-dark-light); text-align: center; padding: 30px; @@ -243,44 +253,62 @@ footer.site-footer::after { width: 150px; height: auto; } -/*****************************/ -/* LODEX structure */ -/*.container #root .page-page*/ -/*****************************/ -#root .page-page { +/*********************/ +/* LODEX structure */ +/*Layout .container */ +/*********************/ +#root { min-height: 35vh; padding: 0 !important; -} -.body { font-family: var(--font-texte) !important; font-size: 1.4rem; color: var(--text-main); } -/********************/ -/* Layout (.zutile) */ -/********************/ -.breadcrumb-root, -nav.nav-bar-menu div.nav-bar-container, -/*home page istex*/ -.dataset-characteristics > div > div.property > div, -.graph-container, -.search-container, -.resource { - max-width: 1200px; +.container, +.container-fluid { + max-width: var(--maxWidth) !important; + min-width: 360px; + padding: 0 10px; + margin: 0 auto; +} +/*theme istex property full size*/ +#content > div.container { + width: 100%; + max-width: 100% !important; + padding: 0 0 !important; +} +#content > div.container div:is(.graph-page.graph-container, .resource) { + width: 100%; + max-width: var(--maxWidth) !important; min-width: 360px; - padding: 0 10px !important; + padding: 0 10px; + margin: 0 auto 4rem; +} +/*stucture pour home-page*/ +/*property_label_container*/ +/*property_value_container*/ +#content + #home-page + .dataset-characteristics + > div + > div.property + > div:is(.property_label_container, .property_value_container) { + max-width: var(--maxWidth) !important; + min-width: 360px; + width: 100%; + padding: 0 10px; margin: 0 auto; } /****************/ /*page connexion*/ /****************/ -.body > .MuiPaper-root { +#content > .MuiPaper-root { max-width: 1140px; margin: 2rem auto; padding: 1rem; } /*titre*/ -.body > .MuiPaper-root .MuiTypography-h5 { +#content > .MuiPaper-root .MuiTypography-h5 { font-family: var(--font-titre); font-size: 2.5rem !important; font-weight: 400; @@ -302,178 +330,79 @@ nav.nav-bar-menu div.nav-bar-container > img { /******************/ /*Lodex elements */ /*****************/ -.body h1, -.body h2, -.body h3, -.body h4, -.body h5, -.body h6 { +#content h1, +#content h2, +#content h3, +#content h4, +#content h5, +#content h6 { font-family: var(--font-titre) !important; margin-block-start: 0; color: var(--text-main); text-align: left !important; } -.body h1 { +#content h1 { font-size: 4.8rem; line-height: 4.8rem; font-weight: 700; } -.body h2 { +#content h2 { font-size: 2.8rem; line-height: 3rem; font-weight: 700; margin-block-end: 0.5em; } -.body h3 { +#content h3 { font-size: 2.2rem; line-height: 3rem; } -.body h4 { +#content h4 { font-size: 2rem; line-height: 2.8rem; font-style: italic; } -.body h5 { +#content h5 { font-size: 1.8rem; line-height: 2.6rem; font-style: italic; } -.body h6 { +#content h6 { margin-bottom: 10px; margin-top: 20px; font-size: 1.7rem; line-height: 2.4rem; font-style: italic; } -.body p, -.body li, -.body div, -.body span:not(.property_label, .detail) { +#content p, +#content li, +#content div, +#content span:not(.property_label, .detail) { font-family: var(--font-texte); font-size: 1.4rem; } a img { border: none; } -.body > div a:not(.graph-link), -.body > div a[target='_blank'] { - color: var(--primary-main); - cursor: pointer; -} -a:hover { - color: #31768f; - text-decoration: underline; -} -a:active, -a:focus { - color: #1a5a71 !important; - text-decoration: underline; -} -a desactive { - color: #cdcdcd; -} -.body > div a:not(:empty)[target='_blank']::after { - display: inline-block; - content: ' '; - width: 20px; - height: 17px; - margin-bottom: -4px; - background: url('../img/lien-externe.svg') bottom right no-repeat; - background-size: 15px; -} +/*links&alikebutton see*/ +/*istex-linksclass.css*/ + /*.body liste*/ .body ul, .body ol { margin-inline-start: 0px; margin-bottom: 10px; } -.body li { +#content li { text-align: left; padding-bottom: 1rem; } -.body li p { +#content li p { padding: 0 !important; text-align: initial !important; } -.body li p:first-of-type { +#content li p:first-of-type { margin: 0 !important; } -/******************************/ -/*.body button links a.button*/ -/******************************/ -button, -.button { - border: 0px solid transparent; - border-radius: 5px; - cursor: pointer; - padding: 15px 30px; - line-height: 18px; - font-size: 16px !important; - text-decoration: none; -} -/*fonce sur fond clair*/ -/*plus, parcourir résultats css-10ro12o css-xiqrbu*/ -.cta1, -a.cta1, -.button.cta1 > a { - color: var(--contrast-light); - background-color: var(--primary-main); -} -.cta1:hover, -.cta1:focus, -.button.cta1 > a:hover, -.button.cta1:hover > a, -.button.cta1 > a:focus, -.cta3:hover, -.cta3:focus, -.css-10ro12o:hover, -.css-10ro12o:focus, -.css-xiqrbu:hover, -.css-xiqrbu:focus { - background: var(--primary-secondary); -} -/*clair bordure sur fond clair*/ -.button.cta3 { - color: var(--primary-main); - background-color: transparent; - border: 1px solid var(--primary-main); - padding: 15px 30px; -} -.button.cta3:hover, -.button.cta3:focus { - color: var(--contrast-light); -} -/*clair bordure sur fond fonce*/ -.cta2, -.designCta2 .property_value_container button, -a.button.cta2, -.button.cta2 > a { - font-family: var(--font-texte); - color: var(--contrast-light); - background-color: transparent; - border: 1px solid var(--contrast-light); -} -.designCta2 .property_value_container button:hover, -.designCta2 .property_value_container button:focus, -.button.cta2:hover, -.button.cta2:focus { - color: var(--primary-main) !important; - background-color: var(--contrast-light); -} -/*clair bordure sur fond clair .cta3*/ -/*connexion*/ -/*button class = MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-qjrhga*/ -.body > .MuiPaper-root button { - color: var(--primary-main); - background-color: transparent; - border: 1px solid var(--primary-main); - padding: 15px 30px; -} -.body > .MuiPaper-root button:hover, -.body > .MuiPaper-root button:focus { - color: var(--contrast-light); - background: linear-gradient(to left, rgb(96, 157, 178), #458ca5); -} /***************/ /* formulaires */ /* color size */ @@ -489,6 +418,7 @@ a.button.cta2, * textarea { font-family: var(--font-texte) !important; font-size: 1.4rem !important; + text-align: left; } * input, * textarea { @@ -513,6 +443,8 @@ a.button.cta2, line-height: 2.9rem; font-weight: 550; } +/*bouton fermer x de modal lodex */ +/* MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root css-zuixs4-MuiButtonBase-root-MuiButton-root*/ .MuiPaper-root[role='dialog'] button svg { width: 2rem; height: 2rem; @@ -524,20 +456,32 @@ a.button.cta2, line-height: 1.93rem; font-weight: 550; } -/***************/ -/* LODEX class */ -/***************/ +/*****************/ +/* LODEX class & */ +/* composants */ +/*****************/ + /* champs*/ .property { margin-bottom: 1.5rem; } +.MuiBox-root.css-oa9bdm { + text-align: initial; +} +/*champs composé*/ +/*espace entre les property qui composent*/ +div.property div.MuiBox-root > div > * + div { + justify-content: space-between; + gap: 0%; +} /* label */ -span.property_label[style*='color: rgb(158, 158, 158)'] { +span.property_label[style*='color: rgb(158, 158, 158)']:not(:empty) { font-family: var(--font-titre) !important; font-size: 1.4rem !important; + text-align: initial; } /*label semantique*/ -.body span.property_scheme a { +#content span.property_scheme a { text-decoration: none; } /* ul istex */ @@ -558,110 +502,40 @@ span.property_label[style*='color: rgb(158, 158, 158)'] { .searchbar-container .MuiOutlinedInput-root fieldset:focus { border-color: var(--primary-main) !important; } -/***************************/ -/* design Home */ -/* .header-dataset-section */ -/***************************/ -/*marge si pas de breadcrumb-root*/ -.body div:last-child .dataset-characteristics > div:first-child { - margin-top: 3.5rem; -} -.breadcrumb-root ~ div:last-child .dataset-characteristics > div:first-child { - margin-top: 0 !important; -} -/*propulsé lodex zutile*/ -.header-dataset-section { - /*background-color: var(--primary-main); - background-position-y: 0; - background-size: 100% 50px;*/ - position: relative; - z-index: 2; - background: linear-gradient( - to top, - var(--primary-main) 40px, - transparent 1px, - transparent - ); -} -.header-dataset-section > div:last-child { - position: relative; - max-width: 1200px; - min-width: 360px; - margin: 0 auto; - padding: 10px 30px !important; +/*********************/ +/* version */ +/*********************/ +#version { background-color: var(--primary-main); - color: var(--contrast-light) !important; - text-align: right; } -.header-dataset-section > div:last-child a { +#version .container { + text-align: right; color: var(--contrast-light) !important; + /*enleve reserve pour nav*/ + padding: 10px 30px !important; } -.header-dataset-section > div:last-child b { - font-weight: bold !important; +#version .container a { + color: var(--contrast-light) !important; } -.header-dataset-section > div:last-child a:hover, -.header-dataset-section > div:last-child a:focus { +#version .container a:is(:hover, :focus, :active) { + color: var(--contrast-main); text-decoration: underline !important; } -/*home .property = bloc d'info*/ -.dataset-characteristics > div > div.property { - margin-bottom: 3rem; +#version .container strong { + font-weight: bold !important; } +/***********/ +/* /*************************/ /* design Home bottom */ /* full screen */ /* content fond et promo */ /*************************/ -/*istex home promo*/ -/* galaxieIstex */ -.designHomeGalaxieIstex { - background-color: var(--neutral-dark-very-light); -} -#design-home-galaxieIstex-container { - width: 100% !important; - background-image: url(../img/galaxie-istex-1.jpg); - background-image: url(../img/galaxie-istex.jpg); - background-image: url(../img/galaxie-istex-2.jpg); - background-position: center bottom; - background-size: cover; - background-repeat: no-repeat; -} -#design-home-galaxieIstex-container #design-home-galaxieIstex-texte { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 5rem; - width: 100%; - height: 45rem; - max-width: 1920px; - margin: 0 auto; -} -#design-home-galaxieIstex-texte * { - color: var(--secondary-contrast-text); - margin: 0; -} -#design-home-galaxieIstex-texte span#surtitre { - display: block; - font-weight: 400; - font-family: var(--font-titre); - font-size: 2rem; - line-height: 4rem; -} -#design-home-galaxieIstex-texte h2 { - text-align: center !important; - color: #c4d733; - font-size: 4.3rem; - line-height: 5.3rem; -} -#design-home-galaxieIstex-texte div#texte { - font-size: 2rem; - line-height: 3rem; -} -#design-home-galaxieIstex-texte div#url a { - font-size: 1.6rem; - line-height: 2rem; -} +/* #home-page { + position: relative; + left: 0; + width: 100vw; +} */ /*****************************/ /* .drawer .search-container */ /* .graph-container */ @@ -761,9 +635,9 @@ ul.MuiList-root.facets-list > li .facet-value-list svg { gap: 16px; } /*a.search-result-link*/ -.body .search-result-list-container a { +#content .search-result-list-container a { text-decoration: none; - flex: 1; + 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; @@ -772,7 +646,7 @@ ul.MuiList-root.facets-list > li .facet-value-list svg { background-color: var(--neutral-dark-very-light); display: flex; flex-direction: column; - min-width: 48%; + width: 48%; } /*.search-result-list-container a:hover, .search-result-list-container a:focus, @@ -787,13 +661,13 @@ ul.MuiList-root.facets-list > li .facet-value-list svg { border: 0px; background-color: transparent; } +.search-result-list-container a div.search-result-title { + font-family: var(--font-titre); +} +/*****************/ +/* page resource */ /*****************/ -/*page resource*/ /*general*/ -/*donnees en noir*/ -.resource .detail .property_value_container .property_value_container * { - color: var(--text-main); -} /*labels en noir et soulignes*/ .resource .property diff --git a/src/app/custom/themes/istex/index.ejs b/src/app/custom/themes/istex/index.ejs index 42d03401e..35ac9bacb 100644 --- a/src/app/custom/themes/istex/index.ejs +++ b/src/app/custom/themes/istex/index.ejs @@ -20,7 +20,7 @@
-
-
-