/** * styles.css — Flipper NFC Maker Plus * * Visual refresh with navy + teal colour scheme. * Supports dark and light themes via [data-theme] attribute on . * Uses system font stack only — no external font dependencies. * * Original work Copyright (c) jaylikesbunda * Modifications Copyright (c) PBNZ 2026 * Licensed under GNU GPL v3. */ /* ============================================================================ * SECTION: Design Tokens * ========================================================================= */ :root { /* System font stack — fast, file://-compatible, no external downloads */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace; --transition-speed: 0.25s; --container-padding: 24px; --input-padding: 12px 16px; --button-padding: 12px 24px; --radius: 10px; --radius-lg: 16px; } /* --- Dark theme (default) --- */ [data-theme="dark"] { --primary: #00b8a9; --primary-hover: #00d4c3; --primary-glow: rgba(0, 184, 169, 0.25); --bg: #0f1729; --bg-surface: rgba(22, 33, 62, 0.92); --bg-input: rgba(30, 42, 72, 0.9); --text: #e8ecf1; --text-secondary: #8e99a4; --border: #243049; --input-border: #2e4063; --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --accent-warn: #ff6b6b; --accent-success: #00e676; --capacity-ok: #00b8a9; --capacity-over: #ff6b6b; } /* --- Light theme --- */ [data-theme="light"] { --primary: #00897b; --primary-hover: #00695c; --primary-glow: rgba(0, 137, 123, 0.15); --bg: #f5f7fa; --bg-surface: rgba(255, 255, 255, 0.95); --bg-input: rgba(240, 243, 248, 0.95); --text: #1a2332; --text-secondary: #5a6577; --border: #dde2ea; --input-border: #c8cfd8; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); --accent-warn: #e53935; --accent-success: #2e7d32; --capacity-ok: #00897b; --capacity-over: #e53935; } /* System preference auto-detection (when no explicit data-theme set) */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --primary: #00897b; --primary-hover: #00695c; --primary-glow: rgba(0, 137, 123, 0.15); --bg: #f5f7fa; --bg-surface: rgba(255, 255, 255, 0.95); --bg-input: rgba(240, 243, 248, 0.95); --text: #1a2332; --text-secondary: #5a6577; --border: #dde2ea; --input-border: #c8cfd8; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); --accent-warn: #e53935; --accent-success: #2e7d32; --capacity-ok: #00897b; --capacity-over: #e53935; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --primary: #00b8a9; --primary-hover: #00d4c3; --primary-glow: rgba(0, 184, 169, 0.25); --bg: #0f1729; --bg-surface: rgba(22, 33, 62, 0.92); --bg-input: rgba(30, 42, 72, 0.9); --text: #e8ecf1; --text-secondary: #8e99a4; --border: #243049; --input-border: #2e4063; --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --accent-warn: #ff6b6b; --accent-success: #00e676; --capacity-ok: #00b8a9; --capacity-over: #ff6b6b; } } /* ============================================================================ * SECTION: Reset & Base * ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color var(--transition-speed), background-color var(--transition-speed); } #bgCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* ============================================================================ * SECTION: Layout * ========================================================================= */ .container { max-width: 760px; margin: 0 auto; padding: var(--container-padding); display: flex; flex-direction: column; min-height: 100vh; } /* ============================================================================ * SECTION: Header & Branding * ========================================================================= */ .app-header { text-align: center; margin-bottom: 2rem; padding: 1.5rem 0; } .app-title { font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, var(--primary), #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.35rem; letter-spacing: -0.02em; } .app-subtitle { font-size: 0.85rem; color: var(--text-secondary); font-weight: 400; } .app-subtitle a { color: var(--primary); text-decoration: none; transition: opacity var(--transition-speed); } .app-subtitle a:hover { opacity: 0.8; text-decoration: underline; } /* ============================================================================ * SECTION: Main Content * ========================================================================= */ main { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; } /* ============================================================================ * SECTION: Form Controls * ========================================================================= */ /* --- Options Grid --- */ .options-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } @media screen and (min-width: 600px) { .options-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .options-grid .input-group { margin-bottom: 0; } } /* --- Segmented Control --- */ .segmented-control { display: flex; background-color: var(--bg-input); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 4px; overflow: hidden; } .segmented-control input[type="radio"] { display: none; } .segmented-control label { flex: 1; text-align: center; padding: 8px 12px; margin-bottom: 0; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-radius: calc(var(--radius) - 4px); transition: all var(--transition-speed); text-transform: none; letter-spacing: normal; } .segmented-control input[type="radio"]:checked+label { background-color: var(--primary); color: #fff; box-shadow: 0 2px 8px var(--primary-glow); } .segmented-control input[type="radio"]:disabled+label { opacity: 0.4; cursor: not-allowed; } .input-group { margin-bottom: 1.25rem; } label { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; } input, select, textarea { width: 100%; padding: var(--input-padding); background-color: var(--bg-input); border: 1px solid var(--input-border); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; font-family: var(--font-family); transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed); } input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 0.6; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); outline: none; } textarea { min-height: 100px; resize: vertical; } /* ============================================================================ * SECTION: vCard Wizard * ========================================================================= */ .vcard-wizard-mode-selector { margin-bottom: 1.5rem; } .vcard-wizard-mode-selector .mode-segment label { font-size: 0.8rem; padding: 6px 10px; } .vcard-mode-panel { animation: fadeIn var(--transition-speed); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .vcard-editor-form { background-color: var(--bg-surface); border: 1px solid var(--input-border); border-radius: var(--radius-lg); padding: 1.25rem; margin-top: 1rem; } .editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .editor-header h3 { font-size: 1.1rem; color: var(--primary); margin: 0; } .editor-header-actions { display: flex; gap: 0.5rem; align-items: center; } .version-select { padding: 4px 8px; font-size: 0.75rem; width: auto; background-color: transparent; border: 1px solid var(--border); color: var(--text); } .version-select option { background-color: var(--bg-input); color: var(--text); } .btn-tiny { background-color: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 4px; } .btn-tiny:hover { background-color: var(--primary); color: #fff; border-color: var(--primary); } .vcard-wizard-mode-selector { margin-top: 1rem; } .vcard-sections { display: flex; flex-direction: column; gap: 1.5rem; } .vcard-section-title { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 8px; } .vcard-section-title::after { content: ''; flex: 1; height: 1px; background-color: var(--border); } .vcard-prop-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: flex-start; } .vcard-prop-row .input-group { margin-bottom: 0; flex: 1; } .vcard-prop-row.prop-changed { border-left: 3px solid var(--accent-success, #00e676); padding-left: 8px; background-color: rgba(0, 230, 118, 0.06); border-radius: var(--radius); transition: all 0.3s ease; } .vcard-prop-row.prop-readonly { opacity: 0.85; background-color: rgba(128, 128, 128, 0.05); border: 1px dashed var(--border); border-radius: var(--radius); padding: 6px 8px; } .prop-key-label { background-color: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; align-self: center; min-width: 60px; text-align: center; } .readonly-value { opacity: 0.7; cursor: not-allowed; resize: none; font-family: monospace; font-size: 0.8rem; } .passthrough-hint { margin-bottom: 0.75rem; font-style: italic; } .input-invalid { border-color: var(--accent-warn, #ff5252) !important; } .prop-validation-error { color: var(--accent-warn, #ff5252); font-size: 0.75rem; margin-top: 3px; line-height: 1.3; } .prop-type-select { width: 140px; flex-shrink: 0; background-color: var(--bg-input); color: var(--text); } .prop-type-select[multiple] { height: auto; min-height: 70px; padding: 0; border-radius: var(--radius); } .prop-type-select[multiple] option { padding: 4px 8px; } .btn-icon { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); width: 38px; height: 38px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; padding: 0; } .btn-icon:hover { color: var(--accent-warn); border-color: var(--accent-warn); background-color: rgba(255, 107, 107, 0.1); } .btn-add-prop { background: transparent; border: 1px dashed var(--border); color: var(--primary); width: 100%; padding: 8px; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; margin-top: 0.25rem; } .btn-add-prop:hover { border-color: var(--primary); background-color: var(--primary-glow); } .ios-compat-group { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .ios-compat-label { display: flex; align-items: center; gap: 8px; } .badge { background-color: var(--bg-input); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; color: var(--text-secondary); text-transform: none; letter-spacing: normal; } .field-hint { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.4rem; line-height: 1.4; text-transform: none; letter-spacing: normal; } /* ============================================================================ * SECTION: Buttons * ========================================================================= */ .btn { display: inline-block; padding: var(--button-padding); background-color: var(--primary); color: #fff; border: none; border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; font-family: var(--font-family); cursor: pointer; text-align: center; transition: background-color var(--transition-speed), transform 0.15s, box-shadow var(--transition-speed); box-shadow: var(--shadow); } .btn:hover { background-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 16px var(--primary-glow); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-secondary { background-color: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-secondary:hover { background-color: var(--primary); color: #fff; } .btn-small { padding: 8px 16px; font-size: 0.85rem; } #generateButton { width: 100%; } .button-group { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .button-group .btn { flex: 1; } .btn.sending { opacity: 0.6; cursor: wait; } /* ============================================================================ * SECTION: Output Section * ========================================================================= */ #outputSection, #bcOutputSection { margin-top: 2rem; background-color: var(--bg-surface); padding: 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); transition: background-color var(--transition-speed); } #outputSection h2, #bcOutputSection h2 { font-size: 1.4rem; font-weight: 600; color: var(--primary); margin-bottom: 1rem; } #nfcData, .nfc-data-output { background-color: var(--bg-input); padding: 1.25rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 350px; overflow-y: auto; border: 1px solid var(--border); line-height: 1.5; } /* ============================================================================ * SECTION: iOS Business Card Panel * ========================================================================= */ #businessCardSection { background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 0.5rem; } .section-title { font-size: 1.15rem; font-weight: 600; color: var(--primary); margin-bottom: 0.3rem; } .section-description { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.5; } .fetch-row { display: flex; gap: 0.5rem; align-items: flex-end; } .fetch-row .input-group { flex: 1; margin-bottom: 0; } .fetch-row .btn { height: 44px; white-space: nowrap; } .paste-area { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; } .paste-hint { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; } /* --- vCard Preview --- */ .vcard-preview { margin-top: 1.25rem; background-color: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } .vcard-preview-fields { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .vcard-field { display: flex; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .vcard-field:last-child { border-bottom: none; } .vcard-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; min-width: 80px; flex-shrink: 0; } .vcard-value { font-size: 0.9rem; color: var(--text); word-break: break-word; } .vcard-preview-empty { text-align: center; color: var(--text-secondary); font-style: italic; padding: 1rem; } /* --- Capacity Bar --- */ .capacity-section { margin-top: 1.25rem; } .capacity-bar-container { height: 8px; background-color: var(--bg-input); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 0.3rem; } .capacity-bar-fill { height: 100%; background-color: var(--capacity-ok); border-radius: 4px; transition: width 0.3s ease, background-color 0.3s ease; width: 0%; } .capacity-bar-fill.over-capacity { background-color: var(--capacity-over); } .capacity-footer-text { display: flex; justify-content: flex-end; align-items: center; } .capacity-footer-text.has-warning { justify-content: space-between; } .capacity-text { font-size: 0.8rem; color: var(--text-secondary); } .capacity-warning { font-size: 0.8rem; color: var(--accent-warn); font-weight: 500; } .tag-recommendation { font-size: 0.8rem; color: var(--primary); margin-bottom: 0.5rem; font-style: italic; } /* ============================================================================ * SECTION: Send Status * ========================================================================= */ .send-status { margin-top: 0.5rem; text-align: center; font-size: 0.85rem; color: var(--text-secondary); } .send-status.error { color: var(--accent-warn); } .send-status.success { color: var(--accent-success); } /* ============================================================================ * SECTION: Modals * ========================================================================= */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(4px); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background-color: var(--bg-surface); padding: 2rem; border-radius: var(--radius-lg); max-width: 90%; width: 380px; position: relative; transform: scale(0.95) translateY(16px); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .modal-overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; } .modal-header { margin-bottom: 1.25rem; text-align: center; } .modal-header h2 { color: var(--primary); font-size: 1.3rem; font-weight: 600; } .modal-body { color: var(--text); line-height: 1.6; margin-bottom: 1.25rem; font-size: 0.9rem; text-align: center; } .modal-body ul { margin: 0.75rem 0; padding-left: 0; list-style: none; } .modal-body li { margin-bottom: 0.4rem; } .modal-footer { display: flex; justify-content: center; } .modal-close { background-color: var(--primary); color: #fff; padding: 10px 24px; border-radius: 20px; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; font-family: var(--font-family); transition: all 0.2s ease; min-width: 120px; } .modal-close:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); background-color: var(--primary-hover); } /* ============================================================================ * SECTION: Footer * ========================================================================= */ .app-footer { text-align: center; padding: 1.5rem 0 1rem; margin-top: auto; border-top: 1px solid var(--border); } .app-footer .theme-toggle { background-color: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 6px 14px; font-size: 0.85rem; font-family: var(--font-family); border-radius: 20px; cursor: pointer; transition: background-color var(--transition-speed), color var(--transition-speed); margin-bottom: 0.75rem; } .app-footer .theme-toggle:hover { background-color: var(--primary); color: #fff; } .footer-credit { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.6; } .footer-credit a { color: var(--primary); text-decoration: none; } .footer-credit a:hover { text-decoration: underline; } /* ============================================================================ * SECTION: Utility Classes * ========================================================================= */ .hidden { display: none !important; } /* ============================================================================ * SECTION: Responsive * ========================================================================= */ @media screen and (max-width: 768px) { .container { padding: 16px; } .app-title { font-size: 1.6rem; } .input-group { margin-bottom: 1rem; } input, select, textarea { padding: 10px 14px; } .fetch-row { flex-direction: column; } .fetch-row .btn { width: 100%; height: auto; } #outputSection, #bcOutputSection { padding: 1rem; } .button-group { flex-direction: column; } } @media screen and (max-width: 480px) { .app-title { font-size: 1.4rem; } label { font-size: 0.75rem; } input, select, textarea { padding: 8px 12px; font-size: 0.9rem; } .btn { padding: 10px 18px; font-size: 0.9rem; } #outputSection h2, #bcOutputSection h2 { font-size: 1.2rem; } #nfcData, .nfc-data-output { font-size: 0.75rem; padding: 0.75rem; } .modal-content { padding: 1.25rem; width: 90%; } }