/** * 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)}}/* ── Champ avec bouton toggle mot de passe (auth + paramètres) ─────────── */ /* Le wrapper prend l'apparence visuelle de l'input:le bouton est un sibling flex du <input>et n'est jamais dans son DOM — aucun conflit avec les gestionnaires de mots de passe (Dashlane,Bitwarden,etc.) */ .ttm-input-wrap{display:flex;align-items:center;border:1px solid var(--ttm-color-border);border-radius:var(--ttm-radius);background:var(--ttm-color-bg);transition:border-color 0.2s}.ttm-input-wrap:focus-within{border-color:var(--ttm-color-primary)}.ttm-input-wrap .ttm-form__input,.ttm-input-wrap .ttm-input{flex:1;min-width:0;border:none;background:transparent;border-radius:0;padding-right:0.4rem}.ttm-input-wrap .ttm-form__input:focus,.ttm-input-wrap .ttm-input:focus{outline:none;border-color:transparent}.ttm-toggle-pwd{flex-shrink:0;align-self:stretch;background:none;border:none;cursor:pointer;padding:0 0.5rem;color:var(--ttm-color-muted);display:inline-flex;align-items:center;justify-content:center}.ttm-eye-icon{display:block;width:1.125rem;height:1.125rem;font-size:0;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") center / contain no-repeat}.ttm-toggle-pwd.is-revealed .ttm-eye-icon{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E") center / contain no-repeat}