Newer
Older
ccjcorea / themes / default / css / custom.css
@Omeka Users Omeka Users on 14 Jun 2018 22 KB Import initial


/* DEBUT MODIFICATION CSS */



/* changement sur tout le site / police de caractère */

*  {
	font-family: "Roboto", "Segoe UI","Verdana", "Arial";
}

/* police de caractère des éléments paragraphes*/
p, .element-text, .element-text *, p *{
	font-family: Garamond, Arial;
}

/* debut-------------------------------------------------- */
/* enlever la bordure pointillé des liens sur toutes les pages */
a{
	border: 0;
	text-decoration: underline;
	
}

ul.navigation a , footer .links a {
	text-decoration: none;
}
/* fin------------------------------------------- */


/* taille du content et centrage*/
#content{
	width: 80%;
	display: block;
	margin: auto;
	float: none;	
}


/*
*	Enlève la boite bleue génante lorqu'on clique sur le content
*/
#content:focus{
	outline:0;
}

/* debut----------------------------------------------------------- */
/* redimension générale */
#home #primary{
	margin: 0 !important;
	padding: 0 !important;
}
#home #content{
	padding: 0;
	height: auto;
	margin: auto;
}

#wrap{
	max-width: 100%;
	padding:0;
}
/* fin--------------------------------------------------------------- */



/* debut-------------------------------------------------------------- */
/**
* background sur toutes les pages , couleurs, image...
*/

body #wrap{
	background-image: url(../logos_img/img/FondFooter.PNG);
	background-position: bottom;
	background-size: 100%;
	background-repeat: no-repeat; 
	
}
body{
	background-color: #fef2df !important;
}
#home #wrap{
	padding-bottom: 9em; 
}
footer{
	background-color: #fce6c2;
}

/* fin--------------------------------------------------------------------- */





/* page d'accueil image en fond */

/*  */
/* #home #wrap{ */
	/* background-image: url(../logos_img/img/accueil1.png); */
	/* background-position: center; */
	/* background-size: cover; */
	/* background-repeat: no-repeat;  */
	/*  */
/* } */





/**
* PAGE D'ACCUEIL : boites, placement, couleur
*/


/* debut-------------------------------------------------------------------------------------------------------------- */
/* page d'accueil boites, contenu recents sur la droite et sous boites en dessous pour les contenus en avant */
#home #primary > *, #home #secondary > *{
	background-color: rgba(255, 255, 255, 0.7);
	padding: 1em;
	display: inline-block;
	margin : 10px;
	max-width: 100%;

}
#home #primary img{
	max-width: 100%;
}
#home #primary .homepage-text img{
	width: 100%;
	height: auto;
}

/* enlève tout ce qui n'est pas dans une div car le texte de page d'accueil se retrouve par defaut avec des balises vides */
#home #primary > *:not(div){
	display: none;
}


#home #content{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start; 

}
#home #primary{
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: 70%;
}
#home #secondary{
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: 28%;
	padding: 0 !important;
}
#home #primary{
	display: flex !important;
	flex-flow: row wrap;
}
#home #featured-item, #home #featured-collection, #home #featured-exhibit{
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: 30%;
	min-width: 200px;
}

/* fin----------------------------------------------------------- */

/* debut----------------------------------------------------------------------- */
/* correction de bug image contenus récents, l'image pouvait déborder en longueur */
#primary div.record a.image, #secondary div.record a.image{
	max-width: 200px;
	height: auto;
	max-height: 100px;
	float: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#primary div.record a.image img, #secondary div.record a.image img{
	max-width: 200px;
	object-fit: contain;
	max-height: 100px;
}
/* fin------------------------------------------------------------------------------- */



/* paragraphes dans les boite de l'accueil (valable pour les contenus en avant et les ajoutés recemments)*/
#home div.record p{
	line-height: 20px;
	text-align: justify;
}



/* debut---------------------------------------------------------------------------------------------- */
/* Tout le bloc sert à changer le texte des titres de contenus en avant de la page d'accueil */
/* #home #primary div[id^=featured] > h2{ */
	/* display: none; */
/* } */
/* #home #primary div[id^=featured]:before{ */
	/* font-size: 24px; */
	/* font-weight: 700; */
	/* color: black; */
/* } */
/* #home #primary div[id^=featured] .record{ */
	/* margin-top: 5px; */
/* } */
/* #home #primary div#featured-exhibit:before{ */
	/* content: "Expositions"; */
	/*  */
/* } */
/* div#featured-collection:before{ */
	/* content: "Collection mise en avant" */
/* } */
/*  */
/* div#featured-item:before{ */
	/* content: "Site de la semaine"; */
/* } */

/* fin -------------------------------------------------------------------------------------------------- */



/* fin page d'accueil */
/* ---------------------------------------------------------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------
---------------------------------- Page parcourir les contenus--------------------
----------------------------------------------------------------------------------
*/  


/* debut ------------------------------------------------------------------ */
/* image à droite */


/* div.item.hentry {
	padding-bottom: 0;
}

div.item.hentry .item-meta .item-img{
	margin-bottom: 0;
	float: right;
	position: relative;
	top: -3em;
}
div.hentry h2{
	vertical-align : top;
}
 */
 
 .items.browse .item-meta .item-description{
	 text-align: justify;
 }

/* fin-------------------------------------------------------------------- */




/**
* Page de recherche : 
* 	pour les images (rétrecir et limiter)
*/

/* retrecit le #content des pages de recherche, recherche avancée et recherche par mot-clé  */

body.browse:not(.map) #content, body.advanced-search #content, body.tags #content {
	width: 50%;
}



/* recherche avancée, cacher certains champs */ 
.items.advanced-search #primary-nav #search-container, 
.items.advanced-search #advanced-search-form .field:nth-of-type(3),
.items.advanced-search #advanced-search-form .field:nth-of-type(5),
.items.advanced-search #advanced-search-form .field:nth-of-type(6),
.items.advanced-search #advanced-search-form .field:nth-of-type(7),
.items.advanced-search #advanced-search-form .field:nth-of-type(9)
{
	display: none;
}

.items.advanced-search .inputs *{
	font-size: 12px;
	line-height: 12px;
}

.items.advanced-search .inputs {
	width: 60% !important;
	float: none;
	margin: auto;
	height: 1em;
}

.items.advanced-search #search-narrow-by-fields .inputs{
	width: 100% !important;
}

#advanced-search-form .field label,  #advanced-search-form .field .label{
    margin: 0;
    margin-bottom: 1em;
	width: 100%;
}

.items.advanced-search #advanced-search-form .field{
	padding: 5px;
}

.items.advanced-search .two.columns.alpha{
	width: 100%;
}

/* fin page recherche -------------------------------------------------------------------------------------------------------------------- */

/**
*
*
* 			Page item
*
*
*/



/* Tous les titres des champs dans une page item et tous les sous textes, pour les mettre en ligne */
.element-set .element h3, .element-set .element-text{
	display: inline-block;
}

.item.show h3, .item.show h2{
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 5px;
}


/* Pour mettre les deux points après le titre  */
.item.show .element h3:after, .item.show .element h2:after {
	content: " :";
}
/* certains champs sont dans un paragraphe */
.item.show .element-text p {
	margin: 0;
}

/* jusitifer la description (et la présentation du site) */
#sites-mdivaux-item-type-metadata-presentation-du-site .element-text,
#dublin-core-description .element-text
{
	text-align: justify;
}


/* mettre un point-virgule entre les champs en ligne  */
.item.show .element-set > div > .element-text > *:after
{
	content: ";";
}

/* enlève le point virgule sur le dernier élément des champs en ligne  */
.item.show .element-set > div > .element-text:last-of-type > *:after
{
	content: "";
}

/* corrige le fond blanc des icones google maps sur la page item*/
#geolocation img{
	background-color: transparent !important;
}


div#geolocation{
	margin-bottom: 1em;
	float: right;
}

/* debut formats de sortie -------------------------------- */
/* formats de sortie en ligne (xml- atom ect ...)*/
#item-output-formats li{
	display: inline-block;
}
ul#output-format-list{
	padding-left: 0;
	margin-top: 0;
}
/* insère le tube entre chaque élément */
#item-output-formats li:after{
	content: " | ";
}
/* enlève le tube après le dernier élément  */
#item-output-formats li:last-of-type:after
{
	content: "";
}
/* fin formats ---------------------------------------- */



/* enlève les cases vides du tableau item-relation */
#item-relations-display-item-relations tr:nth-child(n+2) td:first-child{
	display: none;
}


/* place le texte sur la moitié de la page et la carte et les images sur l'autre */
.item.show #content > .element-text:first-of-type {
	width: 48%;
	float: right;
}

.item.show .element-set > div{
	width: 48%;
}

.item.show .item-file img{
	max-width: 100%;
}



/* fin page item-------------------------------------------------------------------------------------------------------------------- */


/*
*
* 			CAROUSEL page item
*
*/

.jcarousel-wrapper a{
	cursor: pointer;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none;
}
.jcarousel, .jcarousel ul{
	height: 100%;
	display: table;
}
.jcarousel .carousel-item{
	float: none;
	display: table-cell;
	height: 100%;
	vertical-align: middle; 
}
.jcarousel .item-file{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}

.jcarousel img{
	max-height: 70vh;
}
.jcarousel-pagination{
	position: static;
	/* -webkit-transform: none; */
	margin: auto;
	display: table;
}
.jcarousel .titre{
	min-height: 3em;
}
/* fin carousel------------------------------------------------------------- */

/* tous les items-files qui ne contiennent pas image dans le nom de classe (pdf, txt...) */
.item-file:not([class*="image"]) *{
	max-height: 10em;
}

/* les titres en dessous de chaque fichier associé à l'item */
.item-file h4{
	font-size: 12px;
}


/* ---------------------------------------------------------------------------------------------------- */
/* ----------------------------------- page carte -- géolocalisation -- geolocation ------------------- */
/* ---------------------------------------------------------------------------------------------------- */

/*
* corrige le responsive de la page carte: 
*/
select, textarea, input{
	max-width: 100%;
}

/* dimension les lignes de la   */
div#map-links ul{
	line-height: 15px;
}
div#map-links ul li{
	line-height: 20px;
	margin-bottom: 0;

}

/* image de la bulle d'info, pour que cela ne déborde pas */
.gm-style-iw img {
	max-height: 150px !important;
	max-width: 100% !important;
}


/* fin geolocalisation--------------------------------------------------------------------------------------- */


/*
*
*
*		 Redimension de la page générale
*
*
*/

#search-form{
	height: 2em;
	margin-bottom:0;
}



/* redimensionne le nav*/
 #primary-nav{
	width: 20%;
	float: none;
	display: inline-block;
	vertical-align: top;

 }
 
 
 
/**
*
*
*
* 			Redimension résultats solr search
*				- limiter avec un scroll + rendre responsive
*
*
*
*/

#solr-facets ul{
	margin: 0;

	/* permet d'afficher la barre de scroll seulement quand necessaire*/
	overflow: auto; 
	
	padding-left: 15px;
	
	font-size: 12px;
	
	/* pour que la hauteur fasse 10 lignes */
	max-height : 200px; 
	list-style-type: none;
}
#solr-facets li{
	line-height: 20px; /* Taille d'une ligne , important pour le max height de ul*/
}
/* titres des facettes */
#solr-facets strong {
	border-bottom: solid 1px grey;
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none;
	height: 20px;
}

#solr-facets span {
	display: inline-block;
}
.facet-value{
	border-bottom: none;
}
#solr-facets{
	display: inline-block;
	float: none;
	vertical-align: top;
	width: 14em;
	padding-left: 1em;
}
#solr-facets h2{
	font-size: 15px;
}
#solr-results{
	margin-left: 10px;
	display: inline-block;
	vertical-align: top;
	width: calc(90% - 14em);
	font-size: 14px;
}
#num-found{
	font-size: 20px;
}

.result .gallery div{
	display: inline-block;
	width: 10%;
	height: auto;
	overflow: hidden;
	margin: 5px;
	padding: 5px;
	border: solid 1px black;
}
.result .gallery div a {
	border-bottom: none;
}
.result .gallery div img{
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}

/**
* classes javascripts (solr)
*/


/* facettes "afficher plus"*/
div.more{
	font-size: 12px;
	cursor: pointer;
	font-weight: bold;
	margin: 5px;
}

div.more:hover{
	text-decoration: underline;
}
/* fin solr------------------------------------------------------------------------- */



/* 
*
*
* 
*		navigation - navbar
*
*
*/


/*
* correction menu mobile
*/
div.menu-button.button{
	max-width: 100%;
    margin: 0;
}




/* barre de recherche arrondie*/
div#search-container input#query {
	border-radius: 15px;
}

#search-container button{
	border-radius: 0 15px 15px 0;
	border: outer solid 1px black;
}


	/* Deux différentes navbar */
/* -------------------------------------------------------------------------------------------------  début navabr colonne*/


/* NAV BAR COLONNE */



	/* li.nav-item{ */
		/* background-color: rgba(240, 240, 240, 0.9) !important; */
		/* border-radius: 10px; */
		/* margin-bottom: 10px; */
		/* box-shadow: 2px 2px 2px black; */
	/* } */
	/* li.nav-item:hover{ */
		/* background-color: white !important; */
		
	/* } */
	
	/* li.nav-item a{ */
		/* border: 0! important; */
	/* } */
	
	/* .nav-menu{ */
		/* border: 0 !important; */
	/* } */
	/* #primary-nav{ */
		/* margin-left: 1em; */
	/* } */
	
	/* @media screen and (min-width: 767px){ */
		/* ul.navigation.nav-menu{ */
			/* display: block !important; */
		/* } */
	/* } */
	/* #content{ */
		/* display: inline-block !important; */
		/* width: 75%; */
		/* margin: 0 !important; */
	/* } */
	


/* --------------------------------------------------------------------------------------------------fin navbar colonne - début navbar ligne */	
	
	
/* NAV BAR LIGNE + barre de recherche au milieu */


#primary-nav{
	margin: 0;
	width: 100%;
	display: block;
}

ul.navigation.nav-menu{
	height: 1em;

	background-color: #fafafa;
	height: auto;
	display: flex;
	flex-flow: row wrap;
	font-size: 15px;
	border-bottom: solid 1px #ccc;
}

ul.navigation.nav-menu li.nav-item{
	vertical-align: top;
	height: 100%;
	width: auto !important;
	background-color: #fafafa !important;

}
ul.navigation.nav-menu li.nav-item a:hover, ul.navigation.nav-menu li.nav-item.active a{
	color: orange !important;	
}
ul.navigation.nav-menu li.nav-item a {
	text-align: center;
    width: auto;
	border: solid 1px #ccc;
	word-break: keep-all;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

ul.navigation.nav-menu li.nav-item:last-child a {
	border-right: solid 2px #ccc;
}

/* enleve le symbole fleche devant les items du menu */
#primary-nav ul.navigation > li a:before{
	content:"";
}


/* redimmensionne la barre de recherche sur toutes les pages */
#search-container{
	width: 30em;	
	margin: auto;
	margin-top: 1em;
}

/* cache la deuxieme barre dans la page solr search */
#solr-search-form{
	display: none;
}


		/* ----------------------------------------------------------------- */
		/* ----------------mettre navbar ligne au milieu sans bordures------------ */
		/* ----------------------------------------------------------------- */
		ul.navigation.nav-menu{
			justify-content: center;
			border: 0;
		}

		ul.navigation.nav-menu li a {
			border: 0 !important;
			color: #603416;
			font-weight: bold !important;
		}
		/* ----------------------------------------------------------------- */



ul.navigation.nav-menu li a:hover{
	font-weight: bold !important;
}

/* corrige le bug qui faisait que le menu mobile faisait disparaitre le menu une fois la fenetre agrandie de nouveau */
@media screen and (min-width: 767px){
	ul.navigation.nav-menu{
		display: flex !important;
	}
	
}


/* ------------------------------------------------------------------------------------------------------ fin navbar ligne */




 /* header - BANDEAU - bannière*/

header {
	border: none;
	background-position: left top !important; 
	/* background-attachment: fixed; */

	

	/* ---- mettre le logo du site au milieu du header verticalement */
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
}



/*pour hiscant */
header{
	height: 254px;
	height: calc(100vw / 1922 * 254);
	background-size: contain !important;
	
}


/* icones dans le header (.header-icons est le conteneur)*/
header .header-icons{
	position: absolute;
	bottom: 5px;
	height: 40px;
	width:100%;
	z-index: 1000;
}


.header-icons img{
	box-sizing: border-box;
	max-height: 90%;
	float: right;
	margin: 0 15px;
}

.shareMenu{
	background-color: white;
    position: absolute;
    top: 45px;
	right: 5px;
	display: none;
	overflow: hidden;
	max-width: 220px;
	height: auto;
	border-radius: 10px;
	padding: 5px;
	box-shadow: 1px 1px 1px black;
}
.shareMenu div{
	height: auto;
	width: 200px;
	margin-bottom: 5px;
	background-color: rgb(209, 208, 208);
	box-shadow: 1px 1px 1px black;
	border-radius: 10px;
	padding: 5px;
	cursor: pointer;

}
.shareMenu a {
	text-decoration: none;
}
.shareMenu h6{
	margin: 0;
	font-size: 13px;
	font-weight: bold; 
	font-style: normal;
	color: grey;
	text-align: center;
	width: 80%;
}
.shareMenu img{
	width: auto;
	max-width: 50px;
	height: auto;
	max-height: 1.5em;

}

/* logo du site dans le header*/
/* pour enlever le débordement du logo du header sur la navbar, enelver l'instruction "top: 50px;" */
#site-title{
	max-height: 150px;
	z-index: 10;
	position: relative;
	bottom: 5px;
	padding: 0;
	/* top: 50px; */
}
#site-title img{
	max-height: 150px;
	width: 22vw;
	margin-left: 5vw;
}

 

.shareMenuFleche{
	float: right;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
}
/* fin header ------------------------------------------------------------------------------------------- */

#wrap{
	min-height: calc(100vh - 10em)
}



/* ----------------footer - pied de page-------------------------- */
footer{
	
	/* couleur du texte */
	color: black;
	
	/* intensité du gras sur le texte */
	font-weight: 550;
	
	border-top: none;
	padding: 10px;
	/* box-shadow: 0 -2px 2px -1px black; */
	
	padding: 0;
}

footer p {
	float: none;
	margin: 0;
	width : -moz-max-content;
	width : max-content;
	width: -webkit-max-content;
    width: -o-max-content;
    width: -ms-max-content;
	padding-left: 1em;
}



div#footer-text a{
	border:0;
}



div#footer-text div.footer-logos{
	/*le flex permet de bien répartir les logos et cela reste responsive*/
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
	align-items: center;
}

/* si cette ligne est utilisée, reparti différement les logos du footer (chaque boite fera la même longueur) */
#footer-text .footer-logos span {
	flex: 1 0 auto;
	/* width: 30%; */
}
#footer-text .footer-logos a {
	display: table;
	margin: auto !important;
	vertical-align: middle;
}
div#footer-text img{
/*les marges autour des logos évitent qu'ils ne se touchent*/
margin-left: 0.5em;
	margin-right: 0.5em;
	margin-top: 10px;
	margin-bottom: 10px;
/*ci-dessous, dimensions imposées aux logos*/
	max-height: calc(6em);
	max-width: calc(12em);
	object-fit: scale-down;
	vertical-align: middle;
}

@media screen and (max-width: 768px){
	#footer-text .footer-logos span {
		box-sizing: border-box;
		flex: none;
		width: auto;
		height: auto;
		max-width: 30%;
}

	div#footer-text img{
		/* box-sizing: border-box; */
		height: 100%;
		width: 100%;
		max-height: 4em;
		max-width: 90%;
	}



}
/* Correspond au paragraphe "Fièrement propulsé par Omeka" */
#footer-text p:last-of-type{
	margin-left: auto;
	margin-bottom: 0;
	display: table;
	width: auto;
	display: none;
}
#home #footer-text p:last-of-type{
	display: table;
}
/* liens du footer */
#footer-text .links{
	margin-bottom: 1em;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	
}
#footer-text .links a{
	margin-left: 3em;
	margin-right: 3em;
	color: #603416;
	font-weight: bold;
}

#footer-text .links a:hover{
	color: orange;
}
/* fin footer -------------------------------------------------------------------------------------- */



/*
* Page exposition : justification du texte 
*
*/

#exhibit-blocks > .layout-file-text > p,
#exhibit-blocks > .layout-text > p {
	font-weight: normal;
	font-size: 15px;
	line-height: 20px;
	text-align: justify;
}
/*modification VBD 7 06 2018*/
#exhibit-blocks > .layout-text .Texte> p {
	font-weight: normal;
	font-size: 15px;
	line-height: 20px;
	text-align: justify;
}
/*fin de modification*/

/*modification VDB 13 juin 2018 formulaire de contact retreci en largeur
body > #wrap > #content {
	width: 50%;
}
fin de modification VBD 13 juin 2018*/

#contact-form {
	width: 60%;
	margin: auto;
}
/*modification VBD 13 juin 2018 reduction du send*/
#contact-form #send {
	width: auto;
    
}
/*modification VBD 13 juin 2018*/

@media screen and (max-width: 800px){

	#contact-form {
		width: 100%;

}

}

/* -------------------------------------------------------------------------------------------------------------------- */


/**
* 
*
*		MEDIA SCREENS 
*
*/


@media screen and (max-width: 1000px){
	#content{
		width: 100%
	}
}

@media screen and (max-width: 768px){

	#primary-nav{
		width: 100%;
	}
	#primary-nav ul{
		width:100%;
		padding:0;
		margin: 0 !important;
	}
	#solr-search-form{
		display: none;
	}
	
	#content{
		width: 100% !important;
		padding: 1em;
	}
	div#geolocation{
		float: none !important;
		width: auto !important;
	}
	
	#site-title{
		top:0;
	}
	#search-container{
		width: 80% !important;
	}

	/* header du site, pour le réduire quand la page est petite, pour hiscant */
	header{
		height: 100px;
		background-size: 280% 100% !important;
	}

	header .header-icons{
		height: 30px;
	}

	header #site-title img{
		width: 200px;
		max-width: 100%;

	
	}
}


@media screen and (max-width: 500px){
	h1,h2,h3{
		font-size: 20px;
	}
	
	#solr-results{
		width: 100%;
	}
	#solr-facets{
		width: 80%;
	}
	#solr-facets strong{
		background-color: lightblue;
		height: 2em;
		line-height: 2em;
		padding-left: 1em;
	}
	#solr-facets strong:after{
		display: block;
		position: relative;
		top: -2em;
		content: url("../images/white_arrow_ie.png");
		text-align: right;
		padding-right: 2em;
		color: white;
		width :100%;
		height: 100%
	}
	


	header #site-title{
		position: absolute;
		top: 0;
	}
	
}