/* ===================================================================== Hyperion — Back-office design system Soft-UI. Dual theme (dark / light) driven by [data-theme] on . ===================================================================== */ :root { /* Theme-agnostic geometry & type */ --radius: 8px; --radius-sm: 8px; --sidebar-w: 264px; --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Accent hues (shared across themes) */ --accent-2: #21c7b3; } /* ---------- Dark theme ---------- */ :root, [data-theme="dark"] { color-scheme: dark; --bg-0: #0b0f1a; --bg-1: #0e1422; --glass-bg: rgba(255, 255, 255, 0.045); --glass-bg-strong: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-strong: rgba(255, 255, 255, 0.14); --glass-blur: 18px; --surface-inset: rgba(255, 255, 255, 0.025); --map-base: #1a2233; --code-bg: rgba(255, 255, 255, 0.05); --input-bg: rgba(255, 255, 255, 0.03); --input-bg-strong: rgba(255, 255, 255, 0.05); --topbar-bg: rgba(11, 15, 26, 0.72); --text-0: #f3f6fc; --text-1: #aeb7c9; --text-2: #6f7a90; --on-accent: #0b0f1a; --accent: #6c8cff; --accent-soft: rgba(108, 140, 255, 0.16); --accent-border: rgba(108, 140, 255, 0.28); --ok: #36d399; --warn: #f5c451; --danger: #ff6b81; --ok-soft: rgba(54, 211, 153, 0.12); --danger-soft: rgba(255, 107, 129, 0.12); --danger-border: rgba(255, 107, 129, 0.32); --danger-fg: #ffd7dd; --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.65); --aurora-1: rgba(108, 140, 255, 0.22); --aurora-2: rgba(56, 224, 200, 0.16); --aurora-3: rgba(173, 108, 255, 0.14); --aurora-noise: 0.025; } /* ---------- Light theme (soft-UI) ---------- */ [data-theme="light"] { color-scheme: light; --bg-0: #e9edf4; --bg-1: #f5f7fb; --glass-bg: #ffffff; --glass-bg-strong: #f3f6fb; --glass-border: rgba(17, 24, 39, 0.06); --glass-border-strong: rgba(17, 24, 39, 0.12); --glass-blur: 8px; --surface-inset: #f4f6fb; --map-base: #e2e8f1; --code-bg: #eceff6; --input-bg: #f4f6fb; --input-bg-strong: #eceff6; --topbar-bg: rgba(245, 247, 251, 0.8); --text-0: #0f172a; --text-1: #475569; --text-2: #94a3b8; --on-accent: #ffffff; --accent: #5b7cfa; --accent-soft: rgba(91, 124, 250, 0.12); --accent-border: rgba(91, 124, 250, 0.28); --ok: #16a34a; --warn: #d97706; --danger: #e11d48; --ok-soft: rgba(22, 163, 74, 0.12); --danger-soft: rgba(225, 29, 72, 0.1); --danger-border: rgba(225, 29, 72, 0.26); --danger-fg: #b42318; --shadow: 0 18px 40px -22px rgba(17, 24, 39, 0.22); --aurora-1: rgba(91, 124, 250, 0.14); --aurora-2: rgba(33, 199, 179, 0.1); --aurora-3: rgba(173, 108, 255, 0.08); --aurora-noise: 0.015; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font); color: var(--text-0); background: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Aurora background — soft colored blobs behind the frosted glass */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1100px 700px at 12% -8%, var(--aurora-1), transparent 60%), radial-gradient(900px 600px at 92% 0%, var(--aurora-2), transparent 55%), radial-gradient(800px 800px at 70% 110%, var(--aurora-3), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-0)); } .aurora::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; } a { color: inherit; text-decoration: none; } /* ---------- Glass primitive ---------- */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); box-shadow: var(--shadow); } /* ---------- App shell ---------- */ .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { position: sticky; top: 14px; height: calc(100vh - 28px); z-index: 30; display: flex; flex-direction: column; gap: 8px; padding: 22px 16px; margin: 14px 0 14px 14px; border-radius: var(--radius); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 18px; } .brand__mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px -6px var(--accent); font-weight: 800; color: var(--on-accent); } .brand__name { font-weight: 700; letter-spacing: 0.3px; } .brand__sub { font-size: 11px; color: var(--text-2); } .nav { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .nav__group { margin-top: 14px; } .nav__title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-2); padding: 0 12px 6px; } .nav__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-1); font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: background 0.18s, color 0.18s, border-color 0.18s; } .nav__link svg { width: 18px; height: 18px; opacity: 0.85; flex: none; } .nav__link:hover { background: var(--glass-bg-strong); color: var(--text-0); } .nav__link.is-active { color: var(--text-0); background: var(--accent-soft); border-color: var(--accent-border); } .nav__link.is-active svg { opacity: 1; color: var(--accent); } .sidebar__foot { margin-top: auto; } .nav__link--btn { width: 100%; cursor: pointer; background: var(--surface-inset); font: inherit; text-align: left; } /* ---------- Main ---------- */ .main { display: flex; flex-direction: column; min-width: 0; padding: 14px 24px 36px 18px; } /* ---------- Topbar ---------- */ .topbar { position: sticky; top: 14px; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 9px 14px; margin-bottom: 20px; background: var(--topbar-bg); } .topbar__title { min-width: 0; } .topbar__title h1 { margin: 0; font-size: 16px; font-weight: 650; } .topbar__title p { margin: 1px 0 0; font-size: 12px; color: var(--text-2); } /* Command-palette trigger (looks like a search field, opens the Ctrl+K palette) */ .topbar__search { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 11px; border-radius: var(--radius-sm); background: var(--surface-inset); border: 1px solid var(--glass-border); color: var(--text-2); min-width: 230px; cursor: pointer; font: inherit; transition: background 0.18s, border-color 0.18s, color 0.18s; } .topbar__search:hover { background: var(--glass-bg-strong); border-color: var(--glass-border-strong); color: var(--text-1); } .topbar__search svg { width: 16px; height: 16px; flex: none; } .topbar__search > span { flex: 1; text-align: left; font-size: 13px; } .kbd { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--text-2); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 6px; padding: 3px 6px; } .icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-inset); border: 1px solid var(--glass-border); color: var(--text-1); cursor: pointer; transition: background 0.18s, color 0.18s; } .icon-btn:hover { background: var(--glass-bg-strong); color: var(--text-0); } .icon-btn svg { width: 17px; height: 17px; } /* Mobile nav trigger (hamburger) — shown only when the sidebar collapses */ .nav-toggle { display: none; margin-right: 2px; } /* Off-canvas drawer backdrop — inert until the drawer opens on small screens */ .nav-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(5, 8, 15, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } /* Theme toggle: show only the icon matching the current theme. */ .theme-toggle .theme-toggle__sun { display: none; } .theme-toggle .theme-toggle__moon { display: block; } [data-theme="light"] .theme-toggle .theme-toggle__sun { display: block; } [data-theme="light"] .theme-toggle .theme-toggle__moon { display: none; } .dot { position: absolute; transform: translate(11px, -9px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px var(--bg-0); } .avatar { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--glass-border); } .avatar__img { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); } .avatar__meta { line-height: 1.1; } .avatar__name { font-size: 13px; font-weight: 600; } .avatar__role { font-size: 11px; color: var(--text-2); text-transform: capitalize; } /* ---------- Command palette (Ctrl+K) ---------- */ .palette { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgba(5, 8, 15, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; /* Keep the panel visible through the fade-out, then hide; on open visibility flips instantly so the search field is immediately focusable. */ transition: opacity 0.16s ease, visibility 0s linear 0.16s; } .palette.is-open { opacity: 1; visibility: visible; transition: opacity 0.16s ease, visibility 0s linear 0s; } .palette__panel { width: min(620px, calc(100vw - 32px)); max-height: 64vh; display: flex; flex-direction: column; background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: var(--radius); backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); box-shadow: var(--shadow); transform: translateY(-8px) scale(0.98); transition: transform 0.16s ease; } .palette.is-open .palette__panel { transform: translateY(0) scale(1); } .palette__search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--glass-border); } .palette__search svg { width: 18px; height: 18px; color: var(--text-2); flex: none; } .palette__search input { flex: 1; border: 0; background: transparent; color: var(--text-0); outline: none; font-size: 15px; font-family: inherit; } .palette__list { overflow-y: auto; padding: 8px; } .palette__group-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-2); padding: 10px 12px 6px; } .palette__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid transparent; color: var(--text-1); font: inherit; text-align: left; text-decoration: none; } .palette__item svg { width: 18px; height: 18px; opacity: 0.85; flex: none; } .palette__item-label { flex: 1; font-size: 14px; } .palette__item-group { font-size: 11.5px; color: var(--text-2); } .palette__item.is-active { background: var(--accent-soft); border-color: rgba(108, 140, 255, 0.28); color: var(--text-0); } .palette__item.is-active svg { opacity: 1; color: var(--accent); } .palette__empty { padding: 24px 16px; text-align: center; font-size: 13.5px; color: var(--text-2); } /* User result rows inside the palette (live search) */ .palette__item--user { text-decoration: none; } .palette__uavatar { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 650; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(108, 140, 255, 0.28); } .palette__usub { font-size: 11.5px; color: var(--text-2); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Generic media detail modal — full-screen stage with a metadata sidebar */ .modal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 8, 15, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; } .modal.is-open { opacity: 1; visibility: visible; } .modal__panel { position: relative; display: grid; grid-template-columns: 360px 1fr; width: min(1680px, calc(100vw - 32px)); height: min(1000px, calc(100vh - 32px)); background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transform: translateY(-8px) scale(0.98); transition: transform 0.18s ease; } .modal.is-open .modal__panel { transform: translateY(0) scale(1); } .modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(5, 8, 15, 0.45); color: #fff; transition: background 0.14s ease; } .modal__close:hover { background: rgba(5, 8, 15, 0.7); } .modal__close svg { width: 18px; height: 18px; } /* Visionneuse plein écran — agrandit avatar / couverture à leur taille réelle */ .imgview { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(5, 8, 15, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; } .imgview.is-open { opacity: 1; visibility: visible; } .imgview__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-out; border-radius: var(--radius-sm); box-shadow: var(--shadow); transform: scale(0.97); transition: transform 0.18s ease; } .imgview.is-open .imgview__img { transform: scale(1); } .imgview__close { position: fixed; top: 18px; right: 18px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(5, 8, 15, 0.55); color: #fff; transition: background 0.14s ease; } .imgview__close:hover { background: rgba(5, 8, 15, 0.8); } .imgview__close svg { width: 20px; height: 20px; } /* Médias de profil agrandissables au clic */ [data-user-avatar] img, [data-user-cover] img { cursor: zoom-in; } /* Sidebar (left) — metadata */ .modal__sidebar { display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: var(--glass-bg); border-right: 1px solid var(--glass-border); } .modal__head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; } .modal__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-0); line-height: 1.35; word-break: break-word; } .modal__meta { margin: 0; display: flex; flex-direction: column; gap: 1px; } .modal__row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--glass-border); font-size: 13.5px; } /* `display: flex` above beats the UA `[hidden]` rule, so hidden rows would stay visible (keeping the previous media's text) — restore the hide. */ .modal__row[hidden] { display: none; } .modal__row dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-2); font-weight: 600; } .modal__row dd { margin: 0; color: var(--text-0); font-weight: 550; } .modal__country { display: flex; align-items: center; gap: 8px; } .modal__flag { width: 22px; height: 16px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--glass-border); } .modal__row code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--text-0); background: var(--code-bg); padding: 3px 8px; border-radius: 6px; word-break: break-all; } .modal__row--map { margin-top: auto; } .modal__map { width: 100%; height: 160px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--glass-border); } .modal__coords { display: block; margin-top: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--text-2); } .modal__map .maplibregl-ctrl-attrib { font-size: 9px; } /* Enriched sidebar blocks (loaded from /api/media/{hex}) */ .modal__badges { display: flex; flex-wrap: wrap; gap: 6px; } .badge--flag { background: rgba(239, 68, 68, 0.16); color: #f87171; } .modal__author { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .modal__avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--glass-border); } .modal__author-name { font-size: 13.5px; font-weight: 600; color: var(--text-0); text-decoration: none; cursor: pointer; } .modal__author-name:hover { text-decoration: underline; } .modal__verified { width: 16px; height: 16px; flex: none; color: var(--brand, #6366f1); } .modal__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; padding: 12px 0; border-top: 1px solid var(--glass-border); } .modal__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .modal__stat-val { font-size: 16px; font-weight: 700; color: var(--text-0); } .modal__stat-cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-2); } .modal__row--text dd { line-height: 1.5; font-weight: 450; } .modal__desc-title { display: block; margin-bottom: 4px; color: var(--text-0); } .modal__tags { display: flex; flex-wrap: wrap; gap: 6px; } .modal__tag { font-size: 12px; font-weight: 550; color: var(--text-1); background: var(--code-bg); padding: 3px 9px; border-radius: 999px; } .modal.is-loading .modal__sidebar { cursor: progress; } .modal.is-loading .modal__head::after { content: ""; position: absolute; bottom: -8px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brand, #6366f1), transparent); animation: modalLoad 1.1s ease-in-out infinite; } @keyframes modalLoad { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Stage (right) — image on top of its decoded blurhash */ .modal__stage { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0b0e16; } .modal__blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: blur(8px) saturate(1.2); } .modal__img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity 0.3s ease; } .modal__img.is-loaded { opacity: 1; } .modal__stage-empty { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; padding: 8px 14px; border-radius: 999px; background: rgba(5, 8, 15, 0.5); } @media (max-width: 760px) { .modal { padding: 0; } .modal__panel { grid-template-columns: 1fr; grid-template-rows: 1fr auto; width: 100vw; height: 100vh; border-radius: 0; } .modal__sidebar { grid-row: 2; border-right: 0; border-top: 1px solid var(--glass-border); max-height: 45vh; } .modal__stage { grid-row: 1; } } /* Clickable recent media rows (open the detail modal) */ .recent__row--clickable { cursor: pointer; border-radius: var(--radius-sm); margin: -6px -8px; padding: 6px 8px; transition: background 0.14s ease; } .recent__row--clickable:hover { background: var(--glass-bg-strong); } .recent__row--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ---------- Grid & cards ---------- */ .grid { display: grid; gap: 18px; } .grid--kpi { grid-template-columns: repeat(4, 1fr); } .grid--split { grid-template-columns: 2fr 1fr; margin-top: 18px; } .grid--even { grid-template-columns: 1fr 1fr; } .card { padding: 20px; } .card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card__head h2 { margin: 0; font-size: 14.5px; font-weight: 650; } .card__head a { font-size: 12.5px; color: var(--accent); } /* KPI */ .kpi { padding: 20px; } .kpi__top { display: flex; align-items: center; justify-content: space-between; } .kpi__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(108, 140, 255, 0.22); } .kpi__icon svg { width: 20px; height: 20px; } .kpi__value { font-size: 28px; font-weight: 720; margin: 16px 0 2px; letter-spacing: -0.5px; } .kpi__label { font-size: 13px; color: var(--text-1); } .kpi__delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; } .kpi__delta.up { color: var(--ok); } .kpi__delta.down { color: var(--danger); } .kpi__delta.flat { color: var(--text-2); } /* Health list — état des systèmes */ .health { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .health__row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--surface-inset); border: 1px solid var(--glass-border); font-size: 13px; } .health__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .health__dot--ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(54, 211, 153, 0.16); } .health__dot--down { background: var(--danger-fg); box-shadow: 0 0 0 4px var(--danger-soft); } .health__name { color: var(--text-0); font-weight: 600; } .health__badge { font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; color: var(--warn); background: rgba(245, 196, 81, 0.14); } .health__meta { margin-left: auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .health__meta--err { color: var(--danger-fg); } /* Health status pill (section header) */ .health-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 650; } .health-pill__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; } .health-pill--ok { color: var(--ok); background: var(--ok-soft); } .health-pill--warn { color: var(--warn); background: rgba(245, 196, 81, 0.14); } .health-pill--down { color: var(--danger-fg); background: var(--danger-soft); } .health-pill--unknown { color: var(--text-2); background: rgba(111, 122, 144, 0.14); } /* API ping banner */ .health-api { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; } .health-api .health__dot { width: 11px; height: 11px; } .health__dot--unknown { background: var(--text-2); box-shadow: 0 0 0 4px rgba(111, 122, 144, 0.16); } .health-api__body { display: flex; flex-direction: column; gap: 2px; } .health-api__name { font-size: 14px; font-weight: 700; color: var(--text-0); } .health-api__state { font-size: 12.5px; } .health-api__state.ok { color: var(--ok); } .health-api__state.down { color: var(--danger-fg); } .health-api__version { margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; font-weight: 650; color: var(--text-1); padding: 4px 11px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--glass-border); } .health-api__version:empty { display: none; } /* Audit table */ .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-2); font-weight: 600; padding: 0 12px 12px; } .table td { padding: 12px; font-size: 13px; color: var(--text-1); border-top: 1px solid var(--glass-border); } .table td.actor { color: var(--text-0); font-weight: 600; } .table code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--text-0); background: var(--code-bg); padding: 2px 7px; border-radius: 6px; } .badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; } .badge--ok { color: var(--ok); background: var(--ok-soft); } .badge--muted { color: var(--text-2); background: rgba(111, 122, 144, 0.14); } /* Skeleton loaders */ .skeleton { display: inline-block; border-radius: 6px; background: linear-gradient(100deg, var(--surface-inset) 30%, var(--glass-bg-strong) 50%, var(--surface-inset) 70%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; } .skeleton--text { height: 13px; vertical-align: middle; } .chart__loader { width: 100%; height: 180px; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* Chart — 30-day registrations curve */ .muted { color: var(--text-2); font-size: 13px; } .legend { display: inline-flex; gap: 16px; } .legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-1); } .legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .legend__dot--reg { background: var(--accent); } .legend__dot--cnf { background: var(--ok); } .chart { position: relative; height: 220px; margin-top: 6px; } .chart canvas { display: block; } .chart__loader { position: absolute; inset: 0; width: 100%; height: 100%; } .chart__foot { margin: 12px 0 0; } /* Month on month */ .mom { display: flex; flex-direction: column; gap: 14px; } .mom__row { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-inset); border: 1px solid var(--glass-border); } .mom__head { display: flex; align-items: center; justify-content: space-between; } .mom__head .kpi__delta { margin-top: 0; } .mom__label { font-size: 13.5px; font-weight: 600; color: var(--text-0); } .mom__values { display: flex; gap: 24px; margin-top: 12px; } .mom__num { display: block; font-size: 22px; font-weight: 750; color: var(--text-0); line-height: 1.1; } .mom__cap { font-size: 11px; color: var(--text-2); } .mom__prev .mom__num { color: var(--text-1); } /* Section headers (dashboard groups) */ .section-head { display: flex; align-items: center; gap: 10px; margin: 26px 2px 14px; } .section-head:first-child { margin-top: 4px; } .section-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text-0); } .section-head__icon { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .section-head__icon svg { width: 17px; height: 17px; } /* Media status badges */ .badge--published { color: var(--ok); background: var(--ok-soft); } .badge--pending { color: var(--text-2); background: rgba(111, 122, 144, 0.14); } .badge--processing { color: var(--brand, #6366f1); background: rgba(99, 102, 241, 0.14); } .badge--rejected { color: var(--danger-fg); background: var(--danger-soft); } .badge--failed { color: var(--danger-fg); background: var(--danger-soft); } /* Top countries ranking */ .ranking { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ranking__row { display: flex; align-items: center; gap: 12px; font-size: 13px; } .ranking__pos { width: 18px; color: var(--text-2); font-weight: 700; font-size: 12px; flex: none; } .ranking__flag { width: 26px; height: 19px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px var(--glass-border); } .ranking__name { color: var(--text-0); font-weight: 600; flex: none; min-width: 120px; } .ranking__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; } .ranking__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .ranking__count { color: var(--text-1); font-weight: 650; flex: none; min-width: 28px; text-align: right; } /* Leaderboard (pilotage) */ .lb { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; } .lb__row { border-bottom: 1px solid var(--glass-border); } .lb__row:last-child { border-bottom: 0; } .lb__link { display: flex; align-items: center; gap: 14px; padding: 10px 6px; color: inherit; text-decoration: none; border-radius: 10px; transition: background 0.15s ease; } a.lb__link:hover { background: var(--surface-inset); } .lb__rank { flex: none; width: 30px; text-align: center; font-weight: 800; font-size: 14px; color: var(--text-2); } .lb__rank--gold { color: #f4c552; } .lb__rank--silver { color: #b8c0d0; } .lb__rank--bronze { color: #d08c54; } .lb__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lb__name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb__verified { width: 15px; height: 15px; flex: none; color: var(--accent); } .lb__handle { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb__badge { flex: none; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 3px 8px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--glass-border); } .lb__value { flex: none; min-width: 64px; text-align: right; font-size: 15px; font-weight: 800; color: var(--accent); } .lb__foot { margin-top: 16px; display: flex; justify-content: center; } @media (max-width: 560px) { .lb__badge { display: none; } } /* Level progress (user info) */ .ulevel { display: flex; flex-direction: column; gap: 5px; min-width: 140px; } .ulevel__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ulevel__pct { color: var(--text-1); font-weight: 650; font-size: 12px; } .ulevel__bar { height: 6px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; } .ulevel__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; } /* Recent media list */ .recent { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .recent__row { display: flex; align-items: center; gap: 12px; } .recent__thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none; object-fit: cover; background: var(--surface-inset); border: 1px solid var(--glass-border); } .recent__thumb--empty { display: inline-block; } .recent__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .recent__name { font-size: 13.5px; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent__meta { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 5px; } .recent__flag { width: 16px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px var(--glass-border); flex: none; } /* Page Médias : galerie de vignettes pleine largeur pour les derniers médias. */ .gallery { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .gallery--empty { display: block; } .gallery__tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--surface-inset); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .gallery__tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } .gallery__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .gallery__tile--skeleton { cursor: default; } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__img--empty { background: var(--surface-inset); } .gallery__badge { position: absolute; top: 8px; right: 8px; } .gallery__overlay { position: absolute; inset: auto 0 0 0; padding: 26px 10px 9px; display: flex; flex-direction: column; gap: 1px; background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0)); pointer-events: none; } .gallery__name { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery__meta { color: rgba(255, 255, 255, .82); font-size: 11.5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery__flag { width: 16px; height: 12px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); } /* World map */ .worldmap { position: relative; height: 300px; margin-top: 6px; } .worldmap__loader { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-sm); } .worldmap__el { width: 100%; height: 100%; } .worldmap .jvm-tooltip { background: var(--glass-bg-strong); color: var(--text-0); border: 1px solid var(--glass-border); border-radius: 6px; font-size: 12px; padding: 4px 8px; box-shadow: var(--shadow, 0 8px 24px -8px rgba(0,0,0,0.4)); } /* ---------- Explorer (media map) ---------- */ .explore__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .explore__count { font-size: 13px; font-weight: 600; color: var(--text-0); background: var(--surface-inset); border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px 12px; white-space: nowrap; } .explore__map { position: relative; height: 60vh; min-height: 420px; margin-top: 6px; border-radius: var(--radius-sm); overflow: hidden; } .explore__loader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .explore__map .maplibregl-ctrl-attrib { display: none; } .explore__hint { margin-top: 12px; font-size: 12px; } /* Desktop : la carte occupe toute la hauteur restante sous la topbar. */ @media (min-width: 861px) { [data-explore] { flex: 1; display: flex; flex-direction: column; min-height: 0; } [data-explore] .explore { flex: 1; display: flex; flex-direction: column; min-height: 0; } [data-explore] .explore__map { flex: 1; height: auto; min-height: 0; } } .map-pin { width: 42px; height: 42px; padding: 0; cursor: pointer; background: var(--surface-inset); border: 2px solid var(--pin, var(--accent)); border-radius: 8px; overflow: hidden; display: block; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.12s ease, box-shadow 0.12s ease; } .map-pin img { width: 100%; height: 100%; object-fit: cover; display: block; } .map-pin--empty { background: var(--pin, var(--accent)); } .map-pin:hover { transform: scale(1.18); z-index: 3; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .map-cluster { position: relative; width: 46px; height: 46px; padding: 0; cursor: pointer; border: 2px solid #fff; border-radius: 50%; overflow: hidden; background: var(--accent) center / cover no-repeat; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: transform 0.12s ease; } .map-cluster:hover { transform: scale(1.12); z-index: 3; } .map-cluster__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; background: rgba(17, 24, 39, 0.55); } /* ---------- Géographie page ---------- */ .geo__readonly { display: flex; align-items: center; gap: 9px; padding: 10px 13px; margin-bottom: 18px; font-size: 12.5px; line-height: 1.45; border-radius: var(--radius-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); } .geo__readonly svg { flex: none; width: 16px; height: 16px; color: var(--accent); } .geo__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .geo__tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--text-1); cursor: pointer; background: transparent; border: 1px solid var(--glass-border); border-radius: 999px; transition: color 0.16s, border-color 0.16s, background 0.16s; } .geo__tab:hover { color: var(--text-0); border-color: var(--accent); } .geo__tab.is-active { color: var(--on-accent); border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .geo__tab-icon { display: inline-flex; } .geo__tab-icon svg { width: 15px; height: 15px; } .geo__toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .geo__search { flex: 1 1 240px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--glass-border); transition: border-color 0.18s, background 0.18s; } .geo__search:focus-within { border-color: var(--accent); background: var(--input-bg-strong); } .geo__search svg { flex: none; width: 16px; height: 16px; color: var(--text-2); } .geo__search input { flex: 1; padding: 11px 0; font-size: 14px; color: var(--text-0); background: transparent; border: 0; outline: none; } .geo__filter { flex: 0 0 150px; padding: 11px 13px; font-size: 14px; color: var(--text-0); text-transform: uppercase; border-radius: var(--radius-sm); outline: none; background: var(--input-bg); border: 1px solid var(--glass-border); transition: border-color 0.18s, background 0.18s; } .geo__filter:focus { border-color: var(--accent); background: var(--input-bg-strong); } .geo__list { list-style: none; margin: 0; padding: 0; } .geo__row { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--glass-border); } .geo__row:last-child { border-bottom: 0; } .geo__row--skel { gap: 14px; } .geo__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .geo__code { flex: none; min-width: 44px; text-align: center; padding: 3px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--accent); background: var(--accent-soft); border-radius: 6px; } .geo__name { font-size: 14px; font-weight: 600; color: var(--text-0); } .geo__sub { font-size: 12.5px; } .geo__coords { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; } .geo__empty { padding: 26px 4px; text-align: center; } .geo__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .geo__foot .btn-ghost { width: auto; margin-top: 0; } /* ---------- Users page ---------- */ /* Account badges */ .badge--verified { color: var(--accent); background: var(--accent-soft); } .badge--active { color: var(--ok); background: var(--ok-soft); } .badge--unconfirmed { color: var(--warn); background: rgba(234, 179, 8, 0.14); } .badge--banned { color: var(--danger-fg); background: var(--danger-soft); } .badge--deleted { color: var(--text-2); background: rgba(111, 122, 144, 0.14); } /* Composition donut */ .donut { position: relative; height: 240px; margin-top: 6px; } .donut canvas { display: block; } .donut__loader { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; } .donut__center { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; display: flex; flex-direction: column; gap: 2px; } .donut__rate { font-size: 26px; font-weight: 760; color: var(--text-0); line-height: 1; letter-spacing: -0.5px; } .donut__cap { font-size: 11px; color: var(--text-2); } /* Indicator meters */ .meters { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .meter { display: flex; flex-direction: column; gap: 8px; } .meter__head { display: flex; align-items: center; justify-content: space-between; } .meter__label { font-size: 13px; font-weight: 600; color: var(--text-0); } .meter__val { font-size: 12px; color: var(--text-2); font-weight: 600; } .meter__bar { height: 7px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; } .meter__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .meter__bar--accent { background: var(--accent); } .meter__bar--danger { background: var(--danger); } .meter__bar--muted { background: var(--text-2); } /* Recent sign-ups list */ .ulist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .urow { border-bottom: 1px solid var(--glass-border); } .urow:last-child { border-bottom: 0; } .urow__link { display: flex; align-items: center; gap: 14px; padding: 13px 14px; color: inherit; text-decoration: none; border-radius: 12px; transition: background 0.16s ease; } a.urow__link { cursor: pointer; } a.urow__link:hover { background: var(--surface-inset); } .uavatar { position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--glass-border); } .uavatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .uinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .uname { font-size: 14px; font-weight: 650; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .umeta { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .urow__aside { flex: none; display: flex; align-items: center; gap: 24px; } .ustats { display: flex; align-items: center; font-size: 12px; color: var(--text-2); } .ustat { position: relative; white-space: nowrap; padding: 0 14px; } .ustat:first-child { padding-left: 0; } .ustat:last-child { padding-right: 0; } .ustat + .ustat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: var(--glass-border); } .ustat b { color: var(--text-0); font-weight: 700; } .ujoined { font-size: 12px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .urow__aside .badge { min-width: 96px; justify-content: center; } @media (max-width: 860px) { .urow__aside { gap: 14px; } .ustats, .ujoined { display: none; } } .ulist__foot { display: flex; align-items: center; justify-content: center; margin-top: 16px; min-height: 20px; } .btn-ghost { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-1); background: var(--surface-inset); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 9px 18px; transition: color 0.16s ease, border-color 0.16s ease; } .btn-ghost:hover { color: var(--text-0); border-color: var(--accent); } /* ---------- Single-user detail page ---------- */ .section-head__back { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--text-1); background: var(--surface-inset); border: 1px solid var(--glass-border); transition: color 0.16s ease, border-color 0.16s ease; } .section-head__back:hover { color: var(--text-0); border-color: var(--accent); } .section-head__back svg { width: 17px; height: 17px; } .uhead { position: relative; display: flex; flex-direction: column; gap: 18px; } .uhead__body { display: flex; align-items: center; gap: 18px; } .uavatar-wrap { position: relative; flex: none; } /* Pastille « compte vérifié » accolée à l'avatar */ .uverif { position: absolute; top: -3px; right: -3px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--bg-1); box-shadow: 0 1px 4px rgba(5, 8, 15, 0.35); } .uverif[hidden] { display: none; } .uverif svg { width: 13px; height: 13px; stroke-width: 3; } /* Avatar / cover edit controls */ .uimg-ctl { display: flex; gap: 6px; } .uimg-ctl--cover { position: absolute; top: 12px; right: 12px; z-index: 2; } .uimg-ctl--avatar { position: absolute; right: -6px; bottom: -6px; } .uimgbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 10px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-0); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: color 0.16s ease, border-color 0.16s ease; } .uimgbtn:hover { border-color: var(--accent); } .uimgbtn svg { width: 15px; height: 15px; } .uimgbtn--icon { padding: 6px; border-radius: 50%; } .uimgbtn--danger:hover { color: var(--danger); border-color: var(--danger); } .uimg-ctl.is-busy { opacity: 0.55; pointer-events: none; } /* Overlay de chargement pendant l'upload/retrait d'avatar ou de couverture */ .uavatar-wrap.is-busy::before, .ucover.is-busy::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: rgba(5, 8, 15, 0.5); } .uavatar-wrap.is-busy::after, .ucover.is-busy::after { content: ""; position: absolute; z-index: 4; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: imgUpload 0.7s linear infinite; } .uavatar-wrap.is-busy::after { width: 20px; height: 20px; margin: -10px 0 0 -10px; } @keyframes imgUpload { to { transform: rotate(360deg); } } .ucover { position: relative; margin: -4px -4px 0; border-radius: var(--radius-sm); overflow: hidden; height: 160px; background: var(--surface-inset); border: 1px solid var(--glass-border); } .ucover img { width: 100%; height: 100%; object-fit: cover; display: block; } .uhead__avatar { width: 64px; height: 64px; font-size: 22px; overflow: hidden; } .uhead__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .uhead__id { min-width: 0; flex: 1; } .uhead__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .uhead__name { font-size: 20px; font-weight: 740; margin: 0; color: var(--text-0); letter-spacing: -0.4px; } .uhead__meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; } .uhead__handle { font-size: 13px; color: var(--accent); font-weight: 600; } .uhead__email { font-size: 13px; color: var(--text-2); } .ufields { margin: 0; display: flex; flex-direction: column; gap: 0; } .ufield { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--glass-border); } .ufield:last-child { border-bottom: 0; } .ufield dt { flex: none; width: 110px; font-size: 12.5px; color: var(--text-2); font-weight: 600; margin: 0; } .ufield dd { margin: 0; font-size: 13.5px; color: var(--text-0); min-width: 0; } .ustates { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .uqr { margin-top: 16px; display: flex; align-items: center; gap: 12px; } /* `display: flex` ci-dessus bat la règle UA `[hidden]` : on rétablit le masquage. */ .uqr[hidden] { display: none; } .uqr__link { display: block; flex: none; width: 92px; height: 92px; padding: 6px; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); } .uqr__img { display: block; width: 100%; height: 100%; } .uqr__label { font-size: 12px; } .ustate { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--glass-border); } .ustate__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-2); } .ustate--on { color: var(--text-0); } .ustate--on .ustate__dot { background: var(--ok); } .ustate--off { color: var(--text-2); } .uactions { display: flex; flex-direction: column; gap: 12px; } .uact { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-align: center; } .uact[hidden] { display: none; } .uact svg { width: 16px; height: 16px; flex: none; } .uact:disabled { opacity: 0.45; cursor: not-allowed; } .uact:disabled:hover { color: var(--text-1); border-color: var(--glass-border); } .uact--danger { color: var(--danger-fg); border-color: var(--danger-border); } .uact--danger:hover:not(:disabled) { color: var(--danger-fg); border-color: var(--danger); } .uban__until, .uban__reason { font: inherit; font-size: 13px; color: var(--text-0); width: 100%; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 8px 12px; outline: none; } .uban__until:focus, .uban__reason:focus { border-color: var(--accent); } .uactions__note { margin: 2px 0 0; font-size: 12px; } /* Bandeau « compte banni » en tête de la carte Administration. */ .uban-notice { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: var(--radius-sm); } .uban-notice[hidden] { display: none; } .uban-notice__icon { color: var(--danger); flex: none; line-height: 0; margin-top: 1px; } .uban-notice__icon svg { width: 18px; height: 18px; } .uban-notice__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .uban-notice__title { font-size: 13.5px; color: var(--danger-fg); } .uban-notice__countdown { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .uban-notice__countdown[hidden] { display: none; } .uban-notice__remaining { font-size: 16px; font-weight: 700; color: var(--danger-fg); } .uban-notice__until { font-size: 12px; } .uban-notice__reason { margin: 2px 0 0; font-size: 12.5px; color: var(--text-1); white-space: pre-wrap; word-break: break-word; } .uban-notice__reason[hidden] { display: none; } /* Modale de bannissement — réutilise le voile `.modal`, panneau compact. */ .modal--form { z-index: 120; } .banmodal { position: relative; width: min(440px, calc(100vw - 32px)); background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; transform: translateY(-8px) scale(0.98); transition: transform 0.18s ease; } .modal--form.is-open .banmodal { transform: translateY(0) scale(1); } .banmodal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-right: 32px; } .banmodal__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); } .banmodal__icon svg { width: 19px; height: 19px; } .banmodal__title { margin: 0; font-size: 16px; } .banmodal__sub { margin: 2px 0 0; font-size: 12.5px; } .banmodal__body { display: flex; flex-direction: column; gap: 8px; } .banmodal__label { font-size: 12px; color: var(--text-1); margin-top: 6px; } .banmodal__hint { margin: 2px 0 0; font-size: 12px; } .banpresets { display: flex; flex-wrap: wrap; gap: 8px; } .banpreset { font: inherit; font-size: 13px; cursor: pointer; padding: 7px 14px; border-radius: 999px; color: var(--text-1); background: var(--input-bg); border: 1px solid var(--glass-border); transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease; } .banpreset:hover { color: var(--text-0); border-color: var(--accent-border); } .banpreset.is-active { color: #fff; background: var(--accent); border-color: var(--accent); } .banpreset--permanent.is-active { color: var(--danger-fg); background: var(--danger-soft); border-color: var(--danger); } .banmodal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .banmodal__foot .btn, .banmodal__foot .btn-ghost { width: auto; } .utimeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .utl { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--glass-border); font-size: 13px; } .utl:last-child { border-bottom: 0; } .utl__label { color: var(--text-1); font-weight: 600; } .utl__value { color: var(--text-2); } /* Profile edit form */ .uform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .uform__field { margin-bottom: 14px; } .uform__field--full { grid-column: 1 / -1; } .uform__field textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 14px; color: var(--text-0); border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--glass-border); outline: none; resize: vertical; min-height: 84px; transition: border-color 0.18s, background 0.18s; } .uform__field textarea:focus { border-color: var(--accent); background: var(--input-bg-strong); } .uform__field.is-invalid input, .uform__field.is-invalid textarea { border-color: var(--danger); } .uform__err { margin: 6px 0 0; font-size: 12px; color: var(--danger); } .uform__foot { display: flex; justify-content: flex-end; margin-top: 4px; } .uform__submit { width: auto; margin-top: 0; padding: 11px 20px; } .uform__submit[disabled] { opacity: 0.55; cursor: not-allowed; } @media (max-width: 640px) { .uform__grid { grid-template-columns: 1fr; } } /* Tabs */ .tabs { display: flex; gap: 4px; margin: 18px 0 4px; border-bottom: 1px solid var(--glass-border); } .tab { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text-2); background: none; border: 0; padding: 11px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.16s ease, border-color 0.16s ease; } .tab:hover { color: var(--text-0); } .tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } .tabpanel { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; } .tabpanel[hidden] { display: none; } .tabpanel .grid--split { margin-top: 0; } /* Audit trail (user history tab) */ .audit { list-style: none; margin: 0; padding: 0; } .audit__row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--glass-border); } .audit__row:last-child { border-bottom: 0; } .audit__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .audit__actor { font-size: 13px; color: var(--text-1); font-weight: 600; } .audit__actor--system { color: var(--text-2); font-weight: 500; font-style: italic; } .audit__date { font-size: 12px; color: var(--text-2); margin-left: auto; } .audit__meta { display: flex; flex-direction: column; gap: 5px; } .audit__diff { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); } .audit__diff-label { color: var(--text-1); font-weight: 600; } .audit__from { color: var(--text-2); text-decoration: line-through; opacity: 0.8; } .audit__arrow { color: var(--text-2); } .audit__to { color: var(--text-0); font-weight: 600; } .audit__reason { font-size: 12.5px; color: var(--text-1); padding: 7px 11px; border-radius: 9px; background: var(--surface-inset); border: 1px solid var(--glass-border); } .audit__reason b { color: var(--text-2); font-weight: 600; } .audit__ip { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } .audit__empty { padding: 40px 0; text-align: center; } .audit__foot { display: flex; justify-content: center; margin-top: 16px; } /* Comments (user moderation tab) */ .comments { list-style: none; margin: 0; padding: 0; } .comment { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--glass-border); } .comment:last-child { border-bottom: 0; } .comment__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .comment__body { margin: 0; font-size: 13.5px; color: var(--text-0); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .comment--deleted .comment__body { color: var(--text-2); text-decoration: line-through; opacity: 0.75; } .comment__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .comment__date { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .comment__edited { font-size: 11.5px; color: var(--text-2); font-style: italic; } .comment__tag { font-size: 11px; color: var(--text-2); padding: 2px 8px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--glass-border); } .comment__actions { flex: 0 0 auto; } .comment__btn { padding: 6px 12px; font-size: 12.5px; } .comment__btn--danger { color: var(--danger); } .comments__empty { padding: 40px 0; text-align: center; } .comments__foot { display: flex; justify-content: center; margin-top: 16px; } /* Media grid (user gallery tab) */ .umedia__empty { padding: 40px 0; text-align: center; } .mgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .mcard { display: flex; flex-direction: column; gap: 8px; cursor: pointer; padding: 0; background: none; border: 0; font: inherit; text-align: left; } .mcard__thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--surface-inset); border: 1px solid var(--glass-border); transition: border-color 0.16s ease, transform 0.16s ease; } .mcard:hover .mcard__thumb { border-color: var(--accent); transform: translateY(-2px); } .mcard__img { width: 100%; height: 100%; object-fit: cover; display: block; } .mcard__noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 28px; font-weight: 700; color: var(--text-2); } .mcard__status { position: absolute; left: 8px; top: 8px; backdrop-filter: blur(6px); } .mcard__name { font-size: 12.5px; color: var(--text-1); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 680px) { .uhead { flex-direction: column; text-align: center; } .uhead__top, .uhead__meta { justify-content: center; } } /* Placeholder */ .placeholder { margin-top: 8px; padding: 56px 32px; text-align: center; } .placeholder__icon { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(108, 140, 255, 0.22); } .placeholder h2 { margin: 0 0 8px; font-size: 20px; } .placeholder p { margin: 0 auto; max-width: 460px; color: var(--text-1); font-size: 14px; line-height: 1.6; } /* ---------- Maintenance / ops ---------- */ .ops { margin-top: 8px; padding: 22px 24px; } .ops__head { display: flex; align-items: center; gap: 18px; } .ops__icon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(108, 140, 255, 0.22); } .ops__icon svg { width: 22px; height: 22px; } .ops__intro { flex: 1; min-width: 0; } .ops__intro h2 { margin: 0 0 4px; font-size: 16px; color: var(--text-0); } .ops__intro p { margin: 0; font-size: 13px; line-height: 1.55; } .ops .btn { width: auto; margin-top: 0; flex: none; display: inline-flex; align-items: center; gap: 8px; } .ops .btn svg { width: 16px; height: 16px; } .ops .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .ops__progress { margin-top: 20px; } .ops__bar { height: 8px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; } .ops__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.3s ease; } .ops__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; } .ops__meta [data-reindex-status] { font-weight: 600; color: var(--text-0); } .ops .alert { margin: 16px 0 0; } .ops .alert[hidden] { display: none; } /* ---------- Login ---------- */ .login { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login__card { width: 100%; max-width: 400px; padding: 34px 32px; } .login__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .login__card h1 { font-size: 20px; margin: 0 0 4px; } .login__card .sub { color: var(--text-2); font-size: 13px; margin: 0 0 24px; } .alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 18px; } .alert--error { color: var(--danger-fg); background: var(--danger-soft); border: 1px solid var(--danger-border); } .alert--ok { color: var(--ok); background: var(--ok-soft); border: 1px solid var(--glass-border); } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12.5px; color: var(--text-1); margin-bottom: 7px; } .field input { width: 100%; padding: 12px 14px; font-size: 14px; color: var(--text-0); border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--glass-border); outline: none; transition: border-color 0.18s, background 0.18s; } .field input:focus { border-color: var(--accent); background: var(--input-bg-strong); } .btn { width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 650; color: var(--on-accent); cursor: pointer; border: 0; border-radius: var(--radius-sm); margin-top: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 28px -10px var(--accent); transition: transform 0.12s, box-shadow 0.18s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -10px var(--accent); } .btn--danger { color: #fff; background: linear-gradient(135deg, var(--danger), #d6455c); box-shadow: 0 12px 28px -10px var(--danger); } .btn--danger:hover { box-shadow: 0 16px 34px -10px var(--danger); } /* ---------- Toasts ---------- */ .toasts { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 36px)); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-left-width: 3px; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text-0); font-size: 13px; opacity: 0; transform: translateX(16px); transition: opacity 0.22s ease, transform 0.22s ease; } .toast.is-in { opacity: 1; transform: translateX(0); } .toast.is-out { opacity: 0; transform: translateX(16px); } .toast--success { border-left-color: var(--ok); } .toast--error { border-left-color: var(--danger); } .toast--info { border-left-color: var(--accent); } .toast__icon { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; } .toast__icon svg { width: 14px; height: 14px; } .toast--success .toast__icon { color: var(--ok); background: var(--ok-soft); } .toast--error .toast__icon { color: var(--danger-fg); background: var(--danger-soft); } .toast--info .toast__icon { color: var(--accent); background: var(--accent-soft); } .toast__msg { flex: 1; line-height: 1.4; } .toast__close { flex: none; border: 0; background: transparent; cursor: pointer; color: var(--text-2); font-size: 18px; line-height: 1; padding: 0 2px; transition: color 0.16s; } .toast__close:hover { color: var(--text-0); } @media (max-width: 560px) { .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .grid--kpi { grid-template-columns: repeat(2, 1fr); } .grid--split { grid-template-columns: 1fr; } .grid--even { grid-template-columns: 1fr; } } /* Tablet / mobile: sidebar collapses into an off-canvas drawer */ @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .main { padding: 14px; } .nav-toggle { display: grid; } .sidebar { position: fixed; top: 0; left: 0; width: min(296px, 86vw); height: 100vh; margin: 0; border-radius: 0; z-index: 60; transform: translateX(-100%); transition: transform 0.26s ease; } .sidebar.is-open { transform: none; } } @media (max-width: 680px) { .grid--kpi { grid-template-columns: 1fr; } .topbar { gap: 10px; padding: 9px 12px; } .topbar__title p { display: none; } .topbar__search { min-width: 0; padding: 7px; } .topbar__search > span, .topbar__search .kbd { display: none; } .avatar { padding: 4px; } .avatar__meta { display: none; } } /* Subtle entrance */ .fade-up { animation: fadeUp 0.5s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }