/* ═══════════════════════════════════════════ Client Vault — Frontend Styles v3 Theme-independent & fully isolated ═══════════════════════════════════════════ */ /* Z-index tokens on :root — needed by elements portaled to (media popup, confirm overlay, edit modal, toasts). Duplicated here so var(--cvf-z-*) resolves outside .cv-vault-wrap. */ :root { --cvf-z-overlay: 99999; --cvf-z-modal: 100000; --cvf-z-notification: 100001; } /* Layout-shift prevention is handled in JS (cvLockScrollableAncestors) which works with ANY theme by locking ancestor heights during filtering. */ /* ───────────────────────────────────────────── THEME SYSTEM — 6 predefined palettes Active theme is set via .cv-theme-{name} on .cv-vault-wrap Default: navy (bleu marine) ───────────────────────────────────────────── */ /* Default / Navy (Bleu marine) */ /* v11.74.1 — .cv-login-wrap inclus : le formulaire de connexion (pré-auth) n'est PAS dans .cv-vault-wrap, donc les variables --cvf-* n'y étaient pas définies → tous les `var(--cvf-primary)` (fond du bouton, bordures, liens) tombaient à vide = bouton invisible et formulaire fade. On lui applique le jeu de variables par défaut (navy de marque). */ .cv-vault-wrap, .cv-vault-wrap.cv-theme-navy, .cv-login-wrap { --cvf-primary: #1e3a5f; --cvf-primary-light: #2a5298; --cvf-primary-rgb: 30,58,95; --cvf-accent: #e8913a; --cvf-accent-light: #f5a623; --cvf-success: #27ae60; --cvf-danger: #e74c3c; --cvf-bg: #f7f8fc; --cvf-card: #ffffff; --cvf-border: #e4e8ee; --cvf-text: #2c3e50; --cvf-text-muted: #5a6c7d; --cvf-radius: 12px; --cvf-shadow: 0 2px 16px rgba(0,0,0,0.05); --cvf-link: #1a56db; --cvf-tag-blue: #949494; --cvf-tag-blue-bg: #e8f0fe; --cvf-tag-green: #155724; --cvf-tag-green-bg: #d4edda; --cvf-tag-orange: #856404; --cvf-tag-orange-bg: #fff3cd; --cvf-tag-red: #721c24; --cvf-tag-red-bg: #f8d7da; --cvf-tag-purple: #6b21a8; --cvf-tag-purple-bg: #f3e8ff; --cvf-tag-teal: #00796b; --cvf-tag-teal-bg: #e0f7fa; } /* Emerald (Vert émeraude) */ .cv-vault-wrap.cv-theme-emerald { --cvf-primary: #064e3b; --cvf-primary-light: #059669; --cvf-primary-rgb: 6,78,59; --cvf-accent: #f59e0b; --cvf-accent-light: #fbbf24; --cvf-link: #059669; } /* Violet */ .cv-vault-wrap.cv-theme-violet { --cvf-primary: #4c1d95; --cvf-primary-light: #7c3aed; --cvf-primary-rgb: 76,29,149; --cvf-accent: #f59e0b; --cvf-accent-light: #fbbf24; --cvf-link: #7c3aed; } /* Bordeaux (Rouge bordeaux) */ .cv-vault-wrap.cv-theme-bordeaux { --cvf-primary: #7f1d1d; --cvf-primary-light: #b91c1c; --cvf-primary-rgb: 127,29,29; --cvf-accent: #f59e0b; --cvf-accent-light: #fbbf24; --cvf-link: #b91c1c; } /* Sunset (Orange chaud) */ .cv-vault-wrap.cv-theme-sunset { --cvf-primary: #9a3412; --cvf-primary-light: #ea580c; --cvf-primary-rgb: 154,52,18; --cvf-accent: #0ea5e9; --cvf-accent-light: #38bdf8; --cvf-link: #ea580c; } /* Charcoal (Gris anthracite) */ .cv-vault-wrap.cv-theme-charcoal { --cvf-primary: #1f2937; --cvf-primary-light: #4b5563; --cvf-primary-rgb: 31,41,55; --cvf-accent: #3b82f6; --cvf-accent-light: #60a5fa; --cvf-link: #3b82f6; } /* ══════════════════════════════════════════════════════════════ THEME ISOLATION — Client Vault's own design system Guarantees identical rendering on ANY WordPress theme. ALL rules use !important to override theme "body *" patterns. ══════════════════════════════════════════════════════════════ */ /* ─── Fix FluentCommunity scroll: its JS sets inline min-height on .fcom_wp_page equal to content height, which overflows the parent .feed_layout (max-height + overflow:hidden). We reset min-height so overflow:auto can work properly. ─── */ .fcom_wp_page { min-height: 0 !important; /* Prevent horizontal layout shift when vertical scrollbar appears/disappears */ scrollbar-gutter: stable; } /* ─── Portal safeguard: ensure parent containers don't have transform/filter that would break position:fixed on modals & lightbox. If a theme sets transform on .cv-vault-wrap ancestors, fixed-position children become relative to that ancestor instead of the viewport. ─── */ .cv-vault-wrap .cv-preview-overlay, .cv-vault-wrap .cv-lightbox { /* These use position:fixed and MUST be relative to viewport. If a parent has transform, we compensate via JS (cvPortalFix). */ } /* ─── Master scope: font, color, sizing for the entire vault ─── */ .cv-vault-wrap { max-width: 100%; width: 100%; margin: 0 auto; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--cvf-text) !important; background-color: transparent !important; overflow: visible; /* v11.78.11 — .cv-vault-wrap a `isolation:isolate` (cf. cv-isolation.css) qui crée un contexte d'empilement. Les overlays fixed internes (aperçu document/vidéo, z 99999) y restent PIÉGÉS : leur z-index ne pèse plus rien face au footer du thème, situé plus bas dans le DOM, qui peignait par-dessus l'aperçu (surtout visible dans la colonne commentaires). position:relative + z-index lève tout le contexte au-dessus du footer. NB : position:relative ne crée PAS de containing-block pour les fixed → l'overlay reste bien ancré au viewport. */ position: relative; z-index: 5; box-sizing: border-box !important; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; --cvf-z-content: 1; --cvf-z-dropdown: 1000; --cvf-z-overlay: 99999; --cvf-z-modal: 100000; --cvf-z-notification: 100001; /* ─── Design System Tokens ─── */ /* Typography scale */ --cvf-font-xs: 11px; --cvf-font-sm: 12px; --cvf-font-base: 13px; --cvf-font-md: 14px; --cvf-font-lg: 15px; --cvf-font-xl: 18px; /* Spacing scale */ --cvf-space-xs: 4px; --cvf-space-sm: 8px; --cvf-space-md: 12px; --cvf-space-lg: 16px; --cvf-space-xl: 20px; /* Transition */ --cvf-transition: 0.15s ease; /* Hover background */ --cvf-hover-bg: #fafbfc; /* Item separator */ --cvf-separator: #f0f1f3; /* Date badge color */ --cvf-date-muted: #8895a7; /* Author colors */ --cvf-author-self-bg: #fff3e0; --cvf-author-self: #e65100; --cvf-author-admin-bg: #e3f2fd; --cvf-author-admin: #1565c0; --cvf-author-client: #7c3aed; --cvf-author-client-bg: #f3e8ff; /* Icon container */ --cvf-icon-bg: #f0f4f8; --cvf-icon-size: 32px; --cvf-icon-radius: 8px; } /* ═══════════════════════════════════════════ ISOLATION: Protect vault container from external theme interference ═══════════════════════════════════════════ */ .cvf-vault-container *, .cvf-vault-container *::before, .cvf-vault-container *::after { box-sizing: border-box; } /* ─── Universal child reset: override any "body *" rule from any theme ─── */ .cv-vault-wrap *, .cv-vault-wrap *::before, .cv-vault-wrap *::after { box-sizing: border-box !important; } .cv-vault-wrap *:not(.dashicons):not(.dashicons-before) { font-family: inherit !important; } .cv-vault-wrap *::-webkit-scrollbar { display: none; } .cv-vault-wrap { scrollbar-width: none; } /* ─── Dashicons: force icon font (themes override with "body *") ─── */ .cv-vault-wrap .dashicons, .cv-vault-wrap .dashicons-before::before { font-family: dashicons !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; text-decoration: none !important; text-align: center; } /* ─── Headings ─── */ .cv-vault-wrap h1, .cv-vault-wrap h2, .cv-vault-wrap h3, .cv-vault-wrap h4, .cv-vault-wrap h5, .cv-vault-wrap h6 { font-family: inherit !important; color: var(--cvf-text) !important; background: transparent !important; background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 0.5em !important; line-height: 1.4 !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: normal !important; word-spacing: normal !important; text-shadow: none !important; text-decoration: none !important; float: none !important; } /* Neutralize heading pseudo-element decorations from themes */ .cv-vault-wrap h1::before, .cv-vault-wrap h1::after, .cv-vault-wrap h2::before, .cv-vault-wrap h2::after, .cv-vault-wrap h3::before, .cv-vault-wrap h3::after, .cv-vault-wrap h4::before, .cv-vault-wrap h4::after, .cv-vault-wrap h5::before, .cv-vault-wrap h5::after, .cv-vault-wrap h6::before, .cv-vault-wrap h6::after { content: none !important; display: none !important; } /* ─── Paragraphs ─── */ .cv-vault-wrap p { font-family: inherit !important; font-size: inherit !important; color: inherit !important; background: transparent !important; background-color: transparent !important; padding: 0 !important; margin: 0 0 0.5em !important; line-height: inherit !important; text-transform: none !important; letter-spacing: normal !important; text-indent: 0 !important; } /* ─── Spans & inline elements ─── */ .cv-vault-wrap span, .cv-vault-wrap strong, .cv-vault-wrap b, .cv-vault-wrap em, .cv-vault-wrap i:not(.dashicons), .cv-vault-wrap small, .cv-vault-wrap label, .cv-vault-wrap abbr, .cv-vault-wrap cite, .cv-vault-wrap code, .cv-vault-wrap mark, .cv-vault-wrap sub, .cv-vault-wrap sup { font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important; } .cv-vault-wrap strong, .cv-vault-wrap b { font-weight: 700 !important; } .cv-vault-wrap em, .cv-vault-wrap i:not(.dashicons) { font-style: italic !important; } .cv-vault-wrap small { font-size: 85% !important; } /* ─── Divs (prevent theme backgrounds/padding) ─── */ .cv-vault-wrap div { font-family: inherit !important; letter-spacing: normal !important; } /* ─── Links ─── */ .cv-vault-wrap a { font-family: inherit !important; color: var(--cvf-link, var(--cvf-primary-light)) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; transition: color .15s, opacity .15s; cursor: pointer; } .cv-vault-wrap a:hover { opacity: .8; text-decoration: none !important; } .cv-vault-wrap a:visited { color: var(--cvf-link, var(--cvf-primary-light)) !important; text-decoration: none !important; } .cv-vault-wrap a:focus { outline: 2px solid var(--cvf-primary) !important; outline-offset: 2px !important; } .cv-vault-wrap a:active { color: var(--cvf-link, var(--cvf-primary-light)) !important; text-decoration: none !important; } /* ─── Buttons ─── */ .cv-vault-wrap button, .cv-vault-wrap input[type="button"], .cv-vault-wrap input[type="submit"], .cv-vault-wrap input[type="reset"] { font-family: inherit !important; font-size: inherit !important; line-height: 1.4 !important; cursor: pointer; border: none; outline: none; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* ─── v11.69.7 — Baseline d'isolation des fonds de boutons (NON-layerisé) ─── Le reset complet de cv-isolation.css (background:transparent) vit dans @layer cv-reset ; or une règle de thème NON-layerisée (`button{background}`) bat toujours une règle layerisée, quelle que soit la spécificité. Résultat sans cette règle : le fond du thème (bleu, ou transparent → carte blanche) transparaissait sur les boutons « nus » comme .cv-btn-link. `:where()` garde la spécificité à (0,1,0) : on bat le thème (0,0,1) tout en laissant les variantes pleines (.cv-btn-primary, .cv-add-btn…, définies plus bas, même spécificité) gagner l'égalité par l'ordre source et garder leur fond. */ .cv-vault-wrap :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { background-color: transparent; background-image: none; color: inherit; } /* ─── Button focus states ─── */ .cv-vault-wrap button:focus, .cv-vault-wrap input[type="button"]:focus, .cv-vault-wrap input[type="submit"]:focus, .cv-vault-wrap input[type="reset"]:focus { outline: 2px solid var(--cvf-primary) !important; outline-offset: 2px !important; } /* ─── Form inputs (base) ─── */ .cv-vault-wrap input[type="text"], .cv-vault-wrap input[type="email"], .cv-vault-wrap input[type="search"], .cv-vault-wrap input[type="url"], .cv-vault-wrap input[type="date"], .cv-vault-wrap input[type="number"], .cv-vault-wrap input[type="password"], .cv-vault-wrap input[type="tel"], .cv-vault-wrap input[type="file"], .cv-vault-wrap textarea, .cv-vault-wrap select { font-family: inherit !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--cvf-text) !important; background-color: #fff !important; background-image: none !important; border: 1.5px solid var(--cvf-border) !important; border-radius: 8px !important; padding: 8px 12px !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color .15s; max-width: 100% !important; } /* ─── Text and select inputs: explicit height ─── */ .cv-vault-wrap input[type="text"], .cv-vault-wrap input[type="email"], .cv-vault-wrap input[type="search"], .cv-vault-wrap input[type="url"], .cv-vault-wrap input[type="number"], .cv-vault-wrap input[type="password"], .cv-vault-wrap input[type="tel"], .cv-vault-wrap select { height: 40px !important; width: 100% !important; } /* ─── Textarea: full width, auto height ─── */ .cv-vault-wrap textarea { width: 100% !important; height: auto !important; } /* ─── Date input: consistent styling ─── */ .cv-vault-wrap input[type="date"] { height: 40px !important; width: auto; padding: 8px 12px !important; background-color: #fff !important; color: var(--cvf-text) !important; border: 1.5px solid var(--cvf-border) !important; } /* ─── File input: styled button ─── */ .cv-vault-wrap input[type="file"] { height: auto !important; padding: 8px 0 !important; } .cv-vault-wrap input[type="file"]::file-selector-button { padding: 8px 16px !important; background: var(--cvf-primary) !important; color: #fff !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; font-weight: 600 !important; margin-right: 12px !important; transition: background 0.2s !important; } .cv-vault-wrap input[type="file"]::file-selector-button:hover { background: var(--cvf-primary-light) !important; } /* ─── Select: custom SVG arrow ─── */ .cv-vault-wrap select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px !important; } /* ─── Unified focus states on all interactive form elements ─── */ .cv-vault-wrap input:focus, .cv-vault-wrap textarea:focus, .cv-vault-wrap select:focus, .cv-vault-wrap button:focus { border-color: var(--cvf-primary) !important; box-shadow: 0 0 0 3px rgba(var(--cvf-primary-rgb), 0.12) !important; outline: none !important; } /* ─── Checkboxes / radios: preserve native appearance ─── */ .cv-vault-wrap input[type="checkbox"], .cv-vault-wrap input[type="radio"] { -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important; width: auto !important; height: auto !important; border: revert !important; border-radius: revert !important; padding: revert !important; background: revert !important; box-shadow: revert !important; } /* ─── Lists ─── */ .cv-vault-wrap ul, .cv-vault-wrap ol { list-style: none !important; list-style-type: none !important; padding: 0 !important; padding-left: 0 !important; margin: 0 !important; margin-left: 0 !important; } .cv-vault-wrap li { font-family: inherit !important; line-height: inherit !important; list-style: none !important; list-style-type: none !important; padding-left: 0 !important; margin-left: 0 !important; } /* ─── Images ─── */ .cv-vault-wrap img { max-width: 100%; height: auto; border: none !important; box-shadow: none !important; outline: none !important; } /* ─── Tables ─── */ .cv-vault-wrap table { border-collapse: collapse !important; border-spacing: 0 !important; width: 100% !important; font-family: inherit !important; font-size: inherit !important; } .cv-vault-wrap th, .cv-vault-wrap td { text-align: left !important; padding: 0; border: none; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; } /* ─── Misc elements ─── */ .cv-vault-wrap hr { border: none !important; border-top: 1px solid var(--cvf-border) !important; margin: 1em 0 !important; padding: 0 !important; } .cv-vault-wrap blockquote { font-family: inherit !important; margin: 0 !important; padding: 0 !important; border: none !important; } .cv-vault-wrap pre, .cv-vault-wrap code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important; font-size: 13px !important; } .cv-vault-wrap ::placeholder { font-family: inherit !important; color: var(--cvf-text-muted) !important; opacity: 1 !important; } /* * v11.9.0 — Respect du thème hôte. * Avant : `:has(.cv-vault-wrap)` forçait les containers du thème (entry-content, * post-content, article, .container, Elementor/Divi/BuddyBoss…) en * `width:100% !important`. Résultat : sur un thème vanilla, le plugin cassait * totalement la mise en page en débordant du container. * * Nouveau contrat : le plugin reste dans la largeur allouée par le thème. * Seul `.cv-vault-wrap` a un `max-width: 100%` pour ne pas déborder son parent. * Les propriétaires de thèmes exotiques qui ont besoin d'un override peuvent * le faire dans leur propre CSS — on ne force plus rien côté plugin. */ .cv-vault-wrap { max-width: 100%; box-sizing: border-box; } /* ═══ HEADER — airy, human, two-row layout ═══ v11.15.0 — Tous les display/flex forcés en !important pour éviter que le thème hôte (Astra, Divi, BuddyBoss, Fluent Community sidebar) écrase la colonne en row et masque le bloc texte d'accueil. */ .cv-vault-header { background: linear-gradient(135deg, var(--cvf-primary) 0%, var(--cvf-primary-light) 60%, rgba(var(--cvf-primary-rgb), 0.85) 100%) !important; color: #fff !important; border-radius: 20px !important; padding: 30px 30px 30px !important; margin-bottom: 26px !important; box-shadow: 0 8px 32px rgba(var(--cvf-primary-rgb), 0.22) !important; display: flex !important; flex-direction: column !important; gap: 28px !important; position: relative !important; overflow: hidden !important; width: 100% !important; box-sizing: border-box !important; } /* Decorative vault watermark — large faded icon on the right */ .cv-vault-header-watermark { position: absolute !important; right: 0; top: 45%; transform: translateY(-50%); pointer-events: none; z-index: var(--cvf-z-content); opacity: 0.08; line-height: 1; } .cv-vault-header-watermark .dashicons { font-size: 220px !important; width: 220px !important; height: 220px !important; color: #fff !important; font-family: dashicons !important; } /* Header context: all text white */ .cv-vault-header h2, .cv-vault-header h3, .cv-vault-header h4, .cv-vault-header p, .cv-vault-header span, .cv-vault-header label, .cv-vault-header strong { color: #fff !important; } /* ─── Row 1: Identity ─── */ .cv-vault-header-top { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 24px !important; position: relative !important; z-index: var(--cvf-z-content) !important; width: 100% !important; box-sizing: border-box !important; } .cv-vault-header-identity { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 22px !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important; visibility: visible !important; width: 100% !important; box-sizing: border-box !important; } /* Avatar — 76px, warm, prominent */ .cv-vault-avatar { flex-shrink: 0; width: 76px; height: 76px; min-width: 76px; min-height: 76px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.12); } /* v11.14.0 — Bulletproof avatar pattern : initiales toujours visibles en base, images empilées en absolute et révélées uniquement si naturalWidth > 1. */ .cv-vault-avatar-initials { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; font-size: clamp(15px, 4vw, 26px) !important; font-weight: 700 !important; color: #fff !important; letter-spacing: 1px; line-height: 1; user-select: none; z-index: 1; } /* Avatar images: absolute-positioned to stack */ .cv-vault-wrap .cv-vault-header .cv-vault-avatar img, .cv-vault-wrap .cv-vault-avatar img, .cv-vault-avatar img, .cv-vault-avatar .avatar { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important; object-fit: cover !important; max-width: none !important; border: none !important; padding: 0 !important; margin: 0 !important; background: rgba(255,255,255,.15); } /* v11.14.0 — Simplified : toutes les candidates images ont la même classe .cv-vault-avatar-img, invisibles par défaut, révélées au chargement OK. */ .cv-vault-avatar .cv-vault-avatar-img { z-index: 2; opacity: 0; object-fit: cover; transition: opacity 0.18s ease; pointer-events: none; } .cv-vault-avatar .cv-vault-avatar-img.cv-avatar-loaded { opacity: 1; pointer-events: auto; } /* Rétro-compat : anciennes classes utilisées dans d'autres templates */ .cv-vault-avatar-gravatar { display: none !important; z-index: 3; } .cv-vault-avatar-gravatar.cv-avatar-active { display: block !important; } .cv-vault-avatar-fcom { z-index: 2; } /* Header text block v11.15.0 — Fix bug d'affichage du nom + subtitle + meta. Règles renforcées : display:block forcé, flex:1 pour prendre toute la largeur restante après l'avatar, min-width:0 pour permettre le shrink du texte (ellipsis), jamais de max-height, jamais de display:none. */ .cv-vault-header-text { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; max-height: none !important; height: auto !important; position: relative !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .cv-vault-header h2 { font-size: 26px !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 2px !important; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block !important; visibility: visible !important; opacity: 1 !important; } .cv-vault-header-subtitle { font-size: 14px !important; color: rgba(255,255,255,.7) !important; margin: 0 0 10px !important; font-weight: 400 !important; letter-spacing: 0.1px; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Meta line — inline, subtle */ .cv-vault-header-meta { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px !important; opacity: 0.55; visibility: visible !important; } .cv-vault-meta-item { display: inline-flex; align-items: center; gap: 3px; } .cv-vault-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); display: inline-block; margin: 0 4px; } .cv-vault-meta-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; vertical-align: middle; } /* Dashicons in header greeting (no longer needed — removed icon from h2) */ .cv-vault-header-icon { font-size: 22px !important; width: 22px !important; height: 22px !important; vertical-align: middle; margin-right: 2px; } /* ─── Row 2: Stats — full width, evenly spread ─── */ /* ═══ Actions bar below tabs ═══ */ .cv-vault-actions-bar { display: flex; align-items: stretch; gap: 10px; margin: 0 0 14px; padding: 0; } .cv-vault-actions-search-wrap { flex: 1; position: relative; min-width: 0; } .cv-vault-actions-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; } .cv-vault-wrap .cv-vault-actions-bar .cv-vault-actions-search, .cv-vault-actions-search { width: 100% !important; height: 44px !important; padding: 0 14px 0 38px !important; border: 1.5px solid var(--cvf-border) !important; border-radius: 12px !important; font-size: 13px !important; color: var(--cvf-text) !important; background: var(--cvf-card) !important; font-family: inherit !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); transition: border-color .2s, box-shadow .2s; outline: none !important; box-sizing: border-box !important; } .cv-vault-actions-search::placeholder { color: var(--cvf-text-muted) !important; } .cv-vault-actions-search:focus { border-color: var(--cvf-primary) !important; box-shadow: 0 0 0 3px rgba(var(--cvf-primary-rgb), .08) !important; } /* Period filter in actions bar */ .cv-vault-actions-period { padding: 10px 32px 10px 12px !important; border: 1.5px solid var(--cvf-border) !important; border-radius: 10px !important; background: var(--cvf-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; color: var(--cvf-text) !important; font-size: 13px !important; font-weight: 600 !important; font-family: inherit !important; cursor: pointer; transition: border-color .2s; flex-shrink: 0; white-space: nowrap; } .cv-vault-actions-period:focus { outline: none !important; border-color: var(--cvf-primary) !important; } /* Send button in actions bar — must override .cv-dropdown-btn header styles */ .cv-vault-actions-bar .cv-vault-actions-send-btn, .cv-vault-actions-bar .cv-dropdown-btn { padding: 10px 22px !important; background: var(--cvf-primary) !important; color: #fff !important; border: 2px solid var(--cvf-primary) !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s, box-shadow .2s; font-family: inherit !important; backdrop-filter: none !important; box-shadow: 0 2px 8px rgba(var(--cvf-primary-rgb), .25) !important; } /* Plus icon in Ajouter button */ .cv-vault-actions-bar .cv-btn-plus { font-size: 18px !important; font-weight: 700 !important; color: #fff !important; line-height: 1; } .cv-vault-actions-bar .cv-vault-actions-send-btn:hover, .cv-vault-actions-bar .cv-dropdown-btn:hover { background: var(--cvf-primary-light) !important; border-color: var(--cvf-primary-light) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--cvf-primary-rgb), .35) !important; } /* (old header period/search styles removed — now in actions bar) */ /* "period-empty" visual cue when filter active */ .cv-vault-wrap .cv-period-empty { padding: 30px 20px; text-align: center; color: var(--cvf-text-muted); font-size: 13px; font-style: italic; } /* Stat cards row — full width, evenly distributed */ .cv-vault-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: stretch; position: relative; z-index: var(--cvf-z-content); } .cv-vault-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 1; padding: 12px 16px; background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 12px; min-width: 75px; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; backdrop-filter: blur(4px); } .cv-vault-stat:hover { transform: translateY(-2px); background: rgba(255,255,255,.25); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .cv-vault-stat-info { cursor: default; } .cv-vault-stat-info:hover { transform: none; } .cv-vault-stat-icon { font-size: 22px; width: 22px; height: 22px; line-height: 1; color: rgba(255,255,255,.85); } /* Dashicons in header greeting */ .cv-vault-header-icon { font-size: 22px !important; width: 22px !important; height: 22px !important; vertical-align: middle; margin-right: 2px; } /* Dashicons in meta-lines */ .cv-vault-meta-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; vertical-align: middle; margin-right: 1px; } .cv-vault-stat strong { font-size: 24px; font-weight: 700; color: #fff !important; line-height: 1; } .cv-vault-stat > span:last-child, .cv-vault-stat span:not(.cv-vault-stat-icon):not(.cv-vault-stat-storage-quota) { font-size: 11px; color: rgba(255,255,255,.85) !important; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; white-space: nowrap; line-height: 1; } /* Storage stat card */ .cv-vault-stat-storage { cursor: default; min-width: 100px; } .cv-vault-stat-storage:hover { transform: none; } .cv-vault-stat-storage-detail { display: flex; flex-direction: column; align-items: center; gap: 3px; } .cv-vault-stat-storage-detail strong { font-size: 16px; font-weight: 700; color: #fff !important; line-height: 1; } .cv-vault-stat-storage-quota { font-size: 10px !important; opacity: 0.7; white-space: nowrap; } .cv-vault-stat-storage-gauge { width: 100%; height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; margin-top: 2px; overflow: hidden; } .cv-vault-stat-storage-fill { height: 100%; border-radius: 2px; transition: width .3s; } /* v20.22.139 — Stockage SEUL (tous les autres menus/tuiles désactivés) : la tuile passe en barre fine pleine largeur horizontale → affichage voulu, pas orphelin. Classe posée en JS quand aucune autre tuile n'est visible. */ .cv-vault-stats--storage-only .cv-vault-stat-storage { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 18px; min-width: 0; } .cv-vault-stats--storage-only .cv-vault-stat-storage .cv-vault-stat-storage-detail { flex-direction: row; align-items: center; gap: 12px; flex: 1 1 auto; width: 100%; } .cv-vault-stats--storage-only .cv-vault-stat-storage-gauge { flex: 1 1 auto; margin-top: 0; min-width: 120px; height: 6px; } /* ─── Upgrade Teaser (Parcours module not activated) ─── */ .cv-upgrade-teaser--front { text-align: center; padding: 48px 24px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #fde68a; border-radius: 12px; margin: 8px 0; } .cv-upgrade-teaser--front .cv-upgrade-teaser-icon { margin-bottom: 16px; } .cv-upgrade-teaser--front .cv-upgrade-teaser-title { font-size: 20px; font-weight: 700; color: #1e3a5f; margin: 0 0 10px; } .cv-upgrade-teaser--front .cv-upgrade-teaser-desc { font-size: 14px; color: #6b7280; max-width: 420px; margin: 0 auto 24px; line-height: 1.6; } .cv-upgrade-teaser--front .cv-upgrade-teaser-features { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; text-align: left; margin-bottom: 20px; } .cv-upgrade-teaser--front .cv-upgrade-teaser-feat { font-size: 13px; color: #374151; display: flex; align-items: center; gap: 6px; } .cv-upgrade-teaser--front .cv-upgrade-teaser-feat .dashicons { font-size: 16px; width: 16px; height: 16px; } /* Locked stat card in frontend header */ .cv-vault-stat--locked { opacity: .7; } .cv-vault-stat--muted { opacity: .6; } @media (max-width: 600px) { .cv-upgrade-teaser--front .cv-upgrade-teaser-features { grid-template-columns: 1fr; } .cv-upgrade-teaser--front { padding: 32px 16px; } } /* ─── Settings: Collapsible cards ─── */ .cv-settings-collapsible .cv-settings-card-toggle { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; margin: 0; padding: 0; } .cv-settings-collapsible .cv-settings-toggle-arrow { margin-left: auto; font-size: 12px; transition: transform .25s ease; color: var(--cvf-text-muted, #8a94a6); } .cv-settings-collapsible.cv-card-collapsed .cv-settings-toggle-arrow { transform: rotate(-90deg); } .cv-settings-collapsible .cv-settings-card-body { overflow: hidden; transition: max-height .3s ease, opacity .25s ease, margin-top .25s ease; margin-top: 16px; opacity: 1; } .cv-settings-collapsible.cv-card-collapsed .cv-settings-card-body { max-height: 0 !important; opacity: 0; margin-top: 0; pointer-events: none; } /* ─── v20.22.528 — Réordonner les blocs de réglages (poignée ⠿) ─── */ .cv-sett-drag { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 6px; font-size: 15px; line-height: 1; color: var(--cvf-text-muted, #8a94a6); transition: background .15s ease, color .15s ease; } .cv-sett-drag:hover { background: var(--cvf-border, rgba(0,0,0,.08)); color: var(--cvf-text, #333); } .cv-sett-drag:active { cursor: grabbing; } .cli-settings-card.cv-sett-dragging { opacity: .55; outline: 2px dashed var(--cvf-accent, #e8913a); outline-offset: 2px; } /* ─── Settings: Storage gauge ─── */ .cv-settings-storage-info { padding: 4px 0; } .cv-settings-storage-value { margin-bottom: 12px; } .cv-settings-storage-gauge { width: 100%; height: 10px; background: var(--cvf-border, #e2e8f0); border-radius: 5px; overflow: hidden; } .cv-settings-storage-fill { height: 100%; border-radius: 5px; transition: width .4s ease; } /* ─── Login ─── */ /* v11.74.1 — Écran de connexion : fond neutre (pas de backdrop), la carte premium porte tout l'effet. */ .cv-login-wrap { display: flex; align-items: center; justify-content: center; padding: 60px 20px; } .cv-login-box { background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: 22px; padding: 48px 40px; max-width: 440px; width: 100%; box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 24px 60px -20px rgba(var(--cvf-primary-rgb), 0.35), 0 8px 28px rgba(15, 23, 42, 0.10); position: relative; overflow: hidden; } /* Liseré dégradé en haut de la carte */ .cv-login-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--cvf-primary), var(--cvf-primary-light), var(--cvf-accent)); } .cv-login-header { text-align: center; margin-bottom: 28px; } .cv-login-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, var(--cvf-primary), var(--cvf-primary-light)); color: #fff; margin-bottom: 16px; box-shadow: 0 10px 24px -6px rgba(var(--cvf-primary-rgb), 0.55); } .cv-login-box h2 { font-size: 22px; font-weight: 800; color: var(--cvf-primary); margin: 0 0 8px; } .cv-login-subtitle { color: var(--cvf-text-muted); font-size: 14px; margin: 0; } /* Error box */ .cv-login-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; text-align: center; font-weight: 500; } /* Form fields */ .cv-login-field { margin-bottom: 18px; } .cv-login-field label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--cvf-text); margin-bottom: 8px; } .cv-login-field label .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--cvf-primary); } .cv-login-field input[type="text"], .cv-login-field input[type="password"] { width: 100%; padding: 12px 16px; border: 1.5px solid var(--cvf-border); border-radius: 10px; font-size: 14px; box-sizing: border-box; background: var(--cvf-bg); transition: border-color .2s, box-shadow .2s; color: var(--cvf-text); } .cv-login-field input:focus { border-color: var(--cvf-primary); outline: none; box-shadow: 0 0 0 3px rgba(42,82,152,0.12); background: var(--cvf-card); } .cv-login-field input::placeholder { color: var(--cvf-text-muted); opacity: 0.6; } /* Password toggle */ .cv-login-pass-wrap { position: relative; } .cv-login-pass-wrap input { padding-right: 44px; } .cv-toggle-pass { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 8px; color: var(--cvf-text-muted); transition: color .15s; } .cv-toggle-pass:hover { color: var(--cvf-primary); } .cv-toggle-pass .dashicons { font-size: 18px; width: 18px; height: 18px; } /* Options row */ .cv-login-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .cv-login-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cvf-text-muted); cursor: pointer; } .cv-login-remember input[type="checkbox"] { accent-color: var(--cvf-primary); width: 16px; height: 16px; } .cv-login-forgot { font-size: 13px; color: var(--cvf-primary); text-decoration: none; font-weight: 500; } .cv-login-forgot:hover { text-decoration: underline; } /* Submit button */ .cv-login-submit { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--cvf-primary), var(--cvf-primary-light)); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; box-shadow: 0 10px 22px -8px rgba(var(--cvf-primary-rgb), 0.6); display: flex; align-items: center; justify-content: center; gap: 8px; } .cv-login-submit:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 30px -10px rgba(var(--cvf-primary-rgb), 0.7); } .cv-login-submit:active:not(:disabled) { transform: translateY(0); } .cv-login-submit:disabled { opacity: 0.7; cursor: not-allowed; } /* Shake animation on error */ @keyframes cv-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .cv-shake { animation: cv-shake 0.5s ease-in-out; } /* Footer */ .cv-login-footer { text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cvf-border); font-size: 12px; color: var(--cvf-text-muted); display: flex; align-items: center; justify-content: center; gap: 6px; } .cv-login-footer .dashicons { font-size: 14px; width: 14px; height: 14px; } /* Old wp_login_form fallback */ .cv-login-box .login-username, .cv-login-box .login-password { margin-bottom: 14px; text-align: left; } .cv-login-box .login-submit input { width: 100%; padding: 14px; background: var(--cvf-primary); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; } .cv-login-box .login-submit input:hover { background: var(--cvf-primary-light); } /* ═══════════════════════════════════ TABS ═══════════════════════════════════ */ .cv-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 14px; background: var(--cvf-card); border: 1.5px solid var(--cvf-border); border-radius: var(--cvf-radius); padding: 6px; box-shadow: var(--cvf-shadow); overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; } .cv-tabs::-webkit-scrollbar { height: 4px; } .cv-tabs::-webkit-scrollbar-track { background: transparent; margin: 0 8px; } .cv-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.10); border-radius: 4px; } .cv-tabs:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.20); } .cv-tab { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border: none; background: none; font-size: 13px; font-weight: 600; color: var(--cvf-text-muted); cursor: pointer; border-radius: 8px; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; } .cv-tab:hover { color: var(--cvf-primary) !important; background: rgba(var(--cvf-primary-rgb), 0.06) !important; } .cv-tab.active { color: #fff !important; background: linear-gradient(135deg, var(--cvf-primary), var(--cvf-primary-light)) !important; box-shadow: 0 2px 8px rgba(var(--cvf-primary-rgb), 0.3) !important; } .cv-tab svg { flex-shrink: 0; width: 13px; height: 13px; } .cv-tab.active svg { stroke: #fff; } .cv-tab-count { background: rgba(var(--cvf-primary-rgb), 0.08); color: var(--cvf-primary); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; line-height: 1; min-width: 18px; text-align: center; } /* v20.21.26 — pastille de NON-LUS (rouge) sur le menu Messages */ .cv-vault-wrap .cv-tab-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; } .cv-tab.active .cv-tab-count { background: rgba(255,255,255,0.25); color: #fff; } /* Tab panel visibility */ .cv-vault-wrap .cv-tab-content { display: none; } .cv-vault-wrap .cv-tab-content.active { display: block; } /* ═══════════════════════════════════ SHARED COMPONENTS ═══════════════════════════════════ */ .cv-add-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, var(--cvf-primary), var(--cvf-primary-light)); color: #fff !important; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 20px; transition: transform .15s, box-shadow .15s; box-shadow: 0 2px 8px rgba(var(--cvf-primary-rgb), 0.2); } .cv-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--cvf-primary-rgb), 0.3); } .cv-add-btn svg { flex-shrink: 0; } .cv-btn-primary { padding: 10px 22px; background: var(--cvf-primary); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s; } .cv-btn-primary:hover { background: var(--cvf-primary-light); } .cv-modal-btn-save { padding: 10px 22px; background: var(--cvf-primary); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.15s; font-family: inherit; } .cv-modal-btn-save:hover { background: #152d4a; transform: translateY(-1px); } .cv-modal-btn-save:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .cv-modal-btn-cancel { padding: 10px 18px; background: none; border: 1px solid var(--cvf-border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--cvf-text-muted); cursor: pointer; font-family: inherit; transition: all 0.15s; } .cv-modal-btn-cancel:hover { border-color: var(--cvf-danger); color: var(--cvf-danger); } .cv-btn-cancel { padding: 10px 18px; background: none; border: 1px solid var(--cvf-border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--cvf-text-muted); cursor: pointer; } .cv-btn-cancel:hover { border-color: var(--cvf-danger); color: var(--cvf-danger); } /* ═══════════════════════════════════ UPLOAD ZONE ═══════════════════════════════════ */ /* ─── Upload zone — admin-style redesign ─── */ .cv-vault-upload { background: var(--cvf-card, #fff); border: 1px solid var(--cvf-border); border-radius: 10px; padding: 20px; margin-bottom: 16px; } .cv-vault-dropzone { border: 2px dashed var(--cvf-border); border-radius: 10px; padding: 24px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: var(--cvf-card, #fff); } .cv-vault-dropzone:hover, .cv-vault-dropzone.dragover { border-color: var(--cvf-accent); background: #fff9f0; } .cv-vault-drop-icon { font-size: 28px; display: block; margin-bottom: 6px; } .cv-vault-drop-content p { margin: 0 0 8px; color: var(--cvf-text-muted); font-size: 13px; } .cv-vault-browse-btn { display: inline-block; background: var(--cvf-accent, #e8913a); color: #fff !important; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; transition: background .2s; text-decoration: none !important; } .cv-vault-browse-btn:hover { background: var(--cvf-accent-light, #d47f2e); } .cv-vault-drop-content small { display: block; margin-top: 8px; color: var(--cvf-text-muted); font-size: 11px; } /* Upload options panel */ .cv-vault-upload-options { display: flex; flex-direction: column; gap: 0; margin-top: 16px; background: var(--cvf-bg, #f8f9fb); border: 1px solid var(--cvf-border, #e1e5eb); border-radius: 10px; overflow: hidden; } /* Each field row */ .cv-vault-upload-field { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--cvf-border, #e1e5eb); } .cv-vault-upload-field:last-child { border-bottom: none; } .cv-vault-upload-field-label { font-size: 12px; font-weight: 700; color: var(--cvf-text-muted, #6b7280); white-space: nowrap; min-width: 80px; text-transform: uppercase; letter-spacing: 0.3px; } .cv-vault-wrap input[type="text"].cv-vault-upload-desc { flex: 1 !important; padding: 6px 10px !important; border: 1px solid var(--cvf-border) !important; border-radius: 6px !important; font-size: 13px !important; height: auto !important; background: #fff !important; } .cv-vault-upload-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; position: relative; } /* Tags + Submit on same row */ .cv-vault-upload-tags-row { display: flex !important; align-items: center !important; gap: 12px !important; border-bottom: none !important; } .cv-vault-upload-tags-row .cv-vault-upload-submit { flex-shrink: 0; margin-left: auto; } /* Tag overflow (hidden beyond limit, expand inline on click) */ .cv-upload-tag-overflow { display: none !important; } .cv-vault-upload-tags.cv-upload-tags-expanded .cv-upload-tag-overflow { display: inline-flex !important; } /* "+N" button for upload tags — inline expand */ .cv-upload-tag-more-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px; border: 1px solid var(--cvf-border, #e1e5eb); background: var(--cvf-bg, #f8f9fb); color: var(--cvf-primary, #1e3a5f); font-size: 10px; font-weight: 700; cursor: pointer; transition: all .15s; } .cv-upload-tag-more-btn:hover { background: var(--cvf-primary, #1e3a5f); color: #fff; border-color: var(--cvf-primary, #1e3a5f); } /* v11.86.277 — CTA de dépôt : pleine largeur, épais, premium (l'ancienne règle était en !important partout et écrasait toute personnalisation — on la met directement aux bonnes valeurs). */ .cv-vault-upload-submit { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 24px !important; background: var(--cvf-primary, #1e3a5f) !important; color: #fff !important; border: none !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 700 !important; font-family: inherit !important; cursor: pointer !important; transition: all .2s !important; box-shadow: 0 12px 28px rgba(30,58,95,.30) !important; } .cv-vault-upload-submit:hover { background: #264d7a !important; box-shadow: 0 16px 34px rgba(30,58,95,.38) !important; transform: translateY(-1px) !important; } .cv-vault-upload-submit:disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } .cv-vault-upload-submit .dashicons { font-size: 19px !important; width: 19px !important; height: 19px !important; } .cv-vault-progress { margin-top: 12px; } .cv-vault-progress-bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; } .cv-vault-progress-fill { height: 100%; background: var(--cvf-primary, #1e3a5f); width: 0%; transition: width 0.3s; border-radius: 3px; } .cv-vault-progress-text { font-size: 12px; color: var(--cvf-text-muted); margin-top: 4px; display: block; } .cv-vault-upload-message { margin-top: 12px; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; } .cv-vault-upload-message.success { background: #d4edda; color: #155724; } .cv-vault-upload-message.error { background: #f8d7da; color: #721c24; } /* ─── Per-file upload cards (frontend) ─── */ .cv-vault-wrap .cv-perfile-card { background: #f8f9fb; border: 1px solid var(--cvf-border, #d0d5dd); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .cv-vault-wrap .cv-perfile-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cv-vault-wrap .cv-perfile-name { font-size: 12.5px; font-weight: 600; color: var(--cvf-primary, #1e3a5f); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-vault-wrap .cv-perfile-remove { background: none !important; border: none !important; color: #767676 !important; font-size: 18px !important; cursor: pointer !important; padding: 0 4px !important; line-height: 1 !important; min-width: auto !important; } .cv-vault-wrap .cv-perfile-remove:hover { color: #c0392b !important; } .cv-vault-wrap .cv-perfile-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; } .cv-vault-wrap .cv-perfile-field { display: flex; flex-direction: column; gap: 3px; } .cv-vault-wrap .cv-perfile-field label { font-size: 10px !important; font-weight: 600 !important; color: #5a6c7d !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .cv-vault-wrap .cv-perfile-field input[type="text"], .cv-vault-wrap .cv-perfile-field input[type="date"] { padding: 5px 10px !important; border: 1px solid var(--cvf-border, #d0d5dd) !important; border-radius: 8px !important; font-size: 12px !important; background: #fff !important; min-width: 140px !important; height: auto !important; } .cv-vault-wrap .cv-perfile-tags { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px; } .cv-vault-wrap .cv-perfile-tag { padding: 2px 8px !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 600 !important; border: 1.5px solid currentColor !important; background: rgba(255,255,255,.85) !important; cursor: pointer !important; line-height: 1.3 !important; opacity: 0.5; transition: opacity .15s; } .cv-vault-wrap .cv-perfile-tag.cv-form-tag-active { opacity: 1; background: currentColor !important; } .cv-vault-wrap .cv-perfile-tag.cv-form-tag-active { color: inherit; } .cv-vault-wrap .cv-vault-upload-action { margin-top: 10px; text-align: right; } /* ===== v11.86.272 — Formulaire d'ajout de documents repensé ===== */ .cv-vault-wrap .cv-updz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 34px 24px; border: 2px dashed var(--cvf-border, #cdd5e0); border-radius: 16px; background: var(--cvf-bg-soft, #f8fafc); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .cv-vault-wrap .cv-updz:hover, .cv-vault-wrap .cv-updz.dragover { border-color: var(--cvf-primary, #2563eb); background: #eef4ff; } .cv-vault-wrap .cv-updz-ico { font-size: 38px; width: 38px; height: 38px; color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-updz-title { font-size: 15px; font-weight: 600; color: var(--cvf-text-dark, #1e293b); } .cv-vault-wrap .cv-updz-browse { display: inline-flex; align-items: center; gap: 8px; background: var(--cvf-primary, #2563eb); color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .15s; } .cv-vault-wrap .cv-updz-browse .dashicons { font-size: 17px; width: 17px; height: 17px; } .cv-vault-wrap .cv-updz-browse:hover { filter: brightness(1.08); } .cv-vault-wrap .cv-updz-hint { font-size: 12px; color: var(--cvf-text-muted, #94a3b8); } /* Carte « détail par fichier » : vignette de format + nom + taille */ .cv-vault-wrap .cv-perfile-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cv-vault-wrap .cv-perfile-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--cvf-bg-soft, #f1f5f9); } .cv-vault-wrap .cv-perfile-thumb .cv-docs-gallery-thumb { width: 100%; height: 100%; border-radius: 10px; } .cv-vault-wrap .cv-perfile-thumb .cv-docs-gallery-thumb-ext { display: none; } .cv-vault-wrap .cv-perfile-thumb .cv-docs-gallery-thumb-ico .dashicons { font-size: 22px; width: 22px; height: 22px; } .cv-vault-wrap .cv-perfile-thumb .cv-doc-type-vid .cv-docs-gallery-thumb-ico, .cv-vault-wrap .cv-perfile-thumb .cv-doc-type-aud .cv-docs-gallery-thumb-ico { background: #efe9fb; } .cv-vault-wrap .cv-perfile-thumb .cv-doc-type-vid .dashicons, .cv-vault-wrap .cv-perfile-thumb .cv-doc-type-aud .dashicons { color: #6d28d9; } .cv-vault-wrap .cv-perfile-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cv-vault-wrap .cv-perfile-id .cv-perfile-name { font-weight: 600; font-size: 13.5px; color: var(--cvf-text-dark, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-vault-wrap .cv-perfile-id .cv-perfile-size { font-size: 11.5px; color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-perfile-card .cv-perfile-remove { flex: 0 0 auto; } .cv-vault-wrap .cv-perfile-remove .dashicons { font-size: 16px; width: 16px; height: 16px; } /* Barre d'action : CTA pleine largeur imposant (le geste principal doit sauter aux yeux) */ .cv-vault-wrap .cv-vault-upload-action { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 18px; text-align: center; } .cv-vault-wrap .cv-updf { position: relative; } .cv-vault-wrap .cv-updf-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--cvf-card, #fff); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--cvf-text, #334155); cursor: pointer; } .cv-vault-wrap .cv-updf.cv-updf-has .cv-updf-btn { border-color: var(--cvf-primary, #2563eb); color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-updf-btn .dashicons { font-size: 16px; width: 16px; height: 16px; } .cv-vault-wrap .cv-updf-caret { font-size: 14px !important; width: 14px !important; height: 14px !important; opacity: .6; } /* v20.22.506 — z-index 900 (au lieu de 50) : le menu passe AU-DESSUS des cartes suivantes et du bouton d'envoi. RÈGLE IMMUABLE : les listes déroulantes sont toujours au premier plan. */ .cv-vault-wrap .cv-updf-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 900; min-width: 230px; max-height: 260px; overflow-y: auto; background: var(--cvf-card, #fff); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 12px; box-shadow: 0 14px 36px rgba(15,23,42,.16); padding: 6px; } .cv-vault-wrap .cv-updf-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--cvf-text, #334155); cursor: pointer; } .cv-vault-wrap .cv-updf-opt:hover { background: var(--cvf-bg-soft, #f1f5f9); } .cv-vault-wrap .cv-updf-opt input { accent-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-updf-opt .dashicons { font-size: 15px; width: 15px; height: 15px; color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-updf-empty { padding: 10px; font-size: 12.5px; color: var(--cvf-text-muted, #94a3b8); } /* Bouton « Déposer » : CTA principal pleine largeur, imposant et premium */ .cv-vault-wrap .cv-vault-upload-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--cvf-primary, #2563eb); color: #fff; border: none; border-radius: 14px; padding: 23px 24px; font-size: 16px; font-weight: 700; letter-spacing: .01em; cursor: pointer; box-shadow: 0 12px 26px rgba(37,99,235,.30); transition: filter .15s, transform .08s, box-shadow .15s; } .cv-vault-wrap .cv-vault-upload-submit:hover { filter: brightness(1.07); box-shadow: 0 16px 32px rgba(37,99,235,.36); } .cv-vault-wrap .cv-vault-upload-submit:active { transform: translateY(1px); } .cv-vault-wrap .cv-vault-upload-submit .dashicons { font-size: 19px; width: 19px; height: 19px; } .cv-vault-wrap .cv-vault-upload-submit:disabled { opacity: .55; cursor: not-allowed; filter: none; box-shadow: none; } .cv-vault-wrap .cv-vault-upload-hint { order: -1; font-size: 13px; color: var(--cvf-text-muted, #94a3b8); } /* ===== v11.86.274 — Carte « détail par fichier » : titre éditable + champs clairs ===== */ .cv-vault-wrap .cv-perfile-card { background: var(--cvf-card, #fff); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 14px; padding: 16px 18px; margin-top: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .cv-vault-wrap .cv-perfile-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .cv-vault-wrap .cv-perfile-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cv-vault-wrap .cv-perfile-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-perfile-title { width: 100%; font-size: 15px; font-weight: 600; color: var(--cvf-text-dark, #1e293b); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 9px; padding: 9px 12px; background: var(--cvf-bg-soft, #fafbfc); transition: border-color .12s, background .12s; box-sizing: border-box; } .cv-vault-wrap .cv-perfile-title:focus { outline: none; border-color: var(--cvf-primary, #2563eb); background: #fff; } .cv-vault-wrap .cv-perfile-id .cv-perfile-size { font-size: 11.5px; color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-perfile-remove { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--cvf-text-muted, #94a3b8); padding: 4px; border-radius: 8px; margin-top: 16px; } .cv-vault-wrap .cv-perfile-remove:hover { color: var(--cvf-danger, #e74c3c); background: rgba(231,76,60,.08); } .cv-vault-wrap .cv-perfile-remove .dashicons { font-size: 16px; width: 16px; height: 16px; } /* Grille de champs : 2 colonnes, tags & dossiers en pleine largeur */ .cv-vault-wrap .cv-perfile-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 16px; align-items: start; } .cv-vault-wrap .cv-perfile-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; } /* Ligne 1 : titre · description · expiration (2 colonnes chacun) */ .cv-vault-wrap .cv-perfile-cell.cv-cell-title, .cv-vault-wrap .cv-perfile-cell.cv-cell-desc, .cv-vault-wrap .cv-perfile-cell.cv-cell-exp { grid-column: span 2; } /* Ligne 2 : tags · dossiers (3 colonnes chacun) */ .cv-vault-wrap .cv-perfile-cell.cv-cell-tags, .cv-vault-wrap .cv-perfile-cell.cv-cell-folders { grid-column: span 3; } .cv-vault-wrap .cv-perfile-cell.cv-cell-title .cv-perfile-title { width: 100%; height: 42px; font-size: 14px; font-weight: 600; color: var(--cvf-text-dark, #1e293b); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 10px; padding: 0 12px; background: #fff; box-sizing: border-box; } .cv-vault-wrap .cv-perfile-cell.cv-cell-title .cv-perfile-title:focus { outline: none; border-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-perfile-cell > label { font-size: 12px; font-weight: 600; color: var(--cvf-text-secondary, #475569); } .cv-vault-wrap .cv-perfile-opt { font-weight: 400; color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-perfile-cell input[type="text"], .cv-vault-wrap .cv-perfile-cell input[type="date"] { width: 100%; height: 42px; border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 10px; padding: 0 12px; font-size: 14px; color: var(--cvf-text, #334155); background: #fff; box-sizing: border-box; } .cv-vault-wrap .cv-perfile-cell input:focus { outline: none; border-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-perfile-tags { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; } /* Spécificité (0,3,0) + !important pour battre .cv-form-tag-btn (police 10.5px) que les tags portent aussi. */ .cv-vault-wrap .cv-perfile-tags .cv-perfile-tag { padding: 8px 15px !important; border-radius: 999px; border: 1px solid var(--cvf-border, #e8ecf0); background: var(--cvf-bg-soft, #f1f5f9) !important; color: var(--cvf-text, #475569) !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.2 !important; cursor: pointer; transition: all .12s; } .cv-vault-wrap .cv-perfile-tags .cv-perfile-tag:hover { border-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-perfile-tags .cv-perfile-tag.cv-form-tag-active { background: var(--cvf-primary, #2563eb) !important; color: #fff !important; border-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-perfile-tag.cv-form-tag-active { background: var(--cvf-primary, #2563eb) !important; color: #fff !important; border-color: var(--cvf-primary, #2563eb); } /* Multi-dossiers par fichier : la liste s'ouvre vers le BAS dans la carte */ .cv-vault-wrap .cv-perfile-folders { position: relative; } .cv-vault-wrap .cv-perfile-folders .cv-updf-btn { width: 100%; height: 42px; justify-content: flex-start; padding: 0 12px; font-size: 14px; } .cv-vault-wrap .cv-perfile-folders .cv-updf-label { flex: 1 1 auto; text-align: left; } .cv-vault-wrap .cv-perfile-folders .cv-updf-pop { top: calc(100% + 6px); bottom: auto; left: 0; right: 0; } .cv-vault-wrap .cv-vault-upload-hint { font-size: 12.5px; color: var(--cvf-text-muted, #94a3b8); } @media (max-width: 680px) { .cv-vault-wrap .cv-perfile-grid { grid-template-columns: 1fr; } .cv-vault-wrap .cv-perfile-cell.cv-cell-title, .cv-vault-wrap .cv-perfile-cell.cv-cell-desc, .cv-vault-wrap .cv-perfile-cell.cv-cell-exp, .cv-vault-wrap .cv-perfile-cell.cv-cell-tags, .cv-vault-wrap .cv-perfile-cell.cv-cell-folders { grid-column: 1 / -1; } .cv-vault-wrap .cv-perfile-grid.cv-pf-grid-2 .cv-perfile-cell { grid-column: 1 / -1; } } /* v11.86.278 — Médias : grille 2 colonnes (titre·description / tags·dossiers) + état actif des tags média */ .cv-vault-wrap .cv-perfile-grid.cv-pf-grid-2 .cv-perfile-cell { grid-column: span 3; } .cv-vault-wrap .cv-perfile-tags .cv-perfile-tag.cv-mu-tag-active { background: var(--cvf-primary, #2563eb) !important; color: #fff !important; border-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-updz-cancel { align-self: center; background: none; border: none; color: var(--cvf-text-muted, #94a3b8); font-size: 13px; cursor: pointer; padding: 6px 10px; } .cv-vault-wrap .cv-updz-cancel:hover { color: var(--cvf-text, #475569); text-decoration: underline; } /* Titre éditable (média) : même style que le titre Documents même hors .cv-cell-title scope */ .cv-vault-wrap .cv-perfile-title { width: 100%; height: 42px; font-size: 14px; font-weight: 600; color: var(--cvf-text-dark, #1e293b); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 10px; padding: 0 12px; background: #fff; box-sizing: border-box; } .cv-vault-wrap .cv-perfile-title:focus { outline: none; border-color: var(--cvf-primary, #2563eb); } /* v11.86.280 — Fix alignement formulaire embed/enregistrement : neutraliser le liseré et les marges héritées de .cv-form-tags-row (border-top + margin-top legacy) qui créaient une ligne parasite et décalaient les tags par rapport à la cellule Dossiers. Dans une cellule perfile, les tags doivent s'aligner directement sous leur label, exactement comme la liste de dossiers en face. */ .cv-vault-wrap .cv-perfile-cell .cv-form-tags-row { margin: 0 !important; padding: 0 !important; border-top: none !important; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } .cv-vault-wrap .cv-perfile-cell .cv-form-tags-row > label { display: none; } /* La cellule média/embed/enregistrement : label puis contrôle, alignés en haut */ .cv-vault-wrap .cv-perfile-cell.cv-cell-tags, .cv-vault-wrap .cv-perfile-cell.cv-cell-folders { align-self: start; } /* Carte d'enregistrement : même respiration que les autres cartes */ .cv-vault-wrap .cv-record-note.cv-perfile-card { margin-top: 14px; } /* v11.86.280 — Formulaire Fiche : même carte premium (titre, contenu, couleur, puis tags · dossiers) */ .cv-vault-wrap .cv-fiche-card { padding: 22px; } .cv-vault-wrap .cv-fiche-card > .cv-perfile-cell { margin-bottom: 16px; } .cv-vault-wrap .cv-fiche-card > .cv-perfile-grid { margin-top: 2px; } .cv-vault-wrap textarea.cv-fiche-content-input { width: 100%; min-height: 120px; font-size: 14px; line-height: 1.5; color: var(--cvf-text-dark, #1e293b); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 10px; padding: 11px 13px; background: #fff; box-sizing: border-box; resize: vertical; font-family: inherit; } .cv-vault-wrap textarea.cv-fiche-content-input:focus { outline: none; border-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap .cv-cell-color .cv-color-picker { display: flex; align-items: center; gap: 10px; } .cv-vault-wrap .cv-fiche-action { margin-top: 16px; } /* v11.86.281 — Formulaire Lien : carte premium (adresse en avant, puis nom · description, tags · dossiers) */ .cv-vault-wrap .cv-link-card-form { padding: 22px; } .cv-vault-wrap .cv-link-card-form > .cv-cell-url { margin-bottom: 16px; } .cv-vault-wrap .cv-link-action { margin-top: 16px; } /* v11.86.283 — Resserrer l'espace conteneur ↔ carte interne (double encadré) : la carte premium porte déjà sa bordure/ombre, donc on annule sa marge haute dans les conteneurs de formulaire. + CTA de validation : police agrandie pour plus d'impact. */ .cv-vault-wrap .cv-card-form .cv-perfile-card, .cv-vault-wrap .cv-link-form .cv-perfile-card, .cv-vault-wrap .cv-embed-form .cv-perfile-card { margin-top: 0; } /* Spécificité (0,2,1) + !important : bat le reset `.cv-vault-wrap button{font-size:inherit!important}` (0,1,1) qui forçait le texte du CTA à hériter (14px). */ .cv-vault-wrap button.cv-vault-upload-submit { font-size: 17.5px !important; } .cv-vault-wrap button.cv-vault-upload-submit .dashicons { font-size: 21px; width: 21px; height: 21px; } /* v11.86.279 — Intégrer un média par URL : même carte premium que l'ajout de fichiers */ .cv-vault-wrap .cv-embed-card.cv-perfile-card { display: block; padding: 22px; } .cv-vault-wrap .cv-embed-type-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); } .cv-vault-wrap .cv-embed-typetabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--cvf-bg-soft, #f1f5f9); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 12px; margin-bottom: 18px; } .cv-vault-wrap .cv-embed-typetab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; background: transparent; color: var(--cvf-text, #475569); font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: all .12s; } .cv-vault-wrap .cv-embed-typetab .dashicons { font-size: 17px; width: 17px; height: 17px; } .cv-vault-wrap .cv-embed-typetab:hover { color: var(--cvf-text-dark, #1e293b); } .cv-vault-wrap .cv-embed-typetab.is-active { background: #fff; color: var(--cvf-primary, #2563eb); border-color: var(--cvf-border, #e8ecf0); box-shadow: 0 1px 3px rgba(15,23,42,.06); } .cv-vault-wrap .cv-embed-urlbox { margin-bottom: 18px; } .cv-vault-wrap .cv-embed-urllabel { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--cvf-text-dark, #1e293b); margin-bottom: 7px; } .cv-vault-wrap .cv-embed-urllabel .dashicons { font-size: 16px; width: 16px; height: 16px; color: var(--cvf-primary, #2563eb); } .cv-vault-wrap textarea.cv-embed-urlinput { width: 100%; min-height: 52px; font-size: 14px; color: var(--cvf-text-dark, #1e293b); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 10px; padding: 11px 13px; background: #fff; box-sizing: border-box; resize: vertical; font-family: inherit; } .cv-vault-wrap textarea.cv-embed-urlinput:focus { outline: none; border-color: var(--cvf-primary, #2563eb); } .cv-vault-wrap textarea.cv-embed-urlinput.cv-field-readonly { background: var(--cvf-bg-soft, #f1f5f9); color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-embed-urlbox .cv-embed-url-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-embed-card .cv-cell-desc input, .cv-vault-wrap .cv-embed-card .cv-cell-title input { width: 100%; box-sizing: border-box; } /* Expiration date field in upload */ .cv-vault-wrap input[type="date"].cv-vault-upload-expires { padding: 5px 14px !important; border: 1px solid var(--cvf-border, #d0d5dd) !important; border-radius: 20px !important; font-size: 12px !important; font-family: inherit !important; color: var(--cvf-text, #333) !important; background: #fff !important; height: 30px !important; box-sizing: border-box !important; } /* ═══ Frontend Edit File Modal ═══ */ /* Modal portal fix: ensure modals break out of transformed parents */ .cv-front-edit-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,.45); z-index: var(--cvf-z-modal, 100000); /* fallback: may be portaled to */ display: flex; align-items: center; justify-content: center; padding: 20px; transform: none !important; } .cv-front-edit-modal { background: var(--cvf-card, #fff); border-radius: 16px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden; } .cv-front-edit-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--cvf-border, #e1e5eb); } .cv-front-edit-header h3 { margin: 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: var(--cvf-text, #1a1a2e) !important; } .cv-front-edit-close { background: none !important; border: none !important; font-size: 22px !important; color: var(--cvf-text-muted, #8a94a6) !important; cursor: pointer; padding: 0 !important; line-height: 1; } .cv-front-edit-close:hover { color: var(--cvf-danger, #dc3545) !important; } .cv-front-edit-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; } .cv-front-edit-field { display: flex; flex-direction: column; gap: 5px; } .cv-front-edit-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .3px; color: var(--cvf-text-muted, #6b7280) !important; } .cv-vault-wrap input[type="text"].cv-front-edit-input, .cv-vault-wrap input[type="date"].cv-front-edit-input { padding: 8px 14px !important; border: 1px solid var(--cvf-border, #d0d5dd) !important; border-radius: 10px !important; font-size: 13px !important; font-family: inherit !important; background: #fff !important; color: var(--cvf-text, #333) !important; height: auto !important; width: 100% !important; box-sizing: border-box !important; } .cv-vault-wrap input[type="text"].cv-front-edit-input:focus, .cv-vault-wrap input[type="date"].cv-front-edit-input:focus { border-color: var(--cvf-primary, #1e3a5f) !important; box-shadow: 0 0 0 3px rgba(30,58,95,.08) !important; outline: none !important; } .cv-front-edit-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cv-front-edit-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--cvf-border, #e1e5eb); background: var(--cvf-bg, #f8f9fb); } .cv-front-edit-cancel { padding: 8px 18px !important; border: 1.5px solid var(--cvf-border, #d0d5dd) !important; border-radius: 10px !important; background: #fff !important; color: var(--cvf-text-muted, #6b7280) !important; font-size: 13px !important; font-weight: 600 !important; font-family: inherit !important; cursor: pointer; } .cv-front-edit-cancel:hover { border-color: var(--cvf-text-muted) !important; } .cv-front-edit-save { padding: 8px 22px !important; border: none !important; border-radius: 10px !important; background: var(--cvf-primary, #1e3a5f) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; font-family: inherit !important; cursor: pointer; box-shadow: 0 2px 8px rgba(30,58,95,.2); transition: all .2s; } .cv-front-edit-save:hover { background: #264d7a !important; box-shadow: 0 4px 12px rgba(30,58,95,.3); } /* ─── Filter bar ─── */ .cv-vault-filter { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .cv-filter-btn { padding: 8px 18px; border: 1px solid var(--cvf-border); border-radius: 24px; background: var(--cvf-card); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--cvf-text-muted); transition: all 0.2s; } .cv-filter-btn:hover { border-color: var(--cvf-primary); color: var(--cvf-primary); } .cv-filter-btn.active { background: var(--cvf-primary); color: #fff; border-color: var(--cvf-primary); } /* ─── File cards ─── */ .cv-vault-files { display: flex; flex-direction: column; gap: 10px; } .cv-vault-file-card { display: flex; align-items: center; gap: 16px; background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: var(--cvf-radius); padding: 16px 20px; transition: all 0.2s; box-shadow: var(--cvf-shadow); } .cv-vault-file-card:hover { transform: translateX(4px); border-color: var(--cvf-primary-light); } .cv-vault-file-card[data-hidden="true"] { display: none; } .cv-vault-file-icon { font-size: 32px; flex-shrink: 0; } .cv-vault-file-info { flex: 1; min-width: 0; } .cv-vault-file-info h4 { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-vault-file-desc { margin: 2px 0 0; font-size: 12px; color: var(--cvf-text-muted); } .cv-vault-file-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--cvf-text-muted); flex-wrap: wrap; } .cv-vault-sep { opacity: 0.4; } .cv-vault-self { color: var(--cvf-accent); font-weight: 600; } .cv-vault-admin { color: var(--cvf-primary); font-weight: 600; } .cv-vault-file-actions { display: flex; gap: 8px; flex-shrink: 0; } .cv-vault-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--cvf-border); background: #fff; cursor: pointer; text-decoration: none; color: var(--cvf-text-muted); transition: all 0.2s; } .cv-vault-action-btn:hover { border-color: var(--cvf-primary); color: var(--cvf-primary); background: rgba(var(--cvf-primary-rgb), 0.05); } .cv-vault-delete-btn:hover, .cv-delete-link-btn:hover { border-color: var(--cvf-danger) !important; color: var(--cvf-danger) !important; background: #fff5f5 !important; } /* ─── Empty ─── */ .cv-vault-empty { text-align: center; padding: 48px; color: var(--cvf-text-muted); } .cv-vault-empty span { font-size: 48px; display: block; margin-bottom: 12px; } /* ═══════════════════════════════════ CARDS (Fiches) ═══════════════════════════════════ */ .cv-card-form { background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: var(--cvf-radius); padding: 12px 12px 14px; margin-bottom: 20px; box-shadow: var(--cvf-shadow); } .cv-card-form-row { margin-bottom: 16px; } .cv-card-form-row input[type="text"], .cv-card-form-row input[type="url"], .cv-card-form-row textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--cvf-border); border-radius: 10px; font-size: 14px; box-sizing: border-box; font-family: inherit; transition: border-color 0.2s; } .cv-card-form-row input:focus, .cv-card-form-row textarea:focus { border-color: var(--cvf-primary-light); outline: none; box-shadow: 0 0 0 3px rgba(42,82,152,0.1); } .cv-card-form-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--cvf-border, #e8ecf0); } .cv-card-form-actions { display: flex; gap: 12px; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--cvf-border, #e8ecf0); } .cv-form-tags-row { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--cvf-border, #e8ecf0); } /* Color picker */ .cv-color-picker { display: flex; align-items: center; gap: 10px; } .cv-color-picker label { font-size: 13px; font-weight: 600; color: var(--cvf-text-muted); } .cv-color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: all 0.2s; padding: 0; } .cv-color-dot:hover { transform: scale(1.18); } .cv-color-dot.active { border-color: var(--cvf-text); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cvf-text); } /* Bouton Enregistrer mis en évidence */ .cv-card-form .cv-btn-primary { background: var(--cvf-primary, #1e3a5f); color: #fff; font-weight: 700; padding: 10px 24px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; transition: all .2s; box-shadow: 0 2px 8px rgba(30,58,95,.2); } .cv-card-form .cv-btn-primary:hover { background: #16304f; box-shadow: 0 4px 14px rgba(30,58,95,.3); transform: translateY(-1px); } .cv-card-form .cv-btn-cancel { background: none; color: var(--cvf-text-muted, #767676); font-weight: 500; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--cvf-border, #e0e0e0); cursor: pointer; font-size: 13px; transition: all .2s; } .cv-card-form .cv-btn-cancel:hover { background: #f5f5f5; color: #666; } /* Cards grid — design identique à l'admin */ .cv-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding-bottom: 20px; } .cv-vault-wrap .cv-card-item { background: var(--cvf-card); border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.04); overflow: hidden; border: 1.5px solid var(--cvf-border, #e8ecf0); transition: all .15s; } .cv-vault-wrap .cv-card-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); background: #fcfcfd; } /* Color bar en haut de la fiche */ .cv-vault-wrap .cv-fiche-color { height: 5px; } /* Body de la fiche */ .cv-vault-wrap .cv-fiche-body { padding: 16px 18px; } .cv-vault-wrap .cv-fiche-title { font-size: 15px; font-weight: 700; color: var(--cvf-primary, #1e3a5f); display: flex; align-items: center; gap: 5px; margin-bottom: 6px; } .cv-vault-wrap .cv-fiche-text { font-size: 13px; color: var(--cvf-text-muted, #666); line-height: 1.6; margin-bottom: 8px; word-break: break-word; } .cv-vault-wrap .cv-fiche-text p { margin: 0 0 6px; } /* Tags badges */ .cv-vault-wrap .cv-fiche-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; } .cv-vault-wrap .cv-fiche-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; gap: 3px; } .cv-vault-wrap .cv-fiche-tag-blue { background: var(--cvf-tag-blue-bg); color: var(--cvf-tag-blue); } .cv-vault-wrap .cv-fiche-tag-green { background: var(--cvf-tag-green-bg); color: var(--cvf-tag-green); } .cv-vault-wrap .cv-fiche-tag-orange { background: var(--cvf-tag-orange-bg); color: var(--cvf-tag-orange); } .cv-vault-wrap .cv-fiche-tag-red { background: var(--cvf-tag-red-bg); color: var(--cvf-tag-red); } .cv-vault-wrap .cv-fiche-tag-purple { background: var(--cvf-tag-purple-bg); color: var(--cvf-tag-purple); } .cv-vault-wrap .cv-fiche-tag-teal { background: var(--cvf-tag-teal-bg); color: var(--cvf-tag-teal); } /* Meta row */ .cv-vault-wrap .cv-fiche-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--cvf-text-muted, #767676); } /* Hover actions */ .cv-vault-wrap .cv-hover-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; } .cv-vault-wrap .cv-card-item:hover .cv-hover-actions { opacity: 1; } .cv-vault-wrap .cv-hover-action-btn { background: none; border: none; cursor: pointer; font-size: 14px; padding: 3px 5px; color: #aaa; border-radius: 4px; transition: all .15s; } .cv-vault-wrap .cv-hover-action-btn:hover { color: var(--cvf-primary, #1e3a5f); background: rgba(30,58,95,.08); } .cv-vault-wrap .cv-hover-action-delete:hover { color: #e74c3c; background: rgba(231,76,60,.08); } /* Fiches admin — mise en évidence */ .cv-vault-wrap .cv-card-item.cv-card-admin { border-color: var(--cvf-accent, #e8913a); background: linear-gradient(135deg, #fffcf7, #fff9f0); } .cv-vault-wrap .cv-card-item.cv-card-admin .cv-fiche-color { background: var(--cvf-accent, #e8913a) !important; } .cv-vault-wrap .cv-fiche-admin-badge { display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #e8913a, #d4802e); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 10px; margin-left: 6px; white-space: nowrap; letter-spacing: .2px; box-shadow: 0 1px 4px rgba(232,145,58,.3); } /* ═══════════════════════════════════ LINKS — design identique à l'admin ═══════════════════════════════════ */ .cv-link-form { background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: var(--cvf-radius); padding: 12px 12px 14px; margin-bottom: 20px; box-shadow: var(--cvf-shadow); } .cv-link-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .cv-link-form-grid { grid-template-columns: 1fr; } } /* Boutons du formulaire lien — même style que fiches */ .cv-link-form .cv-btn-primary, #cv-link-form .cv-btn-primary { background: var(--cvf-primary, #1e3a5f); color: #fff; font-weight: 700; padding: 10px 24px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; transition: all .2s; box-shadow: 0 2px 8px rgba(30,58,95,.2); } .cv-link-form .cv-btn-primary:hover, #cv-link-form .cv-btn-primary:hover { background: #16304f; box-shadow: 0 4px 14px rgba(30,58,95,.3); transform: translateY(-1px); } .cv-link-form .cv-btn-cancel, #cv-link-form .cv-btn-cancel { background: none; color: var(--cvf-text-muted, #767676); font-weight: 500; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--cvf-border, #e0e0e0); cursor: pointer; font-size: 13px; transition: all .2s; } .cv-link-form .cv-btn-cancel:hover, #cv-link-form .cv-btn-cancel:hover { background: #f5f5f5; color: #666; } .cv-links-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; } .cv-vault-wrap .cv-link-card { display: flex; gap: 14px; padding: 16px 18px; background: #fff; border-radius: 12px; border: 1.5px solid var(--cvf-border, #e8ecf0); box-shadow: 0 1px 6px rgba(0,0,0,.04); transition: all .15s; cursor: pointer; /* v11.86.90 — toute la carte ouvre le lien */ } .cv-vault-wrap .cv-link-card:hover { background: var(--cvf-hover-bg); border-color: var(--cvf-primary, #1e3a5f); box-shadow: 0 6px 20px rgba(30,58,95,.12); transform: translateY(-2px); } /* Icon container */ .cv-vault-wrap .cv-link-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--cvf-icon-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } /* Body */ .cv-vault-wrap .cv-link-body { flex: 1; min-width: 0; } .cv-vault-wrap .cv-link-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cv-vault-wrap .cv-link-title a { color: var(--cvf-primary, #1e3a5f); text-decoration: none; } .cv-vault-wrap .cv-link-title a:hover { text-decoration: underline; } .cv-vault-wrap .cv-link-url { font-size: 12px; color: var(--cvf-text-muted, #767676); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } .cv-vault-wrap .cv-link-desc { font-size: 13px; color: var(--cvf-text-muted, #777); margin-bottom: 4px; } .cv-vault-wrap .cv-link-card .cv-link-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--cvf-text-muted); margin-top: 4px; } .cv-vault-wrap .cv-link-card:hover .cv-hover-actions { opacity: 1; } /* Lien admin — mise en évidence */ .cv-vault-wrap .cv-link-card.cv-link-admin { border-color: var(--cvf-accent, #e8913a); background: linear-gradient(135deg, #fffcf7, #fff9f0); } .cv-vault-wrap .cv-link-card.cv-link-admin .cv-link-icon { background: linear-gradient(135deg, #fff3e0, #ffe0b2); } .cv-vault-wrap .cv-link-admin-badge { display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #e8913a, #d4802e); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 10px; white-space: nowrap; letter-spacing: .2px; box-shadow: 0 1px 4px rgba(232,145,58,.3); } .cv-vault-wrap .cv-link-card.cv-link-admin:hover { border-color: #d4802e; box-shadow: 0 6px 20px rgba(232,145,58,.18); } /* ═══════════════════════════════════ NOTEPAD — design identique à l'admin ═══════════════════════════════════ */ .cv-vault-wrap .cvf-section-hint { font-size: 13px; color: var(--cvf-text-muted, #767676); margin: 0 0 14px; } /* ─── NOTEPAD — Simple, épuré ─── */ /* Zone de saisie */ .cv-vault-wrap .cv-note-input { display: flex; gap: 10px; padding: 0; margin-bottom: 20px; background: none; border: none; border-radius: 0; } .cv-vault-wrap .cv-note-field { flex: 1; padding: 10px 14px; border: 1px solid var(--cvf-border); border-radius: 8px; font-size: 13px; background: #fff; font-family: inherit; transition: border-color .2s; } .cv-vault-wrap .cv-note-field:focus { border-color: var(--cvf-primary, #1e3a5f); outline: none; } .cv-vault-wrap .cv-note-send-btn { padding: 10px 22px; font-size: 13px; font-weight: 600; border-radius: 8px; background: var(--cvf-primary, #1e3a5f); color: #fff; border: none; cursor: pointer; transition: background .2s; white-space: nowrap; } .cv-vault-wrap .cv-note-send-btn:hover { background: #264d7a; } /* Thread — aucun fond, aucune bordure */ .cv-vault-wrap .cv-note-thread { background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; padding: 0; } /* Note — simple liste avec séparation fine */ .cv-vault-wrap .cv-note-msg { display: flex; gap: 12px; padding: 14px 4px; position: relative; transition: background .15s; border-bottom: 1px solid var(--cvf-separator); } .cv-vault-wrap .cv-note-msg:last-child { border-bottom: none; } .cv-vault-wrap .cv-note-msg:hover { background: var(--cvf-hover-bg); } /* Note admin — légère teinte + barre gauche */ .cv-vault-wrap .cv-note-msg[data-author-type="coach"] { border-left: 3px solid var(--cvf-primary, #1e3a5f); padding-left: 12px; } /* Avatar */ .cv-vault-wrap .cv-note-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .cv-vault-wrap .cv-note-av-coach { background: var(--cvf-primary, #1e3a5f); } .cv-vault-wrap .cv-note-av-client { background: var(--cvf-author-client); } /* Nom auteur */ .cv-vault-wrap .cv-note-who { font-size: var(--cvf-font-sm); font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .cv-vault-wrap .cv-note-who-coach { color: var(--cvf-primary, #1e3a5f); } .cv-vault-wrap .cv-note-who-client { color: var(--cvf-author-client); } /* Badge admin */ .cv-vault-wrap .cv-note-admin-badge { display: inline-flex; align-items: center; background: var(--cvf-primary, #1e3a5f); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; } /* Texte du message */ .cv-vault-wrap .cv-note-txt { font-size: 13.5px; color: var(--cvf-text); line-height: 1.55; word-break: break-word; } /* Date/heure */ .cv-vault-wrap .cv-note-time { font-size: 11px; color: var(--cvf-text-muted); margin-top: 3px; } /* Actions au survol */ .cv-vault-wrap .cv-note-msg-actions { position: absolute; top: 12px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; } .cv-vault-wrap .cv-note-msg:hover .cv-note-msg-actions { opacity: 1; } /* Tri */ .cv-vault-wrap .cvf-sort-controls { display: flex; gap: 4px; } .cv-vault-wrap .cvf-sort-btn { padding: 5px 10px; border: 1px solid var(--cvf-border); border-radius: 7px; font-size: 12px; font-weight: 500; background: #fff; color: #777; cursor: pointer; transition: all .15s; } .cv-vault-wrap .cvf-sort-btn:hover { border-color: var(--cvf-primary, #1e3a5f); color: var(--cvf-primary, #1e3a5f); } .cv-vault-wrap .cvf-sort-btn.active { background: var(--cvf-primary, #1e3a5f); color: #fff; border-color: var(--cvf-primary, #1e3a5f); } /* ─── Séparateur de date — ligne centrée ─── */ .cv-vault-wrap .cv-note-month-sep { display: flex; align-items: center; gap: 12px; margin: 20px 0 10px; padding: 0; user-select: none; } .cv-vault-wrap .cv-note-month-sep .cv-note-sep-label { font-size: 11px; font-weight: 600; color: var(--cvf-date-muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .cv-vault-wrap .cv-note-month-sep .cv-note-sep-count { font-size: 10px; color: var(--cvf-text-muted); white-space: nowrap; } .cv-vault-wrap .cv-note-month-sep .cv-note-sep-line { flex: 1; height: 1px; background: var(--cvf-border); } /* ═══════════════════════════════════ QUICK ADD + DASHBOARD ═══════════════════════════════════ */ /* (old toolbar removed — search/send now in header) */ .cv-quick-add { position: relative; z-index: var(--cvf-z-dropdown); } .cv-quick-add-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: var(--cvf-primary); color: #fff; border: none; border-radius: 14px; font-size: 18px; font-weight: 800; cursor: pointer; transition: background 0.2s; letter-spacing: 0.3px; } .cv-quick-add-btn:hover { background: var(--cvf-primary-light); } .cv-quick-add-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: 12px; padding: 8px; min-width: 240px; box-shadow: var(--cvf-shadow); z-index: var(--cvf-z-modal); } .cv-quick-add-item { width: 100%; text-align: left; padding: 10px 12px; background: #fff; border: 0; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--cvf-primary); transition: background 0.15s; } .cv-quick-add-item:hover { background: rgba(var(--cvf-primary-rgb), 0.04); } .cv-dashboard { background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: var(--cvf-radius); padding: 20px; margin-bottom: 24px; box-shadow: var(--cvf-shadow); } .cv-dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .cv-dashboard-title { margin: 0; font-size: 16px; font-weight: 900; color: var(--cvf-primary); } .cv-dashboard-subtitle { color: var(--cvf-text-muted); font-size: 12px; margin-top: 2px; } .cv-dashboard-items { display: flex; flex-direction: column; gap: 10px; } .cv-dashboard-item { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--cvf-border); border-radius: 12px; background: #fff; } .cv-dashboard-item-icon { width: 40px; height: 40px; border-radius: 12px; background: #eef2f7; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .cv-dashboard-item-body { flex: 1; min-width: 0; } .cv-dashboard-item-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .cv-dashboard-item-title { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-dashboard-meta { color: var(--cvf-text-muted); font-size: 12px; white-space: nowrap; } .cv-dashboard-item-snippet { color: var(--cvf-text); font-size: 12px; margin-top: 6px; line-height: 1.5; word-break: break-word; } .cv-dashboard-item-actions { margin-top: 10px; } .cv-dashboard-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--cvf-primary); color: #fff; text-decoration: none; font-weight: 900; font-size: 12px; } .cv-dashboard-link-btn:hover { background: var(--cvf-primary-light); } /* ═══════════════════════════════════ UNIFIED SEARCH ═══════════════════════════════════ */ .cv-search-wrap { position: relative; margin-bottom: 20px; } .cv-search-box { position: relative; display: flex; align-items: center; } .cv-search-icon { position: absolute; left: 16px; color: var(--cvf-text-muted); pointer-events: none; } .cv-search-input { width: 100%; padding: 14px 40px 14px 44px; border: 2px solid var(--cvf-border); border-radius: var(--cvf-radius); font-size: 14px; font-family: inherit; background: var(--cvf-card); color: var(--cvf-text); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .cv-search-input:focus { border-color: var(--cvf-primary-light); outline: none; box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1); } .cv-search-input::placeholder { color: var(--cvf-text-muted); font-size: 13px; } .cv-search-clear { position: absolute; right: 14px; font-size: 22px; color: var(--cvf-text-muted); cursor: pointer; line-height: 1; padding: 4px; } .cv-search-clear:hover { color: var(--cvf-danger); } .cv-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: var(--cvf-radius); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); z-index: 200; max-height: 400px; overflow-y: auto; } .cv-search-empty { padding: 24px; text-align: center; color: var(--cvf-text-muted); font-size: 14px; } .cv-search-result-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0f2f5; cursor: pointer; transition: background 0.15s; } .cv-search-result-item:last-child { border-bottom: none; } .cv-search-result-item:hover { background: #f8f9fb; } .cv-search-result-icon { font-size: 22px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #eef2f7; border-radius: 10px; } .cv-search-result-body { flex: 1; min-width: 0; } .cv-search-result-title { font-size: 13px; font-weight: 700; color: var(--cvf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-search-result-desc { font-size: 12px; color: var(--cvf-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-search-result-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .cv-search-result-type { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--cvf-primary); background: #eef2f7; padding: 2px 8px; border-radius: 10px; } .cv-search-result-meta span:last-child { font-size: 11px; color: var(--cvf-text-muted); } .cv-search-result-action { flex-shrink: 0; padding: 6px 12px; background: var(--cvf-primary); /* v11.70.46 — !important : certains thèmes forcent la couleur des (bleu) et écrasaient ce blanc → texte bleu sur fond bleu illisible. */ color: #fff !important; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 700; transition: background 0.2s; } .cv-search-result-action:hover, .cv-search-result-action:focus { background: var(--cvf-primary-light); color: #fff !important; } /* ═══════════════════════════════════ EMBEDS ═══════════════════════════════════ */ .cv-embeds-list { display: flex; flex-direction: column; gap: 20px; } .cv-embed-item { background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: var(--cvf-radius); overflow: hidden; box-shadow: var(--cvf-shadow); } .cv-embed-header { padding: 16px 20px 10px; } .cv-embed-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--cvf-primary); } .cv-embed-desc { margin: 4px 0 0; font-size: 13px; color: var(--cvf-text-muted); } .cv-embed-content { padding: 0 20px 16px; position: relative; } .cv-embed-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: none; border-radius: 8px; } .cv-embed-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top: 1px solid var(--cvf-border); background: var(--cvf-hover-bg); } .cv-embed-meta { font-size: 12px; color: var(--cvf-text-muted); } /* ═══════════════════════════════════ COMMENTS ═══════════════════════════════════ */ .cv-comment-toggle { background: none; border: 1px solid var(--cvf-border); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 13px; color: var(--cvf-text-muted); transition: all 0.2s; } .cv-comment-toggle:hover { border-color: var(--cvf-primary); color: var(--cvf-primary); } .cv-comments-panel { padding: 14px 20px; background: #f8f9fb; border-top: 1px solid var(--cvf-border); } .cv-comments-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .cv-comments-empty { text-align: center; color: var(--cvf-text-muted); font-size: 13px; padding: 10px 0; } .cv-comment { padding: 10px 14px; border-radius: 10px; position: relative; } .cv-comment-admin { background: #fef8f0; border-left: 3px solid var(--cvf-accent, #e8913a); } .cv-comment-client { background: #f8fafc; border-left: 3px solid var(--cvf-primary, #1e3a5f); } .cv-comment-header { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; } .cv-comment-header strong { color: var(--cvf-primary); } .cv-comment-client .cv-comment-header strong { color: var(--cvf-accent); } .cv-comment-header span { color: var(--cvf-text-muted); } .cv-comment-delete { margin-left: auto; background: none; border: none; color: var(--cvf-text-muted); cursor: pointer; font-size: 16px; line-height: 1; } .cv-comment-delete:hover { color: var(--cvf-danger); } .cv-comment-body { font-size: 13px; line-height: 1.5; color: var(--cvf-text); } .cv-comment-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--cvf-border); border-radius: 8px; font-size: 13px; font-family: inherit; box-sizing: border-box; resize: vertical; } .cv-comment-form textarea:focus { border-color: var(--cvf-primary-light); outline: none; box-shadow: 0 0 0 2px rgba(42,82,152,0.1); } /* ═══════════════════════════════════ TAGS ═══════════════════════════════════ */ .cv-tags-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cv-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; } .cv-tag-blue { background: var(--cvf-tag-blue-bg); color: var(--cvf-tag-blue); } .cv-tag-green { background: var(--cvf-tag-green-bg); color: var(--cvf-tag-green); } .cv-tag-orange { background: var(--cvf-tag-orange-bg); color: var(--cvf-tag-orange); } .cv-tag-red { background: var(--cvf-tag-red-bg); color: var(--cvf-tag-red); } .cv-tag-purple { background: var(--cvf-tag-purple-bg); color: var(--cvf-tag-purple); } /* ─── File Preview Modal ─── */ /* Modal portal fix: ensure modals break out of transformed parents */ .cv-preview-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: var(--cvf-z-overlay); display: flex; align-items: center; justify-content: center; padding: 20px; transform: none !important; } .cv-preview-modal { background: var(--cvf-card); border-radius: var(--cvf-radius); width: 90vw; max-width: 1000px; height: 85vh; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; } .cv-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--cvf-border); background: var(--cvf-bg); flex-shrink: 0; } .cv-preview-title { font-weight: 600; font-size: 14px; color: var(--cvf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-preview-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--cvf-text-muted); padding: 0 4px; line-height: 1; transition: color 0.15s; } .cv-preview-close:hover { color: var(--cvf-danger); } .cv-preview-body { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f0f0f0; position: relative; } .cv-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; } .cv-preview-body iframe { width: 100%; height: 100%; border: none; } /* Filigrane spectateur (Collection) : ligne discrète en faible opacité qui balaie lentement le contenu (haut→bas). Non sélectionnable, non cliquable. mix-blend-mode:difference → lisible sur fond clair comme sombre. Assez visible pour gêner un enregistrement d'écran et tracer une fuite, sans masquer la lecture (contrairement à une mosaïque plein cadre). */ .cv-col-wm { position: absolute; left: 0; right: 0; top: 10%; z-index: 6; display: flex; justify-content: space-around; gap: 40px; white-space: nowrap; pointer-events: none; user-select: none; overflow: hidden; opacity: .24; mix-blend-mode: difference; animation: cvColWmSweep 17s ease-in-out infinite alternate; } .cv-col-wm span { font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #9a9a9a; white-space: nowrap; letter-spacing: .3px; } @keyframes cvColWmSweep { from { top: 8%; } to { top: 86%; } } @media (prefers-reduced-motion: reduce) { .cv-col-wm { animation: none; top: 48%; } } /* v20.22.150 — aperçu des fichiers TEXTE (.txt/.log/.md/.csv) : cadre blanc plein, lecture confortable. */ .cv-txt-frame { width: 100%; height: 100%; min-height: 60vh; border: none; background: #fff; } .cv-docs-gallery-stage .cv-txt-frame { height: 60vh; } .cv-preview-loading { font-size: 14px; color: var(--cvf-text-muted); } .cv-preview-text-content { padding: 28px 32px; font-size: 14px; line-height: 1.7; color: var(--cvf-text, #333); overflow-y: auto; max-height: 100%; text-align: left; width: 100%; } .cv-preview-text-content p { margin: 0 0 12px; } .cv-preview-text-content strong { font-weight: 600; } .cv-preview-text-content .cv-preview-note-header { font-size: 13px; border-bottom: 1px solid var(--cvf-border, #e1e5eb); padding-bottom: 10px; margin-bottom: 12px; } .cv-preview-embed-content { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; } .cv-preview-embed-content iframe, .cv-preview-embed-content video { width: 100% !important; max-width: 100% !important; max-height: 70vh; border: none; border-radius: 8px; aspect-ratio: 16 / 9; object-fit: contain; } /* Force Fluent Player / WP mediaelement wrappers to full width in preview popup */ .cv-preview-embed-content .fp_player_wrapper, .cv-preview-embed-content .fp-media-block, .cv-preview-embed-content .wp-video, .cv-preview-embed-content .wp-video-shortcode, .cv-preview-embed-content .mejs-container, .cv-preview-embed-content .mejs-overlay, .cv-preview-embed-content .mejs-mediaelement, .cv-preview-embed-content .mejs-layers, .cv-preview-embed-content .mejs-controls { width: 100% !important; max-width: 100% !important; } .cv-preview-embed-content .fp_player_wrapper video, .cv-preview-embed-content .wp-video video, .cv-preview-embed-content .mejs-container video { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; } /* Video-friendly modal: auto height instead of fixed 85vh */ .cv-preview-modal.cv-preview-modal-video { height: auto !important; max-height: 90vh; } .cv-preview-modal-video .cv-preview-body { height: auto !important; min-height: 200px; } .cv-preview-modal-video .cv-front-preview-content { max-height: 80vh; } /* v11.82.0 — média audio dans l'aperçu document unifié */ /* v11.82.4 — modal audio à hauteur pleine pour CENTRER verticalement le lecteur */ .cv-preview-modal.cv-preview-modal-audio { height: 82vh; max-height: 90vh; } .cv-preview-modal-audio .cv-preview-body { height: 100%; } .cv-embed-player-audio { width: 100%; max-width: 820px; padding: 32px 28px; box-sizing: border-box; } .cv-preview-embed-content.cv-embed-player-audio iframe { aspect-ratio: auto; max-height: none; } /* v11.82.4 — visualizer audio AGRANDI (imposant) + contrôles forcés visibles */ .cv-preview-embed-content .cv-popup-audio-visualizer { min-height: 0; height: auto; flex: none; padding: 32px; gap: 40px; } .cv-preview-embed-content .cv-popup-audio-bars { height: 260px; gap: 9px; } .cv-preview-embed-content .cv-popup-audio-bars span { width: 16px; } .cv-preview-embed-content .cv-popup-audio-visualizer audio { width: 100%; max-width: 680px; height: 56px !important; min-height: 56px; flex: 0 0 auto; display: block; } /* Repli lecteur audio simple (si visualizer indisponible) */ .cv-embed-audio-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; width: 100%; padding: 16px 0; } .cv-embed-audio-ico { font-size: 72px; width: 72px; height: 72px; line-height: 72px; color: var(--cvf-primary, #1e3a5f); opacity: .32; } .cv-embed-audio-el { width: 100%; max-width: 520px; height: 54px !important; display: block; min-height: 54px; } .cv-preview-btn { color: var(--cvf-primary-light); } .cv-preview-btn:hover { color: var(--cvf-primary); } /* ═══════════════════════════════════════════ Frontend Section Headers (admin-style) ═══════════════════════════════════════════ */ .cvf-section { border: 1px solid var(--cvf-border, #e1e5eb); border-radius: 10px; overflow: clip; /* v7.18.4 — clip préserve border-radius sans casser position:sticky */ background: var(--cvf-card, #fff); margin-bottom: 16px; } .cvf-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; padding: 14px 18px !important; border-bottom: 1px solid var(--cvf-border, #e1e5eb); min-height: 50px; box-sizing: border-box !important; } .cv-vault-wrap .cvf-section-header h2 { margin: 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 8px; flex: 1; min-width: 0; line-height: 1.2 !important; border: none !important; background: none !important; } .cv-vault-wrap .cvf-section-header h2::before, .cv-vault-wrap .cvf-section-header h2::after { display: none !important; content: none !important; } .cv-vault-wrap .cvf-section-header h2 .dashicons { font-size: 18px; width: 18px; height: 18px; opacity: 0.85; } .cvf-section-header-actions { display: flex !important; align-items: center !important; gap: 8px; flex-shrink: 0; margin: 0 !important; padding: 0 !important; } .cvf-section-header-actions .cv-add-btn { font-family: inherit !important; font-size: 13px !important; padding: 8px 18px !important; gap: 6px !important; margin: 0 !important; line-height: 1.3 !important; display: inline-flex !important; align-items: center !important; background: #fff !important; color: var(--cvf-primary, #1e3a5f) !important; border: 1.5px solid var(--cvf-primary, #1e3a5f) !important; border-radius: 10px !important; box-shadow: none !important; font-weight: 600 !important; opacity: 1 !important; transition: all .2s !important; transform: none !important; cursor: pointer !important; white-space: nowrap !important; text-transform: none !important; letter-spacing: normal !important; } .cvf-section-header-actions .cv-add-btn:hover { background: #f0f5fb !important; box-shadow: 0 2px 8px rgba(30,58,95,0.12) !important; transform: translateY(-1px) !important; } /* v20.21.60 — « Importer depuis l'agence » (front) : même idée que l'upload mais teinte DORÉE douce. */ .cvf-section-header-actions .cv-add-btn.cv-import-agency-btn { background: linear-gradient(135deg, #d4af56 0%, #c2972f 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 8px rgba(194,151,47,.25) !important; text-shadow: 0 1px 1px rgba(120,86,10,.25) !important; } .cvf-section-header-actions .cv-add-btn.cv-import-agency-btn:hover { background: linear-gradient(135deg, #dcba66 0%, #caa13a 100%) !important; box-shadow: 0 4px 12px rgba(194,151,47,.35) !important; transform: translateY(-1px) !important; } .cvf-section-header-actions .cv-add-btn.cv-import-agency-btn .dashicons { color: #fff !important; font-size: 16px; width: 16px; height: 16px; } .cvf-section-header-actions .cv-add-btn svg { width: 12px; height: 12px; } .cvf-section-filters { padding: 10px 16px 0; } /* ═══════════════════════════════════════════════════════════════ v11.78.24 — BARRE DE FILTRES MODERNE (.cv-mbar) — FRAMEWORK RÉUTILISABLE Conçue pour Médias, destinée à être dupliquée dans tous les menus. Classes génériques (pas de « embeds » en dur). Charte violet #7c3aed. ═══════════════════════════════════════════════════════════════ */ .cv-mbar { position: relative; } .cv-mbar-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cv-mbar-search { position: relative; flex: 1 1 240px; min-width: 200px; } .cv-mbar-search .dashicons { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cvf-text-muted); font-size: 18px; width: 18px; height: 18px; pointer-events: none; } .cv-vault-wrap .cv-mbar-search input { width: 100%; height: 42px; box-sizing: border-box; border: 1px solid var(--cvf-border); border-radius: 12px; padding: 0 14px 0 38px; font-size: 14px; background: var(--cvf-card); color: var(--cvf-text); outline: none; } .cv-vault-wrap .cv-mbar-search input:focus { border-color: var(--cvf-primary); } .cv-mbar-types { display: inline-flex; align-items: center; gap: 2px; background: var(--cvf-bg); border-radius: 12px; padding: 4px; } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn { height: 34px; padding: 0 14px; border: none; background: transparent; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--cvf-text-muted); cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; justify-content: center; } .cv-vault-wrap .cv-mbar-types .cv-mtype-icon { width: 38px; padding: 0; } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn .dashicons { font-size: 18px; width: 18px; height: 18px; } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn:hover { color: var(--cvf-text); } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn.active { background: var(--cvf-card); color: var(--cvf-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn-reply { color: var(--cvf-primary); } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn-reply.active { color: var(--cvf-primary); } .cv-vault-wrap .cv-mbar-btn { height: 42px; padding: 0 16px; border: 1px solid var(--cvf-border); border-radius: 12px; background: var(--cvf-card); color: var(--cvf-text); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .cv-vault-wrap .cv-mbar-btn:hover { border-color: var(--cvf-primary); } .cv-mbar-btn .dashicons { font-size: 18px; width: 18px; height: 18px; } .cv-mbar-btn.cv-mbar-btn-on { border-color: var(--cvf-primary); color: var(--cvf-primary); } .cv-mbar-badge { background: var(--cvf-primary); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .cv-mbar-sortwrap { position: relative; } .cv-mbar-menu { position: absolute; top: 50px; right: 0; width: 190px; background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,.16); padding: 6px; z-index: 60; } .cv-vault-wrap .cv-mbar-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: transparent; text-align: left; font-size: 13.5px; color: var(--cvf-text); padding: 9px 12px; border-radius: 8px; cursor: pointer; } .cv-vault-wrap .cv-mbar-menu button:hover { background: var(--cvf-bg); } .cv-vault-wrap .cv-mbar-menu button.active { background: var(--cvf-hover-bg, #f3effe); color: var(--cvf-primary); font-weight: 600; } .cv-mbar-menu button.active::after { content: "\f147"; font-family: dashicons; } .cv-mbar-chipsrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .cv-mbar-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cv-mbar-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--cvf-primary); background: var(--cvf-hover-bg, #f3effe); border: 1px solid #e6dcff; border-radius: 20px; padding: 4px 10px; } .cv-mbar-chip .cv-mbar-chip-x { cursor: pointer; font-size: 14px; width: 14px; height: 14px; line-height: 14px; } .cv-mbar-clear { font-size: 12.5px; color: var(--cvf-text-muted); cursor: pointer; } .cv-mbar-clear:hover { color: var(--cvf-text); } .cv-mbar-count { margin-left: auto; font-size: 13px; color: var(--cvf-text-muted); } .cv-mbar-popover { position: absolute; top: 56px; right: 0; width: 420px; max-width: calc(100vw - 40px); background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: 16px; box-shadow: 0 16px 48px rgba(15,23,42,.18); padding: 18px; z-index: 60; } .cv-mbar-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cv-mbar-pop-head span:first-child { font-size: 15px; font-weight: 700; color: var(--cvf-text); } .cv-mbar-pop-head .dashicons { cursor: pointer; color: var(--cvf-text-muted); } .cv-mbar-group { margin-bottom: 14px; } .cv-mbar-group-label { font-size: 11px; font-weight: 700; color: var(--cvf-text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; } .cv-vault-wrap .cv-mbar-select { width: 100%; height: 38px; padding: 0 34px 0 12px; border-radius: 9px; border: 1px solid var(--cvf-border); background-color: #fff; color: var(--cvf-text); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .cv-vault-wrap .cv-mbar-select:focus { outline: none; border-color: var(--cvf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cvf-primary) 18%, transparent); } .cv-mbar-period { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; } .cv-mbar-period .cvf-period-btn { white-space: nowrap; flex: 0 0 auto; } .cv-mbar-dates { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .cv-vault-wrap .cv-mbar-dates .cvf-date-input { flex: 1; height: 36px; border: 1px solid var(--cvf-border); border-radius: 9px; padding: 0 10px; font-size: 13px; background: var(--cvf-card); color: var(--cvf-text); } .cv-mbar-pop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; border-top: 1px solid var(--cvf-border); padding-top: 14px; } .cv-mbar-reset { font-size: 13px; color: var(--cvf-text-muted); cursor: pointer; } .cv-mbar-reset:hover { color: var(--cvf-text); } .cv-vault-wrap .cv-mbar-apply { background: var(--cvf-primary); color: #fff; border: none; border-radius: 10px; height: 38px; padding: 0 20px; font-size: 14px; font-weight: 600; cursor: pointer; } @media (max-width: 640px) { .cv-mbar-popover { right: 0; left: 0; width: auto; } .cv-mbar-search { flex-basis: 100%; } } /* Tri par nom → liste à plat (sans regroupement par date) */ .cv-front-embeds-list.cv-mbar-flat .cv-media-month-separator, .cv-front-embeds-list.cv-mbar-flat .cv-media-week-separator { display: none !important; } /* v11.78.25 — Re-style des contrôles relocalisés dans le popover (l'ancien scope .cvf-toolbar ne s'applique plus) + couleur de sélection = thème du coffre (--cvf-primary). */ .cv-vault-wrap .cv-mbar-search input { padding-left: 40px !important; } .cv-mbar .cv-tag-filter-pills, .cv-mbar .cvf-owner-filters, .cv-mbar .cv-mbar-period { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cv-mbar .cv-mbar-period { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .cv-vault-wrap .cv-mbar .cv-tag-pill, .cv-vault-wrap .cv-mbar .cv-seg-btn, .cv-vault-wrap .cv-mbar .cvf-period-btn, .cv-vault-wrap .cv-mbar .cv-archive-filter-btn { height: 32px; padding: 0 13px; margin: 0; border: 1px solid var(--cvf-border); border-radius: 9px; background: var(--cvf-bg); color: var(--cvf-text); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: 0 0 auto; transition: all .12s; } .cv-vault-wrap .cv-mbar .cv-tag-pill:hover, .cv-vault-wrap .cv-mbar .cv-seg-btn:hover, .cv-vault-wrap .cv-mbar .cvf-period-btn:hover, .cv-vault-wrap .cv-mbar .cv-archive-filter-btn:hover { border-color: var(--cvf-primary); } .cv-vault-wrap .cv-mbar .cv-tag-pill.active, .cv-vault-wrap .cv-mbar .cv-seg-btn.active, .cv-vault-wrap .cv-mbar .cvf-period-btn.active, .cv-vault-wrap .cv-mbar .cv-archive-filter-btn.active { background: var(--cvf-primary); color: #fff; border-color: var(--cvf-primary); } .cv-mbar .cv-archive-count { background: rgba(255,255,255,.25); border-radius: 10px; padding: 0 6px; font-size: 11px; } /* Couleur de sélection = thème du coffre (et non un violet codé en dur) */ .cv-mbar-types .cv-mtype-btn.active, .cv-mbar-types .cv-mtype-btn-reply, .cv-mbar-types .cv-mtype-btn-reply.active { color: var(--cvf-primary); } .cv-mbar-badge { background: var(--cvf-primary); } .cv-mbar-menu button.active { color: var(--cvf-primary); } .cv-vault-wrap .cv-mbar-apply { background: var(--cvf-primary); } .cv-vault-wrap .cv-mbar-search input:focus { border-color: var(--cvf-primary); } /* Chips de filtres actifs — plus impactants (pleine couleur thème) */ .cv-mbar-chipsrow { margin-top: 12px; padding: 4px 0; } .cv-mbar-chip { background: var(--cvf-primary); color: #fff; border: none; border-radius: 20px; padding: 5px 6px 5px 12px; font-size: 12.5px; font-weight: 600; } .cv-mbar-chip .cv-mbar-chip-x { color: #fff; opacity: .8; } .cv-mbar-chip .cv-mbar-chip-x:hover { opacity: 1; } /* Respiration sous la barre de filtres avant le premier bloc de contenu */ .cvf-section-filters { padding-bottom: 6px; } .cv-vault-wrap .cv-front-embeds-list { margin-top: 16px; } /* Champs date : icône calendrier visible d'emblée + alignement */ .cv-mbar-dates label { font-size: 12px; color: var(--cvf-text-muted); } .cv-vault-wrap .cv-mbar-dates input[type="date"] { color: var(--cvf-text); } /* v11.78.26 — Période strictement sur UNE ligne + icône « Commentaire » neutre (pas d'orange résiduel) */ .cv-vault-wrap .cv-mbar .cv-mbar-period { flex-wrap: nowrap !important; overflow-x: visible; gap: 5px; } /* Périodes plus petites : respirent mieux et tiennent toutes sur une seule ligne */ .cv-vault-wrap .cv-mbar .cv-mbar-period .cvf-period-btn { height: 28px; padding: 0 10px; font-size: 12px !important; font-weight: 500 !important; } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn-reply { background: transparent !important; color: var(--cvf-text-muted) !important; } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn-reply:hover { color: var(--cvf-primary) !important; } .cv-vault-wrap .cv-mbar-types .cv-mtype-btn.active { background: var(--cvf-card) !important; color: var(--cvf-primary) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* v11.78.26 — tags plus compacts + ligne de dates qui ne déborde plus + compteurs sur les filtres */ /* v11.78.31 — tags de filtre plus petits + SANS gras (nom complet au survol via title) */ .cv-vault-wrap .cv-mbar .cv-tag-pill { height: 28px; padding: 0 10px; font-size: 12px !important; font-weight: 500 !important; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* v11.78.29 — tag de filtre SÉLECTIONNÉ : rempli de SA couleur + texte blanc + coche, pour qu'on voie clairement lequel est actif (avant : paraissait blanc/illisible). */ /* v11.78.30 — règle INDÉPENDANTE de .cv-mbar (le popover passe en position:fixed) : le tag de filtre sélectionné est rempli de SA couleur, texte BLANC forcé + coche. */ .cv-vault-wrap .cv-embeds-tag-btn.active { background: var(--cvf-primary) !important; border-color: var(--cvf-primary) !important; color: #fff !important; } .cv-vault-wrap .cv-embeds-tag-btn.cv-tag-color-blue.active { background: var(--cvf-primary-light) !important; border-color: var(--cvf-primary-light) !important; color: #fff !important; } .cv-vault-wrap .cv-embeds-tag-btn.cv-tag-color-green.active { background: var(--cvf-success) !important; border-color: var(--cvf-success) !important; color: #fff !important; } .cv-vault-wrap .cv-embeds-tag-btn.cv-tag-color-orange.active { background: var(--cvf-accent) !important; border-color: var(--cvf-accent) !important; color: #fff !important; } .cv-vault-wrap .cv-embeds-tag-btn.cv-tag-color-red.active { background: var(--cvf-danger) !important; border-color: var(--cvf-danger) !important; color: #fff !important; } .cv-vault-wrap .cv-embeds-tag-btn.cv-tag-color-purple.active { background: #8e44ad !important; border-color: #8e44ad !important; color: #fff !important; } .cv-vault-wrap .cv-embeds-tag-btn.active::before { content: "\2713"; margin-right: 5px; font-weight: 700; color: #fff !important; } /* v11.78.31 — Liste déroulante MULTI-sélection (filtre Dossier : gère 35+ dossiers) */ .cv-vault-wrap .cv-msel { position: relative; } .cv-vault-wrap .cv-msel-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--cvf-border); border-radius: 9px; background: #fff; color: var(--cvf-text); font-size: 12px; font-weight: 500; cursor: pointer; } .cv-vault-wrap .cv-msel-toggle:hover { border-color: var(--cvf-primary); } .cv-vault-wrap .cv-msel-toggle .cv-msel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-vault-wrap .cv-msel-toggle .dashicons { color: var(--cvf-text-muted); font-size: 16px; width: 16px; height: 16px; } .cv-vault-wrap .cv-msel-panel { /* v11.78.33 — superposition : recouvre les menus du dessous sans les pousser ; sa propre scrollbar si beaucoup de dossiers, sans dépasser la taille du filtre. */ position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 200px; overflow-y: auto; border: 1px solid var(--cvf-border); border-radius: 9px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 4px; } .cv-vault-wrap .cv-msel-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--cvf-text); } .cv-vault-wrap .cv-msel-opt:hover { background: var(--cvf-hover-bg); } .cv-vault-wrap .cv-msel-opt input[type="checkbox"] { margin: 0; flex: 0 0 auto; accent-color: var(--cvf-primary); width: auto; } .cv-vault-wrap .cv-msel-opt .cv-msel-opt-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-vault-wrap .cv-msel-opt .cv-msel-opt-cnt { flex: 0 0 auto; color: var(--cvf-text-muted); font-size: 11px; } .cv-mbar-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cv-vault-wrap .cv-mbar-dates input[type="date"] { flex: 1 1 130px; min-width: 0; box-sizing: border-box; } .cv-mbar-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; margin-left: 2px; border-radius: 8px; font-size: 10.5px; font-weight: 700; line-height: 1; background: rgba(0,0,0,.07); color: var(--cvf-text-muted); } /* v11.78.28 — sur une puce active (fond couleur du thème), le compteur doit RESTER lisible : pastille blanche pleine + chiffre dans la couleur du thème (pas blanc sur blanc). */ .cv-vault-wrap .cv-mbar .active .cv-mbar-cnt, .cv-vault-wrap .cv-mbar .cv-mtype-btn.active .cv-mbar-cnt, .cv-vault-wrap .cv-mbar-types .cv-mtype-btn.active .cv-mbar-cnt { background: #fff !important; color: var(--cvf-primary) !important; } /* ═══════════════════════════════════════════ FRONTEND TOOLBAR — admin-style filter bar All selectors use .cv-vault-wrap .cvf-toolbar to beat the global input reset specificity ═══════════════════════════════════════════ */ .cv-vault-wrap .cvf-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: var(--cvf-bg, #f8f9fb); border-radius: 10px; border: 1px solid var(--cvf-border, #e1e5eb); margin-bottom: 10px; } .cv-vault-wrap .cvf-toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Search wrapper */ .cv-vault-wrap .cvf-doc-search-wrapper { position: relative; display: flex; align-items: center; } .cv-vault-wrap .cvf-doc-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--cvf-text-muted, #8a94a6); font-size: 13px !important; width: 13px !important; height: 13px !important; pointer-events: none; z-index: 1; } .cv-vault-wrap .cvf-doc-search-wrapper:focus-within .cvf-doc-search-icon { color: var(--cvf-primary, #1e3a5f); } .cv-vault-wrap input[type="text"].cvf-doc-search { padding: 4px 8px 4px 32px !important; border: 1px solid var(--cvf-border, #d0d5dd) !important; border-radius: 6px !important; font-size: 12px !important; font-family: inherit !important; background: #fff !important; outline: none !important; transition: border-color .2s; box-sizing: border-box !important; width: 200px !important; height: 30px !important; line-height: 1.3 !important; } .cv-vault-wrap input[type="text"].cvf-doc-search:focus { border-color: var(--cvf-primary, #1e3a5f) !important; } /* Type filters inline with search */ .cv-vault-wrap .cvf-toolbar-row .cv-file-type-filters { display: flex; gap: 4px; margin-bottom: 0; flex-wrap: wrap; margin-left: 4px; } .cv-vault-wrap .cvf-toolbar-row .cv-ftype-btn { padding: 5px 11px !important; border: 1.5px solid var(--cvf-border, #d0d5dd) !important; border-radius: 6px !important; font-size: 12px !important; background: #fff !important; color: var(--cvf-text-muted, #666) !important; cursor: pointer; font-weight: 500 !important; font-family: inherit !important; transition: all .15s; } .cv-vault-wrap .cvf-toolbar-row .cv-ftype-btn:hover { border-color: var(--cvf-text-muted, #767676) !important; color: var(--cvf-text, #333) !important; } .cv-vault-wrap .cvf-toolbar-row .cv-ftype-btn.active { border-color: var(--cvf-primary, #1e3a5f) !important; background: #e8f0fe !important; color: var(--cvf-primary, #1e3a5f) !important; } /* v11.78.28 — icône « Commentaire » NEUTRE comme les autres icônes de type (Dragan : pas de bordure/fond orange spécifique). */ .cv-vault-wrap .cv-mtype-btn-reply { border: 1px solid transparent !important; color: var(--cvf-text-muted) !important; background: transparent !important; font-weight: 600 !important; box-shadow: none !important; } .cv-vault-wrap .cv-mtype-btn-reply:hover { background: var(--cvf-hover-bg) !important; color: var(--cvf-primary) !important; box-shadow: none !important; } .cv-vault-wrap .cv-mtype-btn-reply.active { background: var(--cvf-card) !important; color: var(--cvf-primary) !important; border-color: var(--cvf-border) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; } /* Toolbar labels */ .cv-vault-wrap .cvf-toolbar-label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .5px; color: var(--cvf-text-muted, #8a94a6) !important; margin-right: 2px; white-space: nowrap; } /* Toolbar divider */ .cv-vault-wrap .cvf-toolbar-divider { width: 1px; height: 16px; background: var(--cvf-border, #e1e5eb); margin: 0 4px; flex-shrink: 0; } /* Tag pills in toolbar */ .cv-vault-wrap .cvf-toolbar-row .cv-tag-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; } .cv-vault-wrap .cvf-toolbar-row .cv-tag-pill { padding: 3px 9px !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 600 !important; cursor: pointer; border: 1px solid transparent !important; transition: all .15s; } .cv-vault-wrap .cvf-toolbar-row .cv-tag-pill.active { background: var(--cvf-primary, #1e3a5f) !important; color: #fff !important; border-color: var(--cvf-primary, #1e3a5f) !important; box-shadow: none !important; } /* Tag overflow / "+N" button */ .cv-tag-overflow { display: none !important; } .cv-vault-wrap .cvf-toolbar .cv-tag-filter-pills.cvf-tags-expanded .cv-tag-overflow { display: inline-flex !important; } .cv-vault-wrap .cvf-tag-more-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 11px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 6px !important; background: var(--cvf-border, #e5e7eb) !important; color: var(--cvf-text-muted, #64748b) !important; border: none !important; cursor: pointer; transition: background .15s, color .15s; line-height: 1.4; white-space: nowrap; } .cv-vault-wrap .cvf-tag-more-btn:hover { background: #dbeafe !important; color: var(--cvf-primary, #1e3a5f) !important; } /* Owner filters */ .cv-vault-wrap .cvf-owner-filters { display: flex; align-items: center; gap: 3px; } .cv-vault-wrap .cvf-owner-filters .cv-seg-btn { padding: 5px 12px !important; border: 1px solid var(--cvf-border, #e1e5eb) !important; border-radius: 20px !important; font-size: 12px !important; font-family: inherit !important; font-weight: 500 !important; color: var(--cvf-text-muted, #666) !important; background: #fff !important; cursor: pointer; transition: all .15s; box-shadow: none !important; } .cv-vault-wrap .cvf-owner-filters .cv-seg-btn:hover { border-color: var(--cvf-primary, #1e3a5f) !important; color: var(--cvf-primary, #1e3a5f) !important; } .cv-vault-wrap .cvf-owner-filters .cv-seg-btn.active { border-color: var(--cvf-primary, #1e3a5f) !important; background: #e8f0fe !important; color: var(--cvf-primary, #1e3a5f) !important; font-weight: 600 !important; } /* Period pills */ .cv-vault-wrap .cvf-period-pills { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; } .cv-vault-wrap .cvf-toolbar .cvf-period-btn { padding: 4px 10px !important; border: none !important; border-radius: 5px !important; font-size: 12px !important; font-family: inherit !important; font-weight: 500 !important; color: var(--cvf-text-muted, #8a94a6) !important; background: transparent !important; cursor: pointer !important; transition: all .15s !important; } .cvf-period-btn:hover { color: var(--cvf-text, #333) !important; background: var(--cvf-border, #e8ecf0) !important; } .cv-vault-wrap .cvf-toolbar .cvf-period-btn:hover { color: var(--cvf-text, #333) !important; background: var(--cvf-border, #e8ecf0) !important; } .cv-vault-wrap .cvf-toolbar .cvf-period-btn.active { color: var(--cvf-primary, #1e3a5f) !important; background: #e0eaf5 !important; font-weight: 600 !important; } /* Separator & date inputs */ .cv-vault-wrap .cvf-toolbar-sep { color: var(--cvf-text-muted, #8a94a6) !important; font-size: 13px !important; line-height: 1; user-select: none; margin: 0 4px; flex-shrink: 0; } .cv-vault-wrap input[type="text"].cvf-date-input { padding: 5px 14px !important; border: 1px solid var(--cvf-border, #d0d5dd) !important; border-radius: 20px !important; font-size: 12px !important; font-family: inherit !important; color: var(--cvf-text, #333) !important; background: #fff !important; width: 140px !important; height: 30px !important; box-sizing: border-box !important; line-height: 1.3 !important; } .cv-vault-wrap input[type="text"].cvf-date-input:focus { border-color: var(--cvf-primary, #1e3a5f) !important; outline: none !important; } /* Section header gradients per block type — frontend */ .cvf-section[data-block="documents"] > .cvf-section-header { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-left: 4px solid #3b82f6; } .cv-vault-wrap .cvf-section[data-block="documents"] > .cvf-section-header h2 { color: #1e40af; } /* bouton style admin uniforme — pas de couleur par section */ .cvf-section[data-block="embeds"] > .cvf-section-header { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); border-left: 4px solid #a855f7; } .cv-vault-wrap .cvf-section[data-block="embeds"] > .cvf-section-header h2 { color: #6b21a8; } .cvf-section[data-block="cards"] > .cvf-section-header { background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); border-left: 4px solid #eab308; } .cv-vault-wrap .cvf-section[data-block="cards"] > .cvf-section-header h2 { color: #854d0e; } .cvf-section[data-block="links"] > .cvf-section-header { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 4px solid #22c55e; } .cv-vault-wrap .cvf-section[data-block="links"] > .cvf-section-header h2 { color: #166534; } .cvf-section[data-block="notepad"] > .cvf-section-header { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-left: 4px solid #f97316; } .cv-vault-wrap .cvf-section[data-block="notepad"] > .cvf-section-header h2 { color: #9a3412; } .cvf-section[data-block="tags"] > .cvf-section-header { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); border-left: 4px solid #ec4899; } .cv-vault-wrap .cvf-section[data-block="tags"] > .cvf-section-header h2 { color: #9d174d; } .cvf-section[data-block="activite"] > .cvf-section-header { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-left: 4px solid #0ea5e9; } .cv-vault-wrap .cvf-section[data-block="activite"] > .cvf-section-header h2 { color: #0369a1; } .cvf-section[data-block="parametres"] > .cvf-section-header { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-left: 4px solid #64748b; } .cv-vault-wrap .cvf-section[data-block="parametres"] > .cvf-section-header h2 { color: #334155; } .cvf-section[data-block="folders"] > .cvf-section-header { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 4px solid #22c55e; } .cv-vault-wrap .cvf-section[data-block="folders"] > .cvf-section-header h2 { color: #166534; } /* Aérer les blocs internes de Paramètres */ .cv-settings-body { padding: 18px; } .cv-settings-body .cli-settings-card { margin-bottom: 18px; } .cv-settings-body .cli-settings-card:last-child { margin-bottom: 0; } /* Content area inside sections — uniform horizontal padding */ .cvf-section .cv-vault-files, .cvf-section .cv-media-grid, .cvf-section .cv-cards-grid, .cvf-section .cv-links-list, .cvf-section .cv-link-form, .cvf-section .cv-embed-form, .cvf-section .cv-card-form, .cvf-section .cv-note-thread, .cvf-section .cv-note-input, .cvf-section .cv-notepad-wrap .cv-notepad-messages, .cvf-section .cv-load-more-wrap { padding-left: 20px; padding-right: 20px; } .cvf-section .cv-vault-files { padding-bottom: 10px; } .cvf-section .cv-load-more-wrap { padding-bottom: 16px; } /* ─── Dashboard / Accueil ─── */ .cv-section-title { font-size: 15px; font-weight: 600; color: var(--cvf-text); margin: 0 0 14px; padding: 0; } .cv-dashboard-list { display: flex; flex-direction: column; gap: 6px; } .cv-dashboard-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: 10px; transition: all .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .cv-dashboard-clickable { cursor: pointer; user-select: none; } /* Old dashboard items (outside cli-blocks) keep the slide effect */ .cv-dashboard-item.cv-dashboard-clickable:hover { border-color: var(--cvf-primary-light); background: rgba(var(--cvf-primary-rgb), 0.03); transform: translateX(3px); box-shadow: 0 2px 8px rgba(var(--cvf-primary-rgb), 0.1); } .cv-dashboard-item.cv-dashboard-clickable:active { transform: translateX(1px); background: rgba(var(--cvf-primary-rgb), 0.06); } /* Dashboard block items — ONLY background changes, everything else locked */ .cv-vault-wrap .cli-item.cv-dashboard-clickable:hover, .cv-vault-wrap .cli-act-item.cv-dashboard-clickable:hover, .cv-vault-wrap .cli-item:hover, .cv-vault-wrap .cli-act-item:hover { transform: none !important; box-shadow: none !important; } .cv-vault-wrap .cli-item.cv-dashboard-clickable:active, .cv-vault-wrap .cli-act-item.cv-dashboard-clickable:active { transform: none !important; background: rgba(var(--cvf-primary-rgb), 0.06) !important; } .cv-dashboard-icon { font-size: 20px; flex-shrink: 0; } .cv-dashboard-info { flex: 1; min-width: 0; } .cv-dashboard-info strong { font-size: 14px; color: var(--cvf-text); display: block; } .cv-dashboard-snippet { font-size: 12px; color: var(--cvf-text-muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-dashboard-meta { font-size: 11px; color: var(--cvf-text-muted); margin-top: 2px; display: block; } .cv-dashboard-arrow { color: var(--cvf-text-muted); flex-shrink: 0; opacity: 0; transition: opacity .15s; } .cv-dashboard-clickable:hover .cv-dashboard-arrow { opacity: 1; } .cv-dashboard-preview-btn { flex-shrink: 0; margin-right: 4px; opacity: 0.5; transition: opacity 0.15s; } .cv-dashboard-item:hover .cv-dashboard-preview-btn { opacity: 1; } /* ─── Deep link highlight (email notifications) ─── */ @keyframes cv-deeplink-glow { 0% { box-shadow: 0 0 0 0 rgba(232, 145, 58, 0.7); background-color: #fff8e1; } 25% { box-shadow: 0 0 0 6px rgba(232, 145, 58, 0.4); background-color: #fff3cd; } 50% { box-shadow: 0 0 0 3px rgba(232, 145, 58, 0.6); background-color: #fff8e1; } 75% { box-shadow: 0 0 0 6px rgba(232, 145, 58, 0.4); background-color: #fff3cd; } 100% { box-shadow: 0 0 0 0 rgba(232, 145, 58, 0.7); background-color: #fff8e1; } } .cv-deeplink-highlight { animation: cv-deeplink-glow 1.5s ease-in-out infinite !important; border: 2px solid var(--cvf-accent) !important; border-radius: 10px !important; position: relative; z-index: 10; } /* ─── Tags ─── */ .cv-tags-section { } .cv-tags-list { display: flex; flex-wrap: wrap; gap: 8px; } .cv-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: default; } .cv-tags-list .cv-tag-color-blue { background: var(--cvf-tag-blue-bg); color: var(--cvf-tag-blue); } .cv-tags-list .cv-tag-color-green { background: var(--cvf-tag-green-bg); color: var(--cvf-tag-green); } .cv-tags-list .cv-tag-color-orange { background: var(--cvf-tag-orange-bg); color: var(--cvf-tag-orange); } .cv-tags-list .cv-tag-color-red { background: var(--cvf-tag-red-bg); color: var(--cvf-tag-red); } .cv-tags-list .cv-tag-color-purple { background: var(--cvf-tag-purple-bg); color: var(--cvf-tag-purple); } .cv-tag-delete { background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; color: inherit; opacity: 0.6; padding: 0 2px; margin-left: 2px; } .cv-tag-delete:hover { opacity: 1; } .cv-inline-confirm { background: var(--cvf-success); color: #fff; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; margin-left: 4px; font-size: 14px; font-weight: bold; line-height: 1; transition: background .15s; } .cv-inline-confirm:hover { background: #219a52; } .cv-tag-input { padding: 6px 12px; border: 1px solid var(--cvf-border); border-radius: 8px; font-size: 13px; background: var(--cvf-card); color: var(--cvf-text); min-width: 140px; } .cv-tag-color-select { padding: 6px 8px; border: 1px solid var(--cvf-border); border-radius: 8px; font-size: 12px; background: var(--cvf-card); color: var(--cvf-text); } .cv-tags-empty { font-size: 13px; color: var(--cvf-text-muted); margin: 0; } /* ─── Settings / Paramètres ─── */ .cv-settings-section { } .cv-settings-desc { font-size: 13px; color: var(--cvf-text-muted); margin: 0 0 16px; } .cv-tag-add-form { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; margin-top: 14px; margin-bottom: 0; padding: 14px 16px; background: var(--cvf-hover-bg, #f8fafc); border: 1px solid var(--cvf-border); border-radius: 10px; } .cv-tag-add-form .cv-tag-input { flex: 1 1 50%; min-width: 0; } .cv-tag-add-form .dbtn { flex: 0 0 auto; white-space: nowrap; } .cv-tags-wrap { margin-top: 16px; } /* ===== v11.86.271 — Gestion des tags repensée : ajout compact, chips modernes, distinction admin ===== */ /* Formulaire d'ajout compact (icône + champ + bouton sur une ligne) */ .cv-vault-wrap .cv-tagm-add { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 5px 5px 5px 14px; background: var(--cvf-card, #fff); border: 1px solid var(--cvf-border, #e8ecf0); border-radius: 12px; max-width: 460px; } .cv-vault-wrap .cv-tagm-add-ico { color: var(--cvf-text-muted, #94a3b8); font-size: 18px; width: 18px; height: 18px; flex: 0 0 auto; } .cv-vault-wrap .cv-tagm-input { flex: 1 1 auto; border: none !important; background: transparent !important; padding: 8px 4px !important; min-width: 0 !important; font-size: 14px; box-shadow: none !important; } .cv-vault-wrap .cv-tagm-input:focus { outline: none; box-shadow: none !important; } .cv-vault-wrap .cv-tagm-add-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--cvf-primary, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .15s; } .cv-vault-wrap .cv-tagm-add-btn .dashicons { font-size: 16px; width: 16px; height: 16px; } .cv-vault-wrap .cv-tagm-add-btn:hover { filter: brightness(1.08); } /* Chips modernes + neutralisation du rainbow (plus de rotation de couleurs) */ .cv-vault-wrap .cv-tags-list .cv-tag, .cv-vault-wrap .cv-tags-list .cv-tag[class*="cv-tag-color-"] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--cvf-border, #e8ecf0); background: var(--cvf-bg-soft, #f1f5f9) !important; color: var(--cvf-text, #334155) !important; } .cv-vault-wrap .cv-tags-list .cv-tag .cv-tag-name { line-height: 1; } .cv-vault-wrap .cv-tags-list .cv-tag-count { font-size: 11px; font-weight: 700; color: var(--cvf-text-muted, #94a3b8); background: rgba(15,23,42,.06); border-radius: 999px; padding: 1px 7px; } .cv-vault-wrap .cv-tag-acts { display: inline-flex; align-items: center; gap: 1px; margin-left: 2px; opacity: 0; max-width: 0; overflow: hidden; transition: opacity .15s, max-width .15s; } .cv-vault-wrap .cv-tags-list .cv-tag:hover .cv-tag-acts, .cv-vault-wrap .cv-tags-list .cv-tag.cv-tag-editing .cv-tag-acts { opacity: 1; max-width: 64px; } .cv-vault-wrap .cv-tag-acts button { background: none; border: none; cursor: pointer; color: var(--cvf-text-muted, #94a3b8); padding: 2px; display: inline-flex; border-radius: 6px; } .cv-vault-wrap .cv-tag-acts button:hover { color: var(--cvf-primary, #2563eb); background: rgba(15,23,42,.06); } .cv-vault-wrap .cv-tag-acts .cv-tag-delete:hover { color: var(--cvf-danger, #e74c3c); } .cv-vault-wrap .cv-tag-acts .dashicons { font-size: 15px; width: 15px; height: 15px; } .cv-vault-wrap .cv-tag-rename-input { border: 1px solid var(--cvf-primary, #2563eb); border-radius: 6px; padding: 2px 6px; font-size: 13px; font-weight: 600; background: #fff; } /* Tag ADMINISTRATEUR : cadenas + liseré + teinte primaire (distinct des tags client) */ .cv-vault-wrap .cv-tags-list .cv-tag.cv-tag-admin, .cv-vault-wrap .cv-tags-list .cv-tag.cv-tag-admin[class*="cv-tag-color-"] { background: #eaf1fd !important; color: var(--cvf-primary, #2563eb) !important; border-color: rgba(37,99,235,.35); box-shadow: inset 3px 0 0 var(--cvf-primary, #2563eb); padding-left: 11px; } .cv-vault-wrap .cv-tag-lock { font-size: 13px; width: 13px; height: 13px; color: var(--cvf-primary, #2563eb); flex: 0 0 auto; } .cv-vault-wrap .cv-tagm-legend { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 12px; color: var(--cvf-text-muted, #94a3b8); } .cv-vault-wrap .cv-tagm-legend .dashicons { font-size: 13px; width: 13px; height: 13px; color: var(--cvf-primary, #2563eb); } /* Fin du rainbow sur les chips de contenu (fiches / grille tags / inline / aperçu) */ .cv-vault-wrap .cv-fiche-tag, .cv-vault-wrap .cv-tags-chip, .cv-vault-wrap .cv-inline-tag { background: var(--cvf-bg-soft, #f1f5f9) !important; color: var(--cvf-text, #475569) !important; } .cv-btn-export { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; background: var(--cvf-primary); border: none; cursor: pointer; transition: background .15s; } .cv-btn-export:hover { background: var(--cvf-primary-light); } /* ─── Button variants ─── */ .cv-btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--cvf-text); background: var(--cvf-card); border: 1px solid var(--cvf-border); cursor: pointer; transition: all .15s; } .cv-btn-secondary:hover { border-color: var(--cvf-primary-light); color: var(--cvf-primary); } .cv-btn-sm { padding: 6px 14px; font-size: 12px; } /* ─── v11.69.6 — Theme-proof button hardening ─── Some themes style bare