/* viewer.css — base zéro (dark/white + auto) */ /* Force le rendu natif des inputs/selects en dark */ :root{ color-scheme: dark; } /* Si tu as aussi un thème white forcé */ :root[data-theme="white"]{ color-scheme: light; } :root[data-theme="dark"]{ color-scheme: dark; } select, option{ background: var(--panel-2); color: var(--text); } /* ------------------------------------------------------------ */ /* ✅ Thème: - Auto : suit prefers-color-scheme - Forcé : / */ :root{ /* typographie */ --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif; /* rayons / ombres */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --shadow-1: 0 6px 18px rgba(0,0,0,.18); --shadow-2: 0 10px 30px rgba(0,0,0,.22); /* layout */ --maxw: 1400px; --gap: 12px; /* couleurs (defaults = dark, surchargées en light via media) */ --bg: #0b0d12; --panel: #101522; --panel-2: #0f1320; --line: rgba(255,255,255,.10); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.65); --muted-2: rgba(255,255,255,.50); --focus: rgba(105, 170, 255, .45); --btn: rgba(255,255,255,.08); --btn-h: rgba(255,255,255,.13); --btn-a: rgba(255,255,255,.18); --accent: #6aa6ff; --accent-2: #7ee3c3; /* badges */ --badge-bg: rgba(255,255,255,.08); --badge-bd: rgba(255,255,255,.12); --badge-tx: rgba(255,255,255,.85); } /* Auto → Light */ @media (prefers-color-scheme: light){ :root{ --bg: #f6f7fb; --panel: #ffffff; --panel-2: #f1f3fa; --line: rgba(16,24,40,.12); --text: rgba(10,14,20,.92); --muted: rgba(10,14,20,.62); --muted-2: rgba(10,14,20,.48); --focus: rgba(60, 120, 255, .35); --btn: rgba(10,14,20,.06); --btn-h: rgba(10,14,20,.10); --btn-a: rgba(10,14,20,.14); --badge-bg: rgba(10,14,20,.06); --badge-bd: rgba(10,14,20,.10); --badge-tx: rgba(10,14,20,.78); } } /* Forcer thème via viewer.js (data-theme) */ :root[data-theme="dark"]{ --bg: #0b0d12; --panel: #101522; --panel-2: #0f1320; --line: rgba(255,255,255,.10); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.65); --muted-2: rgba(255,255,255,.50); --focus: rgba(105, 170, 255, .45); --btn: rgba(255,255,255,.08); --btn-h: rgba(255,255,255,.13); --btn-a: rgba(255,255,255,.18); --badge-bg: rgba(255,255,255,.08); --badge-bd: rgba(255,255,255,.12); --badge-tx: rgba(255,255,255,.85); } :root[data-theme="white"]{ --bg: #f6f7fb; --panel: #ffffff; --panel-2: #f1f3fa; --line: rgba(16,24,40,.12); --text: rgba(10,14,20,.92); --muted: rgba(10,14,20,.62); --muted-2: rgba(10,14,20,.48); --focus: rgba(60, 120, 255, .35); --btn: rgba(10,14,20,.06); --btn-h: rgba(10,14,20,.10); --btn-a: rgba(10,14,20,.14); --badge-bg: rgba(10,14,20,.06); --badge-bd: rgba(10,14,20,.10); --badge-tx: rgba(10,14,20,.78); } /* ------------------------------------------------------------ */ /* Base */ *{ box-sizing: border-box; } html,body{ height: 100%; } body{ margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a{ color: inherit; text-decoration: none; } button, input, select{ font-family: inherit; color: inherit; } .hidden{ display:none !important; } :focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 10px; } /* ------------------------------------------------------------ */ /* Topbar */ .topbar{ position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--panel) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .top-title-row{ max-width: var(--maxw); margin: 0 auto; padding: 14px 14px 10px; } .top-title-row h1{ margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; color: var(--text); } /* viewer.js ajoute .top-title-flex + outils (total/cols/pageSize/theme) */ .top-title-flex{ display: flex; align-items: center; gap: 10px; } .top-title-tools{ margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* Actions */ .top-actions{ max-width: var(--maxw); margin: 0 auto; padding: 0 14px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* Search */ .search-wrap{ display: flex; align-items: center; gap: 10px; flex: 1 1 360px; min-width: 240px; } #search{ flex: 1 1 auto; min-width: 200px; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); } #search::placeholder{ color: var(--muted-2); } .total-inline{ white-space: nowrap; font-size: 13px; color: var(--muted); } .total-inline strong{ color: var(--text); } /* Selects + buttons */ select, button, .tags-btn{ height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--btn); cursor: pointer; transition: transform .05s ease, background .15s ease, border-color .15s ease; } select{ padding-right: 34px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } button:hover, .tags-btn:hover, select:hover{ background: var(--btn-h); } button:active, .tags-btn:active{ background: var(--btn-a); transform: translateY(1px); } /* Bouton tags (badge compteur) */ .tags-btn{ display: inline-flex; align-items: center; gap: 8px; } .tags-count{ display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 25%, var(--btn)); border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); font-size: 12px; font-weight: 700; } /* ------------------------------------------------------------ */ /* Hamburger (injecté par viewer.js) */ .hamburger-btn{ width: 40px; padding: 0; display: grid; place-items: center; } .ham-lines{ width: 18px; height: 12px; display: grid; gap: 3px; } .ham-lines span{ display: block; height: 2px; border-radius: 999px; background: var(--text); opacity: .85; } /* ------------------------------------------------------------ */ /* Main / Grid */ main{ max-width: var(--maxw); margin: 0 auto; padding: 14px; } .grid-wrap{ display: block; } #viewerAnnonceHost{ margin-bottom: 12px; } /* grid */ .grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--gap); align-items: stretch; } /* densité compacte quand cols >= 7 (viewer.js met data-density) */ .grid[data-density="compact"]{ gap: 10px; } .grid[data-density="compact"] .card{ border-radius: var(--r-md); } .grid[data-density="compact"] .name{ font-size: 13px; } /* empty */ .empty{ margin: 30px 0 10px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--muted); text-align: center; background: color-mix(in oklab, var(--panel) 65%, transparent); } /* ------------------------------------------------------------ */ /* Card */ .card{ display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: color-mix(in oklab, var(--panel) 94%, transparent); box-shadow: var(--shadow-1); transition: transform .10s ease, box-shadow .15s ease, border-color .15s ease; } .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); } .card-link{ cursor: pointer; } .thumb{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: color-mix(in oklab, var(--panel-2) 80%, transparent); } .thumb.is-fallback{ object-fit: contain; padding: 16px; opacity: .9; } .body{ padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 86px; } .name{ margin: 0; font-size: 14px; font-weight: 750; letter-spacing: .1px; color: var(--text); } /* clamp-2 */ .clamp-2{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* badges */ .badges-line{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .badges-line.one-line{ flex-wrap: nowrap; overflow: hidden; } .badge{ display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 1; background: var(--badge-bg); border: 1px solid var(--badge-bd); color: var(--badge-tx); white-space: nowrap; } .badge.cat{ background: color-mix(in oklab, var(--accent) 14%, var(--badge-bg)); border-color: color-mix(in oklab, var(--accent) 22%, var(--badge-bd)); } .badge.eng{ background: color-mix(in oklab, var(--accent-2) 14%, var(--badge-bg)); border-color: color-mix(in oklab, var(--accent-2) 22%, var(--badge-bd)); } .badge.status{ background: color-mix(in oklab, #ffd36a 16%, var(--badge-bg)); border-color: color-mix(in oklab, #ffd36a 24%, var(--badge-bd)); } /* ------------------------------------------------------------ */ /* Load more */ .load-more-wrap{ grid-column: 1 / -1; display: flex; justify-content: center; padding: 8px 0 2px; } .load-more-btn{ min-width: 280px; max-width: 100%; height: 40px; border-radius: 14px; background: color-mix(in oklab, var(--accent) 14%, var(--btn)); border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); font-weight: 750; } /* ------------------------------------------------------------ */ /* Tags popover */ .tag-popover{ position: fixed; z-index: 100; width: min(360px, calc(100vw - 20px)); max-height: min(420px, calc(100vh - 20px)); overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in oklab, var(--panel) 96%, transparent); box-shadow: var(--shadow-2); } .tag-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .tag-title{ font-weight: 800; letter-spacing: .2px; } .tag-clear{ height: 30px; padding: 0 10px; border-radius: 12px; background: var(--btn); border: 1px solid var(--line); font-size: 12px; } .tag-list{ padding: 8px; overflow: auto; max-height: 360px; } .tag-item{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; margin: 0; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; } .tag-item:hover{ background: var(--btn); border-color: var(--line); } .tag-item.active{ background: color-mix(in oklab, var(--accent) 16%, var(--btn)); border-color: color-mix(in oklab, var(--accent) 24%, var(--line)); } .tag-left{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .tag-check{ width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; border: 1px solid var(--line); background: color-mix(in oklab, var(--panel-2) 60%, transparent); opacity: .65; font-size: 12px; } .tag-item.active .tag-check{ opacity: 1; border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); background: color-mix(in oklab, var(--accent) 22%, var(--panel-2)); } .tag-name{ text-align: left; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------ */ /* Footer */ .viewer-footer{ margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in oklab, var(--panel) 90%, transparent); color: var(--muted); } .viewer-footer strong{ color: var(--text); } /* ------------------------------------------------------------ */ /* Responsive */ @media (max-width: 860px){ .top-actions{ padding-bottom: 12px; } .search-wrap{ flex: 1 1 100%; } select, button, .tags-btn{ flex: 1 1 160px; } } @media (max-width: 520px){ .top-title-row{ padding-top: 12px; } .top-title-row h1{ font-size: 16px; } main{ padding: 12px; } .grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }