You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

536 lines
13 KiB

[(#REM)<style>]
#HTTP_HEADER{Content-Type: text/css; charset=#CHARSET}
#HTTP_HEADER{Vary: Accept-Encoding}
/*
===========
BOITE ALBUM
===========
*/
.box.box_album {
--spip-box-shadow: 0 0.05em 0.15em hsla(0, 0%, 0%, 0.066),0 0.1em 0.25em hsla(0, 0%, 0%, 0.033),0 0.1em 0.5em hsla(0, 0%, 0%, 0.033);
margin: var(--spip-spacing-y) 0;
background-color: var(--spip-color-white);
box-shadow: var(--spip-box-shadow);
border-width: 0;
}
/* Documents */
.box_album .formulaire_joindre_document,
.lat .box_album .formulaire_joindre_document {
margin: 0;
}
/* Header */
.box_album .box__header {
display: flex;
position: static;
padding: calc(var(--spip-box-spacing-y) / 2) var(--spip-box-spacing-x);
}
.box_album .box__header .infos {
flex: 1 1 auto;
}
.box_album .box__header .actions {
margin-inline-start: auto;
}
.box_album .box__header .heading {
display: inline;
}
.box_album .box__header a:not(:hover):not(:focus) {
color: inherit;
}
/* Footer */
.box_album .box__footer {
padding: 0;
background-color: transparent;
border-top: 1px solid var(--spip-box-sep-color);
text-align: inherit;
}
.box_album .box__footer:after {
display: none;
}
/* Métas (dans le footer à priori) */
.box_album .metas {
display: flex;
}
.box_album .metas__section {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: calc(var(--spip-box-spacing-y) / 2) var(--spip-box-spacing-x);
}
.box_album .metas a:not(:hover):not(:focus) {
color: inherit;
text-decoration: none;
}
/* Métas / infos : n°, statut, etc */
.box_album .metas__section_infos {
flex: 0 0 auto;
padding-inline-start: var(--spip-box-spacing-y);
padding-inline-end: var(--spip-box-spacing-y);
}
.box_album .metas__section_infos > *:not(:last-child) {
margin-inline-end: calc(var(--spip-box-spacing-x) / 2);
}
.box_album .vu {
margin-top: 0.15em;
}
.box_album .puce_objet.album {
display: inline-block;
flex-shrink: 0;
}
/* Métas / editorial */
.box_album .metas__section_editorial {
flex: 1;
/* justify-content: center; */
}
.box_album .metas__section_editorial .heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
text-align: center;
}
/* Métas / boutons d'actions et cie */
.box_album .metas__section_actions {
padding: 0;
}
.box_album .metas__section_actions > * {
height: 100%;
}
.box_album .metas__section_actions .actions,
.box_album .move {
border-inline-start: 1px solid var(--spip-box-sep-color);
}
.box_album .dropdown-toggle,
.box_album .move {
padding-top: calc(var(--spip-box-spacing-y) / 2);
padding-bottom: calc(var(--spip-box-spacing-y) / 2);
}
.box_album .dropdown-toggle:hover,
.box_album .dropdown-toggle:focus,
.box_album .move:hover,
.box_album .move:focus {
/* background-color: hsla(0, 0%, 0%, 0.066); */
background-color: var(--spip-color-theme);
color: white;
}
.box_album .move {
justify-content: center;
align-items: center;
width: 3em;
transition: all 0.15s;
border-bottom-#RIGHT-radius: var(--spip-box-border-radius);
}
.box_album .move:hover {
cursor: grab;
}
.box_album .dropdown-toggle {
height: 100%;
border-radius: 0;
}
.box_album .dropdown-menu [class*=btn] { /* pour précédence */
text-align: inherit;
justify-content: flex-start;
border-radius: 0;
}
/* Liste documents */
.box_album .liste_items.documents {
margin: 0;
border-top: 0;
}
.box_album .liste_items.documents:not(.documents_cases) .item:last-of-type {
border-bottom: 0;
}
/* Variante avec fond gris : albums liés / choisir */
.fiche_objet .box_album.box_album_lies,
.box_album.box_album_choisir {
background-color: var(--spip-color-gray-lightest);
box-shadow: none;
}
/* Variante : albumothèque */
.box_album.box_album_albumotheque {}
/* Variante : colonne */
.box_album.box_album_colonne {
background-color: white;
border-width: 1px;
}
.box_album_colonne .raccourcis {
display: flex;
justify-content: center;
margin: var(--spip-box-spacing-y) 0 calc(var(--spip-box-spacing-y) * 2);
}
/* Variante : drag and drop */
.box_album.deplacer-en-mouvement {
border: 1px solid var(--spip-color-theme) !important;
}
.box_album.deplacer-en-mouvement .move {
cursor: grabbing;
background-color: var(--spip-color-theme);
color: var(--spip-color-white);
}
/*
========================
FORMULAIRE AJOUTER ALBUM
========================
*/
.formulaire_ajouter_album .titrem .btn_fermer {
margin-bottom: 0;
margin-inline-start: auto;
}
/* Onglets */
.formulaire_ajouter_album .onglets_simple {
margin: 0 calc(var(--spip-form-spacing-x) * -1) calc(var(--spip-form-spacing-y) / 2);
}
.formulaire_ajouter_album .onglets_simple ul {
margin: calc(var(--spip-tabs-border-width) * -1);
flex-flow: row nowrap;
}
.lat .formulaire_ajouter_album .onglets_simple ul {
line-height: calc(var(--spip-line-height) * 0.8);
}
.formulaire_ajouter_album .onglets_simple li a.on {
color: var(--spip-color-theme-dark);
border-bottom-color: var(--spip-color-theme-dark);
z-index: 2;
}
/* Inclusion documents */
.formulaire_ajouter_album .documents,
.lat .formulaire_ajouter_album .documents {
margin: 0;
}
.formulaire_ajouter_album .editer.editer_with_bigup > label {
display: none; /* rustine */
}
.formulaire_ajouter_album .sourceup {
padding-top: var(--spip-form-spacing-y);
padding-bottom: var(--spip-form-spacing-y);
}
/* Bouton choisir */
.formulaire_ajouter_album .input-btn {
display: flex;
}
.formulaire_ajouter_album .input-btn input {
border-inline-end: 0;
border-top-#RIGHT-radius: 0;
border-bottom-#RIGHT-radius: 0;
}
.formulaire_ajouter_album .input-btn .btn {
border-top-#LEFT-radius: 0;
border-bottom-#LEFT-radius: 0;
margin: 0;
}
/*
=============================
LISTES ET VARIANTES DOCUMENTS
=============================
*/
.liste_items_albums {
clear: both;
}
/* Bouton et formulaire d'ajout */
.documents_album .btn_fermer {
margin: 0;
}
.documents_album .formulaire_joindre_document {
margin: 0 calc(var(--spip-box-spacing-x) * -1);
border: 0;
background-color: transparent;
}
.documents_album .formulaire_joindre_document .titrem {
display: none; /* Todo : accessible */
}
.documents_album .btn_ajouter {
display: flex;
align-self: center;
min-width: 8em;
margin: var(--spip-box-spacing-y) 0;
}
.documents_album .btn_ajouter:not(:hover):not(:focus) {
--spip-btn-color-second-border: hsla(0, 0%, 0%, 0.1);
}
.documents_album .btn_ajouter:before {
width: 1.5em;
height: 1.5em;
margin-inline-end: 0.25em;
}
/* Pagination interne plus discrète */
.documents_album .pagination {
padding: 0;
background-color: transparent;
}
/* Documents : cases + mini */
.documents_album.documents_cases {
--spip-albums-docs-thumbs-size: 7.4rem; /* 6 par ligne à la louche */
}
.documents_album.documents_cases.documents_cases_mini {
--spip-albums-docs-thumbs-size: 5rem;
}
.portfolios .documents_album.documents_cases .sortable {
display: grid;
grid-template-columns: repeat(auto-fit, var(--spip-albums-docs-thumbs-size));
gap: calc(var(--spip-box-spacing-x) / 2);
/* align-items: end; */
}
.portfolios .documents_album.documents_cases .item {
width: auto;
height: auto;
margin: 0;
padding: 0;
background-color: var(--spip-color-white);
/* border: 0; */
}
.portfolios .documents_album.documents_cases .item .vignette {
width: var(--spip-albums-docs-thumbs-size);
height: var(--spip-albums-docs-thumbs-size);
display: flex;
justify-content: center;
align-items: center;
padding: calc(var(--spip-box-spacing-x) / 2);
}
.portfolios .documents_album.documents_cases .item .vignette a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.portfolios .documents_album.documents_cases .item .vignette img {
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
.documents_album.documents_cases .btn_ajouter {
flex-flow: column;
font-size: 0.8em;
margin: 0;
min-width: var(--spip-albums-docs-thumbs-size);
min-height: var(--spip-albums-docs-thumbs-size);
height: 100%;
}
.documents_album.documents_cases .btn_ajouter:before {
margin-bottom: 0.25em;
margin-inline-end: 0;
}
/* Documents : mini */
.portfolios .documents_album.documents_cases.documents_cases_mini .item .vignette {
padding: 0;
}
.portfolios .documents_album.documents_cases.documents_cases_mini .presentation {
position: relative;
overflow: hidden;
}
.portfolios .documents_album.documents_cases.documents_cases_mini .descriptions {
flex-grow: 0;
}
.portfolios .documents_album.documents_cases.documents_cases_mini .actions {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.1s, transform 0.1s;
background-color: hsla(0, 0%, 100%, 0.9);
pointer-events: none;
transform: translateY(25%);
}
.portfolios .documents_album.documents_cases.documents_cases_mini .item:hover .actions,
.portfolios .documents_album.documents_cases.documents_cases_mini .item:focus-within .actions {
opacity: 1;
pointer-events: all;
transform: none;
}
.portfolios .documents_album.documents_cases.documents_cases_mini .deplacer-modifier .btn.editbox {
padding: 0;
font-size: 0.8em;
}
.documents_album.documents_cases.documents_cases_mini .btn_ajouter:before {
width: 1em;
height: 1em;
}
/*
==============
BARRE D'OUTILS
==============
Contient diverses choses : titre, boutons d'affichage, tri, etc.
*/
.barre-albums {
display: flex;
align-items: center;
justify-content: flex-end;
margin: calc(var(--spip-margin-bottom) * 1.5) 0; /* Idem marges .box pour aligner */
padding: calc(var(--spip-box-spacing-x) / 3);
border-radius: var(--spip-border-radius);
/* background-color: var(--spip-color-gray-lightest); */
background-color: var(--spip-color-theme);
color: white;
}
.barre-albums > *:not(:first-child):not(:last-child) {
margin-inline-end: 1em;
}
.barre-albums__titrem {
font-size: inherit;
margin-inline-end: auto;
margin-bottom: 0;
}
.barre-albums__tri .tri-drop__btn {
color: inherit;
}
.barre-albums__tri .btn {
margin: 0;
justify-content: flex-start;
}
.barre-albums__tri .tri-drop__menu .on {
background-color: var(--spip-color-theme-lightest);
}
.barre-albums .affichages {
display: inline-flex;
align-items: center;
}
/*
======
ICONES
======
En attendant d'avoir un truc natif en spip 4.x
*/
[class*=icone-albums]:not(.btn) {
display: inline-flex;
}
[class*=icone-albums_]:before,
[class*=icone-albums-after_]:after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
mask-repeat: no-repeat;
mask-size: contain;
background-color: currentColor;
vertical-align: middle;
}
.icone-albums_lg:before {
font-size: 1.25em;
}
[class*=icone-albums_].btn:not(.btn_icone):before {
margin-inline-end: 0.2em;
}
[class*=icone-albums-after_].btn:not(.btn_icone):after {
margin-inline-start: 0.2em;
}
.icone-albums_docs-grand:before {
mask-image: url("#CHEMIN_IMAGE{documents-liste-xx.svg}");
}
.icone-albums_docs-liste:before {
mask-image: url("#CHEMIN_IMAGE{documents-liste-courte-xx.svg}");
}
.icone-albums_docs-cases:before {
mask-image: url("#CHEMIN_IMAGE{documents-cases-xx.svg}");
}
.icone-albums_docs-mini:before {
mask-image: url("#CHEMIN_IMAGE{documents-mini-xx.svg}");
}
.icone-albums_ajouter:before {
mask-image: url("#CHEMIN_IMAGE{albums-add-xx.svg}");
}
.icone-albums_fermer:before,
.icone-albums-after_fermer:after {
mask-image: url("#CHEMIN_IMAGE{albums-fermer-xx.svg}");
}
.icone-albums_move:before {
mask-image: url("#CHEMIN_IMAGE{deplacer-xx.svg}");
}
.icone-albums_readonly:before,
.icone-albums-after_readonly:after {
mask-image: url("#CHEMIN_IMAGE{albums-readonly-xx.svg}");
}
.icone-albums_actions:before {
mask-image: url("#CHEMIN_IMAGE{albums-actions-xx.svg}");
}
.affichages_albums .groupe-btns {
margin-bottom: 0;
}
.affichages__label {
margin-inline-end: 0.5em;
}
.affichages_albums .btn {
padding: 0.25em;
font-size: 1em;
}
/*
=======
FILTRES
=======
*/
.filtres_albums .filtres__heading {
font-size: inherit;
margin-bottom: calc(var(--spip-spacing-y) / 2);
}
.filtres_albums .item a {
display: block;
}
/* Sur 2 colonnes */
.filtres_albums .liste-items_inline {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--spip-spacing-x);
}
.filtres_albums .liste-items_inline .nb {
float: none;
margin-inline-start: 0.5em;
}
.filtres_albums .nb {
float: inline-end;
color: var(--spip-color-gray);
}
/*
============
ALBUMOTHEQUE
============
Rustine pour n'avoir que 2 colonnes même sur grand écran
(faudrait plus de dispositions possibles dans le core)
*/
@media(min-width: 1200px) {
body.albums #conteneur:not(.pleine_largeur) {
grid-template-columns: 20% 1fr;
grid-template-areas:
"navigation contenu"
"extra contenu";
}
}
/*
======
MODELE
======
*/
[(#INCLURE{#CHEMIN{css/albums.css}|direction_css})]
/* pour l'espace privé */
.album.right { float: var(--spip-right); }
.album.left { float: var(--spip-left); }
.album.center { margin-left: auto; margin-right: auto; }
#wysiwyg .album.vignettes .label { display: inline; color: inherit; }