et cree des coutures visibles), coins arrondis. */
.modal-content table {
border-collapse:separate;
border-spacing:0;
border-radius:14px;
overflow:hidden;
}
.modal-content thead tr, .modal-content thead.thead-dark tr {
background: var(--table-header-bg)!important;
}
.modal-content thead th, .modal-content thead.thead-dark th {
background:transparent!important;
color:#FFF!important;
border:none!important;
font-weight:700;
}
.page-content {margin: 0 12px;}
/* Bandeaux d'alerte : on garde les fonds colores semantiques de Bootstrap (danger/success/warning/info),
juste des coins arrondis, un texte plus marque, et un effet glass (fond semi-transparent +
bordure + ombre) pour rester coherent avec le reste de l'UI.
PAS de backdrop-filter ici (contrairement aux autres cartes glass de l'app) : meme en
position:static, backdrop-filter fait basculer l'element dans la meme "case" d'empilement
que les elements positionnes en z-index:auto (menus deroulants, popovers...) - sans z-index
explicite ni cote, c'est alors l'ordre du DOM qui tranche, et une alerte rendue apres un
formulaire (cas frequent) passe systematiquement devant son menu deroulant, quel que soit
le z-index qu'on lui donne. Confirme aux DevTools sur Ordonnancement (bootstrap-select). */
.alert-danger, .alert-success, .alert-warning, .alert-info
{
border-radius:12px;
font-weight:600;
color:#FFF;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,20,0.15);
}
/* Teintes plus saturees (proches des couleurs semantiques reelles plutot que les pastels
Bootstrap d'origine, trop pales une fois passes en transparence) pour rester bien visibles
malgre l'effet glass - important pour alert-danger notamment, qui doit rester clairement
percu comme une alerte. */
.alert-info { background-color: var(--alert-info-bg)!important; }
.alert-success { background-color: var(--alert-success-bg)!important; }
.alert-warning { background-color: var(--alert-warning-bg)!important; color:var(--alert-warning-text)!important; }
.alert-danger { background-color: var(--alert-danger-bg)!important; }
/* #flash-messages (messages flash Symfony, distincts des toasts jQuery) est rendu tout en haut
de .wrapper, AVANT le rail (voir layout.html.twig) : en flux normal plein-largeur (p-0 m-0
d'origine), il repousse le header vers le bas mais pas le rail, qui est position:fixed donc
toujours ancre en haut du viewport - les deux se retrouvent superposes sur les 76 premiers
pixels, et le rail (z-index plus eleve) passe par-dessus le debut du message. On decale le
message a droite du rail sur desktop (meme alignement que .main-header/.content-wrapper),
et on lui donne juste une petite marge sur mobile (comme le bandeau du header). */
#flash-messages .alert {
margin: 8px 8px 0;
}
@media only screen and (min-width:993px) {
#flash-messages .alert {
margin-left: 88px;
}
}
h1 { font-size:1.5rem; }
a { color:#222;}
a:hover, a:focus { color:#000;}
.text-small { font-size:0.6rem }
a.lien{color:#222 !important;}
a.lien:hover, a.lien:focus { color:#33b5e5 !important;}
strong, b {font-weight: bold;}
.hidden {
display: none;
}
.navbar {
width: 100%;
justify-content: left;
}
.color-blue { color:#33b5e5 }
.color-grey { color:#777!important; }
.color-green { color:#89C76B!important; }
.color-orange { color:#fbb159!important; }
.color-red { color: #F93154!important; }
.font-size-30 { font-size:30px; }
.font-size-24 { font-size:24px; }
.font-size-20 { font-size:20px; }
.font-size-17 { font-size:17px; }
.font-size-15 { font-size:15px; }
.font-size-12 { font-size:12px; }
.font-size-10 { font-size:10px; }
.navbar .user-site {position: absolute;top: 35%;right: 18px;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);margin-top: 0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size: 15px;line-height:1.2;text-align:right;font-weight:700;color:#FFF;}
#menu-imprimante-statut { display:inline-flex;align-items:center;gap:4px;line-height:1; }
.dropdown-toggle:after {vertical-align: middle;color: #fff;}
.table-icon {
font-size: 18px;
}
@media only screen and (max-width:575px){
.sm-hidden {
display: none;
}
}
.link-disabled
{
cursor: not-allowed!important;
opacity: 0.5!important;
text-decoration: none!important;
}
.bg-dark { background-color: #303549!important;}
.bg-grey { background-color: #555!important;}
.bg-warning { background-color: #F57C00 !important }
.bg-blue { background-color: #00aeca !important }
.bg-red { background-color: #ca000063 !important }
.alert-error
{
color: #6b1f33;
background-color: #f5d8e0;
border-color: #f1c9d3;
}
.form-input-text
{
height: 55px;
font-size: 20px;
}
.ligne-selection:hover{cursor:pointer;background:#CCCCCC !important;}
.hidden-element
{
width: 0!important;
overflow: hidden!important;
height:0!important;
padding:0!important;
opacity:0!important;
}
/*=====================================
DATATABLE
=====================================*/
.dataTables_filter
{
width: 50%!important;
float: left!important;
text-align: left!important;
}
.dataTables_filter label
{
width: 100%!important;
}
.dataTables_filter input
{
width: 100%!important;
background-color: #FFF!important;
margin-left: 0!important;
}
@media only screen and (max-width:767px){
.dataTables_filter
{
width: 100%!important;
}
}
/*=====================================
GRADIENT
=====================================*/
.grey-gradient
{
background: rgb(221,221,221);
background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(170,170,170,1) 100%);
}
.new-blue-gradient
{
background: #00aeca;
background: -moz-linear-gradient(left, #00aeca 0%, #1b75bc 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #00aeca), color-stop(100%, #1b75bc));
background: -webkit-linear-gradient(left, #00aeca 0%, #1b75bc 100%);
background: -o-linear-gradient(left, #00aeca 0%, #1b75bc 100%);
background: -ms-linear-gradient(left, #00aeca 0%, #1b75bc 100%);
background: linear-gradient(to right, #00aeca 0%, #1b75bc 100%);
}
.new-green-gradient
{
background: #89c76b;
background: -moz-linear-gradient(left, #89c76b 0%, #5aba53 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #89c76b), color-stop(100%, #5aba53));
background: -webkit-linear-gradient(left, #89c76b 0%, #5aba53 100%);
background: -o-linear-gradient(left, #89c76b 0%, #5aba53 100%);
background: -ms-linear-gradient(left, #89c76b 0%, #5aba53 100%);
background: linear-gradient(to right, #89c76b 0%, #5aba53 100%);
}
.new-gradient-grey
{
background: #f1f2f2;
background: -moz-linear-gradient(left, #f1f2f2 0%, #d1d3d4 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #f1f2f2), color-stop(100%, #d1d3d4));
background: -webkit-linear-gradient(left, #f1f2f2 0%, #d1d3d4 100%);
background: -o-linear-gradient(left, #f1f2f2 0%, #d1d3d4 100%);
background: -ms-linear-gradient(left, #f1f2f2 0%, #d1d3d4 100%);
background: linear-gradient(to right, #f1f2f2 0%, #d1d3d4 100%);
}
.new-orange-gradient
{
background: #fc8662;
background: linear-gradient(40deg, #fca362, #fc8662) !important;
}
.new-purple-gradient
{
background: #7873f5;
background: linear-gradient(40deg, #ae73f5, #7873f5) !important;
}
.new-red-gradient
{
background: #fc6278;
background: linear-gradient(40deg, #fc6662, #fc6278) !important;
}
/*=====================================
MODAL
=====================================*/
.modal-header .close { font-size: 1.3rem!important;line-height:1!important; }
.modal-header-no-close .close { display:none }
.modal-xl { max-width:1240px!important; }
.modal-lg .modal-xl { max-width:none!important; }
/*-------------------------------------------------------------------------
Login
-------------------------------------------------------------------------*/
.login-header{
background: var(--glass-bg);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: 18px;
box-shadow: var(--box-shadow-lg);
margin: 12px 12px 0;
color:#FFF;text-align:center;padding:14px 10px;
}
.login-header img{max-width:100% !important;max-height:52px;border-radius:10px;}
.login-footer{background:url('../../images/site/logiz.png') no-repeat;background-position: center;text-align:center;height:76px;margin-top:40px;}
.login-form input[type="text"], .login-form input[type="password"] {
height: 55px;
font-size: 20px;
}
/*-------------------------------------------------------------------------
Toastr
-------------------------------------------------------------------------*/
/* Meme recette glass que .alert-* (fond semi-transparent sature, bordure, ombre), mais AVEC
backdrop-filter ici : contrairement aux alertes inline dans la page, les toasts vivent dans
#toast-container (position:fixed, tout en haut de la pile, aucun element fixed imbrique dedans)
donc aucun risque de conflit d'empilement avec un menu deroulant. */
#toast-container > div
{
padding:16px 16px 16px 54px!important;
background-color:transparent!important;
background-image:none!important;
border-radius:16px;
border:1px solid rgba(255,255,255,0.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 28px rgba(0,0,20,0.28);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
opacity:1!important;
font-size:15px;
font-weight:700;
animation: toast-in 0.3s cubic-bezier(0.32, 1.5, 0.5, 1);
}
#toast-container > div:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 28px rgba(0,0,20,0.4);
opacity:1!important;
}
@keyframes toast-in {
from { transform:translateY(18px) scale(0.94); opacity:0; }
to { transform:translateY(0) scale(1); opacity:1; }
}
/* #toast-container est position:fixed (ancre viewport), alors que .main-header est en flux normal
(position:relative) : sans decalage, un toast top-right a top:12px (valeur par defaut toastr)
se superpose au header tant que la page n'est pas scrollee - frequent ici, la plupart des ecrans
tenant sur une hauteur d'ecran. On decale sous le header (marge 12px + hauteur ~76px). */
#toast-container.toast-top-right {
top: 96px;
right: 20px;
}
@media only screen and (max-width:575px){
#toast-container.toast-top-right { top: 74px; right: 12px; }
}
/* Icones Tabler (deja chargees localement) a la place des icones png en base64 d'origine. */
#toast-container > div:before {
font-family:"tabler-icons"!important;
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
font-size:22px;
line-height:1;
}
#toast-container > .toast-success:before { content:"\ea67"; }
#toast-container > .toast-error:before { content:"\ea05"; }
#toast-container > .toast-warning:before { content:"\ea06"; }
#toast-container > .toast-info:before { content:"\eac5"; }
/* background-image:none!important repete ici (pas juste sur la regle generique #toast-container > div
plus haut) : les regles d'origine de la lib ciblent #toast-container>.toast-xxx (ID+classe), plus
specifiques que #toast-container>div (ID+type) - sans ca, le png en base64 d'origine restait
visible en double sous notre icone Tabler. */
#toast-container > .toast-success { background-color: var(--toast-success-bg)!important; background-image:none!important; }
#toast-container > .toast-error { background-color: var(--toast-error-bg)!important; background-image:none!important; }
#toast-container > .toast-info { background-color: var(--toast-info-bg)!important; background-image:none!important; }
#toast-container > .toast-warning { background-color: var(--toast-warning-bg)!important; color:var(--alert-warning-text)!important; background-image:none!important; }
.toast-progress { background-color: rgba(255,255,255,0.55)!important; height:3px; }
.toast-close-button { opacity:0.85; }
.toast-close-button:hover { opacity:1; }
#toast-container > .toast-success {
display:none !important;
}
/*-------------------------------------------------------------------------
Langue
-------------------------------------------------------------------------*/
.lang-menu { z-index:10000;display:inline-block }
.lang-menu .dropdown-menu { min-width: 0; }
.lang-menu .dropdown-menu img { max-width:none; }
/*-------------------------------------------------------------------------
Home
-------------------------------------------------------------------------*/
.home-menu { position:relative; }
.home-menu a { display:block; }
.home-menu img { max-width:100% }
.home-menu-text{color: #ffffff;font: 23px "CenturyGothic-Bold";height: 100%;position: absolute;text-align: center;top: 0;width: 100%;display: block;left: 0;background-color:rgba(26,26,26,0.4);}
.home-menu-text:hover { background-color:rgba(26,26,26,0.7); }
@media only screen and (max-width:575px){
.mt-3.mb-3.home-menu.text-center>a>img {max-width: 200%;}
.home-menu-text{font-size: 18px;}
}
.container-fluid > .row > h1.section-title
{
font-size:20px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.05em;
text-align:left!important;
opacity:1;
}
/* Etoile du titre de la section Favoris (admin/home.html.twig) : meme jaune que l'etoile
pleine du menu (style_admin.css) pour que le lien entre les deux soit immediat. */
.container-fluid > .row > h1.section-title .section-title-star
{
color:#FFC94A;
font-size:16px;
vertical-align:baseline;
margin-right:4px;
}
/* Aligne le titre et les tuiles d'accueil sur les memes bords gauche/droite que le header
(.main-header, marge 12px / 8px mobile). On annule le padding fixe de section#main (15px)
avec une largeur explicite (calc, pas de width:auto a deviner) puis la marge de grille
Bootstrap (.row -15px), et on fixe le padding directement sur le titre et les colonnes :
resultat deterministe des deux cotes, independant de la largeur d'ecran. */
.dashboard-container {
width:calc(100% + 30px);
margin-left:-15px;
margin-right:-15px;
padding-left:0;
padding-right:0;
/* Le blur est pose ici, une seule fois pour toute la grille, plutot que sur chaque
tuile individuellement : deux tuiles cote a cote qui floutent chacune leur portion
du meme degrade de fond peuvent laisser un liseret d'un pixel a leur jointure,
visible/invisible de facon aleatoire au moindre repaint (survol, ouverture du menu).
Avec un seul blur au niveau du conteneur, les tuiles n'ont plus qu'un fond uni
(voir a.btn-dashboard) qui se superpose sans probleme de jointure. */
/*backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);*/
}
.dashboard-container > .row {
margin-left:0;
margin-right:0;
}
.dashboard-container > .row > [class*="col-"],
.dashboard-container > .row > h1.section-title {
padding-left:12px;
padding-right:12px;
}
.dashboard-container .btn-dashboard{
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
}
/* Bootstrap 4.5 s'arrete a xl (1200px) - pas de palier au-dela. On ajoute un 4e palier
(4 tuiles par ligne) pour les tres grands ecrans. */
@media only screen and (min-width:1600px){
.dashboard-container > .row > .dashboard-tile-col {
flex:0 0 25%;
max-width:25%;
}
}
@media only screen and (max-width:575px){
/* section#main passe a 8px de padding sur mobile (style_admin.css) : la compensation
du conteneur doit suivre, sinon l'inset net (padding #main - marge conteneur + padding
colonne) tombe a 1px au lieu des 8px du header, et les tuiles collent au bord. */
.dashboard-container {
width:calc(100% + 16px);
margin-left:-8px;
margin-right:-8px;
}
.dashboard-container > .row > [class*="col-"],
.dashboard-container > .row > h1.section-title {
padding-left:8px;
padding-right:8px;
}
}
a.btn-dashboard
{
color:#FFF;
font-weight: 700;
display:flex;
align-items:center;
gap:16px;
min-height:76px;
padding:18px 20px!important;
border-radius:18px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
box-shadow: var(--box-shadow-lg);
}
a.btn-dashboard.disabled{
background:rgba(153,153,153,0.4);
opacity:0.6;
}
a.btn-dashboard:hover
{
color:#FFF;
background: var(--glass-bg-strong);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 28px rgba(0,0,20,0.3);
}
a.btn-dashboard .btn-dashboard-icon
{
width:50px;
height:50px;
flex-shrink:0;
border-radius:14px;
background: rgba(255,255,255,0.28);
border: 1px solid rgba(255,255,255,0.4);
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
}
a.btn-dashboard .btn-dashboard-label
{
flex:1;
text-align:left;
font-size:16px;
}
a.btn-dashboard .btn-dashboard-chevron
{
font-size:16px;
opacity:0.75;
}
@media only screen and (max-width:767px){
#logo-wrapper { min-height: auto } ;
}
/*-------------------------------------------------------------------------
Ecrans de saisie / scan (transfert, reception, preparation, colisage,
sorties diverses, palette, consommation matiere, inventaire...)
-------------------------------------------------------------------------*/
.btn:disabled, .btn:disabled:active, .btn:disabled:active:focus, .btn:disabled:focus, .btn:disabled:hover{background-color: #999!important;opacity:0.55;}
/* Bandeau titre de page (h1 + compteur), en haut du contenu : meme traitement glass que le header.
backdrop-filter force ce bloc a former un contexte d'empilement des qu'il contient un element
positionne (ex. le menu deroulant bootstrap-select des filtres) : sans z-index explicite, ce bloc
reste bloque au niveau "stack level 0" et perd systematiquement face a un frere plus loin dans le
DOM (ex. .content.page-content et ses alertes) des que celui-ci forme, lui aussi, un contexte
d'empilement (ordre alors regle par le DOM, pas par le z-index interne du menu deroulant, qui ne
peut pas "s'echapper" du contexte de ce bloc). Comme le bloc est position:static, z-index seul
n'a aucun effet : il faut position:relative pour l'activer. */
.grey.lighten-3:not(.fixed-bottom) {
position: relative;
z-index: 2;
background: var(--glass-bg)!important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: 18px;
box-shadow: var(--box-shadow-lg);
margin: 12px 12px 16px;
padding: 5px 0px;
}
.grey.lighten-3:not(.fixed-bottom) h1 { color:#FFF;font-weight:800;font-size:24px;text-transform:none;margin:0; }
.grey.lighten-3:not(.fixed-bottom) .row { align-items:center; }
.grey.lighten-3:not(.fixed-bottom) .label-white { color:#FFF;font-weight:700;opacity:0.9; }
@media only screen and (max-width:575px){
.grey.lighten-3:not(.fixed-bottom) { margin:8px 8px 12px;border-radius:16px;padding:5px 0px; }
}
/* Barre d'action fixee en bas (validation) : meme traitement glass que le header, tout en restant lisible */
.grey.lighten-3.fixed-bottom, .row.position-fixed.fixed-bottom {
background: var(--glass-bg-dark)!important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border)!important;
border-radius: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 -8px 24px rgba(0,0,20,0.22);
left:12px!important;
width:calc(100% - 24px)!important;
margin: 0 0 12px!important;
padding:5px;
}
@media only screen and (max-width:575px){
.grey.lighten-3.fixed-bottom, .row.position-fixed.fixed-bottom {
left:8px!important;
width:calc(100% - 16px)!important;
margin:0 0 8px!important;
border-radius:16px;
}
}
/* Decale la barre d'action fixee pour laisser la place au rail d'icones permanent (desktop) */
@media only screen and (min-width:993px){
.grey.lighten-3.fixed-bottom, .row.position-fixed.fixed-bottom {
left:88px!important;
width:calc(100% - 100px)!important;
}
}
.text-block { border-radius:12px!important; }
/* Compteur (UM scannes / nb lots) */
.nb-lots, #js-nb-lots {
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px!important;
font-weight:800;
font-size:17px;
color:var(--text-accent)!important;
background:#FFF!important;
}
.transfert-container, .inventaire-container { margin: auto; }
.transfert-container .form-group, .inventaire-container .form-group { padding: 0; }
.transfert-container input[type="text"], .transfert-container input[type="password"],
.inventaire-container input[type="text"], .inventaire-container input[type="password"] {
height: 52px;
font-size: 16px;
font-weight:700;
}
/* Boite quantite (transfert, sorties diverses, consommation matiere, expedition bobine, inventaire) :
degrade de marque au lieu du bleu Bootstrap par defaut, hauteur calquee sur le bouton supprimer
a cote (meme ligne, meme alignement). */
.bg-info {
background: var(--table-header-bg)!important;
border-radius:12px!important;
min-height:64px;
display:flex;
align-items:center;
justify-content:center;
}
.qte-lot {
font-size:22px!important;
font-weight:800!important;
}
.btn-delete-lot-js .ti-trash { font-size:26px; }
.transfert-container .qte-lot {
background-color: transparent;
border: 0;
font-weight: bold;
}
.transfert-container .qte-lot:focus {
border: 0;
}
.transfert-container p, .transfert-container button, .transfert-container div {
font-size: 18px;
}
.transfert-btn-bottom {
margin-bottom: 150px;
}
/* Zone / message d'invite au scan (ecran vide, en attente d'un scan) */
.transfert-center, .inventaire-center {
border: 2px dashed rgba(255,255,255,0.55);
background: rgba(6,22,48,0.38);
border-radius:18px;
margin:10px 0px;
padding:28px 20px;
}
.transfert-center h3, .inventaire-center h3 { color:#FFF!important;font-weight:700; }
.transfert-center .scan-icon, .inventaire-center .scan-icon { font-size:44px;color:rgba(255,255,255,0.75);margin-top:auto; }
.transfert-center h3:last-child, .inventaire-center h3:last-child { margin-bottom:auto; }
@media only screen and (max-width:575px){
.transfert-container select#site {top:0}
.transfert-container .qte-lot{font-size: 15px;}
}
.ligneArticle:hover{cursor:pointer;background:#CCCCCC !important;}
#modal-delete-lot .modal-confirm-btn-si, #modal-delete-all-lots .modal-confirm-btn-si, #modal-ajout-article-autre-emplacement .modal-confirm-btn-no{background:#ff3547 !important}
#modal-ajout-article-autre-emplacement .modal-title{font-size: 14px !important;}
/*-------------------------------------------------------------------------
Pointage
-------------------------------------------------------------------------*/
.content.bg-dark {
background-color: transparent!important;
}
.form-pointage
{
background-color: #0084c6;
padding: 0px 15px 0px 15px;
color: #fff;
}
/* position:absolute + top:50% se centrait par rapport au plus proche ancetre positionne, qui
n'etait visiblement pas .form-pointage malgre le position:relative pose dessus (verifie aux
DevTools : la regle s'appliquait bien, mais le resultat visuel ne correspondait pas - donc
la "boite de reference" du centrage n'etait pas celle attendue). Approche sans ambiguite :
hauteur fixe sur .form-pointage, et 100% + flex + align-items:center a CHAQUE niveau
intermediaire (container-fluid, row, colonne), pour ne plus dependre de quel ancetre est
"positionne". Uniquement a partir de md (768px) : en dessous, col-md-4/col-md-8 s'empilent
(comportement standard des colonnes Bootstrap), et une hauteur fixe pensee pour un rendu
cote a cote devenait bien trop petite pour le titre + le champ + le bouton empiles - le
contenu debordait par-dessus le bloc suivant sur mobile. */
@media only screen and (min-width:768px) {
.form-pointage {
height: 76px;
display: flex;
align-items: center;
}
.form-pointage .container-fluid {
height: 100%;
}
.form-pointage .row {
height: 100%;
align-items: center;
}
.form-pointage .col-md-4 {
height: 100%;
display: flex;
align-items: center;
}
}
.form-pointage.grey.lighten-3 h1 {
margin: 0;
padding-left: 12px;
}
.form-pointage .col-md-8 {
display: flex;
align-items: center;
gap: 12px;
padding-left: 12px;
}
.form-pointage form
{
flex: 1 1 auto;
float: none;
}
.form-pointage .form-group {
margin-bottom: 0;
}
.form-pointage .multi-of-btn {
font-size: 40px;
width: 50px;
height: 50px;
flex-shrink: 0;
float: none;
}
.form-pointage .multi-of-btn:hover {
cursor: pointer;
}
.pointage-content {
background: var(--glass-bg-dark);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: 18px;
box-shadow: var(--box-shadow-lg);
padding: 15px;
}
.pointage-content input[type="text"], .pointage-content input[type="password"] {
min-height: 55px;
font-size: 20px;
}
.form-pointage #ofOperation {
min-height: 48px;
}
.pointage-content .details-of {
font-size: 16px;
}
.pointage-content .text-primary{
color: #46d9f2 !important;
}
.pointage-content .pointage-action-buttons {
max-width: 275px;
}
.pointage-content .pointage-action-buttons .hors-production-btn {
font-size: 18px;
}
/* Meme recette que les tuiles de l'accueil (.btn-dashboard) : carte arrondie (18px, plus la
pilule d'origine) avec badge icone carre translucide clair, au lieu du rond noir plein.
Les couleurs de fond propres a chaque bouton (bg-warning, bg-primary...) sont conservees -
seule la forme/le style de la carte et du badge changent. */
.pointage-content .pointage-action-buttons button {
display: flex;
align-items: center;
justify-content: flex-start!important;
gap: 14px;
border-radius: 18px;
font-size: 17px;
padding: 10px 18px;
height: 68px;
margin-top: 10px;
text-align: left;
width: 100%;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,20,0.2);
}
.pointage-content .pointage-action-buttons button:hover {
color: white;
}
.pointage-content .pointage-action-buttons button .icon-overlay {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: rgba(255,255,255,0.28);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 14px;
height: 44px;
width: 44px;
flex-shrink: 0;
font-size: 20px;
}
.timer-pointage, .motif-arret {
font-size: 18px;
font-weight: bold;
}
/* Cartes "pointage en cours" / "cause d'arret" : harmonisees avec le reste (carte glass) au
lieu du fond blanc/uni d'origine. !important sur .timer-pointage car elle porte aussi la
classe Bootstrap .card, qui pose son propre fond avec la meme specificite (une seule
classe) - l'ordre de chargement entre nos fichiers et les libs n'est pas garanti. */
.timer-pointage {
background: var(--glass-bg-dark)!important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border)!important;
border-radius: 16px!important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,20,0.2);
}
.motif-arret {
background: var(--glass-bg-dark);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,20,0.2);
}
.timer-content, .timer-pointage-title, .pointage-solde {
font-size: 22px;
}
.form-modal-pointage label {
text-align: left;
flex: none;
}
.form-modal-pointage .form-group {
position: relative;
}
.autocomplete-list-pointage {
position: absolute;
z-index: 1;
top: 70px;
width: 100%;
}
.poste-list-autocomplete {
position: absolute;
z-index: 1;
top: 35px;
width: 100%;
}
.autocomplete-list-pointage li:hover, .poste-list-autocomplete li:hover {
cursor: pointer;
}
.content-text-pointage {
background: var(--glass-bg-dark);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,20,0.2);
}
.content-text-pointage a {
font-size: 20px;
}
@media only screen and (max-width:767px){
.content-pointage {
display: flex;
flex-flow: column;
margin-top: 8px!important;
}
.content-pointage .timer-wrapper {
order: 1;
}
/* .buttons-wrapper et .details-wrapper sont chacun en col-6 (50%) - pense pour le rendu
desktop cote a cote avec le timer. Sur mobile ils passent en pleine largeur (order:2,
l'un sous l'autre) : mais quand .details-wrapper est vide (ex. en Hors production, ou
son contenu ne s'affiche pas), il reservait quand meme sa moitie de largeur, ecrasant
.buttons-wrapper a 50% au lieu de la pleine largeur. */
.content-pointage .buttons-wrapper, .content-pointage .details-wrapper {
order: 2;
flex: 0 0 100%;
max-width: 100%;
}
.content-pointage .timer-wrapper .m-auto {
width: 100%;
}
.content-pointage .timer-wrapper .timer-pointage {
margin-top: 20px;
margin-bottom: 10px
}
/* Colonne des boutons contrainte a 275px (pensee pour le rendu desktop, cote a cote avec
le reste) : sur mobile, ou elle passe seule sur toute la largeur (order:2 plus haut),
ca laissait un gros vide a droite au lieu de profiter de la largeur disponible. */
.pointage-content .pointage-action-buttons {
max-width: 100%;
}
}
@media only screen and (max-width:575px){
.pointage-content .pointage-action-buttons button {
font-size: 16px;
}
.pointage-content .pointage-action-buttons .hors-production-btn {
font-size: 16px;
}
.pointage-content .details-of {
font-size: 14px;
}
.pointage-solde {
width: 100%;
}
}
/*-------------------------------------------------------------------------
Palette
-------------------------------------------------------------------------*/
/* Champ de scan de l'OF : deplace dans le bandeau .grey.lighten-3 (hors .declaration-palette),
cible directement par son id pour garder le meme gabarit "grand champ tactile". */
#ordreFabrication {
height: 55px;
font-size: 20px;
}
#form-palette {margin: 0 10px 10px 10px;}
#form-palette > .form-group {
margin: 0;
padding: 0;
}
/* Meme cas que .preparation/.supervision-content .logs-body : pas de .logs-header separe
au-dessus de ces cartes (juste le bandeau .grey.lighten-3 plus haut), donc arrondi complet.
overflow:hidden en plus (absent de la regle .logs-body de base) : le tableau (.table-reception)
arrondit deja ses propres coins via son overflow:hidden a lui, mais avec border-collapse:collapse
(defaut Bootstrap) certains navigateurs ne decoupent fiablement que les coins du haut (thead),
pas ceux du bas (derniere ligne, ici avec des qui debordent visuellement le rayon). En
arrondissant/decoupant deja au niveau du wrapper, le rendu est correct quel que soit le
comportement du tableau lui-meme. */
.declaration-palette .logs-body { border-radius:18px; margin:auto; max-width: 750px; overflow-x:auto; overflow-y:hidden; }
.declaration-palette .ordre-infos {
margin-bottom: 20px !important;
max-width: 750px;
}
.declaration-palette table {
background-color: #FFF;
}
.declaration-palette input[type="text"] {
height: 55px;
font-size: 20px;
}
.declaration-palette .form-group {
padding: 0;
}
.declaration-palette .js-edit-qte:hover {
cursor: pointer;
}
#table-palette-js input[type="number"] {max-width: 120px;min-height: 48px;padding: 0 10px;}
@media only screen and (max-width:767px){
.pos-qte{max-width: 70px; margin: auto;}
.position-relative.pos-qte i {position: absolute;right: 5px;top: 50%;transform: translate(0, -50%);-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);z-index: 9;}
}
@media only screen and (max-width:400px){
#table-palette-js input[type="number"] {max-width: 100px; padding-left: 5px; padding-right: 5px;}
.pos-qte{max-width: 50px;}
}
/*-------------------------------------------------------------------------
Barre de scroll horizontal des tableaux (indicateur visuel mobile)
-------------------------------------------------------------------------*/
/* Sur mobile (Android/Chrome notamment), le scroll horizontal d'un .table-responsive n'est pas
toujours visible spontanement (barre native fine/transparente ou masquee par defaut selon
l'OS), ce qui ne montre pas a l'utilisateur qu'il peut faire defiler pour voir les colonnes
suivantes. Plutot que la barre native (dont le style n'est pas fiable partout, et qui ne peut de
toute facon exister qu'a un seul bord du conteneur), on genere en JS (script_global.js,
initHscrollIndicators) deux barres "maison" identiques, une avant et une apres chaque
.table-responsive, qui suivent la position de scroll. Visible uniquement si le tableau deborde
reellement (classe is-visible posee en JS). */
.hscroll-indicator {
display:none;
height:6px;
margin:6px 0;
background: rgba(255,255,255,0.7);
border-radius:6px;
overflow:hidden;
position:relative;
}
.hscroll-indicator.is-visible {
display:block;
}
.hscroll-indicator .hscroll-thumb {
position:absolute;
top:0;
left:0;
height:100%;
background: var(--text-accent);
border-radius:6px;
}
/*-------------------------------------------------------------------------
Stock Article / Emplacement
-------------------------------------------------------------------------*/
/* Tableau classique (lignes normales), mais entete liquid glass et coins de tableau arrondis.
Meme recette "carte glass" que le bandeau titre / header (bordure + ombre), pour que tous
les blocs de la page partagent le meme style visuel. */
/* overflow:hidden ici cassait le scroll horizontal mobile : cet element EST aussi le
.table-responsive Bootstrap (overflow-x:auto d'origine) sur lequel on pose en plus le
style carte glass (coins arrondis) - overflow:hidden (raccourci) desactive les DEUX axes,
dont le scroll horizontal necessaire quand le tableau est plus large que l'ecran (colonnes
invisibles, inaccessibles sur mobile). overflow-x:auto + overflow-y:hidden garde le
decoupage visuel des coins tout en laissant defiler horizontalement. */
.table-responsive:has(.table-stock) {
border-radius:18px;
overflow-x:auto;
overflow-y:hidden;
border:1px solid var(--glass-border);
box-shadow: 0 8px 24px rgba(0,0,20,0.22);
}
@media only screen and (max-width:575px){
.table-responsive:has(.table-stock) {border-radius:16px; }
}
.table-stock {
background-color:#FFF;
margin-bottom:0;
}
.table-stock thead tr {
background: var(--table-header-bg)!important;
}
.table-stock thead th {
color:#FFF!important;
font-weight:700;
border:none!important;
padding:14px 16px;
}
.table-stock tbody tr.highlight { background-color:#f5ff80!important; }
.table-stock tbody td {
padding:14px 16px;
}
.form-stock input[type="text"]{
height: 55px;
font-size: 20px;
}
.form-stock div {
font-size: 18px;
}
.table-stock th, .table-stock td {
font-size: 18px;
}
/*-------------------------------------------------------------------------
Supervision
-------------------------------------------------------------------------*/
.table-supervision
{
overflow-x: scroll;
max-width: 100%;
}
.table.table-supervision.dataTable.no-footer {
display: contents;
}
.supervision-content .dataTables_scroll {
max-width: 100%;
}
/* max-width:100vw (largeur du VIEWPORT, ignore la marge de 12px de .logs-body) faisait deborder
le tableau au-dela de sa propre carte a droite - passe en 100% (relatif au conteneur) pour
respecter cette marge. Meme souci sur Supervision Inventaire, meme fond de carte .logs-body. */
/* Un peu de padding interne a .logs-body pour que les controles DataTables ("Afficher X
elements", pagination) ne touchent pas les bords de la carte - scope a supervision pour ne
pas toucher la page Logs, dont le calcul de largeur DataTables a deja ete ajuste avec
precaution (voir commentaire sur .logs-header plus haut dans style_admin.css). */
.supervision-content .logs-body {
padding: 10px 12px;
}
/* Bootstrap pose width:100% sur .table-responsive ; combine a la marge de 12px de chaque cote
de .logs-body (0 12px 20px), le total (100% + 12px + 12px) deborde forcement du parent - la
marge n'est jamais comprise dans width:100%, quel que soit le box-sizing. width:auto laisse
le bloc se retrecir tout seul pour laisser la place a sa propre marge, comme tous les autres
blocs "carte" de l'appli (aucun n'utilise width:100% avec une marge horizontale). */
.supervision-content .table-responsive {
width: auto;
}
.supervision-content .alert-info {
margin: 12px 12px 0;
}
/* Laisse le degrade de la page transparaitre au lieu d'un fond blanc plein ecran (Supervision /
Supervision Inventaire) ; le bandeau filtres et le tableau gardent leur propre carte opaque. */
.supervision-content.bg-white, .supervision-content > .container-fluid.bg-white { background:transparent!important; }
.table-supervision th, .table-supervision td {
font-size: 11px;
font-weight: bold;
}
.table-supervision td {
font-size: 11px;
font-weight: lighter;
}
.table-supervision .fa-pencil {
font-weight: bold;
display: block;
font-size: 14px;
}
.table-supervision .fa-pencil:hover {
cursor: pointer;
}
.form-filters-supervision .label-filter-form {
white-space: nowrap;
}
.supervision-underline-row {
background-color: #FFF59D;
}
/*-------------------------------------------------------------------------
Spinner Overlay
-------------------------------------------------------------------------*/
#spinner-overlay, #simple-overlay
{
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
height:100%;
display: none;
background: rgba(6,16,36,0.62);
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
}
#spinner-overlay .o-cv-spinner
{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 18px;
}
/* Anneau en degrade (conic-gradient) plutot que le duo gris/orange d'origine, dans les
couleurs de la marque. Le mask decoupe le centre du disque pour ne garder qu'un anneau,
sans avoir besoin d'une image ou d'un SVG. */
#spinner-overlay .o-spinner
{
width: 56px;
height: 56px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0deg, var(--cyan) 300deg, var(--blue-mid) 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
animation: spinner-anime 0.9s infinite linear;
}
@keyframes spinner-anime
{
100% {
transform: rotate(360deg);
}
}
#js-spinner-overlay-text
{
display:block;
color:#FFF;
font-weight:700;
font-size:15px;
letter-spacing:0.02em;
}
/*-------------------------------------------------------------------------
Datepicker (jQuery UI) - theme par defaut remplace par une carte glass, avec
des cases de jour assez grandes pour etre tapees au doigt (terminaux tactiles).
-------------------------------------------------------------------------*/
.ui-datepicker {
background: #F1F3F8;
border: 1px solid rgba(15,95,168,0.15);
border-radius: 18px;
box-shadow: 0 12px 32px rgba(0,20,50,0.28);
padding: 10px;
width: 300px;
}
.ui-datepicker .ui-datepicker-header {
background: var(--table-header-bg);
border: none;
border-radius: 12px;
padding: 8px 4px;
position: relative;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
top: 8px;
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 10px;
}
.ui-datepicker .ui-datepicker-prev { left: 2px; }
.ui-datepicker .ui-datepicker-next { right: 2px; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover {
background: rgba(255,255,255,0.18);
border: none;
top: 2px;
}
/* Le span .ui-icon d'origine a sa propre regle jQuery UI (position:absolute + margin
negative pour se centrer sur une icone 16x16) qui rentre en conflit avec nos tentatives de
le repositionner/redimensionner (texte "Suiv"/"Prec" invisible mais boite qui ecrasait
notre propre icone). Plus simple et fiable : on le masque completement et on pose l'icone
directement sur le lien parent (.ui-datepicker-prev/next), qu'on controle entierement. */
.ui-datepicker .ui-icon { display: none; }
.ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before {
font-family: "tabler-icons"!important;
font-size: 20px;
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.ui-datepicker .ui-datepicker-prev::before { content: "\ea60"; }
.ui-datepicker .ui-datepicker-next::before { content: "\ea61"; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
background: rgba(255,255,255,0.94);
border: 1px solid rgba(15,95,168,0.18);
border-radius: 10px;
color: #123;
font-weight: 700;
min-height: 40px;
margin: 0 3px;
}
.ui-datepicker table.ui-datepicker-calendar {
margin: 10px 0 4px;
border-collapse: separate;
border-spacing: 3px;
}
.ui-datepicker .ui-datepicker-calendar th {
color: #5a6178;
font-weight: 700;
font-size: 12px;
padding: 6px 0;
}
.ui-datepicker .ui-datepicker-calendar td {
padding: 0;
border: none;
}
.ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: 12px;
background: rgba(15,95,168,0.06);
border: none;
color: #1b2430;
font-weight: 600;
text-align: center;
}
.ui-datepicker .ui-datepicker-calendar td span {
background: transparent;
color: #b6bcc9;
}
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover {
background: rgba(15,95,168,0.14);
}
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active {
background: var(--table-header-bg);
color: #FFF;
font-weight: 800;
box-shadow: 0 4px 12px rgba(20,151,216,0.45);
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a {
border: 2px solid var(--blue-mid);
}
.ui-datepicker .ui-datepicker-buttonpane {
border-top: 1px solid rgba(15,95,168,0.15);
margin-top: 8px;
padding-top: 10px;
}
.ui-datepicker .ui-datepicker-buttonpane button {
min-height: 44px;
padding: 0 16px;
border-radius: 12px!important;
font-weight: 700;
border: 1px solid rgba(15,95,168,0.18);
background: rgba(255,255,255,0.85);
color: #123;
float: none;
}
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current {
background: rgba(255,255,255,0.85);
}
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close {
background: var(--table-header-bg);
border: none;
color: #FFF;
float: right;
}
/*-------------------------------------------------------------------------
Inventaire
-------------------------------------------------------------------------*/
.inventaire-container .qte-lot {
background-color: transparent;
border: 0;
font-size: 18px;
font-weight: bold;
}
.inventaire-container .qte-lot:focus {
border: 0;
}
.inventaire-container p, .inventaire-container button, .inventaire-container div {
font-size: 18px;
}
@media only screen and (max-width:575px){
.inventaire-container select#site {top:0}
.inventaire-container .qte-lot{font-size: 15px;}
}
.lotDisabled{background-color:#cccccc !important;opacity: 0.8;}
.form-session .form-control {
background-color: transparent;
}
.inventaire-lignes-container {
padding-bottom: 150px !important;
}
.list-choix-statut li:hover {
cursor: pointer;
background-color: #f1f2f2;
}
/*-------------------------------------------------------------------------
Réception
-------------------------------------------------------------------------*/
/* Carte glass commune aux 4 etapes de reception : #js-div-reception est le conteneur cible du JS
(il remplace juste son innerHTML a chaque etape, jamais l'element), donc une seule regle ici
couvre toutes les etapes sans toucher aux 4 templates ni au script. */
/* Pas de backdrop-filter ici : les popups de detail de ligne (#popup-X) sont imbriquees a
l'interieur de ce bloc (dans les cellules du tableau), et backdrop-filter/filter/transform sur
un ancetre change le referentiel de positionnement de tout descendant en position:fixed - ce
qui cassait l'ouverture/fermeture de ces modales. On garde juste la teinte translucide, sans flou. */
#js-div-reception {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 18px;
box-shadow: var(--box-shadow-lg);
margin-bottom: 16px;
}
.reception{
padding: 10px 15px;
color: #fff;
clear:both;
}
.reception .btn-bar{
display:block;
width: 100%;
}
.reception .btn-back-step{
margin: 0;
width: 48%;
float:left;
}
.reception .btn-front-step, .reception .btn-traiter-lignes, .reception .btn-valider-lignes{
margin: 0;
width: 48%;
float:right;
}
.form-fournisseur label, .form-bonlivraison label{
text-align: left;
font-size: 18px;
color: #FFFFFF;
}
.form-fournisseur button, .form-bonlivraison button{
float:left;
}
.reception table {
background-color: #FFF;
}
/* Le conteneur est en verre (comme le bandeau titre juste au-dessus, meme padding horizontal
18px pour que le contenu s'aligne pile) ; SANS backdrop-filter ici, car les popups de detail de
ligne (#popup-X, reception-3) sont imbriquees dans les cellules du tableau et un blur sur un
ancetre casse leur positionnement (deja rencontre sur cette meme page). Seul le tableau garde
un fond blanc, avec le zebra-striping Bootstrap (.table-striped) pour les lignes alternees.
Le vrai bug de tri DataTables (motifs carreles au clic) venait du raccourci "background" sur
.table-reception thead th plus bas, pas de overflow:hidden - remis ici sans souci.
Ciblage sans :has() (jamais eu de confirmation fiable que :has() prenait bien effet ici, et un
selecteur sans distinction matchait aussi stock-article-table.html.twig - meme structure
.page-content > .table-responsive.mt-3, mais avec .table-stock deja stylee ailleurs). On passe
par .reception/.preparation, classes statiques posees cote Twig sur un ancetre (jamais touchees
par DataTables), qui excluent naturellement stock-article. */
.reception .table-responsive.mt-3, .preparation .table-responsive.mt-3 {
background: var(--glass-bg);
border-radius:18px;
overflow-x:auto;
overflow-y:hidden;
border:1px solid var(--glass-border);
box-shadow: 0 8px 24px rgba(0,0,20,0.22);
padding:14px 18px;
margin-left:0!important;
margin-right:0!important;
margin-top:6px!important;
width:100%!important;
}
/* Meme recette que .table-stock : degrade pose sur la ligne d'entete entiere (pas sur chaque
cellule, sinon coutures visibles a chaque
), cellules transparentes. Arrondi + overflow:hidden
directement sur le tableau (bloc blanc distinct, en retrait dans le cadre en verre) : le
precedent test de cette meme regle avait "casse" le tri, mais c'etait en realite le raccourci
"background" sur thead th (juste en dessous) qui etait en cause, pas overflow:hidden lui-meme -
reteste maintenant que ce vrai bug est corrige. */
.table-reception {
background-color:#FFF;
border-radius:14px;
overflow:hidden;
}
.table-reception thead tr { background: var(--table-header-bg)!important; }
/* background-color (jamais le raccourci "background") : DataTables ajoute .sorting_asc/.sorting_desc
sur le
triable au clic, avec son icone en background-image + no-repeat ; le raccourci
reinitialise background-repeat a "repeat" et fait carreler cette icone (bug confirme, ne se
voit qu'au clic de tri, jamais au chargement). */
.table-reception thead th { background-color:transparent!important;color:#FFF!important;font-weight:700;border:none!important; }
/* Liste des articles du BL (colisage). Pas de DataTables ici, degrade en shorthand sans risque. */
.table-bl-items-wrap {
background: var(--glass-bg);
border-radius:18px;
overflow-x:auto;
overflow-y:hidden;
border:1px solid var(--glass-border);
box-shadow: 0 8px 24px rgba(0,0,20,0.22);
padding:14px 18px;
margin:12px;
}
.table-bl-items {
background-color:#FFF;
border-radius:14px;
overflow:hidden;
}
.table-bl-items thead { background: var(--table-header-bg)!important; }
.table-bl-items thead th { color:#FFF!important;font-weight:700;border:none!important; }
/* Recherche et pagination generees par DataTables (pas nos classes .form-control/.btn) : on les
reskin pour matcher le design system plutot que le gris/degrade par defaut de la librairie. */
.dataTables_filter input {
border-radius:12px!important;
border:1px solid rgba(15,95,168,0.18)!important;
background-color:rgba(255,255,255,0.94)!important;
min-height:44px;
padding:0 16px!important;
}
.dataTables_paginate .paginate_button {
border-radius:10px!important;
border:1px solid rgba(15,95,168,0.18)!important;
background:rgba(255,255,255,0.85)!important;
color:var(--text-accent)!important;
min-width:2.2em;
}
.dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button.current:hover {
background: var(--table-header-bg)!important;
color:#FFF!important;
border:none!important;
}
.dataTables_paginate .paginate_button:hover {
background:#fff!important;
color:var(--text-accent)!important;
border:1px solid rgba(15,95,168,0.3)!important;
}
.dataTables_paginate .paginate_button.disabled, .dataTables_paginate .paginate_button.disabled:hover {
background:rgba(255,255,255,0.5)!important;
color:#999!important;
}
.table-reception{
width:100% !important;
}
.table-reception td{
padding: 0.5rem 1rem !important;
}
.table-reception-lot{
width:100% !important;
}
.table-reception-lot input{
width:100% !important;
}
.table-reception-lot input[type=number]{
width:70% !important;
}
.receptionLignesOK{display:none;}
.receptionLignes td.disabled {background: #CCCCCC !important;}
.receptionLot {
clear:both;
line-height: 48px;
min-width: 260px;
}
.receptionLot input{
min-height:44px; /* champ compact dans une ligne de 48px, derogation documentee */
}
.receptionLot button{
float:right;
}
.receptionRecherche label{
width: 100%;
}
.receptionRecherche input{
width: 100%;
margin: 6px 0;
min-height: 48px;
background: #FFFFFF !important;
}
.receptionRecherche{
float:left;
width: 50%;
}
.receptionPagination{
float:right;
width: 50%;
}
.receptionPagination a{
padding: 0 !important;
}
.receptionPagination .dataTables_paginate{
float:right !important;
margin-right: 5px;
}
.reception .btn-pagination{
padding: 8px 12px;
min-height: 44px;
margin: 0;
}
.reception .paginate_button{
background: #444444 !important;
color: #FFFFFF !important;
display:none !important;
}
.reception .receptionPagination a.disabled button.btn-pagination{
background: #CCCCCC !important;
}
.reception .paginate_button.previous, .reception .paginate_button.next{
display:inline-block !important;
}
.reception .dataTables_wrapper .dataTables_paginate .paginate_button.current, .reception .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
display:inline-block !important;
padding: 7px 15px !important;
color: #FFFFFF !important;
border: none !important;
height: 37px;
}
.bootstrap-select .btn{
margin:0 !important;
}
.reception .dataTables_filter{
width: 100%;
}
/*-------------------------------------------------------------------------
Préparation
-------------------------------------------------------------------------*/
#preparation-form-ordre-prepa input[type="text"]{
height: 55px;
font-size: 20px;
}
#preparation-form-ordre-prepa .form-group { padding:0 }
.preparation{
color: #fff;
clear:both;
}
.preparation .btn-preparer-produit, .preparation .btn-change-ligne, .preparation .btn-recap, .preparation .btn-valider-lignes, .preparation .btn-retour-liste{
width: 100%;
margin: 0;
}
.qteReception{
max-width:70px;
margin-right:5px;
}
/* Libelle (ex. "N° OF : ...") sur fond glass (.table-bl-items-wrap) : le blanc franc, deja utilise
partout ailleurs pour ce type de libelle sur fond glass (h4.text-white), reste le plus fiable
en contraste - un accent cyan/teal ne se detachait pas assez du fond bleute translucide. */
.table-bl-items-wrap .text-info {
color: #FFF!important;
font-weight:700;
}
/* Echo de l'emplacement/UM scanne (fond blanc plein, ex. consommation matiere) : bleu de marque
a la place du teal Bootstrap (coherent avec .btn-secondary/.nb-lots), + coins arrondis/ombre
pour rester dans la meme famille "carte glass" que le reste de l'UI (fond garde en blanc plein,
pas de transparence : c'est un readout de valeur scannee, priorite a la lisibilite). */
.bg-white.text-info {
color: var(--text-accent)!important;
font-weight:700;
border-radius:12px!important;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(15,95,168,0.18);
box-shadow: 0 2px 8px rgba(7,27,61,0.12);
}
.btn-detail:hover, .btn-detail:focus{
color: var(--text-accent)!important;
}
/* Cellule "scanne/valide" (approche production, preparation, consommation matiere) : un degrade
se voyait comme une "couture" quand plusieurs cellules .scanOK se suivent sur la meme ligne
(chacune relance son propre degrade) - vert uni + effet glass a la place. */
.scanOK{
background: var(--scanok-bg) !important;
color:#FFF !important;
font-weight:700;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.produitPrepare{
font-size: 18px;
color: #00c851;
}
.table td, .table th{
vertical-align: middle;
}
.boxColor{
width: 20px;
height: 20px;
display: inline-block;
}
.boxGreen{
background-color: green;
}
.boxOrange{
background-color: orange;
}
.ligneLien{
cursor:pointer;
background: #CCCCCC !important;
}
.lienLigne{
cursor:pointer;
}
.ligneGrisee{
background: #CCCCCC !important;
}
.preparationPagination a{
padding: 0 !important;
}
.preparationPagination .dataTables_paginate{
float:right !important;
margin-right: 5px;
}
.preparation .btn-pagination{
padding: 8px 12px;
min-height: 44px;
margin: 0;
}
.preparation .paginate_button{
background: #444444 !important;
color: #FFFFFF !important;
display:none !important;
}
.preparation .preparationPagination a.disabled button.btn-pagination{
background: #CCCCCC !important;
}
.preparation .paginate_button.previous, .preparation .paginate_button.next{
display:inline-block !important;
}
.preparation .dataTables_wrapper .dataTables_paginate .paginate_button.current, .preparation .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
display:inline-block !important;
padding: 7px 15px !important;
color: #FFFFFF !important;
border: none !important;
height: 37px;
}
/*-------------------------------------------------------------------------
Colisage
-------------------------------------------------------------------------*/
.form-colisage input[type="text"], .form-colisage input[type="number"]
{
background-color: rgba(255,255,255,0.94);
color: var(--text-accent);
width:100%;
max-width:320px;
padding:20px;
font-size:20px;
font-weight:700;
}
.form-colisage input[type="text"]:read-only, .form-colisage input[type="number"]:read-only
{
background-color: rgba(255,255,255,0.6);
color:#5a6178;
}
.form-colisage label
{
color:#FFF;
text-align:left;
font-weight:bold;
}
@media only screen and (max-width:575px)
{
.form-colisage input[type="text"], .form-colisage input[type="number"]
{
width:100%;
}
}
/*-------------------------------------------------------------------------
Consommation Matiere OF
-------------------------------------------------------------------------*/
.consommation-matiere .details-of {
background: var(--glass-bg-dark);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: 14px;
}
input[type="date"]:not(.has-value):before{
content: attr(placeholder);
}
.conso-matiere-qte-btn {
background-color: transparent;
border: 0;
font-size: 20px;
}
.conso-matiere-qte-btn:focus {
background-color: transparent;
border: 0;
font-size: 20px;
}
#js-list-matiere{
padding-bottom: 200px;
}
.datagrid-filters{margin-top: -8px;}
.bg-edit {
background-color: #FFA446 !important;
}
[id^="WebservicePopup"] {
overflow-y:auto !important;
}
.form-ordonnancement-recherche label {
white-space: nowrap;
text-align: left;
font-size: 18px;
color: #FFFFFF;
}
.operationHighlight2{background-color:#f5ff80 !important}
.operationHighlight1{background-color:#80cfff !important}
#modal-confirm-declassement .modal-confirm-btn-si {background-color: #fb3 !important;}
.expedition-infos {
background: var(--glass-bg)!important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: 18px;
box-shadow: var(--box-shadow-lg);
margin: 12px 12px 16px;
padding: 14px 18px;
}
.expedition-container label {
color:#FFFFFF;
font-weight: bold;
flex: inherit;
text-align: left;
}
.expedition-container input[type="text"] {
min-height: 48px;
font-size: 16px;
}
.expedition-container textarea {
height: 100px;
font-size: 16px;
}
.js-validation-ordonnancement{margin-top:32px;}
.lignesOrdo:not(.no-drag){cursor: grab;}
.lignesOrdo:not(.no-drag):active {cursor: grabbing;}