/* ============================================================================= INTERFACE - Wolfcars ----------------------------------------------------------------------------- Socle visuel de tout le back-office. Anciennement "theme V2", propose en option a cote d'un theme d'origine : les deux ont fusionne, cette mise en page est desormais la seule. L'ancien theme V1 n'existe plus. Charge sur toutes les pages, avant l'eventuelle feuille de theme. Ce fichier ne declare AUCUNE valeur. La palette, les rayons, les ombres et l'echelle d'espacement vivent dans library/wolfcars/css/theme.css, charge en premier ; ici on ne fait que dessiner le socle (barre, menu, cartes, tableaux, formulaires) a partir de ces jetons. La palette etait declaree ici jusqu'a la refonte du theme : le fichier qui decidait des couleurs arrivait donc APRES tous ceux qui les employaient. Porte par , pose par Theme::bodyClass(). ============================================================================= */ /* ----------------------------------------------------------------------------- Fond de page Un degrade vertical tres court en haut (blanc -> gris de page) suffit a poser la lumiere sans que l'aplat devienne perceptible plus bas. -------------------------------------------------------------------------- */ body.wc-ui { background-color: var(--wc-page); background-image: linear-gradient(180deg, var(--wc-surface-tint) 0%, var(--wc-page) 340px); background-repeat: no-repeat; background-attachment: fixed; } body.wc-ui #contentMain, body.wc-ui .app-content { background: transparent; } /* ============================================================================= Barre superieure ============================================================================= */ body.wc-ui .header-navbar, body.wc-ui .main-header-navbar { background: rgba(255, 255, 255, .82) !important; -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--wc-line); box-shadow: var(--wc-e1); } body.wc-ui .header-navbar-shadow { display: none; /* remplace par le filet + l'ombre ci-dessus */ } body.wc-ui .header-navbar .nav-link { color: var(--wc-text-body); border-radius: var(--wc-r-md); transition: background-color .18s var(--wc-ease), color .18s var(--wc-ease); } body.wc-ui .header-navbar .nav-link:hover { background: var(--wc-primary-tint); color: var(--wc-primary-text); } /* ============================================================================= Menu lateral Passe en surface claire pour se detacher du fond de page : c'est un plan distinct, pas la continuite du contenu. ============================================================================= */ body.wc-ui .main-menu, body.wc-ui .main-menu.menu-light { background: linear-gradient(180deg, var(--wc-surface) 0%, var(--wc-surface-tint) 100%); border-right: 1px solid var(--wc-line); box-shadow: 1px 0 3px rgba(25, 42, 70, .04); } body.wc-ui .main-menu .navbar-header { background: transparent; border-bottom: 1px solid var(--wc-line); } body.wc-ui .main-menu .navigation { background: transparent; } body.wc-ui .main-menu.menu-light .navigation > li > a, body.wc-ui .main-menu.menu-light .navigation .menu-content > li > a { position: relative; color: var(--wc-text-soft); border-radius: 0 var(--wc-r-md) var(--wc-r-md) 0; margin-right: 12px; transition: background-color .18s var(--wc-ease), color .18s var(--wc-ease); } body.wc-ui .main-menu.menu-light .navigation > li:not(.active) > a:hover, body.wc-ui .main-menu.menu-light .navigation .menu-content > li:not(.active) > a:hover { background: var(--wc-primary-tint); color: var(--wc-text-body); } /* Entree active : degrade horizontal qui s'eteint vers la droite + rappel vertical a gauche. Le degrade guide l'oeil depuis le bord, il n'est pas decoratif. */ body.wc-ui .main-menu.menu-light .navigation > li.active:not(.sidebar-group-active) > a, body.wc-ui .main-menu.menu-light .navigation .menu-content > li.active:not(.sidebar-group-active) > a { background: linear-gradient(90deg, rgba(90, 141, 238, .16) 0%, rgba(90, 141, 238, .04) 100%); color: var(--wc-primary-text); font-weight: 500; border-radius: 0 var(--wc-r-md) var(--wc-r-md) 0; box-shadow: none; } body.wc-ui .main-menu.menu-light .navigation > li.active > a::before, body.wc-ui .main-menu.menu-light .navigation .menu-content > li.active > a::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--wc-primary); } body.wc-ui .main-menu .navigation-header span { color: var(--wc-text-soft); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; } body.wc-ui .main-menu .shadow-bottom { background: linear-gradient(180deg, var(--wc-surface) 44%, rgba(255, 255, 255, .6) 73%, rgba(255, 255, 255, 0)); } /* ============================================================================= Cartes ============================================================================= */ body.wc-ui .card { background: var(--wc-surface); border: 1px solid var(--wc-line); border-radius: var(--wc-r-lg); box-shadow: var(--wc-e2); overflow: hidden; /* le rayon doit rogner l'entete et les tableaux */ transition: box-shadow .22s var(--wc-ease), transform .22s var(--wc-ease); } body.wc-ui .card:hover { box-shadow: var(--wc-e3); transform: translateY(-2px); } /* Entete : degrade descendant tres court, la lumiere vient du haut */ body.wc-ui .card-header { background: var(--wc-entete-fond); border-bottom: 1px solid var(--wc-line); padding: 1rem 1.35rem; } body.wc-ui .card-title { color: var(--wc-text); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; } /* ----------------------------------------------------------------------------- Entete du cadre unique (system/classes/Panel.php) ----------------------------------------------------------------------------- Trois places, toujours les memes : le pictogramme, le libelle, puis l'element d'action aimante a droite. C'est cette regle qui rend l'aimantation automatique : le libelle prend toute la place disponible (flex: 1), donc l'action est repoussee au bord sans que l'appelant ait a poser un float-right — la source des trois agencements divergents qu'on trouvait avant dans les entetes. -------------------------------------------------------------------------- */ body.wc-ui .card-title.wc-panel-titre { display: flex; align-items: center; gap: var(--wc-sp-3); margin: 0; min-width: 0; } body.wc-ui .wc-panel-icone { flex: 0 0 auto; color: var(--wc-primary); line-height: 1; } /* Une emoji n'est pas une icone : elle porte sa propre couleur et a besoin d'un poil plus de corps pour peser autant qu'un glyphe Font Awesome. */ body.wc-ui .wc-panel-emoji { font-size: 1.15em; color: inherit; } /* Une commande a la place du pictogramme (Panel::controle) : la case a cocher d'un cadre dont elle est l'etat. Elle en prend la place, la taille et la couleur — seul le curseur dit qu'elle se clique. Le bouton qui la porte est remis a nu : ni fond, ni bordure, ni marge. */ body.wc-ui .wc-panel-controle > button, body.wc-ui .wc-panel-controle > a { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; line-height: 1; text-decoration: none; cursor: pointer; } body.wc-ui .wc-panel-controle > button:hover, body.wc-ui .wc-panel-controle > a:hover { color: var(--wc-primary-dark); } body.wc-ui .wc-panel-controle > button:focus-visible { outline: 2px solid var(--wc-primary); outline-offset: 3px; border-radius: 3px; } body.wc-ui .wc-panel-libelle { flex: 1 1 auto; min-width: 0; } body.wc-ui .wc-panel-action { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: var(--wc-sp-2); font-size: .85rem; font-weight: 400; } /* Phrase d'explication en tete du contenu (Panel::aide) : ce que regle le cadre. Plus discrete que le contenu qu'elle precede — c'est un mode d'emploi, pas une donnee. Remplace .wc-reglages-aide, .gp-sub et .wg-section-sub, qui disaient la meme chose de trois facons. */ body.wc-ui .wc-panel-aide { margin: 0 0 var(--wc-sp-3); font-size: 12.5px; line-height: 1.5; color: var(--wc-text-mute); } /* Sur un ecran etroit, l'action passe sous le titre plutot que de l'ecraser. */ @media (max-width: 575.98px) { body.wc-ui .card-title.wc-panel-titre { flex-wrap: wrap; gap: var(--wc-sp-2); } body.wc-ui .wc-panel-action { margin-left: 0; width: 100%; } } /* dashboard.css pose une ombre interne grise sur .card-body qui ternit la carte */ body.wc-ui .card-body { box-shadow: none; } body.wc-ui .widget, body.wc-ui .white-bg { background: var(--wc-surface); border: 1px solid var(--wc-line); border-radius: var(--wc-r-lg); box-shadow: var(--wc-e1); color: var(--wc-text-body); } body.wc-ui .blue-bg { background: linear-gradient(135deg, var(--wc-primary-tint) 0%, var(--wc-primary-tint) 100%); border: 1px solid var(--wc-primary-tint); border-radius: var(--wc-r-lg); box-shadow: var(--wc-e1); color: var(--wc-text-body); } body.wc-ui .blue-bg i { color: var(--wc-primary-ink); } /* ----------------------------------------------------------------------------- Cadres de statut vehicule Les couleurs d'origine sont conservees ; la bordure pleine de 3px devient un filet discret plus un rappel lateral, avec un lavis degrade partant du bord. -------------------------------------------------------------------------- */ body.wc-ui .cadreWolfET, body.wc-ui .cadreWolfFR, body.wc-ui .cadreWolfDV { border: 1px solid var(--wc-line); border-left-width: 4px; border-radius: var(--wc-r-lg); padding: 12px; box-shadow: var(--wc-e2); } body.wc-ui .cadreWolfET { border-left-color: var(--wc-doc-import); background-image: linear-gradient(90deg, rgba(28, 132, 198, .07) 0%, rgba(28, 132, 198, 0) 220px); } body.wc-ui .cadreWolfFR { border-left-color: var(--wc-doc-fr); background-image: linear-gradient(90deg, rgba(184, 92, 181, .07) 0%, rgba(184, 92, 181, 0) 220px); } body.wc-ui .cadreWolfDV { border-left-color: var(--wc-doc-dv); background-image: linear-gradient(90deg, rgba(92, 184, 92, .07) 0%, rgba(92, 184, 92, 0) 220px); } /* ============================================================================= Tableaux ============================================================================= */ body.wc-ui .table { color: var(--wc-text-body); margin-bottom: 0; } body.wc-ui .table thead th { background: linear-gradient(180deg, var(--wc-surface-tint) 0%, var(--wc-surface-sunk) 100%); color: var(--wc-text-body); border-top: none; border-bottom: 1px solid var(--wc-line); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .75rem 1rem; white-space: nowrap; } body.wc-ui .table td, body.wc-ui .table th { border-color: var(--wc-line); vertical-align: middle; } body.wc-ui .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(25, 42, 70, .018); } body.wc-ui .table-hover tbody tr { transition: background-color .14s var(--wc-ease); } body.wc-ui .table-hover tbody tr:hover { background-color: var(--wc-primary-tint); color: var(--wc-text); } body.wc-ui .table-bordered, body.wc-ui .table-bordered td, body.wc-ui .table-bordered th { border-color: var(--wc-line); } /* ============================================================================= Formulaires ============================================================================= */ body.wc-ui .form-control, body.wc-ui select.form-control, body.wc-ui textarea.form-control { background: var(--wc-surface); border: 1px solid var(--wc-line-strong); border-radius: var(--wc-r-md); color: var(--wc-text-body); box-shadow: inset 0 1px 2px rgba(25, 42, 70, .04); transition: border-color .16s var(--wc-ease), box-shadow .16s var(--wc-ease); } body.wc-ui .form-control::placeholder { color: var(--wc-text-faint); } body.wc-ui .form-control:hover:not(:focus):not([readonly]) { border-color: var(--wc-line-strong); } body.wc-ui .form-control:focus { background: var(--wc-surface); border-color: var(--wc-primary-ink); box-shadow: var(--wc-focus); color: var(--wc-text); } /* Champ verrouille : le creux (fond enfonce + ombre interne) suffit a le signaler. Griser le texte en plus le faisait passer sous le seuil de contraste pour une donnee qui reste a lire — chassis, immatriculation, prix d'achat. */ body.wc-ui .form-control[readonly] { background: var(--wc-surface-sunk); border-color: var(--wc-line); color: var(--wc-text-body); box-shadow: inset 0 1px 2px rgba(25, 42, 70, .05); cursor: default; } body.wc-ui .form-group label, body.wc-ui label { color: var(--wc-text-body); font-size: .875rem; font-weight: 600; margin-bottom: .35rem; } body.wc-ui select.form-control { /* Chevron dessine, aligne a droite : le natif ne suit pas le rayon */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238494a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2rem; } /* ============================================================================= Boutons Degrade vertical interne de 6% : le bouton parait bombe sans effet "jouet", et l'ombre est teintee de sa propre couleur pour rester dans la famille. ============================================================================= */ body.wc-ui .btn { border-radius: var(--wc-r-md); font-weight: 500; transition: box-shadow .18s var(--wc-ease), transform .12s var(--wc-ease), filter .18s var(--wc-ease); } body.wc-ui .btn:focus { box-shadow: var(--wc-focus); } body.wc-ui .btn:active { transform: translateY(1px); } body.wc-ui .btn-primary { background: linear-gradient(180deg, var(--wc-primary-light) 0%, var(--wc-primary) 100%); border: 1px solid var(--wc-primary-dark); box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 4px 10px -2px rgba(90, 141, 238, .35); } body.wc-ui .btn-primary:hover { background: linear-gradient(180deg, var(--wc-primary) 0%, var(--wc-primary-dark) 100%); box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 6px 14px -2px rgba(90, 141, 238, .45); } body.wc-ui .btn-success { background: linear-gradient(180deg, #4ee09a 0%, var(--wc-success) 100%); border: 1px solid var(--wc-success-dark); box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 4px 10px -2px rgba(57, 218, 138, .35); } body.wc-ui .btn-success:hover { background: linear-gradient(180deg, var(--wc-success) 0%, var(--wc-success-dark) 100%); box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 6px 14px -2px rgba(57, 218, 138, .45); } body.wc-ui .btn-danger { background: linear-gradient(180deg, #ff7273 0%, var(--wc-danger) 100%); border: 1px solid var(--wc-danger-dark); box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 4px 10px -2px rgba(255, 91, 92, .32); } body.wc-ui .btn-danger:hover { background: linear-gradient(180deg, var(--wc-danger) 0%, var(--wc-danger-dark) 100%); box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 6px 14px -2px rgba(255, 91, 92, .42); } body.wc-ui .btn-grey, body.wc-ui .btn-secondary { background: linear-gradient(180deg, var(--wc-surface) 0%, var(--wc-surface-sunk) 100%); border: 1px solid var(--wc-line-strong); color: var(--wc-text-body); box-shadow: var(--wc-e1); } body.wc-ui .btn-grey:hover, body.wc-ui .btn-secondary:hover { background: linear-gradient(180deg, var(--wc-surface-tint) 0%, var(--wc-line-soft) 100%); color: var(--wc-text); } /* Petit bouton de suppression en tete de ligne : discret au repos, net au survol */ body.wc-ui .btn-delete { background: transparent; border: 1px solid transparent; color: var(--wc-text-faint); box-shadow: none; transition: background-color .16s var(--wc-ease), color .16s var(--wc-ease), border-color .16s var(--wc-ease); } body.wc-ui .btn-delete:hover { background: var(--wc-danger-tint); border-color: var(--wc-danger-line); color: var(--wc-danger-ink); } /* ----------------------------------------------------------------------------- Lisibilite sur les aplats vifs ----------------------------------------------------------------------------- Le texte blanc sur les couleurs d'accent du theme d'origine est illisible : 1,82:1 sur le vert, 1,88:1 sur l'orange, 1,91:1 sur le cyan, 3,04:1 sur le rouge, 3,24:1 sur le bleu — tous sous le seuil AA de 4,5:1. Deux issues possibles : assombrir les couleurs de marque, ou changer l'encre. On change l'encre. Les aplats restent identiques a l'octet pres et le contraste passe de 1,8 a 8,5 sur le vert, 8,2 sur l'orange, 8,1 sur le cyan, 5,1 sur le rouge, 4,8 sur le bleu. Aucune couleur du theme n'est modifiee. -------------------------------------------------------------------------- */ body.wc-ui .btn-primary, body.wc-ui .btn-success, body.wc-ui .btn-danger, body.wc-ui .btn-warning, body.wc-ui .btn-info, body.wc-ui .badge-primary, body.wc-ui .badge-success, body.wc-ui .badge-danger, body.wc-ui .badge-warning, body.wc-ui .badge-info, body.wc-ui .alert-primary, body.wc-ui .alert-success, body.wc-ui .alert-danger, body.wc-ui .alert-warning, body.wc-ui .alert-info { color: var(--wc-on-accent); } /* Les icones heritent : sans cela elles restaient blanches sur l'aplat */ body.wc-ui .btn-primary i, body.wc-ui .btn-success i, body.wc-ui .btn-danger i, body.wc-ui .btn-warning i, body.wc-ui .btn-info i, body.wc-ui .badge-primary i, body.wc-ui .badge-success i, body.wc-ui .badge-danger i, body.wc-ui .badge-warning i, body.wc-ui .badge-info i, body.wc-ui .alert-primary i, body.wc-ui .alert-success i, body.wc-ui .alert-danger i, body.wc-ui .alert-warning i, body.wc-ui .alert-info i { color: inherit; } /* Aplats warning / info : le theme d'origine ne leur donne pas de degrade, on aligne leur traitement sur les autres boutons. */ body.wc-ui .btn-warning { background: linear-gradient(180deg, #fdbb63 0%, var(--wc-warning) 100%); border: 1px solid #f09c1f; box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 4px 10px -2px rgba(253, 172, 65, .34); } body.wc-ui .btn-info { background: linear-gradient(180deg, var(--wc-info-light) 0%, var(--wc-info) 100%); border: 1px solid var(--wc-info-dark); box-shadow: 0 1px 2px rgba(25, 42, 70, .08), 0 4px 10px -2px rgba(0, 207, 221, .34); } /* Alertes : fond teinte plutot qu'aplat plein, texte en encre foncee. Plus lisible sur un long libelle qu'un pave de couleur saturee. */ body.wc-ui .alert { border-radius: var(--wc-r-md); border-width: 1px; border-left-width: 4px; } /* colors.css ecrit `.alert.alert-success { color:var(--wc-text-invert) !important; background:... !important }` : seul un !important peut reprendre la main sur ces deux proprietes. */ body.wc-ui .alert.alert-success { background: var(--wc-success-tint) !important; border-color: var(--wc-success-line); border-left-color: var(--wc-success-ink); color: var(--wc-on-accent) !important; } body.wc-ui .alert.alert-danger { background: var(--wc-danger-tint) !important; border-color: var(--wc-danger-line); border-left-color: var(--wc-danger-ink); color: var(--wc-on-accent) !important; } body.wc-ui .alert.alert-warning { background: var(--wc-warning-tint) !important; border-color: var(--wc-warning-line); border-left-color: var(--wc-warning-ink); color: var(--wc-on-accent) !important; } body.wc-ui .alert.alert-info { background: var(--wc-info-tint) !important; border-color: var(--wc-info-line); border-left-color: var(--wc-info-ink); color: var(--wc-on-accent) !important; } body.wc-ui .alert.alert-primary { background: var(--wc-primary-tint) !important; border-color: var(--wc-primary-line); border-left-color: var(--wc-primary-ink); color: var(--wc-on-accent) !important; } /* ============================================================================= Onglets ============================================================================= */ body.wc-ui .nav-tabs { border-bottom: 1px solid var(--wc-line); gap: 2px; } body.wc-ui .nav-tabs .nav-link { position: relative; color: var(--wc-text-soft); border: none; border-radius: var(--wc-r-md) var(--wc-r-md) 0 0; padding: .7rem 1.15rem; font-weight: 500; transition: background-color .16s var(--wc-ease), color .16s var(--wc-ease); } body.wc-ui .nav-tabs .nav-link:hover { background: var(--wc-primary-tint); color: var(--wc-text-body); } body.wc-ui .nav-tabs .nav-link.active { background: linear-gradient(180deg, var(--wc-surface) 0%, var(--wc-surface-tint) 100%); color: var(--wc-primary-text); border: 1px solid var(--wc-line); border-bottom-color: transparent; } /* Le soulignement est un pseudo-element : il ne decale pas le texte au changement d'onglet */ body.wc-ui .nav-tabs .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wc-primary); border-radius: 2px 2px 0 0; } /* ============================================================================= Popups (.modalWolf via jQuery UI) et menus deroulants ============================================================================= */ body.wc-ui .ui-dialog, body.wc-ui .ui-widget-content { background: var(--wc-surface); border: 1px solid var(--wc-line); border-radius: var(--wc-r-xl); box-shadow: var(--wc-e4); color: var(--wc-text-body); } body.wc-ui .ui-dialog { overflow: hidden; padding: 0; } body.wc-ui .ui-dialog .ui-dialog-titlebar, body.wc-ui .ui-widget-header { background: linear-gradient(180deg, var(--wc-surface) 0%, var(--wc-surface-tint) 100%); border: none; border-bottom: 1px solid var(--wc-line); border-radius: var(--wc-r-xl) var(--wc-r-xl) 0 0; color: var(--wc-text); font-weight: 600; padding: .9rem 1.15rem; } body.wc-ui .ui-dialog .ui-dialog-content { padding: 1.15rem; } body.wc-ui .ui-widget-overlay { background: rgba(25, 42, 70, .34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 1; } body.wc-ui .modalWolf fieldset { border: none; padding: 0; margin: 0; } body.wc-ui .dropdown-menu { background: var(--wc-surface); border: 1px solid var(--wc-line); border-radius: var(--wc-r-lg); box-shadow: var(--wc-e3); padding: 6px; } body.wc-ui .dropdown-item { color: var(--wc-text-body); border-radius: var(--wc-r-sm); padding: .55rem .75rem; font-size: .9rem; transition: background-color .14s var(--wc-ease), color .14s var(--wc-ease); } body.wc-ui .dropdown-item:hover, body.wc-ui .dropdown-item:focus { background: var(--wc-primary-tint); color: var(--wc-primary-text); } /* Bootstrap peint .dropdown-item.active en #007bff avec sa propre couleur de texte : le theme choisi devenait illisible (1,65:1). On reprend la main sur les deux. */ body.wc-ui .dropdown-item.active, body.wc-ui .dropdown-item:active { background: var(--wc-primary-tint); color: var(--wc-primary-text); font-weight: 600; } body.wc-ui .dropdown-divider { border-color: var(--wc-line); margin: 4px 0; } body.wc-ui .dropdown-header { color: var(--wc-text-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .55rem .75rem .3rem; } /* ============================================================================= Divers ============================================================================= */ body.wc-ui .footer, body.wc-ui .footer-light { background: transparent; border-top: 1px solid var(--wc-line); color: var(--wc-text-body); font-size: .85rem; } body.wc-ui .badge { font-weight: 600; letter-spacing: .01em; } body.wc-ui .badge-light { background: var(--wc-surface-sunk); border: 1px solid var(--wc-line); color: var(--wc-text-body); } body.wc-ui .badge-danger { background: linear-gradient(180deg, #ff7273 0%, var(--wc-danger) 100%); box-shadow: 0 1px 3px rgba(255, 91, 92, .32); } /* Barre de progression : creux + degrade dans la barre, lecture immediate */ body.wc-ui .progress { background: var(--wc-surface-sunk); border-radius: 20px; box-shadow: inset 0 1px 2px rgba(25, 42, 70, .07); overflow: hidden; } body.wc-ui .progress-bar { border-radius: 20px; } body.wc-ui .progress-bar.bg-success { background: linear-gradient(90deg, var(--wc-success-dark) 0%, #52e2a0 100%) !important; } body.wc-ui .progress-bar.bg-danger { background: linear-gradient(90deg, var(--wc-danger-dark) 0%, #ff8687 100%) !important; } body.wc-ui a { color: var(--wc-primary-text); transition: color .15s var(--wc-ease); } body.wc-ui a:hover { color: var(--wc-primary-ink); } body.wc-ui hr { border-color: var(--wc-line); } /* Ecran de chargement plein ecran : supprime en V2. Il est pose a z-index 2000 et couvre toute la fenetre, donc il masquait integralement la nouvelle barre de progression (z-index 1030, volontairement glissee derriere le menu). Garder les deux revenait a rendre la barre invisible a chaque ouverture de page — exactement ce qu'elle doit signaler. La barre du haut devient donc le seul indicateur de chargement, comme sur la plupart des applications actuelles. Le theme d'origine, lui, conserve son ecran de chargement inchange. */ body.wc-ui #preloader { display: none !important; } /* Barre de defilement assortie (WebKit + Firefox) */ body.wc-ui ::-webkit-scrollbar { width: 10px; height: 10px; } body.wc-ui ::-webkit-scrollbar-track { background: transparent; } body.wc-ui ::-webkit-scrollbar-thumb { background: var(--wc-line-strong); border-radius: 8px; border: 2px solid var(--wc-page); } body.wc-ui ::-webkit-scrollbar-thumb:hover { background: var(--wc-text-faint); } body.wc-ui { scrollbar-color: var(--wc-line-strong) transparent; } /* ============================================================================= Disposition V2 : pas de barre du haut, pas de barre de pied ----------------------------------------------------------------------------- Les deux barres ne sont plus emises du tout par PHP (header.php / footer.php), il ne reste donc qu'a recuperer l'espace qu'elles reservaient et a aimanter le pied du menu lateral. ============================================================================= */ /* La regle `html body.navbar-sticky .app-content .content-wrapper` reservait 3rem pour la barre fixe. Selecteur volontairement plus specifique qu'elle. */ html body.wc-ui.navbar-sticky .app-content .content-wrapper, html body.wc-ui .app-content .content-wrapper { margin-top: 0; padding-top: 1.5rem; } /* Le menu devient une colonne : contenu extensible, pied colle en bas. overflow visible : le theme met .main-menu en overflow:hidden, ce qui rognait le menu deroulant du compte — de facon flagrante en mode reduit, ou un menu de 232px doit sortir d'un rail de 78px. Le defilement reste assure par .main-menu-content, qui a son propre overflow-y. */ body.wc-ui .main-menu { display: flex; flex-direction: column; overflow: visible; } /* Contrepartie de l'overflow visible ci-dessus. Le bloc d'en-tete du menu conserve une largeur de 260px meme lorsque le rail est reduit a 78px. Tant que .main-menu masquait son debordement, ce surplus etait rogne ; en le laissant visible pour le menu du compte, il redevenait survolable — et app-menu.js declenche l'expansion sur un mouseenter de .navbar-header. Resultat : le menu s'ouvrait en survolant une zone vide, de 78px a 260px en haut a gauche. On borne donc l'en-tete au rail. */ body.wc-ui .main-menu .navbar-header { max-width: 100%; overflow: hidden; } body.wc-ui .main-menu .navbar-header { flex: 0 0 auto; } body.wc-ui .main-menu .main-menu-content { flex: 1 1 auto; min-height: 0; /* sans cela le contenu pousse le pied hors de l'ecran */ overflow-y: auto; overflow-x: hidden; } /* ----------------------------------------------------------------------------- Pied du menu : les deux commandes centrees, puis la mention de copyright -------------------------------------------------------------------------- */ body.wc-ui .wc-menu-footer { flex: 0 0 auto; border-top: 1px solid var(--wc-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(242, 244, 244, .5) 100%); padding: 10px 8px calc(8px + env(safe-area-inset-bottom, 0px)); overflow: visible; /* le menu deroulant ne doit pas etre rogne */ } body.wc-ui .wc-menu-actions { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } body.wc-ui .wc-menu-actions .nav-item { position: relative; } body.wc-ui .wc-menu-actions .nav-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: var(--wc-r-md); color: var(--wc-text-soft); font-size: 19px; transition: background-color .16s var(--wc-ease), color .16s var(--wc-ease); } body.wc-ui .wc-menu-actions .nav-link:hover, body.wc-ui .wc-menu-actions .nav-link:focus { background: var(--wc-primary-tint); color: var(--wc-primary-text); } body.wc-ui .wc-menu-actions .nav-link:focus-visible { box-shadow: var(--wc-focus); outline: none; } body.wc-ui .wc-menu-copyright { margin-top: 8px; text-align: center; font-size: 10.5px; letter-spacing: .04em; color: var(--wc-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Menu reduit (78px) : les icones passent l'une sous l'autre, la mention disparait */ body.wc-ui.menu-collapsed .main-menu:not(.expanded) .wc-menu-actions { flex-direction: column; gap: 4px; } body.wc-ui.menu-collapsed .main-menu:not(.expanded) .wc-menu-copyright { display: none; } /* ----------------------------------------------------------------------------- Rubrique "compte" de la navigation Elle reprend l'habillage des autres rubriques a sous-menu ; seuls l'intitule de section "Theme" et la coche du theme actif lui sont propres. -------------------------------------------------------------------------- */ body.wc-ui .main-menu.menu-light .navigation > li.wc-account-item > a > i { color: var(--wc-text-soft); } /* Intitule de section a l'interieur du sous-menu : ce n'est pas un lien */ body.wc-ui .main-menu .navigation .menu-content > li.wc-account-separator { padding: 10px 0 2px 22px; pointer-events: none; } body.wc-ui .main-menu .navigation .menu-content > li.wc-account-separator .menu-title { color: var(--wc-text-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } /* Choix de theme : la coche est poussee a droite de la ligne */ body.wc-ui .main-menu .navigation .menu-content > li > a.wc-theme-choice { display: flex; align-items: center; } body.wc-ui .main-menu .navigation .menu-content > li > a.wc-theme-choice .menu-title { flex: 1 1 auto; } body.wc-ui .main-menu .navigation .menu-content > li > a.wc-theme-choice .wc-theme-check { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--wc-success-dark); } body.wc-ui .main-menu.menu-light .navigation .menu-content > li > a.wc-theme-choice-active { color: var(--wc-primary-text); font-weight: 600; } /* Menu reduit : le sous-menu du compte s'ouvre en survol comme les autres, l'intitule de section n'a plus de place. */ body.wc-ui.menu-collapsed .main-menu:not(.expanded) .navigation .menu-content > li.wc-account-separator { display: none; } /* ----------------------------------------------------------------------------- Bouton flottant d'ouverture du menu (mobile, V2 uniquement) Il remplace le hamburger qui vivait dans la barre du haut. -------------------------------------------------------------------------- */ .wc-floating-menu-trigger { display: none; } @media (max-width: 1199.98px) { body.wc-ui .wc-floating-menu-trigger { display: flex; align-items: center; justify-content: center; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; z-index: 1046; width: 46px; height: 46px; padding: 0; border: 1px solid var(--wc-line); border-radius: var(--wc-r-lg); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: var(--wc-e2); color: var(--wc-text-body); font-size: 18px; cursor: pointer; transition: transform .14s var(--wc-ease), box-shadow .18s var(--wc-ease); } body.wc-ui .wc-floating-menu-trigger:active { transform: scale(.94); } body.wc-ui .wc-floating-menu-trigger:focus-visible { box-shadow: var(--wc-e2), var(--wc-focus); outline: none; } /* Le bouton s'efface quand le tiroir est ouvert : la croix du tiroir prend le relais */ body.wc-ui.wc-mobile-nav-open .wc-floating-menu-trigger { opacity: 0; pointer-events: none; } /* Place pour le bouton flottant en haut du contenu. Le selecteur doit reprendre `.navbar-sticky` : sans lui il serait moins specifique que la regle desktop ci-dessus et ne s'appliquerait jamais. */ html body.wc-ui.navbar-sticky .app-content .content-wrapper, html body.wc-ui .app-content .content-wrapper { padding-top: 70px; } } /* ============================================================================= Tiroir mobile ============================================================================= */ @media (max-width: 1199.98px) { body.wc-ui.wc-mobile-nav-ready #navbar-id { background: var(--wc-surface); box-shadow: var(--wc-e4); } body.wc-ui.wc-mobile-nav-ready #navbar-id .navbar-header { border-color: var(--wc-line); } body.wc-ui.wc-mobile-nav-ready #navbar-id .modern-nav-toggle { background: var(--wc-surface-sunk); border: 1px solid var(--wc-line); color: var(--wc-text-body); } body.wc-ui.wc-mobile-nav-ready .sidenav-overlay { background: rgba(25, 42, 70, .38); } } /* Le survol qui souleve la carte n'a pas de sens sans pointeur */ @media (hover: none) { body.wc-ui .card:hover { transform: none; box-shadow: var(--wc-e2); } } @media (prefers-reduced-motion: reduce) { body.wc-ui * { transition: none !important; } body.wc-ui .card:hover { transform: none; } } /* ============================================================================= Selecteur de theme du menu utilisateur (present dans les deux themes) ============================================================================= */ .wc-theme-choice { display: flex; align-items: center; } .wc-theme-choice .wc-theme-check { margin-left: auto; font-size: 12px; color: var(--wc-success-ink); } /* ----------------------------------------------------------------------------- Note contraste Le theme d'origine ecrit les liens du menu et les libelles secondaires en #8494a7, soit 3,10:1 sur fond blanc — sous le seuil AA (4,5:1) pour du texte de cette taille. Le V2 les assombrit a #607890 : teinte (210deg) et saturation (20%) rigoureusement identiques, seule la luminosite descend de 59% a 47%, ce qui porte le contraste a 4,58:1. Pour revenir strictement au ton d'origine, remplacer la valeur de --wc-text-soft par #8494a7 en haut de ce fichier. Le blanc sur le bleu primaire (#5a8dee) reste a 3,24:1 : c'est la couleur de marque du theme d'origine, elle n'a pas ete touchee. -------------------------------------------------------------------------- */