File "albums-f-bfa2bf73.css"

Full path: /home/argothem/www/organecyberpresse/local/cache-css/albums-f-bfa2bf73.css
File size: 10.33 KB
MIME-type: text/plain
Charset: utf-8

/*
  ======================
  Styles du modèle album
  ======================

  Il y a plusieurs dispositions possibles qui modifient substantiellement l'affichage :
  simple liste de documents, mosaïque d'images, etc.

  Markup :

  figure.album.album_model.album_<disposition>.album_<images|mixed>[.album_caption_<top|bottom>]
    ul.album__items
      li.album__item.album__item_<media>.album__item_<media>_<extension>
        div.album__doc.album__doc_<doc|emb>.album__doc_<captioned|captionless>.spip_document
    nav.album__pagination.pagination
    figcaption.album__caption
      strong.album__heading
      div.album__text
      div.album__credits
*/

/*
  ===========
  Généralités
  ===========
  Les choses communes à toutes les dispositions
  Nb : ne jamais cibler .album tout court car cela casserait des choses dans le privé
*/
:root {
	--spip-albums-gutter: 0.5rem; /* Marges internes */
	--spip-albums-margin: calc(var(--spip-spacing-y, 1.385em) * 2); /* Marge externes */
	--spip-albums-border-radius: 0.15em;
	--spip-albums-thumbnail-size: 10em; /* Taille max des miniatures */
	--spip-albums-text-gray: var(--spip-color-gray-dark, #666);
}

/* Conteneur général <figure> */
.album_model {
	display: flex;
	flex-flow: column;
	margin: 0 0 var(--spip-albums-margin);
}

/* Conteneur des items <ul> */
.album__items {
	column-gap: var(--spip-albums-gutter);
	row-gap: var(--spip-albums-gutter);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Item <li> */
.album__item,
li.album__item {
	margin: 0;
	float: none;
}

/* Documents */
.album_model .album__doc,
.album_model .spip_doc_inner {
	margin: 0;
}
.album_model .spip_document {
	min-width: initial;
}
.album_model .spip_doc_legende {
	word-break: break-word;
}
.album_model:not(.album_simple) .spip_doc_legende > * {
	min-width: initial;
}

/* Légende <figcaption>
   optionnellement en haut, par défaut pour la disposition simple */
.album__caption {
	margin-top: calc(var(--spip-albums-gutter) * 2);
	text-align: center;
	font-size: 1.15em;
}
.album_caption-top .album__items,
.album_simple:not(.album_caption-bottom) .album__items {
	order: 2;
}
.album_caption-top .album__pagination,
.album_simple:not(.album_caption-bottom) .album__pagination {
	order: 3;
}
.album_caption-top .album__caption,
.album_simple:not(.album_caption-bottom) .album__caption {
	order: 0;
	margin-bottom: calc(var(--spip-albums-gutter) * 2);
	margin-top: 0;
}

/* Tablettes et plus */
@media (min-width: 768px) {
	/* Légende */
	.album__caption {
		max-width: 66%;
		align-self: center;
	}
		/* Alignement */
	.album_model.left,
	.album_model.right {
		display: inline-flex;
		width: 50%;
	}
	.album_model.left {
		float: inline-start;
		margin-inline-end: var(--spip-albums-gutter);
	}
	.album_model.right {
		float: inline-end;
		margin-inline-start: var(--spip-albums-gutter);
	}
}

/* Éléments divers, reset */
.album_model .spip_logo {
	margin: 0;
}
.album__item pre {
	white-space: break-spaces;
}

/*
  ============================================
  Toutes les dispositions destinées aux images
  ============================================
  La légende est masquée et s'affiche au survol/focus, en overlay
*/
.album_images .album__item,
.album_images .album__doc {
	display: flex;
	justify-content: center;
	align-items: center;
}
.album_images .album__item_image .spip_doc_inner,
.album_images .album__item_image .spip_doc_lien {
	display: flex;
}
/* Légende en overlay et masquée par défaut */
.album_images .album__doc_image.album__doc_captioned .spip_doc_inner {
	position: relative;
	overflow: hidden;
}
.album_images .album__doc_image.album__doc_captioned .spip_doc_legende {
	display: inline-block;
	position: absolute;
	left: 50%; top: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: var(--spip-albums-gutter);
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	overflow-y: scroll;
	pointer-events: none; /* afin de pouvoir cliquer sur le lien en arrière plan */
	background-color: transparent;
	color: white;
	/* font-size: 0.9em; */
	opacity: 0;
	transition: opacity 0.2s;
}
/* Légende affichée au survol */
.album_images .album__doc_image.album__doc_captioned:focus-within .spip_doc_legende,
.album_images .album__doc_image.album__doc_captioned:hover        .spip_doc_legende {
	opacity: 1;
}
/* Image assombrie et floutée au survol. On sait pas s'il y a un lien, ou direct un img ou svg. On cible donc le 1er élément. */
.album_images .album__doc_image.album__doc_captioned .spip_doc_inner > *:first-child {
	transition: filter 0.2s; /* in */
}
.album_images .album__doc_image.album__doc_captioned:focus-within .spip_doc_inner > *:first-child,
.album_images .album__doc_image.album__doc_captioned:hover        .spip_doc_inner > *:first-child {
	filter: brightness(20%) contrast(0.75) blur(1px);
	transition-duration: 0.1s; /* out */
}
/* Items non images */
.album_images .album__item:not(.album__item_image) {
	padding: var(--spip-albums-gutter) var(--spip-albums-gutter);
	max-width: 100%;
}

/*
   ==================
   Disposition Simple
   ==================
   Idem qu'une succession de modèles <doc> ou <emb>
*/
.album_simple .album__items {
	display: block;
}
.album_simple .album__item {
	margin-bottom: calc(var(--spip-albums-gutter) * 2);
}

/*
   ==================
   Disposition inline
   ==================
   Images sur un axe horizontal, limitées en hauteur
*/
.album_inline .album__items {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
}
@media (min-width: 480px) {
	.album_inline .album__items {
		flex-flow: row wrap;
	}
	.album_inline .spip_document img,
	.album_inline .spip_document svg {
		width: auto;
		max-height: var(--spip-albums-thumbnail-size);
	}
}

/*
   =================
   Disposition Ligne
   =================
   Images sur un axe horizontal mais sans retour ligne, limitées en hauteur
*/
.album_model.album_line {
	--spip-albums-thumbnail-size: 20em;
}
.album_line .album__items {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	overflow-x: auto;
	mask-image: linear-gradient(to right, black 0%, black calc(100% - 2em), transparent 100%);
	mask-size: cover;
	padding-inline-end: 2em;
}
.album_line .album__item {
	flex: 0 0 auto;
}
.album_line .spip_document img,
.album_line .spip_document svg {
	width: auto;
	max-height: var(--spip-albums-thumbnail-size);
}

/*
   ===================
   Disposition Masonry
   ===================
   Images sur un axe vertical, limitées en largeur
   Passer à `grid-template-rows: masonry;` quand le support sera correct
*/
.album_masonry .album__items {
	column-width: var(--spip-albums-thumbnail-size);
	column-fill: balance;
}
.album_masonry .album__item {
	margin-bottom: var(--spip-albums-gutter);
	break-inside: avoid-column;
}

/*
   ==================
   Disposition Moasic
   ==================
   Images en mosaïque, recadrage visuel.
*/
.album_mosaic .album__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--spip-albums-thumbnail-size), 1fr));
	grid-auto-rows: var(--spip-albums-thumbnail-size);
	grid-auto-flow: dense;
}
.album_mosaic .album__item_image .album__doc,
.album_mosaic .album__item_image .spip_doc_inner,
.album_mosaic .album__item_image .spip_doc_lien,
.album_mosaic .album__item_image .spip_document img,
.album_mosaic .album__item_image .spip_document svg {
	width: 100%;
	height: 100%;
}
.album_mosaic .album__item_image .spip_document img,
.album_mosaic .album__item_image .spip_document svg {
	object-fit: cover;
	max-height: initial;
}
.album_mosaic .format-landscape_2 {
	grid-column: span 2;
}
.album_mosaic .format-landscape_3 {
	grid-column: span 3;
}
.album_mosaic .format-landscape_4 {
	grid-column: span 4;
}
.album_mosaic .format-portrait_2 {
	grid-row: span 2;
}
.album_mosaic .format-portrait_3 {
	grid-row: span 3;
}
.album_mosaic .format-portrait_4 {
	grid-row: span 4;
}

/*
  ===========================
  Dispositions Liste + browse
  ===========================
*/
.album_list .spip_doc_lien:not(:hover):not(:focus),
.album_browse .spip_doc_lien:not(:hover):not(:focus),
#wysiwyg .album_list .spip_doc_lien:not(:hover):not(:focus),
#wysiwyg .album_browse .spip_doc_lien:not(:hover):not(:focus) {
	color: inherit;
	text-decoration: none;
}
/* Layout image / légende */
.album_list .spip_doc_inner,
.album_browse .spip_doc_inner {
	display: grid;
	align-items: center;
}
/* Images centrées */
.album_list .spip_doc_img,
.album_browse .spip_doc_img {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}
/* icônes .spip_document svg */
.album_list .spip_document_icone,
.album_browse .spip_document_icone {
	width: auto;
	height: 100%;
}
/* arrondis */
.album_list .album__item_image .spip_document img,
.album_browse .album__item_image .spip_document img {
	border-radius: var(--spip-albums-border-radius);
}
/* typo légende */
/* .album_list .album__doc .spip_doc_legende,
.album_browse .album__doc .spip_doc_legende {
	font-size: 0.9em;
} */
.album_list .album__item .spip_doc_titre,
.album_list .album__item .spip_doc_titre strong,
.album_browse .album__item .spip_doc_titre,
.album_browse .album__item .spip_doc_titre strong {
	font-weight: inherit;
}

/*
  =================
  Disposition Liste
  =================
  Idem explorateur de fichiers en mode liste, 2 colonnes sur conteneurs larges
*/
.album_list .album__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
	column-gap: calc(var(--spip-albums-gutter) * 4);
	row-gap: var(--spip-albums-gutter);
}
.album_list .album__doc {
	justify-content: start;
	text-align: start;
}
.album_list .spip_doc_inner {
	grid-template-columns: 50px 1fr;
	grid-template-rows: minmax(50px, 1fr);
	column-gap: var(--spip-albums-gutter);
	text-align: inherit;
}
.album_list .album__doc .spip_doc_legende {
	margin-inline-end: 0;
}
.album_list .album__doc .spip_doc_legende * {
	text-align: inherit;
}
.album_list .album__doc .spip_document img,
.album_list .album__doc .spip_document svg {
	max-height: 50px;
	width: auto;
}

/*
  ==================
  Disposition Browse
  ==================
  Idem explorateur de fichiers en mode vignettes
*/
.album_browse .album__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	column-gap: calc(var(--spip-albums-gutter) * 4);
	row-gap: calc(var(--spip-albums-gutter) * 2);
}
.album_browse .spip_doc_inner {
	grid-template-columns: 100px;
	grid-template-rows: 100px 1fr;
	row-gap: calc(var(--spip-albums-gutter) / 2);
}
.album_browse .spip_doc_img {
	align-items: center;
}