-761 Removals
+309 Additions

Created by:phpboost

/* -------------------------------------- /* --------------------------------------
cssmenu.css cssmenu.css
Contient les elements associes aux menus Contient les elements associes aux menus
-----------------------------------------*/ -------------------------------------- */
/* --- Module-mini --- */
/* ------------------- */
.cssmenu-content .module-mini-contents {
padding: 0;
}
/* -- Classes multi niveau -- */
/* -------------------------- */
/* --- Classes generales cssmenu --- */ /* -- Classes generales cssmenu -- */
/* ------------------------------- */
.cssmenu { .cssmenu {
font-size: 0; font-size: 0;
} }
.cssmenu, .cssmenu,
.cssmenu ul, .cssmenu ul,
.cssmenu ul li, .cssmenu li {
.cssmenu ul li .cssmenu-title {
position: relative; position: relative;
margin: 0; margin: 0;
list-style: none; list-style: none;
line-height: 1; line-height: normal;
left: auto; left: auto;
}
.cssmenu { display: block; }
header .cssmenu { display: inline-block; }
@media (min-width: 769px) {
#sub-header-content .cssmenu {
height: 43px;
}
}
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul li .cssmenu-title {
display: block; display: block;
} }
.cssmenu:after, .cssmenu:after,
.cssmenu > ul:after { .cssmenu > ul:after {
display: block; display: block;
visibility: hidden; visibility: hidden;
height: 0; height: 0;
content: ""; content: "";
line-height: 0; line-height: 0;
clear: both; clear: both;
} }
.cssmenu-img { .cssmenu-img {
display: inline-block; display: none;
}
@media (max-width: 768px) {
.cssmenu > .cssmenu-img {
display: none;
}
.cssmenu-img {
padding: 0px 5px 0px 0px;
}
} }
@media (min-width: 769px) { @media (min-width: 769px) {
.cssmenu-img { .cssmenu-img {
padding: 10px 0 0 5px; display: inline-block;
vertical-align: top; margin-left: 1.309rem;
} }
}
.cssmenu-img-level-0 ~ ul.level-0 { .cssmenu .menu-with-img {
display: inline-block; display: inline-block;
}
.close {
left: -9999px !important;
height: 0;
overflow: hidden;
}
#menu-left .cssmenu { margin-right: -9px; }
#menu-right .cssmenu { margin-left: -9px; }
#menu-left .cssmenu.small-screen { margin-right: 0; }
#menu-right .cssmenu.small-screen { margin-left: 0; }
.cssmenu li:hover > .cssmenu-title {
text-decoration: none;
}
.cssmenu .cssmenu-title img {
margin: 0 5px 0 0;
vertical-align: bottom;
}
.cssmenu.small-screen {
width: 100%;
}
.cssmenu.small-screen ul {
display: block;
width: 100%;
}
.cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
.cssmenu.small-screen > ul > li:last-child.has-sub {
border-bottom: 1px solid rgba(120, 120, 120, 0.2);
}
.cssmenu.small-screen ul ul li,
.cssmenu.small-screen li:hover > ul > li {
height: auto;
}
.cssmenu.small-screen ul li .cssmenu-title,
.cssmenu.small-screen ul ul li .cssmenu-title {
padding: 17px;
width: 100%;
border-bottom: 0;
}
.cssmenu.small-screen ul ul li .cssmenu-title {
padding: 11px;
}
@media (max-width: 768px) {
.cssmenu.small-screen .cssmenu-img-level-0 + div {
padding: 10px 40px 5px 17px;
} }
}
/* --- Variante cssmenu-horizontal --- */ .module-mini-top img {
#main .cssmenu-horizontal {} margin: 0 0.309em 0 0;
}
/* --- Variante cssmenu-group --- */
div.cssmenu-group {
position: relative;
display: inline-block;
padding: 2px 8px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
background-color: #FFFFFF;
border: 1px solid #999999;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
color: #444444;
cursor: pointer;
} }
div.cssmenu-group .cssmenu-title { .cssmenu li:hover > .cssmenu-title {
color: #444444;
font-size: 1.2rem;
font-weight: 300;
text-decoration: none; text-decoration: none;
} }
.cssmenu-group.small-screen { .cssmenu-title {
margin: 0 0 5px 0; padding: 0.456em 1.618em 0.456em 0.618em;
} font-size: 1.482rem;
white-space: normal;
/* --- Variante cssmenu-actionslinks --- */ font-weight: 400;
.cssmenu-actionslinks {
margin: 0 0 20px 0;
}
.cssmenu-actionslinks {
float: right;
margin: 0 5px 5px 5px;
}
.cssmenu-actionslinks.small-screen {
float: none;
margin: 0;
}
.cssmenu.cssmenu-actionslinks ul li .cssmenu-title,
.cssmenu.cssmenu-actionslinks ul li ul li .cssmenu-title {
padding: 5px;
border: none;
font-weight: normal;
font-size: 11px;
}
.cssmenu-actionslinks.small-screen ul li {
border: none;
}
.cssmenu.cssmenu-actionslinks.small-screen ul li .cssmenu-title,
.cssmenu.cssmenu-actionslinks.small-screen ul li ul li .cssmenu-title {
padding: 15px 5px;
cursor: pointer;
}
/* --- Autres variantes --- */
@media (min-width: 769px) {
#cssmenu-galleryfilter ul {
min-width: 130px;
}
}
.cssmenu.cssmenu-static li.has-sub > .cssmenu-title:after,
.cssmenu.cssmenu-static li.has-sub > .cssmenu-title:before {
display: none;
}
/* -- Classes Niveau 1 -- */
/* ---------------------- */
/* --- Classes generales cssmenu --- */
.cssmenu > ul > li {
float: left;
}
#sub-header .cssmenu-horizontal > ul > li {
position: relative;
border-right: 1px solid #444444;
}
#sub-header .cssmenu-horizontal > ul > li:after {
position:absolute;
right: 1%;
top: 50px;
height: 100%;
width: 1px;
border-right: 1px solid #333333;
}
#main .cssmenu-horizontal > ul > li:last-child,
#sub-header .cssmenu-horizontal > ul > li:last-child {
border-bottom: none;
}
#main .cssmenu-horizontal > ul > li:last-child:after,
#sub-header .cssmenu-horizontal > ul > li:last-child:after {
width: 0;
height: 0;
}
#main .cssmenu-horizontal > ul > li {
position: relative;
border-right: 1px solid #EFEFEF;
}
#main .cssmenu-horizontal > ul > li:last-child {
border-right: none;
}
#main .cssmenu-horizontal.small-screen > ul > li {
border-right: none;
}
#main .cssmenu-horizontal > ul > li:after {
position:absolute;
right: 1%;
top: 50px;
height: 100%;
width: 1px;
border-right: 1px solid #EEEEEE;
}
.cssmenu-left > ul > li,
.cssmenu-right > ul > li {
float: none;
text-align: left; text-align: left;
}
.cssmenu > ul > li > .cssmenu-title {
padding: 17px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
/* --- Indicateur de sous menu --- */
.cssmenu > ul > li.has-sub > .cssmenu-title {
padding-right: 30px;
}
.cssmenu > ul > li.has-sub > .cssmenu-title:after,
.cssmenu > ul > li.has-sub > .cssmenu-title:before {
position: absolute;
display: block; display: block;
content: '';
}
.cssmenu > ul > li.has-sub > .cssmenu-title:after {
width: 8px;
height: 2px;
}
.cssmenu > ul > li.has-sub > .cssmenu-title:before {
width: 2px;
height: 8px;
transition: all 0.25s ease;
}
.cssmenu > ul > li.has-sub:hover > .cssmenu-title:before {
height: 0;
}
.cssmenu-vertical > ul > li > .cssmenu-title {
padding: 8px 20px 8px 10px;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
.cssmenu-title {
white-space: nowrap;
}
.cssmenu-vertical > ul > li > .cssmenu-title { .cssmenu-vertical > ul > li > .cssmenu-title {
padding: 6px 20px 6px 10px; white-space: normal;
} }
} }
.cssmenu > ul > li.has-sub > .cssmenu-title:after { top: 22px; right: 11px; } .cssmenu-title img {
.cssmenu > ul > li.has-sub > .cssmenu-title:before { top: 19px; right: 14px; } display: inline-block;
.cssmenu > ul > li.has-sub:hover > .cssmenu-title:before { top: 23px; } margin-right: 0.1618em;
@media (min-width: 769px) {
.cssmenu-vertical > ul > li.has-sub > .cssmenu-title:after { top: 11px; }
.cssmenu-vertical > ul > li.has-sub > .cssmenu-title:before { top: 8px; }
} }
/* --- Position des sous menu --- */
.cssmenu li:hover > ul { left: auto ; }
aside .cssmenu-left li:hover > ul { left: 100% ; top: 0; }
aside .cssmenu-right li:hover > ul { right: 100%; top: 0; }
aside .cssmenu-left.cssmenu-static li:hover > ul { left: 0; top: 0; }
aside .cssmenu-right.cssmenu-static li:hover > ul { right: 0; top: 0; }
.cssmenu.cssmenu-actionslinks li:hover > ul { right: 0; top: 100%; }
.cssmenu.cssmenu-actionslinks ul li:hover > ul { right: 100%; top: 0; }
.cssmenu.small-screen li:hover > ul { left: 0; }
.cssmenu.cssmenu-right.small-screen li:hover > ul { right: 0; }
.cssmenu.cssmenu-left.small-screen li:hover > ul { left: 0; }
/* --- Variante cssmenu-group --- */ /* -- Classes Items -- */
.cssmenu-group > ul { /* --------------------*/
text-align: center; .cssmenu-horizontal > ul > li {
font-size: 0;
}
.cssmenu-group > ul > li {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
background-color: #FFFFFF;
border: 1px solid #999999;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
color: #444444;
cursor: pointer;
}
.cssmenu.cssmenu-group > ul > li {
display: inline-block; display: inline-block;
float: none; vertical-align: middle;
}
.cssmenu.cssmenu-group > ul > li:hover {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 40%,rgba(56, 56, 56, 0.18) 100%);
background-color: #F0F0F0;
border-bottom-color: #B3B3B3;
}
.cssmenu-group > ul > li:first-child {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.cssmenu-group > ul > li:last-child {
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.cssmenu-group > ul > li.current {
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
background-color: #F0F0F0;
border-top-color: #B3B3B3;
} }
.cssmenu.cssmenu-group > ul > li > .cssmenu-title { .cssmenu-vertical li,
padding: 4px 12px; .cssmenu-actionslinks li {
color: #444444; display: block;
font-size: 1.1rem;
font-weight: 300;
text-decoration: none;
} }
.cssmenu-group.small-screen > ul.open { /* --- Indicateur de sous menu --- */
display: table !important; .cssmenu-horizontal > ul > li >.cssmenu-title {
margin: auto; padding: 0.618em 1.618em 0.618em 0.618em;
width: auto;
} }
.cssmenu-group.small-screen > ul > li, .cssmenu-right li.has-sub > .cssmenu-title {
.cssmenu-group.small-screen > ul > li:hover { padding-left: 1.618em;
float: left;
width: auto;
background: transparent;
border: none;
clear: both;
} }
.cssmenu.cssmenu-group.small-screen > ul > li > .cssmenu-title { .cssmenu ul li.has-sub > .cssmenu-title:after,
padding: 10px 12px; .cssmenu-right ul li.has-sub > .cssmenu-title:before {
position: absolute;
display: inline-block;
content: '';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1rem;
top: 50%;
transform: translateY(-40%);
} }
/* --- Variante cssmenu-actionslinks --- */ .cssmenu ul li.has-sub > .cssmenu-title:after {
.cssmenu-actionslinks.small-screen > ul > li:last-child { right: 1em;
padding: 0 0 10px 0; content: '\f067';
border-bottom: 1px solid rgba(120, 120, 120, 0.2); transition: 0.2s;
} }
.cssmenu.cssmenu-static li > .cssmenu-title { .cssmenu-right ul li.has-sub > .cssmenu-title:after {
border: none; content: '';
} }
.cssmenu.cssmenu-static > ul > li > .cssmenu-title { .cssmenu-right ul li.has-sub > .cssmenu-title:before {
text-align: center; left: 1em;
content: '\f067';
} }
/* --- Variante cssmenu-static --- */ .cssmenu ul li.has-sub:hover > .cssmenu-title:after {
.cssmenu.cssmenu-static > ul > li { content: '\f068';
padding: 0 10px 0 10px; transition: 0.2s;
} }
footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #2A2A2A; } .cssmenu-right ul li.has-sub:hover > .cssmenu-title:after {
#top-footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #DDDDDD; } content: '';
footer .cssmenu.cssmenu-static > ul > li:last-child,
#top-footer .cssmenu.cssmenu-static > ul > li:last-child {
border-right: none;
} }
.cssmenu.cssmenu-static > ul > li > .cssmenu-title { .cssmenu-right ul li.has-sub:hover > .cssmenu-title:before {
margin: 0 0 20px 0; content: '\f068';
padding-bottom: 5px;
border-bottom: 1px solid #25466C;
font-size: 17px;
font-weight: bold;
} }
/* --- Position des sous menu --- */
/* -- Classes Niveau 2 -- */
/* ---------------------- */
/* --- Classes generales cssmenu --- */
.cssmenu ul ul { .cssmenu ul ul {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
z-index: 10; z-index: 10;
} }
.cssmenu ul ul li { .cssmenu li:hover > ul { left: auto ; }
height: 0; .cssmenu-horizontal li:hover > ul { left: 0; top: 100%; }
transition: all 0.25s ease; .cssmenu-horizontal ul ul li:hover > ul,
} .cssmenu-left li:hover > ul { left: 100% ; top: 0; }
.cssmenu-right li:hover > ul { right: 100%; top: 0; }
.cssmenu-left.cssmenu-static li:hover > ul { left: 0; top: 0; }
.cssmenu-right.cssmenu-static li:hover > ul { right: 0; top: 0; }
.cssmenu-actionslinks li:hover > ul { right: 0; top: 100%; }
.cssmenu-actionslinks ul li:hover > ul { right: 100%; top: 0; }
.cssmenu ul ul ul { top: 0; }
.cssmenu li:hover > ul > li { .small-screen li:hover > ul { left: 0; }
height: auto; .cssmenu-right.small-screen li:hover > ul { right: 0; }
vertical-align: middle; .cssmenu-left.small-screen li:hover > ul { left: 0; }
}
.cssmenu ul ul ul {
top: 0;
}
.cssmenu ul ul li .cssmenu-title {
padding: 11px 15px;
font-size: 12px;
}
.cssmenu ul ul li .cssmenu-title {
padding: 8px 20px 8px 10px;
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
white-space: nowrap;
}
@media (min-width: 769px) { /* --- Decommenter pour déplier le dernier item de rang 1 vers la gauche pour un menu horizontal --- */
.cssmenu ul ul li .cssmenu-title { /*
padding: 6px 20px 6px 10px; .cssmenu-horizontal > ul > li:hover:last-child > ul {
} left: auto;
right: 0;
} }
/* --- Indicateur de sous menu --- */ .cssmenu-horizontal > ul > li:hover:last-child > ul li:hover > ul {
.cssmenu ul ul li:last-child > .cssmenu-title, left: auto;
.cssmenu ul ul li.last-item > .cssmenu-title { right: 100%;
border-bottom: 0;
} }
*/
.cssmenu ul ul li.has-sub > .cssmenu-title:after, /* -- Small screens - change the viewprot limit in /templates/default/framework/menus/link.tpl -- */
.cssmenu ul ul li.has-sub > .cssmenu-title:before { /* ---------------------------------------------------------------------------------------------- */
position: absolute; .small-screen,
.small-screen ul,
.small-screen ul li {
display: block; display: block;
content: ''; width: 100%;
}
.cssmenu ul ul li.has-sub > .cssmenu-title:after {
width: 8px;
height: 2px;
} }
.cssmenu ul ul li.has-sub > .cssmenu-title:before { .cssmenu-actionslinks.small-screen ul {
width: 2px; top: 100%;
height: 8px;
transition: all .25s ease;
}
.cssmenu ul ul li.has-sub > .cssmenu-title:after { top: 13px; right: 11px; }
.cssmenu ul ul li.has-sub > .cssmenu-title:before { top: 10px; right: 14px; }
@media (min-width: 769px) {
.cssmenu.cssmenu-vertical ul ul li.has-sub > .cssmenu-title:after { top: 11px; right: 11px; }
.cssmenu.cssmenu-vertical ul ul li.has-sub > .cssmenu-title:before { top: 8px; right: 14px; }
}
.cssmenu ul ul > li.has-sub:hover > .cssmenu-title:before {
top: 17px;
height: 0;
}
.cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:after,
.cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:before {
display: none;
}
.cssmenu.small-screen ul.level-1 li .cssmenu-title {
padding-left: 25px;
}
.cssmenu.small-screen ul.level-2 li .cssmenu-title,
.cssmenu.cssmenu-actionslinks.small-screen ul li ul li ul li .cssmenu-title {
padding-left: 35px;
}
.cssmenu.small-screen ul.level-3 li .cssmenu-title {
padding-left: 45px;
}
.cssmenu.small-screen ul.level-4 li .cssmenu-title {
padding-left: 55px;
}
.cssmenu.small-screen ul ul li .cssmenu-title {
background: none;
} }
.cssmenu.small-screen ul ul, .cssmenu.small-screen ul ul,
.cssmenu.small-screen ul ul ul { .small-screen ul ul ul {
position: relative; position: relative;
top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
margin: 0; margin: 0;
border: none; border: none;
text-align: left;
} }
/* --- Variantes --- */ .cssmenu.small-screen ul ul,
.cssmenu-horizontal ul ul ul { .small-screen ul ul ul,
margin-left: 100%; .cssmenu-vertical.small-screen .cssmenu-title {
text-align: left;
} }
.cssmenu-vertical ul ul { .cssmenu-horizontal.small-screen ul ul li:hover > ul,
position: relative; .cssmenu-left.small-screen li:hover > ul {
top: 0;
left: 0;
} }
aside .cssmenu-vertical ul ul { .close {
position: absolute; left: -9999px !important;
margin-top: -1px; height: 0;
border: 1px solid #BEBEBE; overflow: hidden;
} }
header .cssmenu-vertical ul ul li .cssmenu-title, .small-screen ul li .cssmenu-title,
#main .cssmenu-vertical ul ul li .cssmenu-title { .small-screen ul ul li .cssmenu-title,
padding: 5px 15px; .cssmenu-actionslinks.small-screen ul li .cssmenu-title {
padding: 0.309em 0.618em;
width: 100%; width: 100%;
border-bottom: none;
} }
.cssmenu-static ul ul { .small-screen ul ul li .cssmenu-title {
position: relative; padding-left: 1em;
left: 0;
z-index: 0;
} }
.cssmenu-static ul ul li { .small-screen ul ul ul li .cssmenu-title,
height: auto; .cssmenu-actionslinks.small-screen ul li ul li ul li .cssmenu-title {
padding-left: 1.618em;
} }
.cssmenu-static ul ul ul { .small-screen ul ul ul ul li .cssmenu-title {
margin-left: 0; padding-left: 2em;
} }
.cssmenu.cssmenu-static ul ul > li > .cssmenu-title { .small-screen ul ul ul ul ul li .cssmenu-title {
padding-left: 10px; padding-left: 2.618em;
} }
.cssmenu.cssmenu-static ul ul ul > li > .cssmenu-title { /* --- Responsive button --- */
padding-left: 20px; .menu-button {
display: none;
position: relative;
font-size: 1.482rem;
} }
.cssmenu-actionslinks ul li.has-sub .cssmenu-title:after { top: 9px; } .small-screen .menu-button,
.cssmenu-actionslinks ul li.has-sub .cssmenu-title:before { top: 6px; } .cssmenu-actionslinks .menu-button {
display: block;
padding: 0.618em 1.618em 0.618em 0.618em;
/* -- Personnalisation graphique -- */ text-transform: uppercase;
/* -------------------------------- */ font-weight: 400;
cursor: pointer;
/* --- Niveau 1 --- */ font-size: 1.309rem;
#top-header .cssmenu > ul > li > .cssmenu-title { color: #444444; } text-align: left;
#sub-header .cssmenu > ul > li > .cssmenu-title { color: #DDDDDD; }
.cssmenu.cssmenu-vertical > ul > li > .cssmenu-title { color: #444444; }
#main .cssmenu > ul > li > .cssmenu-title { color: #444444; }
.cssmenu-actionslinks > ul > li > .cssmenu-title { color: #666666; }
footer .cssmenu-static > ul > li > .cssmenu-title { color: #DDDDDD; }
#top-footer .cssmenu-static > ul > li > .cssmenu-title { color: #444444; }
#top-header .cssmenu > ul > li:hover > .cssmenu-title { color: #FFFFFF; }
header .cssmenu li:hover > .cssmenu-title { color: #FFFFFF; }
.cssmenu.cssmenu-vertical li:hover > .cssmenu-title { color: #666666; }
#main .cssmenu li:hover > .cssmenu-title { color: #666666; }
@media (min-width: 769px) {
header .cssmenu-horizontal > ul > li:hover { background-color: #333333; }
#main .cssmenu-horizontal > ul > li:hover { background-color: #F1F1F1; }
} }
/* --- Niveau 2 --- */ .small-screen .menu-button:after {
.cssmenu ul ul li .cssmenu-title { color: #DDDDDD; } position: absolute;
#main .cssmenu ul ul li .cssmenu-title { color: #333333; } padding: 0.618em;
.cssmenu.cssmenu-vertical ul ul li .cssmenu-title { color: #333333; } display: inline-block;
.cssmenu-actionslinks li ul li .cssmenu-title { color: #666666; } content: '\f0c9';
aside .cssmenu-static li ul li .cssmenu-title, font-family: 'Font Awesome 5 Free';
#top-footer .cssmenu-static li ul li .cssmenu-title { color: #666666; } font-weight: 900;
font-size: 1.482rem;
right: 0;
top: 0;
}
.cssmenu ul ul li:hover > .cssmenu-title { color: #333333; } .small-screen .menu-button.menu-opened:after {
header .cssmenu ul ul li:hover > .cssmenu-title { color: #FFFFFF; } content: '\f00d';
#main .cssmenu ul ul li:hover > .cssmenu-title { color: #555555; } }
.cssmenu.cssmenu-vertical ul ul li:hover > .cssmenu-title { color: #555555; }
.cssmenu-actionslinks li:hover > .cssmenu-title { color: #333333; }
footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #FFFFFF; }
#top-footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #262626; }
.cssmenu.cssmenu-vertical ul ul li .cssmenu-title { background-color: #FFFFFF; }
.cssmenu-actionslinks ul li:hover > .cssmenu-title:after { background-color: #333333; }
header .cssmenu ul ul li .cssmenu-title { background-color: #333333; } /* --- Responsive submenu button --- */
.cssmenu-actionslinks li:hover > .cssmenu-title { background-color: #DDDDDD; } .cssmenu.small-screen ul li.has-sub > .cssmenu-title:after,
.cssmenu-actionslinks.small-screen li:hover > .cssmenu-title { background-color: transparent;} .cssmenu-right.small-screen ul li.has-sub > .cssmenu-title:before {
#main .cssmenu-horizontal ul ul { background-color: #F9F9F9; }
#main .cssmenu-horizontal ul ul > li:hover { background-color: #F1F1F1; }
#cssmenu-galleryfilter ul ul li .cssmenu-title { background-color: #FFFFFF; }
#cssmenu-galleryfilter ul ul li:hover .cssmenu-title { background-color: #DDDDDD; }
/* --- Personnalisation de l'indicateur de sous-Menu --- */
.cssmenu li.has-sub > .cssmenu-title:after,
.cssmenu li.has-sub > .cssmenu-title:before { background-color: #DDDDDD; }
.cssmenu-vertical li.has-sub > .cssmenu-title:after,
.cssmenu-vertical li.has-sub > .cssmenu-title:before { background-color: #444444; }
/* -- Bouton responsive -- */
/* ----------------------- */
/* --- Classes generales cssmenu --- */
.cssmenu .menu-button {
display: none; display: none;
position: relative;
list-style: none;
line-height: 1;
font-size: 1.2rem;
} }
.cssmenu .menu-button:before { .small-screen .submenu-button {
font-size: 1.3rem; position: absolute;
} z-index: 99;
right: 0;
.cssmenu.small-screen .menu-button { top: 0;
display: block; display: block;
padding: 17px 40px 17px 17px;
text-transform: uppercase;
font-weight: 700;
cursor: pointer; cursor: pointer;
} }
#top-footer .cssmenu.small-screen .menu-button { .small-screen .submenu-button:after {
color: #444444;
}
.cssmenu.small-screen .menu-button:after,
.cssmenu.small-screen .menu-button:before {
position: absolute; position: absolute;
display: block; display: block;
content: ''; content: '\f0d7';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.482rem;
right: 0;
top: 0;
padding: 0.618em;
} }
.cssmenu.small-screen .menu-button:after { .small-screen ul ul .submenu-button:after {
height: 4px; top: 0.309em;
width: 20px; font-size: 1.306rem;
border-width: 2px 0 2px 0; padding: 0.456em;
border-style: solid;
} }
.cssmenu.small-screen .menu-button:before { .small-screen .submenu-button.submenu-opened:after { content: '\f0d8'}
height: 2px;
width: 20px;
background-color: #DDDDDD; /* -- Cssmenu-actionslinks variant -- */
font-size: 1.3rem; /* ---------------------------------- */
.cssmenu-actionslinks {
float: right;
margin: 0.809rem 0.809rem 2.809rem 3.618rem;
} }
.cssmenu.small-screen .menu-button.menu-opened:after { .cssmenu-actionslinks .menu-button {
height: 2px; display: block;
border: 0;
transform: rotate(45deg);
} }
.cssmenu.small-screen .menu-button.menu-opened:before { .cssmenu-actionslinks .menu-button:after {
transform: rotate(-45deg); position: absolute;
display: block;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.482rem;
content: "\f013";
top: 0;
right: 0;
padding: 0.228em 0.618em;
border-width: 1px;
border-style: solid;
border-color: transparent;
} }
/* --- Position du bouton --- */ .cssmenu-actionslinks:hover .menu-button:after {
.cssmenu.small-screen .menu-button:after { top: 22px; right: 17px; } border-bottom-width: 0;
.cssmenu.small-screen .menu-button:before { top: 16px; right: 17px; } }
.cssmenu.small-screen .menu-button.menu-opened:after,
.cssmenu.small-screen .menu-button.menu-opened:before { top: 23px; width: 15px; }
/* --- Variante cssmenu-actionslinks --- */ .cssmenu-actionslinks ul {
.cssmenu .menu-button:before { position: absolute;
font-size: 1.3rem; z-index: 10;
top: 2.309rem;
min-width: 200px;
left: -9999px;
} }
.cssmenu-actionslinks .menu-button { .cssmenu-actionslinks .menu-button:hover + ul,
float: right; .cssmenu-actionslinks .menu-button + ul:hover {
position: relative; left: auto;
display: inline-block; right: -1px;
padding: 4px 12px 4px 12px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%,rgba(56,56, 56, 0.1) 100%);
background-color: #FFFFFF;
border: 1px solid #999999;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
color: #444444;
text-align: center;
cursor: pointer;
-webkit-font-smoothing: antialiased;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
.cssmenu-actionslinks .menu-button { .cssmenu-actionslinks .menu-button {
font-size: 0; font-size: 0;
} z-index: 9;
.cssmenu-actionslinks:hover .menu-button {
z-index: 11;
margin-bottom: 1px;
background-image: none;
border-width: 1px 1px 0 1px;
border-color: #AAAAAA;
} }
} }
#main .cssmenu-actionslinks.small-screen .menu-button { /* --- Cssmenu-actionslinks small-screen variant --- */
.cssmenu-actionslinks.small-screen {
margin: 0;
float: none; float: none;
background-color: transparent;
background-image: none;
border: none;
font-family: "Trebuchet MS",Verdana,"Bitstream Vera Sans",Times,serif;
text-align: left;
} }
.cssmenu-actionslinks .menu-button + ul { .cssmenu-actionslinks.small-screen .menu-button:after {
left: -9999px; content: '\f0c9';
border-width: 0;
padding: 0.618em;
} }
.cssmenu-actionslinks .menu-button:hover + ul, .cssmenu-actionslinks.small-screen .menu-button.menu-opened:after {
.cssmenu-actionslinks .menu-button + ul:hover{ content: '\f00d';
left: auto;
} }
.cssmenu-actionslinks.small-screen .menu-button:hover + ul, .cssmenu-actionslinks.small-screen .menu-button:hover + ul,
.cssmenu-actionslinks.small-screen .menu-button + ul:hover { .cssmenu-actionslinks.small-screen .menu-button + ul:hover {
left: -9999px; left: -9999px;
right: 0;
} }
.cssmenu-actionslinks.small-screen .menu-button + ul.open, .cssmenu-actionslinks.small-screen .menu-button + ul.open,
.cssmenu-actionslinks.small-screen .menu-button + ul:hover.open { .cssmenu-actionslinks.small-screen .menu-button + ul:hover.open {
left: auto; left: auto;
} position: relative;
width: 100%;
.cssmenu-actionslinks .menu-button:before {
content: "\f013";
}
.cssmenu-tools .menu-button:before {
content: "\f0c9";
} }
.cssmenu-actionslinks ul { .cssmenu-actionslinks.small-screen.cssmenu-right .cssmenu-title {
position: absolute; text-align: left;
z-index: 10;
right: 0;
top: 21px;
padding: 5px 0;
width: 170px;
background-color: #FFFFFF;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
border: 1px solid #AAAAAA;
font-size: 11px;
} }
.cssmenu-actionslinks.small-screen ul { .cssmenu-actionslinks.small-screen ul ul .cssmenu-title {
top: 100%; padding-left: 0.618em;
border: none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
} }
.cssmenu-actionslinks.small-screen li.has-sub > a, .cssmenu-actionslinks.small-screen ul li.has-sub > .submenu-button,
.cssmenu-actionslinks.small-screen li.has-sub > .submenu-button { .cssmenu-actionslinks.small-screen ul li.has-sub > .cssmenu-title {
display: none; display: none;
} }
.cssmenu-actionslinks.small-screen li.has-sub > ul {
display: block !important; /* -- Cssmenu-tools variant small-screen -- */
padding: 0; /* ---------------------------------------- */
.cssmenu-tools.small-screen {
height: auto;
} }
/* --- Variante tools --- */
.cssmenu-tools.small-screen li.has-sub > a, .cssmenu-tools.small-screen li.has-sub > a,
.cssmenu-tools.small-screen li.has-sub > .submenu-button { .cssmenu-tools.small-screen li.has-sub > .submenu-button {
display: block; display: block;
} }
/* --- Variante Static --- */ .cssmenu-tools .menu-button:after {
.cssmenu-static.small-screen .menu-button { content: "\f0c9";
cursor: default;
} }
.cssmenu-static.small-screen .menu-button:after,
.cssmenu-static.small-screen .menu-button:before { /* -- Cssmenu-group variant -- */
display: none; /* --------------------------- */
.cssmenu-group {
text-align: center;
margin-bottom: 1.618rem;
} }
.cssmenu-static.small-screen ul li { .cssmenu-group li {
border-top: none; display: inline-block;
} }
.cssmenu-static.small-screen > ul > li > .cssmenu-title, .cssmenu-group .cssmenu-title {
.cssmenu-static.small-screen ul ul > li > .cssmenu-title { font-size: 1.309rem;
padding-bottom: 5px; padding: 0.309em;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: transparent;
font-weight: 300;
text-decoration: none;
} }
/* --- Personnalisation graphique du bouton responsive--- */ .cssmenu-group li:last-child .cssmenu-title {
.cssmenu.small-screen .menu-button:after { border-right-width: 1px;
border-color: #DDDDDD;
} }
#main .cssmenu.small-screen .menu-button { /* --- Variante cssmenu-group small-screen --- */
color: #111111; .cssmenu-group.small-screen ul li .cssmenu-title {
padding: 0.309em 0.618em;
} }
.cssmenu.small-screen .menu-button:before { background-color: #DDDDDD; }
.cssmenu.small-screen .menu-button.menu-opened:after,
.cssmenu.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; }
header .cssmenu.small-screen .menu-button.menu-opened:after,
header .cssmenu.small-screen .menu-button.menu-opened:before { background-color: #FFFFFF; }
header .cssmenu-vertical.small-screen .menu-button.menu-opened:after,
header .cssmenu-vertical.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; }
header .cssmenu-tools.small-screen .menu-button.menu-opened:after,
header .cssmenu-tools.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; }
/* -- Bouton submenu -- */ /* -- Variantes cssmenu-statique -- */
/* -------------------- */ /* -------------------------------- */
.cssmenu-static > ul > li {
/* --- Classes generales cssmenu --- */ display: inline-block;
.cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:before, vertical-align: top;
.cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:after {
display: none;
} }
.cssmenu.small-screen .submenu-button { .cssmenu-static > ul > li > .cssmenu-title {
position: absolute; text-align: center;
z-index: 99;
right: 0;
top: 0;
display: block;
height: 46px;
width: 46px;
border-left: 1px solid rgba(120, 120, 120, 0.2);
cursor: pointer;
} }
.cssmenu.small-screen ul ul .submenu-button { .cssmenu-static ul li.has-sub > .cssmenu-title:after,
height: 34px; .cssmenu-static ul li.has-sub > .cssmenu-title:before {
width: 34px; display: none;
} }
.cssmenu.small-screen .submenu-button:after, .cssmenu-static > ul > li {
.cssmenu.small-screen .submenu-button:before { padding: 0 0.618em;
position: absolute;
display: block;
content: '';
} }
.cssmenu.small-screen .submenu-button:after { .cssmenu-static > ul > li > .cssmenu-title {
width: 8px; margin: 0 0 0.618em 0;
height: 2px; font-size: 1.618rem;
font-weight: bold;
} }
.cssmenu.small-screen .submenu-button:before { .cssmenu-static ul ul {
width: 2px; position: relative;
height: 8px; left: 0;
z-index: 0;
} }
.cssmenu.small-screen .submenu-button.submenu-opened:before { .cssmenu-static ul ul > li > .cssmenu-title {
display: none; padding: 0.228em 1.618em 0.228em 0.618em;
} }
.cssmenu-actionslinks.small-screen .submenu-button { .cssmenu-static ul ul ul > li > .cssmenu-title {
height: 31px; padding: 0.228em 1.618em;
width: 31px;
border: none;
} }
/* --- Variante Static --- */
.cssmenu-static.small-screen .submenu-button,
.cssmenu-static.small-screen .submenu-button:after,
.cssmenu-static.small-screen .submenu-button:before {
display: none;
}
.cssmenu-static.small-screen ul ul, /* --- Variante Static small-screen --- */
.cssmenu-static.small-screen ul ul ul { .cssmenu-static.small-screen > ul > li > .cssmenu-title {
display: block !important; text-align: left;
margin: 0;
} }
/* --- Personnalisation background Bouton submenu --- */ .cssmenu-static.small-screen .submenu-button:after { content: '\f0d8'}
.cssmenu.small-screen .submenu-button:after { background-color: #DDDDDD; } .cssmenu-static.small-screen .submenu-button.submenu-opened:after { content: '\f0d7'}
.cssmenu.small-screen .submenu-button:before { background-color: #DDDDDD; }
.cssmenu.small-screen .submenu-button.submenu-opened:after { background-color: #FFFFFF; }
.cssmenu.small-screen .submenu-button.submenu-opened { background-color: #262626; }
#top-header .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(255, 255, 255, 0.05); }
.cssmenu-actionslinks.small-screen .submenu-button.submenu-opened { background-color: #DDDDDD; }
#menu-left .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); }
#menu-right .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); }
/* --- Postion icone Submenu --- */
.cssmenu.small-screen .submenu-button:after { top: 22px; right: 19px; }
.cssmenu.small-screen .submenu-button:before { top: 19px; right: 22px; }
.cssmenu.small-screen ul ul .submenu-button:after { top: 15px; right: 13px; }
.cssmenu.small-screen ul ul .submenu-button:before { top: 12px; right: 16px; }
.cssmenu-actionslinks.small-screen .submenu-button:after { top: 14px; right: 11px; }
.cssmenu-actionslinks.small-screen .submenu-button:before { top: 11px; right: 14px; }
Editor
Original Text
Changed Text