/* ============================================================================ DYCAST — habillage de Healthchecks ---------------------------------------------------------------------------- Chargé en dernier dans base.html, après les 40 feuilles de healthchecks. Aligné sur my.dycast.fr (assets/css/main.css) et sur le site vitrine dycast.fr : même échelle monochrome chaude, mêmes polices, mêmes rayons. Principe : healthchecks expose ~80 variables CSS dans variables.css. On les remappe toutes sur les jetons DYCAST (§3), puis on reprend les composants Bootstrap 3 un par un (§5 et suivants). Ne jamais éditer variables.css : tout passe par ce fichier, pour que la mise à jour de healthchecks reste possible. ========================================================================= */ /* ── 1. Polices ─────────────────────────────────────────────────────────── */ @font-face { font-family: 'Geist Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist-sans-variable.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/instrument-sans-variable.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/geist-mono-variable.woff2') format('woff2'); } /* ── 2. Jetons DYCAST ───────────────────────────────────────────────────── */ :root { --dy-font-sans: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --dy-font-display: 'Instrument Sans', 'Geist Sans', ui-sans-serif, system-ui, sans-serif; --dy-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace; /* Échelle monochrome chaude (identique à myDYCAST) */ --dy-ink-0: #ffffff; --dy-ink-50: #fafaf8; --dy-ink-100: #f4f4f1; --dy-ink-150: #eeeeea; --dy-ink-200: #e6e6e2; --dy-ink-300: #d4d4cf; --dy-ink-400: #a3a39a; --dy-ink-500: #73736b; --dy-ink-600: #55554e; --dy-ink-700: #3f3f3a; --dy-ink-800: #292926; --dy-ink-850: #1d1d1b; --dy-ink-900: #161615; --dy-ink-950: #0c0c0b; /* Statuts — réservés aux badges, alertes et indicateurs */ --dy-success: #1a8043; --dy-success-bg: rgba(26, 128, 67, .10); --dy-warning: #b96d0a; --dy-warning-bg: rgba(185, 109, 10, .10); --dy-danger: #c93030; --dy-danger-bg: rgba(201, 48, 48, .10); --dy-info: #3061c9; --dy-info-bg: rgba(48, 97, 201, .10); --dy-violet: #6f52c4; --dy-violet-bg: rgba(111, 82, 196, .10); /* Rayons — card 20px, panel 24px, contrôles 10px, boutons en pilule */ --dy-r-xs: 8px; --dy-r-sm: 10px; --dy-r: 14px; --dy-r-lg: 20px; --dy-r-xl: 24px; --dy-r-pill: 999px; --dy-ease: cubic-bezier(.22, 1, .36, 1); --dy-t-fast: .15s var(--dy-ease); --dy-t: .3s var(--dy-ease); } /* Thème clair */ :root { color-scheme: light; --dy-bg: #fafaf8; --dy-bg-deep: #f2f2ef; --dy-surface: #ffffff; --dy-surface-2: #fafaf8; --dy-surface-3: #f4f4f1; --dy-text: var(--dy-ink-950); --dy-text-muted: var(--dy-ink-600); --dy-text-soft: #8f8f86; --dy-badge-warning-text: #94600c; --dy-border: rgba(12, 12, 11, .14); --dy-border-strong: rgba(12, 12, 11, .28); --dy-primary: var(--dy-ink-950); --dy-on-primary: var(--dy-ink-50); --dy-shadow-card: 0 1px 2px rgba(12, 12, 11, .04); --dy-shadow-lift: 0 18px 50px rgba(0, 0, 0, .10); --dy-shadow-pop: 0 24px 70px -18px rgba(12, 12, 11, .28); --dy-hover-bg: rgba(12, 12, 11, .05); --dy-active-bg: rgba(12, 12, 11, .08); --dy-veil: rgba(250, 250, 248, .8); } /* Thème sombre — healthchecks bascule via */ body.dark { color-scheme: dark; --dy-bg: #0c0c0b; --dy-bg-deep: #080807; --dy-surface: #161615; --dy-surface-2: #1b1b19; --dy-surface-3: #232321; --dy-text: var(--dy-ink-50); --dy-text-muted: var(--dy-ink-400); --dy-text-soft: var(--dy-ink-500); --dy-badge-warning-text: #d79b3e; --dy-border: rgba(250, 250, 248, .13); --dy-border-strong: rgba(250, 250, 248, .26); --dy-primary: var(--dy-ink-50); --dy-on-primary: var(--dy-ink-950); --dy-shadow-card: 0 1px 2px rgba(0, 0, 0, .3); --dy-shadow-lift: 0 18px 50px rgba(0, 0, 0, .45); --dy-shadow-pop: 0 24px 70px -18px rgba(0, 0, 0, .7); --dy-hover-bg: rgba(250, 250, 248, .06); --dy-active-bg: rgba(250, 250, 248, .1); --dy-veil: rgba(12, 12, 11, .8); --dy-success: #35b06a; --dy-success-bg: rgba(53, 176, 106, .12); --dy-warning: #d79b3e; --dy-warning-bg: rgba(215, 155, 62, .12); --dy-danger: #e5605d; --dy-danger-bg: rgba(229, 96, 93, .12); --dy-info: #6f9bf0; --dy-info-bg: rgba(111, 155, 240, .12); --dy-violet: #9b83e8; --dy-violet-bg: rgba(155, 131, 232, .12); } /* ── 3. Remappage des variables healthchecks ────────────────────────────── */ :root, body.dark { --account-warning-bg: var(--dy-warning); --alert-no-data-bg: var(--dy-surface-3); --alert-no-data-border: var(--dy-border); --alert-no-data-color: var(--dy-text-muted); --alert-success-bg: var(--dy-success-bg); --alert-success-border: var(--dy-success-bg); --alert-success-color: var(--dy-success); --body-bg: var(--dy-bg); --border-color: var(--dy-border); --border-muted: var(--dy-border); --breadcrumb-active-color: var(--dy-text-muted); --breadcrumb-bg: transparent; --btn-active-bg: var(--dy-active-bg); --btn-active-border: var(--dy-border-strong); --btn-active-color: var(--dy-text); --btn-default-bg: var(--dy-surface); --btn-default-border: var(--dy-border); --btn-default-color: var(--dy-text); --btn-remove-bg: transparent; --btn-remove-color: var(--dy-danger); --btn-remove-hover: var(--dy-danger-bg); --channel-off-color: var(--dy-surface-3); --channel-off-inside-color: var(--dy-text-soft); --cheatsheet-example-bg: var(--dy-surface-3); --cheatsheet-dotted-color: var(--dy-border-strong); --close-color: var(--dy-text); --debug-warning-bg: var(--dy-danger-bg); --dropdown-bg: var(--dy-surface); --dropdown-link-hover-bg: var(--dy-hover-bg); --get-started-bg: var(--dy-surface-3); --input-bg-disabled: var(--dy-surface-3); --input-border: var(--dy-border); --input-color: var(--dy-text); --input-group-addon-bg: var(--dy-surface-3); --jumbotron-bg: var(--dy-surface-3); --label-ign-bg: var(--dy-surface-3); --label-ign-color: var(--dy-text-muted); --label-start-color: var(--dy-success); --link-color: var(--dy-text); --link-hover-color: var(--dy-text-muted); --log-flip-bg: var(--dy-surface-3); --modal-content-bg: var(--dy-surface); --nav-link-hover-bg: var(--dy-hover-bg); --panel-bg: var(--dy-surface); --panel-default-heading-bg: transparent; --panel-success-bg: var(--dy-success-bg); --pre-bg: var(--dy-surface-3); --selectize-tag-bg: var(--dy-surface-3); --small-text-color: var(--dy-text); --state-info-bg: var(--dy-info-bg); --state-info-border: var(--dy-info-bg); --state-info-color: var(--dy-info); --status-new-color: var(--dy-ink-400); --table-bg-hover: var(--dy-hover-bg); --tag-bg: var(--dy-surface-3); --tag-checked-bg: var(--dy-primary); --tag-checked-border: var(--dy-primary); --tag-checked-color: var(--dy-on-primary); --tag-checked-shadow: transparent; --tag-color: var(--dy-text-muted); --tag-up-bg: var(--dy-surface); --tag-up-border: var(--dy-border); --tag-up-color: var(--dy-text); --text-color: var(--dy-text); --text-muted: var(--dy-text-muted); --text-success: var(--dy-success); --text-warning: var(--dy-warning); --text-danger: var(--dy-danger); --log-new-row-bg: var(--dy-info-bg); --log-new-row-border: var(--dy-info-bg); } /* ── 4. Typographie et fond ─────────────────────────────────────────────── */ body { font-family: var(--dy-font-sans); background: var(--dy-bg); color: var(--dy-text); font-size: 13.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--dy-font-display); letter-spacing: -.02em; font-weight: 600; color: var(--dy-text); } h1, .h1 { font-size: 26px; } h2, .h2 { font-size: 20px; } h3, .h3 { font-size: 16.5px; } h4, .h4 { font-size: 14.5px; } a { color: var(--dy-text); text-decoration: none; transition: color var(--dy-t-fast), opacity var(--dy-t-fast); } a:hover, a:focus { color: var(--dy-text); opacity: .7; text-decoration: none; } code, kbd, pre, samp, .font-mono { font-family: var(--dy-font-mono); font-size: 12.5px; } code { background: var(--dy-surface-3); color: var(--dy-text); border-radius: var(--dy-r-xs); padding: 2px 6px; } pre { background: var(--dy-surface-3); color: var(--dy-text); border: 1px solid var(--dy-border); border-radius: var(--dy-r-sm); padding: 14px 16px; font-size: 12.5px; line-height: 1.6; } hr { border-top: 1px solid var(--dy-border); } .text-muted { color: var(--dy-text-muted); } .text-success { color: var(--dy-success); } .text-warning { color: var(--dy-warning); } .text-danger { color: var(--dy-danger); } .text-info { color: var(--dy-info); } /* ── 5. Barre de navigation — reprise de la topbar myDYCAST ─────────────── */ .navbar-default { background: var(--dy-veil); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 0; border-bottom: 1px solid var(--dy-border); border-radius: 0; margin-bottom: 28px; min-height: 62px; position: sticky; top: 0; z-index: 1000; } .navbar-default .navbar-brand { height: auto; padding: 12px 15px; color: var(--dy-text); font-family: var(--dy-font-display); font-weight: 600; letter-spacing: -.02em; } /* Le logo est un PNG blanc : on le pose sur une plaque noire, lisible dans les deux thèmes (même parti pris que la page de connexion de myDYCAST). */ #logo { max-height: 22px; margin: 0; background: #000; border-radius: var(--dy-r-sm); padding: 7px 12px; box-sizing: content-box; } #nav-main-sections > li > a { text-transform: none; font-size: 13px; font-weight: 500; color: var(--dy-text-muted); padding: 20px 14px; border-radius: 0; } #nav-main-sections > li > a:hover, #nav-main-sections > li.active > a { color: var(--dy-text); background: transparent; } @media (min-width: 768px) { .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li > a:hover { border-bottom: 2px solid var(--dy-text); padding-bottom: 18px; } } @media (max-width: 767px) { .navbar-default .navbar-nav > li > a:hover { border-left: 2px solid var(--dy-text); padding-left: 13px; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { border-left: 2px solid var(--dy-text); padding-left: 23px; } } #project-menu > .dropdown > a { padding: 19px 15px; font-size: 15px; font-family: var(--dy-font-display); font-weight: 600; letter-spacing: -.02em; color: var(--dy-text); } #project-menu > .dropdown > a:hover { padding-bottom: 17px; border-bottom: 2px solid var(--dy-text); } #global-links > li > a { font-size: 12.5px; color: var(--dy-text-muted); padding: 21px 12px; } #global-links > li > a:hover { color: var(--dy-text); } .navbar-default .navbar-toggle { border: 1px solid var(--dy-border); border-radius: var(--dy-r-sm); margin-top: 13px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: var(--dy-hover-bg); } .navbar-default .navbar-toggle .icon-bar { background: var(--dy-text); } .navbar-default .navbar-collapse { border-color: var(--dy-border); } #nav-sign-up { padding: 14px 0 14px 15px; } #nav-sign-up span { color: var(--dy-on-primary); background: var(--dy-primary); border: 1px solid var(--dy-primary); border-radius: var(--dy-r-pill); padding: 8px 18px; font-weight: 500; font-size: 13px; transition: opacity var(--dy-t); } #nav-sign-up:hover span { color: var(--dy-on-primary); background: var(--dy-primary); border-color: var(--dy-primary); opacity: .85; } #broken-channels > a, #broken-channels > a:hover { color: var(--dy-danger); } /* ── 6. Boutons — pilules vitrine ───────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: var(--dy-r-pill); font-size: 13px; font-weight: 500; font-family: inherit; line-height: 1.4; border: 1px solid transparent; box-shadow: none; text-shadow: none; white-space: nowrap; user-select: none; transition: background-color var(--dy-t), border-color var(--dy-t), color var(--dy-t), opacity var(--dy-t), transform var(--dy-t); } .btn:active, .btn.active { transform: scale(.98); box-shadow: none; } .btn-lg { padding: 12px 26px; font-size: 14.5px; border-radius: var(--dy-r-pill); } .btn-sm { padding: 6px 13px; font-size: 12px; } .btn-xs { padding: 4px 11px; font-size: 11.5px; } .btn-default { background: var(--dy-surface); color: var(--dy-text); border-color: var(--dy-border); box-shadow: none; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background: var(--dy-surface); color: var(--dy-text); border-color: var(--dy-border-strong); } .btn-primary { background: var(--dy-primary); color: var(--dy-on-primary); border-color: var(--dy-primary); box-shadow: none; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: var(--dy-primary); color: var(--dy-on-primary); border-color: var(--dy-primary); opacity: .85; } .btn-success { background: var(--dy-success); color: #fff; border-color: var(--dy-success); } .btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--dy-success); color: #fff; border-color: var(--dy-success); opacity: .85; } .btn-danger { background: var(--dy-danger); color: #fff; border-color: var(--dy-danger); box-shadow: none; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: var(--dy-danger); color: #fff; border-color: var(--dy-danger); opacity: .85; } .btn-warning { background: var(--dy-warning); color: #fff; border-color: var(--dy-warning); } .btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: var(--dy-warning); color: #fff; border-color: var(--dy-warning); opacity: .85; } .btn-info { background: var(--dy-info); color: #fff; border-color: var(--dy-info); } .btn-info:hover, .btn-info:focus, .btn-info:active { background: var(--dy-info); color: #fff; border-color: var(--dy-info); opacity: .85; } .btn-remove { background: transparent; color: var(--dy-danger); border-color: var(--dy-border); box-shadow: none; } .btn-remove:hover, .btn-remove:focus { background: var(--dy-danger-bg); color: var(--dy-danger); border-color: var(--dy-danger); } .btn-link { color: var(--dy-text); border-color: transparent; padding: 9px 12px; } .btn-link:hover, .btn-link:focus { color: var(--dy-text); opacity: .7; text-decoration: none; } .btn.disabled, .btn[disabled] { opacity: .45; box-shadow: none; } .btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* ── 7. Formulaires ─────────────────────────────────────────────────────── */ label, .control-label { font-size: 12.5px; font-weight: 600; color: var(--dy-text); margin-bottom: 6px; } .form-control, select.form-control { height: auto; padding: 10px 14px; border: 1px solid var(--dy-border); border-radius: var(--dy-r-sm); font-size: 13.5px; font-family: inherit; color: var(--dy-text); background: var(--dy-surface); box-shadow: none; transition: border-color var(--dy-t-fast), box-shadow var(--dy-t-fast); } .form-control:hover { border-color: var(--dy-border-strong); } .form-control:focus { border-color: var(--dy-text); box-shadow: 0 0 0 3px var(--dy-hover-bg); outline: none; } .form-control::placeholder { color: var(--dy-text-soft); } .form-control[disabled], .form-control[readonly] { background: var(--dy-surface-3); color: var(--dy-text-muted); } .input-lg { padding: 12px 16px; font-size: 15px; border-radius: var(--dy-r); } .input-group-addon { background: var(--dy-surface-3); border-color: var(--dy-border); color: var(--dy-text-muted); border-radius: var(--dy-r-sm); font-size: 12.5px; } .help-block { color: var(--dy-text-muted); font-size: 12.5px; font-weight: 400; } .has-error .form-control { border-color: var(--dy-danger); } .has-error .form-control:focus { box-shadow: 0 0 0 3px var(--dy-danger-bg); } .has-error .help-block, .has-error .control-label { color: var(--dy-danger); } /* ── 8. Panneaux, encarts, blocs ────────────────────────────────────────── */ .panel { background: var(--dy-surface); border: 1px solid var(--dy-border); border-radius: var(--dy-r-lg); box-shadow: var(--dy-shadow-card); } .panel-default > .panel-heading, .panel-heading { background: transparent; border-bottom: 1px solid var(--dy-border); border-radius: var(--dy-r-lg) var(--dy-r-lg) 0 0; padding: 16px 20px; color: var(--dy-text); font-family: var(--dy-font-display); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; } .panel-body { padding: 20px; } .panel-footer { background: transparent; border-top: 1px solid var(--dy-border); border-radius: 0 0 var(--dy-r-lg) var(--dy-r-lg); padding: 12px 20px; } .panel-success { border-color: var(--dy-success-bg); } .panel-success > .panel-heading { background: var(--dy-success-bg); color: var(--dy-success); border-color: var(--dy-success-bg); } .well { background: var(--dy-surface-3); border: 1px solid var(--dy-border); border-radius: var(--dy-r); box-shadow: none; padding: 18px 20px; } .jumbotron { background: var(--dy-surface-3); border: 1px solid var(--dy-border); border-radius: var(--dy-r-xl); padding: 36px 32px; } .jumbotron h1, .jumbotron .h1 { font-family: var(--dy-font-display); letter-spacing: -.03em; } .hc-dialog { background: var(--dy-surface); border: 1px solid var(--dy-border); border-radius: var(--dy-r-xl); box-shadow: var(--dy-shadow-card); padding: 32px; margin-top: 64px; } .breadcrumb { background: transparent; padding: 8px 0; font-size: 12.5px; color: var(--dy-text-muted); } /* ── 9. Tables ──────────────────────────────────────────────────────────── */ .table > thead > tr > th { padding: 10px 16px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--dy-text-muted); background: transparent; border-bottom: 1px solid var(--dy-border); vertical-align: middle; white-space: nowrap; } .table > tbody > tr > td { padding: 12px 16px; border-top: 1px solid var(--dy-border); color: var(--dy-text); vertical-align: middle; } .table-hover > tbody > tr:hover { background: var(--dy-hover-bg); } .table-striped > tbody > tr:nth-of-type(odd) { background: var(--dy-surface-2); } /* ── 10. Étiquettes, badges, tags ───────────────────────────────────────── */ .label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--dy-r-pill); font-size: 11px; font-weight: 600; line-height: 1.3; border: 1px solid transparent; text-shadow: none; } .label-default { background: var(--dy-surface-3); color: var(--dy-text-muted); border-color: var(--dy-border); } .label-primary { background: var(--dy-info-bg); color: var(--dy-info); border-color: rgba(48, 97, 201, .16); } .label-success { background: var(--dy-success-bg); color: var(--dy-success); border-color: rgba(26, 128, 67, .16); } .label-warning { background: var(--dy-warning-bg); color: var(--dy-badge-warning-text); border-color: rgba(185, 109, 10, .16); } .label-danger { background: var(--dy-danger-bg); color: var(--dy-danger); border-color: rgba(201, 48, 48, .16); } .label-info { background: var(--dy-info-bg); color: var(--dy-info); border-color: rgba(48, 97, 201, .16); } .label.label-start { background: var(--dy-success-bg); color: var(--dy-success); border-color: rgba(26, 128, 67, .16); } .label.label-ign, .label.label-log { background: var(--dy-surface-3); color: var(--dy-text-muted); border-color: var(--dy-border); } .badge { background: var(--dy-surface-3); color: var(--dy-text-muted); border-radius: var(--dy-r-pill); font-size: 11px; font-weight: 600; padding: 3px 9px; } .badge-down { background: var(--dy-danger-bg); color: var(--dy-danger); } /* ── 11. Modales, menus déroulants, alertes ─────────────────────────────── */ .modal-content { background: var(--dy-surface); border: 1px solid var(--dy-border); border-radius: var(--dy-r-xl); box-shadow: var(--dy-shadow-pop); } .modal-header { border-bottom: 1px solid var(--dy-border); padding: 18px 24px; } .modal-title { font-family: var(--dy-font-display); font-size: 16px; font-weight: 600; letter-spacing: -.02em; } .modal-body { padding: 24px; } .modal-footer { border-top: 1px solid var(--dy-border); padding: 16px 24px; } .modal-backdrop.in { opacity: .45; } .close { color: var(--dy-text); opacity: .5; text-shadow: none; font-weight: 400; } .close:hover { opacity: 1; color: var(--dy-text); } .dropdown-menu { background: var(--dy-surface); border: 1px solid var(--dy-border); border-radius: var(--dy-r); box-shadow: var(--dy-shadow-lift); padding: 6px; font-size: 13px; } .dropdown-menu > li > a, .dropdown-menu > li .btn-link { color: var(--dy-text); padding: 8px 12px; border-radius: var(--dy-r-xs); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li .btn-link:hover, .dropdown-menu > li .btn-link:focus { background: var(--dy-hover-bg); color: var(--dy-text); } .dropdown-menu .divider { background: var(--dy-border); margin: 6px 0; } .alert { border-radius: var(--dy-r); border: 1px solid transparent; padding: 14px 18px; font-size: 13px; } .alert-success { background: var(--dy-success-bg); border-color: rgba(26, 128, 67, .16); color: var(--dy-success); } .alert-info { background: var(--dy-info-bg); border-color: rgba(48, 97, 201, .16); color: var(--dy-info); } .alert-warning { background: var(--dy-warning-bg); border-color: rgba(185, 109, 10, .16); color: var(--dy-badge-warning-text); } .alert-danger { background: var(--dy-danger-bg); border-color: rgba(201, 48, 48, .16); color: var(--dy-danger); } .nav-tabs { border-bottom: 1px solid var(--dy-border); } .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--dy-text-muted); font-size: 13px; font-weight: 500; padding: 10px 16px; margin-right: 4px; } .nav-tabs > li > a:hover { background: transparent; border-bottom-color: var(--dy-border-strong); color: var(--dy-text); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: transparent; border: 0; border-bottom: 2px solid var(--dy-text); color: var(--dy-text); } .nav-pills > li > a { border-radius: var(--dy-r-pill); color: var(--dy-text-muted); font-size: 13px; font-weight: 500; padding: 8px 16px; } .nav-pills > li > a:hover { background: var(--dy-hover-bg); color: var(--dy-text); } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: var(--dy-primary); color: var(--dy-on-primary); } /* ── 12. Écrans healthchecks ────────────────────────────────────────────── */ /* Pastilles d'état */ .status.ic-up { color: var(--dy-success); } .status.ic-grace { color: var(--dy-warning); } .status.ic-down { color: var(--dy-danger); } .status.ic-new, .status.ic-paused { color: var(--dy-ink-400); } .status.ic-dots { color: var(--dy-text-muted); } /* Tags de check */ .tag { border-radius: var(--dy-r-pill); font-size: 11px; font-weight: 600; padding: 3px 10px; background: var(--dy-surface-3); color: var(--dy-text-muted); border: 1px solid var(--dy-border); box-shadow: none; } /* Bandeaux d'avertissement en tête de page */ #account-warning { background: var(--dy-warning-bg); color: var(--dy-badge-warning-text); border-bottom: 1px solid rgba(185, 109, 10, .16); font-size: 12.5px; padding: 10px 0; } #account-warning a { color: var(--dy-badge-warning-text); } #debug-warning { background: var(--dy-danger-bg); color: var(--dy-danger); font-size: 12px; } /* Pied de page */ .footer { border-top: 1px solid var(--dy-border); color: var(--dy-text-muted); } .footer ul { font-size: 12px; } .footer a { color: var(--dy-text-muted); } .footer a:hover { color: var(--dy-text); } /* Bloc « pour commencer » du tableau de bord vide */ #get-started, .get-started { background: var(--dy-surface-3); border: 1px solid var(--dy-border); border-radius: var(--dy-r-xl); } /* Sélecteur selectize (formulaires d'intégration) */ .selectize-input { background: var(--dy-surface); border: 1px solid var(--dy-border); border-radius: var(--dy-r-sm); box-shadow: none; padding: 9px 13px; font-size: 13.5px; color: var(--dy-text); } .selectize-input.focus { border-color: var(--dy-text); box-shadow: 0 0 0 3px var(--dy-hover-bg); } .selectize-dropdown { background: var(--dy-surface); border: 1px solid var(--dy-border); border-radius: var(--dy-r-sm); box-shadow: var(--dy-shadow-lift); font-size: 13.5px; } /* Cartes d'intégration */ .channel-row, #channels-table > tbody > tr > td { border-color: var(--dy-border); } /* ── 13. Pages d'authentification ───────────────────────────────────────── */ .page-login .container, .page-signup .container { max-width: 460px; } #login-form, .login-panel { background: var(--dy-surface); border: 1px solid var(--dy-border); border-radius: var(--dy-r-xl); box-shadow: var(--dy-shadow-card); padding: 32px; } /* Plaque noire du logo, reprise de la page de connexion myDYCAST */ .dy-auth-logo { display: inline-flex; align-items: center; justify-content: center; padding: 18px 26px; background: #000; border-radius: 18px; margin: 0 auto 18px; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .3); } .dy-auth-logo img { display: block; height: 30px; width: auto; } /* En-tête des pages d'authentification : plaque logo + titre + accroche */ .dy-auth-head { text-align: center; margin: 8px 0 32px; } .dy-auth-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; margin: 0; } .dy-auth-head p { font-size: 13px; margin-top: 4px; } /* Séparateur « ou » entre les deux méthodes de connexion */ #login-sep > div, #xs-login-sep > div { color: var(--dy-text-soft); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } #link-instruction, #forgot-password { font-size: 12.5px; color: var(--dy-text-muted); } #magic-link-form .form-control, #login-form .form-control { margin-bottom: 12px; } /* ── 14. Corrections de cascade ───────────────────────────────────────────── Bootstrap 3 et quelques feuilles de healthchecks portent, sur ces points, des sélecteurs plus spécifiques que les nôtres : être chargé en dernier ne suffit pas. La liste vient d'un audit de spécificité (bin/audit-cascade.py) restreint à ce qui se voit vraiment ; le reste des écrasements concerne des états inutilisés par healthchecks ou des réglages de mise en page à garder. ------------------------------------------------------------------------ */ /* Menu déroulant des projets, ouvert depuis la barre de navigation */ .navbar-nav .open .dropdown-menu { background: var(--dy-surface); border: 1px solid var(--dy-border); box-shadow: var(--dy-shadow-lift); } .navbar-default .navbar-nav .open .dropdown-menu > li > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a { color: var(--dy-text); } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: var(--dy-text); background: var(--dy-hover-bg); } /* Groupes de champs (recherche des contrôles, suggestion de slug) */ .input-group-lg > .form-control, .input-group-sm > .form-control, .input-group-lg > .input-group-addon, .input-group-sm > .input-group-addon, .input-group-lg > .input-group-btn > .btn, .input-group-sm > .input-group-btn > .btn { height: auto; font-size: 13.5px; line-height: 1.4; border-radius: var(--dy-r-sm); } .input-group-lg > .input-group-btn > .btn, .input-group-sm > .input-group-btn > .btn { padding: 10px 16px; } /* Le rayon en pilule ne survit pas aux variantes de taille des groupes */ .btn-group-lg > .btn, .btn-group-sm > .btn, .btn-group-xs > .btn { border-radius: var(--dy-r-pill); line-height: 1.4; } .btn-group-lg > .btn { padding: 12px 26px; font-size: 14.5px; } .btn-group-sm > .btn { padding: 6px 13px; font-size: 12px; } .btn-group-xs > .btn { padding: 4px 11px; font-size: 11.5px; } /* Bootstrap ajoute une ombre intérieure sur les champs en erreur */ .has-error .form-control, .has-success .form-control, .has-warning .form-control { box-shadow: none; } .has-error .form-control:focus { border-color: var(--dy-danger); box-shadow: 0 0 0 3px var(--dy-danger-bg); } .has-error .input-group-addon { border-color: var(--dy-danger); color: var(--dy-danger); } /* Le jumbotron perd son rayon dès qu'il est dans un conteneur */ .container .jumbotron, .container-fluid .jumbotron { border-radius: var(--dy-r-xl); } .alert h4 { color: inherit; }