/** * members.css — Styles du plugin TechTalk Members. * Réutilise les variables CSS du thème (définies dans le thème). * Le contenu détaillé est complété session par session. */ /* ----------------------------------------------------------------------- Variables locales (héritées du thème si disponibles) ----------------------------------------------------------------------- */:root{/* Variables mapped onto the theme's actual CSS custom properties. Dark-mode values are the defaults (theme dark = site default). */ --ttm-color-primary:var(--color-accent,#775c31);--ttm-color-text:var(--color-text,#e6edf3);--ttm-color-bg:var(--color-background,#0b1a22);--ttm-color-surface:#131e2b;/* card/section surface — slightly elevated */ --ttm-color-border:rgba(255,255,255,0.25);--ttm-color-error:var(--tt-color-error,#e74c3c);--ttm-color-success:var(--tt-color-success,#27ae60);--ttm-color-muted:var(--color-text-secondary,#8b949e);--ttm-color-warning:#f39c12;--ttm-color-bg-hover:rgba(255,255,255,0.06);--ttm-color-bg-active:rgba(255,255,255,0.12);--ttm-scrollbar-thumb:rgba(119,92,49,0.3);--ttm-radius:8px;--ttm-font-size-base:1rem;--ttm-msg-theirs-bg:rgba(255,255,255,0.1)}html.light-mode{--ttm-color-text:var(--color-text,#4A3B31);--ttm-color-bg:var(--color-background,#FAF0E6);--ttm-color-surface:var(--color-component-background,#EADDCA);--ttm-color-border:rgba(119,92,49,0.4);--ttm-color-muted:var(--color-text-secondary,#5D4E42);--ttm-color-bg-hover:rgba(0,0,0,0.04);--ttm-color-bg-active:rgba(0,0,0,0.08);--ttm-scrollbar-thumb:rgba(119,92,49,0.2);--ttm-msg-theirs-bg:rgba(119,92,49,0.12)}/* ----------------------------------------------------------------------- Layout de base des pages plugin ----------------------------------------------------------------------- */ .ttm-page{padding:2rem 1rem}.ttm-container{max-width:640px;margin:0 auto}/* ----------------------------------------------------------------------- Badge compteur non-lu (header) ----------------------------------------------------------------------- */ .ttm-unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background-color:var(--ttm-color-primary);color:#fff;font-size:0.7rem;font-weight:700;line-height:1}.ttm-unread-badge[hidden]{display:none}/* ----------------------------------------------------------------------- Formulaires (base) ----------------------------------------------------------------------- */ .ttm-form{display:flex;flex-direction:column;gap:1rem}.ttm-form__field{display:flex;flex-direction:column;gap:0.25rem}.ttm-form__label{font-size:0.875rem;font-weight:600;color:var(--ttm-color-text)}.ttm-form__input{padding:0.6rem 0.875rem;border:1px solid var(--ttm-color-border);border-radius:var(--ttm-radius);font-size:var(--ttm-font-size-base);background:var(--ttm-color-bg);color:var(--ttm-color-text);transition:border-color 0.15s ease}.ttm-form__input:focus{outline:none;border-color:var(--ttm-color-primary)}.ttm-form__error{font-size:0.8rem;color:var(--ttm-color-error)}.ttm-form__success{font-size:0.8rem;color:var(--ttm-color-success)}/* ----------------------------------------------------------------------- Indicateurs force mot de passe (puces) ----------------------------------------------------------------------- */ .ttm-pwd-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.2rem}.ttm-pwd-rule{font-size:0.8rem;color:var(--ttm-color-muted);display:flex;align-items:center;gap:0.4rem}.ttm-pwd-rule::before{content:'●';font-size:0.5rem;flex-shrink:0}.ttm-pwd-rule--ok{color:var(--ttm-color-success)}.ttm-pwd-rule--error{color:var(--ttm-color-error)}/* ----------------------------------------------------------------------- Boutons ----------------------------------------------------------------------- */ .ttm-btn{display:inline-flex;align-items:center;justify-content:center;padding:0.6rem 1.5rem;border:none;border-radius:var(--ttm-radius);font-size:var(--ttm-font-size-base);font-weight:600;cursor:pointer;transition:opacity 0.15s ease;position:relative;isolation:isolate}.ttm-btn:disabled{opacity:0.5;cursor:not-allowed}.ttm-btn--primary{background-color:var(--ttm-color-primary);color:#fff;border-radius:0;clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm))}.ttm-btn--secondary{background-color:transparent;border:none;color:var(--ttm-color-text);border-radius:0;clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm))}.ttm-btn--secondary::before{content:'';position:absolute;inset:0;background:var(--ttm-color-border);clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));z-index:-1}.ttm-btn--secondary::after{content:'';position:absolute;inset:1px;background:var(--ttm-color-bg);clip-path:polygon(calc(var(--cut-sm) - 1px) 0,100% 0,100% calc(100% - var(--cut-sm) + 1px),calc(100% - var(--cut-sm) + 1px) 100%,0 100%,0 calc(var(--cut-sm) - 1px));z-index:-1}.ttm-btn--full{width:100%}/* ----------------------------------------------------------------------- Utilitaires partagés — messages,input standalone ----------------------------------------------------------------------- */ .ttm-message{padding:0.75rem 1rem;border-radius:var(--ttm-radius);font-size:0.9rem;margin-top:0.75rem}.ttm-message--error{background:rgba(231,76,60,0.12);color:var(--ttm-color-error,#e74c3c);border:1px solid rgba(231,76,60,0.3)}.ttm-message--success{background:rgba(39,174,96,0.12);color:var(--ttm-color-success,#27ae60);border:1px solid rgba(39,174,96,0.3)}/* Input standalone (hors .ttm-input-wrap) */ .ttm-input{width:100%;padding:0.65rem 0.9rem;border:1px solid var(--ttm-color-border);border-radius:var(--ttm-radius);font-size:var(--ttm-font-size-base,1rem);background:var(--ttm-color-bg);color:var(--ttm-color-text);box-sizing:border-box;transition:border-color 0.2s}.ttm-input:focus{outline:none;border-color:var(--ttm-color-primary)}.ttm-input::placeholder{color:var(--ttm-color-muted);opacity:0.7}/* ── Badges header non-lu (styles pour les éléments du thème) ── */ .avatar-unread-counter{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ttm-color-error);color:#fff;font-size:0.65rem;font-weight:700;line-height:1;border:2px solid var(--color-background,#0b1a22);box-sizing:content-box}.avatar-unread-counter[hidden]{display:none}.unread-messages-counter{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ttm-color-error);color:#fff;font-size:0.65rem;font-weight:700;margin-left:auto;flex-shrink:0}.unread-messages-counter[hidden]{display:none}/* ── Toast notifications ── */ .ttm-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--ttm-color-surface);border:1px solid var(--ttm-color-border);color:var(--ttm-color-text);padding:0.5rem 1.25rem;border-radius:var(--ttm-radius);font-size:0.875rem;z-index:99999;white-space:nowrap;pointer-events:none;animation:ttm-toast-in 0.2s ease both}.ttm-toast--error{border-color:var(--ttm-color-error);color:var(--ttm-color-error)}@keyframes ttm-toast-in{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}