/* ═══════════════════════════════════════════ 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) */ .cv-vault-wrap, .cv-vault-wrap.cv-theme-navy { --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; 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: 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: 76px !important; height: 76px !important; min-width: 76px !important; min-height: 76px !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: center; 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; padding: 10px 14px 10px 35px !important; border: 1.5px solid var(--cvf-border) !important; border-radius: 10px !important; font-size: 13px !important; color: var(--cvf-text) !important; background: var(--cvf-card) !important; font-family: inherit !important; 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; } /* ─── 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; } /* ─── 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 ─── */ .cv-login-wrap { display: flex; justify-content: center; padding: 60px 20px; } .cv-login-box { background: var(--cvf-card); border: 1px solid var(--cvf-border); border-radius: 20px; padding: 48px 40px; max-width: 420px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,0.08); position: relative; } .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; } .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: 14px; background: linear-gradient(135deg, var(--cvf-primary), var(--cvf-primary-light)); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; align-items: center; justify-content: center; gap: 8px; } .cv-login-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(30,58,95,0.3); } .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: 24px; 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; } .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); } .cv-vault-upload-submit { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 28px !important; background: var(--cvf-primary, #1e3a5f) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; font-family: inherit !important; cursor: pointer !important; transition: all .2s !important; box-shadow: 0 3px 12px rgba(30,58,95,.25) !important; white-space: nowrap !important; } .cv-vault-upload-submit:hover { background: #264d7a !important; box-shadow: 0 5px 16px rgba(30,58,95,.35) !important; transform: translateY(-1px) !important; } .cv-vault-upload-submit:disabled { opacity: 0.4 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !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; } /* 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: 24px 24px 20px; 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: 24px 24px 20px; 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; } .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.7); 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; } .cv-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; } .cv-preview-body iframe { width: 100%; height: 100%; border: none; } .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; } .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; } .cvf-section-header-actions .cv-add-btn svg { width: 12px; height: 12px; } .cvf-section-filters { padding: 10px 16px 0; } /* ═══════════════════════════════════════════ 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; } /* "Réponses admin" accent variant — more prominent */ .cv-vault-wrap .cv-mtype-btn-reply { border: 2px solid var(--cvf-accent, #e8913a) !important; color: var(--cvf-accent, #e8913a) !important; background: #fef8f0 !important; font-weight: 600 !important; box-shadow: 0 0 0 1px rgba(232,145,58,.1), 0 1px 3px rgba(232,145,58,.12); } .cv-vault-wrap .cv-mtype-btn-reply:hover { background: rgba(232, 145, 58, .15) !important; box-shadow: 0 0 0 2px rgba(232,145,58,.2), 0 2px 6px rgba(232,145,58,.15); } .cv-vault-wrap .cv-mtype-btn-reply.active { background: var(--cvf-accent, #e8913a) !important; color: #fff !important; border-color: var(--cvf-accent, #e8913a) !important; box-shadow: 0 2px 8px rgba(232,145,58,.3); } /* 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: 20px; } .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