391 lines
9.1 KiB
CSS
391 lines
9.1 KiB
CSS
.crvi-hub-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.crvi-hub-block {
|
|
background: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 6px;
|
|
padding: 2rem 1.5rem;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.crvi-hub-block h2 {
|
|
margin-top: 0;
|
|
font-size: 1.1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.crvi-hub-block .button {
|
|
width: 100%;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.crvi-hub-block form {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Styles pour l'agenda */
|
|
.agenda-container {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.filters-container {
|
|
background: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 6px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.filters {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
align-items: end;
|
|
}
|
|
|
|
.filter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter label {
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
color: #333;
|
|
}
|
|
|
|
.filter input,
|
|
.filter select {
|
|
padding: 0.5rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.filter button {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.filter button[type="submit"] {
|
|
background-color: #0073aa;
|
|
color: white;
|
|
}
|
|
|
|
.filter button[type="submit"]:hover {
|
|
background-color: #005a87;
|
|
}
|
|
|
|
/* Boutons de filtres */
|
|
.filter button.btn-primary {
|
|
background-color: #0073aa;
|
|
color: white;
|
|
}
|
|
|
|
.filter button.btn-primary:hover {
|
|
background-color: #005a87;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.filter button.btn-secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.filter button.btn-secondary:hover {
|
|
background-color: #545b62;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Indicateur de chargement des filtres */
|
|
#loading-indicator {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
#loading-indicator p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Animation de chargement */
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
#loading-indicator p {
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
/* Bouton "Ajouter un RDV" */
|
|
#addEventBtn {
|
|
background-color: #28a745 !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
padding: 0.5rem 1rem !important;
|
|
border-radius: 4px !important;
|
|
font-size: 0.9rem !important;
|
|
cursor: pointer !important;
|
|
transition: background-color 0.2s !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
#addEventBtn:hover {
|
|
background-color: #218838 !important;
|
|
}
|
|
|
|
#addEventBtn i {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.filters {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.filter button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Styles pour le bloc de vue avec grille Bootstrap en 2 colonnes */
|
|
#eventViewBlock .event-grid {
|
|
margin: 0;
|
|
}
|
|
|
|
#eventViewBlock .event-grid > .row {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#eventViewBlock .event-grid .row .row {
|
|
margin-bottom: 0.5rem;
|
|
align-items: center;
|
|
min-height: 2.5rem;
|
|
border-bottom: 1px solid #f8f9fa;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
#eventViewBlock .event-grid .row .row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
#eventViewBlock .event-label {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Icônes :before commentées - on utilise maintenant les balises <i> */
|
|
/*
|
|
#eventViewBlock .event-label::before {
|
|
margin-right: 0.5rem;
|
|
font-size: 1rem;
|
|
opacity: 0.8;
|
|
width: 16px;
|
|
text-align: center;
|
|
font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 6 Pro";
|
|
}
|
|
|
|
#eventViewBlock .event-label.date::before { content: "\f073"; font-weight: 900; }
|
|
#eventViewBlock .event-label.time::before { content: "\f017"; font-weight: 900; }
|
|
#eventViewBlock .event-label.type::before { content: "\f007"; font-weight: 900; }
|
|
#eventViewBlock .event-label.language::before { content: "\f1ab"; font-weight: 900; }
|
|
#eventViewBlock .event-label.beneficiary::before { content: "\f0c0"; font-weight: 900; }
|
|
#eventViewBlock .event-label.intervenant::before { content: "\f0f0"; font-weight: 900; }
|
|
#eventViewBlock .event-label.translator::before { content: "\f1e0"; font-weight: 900; }
|
|
#eventViewBlock .event-label.location::before { content: "\f015"; font-weight: 900; }
|
|
#eventViewBlock .event-label.participants::before { content: "\f0c0"; font-weight: 900; }
|
|
#eventViewBlock .event-label.men::before { content: "\f183"; font-weight: 900; }
|
|
#eventViewBlock .event-label.women::before { content: "\f182"; font-weight: 900; }
|
|
#eventViewBlock .event-label.comment::before { content: "\f075"; font-weight: 900; }
|
|
|
|
#eventViewBlock .event-label.has-dept-icon::before {
|
|
content: var(--dept-icon);
|
|
font-weight: normal;
|
|
}
|
|
*/
|
|
|
|
#eventViewBlock .event-value {
|
|
font-size: 0.9rem;
|
|
margin: 0;
|
|
color: #212529;
|
|
}
|
|
|
|
/* Pastille de statut dans le header du modal */
|
|
#eventModal .modal-header {
|
|
position: relative;
|
|
}
|
|
|
|
#eventModal .statut-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 50px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: 2px solid white;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
z-index: 10;
|
|
}
|
|
|
|
.event-status {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
background-color: #6c757d;
|
|
}
|
|
|
|
/* Styles pour les liens "+ Ajouter" */
|
|
.crvi-add-link {
|
|
font-size: 0.8rem;
|
|
color: #6b7c93;
|
|
text-decoration: none;
|
|
font-weight: 400;
|
|
transition: color 0.2s ease;
|
|
float: right;
|
|
}
|
|
|
|
.crvi-add-link:hover {
|
|
color: #4a5a6b;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Augmentation de la taille des icônes FontAwesome de 25% pour l'ensemble de l'agenda */
|
|
.agenda-container .fas,
|
|
.agenda-container .far,
|
|
.agenda-container .fab,
|
|
.agenda-container .fal,
|
|
#eventModal .fas,
|
|
#eventModal .far,
|
|
#eventModal .fab,
|
|
#eventModal .fal,
|
|
.crvi-add-link .fas,
|
|
.crvi-add-link .far,
|
|
.crvi-add-link .fab,
|
|
.crvi-add-link .fal {
|
|
font-size: 1.25em !important;
|
|
}
|
|
|
|
.plus-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.plus-label a {
|
|
color: #0097e6;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.plus-label a:hover {
|
|
color: #0073aa;
|
|
}
|
|
|
|
.plus-label a i {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.modal .select2-container {
|
|
z-index: 2000!important;
|
|
width: 100%
|
|
}
|
|
|
|
.modal .select2-dropdown,.modal .select2-results,.modal.show .select2-container--open .select2-dropdown,.entity-create-modal .select2-container,.entity-create-modal .select2-dropdown,.entity-create-modal .select2-results {
|
|
z-index: 2000!important;
|
|
}
|
|
|
|
.entity-create-modal .select2-container,.entity-create-modal .select2-dropdown,.entity-create-modal .select2-results {
|
|
width: 100% !important;
|
|
}
|
|
|
|
body>.select2-container {
|
|
z-index: 2000!important
|
|
}
|
|
|
|
body>.select2-dropdown {
|
|
z-index: 2000!important
|
|
}
|
|
|
|
.modal.show~.select2-container,.modal.show~.select2-dropdown {
|
|
z-index: 2000!important
|
|
}
|
|
|
|
/* Contexte front uniquement (shortcode agenda intervenant) :
|
|
Forcer le Select2 à passer au-dessus du modal Avada (z-index modal ~ 99999) */
|
|
.crvi-intervenant-agenda #eventModal .select2-container,
|
|
.crvi-intervenant-agenda #eventModal .select2-dropdown,
|
|
.crvi-intervenant-agenda #eventModal .select2-results {
|
|
z-index: 100002 !important;
|
|
}
|
|
|
|
/* Contexte front: forcer affichage et largeur des conteneurs Select2 */
|
|
.crvi-intervenant-agenda .select2-container {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Contexte front: couleur de police foncée pour la grille du modal */
|
|
.crvi-intervenant-agenda #eventModal .event-grid {
|
|
color: #333 !important;
|
|
}
|
|
.crvi-intervenant-agenda #eventModal .event-grid .event-label,
|
|
.crvi-intervenant-agenda #eventModal .event-grid .event-value {
|
|
color: #333 !important;
|
|
}
|
|
|
|
/* Correction du z-index de TOUTES les modales et backdrop
|
|
|
|
SOLUTION : Combinaison JavaScript + CSS
|
|
- JavaScript force toutes les modales et backdrop à être enfants directs du <body>
|
|
- JavaScript réordonne : backdrop PUIS modal dans le DOM
|
|
- CSS force des z-index élevés pour passer au-dessus d'Avada
|
|
|
|
Avec cette approche, les stacking contexts sont correctement gérés pour :
|
|
- eventModal (modal principale)
|
|
- createBeneficiaireModal, createIntervenantModal, createTraducteurModal, createLocalModal
|
|
- declarationIncidentModal
|
|
- beneficiaireHistoriqueModal
|
|
- rdvModal
|
|
*/
|
|
|
|
/* Backdrop : sous toutes les modales, au-dessus d'Avada */
|
|
body.modal-open .modal-backdrop {
|
|
z-index: 99999 !important;
|
|
}
|
|
|
|
/* TOUTES les modales : au-dessus du backdrop et d'Avada */
|
|
.modal {
|
|
z-index: 100000 !important;
|
|
position: fixed !important;
|
|
} |