/* =========================================================================== * LNT-UI.CSS — HỆ THIẾT KẾ DÙNG CHUNG cho mọi trang Long Nguyên Team * Nạp SAU style riêng của từng trang (ngay trước ) để đồng bộ: * màu thương hiệu, bo góc, bóng đổ, nút, ô nhập, thẻ, bảng, nhật ký, spinner. * Không dùng !important trừ vài chỗ bắt buộc → trang nào cần khác vẫn ghi đè được. * =========================================================================== */ :root { --lnt-brand: #4f46e5; --lnt-brand-dk: #4338ca; --lnt-brand-soft: #eef2ff; --lnt-brand-line: #c7d2fe; --lnt-ok: #059669; --lnt-ok-soft: #ecfdf5; --lnt-warn: #b45309; --lnt-warn-soft: #fffbeb; --lnt-err: #dc2626; --lnt-err-soft: #fef2f2; --lnt-info: #0ea5e9; --lnt-bg: #f6f7fc; --lnt-surface: #ffffff; --lnt-ink: #0f172a; --lnt-ink-2: #334155; --lnt-ink-3: #64748b; --lnt-line: #e7e9f4; --lnt-line-2: #cbd5e1; --lnt-r: 14px; --lnt-r-sm: 9px; --lnt-r-xs: 6px; --lnt-shadow: 0 1px 2px rgba(15,23,42,.03), 0 12px 34px -14px rgba(79,70,229,.16); --lnt-shadow-sm: 0 1px 3px rgba(15,23,42,.06); --lnt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; } html { scroll-behavior: smooth; } body { font-family: var(--lnt-font); -webkit-font-smoothing: antialiased; } ::selection { background: var(--lnt-brand-line); } /* thanh cuộn mảnh, đồng nhất */ * { scrollbar-width: thin; scrollbar-color: #c7cbe6 transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: #c7cbe6; border-radius: 99px; } *::-webkit-scrollbar-thumb:hover { background: #a5adde; } /* ---------- Ô nhập ---------- */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], select, textarea { font-family: var(--lnt-font); border-radius: var(--lnt-r-sm); border: 1px solid var(--lnt-line-2); transition: border-color .15s, box-shadow .15s; } input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--lnt-brand); box-shadow: 0 0 0 3px rgba(79,70,229,.13); } textarea { line-height: 1.5; } /* ---------- Nút ---------- */ button, .btn, .nut { font-family: var(--lnt-font); border-radius: var(--lnt-r-sm); transition: transform .08s, filter .15s, box-shadow .15s; } button:hover:not(:disabled), .btn:hover { filter: brightness(1.07); } button:active:not(:disabled) { transform: translateY(1px); } button:disabled { opacity: .55; cursor: not-allowed; } /* các lớp nút riêng của trang kịch bản → đồng bộ với bộ nút chung */ .btn-submit { background: var(--lnt-brand); box-shadow: 0 2px 10px rgba(79,70,229,.30); border-radius: var(--lnt-r-sm); } .btn-copy { background: var(--lnt-ok); box-shadow: 0 2px 8px rgba(5,150,105,.25); border-radius: var(--lnt-r-sm); } .btn-add { background: var(--lnt-info); border-radius: var(--lnt-r-sm); } .btn-save-api { border-radius: var(--lnt-r-sm); } /* ---------- Thẻ / khối ---------- */ .card, .g-card, .left-column, .right-column, .sv-the, .the, .khoi { border-radius: var(--lnt-r); box-shadow: var(--lnt-shadow); border-color: var(--lnt-line); } .api-config-card { background: var(--lnt-brand-soft); border: 1px solid var(--lnt-brand-line); border-radius: var(--lnt-r); } .category-description-card { border-radius: var(--lnt-r); } .top-nav-item { border-radius: 10px; font-weight: 700; transition: background .15s, color .15s; } .top-nav-item:hover { background: var(--lnt-brand-soft); color: var(--lnt-brand); } .top-nav-item.active { background: var(--lnt-brand); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.32); } .header-bar { border-bottom: 1px solid var(--lnt-line); } /* ---------- Bảng ---------- */ table.lnt, .g-ad table, .wrap table { border-collapse: collapse; } .g-ad th, .wrap th { background: var(--lnt-brand); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } .g-ad tr:hover td, .wrap tr:hover td { background: #f8f9ff; } /* ---------- Nhật ký (trang kịch bản) ---------- */ .log-item { border-radius: var(--lnt-r-sm); border: 1px solid var(--lnt-line); box-shadow: var(--lnt-shadow-sm); } .log-header { background: #f8f9ff; border-radius: var(--lnt-r-sm) var(--lnt-r-sm) 0 0; } .log-header:hover { background: var(--lnt-brand-soft); } .log-processing { background: var(--lnt-brand-soft); border: 1px dashed var(--lnt-brand-line); border-radius: var(--lnt-r-sm); } /* ---------- Huy hiệu / trạng thái ---------- */ .lnt-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; } .lnt-badge.ok { background: var(--lnt-ok-soft); color: var(--lnt-ok); } .lnt-badge.warn { background: var(--lnt-warn-soft); color: var(--lnt-warn); } .lnt-badge.err { background: var(--lnt-err-soft); color: var(--lnt-err); } .lnt-badge.info { background: var(--lnt-brand-soft); color: var(--lnt-brand); } /* ---------- Spinner dùng chung (tool đang làm việc, không treo) ---------- */ .lnt-spin, .kb-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--lnt-brand-line); border-top-color: var(--lnt-brand); border-radius: 50%; animation: lntspin .8s linear infinite; vertical-align: -2px; } .lnt-spin.lg { width: 22px; height: 22px; border-width: 3px; } @keyframes lntspin { to { transform: rotate(360deg); } } /* thanh tiến độ mảnh */ .lnt-prog { height: 8px; background: var(--lnt-line); border-radius: 99px; overflow: hidden; } .lnt-prog > i { display: block; height: 100%; background: linear-gradient(90deg, var(--lnt-brand), #818cf8); border-radius: 99px; transition: width .4s; } .lnt-prog.run > i { background-size: 40px 100%; background-image: linear-gradient(90deg, var(--lnt-brand) 0 50%, #818cf8 50% 100%); animation: lntstripe 1s linear infinite; } @keyframes lntstripe { to { background-position: 40px 0; } } /* ---------- Điện thoại ---------- */ @media (max-width: 720px) { .card, .g-card, .left-column, .right-column { border-radius: 11px; } button, .btn { font-size: 13px; } } /* ---------- Sửa lỗi trùng màu chữ/nền ở danh sách xổ (select) trên nền tối ---------- Một số trình duyệt vẽ