/*Stage 2019 css générique ccjcorea omeka-c Jérémie Hoarau
couleurs utilisées:
--mainColor: #006dac;(bleu des liens , titres et bandeau titre)
--darkMainColor: #005c9e;(pour les hover)
--lightbeige: #fafafa ;(footer et navbar)
--darkgray: #333; (pour les placeholder)
--buttongray: #666; (pour les boutons type loupe)
-black; (pour forcer à mettre en noir ex: dans le solr facet ou la navbar)
-lightgray; (background color)
-blanc: white; (bandeau titre, background de blocs)
-orange: orange; (liens de navigation)
*/
@font-face {
font-family: 'Questrial';
font-style: normal;
font-weight: 400;
src: local('Questrial'), local('Questrial-Regular'), url(fonts/questrial-v9-latin-regular.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans-Regular'), url(fonts/open-sans-v16-latin-regular.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ____________________________________________________________________________
RÉGLAGES GÉNÉRAUX
____________________________________________________________________________
*/
:root {
--mainColor: #006dac;
--lightbeige: #fafafa;
--darkMainColor: #005c9e;
--darkgray: #333;
--buttongray: #666;
}
*, input, .button, button, input[type="reset"], input[type="submit"], input[type="button"] {
font-family: 'Open Sans', sans-serif;
}
/* pour annuler font de la css style */
body {
font-family: 'Open Sans', sans-serif;
}
textarea, select, input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='email'], input[type='month'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='time'], input[type='url'], input[type='week']{
font-family: 'Open Sans', sans-serif;
}
/* pour Edge*/
/*::placeholder {
font-family: 'Open Sans', sans-serif;
}*/
::-ms-input-placeholder {
font-family: 'Open Sans', sans-serif;
}
/* fin de edge */
h1, .h1, h2, .h2{
font-variant: small-caps;
font-weight: normal;
}
/*placeholder*/
::placeholder, ::-ms-input-placeholder {
font-style: italic;
}
::-ms-input-placeholder {
font-style: italic;
}
#search-container #search-form #query::placeholder,
#content #advanced-search-form input::placeholder,
#search_block #search-keywords #keyword-search::placeholder {
color: var(--darkgray);
}
/*cache l'arbre de navigation*/
.breadcrumb {
display: none;
}
/* enleve la bordure pointillée des liens sur toutes les pages */
a {
border: 0;
}
/*grossi les liens au survol*/
a:hover {
text-decoration: underline;
}
body a:visited {
color: var(--mainColor);
}
/* force la hauteur du bloc principal */
#wrap {
min-height: 100vh;
min-width: 99vw;
}
/* bloc du contenu de la page */
#home #content, #home .items.browse #content {
display: flex;
flex-flow: column;
align-items: flex-start;
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
justify-content: center;
}
/*disposition contenu sur la page home*/
#home #content {
display: flex;
align-items: flex-start;
flex-flow: row wrap;
width: 100%;
height: 100%;
border-radius: 10px;
padding-top: 1em;
}
/* retire le contour quand on clique sur l'élément */
#content:focus {
outline: 0;
}
/* retire le sous-lignage des liens */
ul.navigation a, footer .links a {
text-decoration: none;
}
/* ____________________________________________________________________________
HEADER
____________________________________________________________________________
*/
header {
display: flex;
flex-flow: row wrap;
height: 100%;
border: 0;
margin: 0 auto;
padding: 0 1em 0 1em;
}
/* _____________________________ Logo principal ______________________________*/
#site-title {
display: flex;
width: 60%;
z-index: 10;
bottom: 5px;
padding: 0.5em 0 0.3em 0;
align-items: center;
}
#site-title a img:hover {
border-radius: 10px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
/*________________ Icones de connexion,flux et réseau social _________________*/
i {
font-family: "Font Awesome 5 Free";
font-size: 2em;
margin: 0 0.2em;
font-weight: 900;
}
i.fas.fa-external-link-alt{
font-size: 1em;
}
#user-icon::before {
color: var(--mainColor);
}
#user-icon:hover {
color: orange;
}
#rss-icon::before {
color: orange;
}
#rss-icon:hover {
color: var(--mainColor);
}
#share-icon::before {
font-style: normal;
color: var(--mainColor);
}
#share-icon:hover {
color: orange;
}
header .header-icons {
display: flex;
flex: 1;
flex-direction: row-reverse;
align-items: center;
right: 0;
top: 2em;
}
header .header-icons a {
box-sizing: border-box;
text-decoration: none;
}
header .header-icons i:hover {
transform: scale(1.1);
filter: drop-shadow(2px 3px 2px gray);
}
/*____________________________ Menu de partage _______________________________*/
header .shareMenu {
background-color: var(--lightbeige);
z-index: 1002;
position: absolute;
top: 75px;
right: 10px;
display: none;
overflow: hidden;
max-width: 220px;
height: auto;
border-radius: 10px;
padding: 0.5em;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
header .shareMenu h4 {
text-align: center;
color: black;
}
header .shareMenu a, header .shareMenu div {
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
height: auto;
width: 200px;
margin-bottom: 5px;
background-color: lightgray;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
padding: 5px;
text-decoration: none;
cursor: pointer;
}
header .shareMenu a:hover, header .shareMenu div:hover {
transform: scale(1.03);
}
header .shareMenu h5 {
margin: 0;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: var(--darkgray);
text-align: center;
width: 100%;
}
header .shareMenu img {
width: auto;
max-width: 50px;
height: auto;
max-height: 1.5em;
}
/* ___________________________ Barre de recherche ___________________________*/
/*arrondi els angles de la barre de recherche(gauche)*/
#search-container input#query {
border-radius: 15px;
margin: 0;
}
#search-container input#query::placeholder {
color: var(--darkgray);
}
/*arrondi els angles du bouton de recherche(droite)*/
#search-container button {
display: flex;
justify-content: center;
border-radius: 0 15px 15px 0;
background-color: var(--buttongray);
border: solid 1px var(--buttongray);
height: 30px;
width: 50px; /*correctif du bug natif de stylesheet de hauteur du bouton*/
}
#search-container button::after {
text-indent: 16px;
}
#search-container {
width: 30em;
margin: auto 0;
}
#search-form {
margin: 0;
}
/*empeche le grossisement des "..." de la barre de recherche */
#search-form>a.show-advanced.button:hover {
transform: none;
}
#advanced-form {
border-radius: 0 0 10px 10px;
border-top: none;
top: 30px;
}
/*___________________________ Navbar en ligne ________________________________*/
#primary-nav {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
width: 100%;
}
#primary-nav .navigation {
background-color: var(--lightbeige);
}
#primary-nav ul.navigation.nav-menu {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
min-height: 3em;
height: auto;
font-size: 1em;
border: 0;
background-color: var(--lightbeige);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
#primary-nav ul.navigation * {
width: max-content;
}
#primary-nav ul.navigation li a:before {
display: none;
}
body #primary-nav ul.navigation.nav-menu li,
body #primary-nav ul.navigation.nav-menu li a,
#primary-nav ul.navigation.nav-menu li.nav-item {
background-color: transparent;
}
#primary-nav ul.navigation.nav-menu li.nav-item {
display: flex;
align-items: center;
vertical-align: top;
height: 100%;
width: auto;
margin: 0;
}
#wrap .items-nav.navigation.secondary-nav .navigation li.active a {
color: orange;
}
/* ____________________________________________________________________________
BANDEAU TITRE PERSONNALISÉ
____________________________________________________________________________
*/
#bandeauTitre {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
background-color: var(--mainColor);
height: 2.2em;
width: 100%;
margin: 0;
padding: 0;
}
/*Correspond au titre dans la partie de gauche (zone bleu écriture blanche)*/
#titre1 {
display: flex;
align-items: center;
text-align: center;
margin: 0 auto;
height: 100%;
}
#bandeauTitre #titre1 h1 {
font-family: 'Questrial', sans-serif;
font-size: 1.8em;
font-weight: normal;
margin: 0;
color: white;
font-variant: unset;
}
/*ajustement de la span pour l'esperluette entre Corpus et Ressources*/
#et {
margin: 0 0.2em;
line-height: 0.6;
font-size: 1.8em;
text-shadow: -2px 4px 1px white;
color: var(--mainColor);
}
/*Correspond au titre dans la partie de droite (zone blanche écriture bleue)*/
#titre2 {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
height: 100%;
}
#bandeauTitre #titre2 h1 {
height: 100%;
display: flex;
align-items: center;
font-family: 'Questrial', sans-serif;
font-size: 1.8em;
font-variant: unset;
font-weight: normal;
text-align: center;
margin: 0;
background-color: white;
color: var(--mainColor);
padding: 0 0.5em;
border-left: 2px solid #aae1fa;
border-right: 2px solid #aae1fa;
}
/* ____________________________________________________________________________
WRAP
____________________________________________________________________________
*/
/* ___________________________ Barre de navigation __________________________*/
/* rend orange les mots lors du survol ou quand actif*/
#primary-nav ul.navigation.nav-menu li.nav-item a:hover,
#primary-nav ul.navigation.nav-menu a img:hover {
transform: scale(1.09);
color: orange;
}
#primary-nav ul.navigation.nav-menu li.nav-item.active a {
color: orange;
background-color: transparent;
}
/*corrige le bug de la maison qui se déplace*/
#primary-nav ul.navigation.nav-menu a.nav-item {
display: flex;
height: 32px;
width: 32px;
transform: translateX(10px);
}
/*ajuste le positionnement des liens*/
#primary-nav ul.navigation.nav-menu li.nav-item a {
text-align: center;
width: 100%;
word-break: keep-all;
margin: 0 auto;
padding: 0 1em;
background-color: transparent;
}
#primary-nav ul.navigation.nav-menu li.nav-item:not(:last-of-type) a {
border-right: 1px solid lightgray;
}
#primary-nav ul.navigation.nav-menu li a {
border: 0;
color: black;
background-color: var(--lightbeige);
padding: 0;
font-weight: bold;
}
/* enleve le symbole fleche devant les items du menu */
#primary-nav ul.navigation > li a:before {
content: "";
}
.menu-button.button {
background-color: #404040;
width: 100%;
text-indent: 1em;
margin: 0;
}
/* ________________________________
* page items/show/
*/
.item.show #wrap {
display: flex;
flex-flow: row wrap;
align-items: start;
}
.item.show #wrap #content {
display: block;
min-height: max-content;
flex-flow: row wrap;
flex-basis: 50%;
align-items: start;
height: max-content;
min-width: 19em;
margin: 2em auto;
border-radius: 10px;
background-color: white;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
.item.show #collection .element-text p {
margin: 0;
}
.item.show #dublin-core-creator .element-text a {
text-decoration: none;
}
.item.show #wrap #content h1 {
text-align: left;
}
.item.show #titre-pactols{
font-weight: bold;
}
.item.show #wrap #content h2:first-of-type,
#item-citation {
flex-basis: 100%;
margin: 1em 0;
padding-top: 1em;
border-top: dotted lightgray;
border-top-width: 0.3em;
}
.item.show nav {
margin-top: 2em;
}
.item.show #item-images {
display: flex;
flex-flow: row wrap;
justify-content: start;
flex-wrap: wrap;
height: 10em;
margin-bottom: 1em;
}
.item.show #item-images > div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item.show #item-images > div a {
margin: 0;
height: auto;
}
.item.show #item-images > div a:last-child {
color:white;
width:87%;
padding: 0.5em;
border-radius: 0 0 8px 8px;
background-color: var(--buttongray);
}
.item.show #item-images > div a:hover {
}
.item.show #item-images > div a img {
width: 7em;
margin: 0.5em 0.5em 0;
}
.item.show #item-images > div a img:hover {
transform: scale(1.05);
cursor: pointer;
}
.item.show #itemfiles h3 > div {
margin-top: 0.5em;
}
#fichiers {
width: 80%;
padding-top: 1em;
}
.element-set {
display: flex;
flex-flow: row wrap;
width: 100%;
}
/* justification du texte abstracts */
#pactols-item-type-metadata-pactols-sujets .element-text {
width: 33%;
}
#pactols-item-type-metadata-pactols-sujets h3 {
flex-basis: 100%;
}
.element-set .element h3, .element-set .element-text {
display: inline-flex;
margin: 0;
margin-bottom: 0.5em;
}
.element-set .element h3 {
width: 30%;
}
#dublin-core-format .element-text {
display:block;
margin-left: 31%;
}
.item.show h3, .item.show h2 {
font-size: 16px;
line-height: 20px;
height: max-content;
margin: 0;
}
.element {
width: 100%;
}
/* 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: "";
}
.element-text a:hover {
font-weight: bold;
color: var(--darkMainColor);
}
body.items.tags #wrap #content p {
width: 100%;
text-align: center;
}
#dublin-core-subject :not(:first-child):not(:last-child)::after {
content: ";";
}
#rightDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 40%;
text-align: center;
margin: 2em auto;
padding: 1.5em 0.5em;
min-width: 19em;
width: auto;
height: auto;
border-radius: 10px;
background-color: white;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
#rightDiv ol {
margin: 0.5em auto;
padding: 0 2em;
text-align: left;
word-break: break-all;
}
#rightDiv #transcribe,
#rightDiv #item-relations-display-item-relations,
#scripto-transcription {
width: 80%;
border-top: dotted lightgray;
border-top-width: 0.25em;
padding: 2em 0;
}
#item-relations-display-item-relations h2 {
margin-bottom: 1em;
}
#item-relations-display-item-relations table tbody tr td img.thumbnail:hover {
transform: scale(1.1);
}
/*supprime l'espace blanc causé par justify dans Sujet*/
#pactols-item-type-metadata-pactols-sujets {
display: flex;
flex-flow: row wrap;
text-align: justify;
}
#content .element-set:nth-of-type(n+2) .element .element-text a:first-of-type {
padding-left: 1em;
margin-right: 5px;
}
#dublin-core-creator .element-text a{
margin-left: 5px;
}
#content .element-set:nth-of-type(2) .element-set>div,
#content .element-set:nth-of-type(2) .element-set .element-text {
display: flex;
flex-direction: row;
flex: 1;
}
#geolocation, #geolocation-browse {
width: 100%;
padding: 0.5em;
align-self: center;
margin: 1em 0;
}
#geolocation h2 {
margin-bottom: 1em;
}
/* formats de sortie dans parcourir les contenus*/
#outputs {
width: 100%;
}
#outputs .outputs-label::after {
content: ":";
}
/* formats de sortie */
#item-output-formats li {
display: inline-block;
}
#item-output-formats {
text-align: center;
padding-top: 1em;
border-top: 1px dotted lightgray;
border-top-width: 0.3em;
}
#content ol {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
#output-format-list {
margin-top: 0;
padding-left: 0;
}
/* séparation entre chaque élément */
#item-output-formats li:after {
content: ", ";
}
#item-output-formats li:last-of-type:after {
content: "";
}
/* ________________________________
* page items/search/
*/
.inputs .search-entry * {
height: 30px;
}
.inputs #keyword-search::placeholder {
text-indent: 1em;
color: var(--darkgray);
}
.remove_search {
width: auto;
}
.items.advanced-search #content {
width: 80%;
float: none;
margin-left: auto;
margin-right: auto;
}
.items.advanced-search #advanced-search-form,
.map.browse #wrap #content #search_block,
.map.browse #wrap #content #search_block #search {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
width: 80%;
}
#content #search-narrow-by-fields .search-entry {
display: flex;
justify-content: right;
border-radius: 10px;
background-color: var(--lightbeige);
}
.items.advanced-search #search-narrow-by-fields .advanced-search-joiner,
#search_block #search-narrow-by-fields .advanced-search-joiner {
width: 8%;
background-color: lightgray;
margin-right: 2em;
font-size: 0.95em;
min-width: max-content;
}
#search-narrow-by-fields .inputs .remove_search .inputs .remove_search {
width: 2%;
}
#search-narrow-by-fields .search-entry select,
#search-narrow-by-fields .advanced-search-terms {
margin-right: 3px;
}
.items.advanced-search #content #search-narrow-by-fields .advanced-search-element,/*recherche avancée*/
#search-narrow-by-fields .advanced-search-element,/*recherche avancée géolocation*/
.items.advanced-search #content #search-narrow-by-fields .advanced-search-type,/*recherche avancée*/
#search-narrow-by-fields .advanced-search-type,/*recherche avancée géolocation*/
.items.advanced-search #content #search-narrow-by-fields .advanced-search-terms,/*recherche avancée*/
#search-narrow-by-fields .advanced-search-terms/*recherche avancée géolocation*/ {
width: 30%;
}
/*cache les options inutiles dans les select*/
option[disabled] {
display: none;
}
#search_block #search div {
display: flex;
flex-direction: column;
width: 100%;
}
#search_block #search #search-narrow-by-fields .inputs .search-entry {
display: flex;
flex-direction: row;
margin-top: 0;
}
.add_search, #submit_search_advanced {
width: max-content;
align-self: center;
}
.add_search, .remove_search {
background-color: var(--buttongray);
}
#submit_search_advanced {
background-color: var(--mainColor);
}
.field label, .field .label {
margin: 1em 0;
width: 100%;
margin-bottom: 1.5em;
}
#search-narrow-by-fields .search-entry:first-child .advanced-search-joiner {
display: block;
visibility: hidden;
}
#credits #wrap, #mentions-legales #wrap,
#politique-confidentialite #wrap, .collections.show #wrap {
display: flex;
flex-direction: column;
}
#credits #content, #mentions-legales #content,
#politique-confidentialite #content, .collections.show #content {
text-align: justify;
width: 80%;
margin: 0 auto;
}
.collections.show #wrap #content h2,
.collections.show #wrap #content #collection-items,
.collections.show #wrap #content #collection-tree {
width: 100%;
text-align: left;
}
.collections.show #wrap #content #collection-items h2 a{
padding-left: 1.2em;
background: url(../logos_img/img/parcourirpetit.png) no-repeat left center;
}
.collections.show #wrap #content .element-set #dublin-core-description .element-text {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
}
.collections.show .element {
margin-bottom: 0;
}
.collections.show #wrap #content h2, .admin-bar.collections.show #wrap #content h2 {
margin-top: 2em;
}
/* _______________________________ #content _________________________________*/
#solr-search-form {
/* cache la deuxieme barre dans la page solr search qui apparait dans le #content après une recherche*/
display: none;
}
#content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 2em;
border-radius: 10px;
width: 100%;
min-height: 53vh;
}
#content h1 {
width: 100%;
text-align: center;
}
#wrap #content .pagination-nav {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
}
#wrap #content .pagination-nav .pagination {
margin: 0;
width: auto;
min-width: 11em;
}
#wrap #content #sort-links .sort-label,
#wrap #content #sort-links #sort-links-list {
margin: 0;
padding: 0;
}
#wrap #content #sort-links {
width: 100%;
height: 3em;
margin-bottom: 1em;
}
#content .item.hentry {
width: 100%;
text-align: justify;
}
#content #advanced-search-form {
width: 100%;
column-count: 4;
padding-left: 1.15em;
}
#content #advanced-search-form>div {
display: flex;
flex-direction: column;
justify-content: start;
}
#content #advanced-search-form div label,
#content #advanced-search-form div .label {
width: 100%;
}
#content .items-nav.navigation.secondary-nav {
width: 100%;
}
/* ________________________________
* page collections/browse/
*/
.collections.browse #content .collection h2 {
margin-bottom: 0.5em;
}
.collections.browse .view-items-link a {
padding-left: 2em;
background: url(../logos_img/img/parcourirpetit.png) no-repeat left center;
}
.collections.browse .view-items-link a span{
font-weight: bold;
}
#views{
flex-basis: 100%;
border-bottom: 0.0625em solid #ccc;
}
#views div{
width: max-content;
margin-left: auto;
}
#views a:nth-of-type(2){
border-left: 0.0625em solid #ccc;
}
#views a i{
font-size: 16px;
}
#views a .active{
color: orange;
}
#content .collection {
display: flex;
flex-flow: row wrap;
text-align: justify;
width: 100%;
padding: 1em;
}
#content .collection h2,
#content .collection p {
width: 100%;
}
#description-box {
display: flex;
justify-content: center;
}
#description-box .collection-description {
height: 100%;
}
#description-box .collection-description p {
padding-left: 1em;
margin: 0;
width: 50%;
}
#description-box .image {
margin: 0;
text-align: left;
box-shadow: none;
}
#description-box .image img {
padding: 0;
}
/* page contenus & collections */
/* 2e navbar (pagination et tout parcourir/recherche) */
.items h1 {
margin: 0;
}
.secondary-nav {
display: flex;
flex-basis: 100%;
margin-left: 1em;
}
.pagination-nav .pagination {
width: auto;
margin: auto;
}
#sort-links {
width: 100%;
}
#sort-links ul {
margin: 0;
padding: 0;
}
.item.hentry, .collection {
width: 100%;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.item.hentry .item-meta {
display: flex;
}
.item.hentry .item-meta .item-img {
float: none;
margin: 0.5em;
}
.item.hentry h2 {
padding-left: 0.5em;
margin-bottom: 0.5em;
line-height: normal;
}
.item.hentry a, .item-description {
font-size: 0.9em;
text-decoration: none;
}
.item.hentry a:hover, .collection a:hover {
color: var(--darkMainColor);
}
/* page carte */
select, textarea, input {
max-width: 100%;
}
#map-links ul li {
margin-bottom: 0;
line-height: 20px;
}
/* image de la bulle d'info, pour que cela ne déborde pas */
.gm-style-iw img {
max-width: 100% !important;
max-height: 150px !important;
}
/*____________________________ #primary _____________________________________*/
#home #primary {
float: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex: 4;
height: max-content;/*33em*/
margin: 2em auto 0 0;
padding: 0;
}
/*_________________________ image d'accueil __________________________________
peut idéalement être remplacée par un carousel !!
*/
/*caroussel*/
@keyframes slidy {
0% {left: 0%;} /*1ère image*/
20% {left: 0%;} /*idem pour attente*/
25% {left: -100%;} /*2ème image*/
45% {left: -100%;} /*idem pour attente*/
50% {left: -200%;} /*3ème image*/
70% {left: -200%;} /*idem pour attente*/
75% {left: -100%;} /*4ème image*/
95% {left: -100%;} /*idem pour attente*/
100% {left: 0%;} /*1ère image*/
}
.slider {
width: 70%;
min-width: 17.5em;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
.slider div img {
width: calc(100% / 3);
float: left;
}
.slider div {
position: relative;
width: 300%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
/* image d'accueil */
#primary .imgune {
display: flex;
text-align: center;
align-items: center;
max-width: 100%;
padding-top: 2em;
flex-direction: column;
border-radius: 10px;
}
#primary .imgune .titre {
display: flex;
align-items: center;
justify-content: center;
color: white;
width: 100%;
height: 2em;
background-color: rgba(88, 89, 86, .9);
border-radius: 0 0 10px 10px;
transform: translateY(-2em);
}
#primary .imgune img {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
width: 100%;
}
/*permet d'avoir un texte justifié dans les rubriques telles que
contactez-nous, à propos, crédits, mentions légales et poilitiques de conf*/
#primary p {
text-align: justify;
}
/* collections accueil */
#collections {
display: flex;
flex-flow: row wrap;
flex-basis: 95%;
margin: 2em auto;
}
#primary #collections h2 {
width: 80%;
margin: 1em auto;
text-align: center;
font-variant: small-caps;
font-weight: normal;
border-bottom: 1px solid var(--mainColor);
}
#collections a {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 24%;
min-width: 10em;
height: 160px;
margin: 0.6em auto;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
border-radius: 5px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
/* mettre une couleur de fond pour le texte */
#collections a div {
padding: 5px;
font-size: 1.15em;
word-break: keep-all;
background-color: var(--mainColor);
color: white;
width: 100%;
}
/*____________________________________________________________________________*/
/* Collection, exposition, contenu mise en avant (avec titre,image et texte) */
#home #content #secondary #featured-collection,
#home #content #secondary #featured-exhibit,
#home #content #secondary #featured-item,
#home #content #secondary #recent-items {
float: none;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
text-align: center;
margin: 1em 0;
min-width: 19em;
max-width: 100%;
flex: 1;
width: 100%;
height: 100%;
background-color: transparent;
padding: 0;
}
#home #content #secondary #featured-collection .collection.record,
#home #content #secondary #featured-exhibit .exhibit.record,
#home #secondary #featured-item .item.record,
#home #secondary #recent-items .item.record {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
text-align: center;
margin: 1em auto;
padding: 1em;
min-width: 17.5em;
min-height: 20em;
width: 17.5em;
background-color: white;
border-radius: 5px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
#home #content #secondary #featured-collection .collection.record p,
#home #content #secondary #featured-exhibit .exhibit.record p,
#home #secondary #featured-item .item.record p,
#home #secondary #recent-items .item.record p {
margin: 1.5em;
font-size: 0.9em;
text-align: justify;
}
#home #content #secondary #featured-collection h2,
#home #content #secondary #featured-exhibit h2,
#home #secondary #featured-item h2,
#home #secondary #recent-items h2 {
font-variant: small-caps;
font-weight: normal;
margin-top: 0;
width: 80%;
border-bottom: 1px solid var(--mainColor);
}
#home #content #secondary #featured-collection h3,
#home #content #secondary #featured-exhibit h3,
#home #content #secondary #featured-item h3,
#home #content #secondary #recent-items h3 {
align-self: stretch;
margin-bottom: 2em;
text-align: center;
font-size: 1em;
}
#home #content #secondary #featured-collection h3:hover,
#home #content #secondary #featured-exhibit h3:hover,
#home #content #secondary #featured-item h3:hover,
#home #content #secondary #recent-items h3:hover {
transform: scale(1.02);
text-decoration: underline;
}
#home #content #secondary #featured-collection h3 a,
#home #content #secondary #featured-exhibit h3 a,
#home #content #secondary #featured-item h3 a,
#home #content #secondary #recent-items h3 a {
font-weight: normal;
text-decoration: none;
}
#home #content #secondary #featured-collection .image,
#home #content #secondary #featured-exhibit .image,
#home #content #secondary #featured-item .image,
#home #content #secondary #recent-items .image {
text-align: center;
margin: 0;
width: 80%;
height: auto;
box-shadow: none;
}
#home #content #secondary #featured-collection img,
#home #content #secondary #featured-exhibit img,
#home #content #secondary #featured-item img,
#home #content #secondary #recent-items img {
width: 80%;
height: auto;
border-radius: 5px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
#recent-items .view-items-link {
min-width: 17.5em;
margin: 1em auto;
}
#content .exhibit.even {
padding: 1em;
}
#content .exhibit.even .description p {
text-align: justify;
}
/*____________________________ #secondary _____________________________________*/
#home #secondary {
float: none;
display: flex;
flex-flow: row wrap;
flex: 3;
width: 20%;
justify-content: center;
margin-top: 2em;
padding: 0;
}
/*____________ solr ___________*/
#content #solr-facets, #content #solr-facets h2 {
flex-basis: 30%;
min-width: 17em;
height: max-content;
}
#content nav {
width: 100%;
height: 100%;
}
/* titres des facettes */
#solr-facets strong {
display: flex;
align-items: center;
text-indent: 1em;
height: auto;
margin-bottom: 10px;
border-bottom: solid 1px var(--mainColor);
background-color: var(--lightbeige);
border-radius: 5px 5px 0 0;
}
#solr-facets ul {
padding: 0;
margin-left: 2em;
}
#solr-facets ul li {
display: block;
}
#solr-facets a:hover {
transform: none;
}
#solr-results {
flex-basis: 50%;
margin: 0 auto;
text-align: center;
}
#solr-results ul.hl {
text-align: left;
}
#solr-results h2 {
text-align: left;
}
#solr-facets h3 {
cursor: pointer;
width: 100%;
color: black;
background-color: lightgray;
}
#solr-facets,
#solr-results .result {
padding: 2em;
background-color: white;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
#solr-facets div .more {
color: black;
width: max-content;
text-indent: 1em;
cursor: pointer;
margin-bottom: 0.5em;
}
#solr-facets div .more:hover {
color: orange;
}
#solr-results .result .hl li em {
font-weight: bold;
}
#solr-results .gallery {
display: flex;
flex-direction: row;
justify-content: center;
}
#solr-results .gallery img {
margin: 0 2em;
border-radius: 5px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
#content .pagination-nav {
margin: 0 auto;
}
#content .pagination-nav .pagination {
margin-left: 20em;
}
#content #solr-applied-facets {
width: 100%;
}
#content #solr-applied-facets ul {
display: flex;
flex-direction: column;
}
#solr-facets .Creator ul li>a:first-of-type {
margin-right: 5px;
}
#previous-item, #next-item {
display: flex;
align-items: center;
justify-content: center;
}
/* ____________________________________________________________________________
FOOTER
____________________________________________________________________________
*/
footer {
padding: 0;
border-top: none;
background-color: var(--lightbeige);
}
#footer-text {
display: flex;
flex-flow: row wrap;
align-items: center;
}
body footer #footer-text * {
padding-top: 0;
}
/* padding des 3 parties */
#footer-text div, #footer-text p:first-of-type {
padding: 1em;
}
/* logos */
#footer-text .footer-logos {
display: flex;
flex-basis: 60%;
flex-flow: row wrap;
justify-content: center;
}
#footer-text .footer-logos span {
display: flex;
/* flex: 1;*/
}
/* dimensions des logos */
#footer-text .footer-logos img {
margin: 1.5em;
max-height: 80px;
}
/* liens */
#footer-text .links {
display: flex;
flex: 1;
flex-flow: column wrap;
align-content: center;
border-right: 1px dotted #ccc;
border-left: 1px dotted #ccc;
border-width: 0.2em;
padding: 1em;
line-height: normal;
}
#footer-text .footer-logos a {
margin: auto;
}
/* mise en former des liens */
#footer-text .links a {
font-size: 13px;
font-weight: bold;
color: var(--darkgray)333; /*var(--mainColor)*/
}
#footer-text .links a:hover {
transform: scale(1.02);
color: orange;
}
#footer-text .license {
display: flex;
align-items: center;
text-align: justify;
width: 30%;
font-size: 0.8em;
margin: 0;
padding-bottom: 0;
}
#footer-text .license img {
margin-right: 1em;
}
#footer-text .license p {
width: 100%;
}
/* Fièrement propulsé par Omeka, il y a un float left qui le place de base */
#footer-text>p:last-child {
display: none;
}
/* ____________________________________________________________________________
COOKIES
____________________________________________________________________________
*/
/* mettre une couleur de fond */
#cookies {
z-index: 7;
position: fixed;
bottom: 0;
display: flex;
width: 100%;
background-color: lightgray;
align-items: center;
text-align: center;
}
/* mettre une couleur pour le fond et la police des boutons */
#cookies button, #cookies a {
width: auto;
margin-right: 10px;
border-radius: 10px;
background-color: var(--mainColor);
color: white;
text-decoration: none;
}
/* mettre la police du site */
#cookies button {
font-family: 'Questrial', sans-serif;
}
#cookies a {
padding: 5px;
}
#cookies p {
font-size: small;
flex-basis: 80%;
color: black;
margin: 0;
}
/* ____________________________________________________________________________
RESPONSIVE
____________________________________________________________________________
*/
@media screen {
#primary-nav ul.navigation>li a {
border: none;
display: block;
padding: 0.75em 1em;
}
.collections.browse #content {
width: 80%;
margin: 0 auto;
float: none;
}
.items.browse #content,
.items.tags #content,
#scripto-index {
width: 80%;
margin: 0 auto;
float: none;
}
.map.browse #content #search_block,
.map.browse #content #search_block #search {
width: 100%;
}
}
@media screen and (min-width: 1360px) {
header .shareMenu {
right: auto;
left: auto;
}
}
@media screen and (min-width: 550px)and (max-width: 1585px) {
header .header-icons {
position: absolute;
right: 1em;
top: 0.25em;
}
}
/*____________________________________________________________________________*/
@media screen and (max-width: 1585px) {
header {
flex-direction: column;
z-index: 1003;
}
header #site-title {
display: flex;
justify-content: center;
margin: 0 auto;
}
header #search-container {
width: 60%;
margin: 0 auto 0.5em auto;
}
header .header-icons {
justify-content: center;
margin: 0.3em 0;
}
header .shareMenu {
top: 40px;
right: 10px;
}
#primary-nav ul.navigation {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
border-bottom: 1px solid #ccc;
}
#primary-nav ul.navigation>li {
padding: 0;
width: auto;
background-color: transparent;
}
#primary-nav ul.navigation>li.active a {
color: orange;
}
#primary-nav ul.navigation>li a {
color: black;
font-weight: bold;
width: auto;
}
#primary-nav ul.navigation>li a:hover {
color: orange;
}
/*___________________________*/
#primary .imgune {
min-width: 32em;
}
/*___________________________*/
#footer-text {
flex-flow: column;
}
#footer-text .logos {
flex-basis: 100%;
}
#footer-text .links {
flex-flow: row wrap;
justify-content: center;
width: 100%;
text-align: center;
border-left: none;
border-right: none;
border-top: 1px dotted lightgray;
border-top-width: 0.2em;
border-bottom: 1px dotted lightgray;
border-bottom-width: 0.2em;
}
#footer-text .links a {
margin: 1em;
min-width: 5em;
}
#footer-text .links a:hover {
transform: scale(1.05);
}
#footer-text .license {
width: 95%;
}
#description-box .collection-description p {
width: 100%;
}
}
@media screen and (max-width: 1024px) {
#content #search-narrow-by-fields .inputs .search-entry,
#search_block #search #search-narrow-by-fields .inputs .search-entry {
flex-direction: column;
}
#content #advanced-search-form #search-narrow-by-fields .inputs .search-entry select,
#content #advanced-search-form #search-narrow-by-fields .inputs .search-entry .advanced-search-terms,
#search_block #search-narrow-by-fields .inputs .search-entry select,
#search-narrow-by-fields .advanced-search-terms {
width: 100%;
}
#content #advanced-search-form #search-narrow-by-fields .inputs .search-entry .advanced-search-joiner {
width: 10%;
}
}
/*____________________________________________________________________________*/
@media screen and (max-width: 768px) {
header {
background-color: white;
top: 0;
z-index: 1003;
}
#content {
padding: 0;
}
.item.show #wrap #content {
flex-basis: 100%;
padding: 1em;
}
.item.show #wrap #rightDiv {
flex-basis: 100%;
}
#advanced-search-form {
width: 100%;
padding: 0;
}
.items.advanced-search #wrap {
min-width: 95vw;
}
.items.advanced-search #wrap,
.items.advanced-search #content {
width: 100%;
padding: 0;
}
.items.advanced-search #content #advanced-search-form {
padding: 1em;
}
.collections.show #content {
width: 100%;
}
.collections h2 {
text-align: left;
}
.items-nav.navigation.secondary-nav {
border-bottom: 1px solid lightgray;
margin-bottom: 2em;
margin-left: 0;
}
.items-nav.navigation.secondary-nav ul {
margin: 0 0 -1px 0;
}
.items-nav.navigation.secondary-nav li {
border: 1px solid lightgray;
padding: 0 5px;
}
.items-nav.navigation.secondary-nav .active {
border-bottom-color: white;
}
/* cookies */
#cookies {
flex-flow: row wrap;
align-items: center;
}
#cookies p {
flex-basis: 100%;
}
#cookies button {
margin-left: auto;
}
#cookies a {
margin-right: auto;
}
}
@media screen and (max-width: 1400px) {
#advanced-search-form {
column-count: 1 !important;
}
#content #advanced-search-form>div {
height: auto;
display: block;
}
}
/*____________________________________________________________________________*/
@media screen and (max-width: 1300px) {
#bandeauTitre {
height: auto;
}
#content .collection .image {
margin: 0.5em auto;
box-shadow: none;
}
.items.browse #content,
.items.tags #content,
.collections.browse #content,
.map.browse #content {
width: 100%;
margin: 0 auto;
padding: 0;
float: none;
}
}
/*____________________________ Max 767 px ____________________________________*/
@media screen and (max-width: 767px) {
header{
border-bottom: 1px solid lightgray;
}
header .shareMenu {
right: 10px;
}
header #search-container {
width: 100%;
margin: 0 auto 0.5em auto;
}
/*___________________________*/
#home #wrap #content #primary {
height: auto;
}
#primary .imgune {
min-height: 17.5em;
}
#home #content #secondary {
border-left: none;
}
/*___________________________*/
body #primary-nav .navigation {
display: none;
width: 100%;
text-align: center;
background-color: var(--lightbeige);
}
body #primary-nav .navigation li {
background-color: transparent;
}
/*cache la maison et l'accueil dans le menu lors de la navigation telephone
ici .navigation.nav-menu et .navigation car le selecteur change selon si l'on
est sur l'accueil ou pas*/
body #primary-nav .navigation.nav-menu>a:first-of-type,
body #primary-nav .navigation.nav-menu>li:first-of-type {
display: none;
}
body #primary-nav .navigation>a:first-of-type,
body #primary-nav .navigation>li:first-of-type {
display: none;
}
#primary-nav ul.navigation.nav-menu a.nav-item {
display: none;
margin: 0 auto;
}
#primary-nav ul.navigation>li a:hover,
#primary-nav ul.navigation>li.active a {
color: orange;
background-color: transparent;
}
#primary-nav ul.navigation>li:not(:last-child) a {
border-bottom: 1px dotted lightgray;
border-bottom-width: 0.2em;
display: block;
padding: 0.75em 1em;
}
/*___________________________*/
#home #content {
justify-content: center;
}
#wrap #content #primary, #wrap #content #secondary {
margin: 0;
}
#primary-nav ul.navigation.nav-menu {
display: none;
}
#home #secondary {
flex-flow: row wrap;
}
#home #secondary, #home #secondary #featured-item {
justify-content: center;
width: 100%;
margin: 2em 0;
padding: 0;
}
#home #secondary #featured-item .item.record {
width: 82%;
}
#home #secondary #featured-item .item.record img {
width: 70%;
}
#content #solr-facets, #content #solr-facets h2 {
min-width: 100%;
}
}
/*____________________________________________________________________________*/
@media screen and (max-width:549px) {
#primary .imgune {
min-width: 13em;
}
header {
position: sticky;
}
header .shareMenu {
top: 178px;
right: auto;
left: auto;
}
}
/*____________________________________________________________________________*/
@media screen and (max-width:464px) {
#footer-text .license {
flex-direction: column;
}
#footer-text .license .license-logo a img {
min-width: 9em;
}
#footer-text .license {
padding-top: 1em;
}
}
Omeka