/* ============================================================================ css/components/buttons.css — Button & Tappable-Control Components (v1) ---------------------------------------------------------------------------- Every clickable "button-shaped" control: home-screen action buttons, the floating action buttons (.float-button / .fab-add-btn — two FAB patterns kept as-is from the source files; see note below), modal/save footer buttons, the bulk-action bar buttons, login screen buttons (primary, eye-toggle, biometric, tab-switcher, modal), and the student-view detail-page contact action buttons. NOTE on duplication kept intentionally: `.float-button` and `.fab-add-btn` are two separately-styled circular FABs used by different pages/scripts (app.css's original FAB vs js/app-polish.js's FAB). They were not merged because doing so risks changing which JS hook fires; flagged here for a follow-up cleanup once it's confirmed only one is still in use. ============================================================================ */ /* ── Home screen action buttons ── */ /* ── Home action buttons ── */ a.home-btn { display: block; background: var(--app-theme-color); color: #fff; text-decoration: none; padding: 14px; border-radius: var(--radius-md); font-weight: 700; font-size: 15px; margin-bottom: 12px; letter-spacing: -.01em; transition: opacity var(--transition), transform var(--transition); } a.home-btn:hover { opacity: .9; transform: translateY(-1px); color: #fff; } a.home-btn:active { transform: scale(.98); opacity: 1; } a.home-btn:last-of-type { margin-bottom: 0; } a.home-btn.signout { background: #e74c3c; } a.home-btn.signin { background: #27ae60; } a.home-btn.settings { background: #546e7a; } /* ══════════════════════════════════════════════ FAB ══════════════════════════════════════════════ */ .float-button { position: fixed; right: 20px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; background: var(--app-theme-color); color: #fff; box-shadow: var(--shadow-float); z-index: 900; transition: transform var(--transition), box-shadow var(--transition); display: flex; align-items: center; justify-content: center; text-decoration: none; } .float-button:hover { transform: scale(1.06); color: #fff; } .float-button:active { transform: scale(.96); } .float-button i { color: #fff; font-size: 18px; } .mt--7 { margin-top: -3.5rem; } /* ══════════════════════════════════════════════ CONTACT ACTION BUTTONS ══════════════════════════════════════════════ */ #contact_actions_div { animation: fadeUp .22s ease both; } #contact_btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px 0 4px; } #contact_btns a { transition: opacity var(--transition), transform var(--transition) !important; } #contact_btns a:hover { opacity: .88; transform: scale(1.04) !important; } #contact_btns a:active { transform: scale(.96) !important; } /* ── Modal / save footer buttons ── */ /* ── Modal/save footer buttons ── */ #save_div button, .modal-footer button { font-weight: 700; border-radius: var(--radius-sm); letter-spacing: .01em; transition: opacity var(--transition), transform var(--transition); } #save_div button:active, .modal-footer button:active { transform: scale(.97); opacity: .9; } /* ── Bulk-action bar buttons ── */ .bulk-bar-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border: none; background: transparent; color: var(--app-theme-color, #1976d2); font-size: 11px; padding: 5px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap; min-width: 48px; min-height: 44px; touch-action: manipulation; transition: background 0.15s; -webkit-tap-highlight-color: transparent; font-family: inherit; } .bulk-bar-btn i { font-size: 18px; margin-bottom: 2px; } .bulk-bar-btn:hover, .bulk-bar-btn:active { background: rgba(25,118,210,0.09); } .bulk-bar-btn--danger { color: #dc3545; } .bulk-bar-btn--danger:hover, .bulk-bar-btn--danger:active { background: rgba(220,53,69,0.09); } .bulk-bar-btn--muted { color: #888; } .bulk-bar-btn--muted:hover { background: rgba(0,0,0,0.05); } /* ── In-progress / busy button state (js/app-polish.js) ── */ /* ── Loading state on the action button just pressed ── */ @keyframes exportSpin { to { transform: rotate(360deg); } } .ap-btn-busy { position: relative; opacity: .75; pointer-events: none; color: transparent !important; } .ap-btn-busy::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: exportSpin .6s linear infinite; } .ap-btn-busy.export-modal-btn-cancel::after, .ap-btn-busy.ap-modal-btn-secondary::after { border: 2px solid rgba(0,0,0,.15); border-top-color: #555; } /* ── Floating Add Button (mobile, js/app-polish.js) ── */ /* ── Floating Add Button (mobile) ── */ .fab-add-btn { position: fixed; right: 18px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--app-theme-color); color: #fff; display: none; align-items: center; justify-content: center; font-size: 22px; border: none; box-shadow: 0 6px 18px rgba(0,0,0,.3); z-index: 1200; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; touch-action: manipulation; } .fab-add-btn:active { transform: scale(.92); } .fab-add-btn.fab-hide { transform: translateY(140%); opacity: 0; } @media (max-width: 640px) { .fab-add-btn { display: flex; } } /* ── Confirm-modal action buttons (js/app-polish.js) ── */ .ap-modal-btn-secondary { background: #f1f0f4; color: #444; } .ap-modal-btn-secondary:hover { background: #e6e4ea; } .ap-modal-btn-danger { background: #c0392b; color: #fff; } .ap-modal-btn-danger:hover { opacity: .92; } /* ══════════════════════════════════════════════ LOGIN — primary/tab/eye/biometric buttons (moved from css/login.css) ══════════════════════════════════════════════ */ .tab-btn { flex: 1; padding: 10px; border: none; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .18s; background: transparent; color: #aaa; font-family: inherit; } .tab-btn.active { background: var(--brand, #2B2640); color: #fff; box-shadow: 0 4px 12px rgba(43,38,64,.2); } .btn-primary { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--brand, #2B2640) 0%, var(--accent, #6C63FF) 100%); color: #fff; border: none; border-radius: 11px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .18s, transform .15s; letter-spacing: -.01em; } .btn-primary:hover { opacity: .9; transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); opacity: 1; } .eye-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; border-radius: 0 10px 10px 0; touch-action: manipulation; } .eye-btn svg { width: 16px; height: 16px; fill: #ccc; transition: fill .18s; pointer-events: none; } .eye-btn:hover svg, .eye-btn.visible svg { fill: var(--accent, #6C63FF); } .bio-btn { width: 58px; height: 58px; background: linear-gradient(135deg, var(--accent2, #48C9B0) 0%, #2ecc71 100%); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(72,201,176,.32); transition: transform .18s, box-shadow .18s; } .bio-btn:hover { transform: scale(1.07); box-shadow: 0 10px 26px rgba(72,201,176,.42); } .bio-btn:active { transform: scale(.96); } .bio-btn svg { width: 28px; height: 28px; fill: #fff; pointer-events: none; } .bio-label { font-size: 12.5px; font-weight: 600; color: var(--brand, #2B2640); } /* ── Login forgot-password / modal-close buttons (moved from inline