/* ============================================================================ * vnext-targets.css — #targets ("Mes objectifs") page, vNext design system. * * Replaces the pre-vNext style/features/targets.css + targets.premium.css * (hardcoded slate/blue/orange palette + forbidden --ux-* tokens). Everything * here is scoped under [data-qz-skin="targets"] (the #targets container) and * built on the --qz-* token layer, so it inherits the teal mono-tone system * and auto-inverts in dark mode. Target MODALS are styled separately in * vnext-targets-modals.css (they render outside this container, on ). * ==========================================================================*/ [data-qz-skin="targets"] { --qzt-gap: var(--qz-4); } /* ── Shell ─────────────────────────────────────────────────────────────── */ [data-qz-skin="targets"] .targets-premium-shell { display: flex; flex-direction: column; gap: var(--qz-5); max-width: 960px; margin: 0 auto; padding: var(--qz-2) 0 var(--qz-7); } /* ── Hero ──────────────────────────────────────────────────────────────── */ [data-qz-skin="targets"] .targets-hero-premium { display: flex; align-items: center; justify-content: space-between; gap: var(--qz-4); flex-wrap: wrap; background: var(--qz-surface); border: 1px solid var(--qz-line); border-radius: var(--qz-r-card); padding: var(--qz-5) var(--qz-6); box-shadow: 0 1px 2px rgba(6, 52, 42, .04); } [data-qz-skin="targets"] .targets-hero-eyebrow { display: inline-block; font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--qz-accent-ink); margin-bottom: var(--qz-1); } [data-qz-skin="targets"] .targets-hero-premium h2 { font-size: var(--qz-fs-title); font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0 0 4px; } [data-qz-skin="targets"] .targets-hero-premium p { font-size: var(--qz-fs-sm); color: var(--qz-muted); margin: 0; } /* ── KPI grid ──────────────────────────────────────────────────────────── */ [data-qz-skin="targets"] .targets-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--qz-3); } [data-qz-skin="targets"] .targets-kpi-card { display: flex; flex-direction: column; gap: 2px; background: var(--qz-surface); border: 1px solid var(--qz-line); border-radius: var(--qz-r-card); padding: var(--qz-4); min-height: 92px; justify-content: center; box-shadow: none; } [data-qz-skin="targets"] .targets-kpi-card > span { font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--qz-muted); } [data-qz-skin="targets"] .targets-kpi-card > strong { font-size: 26px; font-weight: var(--qz-fw-strong); color: var(--qz-text); line-height: 1.1; } [data-qz-skin="targets"] .targets-kpi-card--progress > strong { color: var(--qz-accent); } [data-qz-skin="targets"] .targets-kpi-card--success > strong { color: var(--qz-success-ink); } [data-qz-skin="targets"] .targets-kpi-card--ring { align-items: center; flex-direction: column; justify-content: center; gap: 6px; } [data-qz-skin="targets"] .targets-kpi-ring { --value: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--qz-accent) calc(var(--value) * 1%), var(--qz-accent-soft) 0); } [data-qz-skin="targets"] .targets-kpi-ring::before { content: ""; grid-area: 1 / 1; width: 40px; height: 40px; border-radius: 50%; background: var(--qz-surface); } [data-qz-skin="targets"] .targets-kpi-ring .targets-stat-rate { grid-area: 1 / 1; font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong); color: var(--qz-accent-ink); } [data-qz-skin="targets"] .targets-kpi-card--ring small { font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--qz-muted); } /* ── Toolbar (search + status filter) ──────────────────────────────────── */ [data-qz-skin="targets"] .targets-toolbar-premium { display: flex; align-items: center; justify-content: space-between; gap: var(--qz-3); flex-wrap: wrap; } [data-qz-skin="targets"] .targets-search-wrap { display: flex; align-items: center; gap: var(--qz-2); /* flex: 1 1 260px; */ min-width: 0; background: var(--qz-surface) !important; border: 1px solid var(--qz-line) !important; border-radius: var(--qz-r-pill); padding: 10px var(--qz-4); color: var(--qz-muted) !important; } [data-qz-skin="targets"] .targets-search-wrap i { color: var(--qz-muted); } [data-qz-skin="targets"] .targets-search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--qz-fs-sm); color: var(--qz-text); } [data-qz-skin="targets"] .targets-search-input::placeholder { color: var(--qz-muted); } [data-qz-skin="targets"] .targets-status-dropdown-toggle { border: 1px solid var(--qz-line) !important; border-radius: var(--qz-r-pill) !important; background: var(--qz-surface) !important; color: var(--qz-text) !important; font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong); padding: 10px var(--qz-4) !important; } [data-qz-skin="targets"] .targets-status-dropdown-toggle:hover, [data-qz-skin="targets"] .targets-status-dropdown-toggle:focus { border-color: var(--qz-accent-mid) !important; color: var(--qz-accent-ink) !important; } [data-qz-skin="targets"] .targets-status-dropdown-menu { border: 1px solid var(--qz-line); border-radius: var(--qz-r-card); padding: var(--qz-1); box-shadow: 0 8px 28px rgba(6, 52, 42, .14); background: var(--qz-surface); } [data-qz-skin="targets"] .targets-status-option { border-radius: var(--qz-r-control); font-size: var(--qz-fs-sm); color: var(--qz-text); padding: 8px 10px; } [data-qz-skin="targets"] .targets-status-option:hover { background: var(--qz-accent-soft); color: var(--qz-accent-ink); } [data-qz-skin="targets"] .targets-status-option.active { background: var(--qz-accent-soft); color: var(--qz-accent-ink); font-weight: var(--qz-fw-strong); } /* ── Custom-target list (card grid) ────────────────────────────────────── */ [data-qz-skin="targets"] .targets-custom-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--qz-3); } /* ── Target card ───────────────────────────────────────────────────────── */ [data-qz-skin="targets"] .qzr-target-card { display: flex; flex-direction: column; gap: var(--qz-2); background: var(--qz-surface); border: 1px solid var(--qz-line); border-left: 3px solid var(--qz-line-strong); border-radius: var(--qz-r-card); padding: var(--qz-4); cursor: pointer; transition: transform var(--qz-dur-press) var(--qz-ease), box-shadow var(--qz-dur-press) var(--qz-ease), border-color var(--qz-dur-press) var(--qz-ease); } [data-qz-skin="targets"] .qzr-target-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(6, 52, 42, .10); border-color: var(--qz-accent-mid); } [data-qz-skin="targets"] .qzr-target-card:focus-visible { outline: none; box-shadow: var(--qz-focus-ring); } [data-qz-skin="targets"] .qzr-target-card.is-progress { border-left-color: var(--qz-accent); } [data-qz-skin="targets"] .qzr-target-card.is-success { border-left-color: var(--qz-success-ink); } [data-qz-skin="targets"] .qzr-target-card.is-failed { border-left-color: var(--qz-error-ink); } /* Daily quests surfaced among the custom objectives — amber accent + "Quête" tag, distinct from user-created targets (which are teal). Read-only. */ [data-qz-skin="targets"] .qzr-target-card.targets-quest-item { border-left-color: var(--qz-energy, #F5C542); } [data-qz-skin="targets"] .qzr-target-quest-tag { color: var(--qz-energy-deep, #B5811A); background: color-mix(in srgb, var(--qz-energy, #F5C542) 22%, #FFFFFF); } [data-qz-skin="targets"] .targets-quest-item .qzr-target-footer i { color: var(--qz-energy-deep, #B5811A); } [data-qz-skin="targets"] .qzr-target-top { display: flex; align-items: center; gap: var(--qz-2); flex-wrap: wrap; } [data-qz-skin="targets"] .qzr-target-status { font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); letter-spacing: .03em; text-transform: uppercase; color: var(--qz-accent-ink); background: var(--qz-accent-soft); border-radius: var(--qz-r-pill); padding: 3px 10px; } [data-qz-skin="targets"] .qzr-target-card.is-success .qzr-target-status { color: var(--qz-success-ink); background: var(--qz-success-bg); } [data-qz-skin="targets"] .qzr-target-card.is-failed .qzr-target-status { color: var(--qz-error-strong); background: var(--qz-error-bg); } [data-qz-skin="targets"] .qzr-target-next-deadline { color: var(--qz-muted); background: var(--qz-screen); } [data-qz-skin="targets"] .qzr-target-next-deadline.is-today { color: var(--qz-warning-ink); background: var(--qz-warning-bg); } [data-qz-skin="targets"] .qzr-target-title { font-size: var(--qz-fs-h3); font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-qz-skin="targets"] .qzr-target-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--qz-2); } [data-qz-skin="targets"] .qzr-target-value { font-size: 22px; font-weight: var(--qz-fw-strong); color: var(--qz-text); } [data-qz-skin="targets"] .qzr-target-total, [data-qz-skin="targets"] .qzr-target-unit { font-size: var(--qz-fs-sm); color: var(--qz-muted); } [data-qz-skin="targets"] .qzr-target-percent { font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong); color: var(--qz-accent-ink); } [data-qz-skin="targets"] .qzr-target-card.is-success .qzr-target-percent { color: var(--qz-success-ink); } [data-qz-skin="targets"] .qzr-target-card.is-failed .qzr-target-percent { color: var(--qz-error-strong); } [data-qz-skin="targets"] .qzr-progress { height: 8px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft); overflow: hidden; } [data-qz-skin="targets"] .qzr-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--qz-accent); transition: width var(--qz-dur-bar) var(--qz-ease); } [data-qz-skin="targets"] .qzr-target-card.is-success .qzr-progress > span { background: var(--qz-success); } [data-qz-skin="targets"] .qzr-target-card.is-failed .qzr-progress > span { background: var(--qz-error); } [data-qz-skin="targets"] .qzr-target-footer { display: flex; align-items: center; gap: var(--qz-2); flex-wrap: wrap; font-size: var(--qz-fs-xs); color: var(--qz-muted); } [data-qz-skin="targets"] .qzr-target-footer > span { display: inline-flex; align-items: center; gap: 4px; } [data-qz-skin="targets"] .qzr-target-footer > span + span::before { content: "·"; margin-right: 6px; color: var(--qz-line-strong); } [data-qz-skin="targets"] .qzr-target-footer i { color: var(--qz-accent); } /* ── Empty state ───────────────────────────────────────────────────────── */ [data-qz-skin="targets"] .targets-empty-premium { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--qz-2); background: var(--qz-surface); border: 1px dashed var(--qz-line-strong); border-radius: var(--qz-r-card); padding: var(--qz-7) var(--qz-5); } [data-qz-skin="targets"] .targets-empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--qz-accent-soft); color: var(--qz-accent); font-size: 22px; margin-bottom: var(--qz-1); } [data-qz-skin="targets"] .targets-empty-premium h3 { font-size: var(--qz-fs-h3); font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0; } [data-qz-skin="targets"] .targets-empty-premium p { font-size: var(--qz-fs-sm); color: var(--qz-muted); margin: 0 0 var(--qz-2); max-width: 340px; } /* ── Loading spinner ───────────────────────────────────────────────────── */ [data-qz-skin="targets"] .targets-loading .spinner-border { color: var(--qz-accent) !important; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 640px) { [data-qz-skin="targets"] .targets-kpi-grid { grid-template-columns: repeat(2, 1fr); } [data-qz-skin="targets"] .targets-custom-list { grid-template-columns: 1fr; } [data-qz-skin="targets"] .targets-hero-premium { padding: var(--qz-4); } }