/* ==========================================================================
D-movie — thème unifié Defours
--------------------------------------------------------------------------
Direction éditoriale reprise de d-sound-v2/help/admin-unified.html
(maquette « Admin unifié — direction éditoriale »).
Cette feuille est une COUCHE DE RE-SKIN : elle est chargée en dernier et
ne redéfinit que l'apparence des classes déjà présentes dans le markup
(Bootstrap 3 + thème « Quirk »). Aucun template n'a besoin d'être
réécrit : les 88 vues héritent du nouveau design automatiquement.
Sommaire
1. Jetons de design
2. Base typographique
3. Coque : topbar / rail latéral / panneau principal
4. Navigation du rail
5. Contenu : titres de page, cartes (.panel)
6. Tableaux
7. Boutons
8. Formulaires
9. Statuts, badges, alertes
10. Pagination & DataTables
11. Divers legacy (vignettes, loaders, fancybox…)
12. Connexion
13. Responsive
========================================================================== */
/* ------------------------------------------------------------------ */
/* 1. Jetons de design */
/* ------------------------------------------------------------------ */
:root {
/* Papier & encre */
--dm-paper: #f2efe8; /* fond de page */
--dm-card: #fffdf8; /* fond des cartes */
--dm-card-alt: #f7f3ea; /* fond des en-têtes de tableau, champs */
--dm-line: #e2dacb; /* bordure de carte */
--dm-line-soft: #ece7dd; /* séparateur interne */
--dm-line-softer: #f2ede3; /* séparateur très léger (hors tableaux) */
--dm-row-alt: #faf7f0; /* zébrage des lignes de tableau */
--dm-line-strong: #d8cfbd; /* bordure de bouton secondaire */
--dm-ink: #1b1f26; /* texte principal */
--dm-muted: #6f7681; /* texte secondaire */
--dm-subtle: #8b8375; /* micro-libellés */
--dm-faint: #a49b8c; /* placeholders, unités */
/* Rail latéral (encre) */
--dm-rail: #161a20;
--dm-rail-edge: #232a34;
--dm-rail-active: #333e4d;
--dm-rail-hover: #1c222b;
--dm-rail-text: #98a0ac;
--dm-rail-title: #6a7280;
--dm-rail-ink: #f7f4ee;
/* Accent D-movie (teinte applicative « Affichage dynamique ») */
--dm-accent: #a63a22;
--dm-accent-dark: #86301c;
/* Statuts */
--dm-ok-bg: #e7f1e9; --dm-ok-fg: #276244; --dm-ok-line: #c9e0d1;
--dm-warn-bg: #f9f0dc; --dm-warn-fg: #8a5209; --dm-warn-line: #ead9b4;
--dm-bad-bg: #fbe9e5; --dm-bad-fg: #a32e22; --dm-bad-line: #eec6be;
--dm-neutral-bg: #f4efe4; --dm-neutral-fg: #6f7681; --dm-neutral-line: #e6ded0;
/* Géométrie */
--dm-rail-w: 276px;
--dm-topbar-h: 72px;
--dm-r-card: 18px;
--dm-r-md: 12px;
--dm-r-sm: 8px;
--dm-pill: 999px;
--dm-font: 'Instrument Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
--dm-mono: ui-monospace, Menlo, Consolas, monospace;
}
/* ------------------------------------------------------------------ */
/* 2. Base typographique */
/* ------------------------------------------------------------------ */
html,
body {
background: var(--dm-paper);
}
body {
font-family: var(--dm-font);
font-size: 14px;
line-height: 1.5;
color: var(--dm-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body h1, body h2, body h3, body h4, body h5, body h6,
.panel-title, .pageheader h2 {
font-family: var(--dm-font);
color: var(--dm-ink);
letter-spacing: -0.01em;
}
body a {
color: var(--dm-accent);
text-decoration: none;
}
body a:hover,
body a:focus {
color: var(--dm-accent-dark);
text-decoration: underline;
}
::selection { background: #e6ded0; }
::-moz-selection { background: #e6ded0; }
::-webkit-input-placeholder { color: var(--dm-faint); }
::-moz-placeholder { color: var(--dm-faint); opacity: 1; }
:-ms-input-placeholder { color: var(--dm-faint); }
::placeholder { color: var(--dm-faint); }
input, select, textarea, button {
font-family: var(--dm-font);
}
hr {
border-top: 1px solid var(--dm-line-soft);
}
code, kbd, pre, samp,
.roles-list code {
font-family: var(--dm-mono);
}
/* ------------------------------------------------------------------ */
/* 3. Coque : topbar / rail latéral / panneau principal */
/* ------------------------------------------------------------------ */
/* --- Barre supérieure : claire, fine, collante -------------------- */
body:not(.publicitescontent) .headerpanel {
height: var(--dm-topbar-h);
background: var(--dm-paper);
border-bottom: 1px solid var(--dm-line);
left: var(--dm-rail-w);
box-shadow: none;
}
body:not(.publicitescontent) .headerpanel .logopanel {
position: static;
float: left;
width: auto;
height: var(--dm-topbar-h);
background: transparent;
padding: 0 0 0 28px;
display: flex;
align-items: center;
}
body:not(.publicitescontent) .headerpanel .logopanel h2 {
margin: 0;
line-height: 1;
}
body:not(.publicitescontent) .headerpanel .logopanel img.logo-videonet {
max-height: 30px;
width: auto;
filter: none;
}
body:not(.publicitescontent) .headerbar {
padding-left: 0;
height: var(--dm-topbar-h);
display: flex;
align-items: center;
}
body:not(.publicitescontent) .headerbar .header-right {
margin-left: auto;
padding-right: 28px;
}
body:not(.publicitescontent) .headermenu {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
float: none;
}
body:not(.publicitescontent) .headermenu > li {
float: none;
display: flex;
align-items: center;
}
/* Boutons de la barre supérieure : pilules crème */
.headerbar .btn,
.headerbar .btn-logged,
.headerbar .btn-group > .btn {
height: 38px;
display: inline-flex;
align-items: center;
padding: 0 16px;
border-radius: var(--dm-pill);
border: 1px solid var(--dm-line);
background: var(--dm-card);
color: var(--dm-ink);
font-size: 13px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
box-shadow: none;
}
.headerbar .btn:hover,
.headerbar .btn-logged:hover {
border-color: var(--dm-ink);
background: var(--dm-card);
color: var(--dm-ink);
}
.headerbar .btn-group > .btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: transparent;
}
.headerbar .btn-group > .btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.headerbar #btn-logout {
color: var(--dm-accent);
}
.headerbar .returnlogin .btn,
.headerbar .returnlogin a {
border-color: var(--dm-accent);
color: var(--dm-accent);
}
/* --- Rail latéral : encre, permanent ------------------------------ */
body:not(.publicitescontent) .leftpanel {
width: var(--dm-rail-w);
left: 0;
top: 0;
bottom: 0;
background: var(--dm-rail);
border-right: 1px solid var(--dm-rail-edge);
z-index: 2100;
display: flex;
flex-direction: column;
/* Le débordement est géré par .leftpanelinner : sinon le bouton du tiroir,
positionné hors du rail, serait rogné. */
overflow: visible;
}
/* Liseré d'accent applicatif en tête de rail */
body:not(.publicitescontent) .leftpanel:before {
content: "";
display: block;
height: 4px;
flex: none;
background: var(--dm-accent);
}
body:not(.publicitescontent) .leftpanel .leftpanelinner {
/* Même respiration que le rail Dinaudio (.sf-rail__nav) */
padding: 6px 14px 14px;
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* --- Encart de marque, en haut du rail ---------------------------- */
/* Repris à l'identique du back-office Dinaudio (spotflow.fr), règle
.sf-brandcard de web/ressources/css/clientoffice.css : même emplacement
(juste sous le liseré d'accent), même carte surélevée, même typographie.
Les valeurs en dur (#333e4d, #45515f, #f7f8fa, #7e8794) sont celles de
Dinaudio et sont laissées telles quelles pour que les deux back-offices
restent comparables ligne à ligne. */
body:not(.publicitescontent) .leftpanel .railbrand-slot {
flex: none;
padding: 16px 14px 14px;
}
body:not(.publicitescontent) .leftpanel .railbrand {
width: 100%;
min-height: 60px;
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
background: var(--dm-rail-active);
border: 1px solid #45515f;
border-radius: 14px;
text-align: left;
color: inherit;
text-decoration: none;
}
body:not(.publicitescontent) .leftpanel .railbrand:hover,
body:not(.publicitescontent) .leftpanel .railbrand:focus {
border-color: #5a6879;
color: inherit;
text-decoration: none;
}
body:not(.publicitescontent) .leftpanel .railbrand-mark {
width: 40px;
height: 40px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #f7f8fa;
border-radius: 10px;
background: #f7f8fa;
overflow: hidden;
}
body:not(.publicitescontent) .leftpanel .railbrand-mark img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
body:not(.publicitescontent) .leftpanel .railbrand-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
body:not(.publicitescontent) .leftpanel .railbrand-name {
font-size: 19px;
font-weight: 600;
line-height: 1.1;
color: var(--dm-rail-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.publicitescontent) .leftpanel .railbrand-sub {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7e8794;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Le rail est permanent : le bouton d'ouverture n'a plus lieu d'être */
body:not(.publicitescontent) .leftpanel .stickmenu {
display: none;
}
/* --- Panneau principal -------------------------------------------- */
body:not(.publicitescontent) .mainpanel {
margin-left: var(--dm-rail-w);
padding-top: var(--dm-topbar-h);
background: var(--dm-paper);
min-height: 100vh;
}
body:not(.publicitescontent) .contentpanel {
padding: 32px;
max-width: 1560px;
}
/* ------------------------------------------------------------------ */
/* 4. Navigation du rail */
/* ------------------------------------------------------------------ */
/* La liste legacy était une carte blanche à filets : on la dématérialise */
.leftpanel .nav-quirk,
.leftpanel .nav-stacked {
margin: 0;
padding: 0;
background-color: transparent;
}
.leftpanel .nav-quirk > li,
.leftpanel .nav-quirk > li:not(:first-child),
.leftpanel .nav-quirk > li:last-child,
.leftpanel .nav-quirk > li.active,
.leftpanel .nav-quirk > li.active + li {
border: 0;
text-transform: none;
font-family: var(--dm-font);
}
/* Intitulé de section */
.leftpanel .tab-pane#mainmenu:before {
content: "SECTIONS";
display: block;
padding: 10px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--dm-rail-title);
}
/* Entrée de navigation */
.leftpanel .nav-quirk > li > a,
.leftpanel .nav-stacked > li > a {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 42px;
padding: 0 10px 0 15px;
margin: 1px 0;
border: 0;
border-radius: var(--dm-r-md);
background: transparent;
color: var(--dm-rail-text);
font-size: 13.5px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* Le liseré d'accent de l'entrée active */
.leftpanel .nav-quirk > li > a:before {
content: "";
position: absolute;
left: 6px;
top: 50%;
margin-top: -10px;
width: 3px;
height: 20px;
border-radius: 2px;
background: transparent;
}
.leftpanel .nav-quirk > li > a:hover,
.leftpanel .nav-quirk > li > a:focus {
background: var(--dm-rail-hover);
color: var(--dm-rail-ink);
text-decoration: none;
}
.leftpanel .nav-quirk > li.active:not(.nav-parent) > a,
.leftpanel .nav-quirk > li.active:not(.nav-parent) > a:hover,
.leftpanel .nav-quirk > li.active:not(.nav-parent) > a:focus {
background: var(--dm-rail-active);
color: var(--dm-card);
font-weight: 600;
}
.leftpanel .nav-quirk > li.active:not(.nav-parent) > a:before {
background: var(--dm-accent);
}
/* Un parent déplié n'est pas la page courante : il s'éclaircit sans se remplir,
sinon deux entrées paraissent actives en même temps. */
.leftpanel .nav-quirk > li.nav-parent.active > a,
.leftpanel .nav-quirk > li.nav-parent.nav-active > a {
background: transparent;
color: var(--dm-rail-ink);
font-weight: 600;
}
/* Chevron du parent, recalé sur la hauteur de ligne du rail */
.leftpanel .nav-quirk > li.nav-parent > a:after {
top: 50%;
right: 12px;
margin-top: -8px;
color: var(--dm-rail-title);
}
.leftpanel .nav-quirk > li.nav-parent > a {
padding-right: 30px;
}
.leftpanel .nav-quirk > li > a > i,
.leftpanel .nav-quirk .children > li > a > i,
.leftpanel .nav-stacked > li > a > i {
width: 16px;
flex: none;
margin: 0;
font-size: 14px;
text-align: center;
vertical-align: baseline;
color: inherit;
opacity: 0.7;
}
.leftpanel .nav-quirk > li.active > a > i {
opacity: 1;
}
.leftpanel .nav-quirk > li > a > span {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Sous-menus : plus de bloc gris clair ni de puces, juste un filet de rappel */
.leftpanel .nav-quirk .children,
.leftpanel .nav-quirk > li.active .children {
margin: 2px 0 6px 15px;
padding: 0;
list-style: none;
background-color: transparent;
border: 0;
border-left: 1px solid var(--dm-rail-edge);
}
.leftpanel .nav-quirk > li.active .children:before {
display: none;
}
.leftpanel .nav-quirk .children > li,
.leftpanel .nav-quirk .children > li:first-child,
.leftpanel .nav-quirk .children > li:last-child {
margin-left: 0;
padding: 0;
border-left: 0;
font-family: var(--dm-font);
}
.leftpanel .nav-quirk .children > li > a,
.leftpanel .nav-quirk .children > li > a:not(.btn) {
display: flex;
align-items: center;
gap: 10px;
height: auto;
min-height: 36px;
margin: 1px 0 1px 8px;
padding: 0 10px;
border-radius: var(--dm-r-sm);
color: var(--dm-rail-text);
font-size: 13px;
font-weight: 400;
}
.leftpanel .nav-quirk .children > li > a:before,
.leftpanel .nav-quirk .children > li > a:after {
display: none;
}
.leftpanel .nav-quirk .children > li > a:hover {
background: var(--dm-rail-hover);
color: var(--dm-rail-ink);
text-decoration: none;
}
.leftpanel .nav-quirk .children > li.active > a,
.leftpanel .nav-quirk .children > li.active > a:not(.btn) {
background: var(--dm-rail-active);
color: var(--dm-card);
font-weight: 600;
}
/* Pastilles d'état d'écran dans le menu « Ecrans » */
.leftpanel .nav-quirk .children .synchro,
.leftpanel .nav-quirk .children .not-synchro {
width: 8px;
height: 8px;
top: 0;
}
/* Bandeau d'identité en pied de rail */
.leftpanel .leftpanel-userinfo {
border-top: 1px solid var(--dm-rail-edge);
color: var(--dm-rail-text);
}
/* ------------------------------------------------------------------ */
/* 5. Contenu : titres de page, cartes */
/* ------------------------------------------------------------------ */
.pageheader {
padding: 0 0 24px;
background: transparent;
border: 0;
}
.pageheader h2 {
margin: 0;
font-size: 40px;
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.015em;
}
/* Carte */
.contentpanel .panel,
.mainpanel .panel {
background: var(--dm-card);
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-card);
box-shadow: none;
overflow: hidden;
margin-bottom: 26px;
}
.contentpanel .panel > .panel-heading,
.mainpanel .panel > .panel-heading {
padding: 22px 24px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--dm-line-soft);
}
/* Le titre de carte joue le rôle du titre éditorial de la maquette */
.contentpanel .panel-title,
.mainpanel .panel-title {
margin: 0;
font-size: 30px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--dm-ink);
text-transform: none;
}
/* Neutralise les couleurs vives héritées sur les titres */
.contentpanel .panel-title.text-success,
.contentpanel .panel-title.text-danger,
.mainpanel .panel-title.text-success,
.mainpanel .panel-title.text-danger {
color: var(--dm-ink);
}
.contentpanel .panel-heading > p,
.mainpanel .panel-heading > p {
margin: 10px 0 0;
max-width: 640px;
color: var(--dm-muted);
font-size: 14.5px;
}
.contentpanel .panel-body,
.mainpanel .panel-body {
padding: 24px;
background: transparent;
}
.contentpanel .panel-body.nopaddingtop,
.mainpanel .panel-body.nopaddingtop {
padding-top: 0;
}
.contentpanel .panel-footer,
.mainpanel .panel-footer {
background: var(--dm-card-alt);
border-top: 1px solid var(--dm-line-soft);
padding: 16px 24px;
}
/* Micro-libellé réutilisable (grilles de statistiques) */
.dm-eyebrow,
.panel .stat-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dm-subtle);
}
/* ------------------------------------------------------------------ */
/* 6. Tableaux */
/* ------------------------------------------------------------------ */
.contentpanel .table,
.mainpanel .table {
margin-bottom: 0;
background: transparent;
border-collapse: collapse;
}
.contentpanel .table > thead > tr,
.mainpanel .table > thead > tr,
.contentpanel .table > thead.success > tr,
.mainpanel .table > thead.success > tr {
background: var(--dm-card-alt);
}
.contentpanel .table > thead > tr > th,
.mainpanel .table > thead > tr > th {
padding: 12px 20px;
border: 0;
border-bottom: 1px solid var(--dm-line-soft);
background: transparent;
color: var(--dm-subtle);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
.contentpanel .table > tbody > tr,
.mainpanel .table > tbody > tr {
background: transparent;
border-bottom: 1px solid var(--dm-line-soft);
}
.contentpanel .table > tbody > tr > td,
.mainpanel .table > tbody > tr > td {
padding: 14px 20px;
border: 0;
vertical-align: middle;
color: var(--dm-ink);
}
/* Zébrage discret + séparateur : deux lignes consécutives doivent se distinguer */
.contentpanel .table-striped > tbody > tr:nth-of-type(odd),
.mainpanel .table-striped > tbody > tr:nth-of-type(odd) {
background: var(--dm-row-alt);
}
.contentpanel .table > tbody > tr:hover,
.mainpanel .table > tbody > tr:hover {
background: var(--dm-card-alt);
}
.contentpanel .table-bordered,
.mainpanel .table-bordered,
.contentpanel .table-bordered > tbody > tr > td,
.contentpanel .table-bordered > thead > tr > th,
.mainpanel .table-bordered > tbody > tr > td,
.mainpanel .table-bordered > thead > tr > th {
border: 0;
}
.contentpanel .table-bordered > tbody > tr,
.mainpanel .table-bordered > tbody > tr {
border-bottom: 1px solid var(--dm-line-soft);
}
/* Normalisation de l'alignement.
Le markup legacy pose `.text-right` sur les | mais pas toujours sur les
| correspondants : l'en-tête et sa colonne partaient dans deux sens.
Comme dans la maquette, seule la colonne d'actions (dernière colonne, ou
.th-action2) est alignée à droite ; tout le reste se lit à gauche. */
.contentpanel .table > thead > tr > th:not(:last-child):not(.th-action2),
.mainpanel .table > thead > tr > th:not(:last-child):not(.th-action2),
.contentpanel .table > tbody > tr > td:not(:last-child),
.mainpanel .table > tbody > tr > td:not(:last-child) {
text-align: left;
}
.contentpanel .table > thead > tr > th:last-child,
.mainpanel .table > thead > tr > th:last-child,
.contentpanel .table .th-action2,
.mainpanel .table .th-action2 {
text-align: right;
}
/* Colonne d'actions : les boutons restent sur une seule ligne */
.contentpanel .table td.text-right,
.mainpanel .table td.text-right,
.contentpanel .table > tbody > tr > td:last-child,
.mainpanel .table > tbody > tr > td:last-child {
white-space: nowrap;
}
/* Un tableau collé aux bords d'une carte : on retire le double padding */
.panel-body.nopaddingtop > .table-responsive {
margin: 0 -24px;
border: 0;
}
.table-responsive {
border: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Chiffres alignés */
.contentpanel .table td,
.mainpanel .table td {
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------------ */
/* 7. Boutons */
/* ------------------------------------------------------------------ */
.contentpanel .btn,
.mainpanel .btn,
.modal .btn {
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 18px;
border-radius: var(--dm-pill);
border: 1px solid var(--dm-line-strong);
background: var(--dm-card);
color: var(--dm-ink);
font-size: 13px;
font-weight: 600;
line-height: 1;
box-shadow: none;
white-space: nowrap;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
/* .btn-quirk mettait les libellés en capitales : la maquette ne le fait pas */
.contentpanel .btn-quirk,
.mainpanel .btn-quirk,
.headerbar .btn-quirk {
text-transform: none;
font-weight: 600;
font-family: var(--dm-font);
letter-spacing: 0;
}
.contentpanel .btn-wide,
.mainpanel .btn-wide {
padding: 0 18px;
}
/* Action principale : accent plein */
.contentpanel .btn-success,
.mainpanel .btn-success,
.contentpanel .btn-primary,
.mainpanel .btn-primary,
.modal .btn-success,
.modal .btn-primary {
background: var(--dm-accent);
border-color: var(--dm-accent);
color: var(--dm-card);
}
.contentpanel .btn-success:hover,
.contentpanel .btn-success:focus,
.mainpanel .btn-success:hover,
.mainpanel .btn-success:focus,
.contentpanel .btn-primary:hover,
.mainpanel .btn-primary:hover,
.modal .btn-success:hover,
.modal .btn-primary:hover {
background: var(--dm-accent-dark);
border-color: var(--dm-accent-dark);
color: var(--dm-card);
text-decoration: none;
}
/* Action secondaire : contour */
.contentpanel .btn-default,
.mainpanel .btn-default,
.modal .btn-default {
background: var(--dm-card);
border-color: var(--dm-line-strong);
color: var(--dm-ink);
}
.contentpanel .btn-default:hover,
.contentpanel .btn-default:focus,
.mainpanel .btn-default:hover,
.mainpanel .btn-default:focus,
.modal .btn-default:hover {
background: var(--dm-card);
border-color: var(--dm-ink);
color: var(--dm-ink);
text-decoration: none;
}
/* Action destructive */
.contentpanel .btn-danger,
.mainpanel .btn-danger,
.contentpanel .btn.delete-entity,
.mainpanel .btn.delete-entity,
.modal .btn-danger {
background: var(--dm-card);
border-color: var(--dm-bad-line);
color: var(--dm-bad-fg);
}
.contentpanel .btn-danger:hover,
.mainpanel .btn-danger:hover,
.contentpanel .btn.delete-entity:hover,
.mainpanel .btn.delete-entity:hover,
.modal .btn-danger:hover {
background: var(--dm-bad-bg);
border-color: var(--dm-bad-fg);
color: var(--dm-bad-fg);
text-decoration: none;
}
.contentpanel .btn-sm,
.mainpanel .btn-sm,
.contentpanel .btn-xs,
.mainpanel .btn-xs {
height: 34px;
padding: 0 12px;
font-size: 12.5px;
}
.contentpanel .btn.disabled,
.contentpanel .btn[disabled],
.mainpanel .btn.disabled,
.mainpanel .btn[disabled] {
opacity: 0.45;
box-shadow: none;
}
.mr5 {
margin-right: 8px;
}
/* ------------------------------------------------------------------ */
/* 8. Formulaires */
/* ------------------------------------------------------------------ */
.contentpanel .control-label,
.mainpanel .control-label {
padding-top: 10px;
color: var(--dm-ink);
font-size: 13px;
font-weight: 600;
}
.contentpanel .form-control,
.mainpanel .form-control,
.modal .form-control {
height: 40px;
padding: 0 14px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-r-md);
background: var(--dm-card);
color: var(--dm-ink);
font-size: 13.5px;
box-shadow: none;
transition: border-color .12s ease;
}
textarea.form-control {
height: auto;
min-height: 110px;
padding: 12px 14px;
line-height: 1.5;
}
.contentpanel .form-control:focus,
.mainpanel .form-control:focus,
.modal .form-control:focus {
border-color: var(--dm-ink);
outline: none;
box-shadow: none;
}
.contentpanel .form-group,
.mainpanel .form-group {
margin-bottom: 18px;
}
.contentpanel .help-block,
.mainpanel .help-block {
color: var(--dm-muted);
font-size: 12.5px;
}
/* Champ de recherche en pilule (barres de filtres) */
.search-container input[type="text"],
.search-container input[type="search"],
.dataTables_filter input {
height: 38px;
padding: 0 14px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-pill);
background: var(--dm-card-alt);
color: var(--dm-ink);
font-size: 13px;
box-shadow: none;
}
.search-container input[type="text"]:focus,
.dataTables_filter input:focus {
border-color: var(--dm-ink);
outline: none;
}
/* Select2 aligné sur les champs natifs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
height: 40px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-r-md);
background: var(--dm-card);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px;
padding-left: 12px;
color: var(--dm-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px;
}
.select2-dropdown {
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-md);
background: var(--dm-card);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--dm-accent);
}
/* jQuery UI / datetimepicker : fond crème */
.ui-widget-content,
.xdsoft_datetimepicker {
background: var(--dm-card);
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-md);
color: var(--dm-ink);
}
/* ------------------------------------------------------------------ */
/* 9. Statuts, badges, alertes */
/* ------------------------------------------------------------------ */
/* Pastilles d'état de synchronisation d'écran */
.synchro {
width: 9px;
height: 9px;
top: -1px;
background-color: var(--dm-ok-fg);
box-shadow: 0 0 0 3px rgba(39, 98, 68, 0.14);
}
.not-synchro {
width: 9px;
height: 9px;
top: -1px;
background-color: var(--dm-warn-fg);
box-shadow: 0 0 0 3px rgba(138, 82, 9, 0.14);
}
/* Pilules de statut réutilisables */
.dm-badge,
.contentpanel .label,
.mainpanel .label,
.contentpanel .badge,
.mainpanel .badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: var(--dm-pill);
border: 1px solid var(--dm-neutral-line);
background: var(--dm-neutral-bg);
color: var(--dm-neutral-fg);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
text-shadow: none;
}
.dm-badge--ok,
.contentpanel .label-success,
.mainpanel .label-success {
background: var(--dm-ok-bg);
border-color: var(--dm-ok-line);
color: var(--dm-ok-fg);
}
.dm-badge--warn,
.contentpanel .label-warning,
.mainpanel .label-warning {
background: var(--dm-warn-bg);
border-color: var(--dm-warn-line);
color: var(--dm-warn-fg);
}
.dm-badge--bad,
.contentpanel .label-danger,
.mainpanel .label-danger,
.contentpanel .badge,
.mainpanel .badge.badge-danger {
background: var(--dm-bad-bg);
border-color: var(--dm-bad-line);
color: var(--dm-bad-fg);
}
/* Jetons de rôle en monospace, comme dans la maquette */
.dm-token {
display: inline-block;
padding: 2px 8px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-r-sm);
background: var(--dm-neutral-bg);
color: var(--dm-muted);
font-family: var(--dm-mono);
font-size: 11px;
}
/* Alertes */
.contentpanel .alert,
.mainpanel .alert {
padding: 14px 18px;
border-radius: var(--dm-r-md);
border: 1px solid var(--dm-neutral-line);
background: var(--dm-neutral-bg);
color: var(--dm-ink);
font-size: 13.5px;
}
.contentpanel .alert-success,
.mainpanel .alert-success {
background: var(--dm-ok-bg);
border-color: var(--dm-ok-line);
color: var(--dm-ok-fg);
}
.contentpanel .alert-warning,
.mainpanel .alert-warning {
background: var(--dm-warn-bg);
border-color: var(--dm-warn-line);
color: var(--dm-warn-fg);
}
.contentpanel .alert-danger,
.mainpanel .alert-danger {
background: var(--dm-bad-bg);
border-color: var(--dm-bad-line);
color: var(--dm-bad-fg);
}
/* Couleurs de texte utilitaires ré-accordées */
.contentpanel .text-success,
.mainpanel .text-success { color: var(--dm-ok-fg); }
.contentpanel .text-danger,
.mainpanel .text-danger,
.contentpanel .red,
.mainpanel .red { color: var(--dm-bad-fg); }
.contentpanel .text-warning,
.mainpanel .text-warning { color: var(--dm-warn-fg); }
.contentpanel .text-muted,
.mainpanel .text-muted { color: var(--dm-muted); }
/* ------------------------------------------------------------------ */
/* 10. Pagination & DataTables */
/* ------------------------------------------------------------------ */
.pagination > li {
display: inline-block;
padding: 0;
border: 0;
background: transparent;
}
.pagination > li > a,
.pagination > li > span {
/* inline-flex + line-height 1 : les glyphes ‹ › (police plus grosse)
restent centrés verticalement dans la pastille, pas calés en bas. */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border: 1px solid var(--dm-neutral-line) !important;
border-radius: var(--dm-r-sm) !important;
background: var(--dm-card) !important;
color: var(--dm-ink) !important;
font-size: 13px;
line-height: 1;
text-align: center;
}
.pagination > li.active > a,
.pagination > li.active > span {
background: var(--dm-ink) !important;
border-color: var(--dm-ink) !important;
color: var(--dm-card) !important;
}
.dataTables_info,
.dataTables_length,
.dataTables_filter {
color: var(--dm-muted);
font-size: 12.5px;
}
.pagination > li > a:hover {
background: var(--dm-card-alt) !important;
border-color: var(--dm-ink) !important;
color: var(--dm-ink) !important;
}
/* ------------------------------------------------------------------ */
/* 11. Divers legacy */
/* ------------------------------------------------------------------ */
/* Vignettes d'accès rapide (comptes d'enseigne) */
.search-container.full-width {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid var(--dm-line-soft);
/* common.css : `.full-width { float: left; margin-bottom: 20px }`. Flottant,
le bloc laissait le .panel-body suivant démarrer à la même hauteur : son
cadre carré apparaissait derrière les coins arrondis de la carte. */
float: none;
margin-bottom: 0;
}
.user-visuel,
.list-grid-item-contener {
float: none;
width: auto;
height: auto;
margin: 0;
border: 1px solid var(--dm-neutral-line);
border-radius: 14px;
background-color: var(--dm-card-alt);
background-size: cover;
background-position: center;
overflow: hidden;
transition: border-color .12s ease, box-shadow .12s ease;
}
.user-visuel:hover,
.list-grid-item-contener:hover {
border-color: var(--dm-ink);
box-shadow: 0 8px 20px -10px rgba(27, 31, 38, 0.35);
text-decoration: none;
}
.user-visuel {
display: block;
padding-top: 78px;
}
.user-visuel .name,
.list-grid-item-txt {
display: block;
padding: 10px 12px;
border-top: 1px solid var(--dm-line-soft);
background: var(--dm-card);
color: var(--dm-ink);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Modales */
.modal-content {
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-card);
background: var(--dm-card);
box-shadow: 0 28px 60px -18px rgba(20, 24, 31, 0.45),
0 2px 8px rgba(20, 24, 31, 0.12);
}
.modal-header,
.modal-footer {
border-color: var(--dm-line-soft);
padding: 18px 24px;
}
.modal-title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
}
.modal-body {
padding: 24px;
}
/* Loaders : voile encre plutôt que noir pur */
.background-loader {
background: rgba(22, 26, 32, 0.72);
}
.loader-content,
.loader-contener {
color: var(--dm-card);
}
.loader-content h2 {
font-family: var(--dm-font);
font-weight: 600;
letter-spacing: -0.01em;
}
/* Onglets */
.contentpanel .nav-tabs,
.mainpanel .nav-tabs {
border-bottom: 1px solid var(--dm-line-soft);
}
.contentpanel .nav-tabs > li > a,
.mainpanel .nav-tabs > li > a {
border: 0;
border-radius: 0;
color: var(--dm-muted);
font-size: 13.5px;
font-weight: 600;
}
.contentpanel .nav-tabs > li.active > a,
.mainpanel .nav-tabs > li.active > a {
border: 0;
border-bottom: 2px solid var(--dm-accent);
background: transparent;
color: var(--dm-ink);
}
/* Barre de progression */
.progress {
height: 4px;
border-radius: 2px;
background: #eae3d6;
box-shadow: none;
}
.progress-bar {
background: var(--dm-ok-fg);
box-shadow: none;
}
/* ------------------------------------------------------------------ */
/* 12. Connexion */
/* ------------------------------------------------------------------ */
/* Page de connexion : même design que la connexion de D-sound (d-sound-v2,
theme-unified.css §13), seule la couleur d'accent change. Fond encre uni,
carte crème avec surtitre « Administration », titre, sous-titre, puis un
encart intérieur qui porte le formulaire (champs en pilule sans bordure). */
html body.signwrapper {
background: var(--dm-rail);
}
html body.signwrapper .signpanel,
html body.signwrapper .sign-overlay {
background: var(--dm-rail);
background-image: none;
opacity: 1;
}
html body.signwrapper .panel.signin {
width: 400px;
padding: 20px;
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-card);
background: var(--dm-card);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
html body.signwrapper .panel.signin .panel-heading {
position: relative;
margin: 0 0 12px;
padding: 30px 30px 0;
border: 0;
background: transparent;
text-align: left;
}
html body.signwrapper .panel.signin .panel-heading:before {
content: "Administration";
display: block;
margin: 0 0 6px;
color: var(--dm-subtle);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: left;
}
html body.signwrapper .panel.signin h1 {
margin: 0;
color: var(--dm-ink);
font-size: 34px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.05;
text-align: center;
}
html body.signwrapper .panel.signin .panel-heading p {
margin: 8px 0 0;
color: var(--dm-muted);
font-size: 14.5px;
text-align: center;
}
html body.signwrapper .panel.signin .panel-body {
padding: 22px 30px 30px;
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-card);
background: var(--dm-card);
}
html body.signwrapper .signin .form-group {
margin: 0 0 18px;
}
/* Le groupe entier (icône + saisie) forme une seule pilule légèrement teintée
pour se détacher de la carte ; pas de pastille derrière l'icône, qui est
teintée dans la couleur d'accent et suivie d'un petit espace avant le texte. */
html body.signwrapper .signin .input-group {
border: 1px solid var(--dm-line);
border-radius: var(--dm-pill);
background: var(--dm-card-alt);
transition: border-color .15s ease, background-color .15s ease;
}
html body.signwrapper .signin .input-group:focus-within {
border-color: var(--dm-accent);
background: var(--dm-card);
}
html body.signwrapper .signin .input-group > .input-group-addon {
padding: 0 10px 0 16px;
border: 0;
border-radius: var(--dm-pill) 0 0 var(--dm-pill);
background-color: transparent;
color: var(--dm-accent);
font-size: 12px;
}
html body.signwrapper .signin .input-group > .input-group-addon > i {
color: var(--dm-accent);
}
html body.signwrapper .signin .form-control {
height: 38px;
padding: 0 16px 0 0;
border: 0;
border-radius: 0 var(--dm-pill) var(--dm-pill) 0;
background: transparent;
color: var(--dm-ink);
font-size: 13.5px;
box-shadow: none;
}
html body.signwrapper .signin .form-control:focus {
border: 0;
background: transparent;
outline: none;
box-shadow: none;
}
html body.signwrapper .signin .btn,
html body.signwrapper .signin input[type="submit"] {
display: block;
width: 100%;
height: 40px;
padding: 0 18px;
border: 1px solid var(--dm-accent);
border-radius: var(--dm-pill);
background: var(--dm-accent);
color: var(--dm-card);
font-size: 13px;
font-weight: 600;
line-height: 38px;
text-align: center;
text-transform: none;
letter-spacing: 0;
box-shadow: none;
}
html body.signwrapper .signin .btn:hover,
html body.signwrapper .signin input[type="submit"]:hover {
background: var(--dm-accent-dark);
border-color: var(--dm-accent-dark);
color: var(--dm-card);
}
/* Bouton secondaire (portail Multiconnexion) : contour, même géométrie */
html body.signwrapper .signin .btn-default {
background: transparent;
border-color: var(--dm-line-strong);
color: var(--dm-ink);
}
html body.signwrapper .signin .btn-default:hover {
background: var(--dm-card-alt);
border-color: var(--dm-ink);
color: var(--dm-ink);
}
html body.signwrapper .signin hr {
margin: 22px 0;
}
html body.signwrapper .signin .error-connexion {
margin: 0 0 8px;
color: var(--dm-bad-fg);
font-size: 13px;
}
@media (max-width: 767px) {
html body.signwrapper .panel.signin {
width: auto;
max-width: 400px;
margin: 0 16px;
}
}
/* ------------------------------------------------------------------ */
/* 13. Responsive */
/* ------------------------------------------------------------------ */
/* Le rail glisse : le tiroir mobile s'ouvre via body.leftpanel-open */
body:not(.publicitescontent) .leftpanel {
transition: left .25s ease;
}
/* L'éditeur de thème (.thactive) escamote le rail : il doit sortir en entier */
html .thactive .leftpanel,
html .thactive .logopanel {
left: calc(var(--dm-rail-w) * -1) !important;
}
html .thactive .headerpanel {
left: 0 !important;
}
/* Sous 1100px le rail redevient un tiroir, piloté par .stickmenu */
@media (max-width: 1100px) {
body:not(.publicitescontent) .leftpanel {
left: calc(var(--dm-rail-w) * -1);
}
body:not(.publicitescontent).leftpanel-open .leftpanel {
left: 0;
}
body:not(.publicitescontent) .leftpanel .stickmenu {
display: block;
position: absolute;
top: 12px;
right: -46px;
width: 38px;
height: 38px;
line-height: 38px;
border: 1px solid var(--dm-line);
border-radius: var(--dm-pill);
background: var(--dm-card);
color: var(--dm-ink);
text-align: center;
cursor: pointer;
}
body:not(.publicitescontent) .headerpanel {
left: 0;
padding-left: 56px;
}
body:not(.publicitescontent) .mainpanel {
margin-left: 0;
}
body:not(.publicitescontent) .contentpanel {
padding: 20px;
}
.contentpanel .panel-title,
.mainpanel .panel-title {
font-size: 24px;
}
}
@media (max-width: 768px) {
body:not(.publicitescontent) .headerpanel .logopanel {
padding-left: 12px;
}
body:not(.publicitescontent) .headerbar .header-right {
padding-right: 12px;
}
body:not(.publicitescontent) .headermenu {
flex-wrap: nowrap;
gap: 6px;
}
body:not(.publicitescontent) .headerbar .btn-group {
display: inline-flex;
flex: none;
}
body:not(.publicitescontent) .headerbar .btn,
body:not(.publicitescontent) .headerbar .btn-logged {
float: none;
height: 34px;
padding: 0 12px;
font-size: 12.5px;
}
.contentpanel .panel-heading,
.mainpanel .panel-heading {
padding: 18px 16px;
}
.contentpanel .panel-body,
.mainpanel .panel-body {
padding: 16px;
}
.panel-body.nopaddingtop > .table-responsive {
margin: 0 -16px;
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-body.nopaddingtop {
padding-top: 16px !important;
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-body.nopaddingtop > .table-responsive:first-child {
margin-top: -16px;
}
.contentpanel .table > thead > tr > th,
.mainpanel .table > thead > tr > th,
.contentpanel .table > tbody > tr > td,
.mainpanel .table > tbody > tr > td {
padding: 12px 14px;
}
}
@media (max-width: 560px) {
body:not(.publicitescontent) .headerbar .returnlogin {
display: none;
}
}
/* ==========================================================================
14. Composants « Admin unifié v2 »
--------------------------------------------------------------------------
Repris de « Admin Unifie v2 (standalone) (2).html », écrans dmovie/dashboard,
dmovie/videos, dmovie/programmations, dmovie/ecrans et dmovie/users.
Comme le reste de cette feuille, les règles se branchent sur les classes
déjà présentes dans les .tpl : aucune vue n'est restructurée.
========================================================================== */
/* --- Titre de page ------------------------------------------------ */
/* La v2 distingue le TITRE DE PAGE (44px) des titres de carte. Dans D-movie
c'est le premier .panel de la page qui joue ce rôle : il passe en gros
titre éditorial, les cartes suivantes gardent leur échelle. */
.contentpanel .dash-left > .panel:first-child > .panel-heading .panel-title,
.contentpanel > .row:first-child .panel:first-child > .panel-heading .panel-title {
font-size: 40px;
line-height: 1.02;
letter-spacing: -0.015em;
}
/* Surtitre optionnel, à poser dans le .panel-heading */
.dm-eyebrow {
display: block;
margin-bottom: 6px;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dm-subtle);
}
/* Bloc d'actions aligné à droite du titre (.cartouche-right existant) */
.contentpanel .panel-heading .cartouche-right {
float: right;
display: flex;
align-items: center;
gap: 10px;
margin-left: 24px;
}
/* --- Grille de statistiques --------------------------------------- */
.dm-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin-bottom: 26px;
background: var(--dm-line);
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-card);
overflow: hidden;
}
.dm-stat {
padding: 20px;
background: var(--dm-card);
}
.dm-stat__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dm-subtle);
}
.dm-stat__value {
margin-top: 12px;
font-size: 40px;
font-weight: 600;
line-height: 0.95;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.dm-stat__sub {
margin-top: 14px;
font-size: 12.5px;
color: var(--dm-muted);
}
.dm-stat--warn .dm-stat__value { color: var(--dm-warn-fg); }
.dm-stat--bad .dm-stat__value { color: var(--dm-bad-fg); }
@media (max-width: 1100px) {
.dm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.dm-stats { grid-template-columns: 1fr; }
}
/* --- Barre de filtres en pilule ----------------------------------- */
/* La liste de catégories des vues Vidéos / Publicités devient la barre de
filtres de la v2 : une pilule crème contenant des puces cliquables. */
.contentpanel .categorie-list {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 18px 0 0;
padding: 12px 16px;
list-style: none;
background: var(--dm-card);
border: 1px solid var(--dm-line);
border-radius: var(--dm-pill);
}
.contentpanel .categorie-list > li {
float: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.contentpanel .categorie-list > li > a,
.contentpanel .categorie-list > li.add-categorie {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 14px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-pill);
background: var(--dm-neutral-bg);
color: var(--dm-muted);
font-size: 12.5px;
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.contentpanel .categorie-list > li > a:hover,
.contentpanel .categorie-list > li.add-categorie:hover {
border-color: var(--dm-ink);
color: var(--dm-ink);
text-decoration: none;
}
.contentpanel .categorie-list > li.active > a {
background: var(--dm-ink);
border-color: var(--dm-ink);
color: var(--dm-card);
}
/* La puce « + » de création de catégorie reste en pointillés, comme en v2 */
.contentpanel .categorie-list > li.add-categorie {
width: 36px;
padding: 0;
background: transparent;
border-style: dashed;
border-color: #cfc4ae;
color: var(--dm-subtle);
font-size: 15px;
}
/* --- Bascule Vignettes / Liste ------------------------------------ */
.contentpanel .dm-seg {
display: inline-flex;
border-radius: var(--dm-pill);
overflow: hidden;
}
.contentpanel .dm-seg .change-style-list {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 16px;
border: 1px solid var(--dm-line-strong);
background: var(--dm-card);
color: var(--dm-muted);
font-size: 13px;
cursor: pointer;
user-select: none;
}
.contentpanel .dm-seg .change-style-list:first-child {
border-radius: var(--dm-pill) 0 0 var(--dm-pill);
border-right-width: 0;
}
.contentpanel .dm-seg .change-style-list:last-child {
border-radius: 0 var(--dm-pill) var(--dm-pill) 0;
}
.contentpanel .dm-seg .change-style-list.active,
.contentpanel .dm-seg .change-style-list:hover {
background: var(--dm-ink);
border-color: var(--dm-ink);
color: var(--dm-card);
font-weight: 600;
}
/* --- Champ de recherche dans la liste ----------------------------- */
.contentpanel .search-in-current-container {
margin: 0 0 18px;
}
.contentpanel input.search-in-current {
height: 38px;
width: 260px;
max-width: 100%;
padding: 0 16px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-pill);
background: var(--dm-card-alt);
color: var(--dm-ink);
font-size: 13px;
}
.contentpanel input.search-in-current:focus {
border-color: var(--dm-ink);
outline: none;
}
/* --- Grille de vignettes ------------------------------------------ */
/* .list-grid / .list-grid-item / .list-grid-item-contener existent déjà :
on les convertit en grille de cartes média v2. Le float Bootstrap des
.col-md-* est neutralisé, la grille CSS pilote seule la mise en page. */
.contentpanel .list-grid {
background: transparent;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.contentpanel .list-grid > .search-in-current-container {
grid-column: 1 / -1;
}
.contentpanel .list-grid > .list-grid-item {
float: none;
width: auto;
padding: 0;
}
.contentpanel .list-grid-item-contener {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--dm-line);
border-radius: 16px;
background: var(--dm-card);
overflow: hidden;
transition: border-color .12s ease, box-shadow .12s ease;
}
.contentpanel .list-grid-item-contener:hover {
border-color: var(--dm-ink);
box-shadow: 0 12px 26px -14px rgba(27, 31, 38, 0.4);
}
/* Zone média : cadre 16/9 sur fond encre, comme la v2 */
.contentpanel .list-grid-item-contener > a > video,
.contentpanel .list-grid-item-contener > video,
.contentpanel .list-grid-item-contener > a > img,
.contentpanel .list-grid-item-contener > img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
object-fit: cover;
background: #1b2028;
border: 0;
border-radius: 0;
}
/* Libellé de la carte */
.contentpanel .list-grid-item-txt {
display: block;
padding: 12px 14px;
border-top: 1px solid var(--dm-line-soft);
background: var(--dm-card);
color: var(--dm-ink);
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.contentpanel .list-grid-item-txt span[style*="font-size:12px"],
.contentpanel .list-grid-item-txt > span {
color: var(--dm-faint);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
/* --- Cartes d'accès rapide (tableau de bord) ---------------------- */
.contentpanel .fast-add.list-grid-item-contener {
flex-direction: row;
align-items: center;
gap: 14px;
min-height: 74px;
padding: 14px 18px;
border: 1px solid var(--dm-neutral-line);
border-radius: 14px;
background: #f9f5ec;
text-align: left;
}
.contentpanel .fast-add.list-grid-item-contener:hover {
background: var(--dm-card);
border-color: var(--dm-ink);
}
.contentpanel .fast-add.list-grid-item-contener > i {
width: 42px;
height: 42px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--dm-neutral-line);
border-radius: 12px;
background: var(--dm-card);
color: var(--dm-ink);
font-size: 16px;
}
.contentpanel .fast-add.list-grid-item-contener .list-grid-item-txt {
flex: 1;
padding: 0;
border: 0;
background: transparent;
font-size: 14px;
font-weight: 600;
}
/* Accès rapides : grille 4 colonnes, cartes carrées, icône au-dessus. */
.contentpanel .dm-card--quick #icon.list-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
padding: 0;
}
.contentpanel .dm-card--quick .fast-add.list-grid-item-contener {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 16px;
min-height: 150px;
padding: 20px;
}
.contentpanel .dm-card--quick .fast-add.list-grid-item-contener > i {
width: 46px;
height: 46px;
font-size: 18px;
}
.contentpanel .dm-card--quick .fast-add .fast-add-text {
flex: none;
}
@media (max-width: 1100px) {
.contentpanel .dm-card--quick #icon.list-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.contentpanel .dm-card--quick #icon.list-grid {
grid-template-columns: 1fr;
}
}
/* --- Légende ------------------------------------------------------ */
/* Le bloc « Légende : » du tableau de bord devient l'encart de bas de
tableau de la v2 : fond sable, colonnes fluides, pastilles alignées. */
.contentpanel .panel-body > h4 + .legend-label {
margin-top: 0;
}
.contentpanel .legend-label {
display: inline;
color: var(--dm-ink);
font-size: 12px;
font-weight: 700;
}
/* --- Pied de liste ------------------------------------------------ */
.dm-listfoot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 4px;
font-size: 13px;
color: var(--dm-subtle);
}
/* Actions au pied d'une carte média (lien « Supprimer » des vues Vidéos,
Publicités, Diaporamas) : pilule discrète, comme le « ✕ » de la v2. */
.contentpanel .list-grid-item-contener .delete-item {
/* Le legacy positionnait ce lien en absolu par-dessus le titre : dans la
carte v2 il redevient une action normale, en pied de carte. */
position: static;
align-self: flex-end;
display: inline-flex;
align-items: center;
height: 30px;
margin: 0 14px 12px;
padding: 0 12px;
border: 1px solid var(--dm-bad-line);
border-radius: var(--dm-pill);
background: transparent;
color: var(--dm-bad-fg);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.contentpanel .list-grid-item-contener .delete-item:hover {
background: var(--dm-bad-bg);
border-color: var(--dm-bad-fg);
text-decoration: none;
}
/* Le libellé de la carte ne doit plus pousser les actions hors de la carte */
.contentpanel .list-grid-item-contener > .list-grid-item-txt {
flex: 1;
}
/* ==========================================================================
15. Widgets des pages internes (formulaires des utilisateurs connectés)
--------------------------------------------------------------------------
Ces deux contrôles gardaient leur habillage d'origine au milieu de champs
déjà repris : champ fichier natif et double liste multi-select.
========================================================================== */
/* --- Champ fichier ------------------------------------------------ */
.contentpanel input[type="file"].form-control,
.mainpanel input[type="file"].form-control {
display: flex;
align-items: center;
padding: 0 8px 0 8px;
font-size: 13px;
color: var(--dm-muted);
cursor: pointer;
}
.contentpanel input[type="file"]::file-selector-button,
.mainpanel input[type="file"]::file-selector-button {
height: 30px;
margin-right: 12px;
padding: 0 14px;
border: 1px solid var(--dm-line-strong);
border-radius: var(--dm-pill);
background: var(--dm-card-alt);
color: var(--dm-ink);
font-family: var(--dm-font);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.contentpanel input[type="file"]:hover::file-selector-button,
.mainpanel input[type="file"]:hover::file-selector-button {
border-color: var(--dm-ink);
}
/* --- Double liste multi-select ------------------------------------ */
.contentpanel .ms-container,
.mainpanel .ms-container {
background: transparent;
width: 100%;
}
.contentpanel .ms-container .ms-selectable,
.contentpanel .ms-container .ms-selection,
.mainpanel .ms-container .ms-selectable,
.mainpanel .ms-container .ms-selection {
background: var(--dm-card);
color: var(--dm-ink);
}
.contentpanel .ms-container .ms-list,
.mainpanel .ms-container .ms-list {
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-r-md);
background: var(--dm-card);
box-shadow: none;
}
.contentpanel .ms-container .ms-list.ms-focus,
.mainpanel .ms-container .ms-list.ms-focus {
border-color: var(--dm-ink);
box-shadow: none;
}
.contentpanel .ms-container .ms-list li.ms-elem-selectable,
.contentpanel .ms-container .ms-list li.ms-elem-selection,
.mainpanel .ms-container .ms-list li.ms-elem-selectable,
.mainpanel .ms-container .ms-list li.ms-elem-selection {
padding: 9px 14px;
border: 0;
border-bottom: 1px solid var(--dm-line-softer);
color: var(--dm-ink);
font-size: 13px;
}
.contentpanel .ms-container .ms-list li:last-child,
.mainpanel .ms-container .ms-list li:last-child {
border-bottom: 0;
}
.contentpanel .ms-container .ms-list li.ms-hover,
.mainpanel .ms-container .ms-list li.ms-hover {
background: var(--dm-card-alt);
color: var(--dm-ink);
}
.contentpanel .ms-container .ms-optgroup-label,
.mainpanel .ms-container .ms-optgroup-label {
padding: 10px 14px 6px;
color: var(--dm-subtle);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* L'intitulé de chaque colonne et son champ de recherche */
.contentpanel .ms-container .ms-selectable > .custom-header,
.contentpanel .ms-container .ms-selection > .custom-header,
.mainpanel .ms-container .ms-selectable > .custom-header,
.mainpanel .ms-container .ms-selection > .custom-header {
margin-bottom: 8px;
color: var(--dm-subtle);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.contentpanel .ms-container input[type="text"],
.mainpanel .ms-container input[type="text"] {
height: 36px;
width: 100%;
margin-bottom: 8px;
padding: 0 14px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-pill);
background: var(--dm-card-alt);
color: var(--dm-ink);
font-size: 13px;
}
.contentpanel .ms-container input[type="text"]:focus,
.mainpanel .ms-container input[type="text"]:focus {
border-color: var(--dm-ink);
outline: none;
}
/* ==========================================================================
16. Tableaux d'écrans et de programmations — hiérarchie des actions
--------------------------------------------------------------------------
Maquette dmovie/ecrans : les actions tiennent sur une ligne, en pilules de
34px ; seule « Publier » est pleine, « Éditer » est en contour encre, le
reste en contour sable, la suppression en rouge. Les templates empilent
les boutons avec des
: on les neutralise ici plutôt que de
réécrire les vues.
========================================================================== */
.contentpanel .table td .btn + br,
.contentpanel .table td button + br,
.contentpanel .table td .btn + br + br {
display: none;
}
.contentpanel .table td .btn,
.contentpanel .table td button.btn {
height: 34px;
margin: 3px 0 3px 4px;
padding: 0 11px;
border: 1px solid var(--dm-line-strong);
background: transparent;
color: var(--dm-ink);
font-size: 12.5px;
font-weight: 500;
vertical-align: middle;
}
.contentpanel .table td .btn:hover,
.contentpanel .table td button.btn:hover {
background: var(--dm-card-alt);
border-color: var(--dm-ink);
color: var(--dm-ink);
}
/* Éditer : contour encre, semi-gras */
.contentpanel .table td a.btn[href*="/editer/"] {
border-color: var(--dm-ink);
font-weight: 600;
}
/* Publier : la seule action pleine de la ligne */
.contentpanel .table td a.btn.publier-screen,
.contentpanel .table td a.btn[href*="/publier"] {
background: var(--dm-accent);
border-color: var(--dm-accent);
color: var(--dm-card);
font-weight: 600;
}
.contentpanel .table td a.btn.publier-screen:hover,
.contentpanel .table td a.btn[href*="/publier"]:hover {
background: var(--dm-accent-dark);
border-color: var(--dm-accent-dark);
color: var(--dm-card);
}
/* Supprimer : rouge sourd, déjà défini en section 7, on ne garde que la taille */
.contentpanel .table td .btn.delete-entity {
border-color: var(--dm-bad-line);
color: var(--dm-bad-fg);
}
.contentpanel .table td .btn.delete-entity:hover {
background: var(--dm-bad-bg);
border-color: var(--dm-bad-fg);
}
/* La colonne d'actions garde ses boutons sur une ligne, à droite */
.contentpanel .table > tbody > tr > td:last-child {
white-space: nowrap;
text-align: right;
}
/* Colonne « Logs » : deux petites pilules côte à côte */
.contentpanel .table td button.logs-click,
.contentpanel .table td button.logs-get {
margin-left: 0;
margin-right: 6px;
}
/* « Rafraîchir » en tête de tableau : contour encre, comme « ↻ Rafraîchir » en v2 */
.contentpanel .panel-heading a#actualiser.btn,
.contentpanel .panel-body a#actualiser.btn {
background: transparent;
border-color: var(--dm-ink);
color: var(--dm-ink);
}
.contentpanel a#actualiser.btn:hover {
background: var(--dm-card-alt);
}
/* Mini-légende « Date/heure · Version · Etat » : une ligne par état, alignée */
.contentpanel .table td .synchro,
.contentpanel .table td .not-synchro {
margin-left: 6px;
}
/* --- Tri DataTables : réserver la place de l'icône ------------------- */
.contentpanel table.dataTable thead .sorting,
.contentpanel table.dataTable thead .sorting_asc,
.contentpanel table.dataTable thead .sorting_desc {
padding-right: 30px;
}
.contentpanel table.dataTable thead .sorting:after,
.contentpanel table.dataTable thead .sorting_asc:after,
.contentpanel table.dataTable thead .sorting_desc:after {
top: 50%;
right: 12px;
margin-top: -7px;
font-size: 11px;
color: var(--dm-subtle);
}
.contentpanel .dataTables_wrapper .dataTables_length,
.contentpanel .dataTables_wrapper .dataTables_filter,
.contentpanel .dataTables_wrapper .dataTables_info,
.contentpanel .dataTables_wrapper .dataTables_paginate {
padding: 12px 20px;
}
.contentpanel .dataTables_wrapper .dataTables_length select {
height: 36px;
padding: 0 30px 0 12px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-pill);
background: var(--dm-card);
}
.contentpanel .dataTables_wrapper .dataTables_filter input {
margin-left: 8px;
}
/* --- Cartes d'accès rapide : ligne d'aide sous le libellé ------------ */
.contentpanel .fast-add .fast-add-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.contentpanel .fast-add .fast-add-hint {
font-size: 12px;
font-weight: 400;
color: var(--dm-subtle);
}
/* --- Bouton « Créer … » posé dans la grille de vignettes ------------ */
/* Le template le glisse comme enfant direct de .list-grid : il devient une
ligne de pied de grille, à gauche, au lieu d'occuper une case de carte. */
.contentpanel .list-grid > .btn,
.contentpanel .list-grid > .btn-more-pub {
grid-column: 1 / -1;
justify-self: start;
align-self: center;
}
.contentpanel .list-grid > .btn-more-pub {
justify-self: center;
height: 40px;
display: inline-flex;
align-items: center;
padding: 0 18px;
border: 1px solid var(--dm-ink);
border-radius: var(--dm-pill);
background: transparent;
color: var(--dm-ink);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
/* Tableaux d'écrans : le nom de l'écran peut passer sur deux lignes, comme
en maquette ; c'est la colonne d'actions qui reste sur une ligne (voir 17.6). */
/* ==========================================================================
17. Reprise de la maquette « D-Movie Admin » (helps/D-MovieAdmin.html)
--------------------------------------------------------------------------
Coque (barre supérieure, rail, pied de rail, mode réduit), en-tête de page
hors carte, tableau d'écrans partagé (views/Ecran/_table_ecrans.tpl),
programmations, utilisateurs, calendrier. Les valeurs en dur sont celles
de la maquette (#d8b25a, #2a2418, #2f7a52, #b0740f, #b3372b…).
========================================================================== */
/* --- 17.1 Barre supérieure : logo + fil d'Ariane ---------------------- */
body:not(.publicitescontent) .headerpanel .logopanel {
padding-left: 32px;
}
.topbar-brand {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--dm-ink);
text-decoration: none;
}
.topbar-brand:hover,
.topbar-brand:focus {
color: var(--dm-ink);
text-decoration: none;
}
.topbar-logo {
width: 30px;
height: 30px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--dm-line);
border-radius: 10px;
background: #f7f3ea;
overflow: hidden;
}
body:not(.publicitescontent) .headerpanel .logopanel .topbar-logo img.logo-videonet {
width: 100%;
height: 100%;
max-height: none;
display: block;
object-fit: cover;
}
.topbar-crumb {
display: inline-flex;
align-items: baseline;
gap: 10px;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
}
.topbar-crumb__sep {
color: var(--dm-faint);
font-weight: 400;
}
.topbar-crumb__page {
font-size: 11.5px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dm-muted);
}
/* « Se reconnecter à l'admin » vit désormais dans le pied de rail */
body:not(.publicitescontent) .headerbar .returnlogin {
display: none;
}
.headerbar .btn-group > .btn:only-child {
border-radius: var(--dm-pill);
border-right-color: var(--dm-line);
}
/* --- 17.2 Rail : navigation à plat, sans icônes (maquette) ------------ */
html:not(.dm-compact) .leftpanel .nav-quirk > li > a > i,
html:not(.dm-compact) .leftpanel .nav-quirk .children > li > a > i {
display: none;
}
/* --- 17.3 Pied de rail : session déléguée, identité, bouton Réduire --- */
body:not(.publicitescontent) .leftpanel .railfoot {
flex: none;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 14px 16px;
border-top: 1px solid var(--dm-rail-edge);
}
.railfoot-delegated {
display: flex;
align-items: center;
gap: 11px;
min-height: 48px;
padding: 8px 10px;
background: #2a2418;
border: 1px solid #4a3d21;
border-radius: 12px;
color: var(--dm-rail-ink);
text-decoration: none;
}
.railfoot-delegated:hover,
.railfoot-delegated:focus {
border-color: #d8b25a;
color: var(--dm-rail-ink);
text-decoration: none;
}
.railfoot-delegated__icon {
width: 30px;
height: 30px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #d8b25a;
color: #1b1f26;
font-size: 13px;
}
.railfoot-delegated__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.railfoot-delegated__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #d8b25a;
}
.railfoot-delegated__cta {
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.railfoot-user {
display: flex;
align-items: center;
gap: 10px;
padding: 0 4px;
}
.railfoot-avatar {
width: 34px;
height: 34px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f7f4ee;
color: #1b1f26;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.railfoot-user__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.railfoot-user__name {
font-size: 13.5px;
font-weight: 600;
color: var(--dm-rail-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.railfoot-user__role {
font-size: 11px;
color: var(--dm-rail-text);
}
.railfoot-collapse {
width: 100%;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--dm-rail-active);
border-radius: var(--dm-pill);
background: transparent;
color: var(--dm-rail-text);
font-family: var(--dm-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
.railfoot-collapse:hover,
.railfoot-collapse:focus {
border-color: var(--dm-rail-text);
color: var(--dm-rail-ink);
outline: none;
}
.railfoot-collapse__icon {
display: none;
font-size: 18px;
line-height: 1;
}
/* --- 17.4 Mode réduit (bouton « Réduire », mémorisé en localStorage) --- */
html.dm-compact {
--dm-rail-w: 84px;
}
html.dm-compact body:not(.publicitescontent) .leftpanel .railbrand-slot {
padding: 16px 12px 10px;
}
html.dm-compact body:not(.publicitescontent) .leftpanel .railbrand {
justify-content: center;
padding: 9px;
gap: 0;
}
html.dm-compact .leftpanel .railbrand-text {
display: none;
}
html.dm-compact .leftpanel .tab-pane#mainmenu:before {
content: "";
padding: 4px 0;
}
html.dm-compact .leftpanel .nav-quirk > li > a {
justify-content: center;
gap: 0;
padding: 0;
}
html.dm-compact .leftpanel .nav-quirk > li > a > span,
html.dm-compact .leftpanel .nav-quirk > li.nav-parent > a:after,
html.dm-compact .leftpanel .nav-quirk .children {
display: none;
}
html.dm-compact .leftpanel .nav-quirk > li > a > i {
display: block;
width: auto;
font-size: 16px;
opacity: 0.85;
}
html.dm-compact .leftpanel .nav-quirk > li > a:before {
left: 2px;
}
html.dm-compact body:not(.publicitescontent) .leftpanel .railfoot {
align-items: center;
padding: 12px 10px 14px;
}
html.dm-compact .railfoot-delegated {
width: 100%;
min-height: 44px;
justify-content: center;
padding: 6px;
gap: 0;
}
html.dm-compact .railfoot-user {
padding: 0;
}
html.dm-compact .railfoot-delegated__text,
html.dm-compact .railfoot-user__text,
html.dm-compact .railfoot-collapse__label {
display: none;
}
html.dm-compact .railfoot-collapse {
width: 40px;
padding: 0;
}
html.dm-compact .railfoot-collapse__icon {
display: block;
}
/* --- 17.5 En-tête de page hors carte ---------------------------------- */
/* En maquette le titre, son sous-titre et ses actions sont posés sur le
papier, au-dessus de la carte. Dans D-movie c'est le premier .panel de la
colonne qui porte ce titre : il devient transparent, son .panel-heading
joue l'en-tête de page et ses autres enfants directs forment la carte. */
.contentpanel .row > [class*="col-"] > .panel:first-child {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading {
position: relative;
padding: 0 0 22px;
border-bottom: 0;
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading .panel-title {
font-size: 40px;
line-height: 1.02;
letter-spacing: -0.015em;
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading > p {
max-width: 640px;
padding-right: 0;
}
/* Surtitre de section, comme en maquette (« Contenus », « Diffusion »…) */
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before {
display: block;
margin-bottom: 8px;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dm-subtle);
}
body[data-menu="videos"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="publicites"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="motions"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="slideshow"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="rdvs"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="categoriemedia"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="categories"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before {
content: "Contenus";
}
body[data-menu="programmations"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="programmations2"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="enchainements"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before {
content: "Diffusion";
}
body[data-menu="ecrans"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="ecransbyaccount"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="ecransbycat"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="checkbornes"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="check"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="devices"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before {
content: "Affichage dynamique";
}
body[data-menu="users"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="groups"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before,
body[data-menu="roles"] .contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading:before {
content: "Accès";
}
/* Actions de l'en-tête : à droite, à hauteur du titre */
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading .btn-container-top,
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading .cartouche-right {
position: absolute;
top: 22px;
right: 0;
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading .cartouche-right .btn-r {
margin: 0;
padding: 0 18px;
float: none;
}
/* Les autres enfants directs du panel forment la carte, d'un seul tenant.
`clear: both` : un enfant flottant (legacy .full-width, .pull-left…) ne doit
pas laisser le bloc suivant remonter derrière les coins arrondis. */
.contentpanel .row > [class*="col-"] > .panel:first-child > :not(.panel-heading) {
clear: both;
background: var(--dm-card);
border-left: 1px solid var(--dm-line);
border-right: 1px solid var(--dm-line);
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading + :not(.panel-heading),
.contentpanel .row > [class*="col-"] > .panel:first-child > :first-child:not(.panel-heading) {
border-top: 1px solid var(--dm-line);
border-top-left-radius: var(--dm-r-card);
border-top-right-radius: var(--dm-r-card);
}
.contentpanel .row > [class*="col-"] > .panel:first-child > :last-child:not(.panel-heading) {
border-bottom: 1px solid var(--dm-line);
border-bottom-left-radius: var(--dm-r-card);
border-bottom-right-radius: var(--dm-r-card);
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-body.nopaddingtop {
/* !important : common.css pose `.nopaddingtop { padding-top: 0 !important }`,
ce qui laissait la marge négative du .table-responsive ci-dessous faire
déborder la barre de filtres DataTables au-dessus du cadre de la carte. */
padding-top: 24px !important;
}
/* Un tableau en tête de carte reste à fleur du bord supérieur */
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-body.nopaddingtop > .table-responsive:first-child {
margin-top: -24px;
border-top-left-radius: var(--dm-r-card);
border-top-right-radius: var(--dm-r-card);
}
/* Grilles de vignettes (vidéos, publicités, diaporamas…) : en maquette la
grille est posée sur le papier, sans carte autour. */
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-body:has(> .list-grid) {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
/* --- 17.6 Tableau d'écrans partagé (_table_ecrans.tpl) ---------------- */
.contentpanel .table-ecrans .dm-screens > thead > tr > th {
white-space: nowrap;
}
.contentpanel .table-ecrans .dm-screens > tbody > tr > td {
padding: 14px 16px;
vertical-align: middle;
}
.contentpanel .table-ecrans .dm-screens > tbody > tr > td:first-child {
padding-left: 20px;
white-space: normal;
min-width: 180px;
}
/* La colonne d'actions tient sur une ligne tant que la carte le permet ; en
dessous, les pilules se replient en deux rangées plutôt que de déborder. */
.contentpanel .table-ecrans .dm-screens > tbody > tr > td:last-child,
.contentpanel .table-ecrans .dm-screens > thead > tr > th:last-child {
padding-right: 20px;
white-space: normal;
text-align: right;
}
.dm-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px;
/* Largeur de la ligne complète (Logs ↻ Visualiser Éditer Publier ×) : le
layout automatique la respecte et fait plier les colonnes de texte. */
min-width: 390px;
}
.contentpanel .table-ecrans .dm-actions .btn,
.contentpanel .table-ecrans .dm-actions button.btn {
width: auto;
min-width: 0;
margin: 0;
padding: 0 10px;
font-size: 12px;
}
.contentpanel .table td .btn.dm-btn-icon,
.contentpanel .table td button.btn.dm-btn-icon {
width: 34px;
min-width: 34px;
padding: 0;
justify-content: center;
font-size: 15px;
line-height: 1;
}
.contentpanel .table td .btn.dm-btn-icon--danger {
border-color: var(--dm-bad-line);
color: var(--dm-bad-fg);
}
.contentpanel .table td .btn.dm-btn-icon--danger:hover {
background: var(--dm-bad-bg);
border-color: var(--dm-bad-fg);
}
.dm-actions-note {
display: block;
margin-top: 5px;
font-size: 11px;
color: var(--dm-warn-fg);
}
.dm-screen-cell {
line-height: 1.35;
}
.dm-screen-id {
display: inline-block;
margin-right: 6px;
font-size: 11.5px;
color: var(--dm-faint);
font-variant-numeric: tabular-nums;
}
.dm-screen-name {
font-weight: 600;
color: var(--dm-ink);
}
.dm-screen-meta {
display: block;
margin-top: 3px;
font-size: 11.5px;
color: var(--dm-subtle);
}
.dm-screen-meta > span + span:before {
content: " · ";
}
.dm-screen-vn {
font-weight: 600;
color: var(--dm-muted);
}
.dm-sync-meta {
display: block;
margin-top: 6px;
font-size: 11px;
line-height: 1.45;
color: var(--dm-subtle);
font-variant-numeric: tabular-nums;
}
.dm-sync-meta > span {
display: block;
white-space: nowrap;
}
.dm-prog {
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: var(--dm-ink);
}
.dm-prog + .dm-prog {
margin-top: 4px;
}
.dm-empty {
color: var(--dm-faint);
}
.dm-marks-cell {
white-space: nowrap;
}
.dm-mark {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 12px;
font-size: 12px;
line-height: 1.8;
color: var(--dm-muted);
}
/* Comme en maquette : « Date/heure » seul sur sa ligne, « Version · État » dessous */
.dm-mark:first-child {
display: flex;
}
.dm-dot {
display: inline-block;
width: 9px;
height: 9px;
flex: none;
border-radius: 50%;
background: var(--dm-faint);
}
.dm-dot--ok { background: #2f7a52; }
.dm-dot--warn { background: #b0740f; }
.dm-dot--bad { background: #b3372b; }
.dm-syncing {
width: 12px;
height: 12px;
flex: none;
}
/* Légende en pied de tableau : bandeau sable, colonnes fluides */
.dm-legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 8px 24px;
padding: 14px 20px;
background: var(--dm-card-alt);
border-top: 1px solid var(--dm-line-soft);
font-size: 12px;
line-height: 1.45;
color: var(--dm-muted);
}
.panel-body.nopaddingtop > .dm-legend {
margin: 0 -24px -24px;
}
.dm-legend__item {
display: flex;
align-items: flex-start;
gap: 8px;
}
.dm-legend__item .dm-dot {
margin-top: 4px;
}
.dm-legend__item strong {
color: var(--dm-ink);
font-weight: 600;
}
/* --- 17.7 Tableau de bord : en-tête, accès rapides, calendrier --------- */
.dm-pagehead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.dm-pagehead__text {
min-width: 0;
}
.dm-pagehead__title {
margin: 0;
font-size: 40px;
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--dm-ink);
}
.dm-pagehead__sub {
margin: 10px 0 0;
max-width: 640px;
font-size: 14.5px;
color: var(--dm-muted);
}
.dm-pagehead__actions {
display: flex;
align-items: center;
gap: 10px;
flex: none;
padding-bottom: 6px;
}
.contentpanel .dm-card--quick > .panel-heading {
padding: 18px 24px 0;
border-bottom: 0;
}
.contentpanel .panel.dm-card--quick > .panel-heading .panel-title {
font-size: 10.5px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dm-subtle);
}
.contentpanel .dm-card--quick > .panel-body.nopaddingtop {
padding-top: 14px;
}
.contentpanel .dm-card--calendar > .panel-body {
padding: 20px 24px 24px;
}
.dm-calendar-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.contentpanel select#screens {
height: 40px;
min-width: 220px;
max-width: 100%;
padding: 0 34px 0 14px;
border: 1px solid var(--dm-line-strong);
border-radius: var(--dm-pill);
background: var(--dm-card);
color: var(--dm-ink);
font-family: var(--dm-font);
font-size: 13.5px;
font-weight: 600;
}
/* Calendrier (FullCalendar 3) : barre d'outils en pilules, en-têtes sable,
créneaux dans la teinte applicative, comme la vue semaine de la maquette */
.contentpanel .fc-toolbar {
margin-bottom: 16px;
}
.contentpanel .fc-toolbar h2 {
margin: 0 14px 0 0;
font-size: 17px;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.01em;
color: var(--dm-ink);
}
.contentpanel .fc .fc-button {
height: 36px;
margin: 0 0 0 6px;
padding: 0 14px;
border: 1px solid var(--dm-line-strong);
border-radius: var(--dm-pill);
background: var(--dm-card);
color: var(--dm-ink);
font-family: var(--dm-font);
font-size: 12.5px;
font-weight: 600;
line-height: 34px;
box-shadow: none;
text-shadow: none;
}
.contentpanel .fc .fc-button:hover {
background: var(--dm-card-alt);
border-color: var(--dm-ink);
}
.contentpanel .fc .fc-button.fc-state-active,
.contentpanel .fc .fc-button.fc-state-active:hover {
background: var(--dm-accent);
border-color: var(--dm-accent);
color: #fffdf8;
}
.contentpanel .fc .fc-button.fc-state-disabled {
opacity: 0.5;
}
.contentpanel .fc .fc-button-group {
display: inline-flex;
margin-left: 6px;
border-radius: var(--dm-pill);
overflow: hidden;
}
.contentpanel .fc .fc-button-group .fc-button {
margin: 0;
border-radius: 0;
}
.contentpanel .fc .fc-button-group .fc-button + .fc-button {
margin-left: -1px;
}
.contentpanel .fc .fc-button-group .fc-button:first-child {
border-radius: var(--dm-pill) 0 0 var(--dm-pill);
}
.contentpanel .fc .fc-button-group .fc-button:last-child {
border-radius: 0 var(--dm-pill) var(--dm-pill) 0;
}
.contentpanel .fc-unthemed th,
.contentpanel .fc-unthemed td,
.contentpanel .fc-unthemed thead,
.contentpanel .fc-unthemed tbody,
.contentpanel .fc-unthemed .fc-divider,
.contentpanel .fc-unthemed .fc-row,
.contentpanel .fc-unthemed .fc-content,
.contentpanel .fc-unthemed .fc-popover,
.contentpanel .fc-unthemed .fc-list-view,
.contentpanel .fc-unthemed .fc-list-heading td {
border-color: var(--dm-line-soft);
}
.contentpanel .fc-unthemed .fc-widget-header,
.contentpanel .fc-unthemed .fc-day-header {
background: var(--dm-card-alt);
}
.contentpanel .fc-unthemed .fc-day-header {
padding: 10px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5f6672;
}
.contentpanel .fc-unthemed .fc-day-header.fc-sat,
.contentpanel .fc-unthemed .fc-day-header.fc-sun {
background: #f2ede3;
color: var(--dm-subtle);
}
.contentpanel .fc-unthemed td.fc-sat,
.contentpanel .fc-unthemed td.fc-sun {
background: #faf7f0;
}
.contentpanel .fc-unthemed .fc-today {
background: #fdf6ea;
}
.contentpanel .fc-unthemed .fc-axis {
font-size: 11px;
color: var(--dm-faint);
font-variant-numeric: tabular-nums;
}
.contentpanel .fc-unthemed .fc-event,
.contentpanel .fc-unthemed .fc-time-grid-event,
.contentpanel .fc-unthemed .fc-day-grid-event {
padding: 6px 8px;
border: 0;
border-radius: 8px;
/* Le JS pose une couleur par événement en style inline : la maquette
n'utilise que la teinte applicative. */
background: var(--dm-accent) !important;
border-color: var(--dm-accent) !important;
color: #fffdf8 !important;
font-size: 11px;
line-height: 1.3;
box-shadow: none;
}
.contentpanel .fc-unthemed .fc-day-header a,
.contentpanel .fc-unthemed .fc-day-header span {
color: #5f6672 !important;
text-decoration: none;
}
/* FullCalendar pose un voile blanc à 25 % sur chaque événement (.fc-bg) :
il délavait la teinte applicative. */
.contentpanel .fc-unthemed .fc-event .fc-bg {
display: none;
}
.contentpanel .fc-unthemed .fc-time-grid-event .fc-time {
font-weight: 700;
}
/* --- 17.8 Programmations : cellules, priorité, DataTables ------------- */
.dm-cell-title {
display: block;
font-weight: 600;
color: var(--dm-ink);
}
.dm-cell-meta {
display: block;
margin-top: 3px;
font-size: 11.5px;
color: var(--dm-subtle);
}
.dm-hours {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.dm-badge.dm-prio {
width: 28px;
height: 28px;
justify-content: center;
padding: 0;
font-variant-numeric: tabular-nums;
}
.contentpanel .dataTables_wrapper .dataTables_filter {
float: left;
padding: 16px 20px;
}
.contentpanel .dataTables_wrapper .dataTables_filter label {
margin: 0;
}
.contentpanel .dataTables_wrapper .dataTables_filter input {
height: 38px;
width: 260px;
max-width: 100%;
margin: 0;
padding: 0 16px;
border: 1px solid var(--dm-neutral-line);
border-radius: var(--dm-pill);
background: var(--dm-card-alt);
color: var(--dm-ink);
font-size: 13px;
}
.contentpanel .dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--dm-ink);
outline: none;
}
.contentpanel .dataTables_wrapper .dataTables_length {
float: right;
padding: 16px 20px;
}
.contentpanel .dataTables_wrapper .dataTables_length label {
margin: 0;
font-size: 12.5px;
color: var(--dm-muted);
}
.contentpanel .dataTables_wrapper .dataTables_length select {
height: 38px;
margin-right: 6px;
color: var(--dm-ink);
font-size: 13px;
}
.contentpanel .dataTables_wrapper .dataTables_info {
padding: 18px 20px;
}
.contentpanel .dataTables_wrapper .dataTables_paginate {
padding: 12px 20px;
}
.contentpanel .dataTables_paginate .pagination {
display: inline-flex;
gap: 6px;
margin: 0;
}
.contentpanel .dataTables_paginate .pagination > li > a {
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: var(--dm-pill) !important;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-transform: none;
letter-spacing: 0;
}
.contentpanel .dataTables_paginate .pagination > li.previous > a,
.contentpanel .dataTables_paginate .pagination > li.next > a {
font-size: 18px;
font-weight: 400;
color: var(--dm-muted) !important;
/* Le glyphe ‹ › est dessiné légèrement sous le centre de son em : on le
remonte d'un cheveu pour un centrage optique. */
padding-bottom: 2px;
}
.contentpanel .dataTables_paginate .pagination > li.active > a {
background: var(--dm-accent) !important;
border-color: var(--dm-accent) !important;
color: #fffdf8 !important;
}
.contentpanel .dataTables_paginate .pagination > li.disabled > a {
opacity: 0.45;
}
/* Barre de filtres et barre de pagination DataTables (dom bootstrap :
<'row'<'col-sm-6'l><'col-sm-6'f>> … <'row'<'col-sm-5'i><'col-sm-7'p>>).
On remplace les colonnes flottantes, qui ramenaient les deux blocs au
centre, par une ligne flex tenue dans le cadre de la carte. */
.contentpanel .dataTables_wrapper > .row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
}
/* Le clearfix Bootstrap (.row:before/:after) deviendrait un item flex et
décalerait la répartition space-between : on le retire. */
.contentpanel .dataTables_wrapper > .row:before,
.contentpanel .dataTables_wrapper > .row:after {
content: none;
}
.contentpanel .dataTables_wrapper > .row:first-child {
border-bottom: 1px solid var(--dm-line-soft);
}
.contentpanel .dataTables_wrapper > .row:last-child {
border-top: 1px solid var(--dm-line-soft);
}
.contentpanel .dataTables_wrapper > .row > [class*="col-"] {
float: none;
width: auto;
flex: 0 1 auto;
padding: 0;
}
/* La colonne du tableau lui-même reste pleine largeur */
.contentpanel .dataTables_wrapper > .row > .col-sm-12 {
flex: 1 1 100%;
width: 100%;
}
/* Pas de bande vide entre la dernière ligne et la barre de pagination */
.contentpanel .dataTables_wrapper table.dataTable {
margin: 0 !important;
}
/* Recherche à gauche, « par page » à droite */
.contentpanel .dataTables_wrapper > .row:first-child > .col-sm-6:first-child {
order: 2;
}
.contentpanel .dataTables_wrapper .dataTables_filter,
.contentpanel .dataTables_wrapper .dataTables_length {
float: none;
}
.contentpanel .dataTables_wrapper > .row:first-child > .col-sm-6:only-child {
flex: 1 1 100%;
}
/* --- Enchaînement : aperçu dans le formulaire de programmation --------- */
/* Cartes compactes posées en ligne (on en voit davantage côte à côte) et une
flèche entre deux contenus pour lire le sens de diffusion. */
.contentpanel .list-grid.list-grid-preview {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 14px 34px;
float: none;
max-width: none;
min-height: 0;
margin: 0;
padding: 4px 15px 0;
}
.contentpanel .list-grid.list-grid-preview > .list-grid-item {
position: relative;
flex: 0 0 150px;
width: 150px;
padding: 0;
}
.contentpanel .list-grid.list-grid-preview > .list-grid-item:not(:last-child)::after {
content: "\f061"; /* fa-arrow-right */
font-family: FontAwesome;
position: absolute;
top: 50%;
right: -27px;
width: 20px;
margin-top: -10px;
font-size: 13px;
line-height: 20px;
text-align: center;
color: var(--dm-subtle);
pointer-events: none;
}
.contentpanel .list-grid.list-grid-preview .list-grid-item-contener {
padding: 0;
border-radius: 12px;
font-size: 12px;
}
.contentpanel .list-grid.list-grid-preview .list-grid-item-txt {
padding: 8px 10px 4px;
font-size: 12px;
line-height: 1.3;
border-top: 0;
}
.contentpanel .list-grid.list-grid-preview .list-grid-item-txt + br {
display: none;
}
.contentpanel .list-grid.list-grid-preview .inputs-info {
padding: 0 10px 8px;
font-size: 11.5px;
color: var(--dm-muted);
}
.contentpanel .list-grid.list-grid-preview [class*="cartouche-"] {
padding: 1px 7px;
border-radius: 11px 0 8px 0;
font-size: 11px;
line-height: 16px;
}
/* Icônes de dates : common.css les posait en absolu en bas à gauche de la
carte, sous le titre dès que celui-ci tenait sur deux lignes. On les remet
dans le flux, sur leur propre ligne sous la durée (fil de lecture et récap). */
.contentpanel .list-grid.list-grid-preview .dates-in-videos,
#sortable1 .dates-in-videos {
position: static;
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 12px;
}
/* (le conteneur ne contient que des blancs quand il n'y a pas de date :
la marge est portée par les icônes pour ne rien réserver dans ce cas) */
.contentpanel .list-grid.list-grid-preview .dates-in-videos .display-days,
#sortable1 .dates-in-videos .display-days {
margin-bottom: 10px;
}
.contentpanel .list-grid.list-grid-preview .dates-in-videos .display-days > img,
#sortable1 .dates-in-videos .display-days > img {
width: 18px;
height: auto;
border-radius: 0;
vertical-align: middle;
}
/* --- Éditeur d'enchaînement (glisser-déposer, .programmation-popbox) --- */
/* Fil de lecture : common.css dessinait les cases grises avec une image de
fond de 280px (background-medias.jpg) ; les cartes du thème n'y rentraient
plus. Les cases sont désormais dessinées en CSS autour de chaque vignette,
flèche comprise, et suivent la hauteur réelle des cartes. */
#sortable1.list-grid {
display: flex;
align-items: stretch;
min-height: 0;
margin-top: 56px; /* sous le bouton « Fermer » (.valid-enchainement, absolu) */
padding: 0 16px 16px;
background: transparent;
float: none;
}
#sortable1 > .list-grid-item {
position: relative;
flex: 0 0 auto;
float: none;
width: 225px;
margin-right: 60px;
padding: 10px;
border-radius: 14px;
background: #e7e3da;
}
/* Emplacement suivant : case en pointillés dessinée en fin de fil (pseudo-
élément, donc ignorée par jQuery UI sortable). Visible dès que
l'enchaînement est vide, et après le dernier contenu sinon. Le JS
(updateOrder) réserve déjà 280px de plus que la somme des cartes. */
#sortable1.list-grid::after {
content: "Glissez-déposez ici le contenu suivant";
flex: 0 0 auto;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
width: 225px;
min-height: 190px;
padding: 16px;
border: 2px dashed var(--dm-line-strong);
border-radius: 14px;
color: var(--dm-subtle);
font-size: 12.5px;
font-weight: 500;
line-height: 1.4;
text-align: center;
pointer-events: none;
}
/* La flèche relie chaque carte à la suivante, y compris à la case en pointillés */
#sortable1 > .list-grid-item:not(.ui-sortable-helper)::after {
content: "\f061"; /* fa-arrow-right */
font-family: FontAwesome;
position: absolute;
top: 50%;
right: -40px;
width: 20px;
margin-top: -10px;
font-size: 16px;
line-height: 20px;
text-align: center;
color: var(--dm-subtle);
pointer-events: none;
}
#sortable1 > .ui-sortable-placeholder {
visibility: visible !important;
width: 225px;
margin-right: 60px;
border: 2px dashed var(--dm-line-strong);
background: transparent;
}
#sortable1 .list-grid-item-contener {
position: relative;
padding: 0;
}
#sortable1 .delete {
z-index: 2;
border-radius: 0 12px 0 8px;
background: var(--dm-ink);
cursor: pointer;
}
/* Barre de filtres : la recherche prend place à droite de la première barre */
.contentpanel .filtre-container {
position: relative;
float: none;
padding: 0 16px 14px;
border: 0;
background: var(--dm-card);
}
.contentpanel .filtre-container .categorie-list:first-of-type {
padding-right: 300px;
}
.contentpanel .filtre-container .categorie-list > li:not(.filter-categorie):not(.categorie-item):not(.categorie-item-all) {
color: var(--dm-muted);
font-size: 13px;
}
.contentpanel .filtre-container .search-in-current-container {
position: absolute;
top: 30px;
right: 32px;
margin: 0;
}
.contentpanel .filtre-container input.search-in-current {
position: static;
height: 36px;
width: 260px;
}
/* Contenus disponibles : grille de cartes à taille fixe (les .col-md-2 flottants
se réduisaient à quelques pixels, et une vignette absente écrasait la carte).
Limité aux formulaires (le #icon qui enveloppe #sortable2) : les listes de
vignettes /videos, /publicites, /motions… utilisent le même id et doivent
garder leur grille. */
.contentpanel #icon.list-grid:has(> #sortable2) {
display: block;
padding: 16px;
background: transparent;
}
.contentpanel #sortable2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
min-height: 120px;
}
.contentpanel #sortable2 > .list-grid-item {
float: none;
width: auto;
min-width: 0;
padding: 0;
}
.contentpanel #sortable2 .list-grid-item-contener {
position: relative;
padding: 0;
}
.contentpanel #sortable2 .list-grid-item-contener > img,
.contentpanel #sortable2 .list-grid-item-contener > video,
#sortable1 .list-grid-item-contener > img,
#sortable1 .list-grid-item-contener > video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
min-height: 0;
object-fit: cover;
background: #1b2028;
}
/* Une vignette sans fichier (preview manquante) garde la même surface */
.contentpanel #sortable2 .list-grid-item-contener > img,
#sortable1 .list-grid-item-contener > img {
color: transparent;
overflow: hidden;
}
.contentpanel #sortable2 .list-grid-item-txt,
#sortable1 .list-grid-item-txt {
padding: 10px 12px 6px;
font-size: 12.5px;
line-height: 1.3;
}
.contentpanel #sortable2 .list-grid-item-txt + br,
#sortable1 .list-grid-item-txt + br {
display: none;
}
#sortable1 .inputs-info {
padding: 0 12px 10px;
font-size: 12px;
color: var(--dm-muted);
}
#sortable1 .inputs-info input.duration {
width: 52px;
height: 28px;
margin: 0 2px;
padding: 0 6px;
border: 1px solid var(--dm-neutral-line);
border-radius: 8px;
text-align: center;
}
/* --- 17.9 Utilisateurs : rôles en étiquettes, accès rapide ------------ */
.dm-tag {
display: inline-block;
margin: 2px 4px 2px 0;
padding: 3px 8px;
border: 1px solid var(--dm-neutral-line);
border-radius: 6px;
background: var(--dm-neutral-bg);
color: var(--dm-muted);
font-family: var(--dm-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
white-space: nowrap;
}
.contentpanel .search-container.full-width > .dm-eyebrow {
display: block;
width: 100%;
margin: 0 0 4px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--dm-subtle);
}
/* --- 17.10 Compléments ------------------------------------------------- */
/* Titres des cartes internes (le titre de page, lui, reste à 40px) */
.contentpanel .panel > .panel-heading .panel-title,
.mainpanel .panel > .panel-heading .panel-title {
font-size: 22px;
}
.contentpanel .row > [class*="col-"] > .panel:first-child > .panel-heading .panel-title {
font-size: 40px;
}
/* « Afficher plus » : pilule centrée, pas une barre pleine largeur en capitales */
.contentpanel .list-grid > .btn-more-pub {
width: auto;
margin: 4px auto 0;
text-transform: none;
letter-spacing: 0;
}
/* Surtitre de la grille d'accès rapide (page Utilisateurs, grille CSS) */
.contentpanel .search-container.full-width > .dm-eyebrow {
grid-column: 1 / -1;
}
/* Cellule « titre + méta » : ne pas laisser DataTables l'écraser */
.contentpanel .table td:has(> .dm-cell-title) {
min-width: 170px;
}
/* ==========================================================================
Programmations v2 (/programmations2) — tableau + sélecteur d'écrans
--------------------------------------------------------------------------
Le template garde les ancres JS historiques (#icon.list-grid, .list-grid-item,
.programmation-item, .assoc-prog-screen…) mais le rendu s'aligne sur le
tableau des écrans : lignes zébrées, pilules d'actions, encart sable pour
l'affectation des écrans. Les règles legacy de common.css sur
#page-programmations sont neutralisées ici.
========================================================================== */
.contentpanel #page-programmations #icon.list-grid.dm-proglist {
display: block;
padding: 0;
background: transparent;
}
.contentpanel #page-programmations .dm-proglist__bar {
display: flex;
justify-content: flex-end;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--dm-line-soft);
}
.contentpanel #page-programmations .dm-proglist__bar .search-in-current-container {
margin: 0;
}
/* Le zébrage legacy (#F4F4F4) ciblait .list-grid-item : on rend la main au tableau */
.contentpanel #page-programmations .table > tbody > tr.list-grid-item {
padding: 0;
background: transparent;
}
.contentpanel #page-programmations .table-striped > tbody > tr.list-grid-item:nth-of-type(odd) {
background: var(--dm-row-alt);
}
.contentpanel #page-programmations .table > tbody > tr.list-grid-item:hover {
background: var(--dm-card-alt);
}
/* « Choisir les écrans » : la seule action pleine de la ligne */
.contentpanel #page-programmations .table td .btn.select-ecrans-to-prog {
background: var(--dm-accent);
border-color: var(--dm-accent);
color: var(--dm-card);
font-weight: 600;
}
.contentpanel #page-programmations .table td .btn.select-ecrans-to-prog:hover {
background: var(--dm-accent-dark);
border-color: var(--dm-accent-dark);
color: var(--dm-card);
}
.contentpanel #page-programmations .table td .btn.select-ecrans-to-prog > i {
margin-right: 4px;
font-size: 12px;
}
/* --- Sélecteur d'écrans ------------------------------------------- */
.contentpanel #page-programmations .dm-screenpick.assoc-prog-screen {
margin: 0;
padding: 20px;
border-top: 1px solid var(--dm-line-soft);
border-radius: 0;
background: var(--dm-card-alt);
}
.contentpanel #page-programmations .dm-screenpick__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.contentpanel #page-programmations .dm-screenpick__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.contentpanel #page-programmations .dm-screenpick__title {
font-size: 15px;
font-weight: 600;
color: var(--dm-ink);
}
.contentpanel #page-programmations .dm-screenpick__hint {
font-size: 12.5px;
color: var(--dm-muted);
}
.contentpanel #page-programmations .dm-screenpick__actions {
display: flex;
align-items: center;
gap: 8px;
flex: none;
}
.contentpanel #page-programmations .dm-screenpick__actions .btn {
margin: 0;
}
.contentpanel #page-programmations .dm-screenpick__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 900px) {
.contentpanel #page-programmations .dm-screenpick__cols {
grid-template-columns: 1fr;
}
}
.contentpanel #page-programmations .dm-screenpick h4.screen-sortable-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
padding: 12px 16px;
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-md) var(--dm-r-md) 0 0;
background: var(--dm-card);
color: var(--dm-subtle);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.contentpanel #page-programmations .dm-screenpick h4.screen-sortable-title button {
margin: 0;
height: 28px;
padding: 0 12px;
border: 1px solid var(--dm-line-strong);
border-radius: var(--dm-pill);
background: transparent;
color: var(--dm-ink);
font-family: var(--dm-font);
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.contentpanel #page-programmations .dm-screenpick h4.screen-sortable-title button:hover {
border-color: var(--dm-ink);
background: var(--dm-card-alt);
}
.contentpanel #page-programmations .dm-screenpick .available-screen,
.contentpanel #page-programmations .dm-screenpick .selected-screen {
margin: 0;
padding: 10px;
min-height: 180px;
max-height: 440px;
overflow-y: auto;
border: 1px solid var(--dm-line);
border-top: 0;
border-radius: 0 0 var(--dm-r-md) var(--dm-r-md);
background: var(--dm-card);
}
.contentpanel #page-programmations .dm-screenpick .toogle-group {
margin: 0 0 8px;
padding: 8px 10px 4px;
border: 1px solid var(--dm-line-soft);
border-radius: var(--dm-r-sm);
background: var(--dm-card-alt);
}
.contentpanel #page-programmations .dm-screenpick .toogle-group:last-child {
margin-bottom: 0;
}
.contentpanel #page-programmations .dm-screenpick .group-name {
display: block;
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dm-subtle);
}
.contentpanel #page-programmations .dm-screenpick .toogle-screen {
margin: 0 0 4px;
padding: 7px 10px;
border: 1px solid var(--dm-line-soft);
border-radius: var(--dm-r-sm);
background: var(--dm-card);
color: var(--dm-ink);
font-size: 13px;
line-height: 1.3;
}
.contentpanel #page-programmations .dm-screenpick .toogle-screen:hover {
border-color: var(--dm-ink);
}
.contentpanel #page-programmations .dm-screenpick .selected-screen .toogle-screen {
border-color: var(--dm-ok-line);
background: var(--dm-ok-bg);
color: var(--dm-ok-fg);
}
/* ==========================================================================
Écrans par enseigne (/ecrans-enseignes) — accordéon de cartes .dm-acc
--------------------------------------------------------------------------
Une carte par enseigne : en-tête cliquable (nom, nombre d'écrans, badges
d'état agrégés, chevron), contenu = tableau partagé _table_ecrans.tpl.
Le JS de footer.tpl (.nav-parent > a → slideToggle de ul.children, classe
.nav-active) reste inchangé ; les styles legacy de .nav-quirk ne
s'appliquent plus (classe retirée du markup).
========================================================================== */
.contentpanel .dm-acc {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 20px 0 0;
list-style: none;
}
.contentpanel .dm-acc__item {
margin: 0;
padding: 0;
border: 1px solid var(--dm-line);
border-radius: var(--dm-r-md);
background: var(--dm-card);
overflow: hidden;
transition: border-color .12s ease, box-shadow .12s ease;
}
.contentpanel .dm-acc__item:hover {
border-color: var(--dm-line-strong);
}
.contentpanel .dm-acc__item.nav-active {
border-color: var(--dm-ink);
box-shadow: 0 12px 26px -18px rgba(27, 31, 38, 0.4);
}
.contentpanel .dm-acc__head,
.contentpanel .dm-acc__head:hover,
.contentpanel .dm-acc__head:focus {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--dm-card);
color: var(--dm-ink);
text-decoration: none;
cursor: pointer;
}
.contentpanel .dm-acc__head:hover {
background: var(--dm-card-alt);
}
.contentpanel .dm-acc__chevron {
flex: none;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--dm-neutral-line);
border-radius: 50%;
background: var(--dm-card);
color: var(--dm-muted);
font-size: 18px;
line-height: 1;
transition: transform .15s ease;
}
.contentpanel .dm-acc__item.nav-active .dm-acc__chevron {
transform: rotate(90deg);
border-color: var(--dm-ink);
color: var(--dm-ink);
}
.contentpanel .dm-acc__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.contentpanel .dm-acc__title {
font-size: 14.5px;
font-weight: 600;
line-height: 1.3;
text-transform: none;
letter-spacing: 0;
}
.contentpanel .dm-acc__sub {
font-size: 12px;
color: var(--dm-muted);
}
.contentpanel .dm-acc__badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
flex: none;
}
.contentpanel .dm-acc__body {
display: none;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--dm-line-soft);
}
.contentpanel .dm-acc__content {
margin: 0;
padding: 0;
border: 0;
}
.contentpanel .dm-acc__content .table-responsive {
margin: 0;
border: 0;
}
.contentpanel .dm-acc__content .dm-legend {
margin: 0;
}
.contentpanel .dm-acc__foot {
display: flex;
justify-content: flex-end;
padding: 14px 18px;
border-top: 1px solid var(--dm-line-soft);
background: var(--dm-card);
}
.contentpanel .dm-acc__foot .btn {
margin: 0;
}
.contentpanel .dm-acc-empty {
padding: 24px 0 8px;
color: var(--dm-muted);
}
@media (max-width: 700px) {
.contentpanel .dm-acc__head {
flex-wrap: wrap;
}
.contentpanel .dm-acc__badges {
width: 100%;
justify-content: flex-start;
padding-left: 42px;
}
}
|