/*================================================================================== USER ACCOUNT MODULE — STYLES Ye folder har template ke sath chalta hai, is liye yahan koi bhi rang hard-code nahi hai. Sab kuch --ua-* variables se aata hai, aur wo variables active template ke apne --mb-* / --tw-* se bharte hain, ek mehfooz fallback ke sath. Yani naya template banayen aur usme ye teen char variables define kar den — account ke safhe khud us template jaise lagne lag jayenge. Prefix "ua-" (user account) — kisi template ki class se nahi takrata. ==================================================================================*/ :root{ --ua-text: var(--mb-text, #111827); --ua-soft-text: var(--mb-text-soft, #4b5563); --ua-muted: var(--mb-muted, #6b7280); --ua-faint: var(--mb-faint, #9ca3af); --ua-body: var(--mb-body, #ffffff); --ua-card: var(--mb-card, #ffffff); --ua-soft: var(--mb-soft, #f3f4f6); --ua-border: var(--mb-border, #e5e7eb); --ua-link: var(--mb-link, #4f46e5); --ua-radius: var(--mb-radius, 12px); --ua-ease: 160ms ease; --ua-success: #15803d; --ua-success-bg:#dcfce7; --ua-danger: #b91c1c; --ua-danger-bg: #fee2e2; --ua-warn: #b45309; --ua-warn-bg: #fef3c7; } /*---------------------------------------------------------------- 001 — LAYOUT ----------------------------------------------------------------*/ .ua-wrap{max-width:1140px;margin:0 auto;padding:38px 20px 64px;} .ua-layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:26px;align-items:start;} .ua-main{min-width:0;display:flex;flex-direction:column;gap:20px;} .ua-page-head{margin-bottom:2px;} .ua-page-title{font-size:25px;font-weight:700;margin:0;color:var(--ua-text);letter-spacing:-.3px;} @media (max-width:900px){ .ua-layout{grid-template-columns:minmax(0,1fr);} } /*---------------------------------------------------------------- 002 — CARD ----------------------------------------------------------------*/ .ua-card{ background:var(--ua-card);border:1px solid var(--ua-border); border-radius:var(--ua-radius);padding:20px; } .ua-card-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin:-4px 0 16px;padding-bottom:13px;border-bottom:1px solid var(--ua-border); } .ua-card-title{font-size:16px;font-weight:650;margin:0;color:var(--ua-text);} .ua-count{ font-size:12px;font-weight:600;color:var(--ua-muted); background:var(--ua-soft);border-radius:20px;padding:2px 10px; } /*---------------------------------------------------------------- 003 — SIDEBAR ----------------------------------------------------------------*/ .ua-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px;} .ua-user-card{text-align:center;} .ua-avatar{ display:inline-flex;align-items:center;justify-content:center; width:62px;height:62px;border-radius:50%;margin-bottom:12px; background:var(--ua-link);color:#fff;font-size:24px;font-weight:700; } .ua-user-name{font-size:16px;font-weight:650;margin:0 0 3px;color:var(--ua-text);word-break:break-word;} .ua-user-mail{font-size:13px;margin:0;color:var(--ua-muted);word-break:break-all;} .ua-user-since{font-size:12px;margin:8px 0 0;color:var(--ua-faint);} .ua-menu{padding:8px;} .ua-menu-item{ display:flex;align-items:center;gap:11px;width:100%; padding:10px 12px;border:0;border-radius:9px;background:transparent; font-size:14.5px;font-weight:500;color:var(--ua-soft-text); text-align:left;text-decoration:none;cursor:pointer; transition:background var(--ua-ease), color var(--ua-ease); } .ua-menu-item:hover{background:var(--ua-soft);color:var(--ua-text);text-decoration:none;} .ua-menu-item.is-active{background:var(--ua-soft);color:var(--ua-text);font-weight:650;} .ua-menu-item i{font-size:16px;width:18px;text-align:center;flex:0 0 18px;} .ua-menu-item span{flex:1 1 auto;min-width:0;} .ua-menu-badge{ font-size:11.5px;font-weight:600;color:var(--ua-muted); background:var(--ua-soft);border-radius:20px;padding:1px 8px; } .ua-menu-item.is-active .ua-menu-badge{background:var(--ua-card);} .ua-menu-logout{margin-top:6px;padding-top:6px;border-top:1px solid var(--ua-border);} .ua-menu-item.is-logout{color:var(--ua-danger);} .ua-menu-item.is-logout:hover{background:var(--ua-danger-bg);color:var(--ua-danger);} /*---------------------------------------------------------------- 004 — AUTH CARD (login / signup / forgot / reset) ----------------------------------------------------------------*/ .ua-auth{ max-width:430px;margin:0 auto;padding:30px; background:var(--ua-card);border:1px solid var(--ua-border);border-radius:var(--ua-radius); } .ua-auth-head{text-align:center;margin-bottom:22px;} .ua-auth-title{font-size:22px;font-weight:700;margin:0 0 4px;color:var(--ua-text);} .ua-auth-sub{font-size:13px;margin:0;color:var(--ua-muted);} .ua-auth-lead{font-size:14px;color:var(--ua-soft-text);margin:0 0 18px;line-height:1.6;} /*---------------------------------------------------------------- 005 — FORM ----------------------------------------------------------------*/ .ua-form{display:block;} .ua-field{margin-bottom:16px;} .ua-label{display:block;font-size:13px;font-weight:600;color:var(--ua-text);margin-bottom:6px;} .ua-input{ width:100%;padding:10px 13px;font-size:14.5px;font-family:inherit; color:var(--ua-text);background:var(--ua-body); border:1px solid var(--ua-border);border-radius:9px; transition:border-color var(--ua-ease), box-shadow var(--ua-ease); } .ua-input:focus{outline:0;border-color:var(--ua-link);box-shadow:0 0 0 3px rgba(79,70,229,.12);} .ua-input:disabled{background:var(--ua-soft);color:var(--ua-muted);cursor:not-allowed;} .ua-textarea{resize:vertical;min-height:96px;line-height:1.6;} .ua-help{display:block;font-size:12.5px;color:var(--ua-muted);margin-top:6px;line-height:1.5;} .ua-password{position:relative;} .ua-password .ua-input{padding-right:42px;} .ua-eye{ position:absolute;top:50%;right:6px;transform:translateY(-50%); width:30px;height:30px;border:0;background:transparent;cursor:pointer; color:var(--ua-faint);border-radius:7px; } .ua-eye:hover{color:var(--ua-text);background:var(--ua-soft);} .ua-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;} .ua-check{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ua-soft-text);cursor:pointer;} .ua-check input{width:15px;height:15px;accent-color:var(--ua-link);} .ua-foot{font-size:13.5px;color:var(--ua-muted);text-align:center;margin:18px 0 0;} .ua-link{color:var(--ua-link);text-decoration:none;font-weight:500;} .ua-link:hover{text-decoration:underline;} .ua-muted{color:var(--ua-muted);} /*---------------------------------------------------------------- 006 — BUTTON ----------------------------------------------------------------*/ .ua-btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:10px 18px;border:1px solid transparent;border-radius:9px; font-size:14px;font-weight:600;font-family:inherit;line-height:1.2; cursor:pointer;text-decoration:none; transition:background var(--ua-ease), color var(--ua-ease), border-color var(--ua-ease); } .ua-btn-solid{background:var(--ua-link);color:#fff;} .ua-btn-solid:hover{filter:brightness(.93);color:#fff;text-decoration:none;} .ua-btn-outline{background:transparent;color:var(--ua-text);border-color:var(--ua-border);} .ua-btn-outline:hover{background:var(--ua-soft);text-decoration:none;} .ua-btn-ghost{background:transparent;color:var(--ua-muted);padding:6px 10px;} .ua-btn-ghost:hover{background:var(--ua-soft);color:var(--ua-text);text-decoration:none;} .ua-btn-ghost.is-danger{color:var(--ua-danger);} .ua-btn-ghost.is-danger:hover{background:var(--ua-danger-bg);color:var(--ua-danger);} .ua-btn-sm{padding:6px 12px;font-size:13px;} .ua-btn-block{width:100%;} /* Solid button ka text — link ke rang se bachana Ye module har template ke andar chalta hai, aur templates apne links ka rang aksar aise likhte hain: "body.mb-body a{color:var(--mb-link)}". Us selector ka wazan .ua-btn-solid se zyada hai, is liye primary rang ke button par text bhi wahi primary rang le leta tha — yani neela upar neela, kuch parha hi nahi jata tha. Is liye yahan wazan barha diya gaya hai (do element + do class), taake kisi bhi template me solid button ka text safed hi rahe. aur