new header css

This commit is contained in:
2025-09-22 15:07:45 +02:00
parent dbccbadbfb
commit 4db57ba2dc
5 changed files with 327 additions and 251 deletions
+141 -108
View File
@@ -6285,20 +6285,16 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
box-shadow: 1px 0px 8px rgb(0, 0, 0);
display: flex;
flex-direction: row;
justify-content: space-between;
color: rgb(0, 0, 0);
top: 0%;
scroll-margin: 8rem;
}
#header-top .region-header-top-left {
width: 80vw;
display: flex;
flex-direction: row;
padding: 1rem;
padding-left: 4%;
align-items: center;
color: rgb(0, 0, 0);
font-weight: 800;
flex: 1;
}
#header-top .region-header-top-left #block-logogouv {
@@ -6307,7 +6303,7 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
align-items: center;
}
#header-top .region-header-top-left #block-logogouv img {
width: 80%;
width: 100%;
height: auto;
}
#header-top .region-header-top-left #block-logoeql {
@@ -6316,73 +6312,93 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
align-items: center;
}
#header-top .region-header-top-left #block-logoeql img {
width: 80%;
width: 100%;
height: auto;
}
#header-top .region-header-top-left #block-headermenu {
align-self: baseline;
width: 70%;
margin-left: 3rem;
margin-right: 3rem;
}
#header-top .region-header-top-left ul {
font-size: 1rem;
list-style: none;
#header-top .region-header-top-rigth {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-inline-start: 0px;
padding: 1rem;
width: 40%;
align-items: center;
}
#header-top .region-header-top-left ul .is-active {
#header-top .region-header-top-rigth #block-eql-identitedusite {
text-transform: uppercase;
font-family: "Source Code Pro";
color: rgb(9, 57, 139) !important;
font-size: 1.2rem;
}
#header-top .region-header-top-rigth #block-eql-identitedusite :visited {
color: rgb(9, 57, 139) !important;
}
#header-top .region-header-top-rigth #block-eql-identitedusite :link {
color: rgb(9, 57, 139) !important;
}
#header-top .region-header-top-rigth #block-logoeql {
padding-left: 1rem;
padding-right: 2.5rem;
}
#header-top .region-header-top-rigth #block-logoeql img {
width: 80px;
height: auto;
}
#header-top .region-header-top-rigth #block-burger {
z-index: 1;
background-color: rgb(0, 158, 227);
font-size: 0.7rem;
color: black;
display: block;
width: 7rem;
height: 100%;
margin-top: 0;
aspect-ratio: 1;
}
#header-top .region-header-top-rigth #block-burger :hover {
cursor: pointer;
}
#header-top .region-header-top-rigth #block-burger h2 {
padding-top: 1rem;
font-size: 1em;
font-weight: light;
color: rgb(0, 158, 227);
}
#header-top .region-header-top-left ul ul {
position: absolute;
left: -28%;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 210px;
width: fit-content;
justify-content: space-between;
padding-inline-start: 0px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
#header-top .region-header-top-rigth #block-burger h2:after {
display: block;
margin: auto;
height: 70px;
content: url('data:image/svg+xml,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/></svg>');
}
#header-top .region-header-top-left ul ul .is-active {
color: rgb(0, 158, 227);
#header-top .region-header-top-rigth #block-burger #block-burger-menu {
display: block;
margin: 0;
align-self: center;
text-align: center;
}
#header-top .region-header-top-left ul li {
#header-top .region-header-top-rigth #block-burger .ul1:not(.sous-liste) {
width: 300%;
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
padding-bottom: 0.8rem;
max-width: inherit;
padding-left: 1rem;
padding-right: 0.5rem;
height: fit-content;
right: 260px;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;
z-index: 99;
}
#header-top .region-header-top-left ul li a {
color: rgb(0, 0, 0);
#header-top .region-header-top-rigth #block-burger ul {
display: none;
background-color: rgb(0, 158, 227);
line-height: 2rem;
list-style: none;
}
#header-top .region-header-top-left ul li .is-active {
color: rgb(0, 158, 227);
}
#header-top .region-header-top-left ul li :hover {
color: rgb(0, 158, 227);
}
#header-top .region-header-top-left ul li:hover ul {
#header-top .region-header-top-rigth #block-burger ul .ul1 .sous-liste a {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#header-top .region-header-top-left ul .ul1.sous-liste.ul2 {
padding-left: 1rem;
#header-top .region-header-top-rigth #block-burger ul a {
opacity: 1;
color: rgb(255, 255, 255);
font-weight: 800;
font-size: 1rem;
}
#header-top .region-header-top-rigth #block-burger.opened ul {
display: block;
}
#header-top #block-socialnetwork-2 {
display: none;
@@ -6445,60 +6461,77 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
min-width: 35px;
padding-bottom: 0.2rem;
}
#header-top #block-burger {
z-index: 1;
background-color: rgb(0, 158, 227);
font-size: 0.7rem;
color: rgb(255, 255, 255);
display: block;
width: 7rem;
height: 100%;
margin-top: 0;
.region-header-bottom {
box-shadow: 0 4px 4px 3px rgba(0, 0, 0, 0.1);
}
#header-top #block-burger :hover {
cursor: pointer;
.region-header-bottom #block-headermenu {
align-self: baseline;
width: 100%;
background-color: white;
border-top: solid rgb(0, 158, 227) 1px;
}
#header-top #block-burger h2 {
padding-top: 1rem;
}
#header-top #block-burger h2:after {
display: block;
margin: auto;
height: 70px;
content: url('data:image/svg+xml,<svg width="70" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/></svg>');
}
#header-top #block-burger #block-burger-menu {
display: block;
margin: 0;
align-self: center;
text-align: center;
}
#header-top #block-burger .ul1:not(.sous-liste) {
width: 300%;
position: relative;
right: 260px;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;
z-index: 99;
}
#header-top #block-burger ul {
display: none;
background-color: rgb(0, 158, 227);
line-height: 2rem;
list-style: none;
}
#header-top #block-burger ul .ul1 .sous-liste a {
opacity: 1;
}
#header-top #block-burger ul a {
opacity: 1;
color: rgb(255, 255, 255);
font-weight: 800;
.region-header-bottom ul {
font-size: 1rem;
font-weight: 900;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
padding-inline-start: 0px;
padding: 1rem;
margin-top: 0 !important;
padding-bottom: 0.5rem;
}
#header-top #block-burger.opened ul {
display: block;
.region-header-bottom ul .is-active {
color: rgb(0, 158, 227);
}
.region-header-bottom ul ul {
position: absolute;
left: -28%;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 210px;
width: fit-content;
justify-content: space-between;
padding-inline-start: 0px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.region-header-bottom ul ul .is-active {
color: rgb(0, 158, 227);
}
.region-header-bottom ul li {
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
padding-bottom: 0.8rem;
max-width: inherit;
padding-left: 1rem;
padding-right: 0.5rem;
height: fit-content;
}
.region-header-bottom ul li a {
color: rgb(0, 0, 0);
}
.region-header-bottom ul li .is-active {
color: rgb(0, 158, 227);
}
.region-header-bottom ul li :hover {
color: rgb(0, 158, 227);
}
.region-header-bottom ul li:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.region-header-bottom ul .ul1.sous-liste.ul2 {
padding-left: 1rem;
}
#fotter-bottom {