1062 lines
22 KiB
CSS
Executable File
1062 lines
22 KiB
CSS
Executable File
html, body
|
||
{
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-rendering: optimizeLegibility;
|
||
-webkit-text-size-adjust: 100%;
|
||
-ms-text-size-adjust: 100%;
|
||
}
|
||
|
||
/* Avoid blurring by not applying transforms to text-level elements */
|
||
h1,h2,h3,h4,h5,h6,p,span,label,a,button,input,td,th,strong,em {
|
||
transform: none !important;
|
||
-webkit-transform: none !important;
|
||
backface-visibility: hidden !important;
|
||
-webkit-backface-visibility: hidden !important;
|
||
}
|
||
|
||
/* Tables responsive fallback for cases where class was applied on <table> */
|
||
.table.table-responsive, table.table-responsive {
|
||
display: block;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* Slight touch target improvements */
|
||
.btn { min-height: 36px; }
|
||
/* Prevent image upscaling blurriness */
|
||
img { image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }
|
||
|
||
#barre_laterale_d{
|
||
background: white;
|
||
padding: 10px;
|
||
width: 240px !important;
|
||
border: 2px ridge #d9cfcf;
|
||
padding:5px !important
|
||
}
|
||
|
||
|
||
#barre_laterale_d input textarea{
|
||
width:100%
|
||
}
|
||
|
||
input[name="test_connexion"]{
|
||
color:white;
|
||
background:red
|
||
}
|
||
|
||
input[name="numeroClient_C"]{
|
||
|
||
}
|
||
|
||
.btn-info{
|
||
background-color:#08C5D1;
|
||
color:white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.btn-info:hover{
|
||
background-color:white
|
||
color:#286090;
|
||
}
|
||
|
||
.btn-info-context{
|
||
background:#7D4FFE;
|
||
color:white;
|
||
border:2px solid #a49d9d;
|
||
border-top-left-radius: 50px; /* Arrondi du coin supérieur gauche */
|
||
border-bottom-left-radius: 50px; /* Arrondi du coin inférieur gauche */
|
||
cursor: pointer;
|
||
transition: all 0.3s ease; /* Animation fluide */
|
||
transform: scale(0.8); /* Réduire la taille du bouton */
|
||
}
|
||
|
||
.btn-info-context:hover{
|
||
background:#7D4FFE;
|
||
color:white;
|
||
border:2px solid #a49d9d;
|
||
transform: scale(1); /* Rétablir la taille normale au survol */
|
||
}
|
||
|
||
|
||
.btn-cacher-contexte{
|
||
background:red;
|
||
color:white;
|
||
border:2px solid #a49d9d;
|
||
border-top-right-radius: 100px;
|
||
border-bottom-right-radius: 100px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease; /* Animation fluide */
|
||
transform: scale(0.8); /* Réduire la taille du bouton */
|
||
}
|
||
|
||
.btn-cacher-contexte:hover {
|
||
border:2px solid #a49d9d;
|
||
transform: scale(1); /* Rétablir la taille normale au survol */
|
||
}
|
||
|
||
legend{
|
||
background: #286090 !important;
|
||
}
|
||
|
||
.btn-primary{
|
||
background: #286090;
|
||
}
|
||
|
||
.btn-warning{
|
||
background:red;
|
||
color:white
|
||
}
|
||
.btn{
|
||
border-radius:0
|
||
}
|
||
|
||
/* Modal */
|
||
.modal-header{
|
||
background:#286090;
|
||
color:white
|
||
}
|
||
|
||
.modal-header .close{
|
||
color:white !important;
|
||
background:transparent !important;
|
||
border:1px solid white !important
|
||
}
|
||
|
||
.modal-header legend{
|
||
background:transparent !important;
|
||
font-size:14px;
|
||
text-align:right
|
||
}
|
||
|
||
.modal-footer .btn-default{
|
||
border: solid #286090 !important;
|
||
color: #286090 !important;
|
||
|
||
}
|
||
|
||
.modal-title{
|
||
font-size:16px !important
|
||
}
|
||
|
||
@media (max-width: 1199px) {
|
||
.main{
|
||
margin-left:0 !important
|
||
}
|
||
}
|
||
|
||
|
||
td input[readonly]{
|
||
background: #f7f7f7 !important;
|
||
}
|
||
|
||
#barre_laterale_d input{
|
||
color:black !important;
|
||
font-size:12px;
|
||
font-weight:700
|
||
}
|
||
|
||
#barre_laterale_d .form-control{
|
||
font-weight: 700;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.sr-only{
|
||
display:none;
|
||
}
|
||
|
||
table{
|
||
background-color:white !important
|
||
}
|
||
|
||
.table th:hover {
|
||
background-color: none !important;
|
||
}
|
||
|
||
.table tr:hover{
|
||
font-style: normal !important;
|
||
}
|
||
.table td:hover{
|
||
font-style: normal !important;
|
||
}
|
||
.table {
|
||
--bs-table-color: null !important;
|
||
--bs-table-striped-color:null !important
|
||
/* --bs-table-color: yellow; */
|
||
}
|
||
|
||
.table{
|
||
--bs-table-bg: null !important;
|
||
}
|
||
|
||
thead tr{
|
||
color:black
|
||
}
|
||
|
||
fieldset legend,form legend{
|
||
background:#286090
|
||
}
|
||
|
||
legend{
|
||
background:#027be3
|
||
}
|
||
|
||
#barre_laterale_d input{
|
||
width:100%;
|
||
text-align:left;
|
||
border:none;
|
||
}
|
||
|
||
#barre_laterale_d .form-control{
|
||
font-size:12px !important
|
||
}
|
||
|
||
footer{
|
||
background:transparent;
|
||
color:black !important
|
||
}
|
||
|
||
.filter-option-inner-inner{
|
||
background-color : #D4D3DC !important;
|
||
}
|
||
|
||
|
||
.table > thead
|
||
{
|
||
background-color: #5c656a;
|
||
color:white !important;
|
||
}
|
||
|
||
thead{
|
||
font-size: 13px;
|
||
}
|
||
|
||
thead tr {
|
||
color: white;
|
||
}
|
||
|
||
th {
|
||
background-color: #027BE3;
|
||
color: white;
|
||
}
|
||
|
||
|
||
#barre_laterale_d{
|
||
max-height: calc(100vh - 106px);
|
||
overflow: auto;
|
||
}
|
||
|
||
#barre_laterale_d input textarea{
|
||
width:100%
|
||
}
|
||
|
||
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
|
||
text-align:center;
|
||
font-weight: bold;
|
||
background-color:#696969;
|
||
}
|
||
|
||
h6 a{
|
||
text-decoration: underline;
|
||
}
|
||
|
||
h6 a:hover{
|
||
background-color:#08C5D1;
|
||
color:white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.mb-2 textarea{
|
||
font-size:9pt; width:100%;
|
||
border: 1px solid #767676;
|
||
}
|
||
|
||
.mb-2 .text-center{
|
||
font-size:9pt;
|
||
font-weight:bold;
|
||
background-color: orange; /*#6c757d;*/
|
||
color: white;
|
||
}
|
||
|
||
.image-container img {
|
||
transition: filter 0.3s ease-in-out;
|
||
}
|
||
|
||
.image-container img:hover {
|
||
filter: grayscale(100%);
|
||
}
|
||
|
||
.photo-container img {
|
||
transition: transform 0.3s ease-in-out;
|
||
cursor:pointer;
|
||
}
|
||
|
||
.photo-container img:hover {
|
||
transform: scale(1.1);
|
||
cursor:pointer;
|
||
}
|
||
|
||
.initials {
|
||
display: inline-block; /* Nécessaire pour appliquer border-radius */
|
||
width: 25px; /* Largeur du cercle */
|
||
height: 25px; /* Hauteur du cercle, doit être égale à la largeur */
|
||
background-color: #4caf50; /* Couleur de fond */
|
||
border-radius: 15%; /* Pour arrondir complètement l'élément */
|
||
color: #fff; /* Couleur du texte */
|
||
text-align: center; /* Centrer le texte */
|
||
line-height: 25px; /* Aligner verticalement le texte */
|
||
}
|
||
|
||
/* Style commun (desktop par défaut) */
|
||
#a_deconnect,
|
||
#a_actualiser {
|
||
font-size: 11pt;
|
||
border: 1px solid #7D4FFE;
|
||
border-radius: 5px;
|
||
padding: 4px 10px;
|
||
background-color: #7D4FFE;
|
||
color: white;
|
||
font-weight: bold;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 36px; /* hauteur fixe */
|
||
line-height: 1; /* éviter que le texte déborde */
|
||
}
|
||
|
||
/* Hover */
|
||
#a_deconnect:hover,
|
||
#a_actualiser:hover {
|
||
background-color: white !important;
|
||
color: #7D4FFE !important;
|
||
border-color: #7D4FFE !important;
|
||
}
|
||
|
||
#a_deconnect:hover i,
|
||
#a_actualiser:hover i {
|
||
color: #7D4FFE !important;
|
||
}
|
||
|
||
|
||
#sidebar-nav .nav-link i{
|
||
color: #fff !important;
|
||
}
|
||
|
||
#sidebar-nav .nav-link:hover i{
|
||
color: #696969 !important;
|
||
}
|
||
|
||
.legend-title {
|
||
color: #2c3e50;
|
||
font-weight: 600;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #3498db;
|
||
text-align: center;
|
||
white-space: normal !important; /* permet le retour à la ligne */
|
||
word-wrap: break-word !important; /* force la coupure si un mot est trop long */
|
||
overflow-wrap: break-word !important;
|
||
}
|
||
|
||
/*Spinner responsive*/
|
||
.spinner-responsive {
|
||
padding-top: 20px;
|
||
text-align: center;
|
||
color: #7d4ffe;
|
||
}
|
||
|
||
.spinner-responsive i {
|
||
font-size: clamp(2rem, 8vw, 5rem) !important;
|
||
animation: fa-spin 2s infinite linear;
|
||
}
|
||
|
||
/* Styles responsives pour SweetAlert */
|
||
.responsive-swal-popup {
|
||
border-radius: 12px !important;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
|
||
}
|
||
|
||
.responsive-swal-title {
|
||
font-size: clamp(16px, 4vw, 18px) !important;
|
||
line-height: 1.4 !important;
|
||
word-wrap: break-word !important;
|
||
overflow-wrap: break-word !important;
|
||
text-align: center !important;
|
||
padding: 10px 15px !important;
|
||
margin-bottom: 15px !important;
|
||
}
|
||
|
||
.responsive-swal-html {
|
||
font-size: clamp(14px, 3.5vw, 16px) !important;
|
||
line-height: 1.4 !important;
|
||
word-wrap: break-word !important;
|
||
overflow-wrap: break-word !important;
|
||
}
|
||
|
||
/* Scrollbar personnalisée pour le défilement */
|
||
.responsive-swal-title::-webkit-scrollbar,
|
||
.responsive-swal-html::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.responsive-swal-title::-webkit-scrollbar-track,
|
||
.responsive-swal-html::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.responsive-swal-title::-webkit-scrollbar-thumb,
|
||
.responsive-swal-html::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.responsive-swal-title::-webkit-scrollbar-thumb:hover,
|
||
.responsive-swal-html::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
#lienLogo{
|
||
width:100px;
|
||
}
|
||
|
||
/* Media queries spécifiques pour SweetAlert */
|
||
@media (max-width: 576px) {
|
||
.responsive-swal-popup {
|
||
margin: 10px !important;
|
||
width: calc(100vw - 20px) !important;
|
||
max-width: calc(100vw - 20px) !important;
|
||
}
|
||
|
||
.responsive-swal-title {
|
||
font-size: 16px !important;
|
||
padding: 8px 10px !important;
|
||
}
|
||
|
||
.swal2-actions {
|
||
flex-direction: column !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.swal2-confirm,
|
||
.swal2-cancel {
|
||
width: 100% !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
#lienLogo{
|
||
width:30px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
.responsive-swal-popup {
|
||
padding: 15px !important;
|
||
}
|
||
|
||
.responsive-swal-title {
|
||
font-size: 15px !important;
|
||
padding: 5px 8px !important;
|
||
}
|
||
|
||
#lienLogo{
|
||
width:30px;
|
||
}
|
||
}
|
||
|
||
|
||
/* Classe pour cacher sur mobile et afficher sur grand écran */
|
||
.hide-on-mobile {
|
||
display: none;
|
||
}
|
||
|
||
/* Classe pour positionner à l'extrême droite */
|
||
.view-end {
|
||
margin-left: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Style pour tous les éléments disabled */
|
||
.form-control:disabled,
|
||
.form-select:disabled,
|
||
.form-check-input:disabled,
|
||
.btn:disabled,
|
||
input:disabled,
|
||
select:disabled,
|
||
textarea:disabled {
|
||
background-color: #e5e7e6 !important;
|
||
font-weight: bold !important;
|
||
}
|
||
|
||
/* Style pour tous les éléments readonly */
|
||
.form-control[readonly],
|
||
input[readonly],
|
||
select[readonly],
|
||
textarea[readonly] {
|
||
background-color: #e5e7e6 !important;
|
||
font-weight: bold !important;
|
||
}
|
||
|
||
/* Affichage sur grand écran */
|
||
@media (min-width: 768px) {
|
||
.hide-on-mobile {
|
||
display: inline;
|
||
}
|
||
}
|
||
|
||
/* Garantir que tous les éléments restent sur la même ligne */
|
||
.card-header h5 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.card-header h5 i,
|
||
.card-header h5 .hide-on-mobile,
|
||
.card-header h5 .view-end {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
/* === Correctifs affichage textes et tables === */
|
||
body, h1, h2, h3, h4, h5, h6, p, span, a, label, td, th, strong, em, button, input {
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
transform: none !important;
|
||
}
|
||
|
||
small {
|
||
display: inline;
|
||
white-space: normal !important; /* permet le retour à la ligne */
|
||
word-wrap: break-word !important; /* force la coupure si un mot est trop long */
|
||
overflow-wrap: break-word !important;
|
||
text-align:center;
|
||
}
|
||
|
||
|
||
|
||
/* Tables responsive fallback - web par défaut */
|
||
.table.table-responsive, table.table-responsive {
|
||
display: table;
|
||
width: 100%;
|
||
}
|
||
|
||
#btn_sidebar{
|
||
margin-left:15px;
|
||
margin-right:25px;
|
||
}
|
||
|
||
#btn_sidebar:hover{
|
||
background-color: #E4E4E4 !important;
|
||
}
|
||
|
||
.photoId{
|
||
width: 30px !important;
|
||
height: 30px !important;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.logo img {
|
||
width: 120px; /* choisis la taille qui te convient */
|
||
height: auto; /* conserve les proportions */
|
||
max-height: 50px; /* empêche que ça déborde trop en hauteur */
|
||
object-fit: contain; /* évite les déformations */
|
||
}
|
||
|
||
/* Styles pour les sélecteurs mobiles */
|
||
.mobile-select {
|
||
max-width: 100%;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.photo-vide{
|
||
color: #ccc;
|
||
font-size: 30px !important;
|
||
}
|
||
|
||
/* Couleurs spécifiques */
|
||
.color-1 { background-color: #726a57; }
|
||
.color-2 { background-color: orange; }
|
||
.color-3 { background-color: red; }
|
||
|
||
.form-control, .form-select, .form-control-plaintext{
|
||
border: 1px solid #333533 !important;
|
||
}
|
||
|
||
/* Animation pour les progress bars */
|
||
.progress-bar {
|
||
transition: width 1s ease-in-out;
|
||
}
|
||
|
||
|
||
.progress {
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
border: 1px solid #333533;
|
||
height: 20px !important;
|
||
}
|
||
|
||
.progress-bar {
|
||
font-weight: 500;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
#link_maps{
|
||
text-decoration-line: underline;
|
||
}
|
||
|
||
#link_maps i{
|
||
color: red !important;
|
||
}
|
||
|
||
#link_maps:visited{
|
||
color: #ff00ff !important;
|
||
}
|
||
|
||
|
||
/* En mobile : scroll horizontal */
|
||
@media (max-width: 768px) {
|
||
/* Transformation du tableau en cartes sur mobile */
|
||
.table-responsive table,
|
||
.table-responsive thead,
|
||
.table-responsive tbody,
|
||
.table-responsive th,
|
||
.table-responsive td,
|
||
.table-responsive tr {
|
||
display: block;
|
||
}
|
||
|
||
.table-responsive thead tr {
|
||
position: absolute;
|
||
top: -9999px;
|
||
left: -9999px;
|
||
}
|
||
|
||
.table-responsive tr {
|
||
border: 1px solid #ccc;
|
||
margin-bottom: 1rem;
|
||
border-radius: 0.25rem;
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.table-responsive td button{
|
||
font-size: 1.8rem !important;
|
||
font-weight: bold !important;
|
||
}
|
||
|
||
.table-responsive td {
|
||
border: none;
|
||
border-bottom: 1px solid #eee;
|
||
position: relative;
|
||
padding-left: 50%;
|
||
white-space: normal;
|
||
text-align: left;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 2.5rem;
|
||
}
|
||
|
||
.table-responsive td:before {
|
||
content: attr(data-label);
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0.5rem;
|
||
width: 45%;
|
||
padding-right: 10px;
|
||
transform: translateY(-50%);
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Styles spécifiques pour les colonnes importantes */
|
||
.table-responsive td:nth-of-type(1) {
|
||
padding-left: 0.5rem;
|
||
display: block;
|
||
text-align: center;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.table-responsive td:nth-of-type(1):before {
|
||
display: none;
|
||
}
|
||
|
||
.table-responsive td:nth-of-type(2) {
|
||
padding-left: 0.5rem;
|
||
display: block;
|
||
text-align: center;
|
||
border-bottom: none;
|
||
}
|
||
/**/
|
||
.table-responsive td:nth-of-type(2):before {
|
||
display: none;
|
||
}
|
||
|
||
/* Cacher les colonnes moins importantes sur mobile */
|
||
.table-responsive td.d-none.d-md-table-cell {
|
||
display: none;
|
||
}
|
||
|
||
.photoId{
|
||
width: 50px !important;
|
||
height: 50px !important;
|
||
}
|
||
|
||
.btn-info, .btn-info i, .btn-sm, .btn-sm i{
|
||
font-size: 1.5rem !important;
|
||
}
|
||
|
||
.btn-info-context i, .btn-cacher-contexte i{
|
||
font-size: 1.5rem !important;
|
||
}
|
||
|
||
#lienLogo{
|
||
width:30px;
|
||
}
|
||
|
||
.logo img {
|
||
width: 70px !important;
|
||
height: auto !important;
|
||
max-height: 40px;
|
||
margin-left:-37px;
|
||
}
|
||
|
||
#a_deconnect{
|
||
margin-left:-120px;
|
||
margin-right:20px;
|
||
}
|
||
|
||
#a_deconnect,
|
||
#a_actualiser {
|
||
font-size: 1.5rem !important;
|
||
|
||
border-radius: 50%;
|
||
width: 20px; /* taille uniforme (carré rond) */
|
||
height: 20px;
|
||
padding: 0;
|
||
}
|
||
|
||
#a_deconnect {
|
||
background-color: #7d4ffe;
|
||
border: 1px solid #7d4ffe;
|
||
color: #fff;
|
||
}
|
||
|
||
#a_actualiser {
|
||
background-color: #fff;
|
||
border: 1px solid #7d4ffe;
|
||
color: #7d4ffe;
|
||
}
|
||
|
||
#header{
|
||
border-bottom:1px solid #000;
|
||
}
|
||
|
||
#a_deconnect i,
|
||
#a_actualiser i {
|
||
font-size: 1.2rem !important;
|
||
}
|
||
|
||
|
||
#a_deconnect span, #a_actualiser span {
|
||
display: none !important; /* Cache le texte sur mobile */
|
||
}
|
||
|
||
.photo-vide{
|
||
font-size: 4rem !important;
|
||
}
|
||
|
||
.legend-title{
|
||
|
||
color: #fff !important;
|
||
}
|
||
|
||
h4 i{
|
||
font-size: 1.6rem !important;
|
||
}
|
||
|
||
#a_deconnect i, #a_actualiser i{
|
||
font-weight:bold;
|
||
font-size: 1.5rem !important;
|
||
}
|
||
|
||
#btn_filtre, #btn_filtre span, #btn_filtre i{
|
||
font-size: 1.8rem !important;
|
||
}
|
||
|
||
.btn_autre, .btn_autre span, .btn_autre i, marquee{
|
||
font-size: 1.8rem !important;
|
||
}
|
||
|
||
#link_maps, #link_maps i{
|
||
font-size:1.8rem !important;
|
||
}
|
||
|
||
body{
|
||
background-color : #EBF2FA !important;
|
||
}
|
||
|
||
body, p, span, a, label, td, th, small, small i, textarea {
|
||
font-size: 1.6rem !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
h1, input, select { font-size: 2.1rem !important; font-weight: 800 !important; }
|
||
h2, h2 i { font-size: 2rem !important; font-weight: 700 !important; }
|
||
h3, h4, h5, h6 { font-size: 1.8rem !important; font-weight: 600 !important; }
|
||
h3 i, h4 i, h5 i, h6 i { font-size: 1.8rem !important; font-weight: 600 !important; }
|
||
|
||
.h4 { font-size: 1.8rem !important; font-weight: 600 !important; }
|
||
|
||
|
||
legend, legend i {font-size:2.1rem !important;}
|
||
|
||
input[type="text"], input[type="file"], .mobile-select{
|
||
border: 1px solid gray;
|
||
}
|
||
|
||
.form-control-plaintext, .etatRdv{
|
||
font-size: 1.8rem !important;
|
||
}
|
||
|
||
|
||
/* Agrandissement de l’icône menu mobile */
|
||
.toggle-sidebar-btn {
|
||
font-size: 2rem; /* plus grande en mobile */
|
||
cursor: pointer;
|
||
}
|
||
|
||
#bell{
|
||
color: #2c3e50 !important;
|
||
}
|
||
|
||
.bi-bell{
|
||
font-size: 2.5rem !important;
|
||
|
||
}
|
||
|
||
#span_notification{
|
||
font-size: 1.3rem !important;
|
||
}
|
||
|
||
#div_numero strong{
|
||
font-size: 1.8rem !important;
|
||
}
|
||
|
||
#h4_titre, #h4_titre i{
|
||
font-size: 2rem !important;
|
||
}
|
||
|
||
#id_titre_page{
|
||
font-size: 2rem !important;
|
||
word-wrap: break-word !important;
|
||
overflow-wrap: break-word !important;
|
||
}
|
||
|
||
.message-text {
|
||
background-color: #e5e7e6;
|
||
border: 1px solid #000;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
margin-bottom: 10px;
|
||
font-size: 0.9rem;
|
||
line-height: 1.4;
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
box-sizing: border-box; /* Important pour inclure le padding dans la largeur */
|
||
}
|
||
|
||
.ml-2 i{
|
||
font-size: 2rem !important;
|
||
}
|
||
}
|
||
|
||
/* Menu mobile en bas d'écran */
|
||
.mobile-bottom-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1001;
|
||
background-color: #FAFAFA;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 8px 0;
|
||
display: none;
|
||
}
|
||
|
||
.mobile-nav-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.mobile-nav-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.mobile-nav-link {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
color: #2c3e50;
|
||
padding: 5px 0;
|
||
font-size: 0.5rem;
|
||
}
|
||
|
||
.mobile-nav-icon {
|
||
font-size: 2.0rem !important;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.mobile-nav-label{
|
||
font-size: 10pt !important;
|
||
}
|
||
|
||
.mobile-nav-icon:active, .mobile-nav-icon:focus-visible {
|
||
color:#5784BA !important;
|
||
}
|
||
|
||
.mobile-nav-label:active, .mobile-nav-label:focus-visible{
|
||
color:#5784BA !important;
|
||
}
|
||
|
||
/* Styles pour le menu burger */
|
||
.burger-menu-container {
|
||
position: relative;
|
||
}
|
||
|
||
.burger-icon {
|
||
font-size: 1.8rem !important;
|
||
}
|
||
|
||
.burger-dropdown-menu {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
right: 10px; /* Changé de left:50% à right:10px pour aligner à droite */
|
||
transform: none; /* Supprimé le translateX */
|
||
background-color: #FAFAFA;
|
||
border-radius: 8px;
|
||
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
|
||
padding: 10px;
|
||
min-width: 180px; /* Légèrement plus large pour les libellés longs */
|
||
display: none;
|
||
flex-direction: column;
|
||
z-index: 1002;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.burger-dropdown-menu.show {
|
||
display: flex;
|
||
}
|
||
|
||
.burger-menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px 15px; /* Plus d'espace */
|
||
text-decoration: none;
|
||
color: #2c3e50;
|
||
border-bottom: 1px solid #eee;
|
||
white-space: nowrap; /* Empêche le texte de passer à la ligne */
|
||
}
|
||
|
||
.burger-menu-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.burger-menu-item i {
|
||
margin-right: 12px;
|
||
font-size: 1.5rem !important;
|
||
font-weight: 500;
|
||
min-width: 20px; /* Largeur fixe pour l'icône */
|
||
}
|
||
|
||
.burger-menu-item span {
|
||
font-size: 1.5rem !important;
|
||
font-weight: 500; /* Plus gras pour mieux lire */
|
||
}
|
||
|
||
/* Overlay pour fermer le menu en cliquant ailleurs */
|
||
.burger-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: transparent;
|
||
z-index: 1000;
|
||
display: none;
|
||
}
|
||
|
||
.burger-overlay.show {
|
||
display: block;
|
||
}
|
||
|
||
/* Alternative : Aligner à gauche avec un décalage */
|
||
/* Si vous préférez aligner à gauche plutôt qu'à droite */
|
||
.burger-dropdown-menu.left-aligned {
|
||
left: 10px; /* Pour aligner à gauche */
|
||
right: auto;
|
||
transform: none;
|
||
}
|
||
|
||
/* Pour les très petits écrans, on s'assure que le menu ne dépasse pas */
|
||
@media (max-width: 360px) {
|
||
.burger-dropdown-menu {
|
||
right: 5px;
|
||
min-width: 160px;
|
||
}
|
||
|
||
.burger-menu-item {
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.burger-menu-item span {
|
||
font-size: 0.85rem;
|
||
}
|
||
}
|
||
|
||
/* Cacher le menu desktop sur mobile */
|
||
@media (max-width: 991.98px) {
|
||
.desktop-menu {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-bottom-nav {
|
||
display: block;
|
||
}
|
||
|
||
/* Ajuster le contenu principal pour éviter qu'il soit caché par le menu */
|
||
.main {
|
||
padding-bottom: 70px !important;
|
||
}
|
||
|
||
/* Masquer le bouton sidebar en mode mobile */
|
||
#btn_sidebar {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Ajustements pour le header quand le bouton est masqué */
|
||
.header .d-flex.align-items-center.justify-content-between {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
/* Sur desktop, cacher le menu mobile */
|
||
@media (min-width: 992px) {
|
||
.mobile-bottom-nav {
|
||
display: none !important;
|
||
}
|
||
|
||
.desktop-menu {
|
||
display: block;
|
||
}
|
||
|
||
#btn_sidebar {
|
||
display: inline-block !important;
|
||
}
|
||
} |