/** * theme.css * Shared visual theme for the PEAPC Conector Frontend — home, login, dashboard, * and report-engine views all load this single stylesheet so the look stays consistent. * * THEMING: every color lives as a CSS custom property, set per-theme via * [data-theme="..."] on . The active theme is picked by public/js/theme.js * (persisted in localStorage) and applied before first paint via a tiny inline * script in each view's — see views/*.ejs — to avoid a flash of the * default theme on load. */ :root, [data-theme="light"] { --color-primary: #0062e6; --color-primary-dark: #0047ad; --color-bg: #eef1f6; --color-surface: #ffffff; --color-border: #d5dbe3; --color-text: #1f2937; --color-text-muted: #5b6472; --color-success: #1f8a4c; --color-danger: #d81e3f; --color-hover-bg: #e3e8f0; --color-header-bg: #eef3fb; --color-row-hover-bg: #e6edfb; --color-totals-bg: #dde9fc; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.08); } [data-theme="dark"] { --color-primary: #5b9dff; --color-primary-dark: #2f6fe0; --color-bg: #101216; --color-surface: #1c1f26; --color-border: #333944; --color-text: #eef0f3; --color-text-muted: #a3abb8; --color-success: #3ecf8e; --color-danger: #ff5f79; --color-hover-bg: #2c313b; --color-header-bg: #262b34; --color-row-hover-bg: #202a42; --color-totals-bg: #1f2c47; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.4); } [data-theme="pastel-pink"] { --color-primary: #d1477d; --color-primary-dark: #b02f63; --color-bg: #fbe0e8; --color-surface: #fff6f9; --color-border: #f0b8c9; --color-text: #401f30; --color-text-muted: #7d5468; --color-success: #3f9e72; --color-danger: #c8305a; --color-hover-bg: #f6c9d8; --color-header-bg: #f8d0de; --color-row-hover-bg: #fadce6; --color-totals-bg: #f5c3d5; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.06); } [data-theme="pastel-mint"] { --color-primary: #159c85; --color-primary-dark: #0f7c69; --color-bg: #d3f0e6; --color-surface: #f4fdfa; --color-border: #a8ddd0; --color-text: #17372f; --color-text-muted: #4f7369; --color-success: #14915f; --color-danger: #c8505a; --color-hover-bg: #bfe8da; --color-header-bg: #c9ecdf; --color-row-hover-bg: #cdeee1; --color-totals-bg: #b8e6d5; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.06); } [data-theme="pastel-lavender"] { --color-primary: #7856d6; --color-primary-dark: #5c3cb8; --color-bg: #e6dcf9; --color-surface: #f9f6fd; --color-border: #c9b8ec; --color-text: #2e2144; --color-text-muted: #6a5b8a; --color-success: #3f9e72; --color-danger: #c8305a; --color-hover-bg: #d9c8f2; --color-header-bg: #e0d2f5; --color-row-hover-bg: #e3d6f6; --color-totals-bg: #d5c1f1; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.06); } /* Dark-theme readability overrides for the few remaining fixed-color banners/rows */ [data-theme="dark"] .error-box { background: #3a1f26; color: #ff8a9b; } [data-theme="dark"] .warning-banner { background: #3a3016; border-color: #6b551f; color: #f0c877; } [data-theme="dark"] .stmt-row-error { background: #3a1f26; } [data-theme="dark"] .stmt-row-success { background: #1c3327; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: var(--color-bg); color: var(--color-text); transition: background-color 0.15s ease, color 0.15s ease; } /* Button color system — fixed palette (not theme-varying; same 4 roles regardless of which light/dark/pastel theme is active), one CSS class per role. */ :root { --button-color-low: #039; --button-color-high: rgb(17, 117, 179); --button-color-border: #1175B3; --button-color: white; --button-color-hover: #cccccc; --ok-button-color-low: green; --ok-button-color-high: #47ae00; --ok-button-color-border: #47ae00; --ok-button-color: white; --ok-button-color-hover: #cccccc; --cancel-button-color-low: red; --cancel-button-color-high: #ff7a7a; --cancel-button-color-border: #F00; --cancel-button-color: white; --cancel-button-color-hover: #cccccc; --action-color-low: #f08e00; --action-color-high: #ffb853; --action-color-border: #f4a22d; --action-color: white; --action-color-hover: #eeeeee; } .btn { display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: 14px; cursor: pointer; text-decoration: none; box-shadow: var(--shadow); transition: color 0.12s ease; /* Neutral (default) role */ background: linear-gradient(5deg, var(--button-color-low) 0%, var(--button-color-high) 100%) !important; border: 1px solid var(--button-color-border) !important; color: var(--button-color); } .btn:hover { color: var(--button-color-hover) !important; } .btn-ok { background: linear-gradient(5deg, var(--ok-button-color-low) 0%, var(--ok-button-color-high) 100%) !important; border: 1px solid var(--ok-button-color-border) !important; color: var(--ok-button-color); } .btn-ok:hover { color: var(--ok-button-color-hover) !important; } .btn-cancel { background: linear-gradient(5deg, var(--cancel-button-color-low) 0%, var(--cancel-button-color-high) 100%) !important; border: 1px solid var(--cancel-button-color-border) !important; color: var(--cancel-button-color); } .btn-cancel:hover { color: var(--cancel-button-color-hover) !important; } .btn-action { background: linear-gradient(5deg, var(--action-color-low) 0%, var(--action-color-high) 100%) !important; border: 1px solid var(--action-color-border) !important; color: var(--action-color); } .btn-action:hover { color: var(--action-color-hover) !important; } .btn-block { display: block; width: 100%; } .form-group { margin-bottom: 10px; } .form-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; } .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 14px; } .form-hint { display: block; color: var(--color-text-muted); font-size: 12px; margin-top: 4px; } .form-checkbox-label { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; margin-bottom: 0 !important; cursor: pointer; } .form-checkbox-label input[type="checkbox"] { width: auto !important; flex-shrink: 0; margin: 0; } .form-checkbox-label input[type="checkbox"]:disabled + span { color: var(--color-text-muted); } /* Home page */ .home-body { display: flex; flex-direction: column; min-height: 100vh; } .login-body { display: flex; flex-direction: column; min-height: 100vh; } .home-center { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; } .login-center { flex: 1; display: flex; align-items: center; justify-content: center; } .home-container { max-width: 480px; padding: 20px; } .home-logo { max-width: 140px; margin-bottom: 10px; } .home-subtitle { color: var(--color-text-muted); margin-bottom: 24px; } .health-panel { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; text-align: left; margin-bottom: 20px; } .health-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; } .health-row:last-child { border-bottom: none; } .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; } .status-up { background: var(--color-success); } .status-down { background: var(--color-danger); } .home-session-info { color: var(--color-text-muted); font-size: 13px; margin-bottom: 20px; } .home-connect-btn { padding: 12px 36px; font-size: 16px; } /* Login page */ .login-container { max-width: 380px; width: 100%; padding: 28px; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); } .error-box { background: #ffe1e6; color: var(--color-danger); padding: 10px; border-radius: var(--radius); margin-bottom: 14px; font-size: 13px; } .home-link { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--color-text-muted); text-decoration: none; } /* Dashboard layout — single page, mobile-friendly, no side panel/iframe */ .dashboard-body { margin: 0; } .topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; } .topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: 1; } .topbar-logo { height: 28px; } .btn-ghost { background: transparent; border-color: transparent; } .logout-form { margin: 0; } .user-info-inline { display: flex; align-items: center; gap: 6px; position: relative; font-size: 13px; color: var(--color-text); } .user-info-summary { white-space: nowrap; } .info-icon-btn { border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--color-text-muted); padding: 2px; border-radius: 50%; } .info-icon-btn:hover { color: var(--color-primary); } .payload-balloon { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; min-width: 220px; max-width: min(320px, calc(100vw - 32px)); } .payload-field { display: flex; align-items: baseline; gap: 6px; font-size: 12px; white-space: nowrap; } .payload-key { font-weight: 600; color: var(--color-text-muted); } .payload-value { color: var(--color-text); } /* The direct-link params balloon reuses .payload-balloon/.payload-field for the box styling, but its content is comma-separated lists (filter names, payload field names), not short "key: value" rows — those need to wrap naturally instead of forcing one long unbroken line. */ #direct-link-params-balloon .payload-field { display: block; white-space: normal; line-height: 1.5; } #direct-link-params-balloon .payload-field + .payload-field { margin-top: 6px; } #direct-link-params-balloon { max-width: min(360px, calc(100vw - 32px)); } .action-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .report-select { flex: 1; min-width: 220px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 14px; } .report-content { padding: 16px; width: 95%; margin: 0 auto; } .content-placeholder { color: var(--color-text-muted); text-align: center; padding: 40px 0; } .direct-link-group { display: inline-flex; align-items: center; position: relative; } .direct-link-copy-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 26px; height: 26px; margin-left: 4px; border: none; background: none; border-radius: 4px; cursor: pointer; color: var(--color-text-muted); padding: 0; } .direct-link-copy-btn:hover { background: var(--color-hover-bg); color: var(--color-text); } .direct-link-copy-btn.copied { color: var(--color-success); } .direct-link-copy-btn.copied svg { animation: direct-link-pop 0.3s ease; } @keyframes direct-link-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .results-wrapper { margin-top: 16px; } .table-scroll { overflow-x: auto; } /* keeps wide tables usable on phones */ .nav-empty-hint { color: var(--color-text-muted); font-size: 13px; padding: 6px 10px; } .scheduled-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; } .schedule-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 13px; gap: 10px; } .schedule-item .btn-cancel { padding: 3px 10px; font-size: 12px; } @media (max-width: 600px) { .topbar-brand span { display: none; } /* keep just the logo on very small screens */ .user-info-tert { display: none; } /* keep just the username on very small screens */ .action-toolbar { flex-direction: column; align-items: stretch; } .filters-grid { grid-template-columns: 1fr; } } /* Report engine (standalone fallback page) */ .report-body { padding: 20px; } .filters-form { background: var(--color-surface); padding: 10px 12px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; } .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 8px; } .results-toolbar { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .table-counters { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .page-size-label { font-size: 13px; margin-left: auto; display: flex; align-items: center; gap: 6px; } .page-size-label select { padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; } .pagination-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; } .pagination-nav button { padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); cursor: pointer; } .pagination-nav button:disabled { opacity: 0.4; cursor: default; } .page-indicator { white-space: nowrap; } /* Theme switcher */ .theme-switcher { position: relative; } .theme-switcher-btn { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; font-size: 14px; } .theme-switcher-btn:hover { background: var(--color-hover-bg); } .theme-switcher-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 160px; padding: 4px; display: none; } .theme-switcher-menu.open { display: block; } .theme-switcher-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--color-text); } .theme-switcher-menu button:hover { background: var(--color-hover-bg); } .theme-switcher-menu button.active { font-weight: 600; } .theme-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; } .theme-switcher-fixed { position: fixed; top: 12px; right: 12px; z-index: 40; } .system-message-banner { background: #fff4e0; border-bottom: 1px solid #f0c36d; color: #7a5300; padding: 10px 40px; font-size: 14px; text-align: center; position: relative; } .system-message-banner a { color: inherit; text-decoration: underline; font-weight: 600; } .system-message-banner p { margin: 0; } .system-message-banner p + p { margin-top: 6px; } .system-message-dismiss { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: none; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; opacity: 0.7; } .system-message-dismiss:hover { opacity: 1; } [data-theme="dark"] .system-message-banner { background: #3a3016; border-color: #6b551f; color: #f0c877; } #counters-bottom { margin-top: 6px; margin-bottom: 0; } .floating-scroll-buttons { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 10px; } .floating-scroll-buttons button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .floating-scroll-buttons button:hover { background: var(--color-hover-bg); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.18); } .floating-scroll-buttons button:active { transform: translateY(0); } /* CSS-drawn triangles instead of a Unicode arrow glyph — glyph rendering varies by font/OS and never sits perfectly centered; a drawn shape always does. */ .scroll-arrow { width: 0; height: 0; display: block; } .scroll-arrow-up { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--color-primary); } .scroll-arrow-down { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--color-primary); } .quick-search-input { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 14px; min-width: 180px; flex: 1; max-width: 320px; } .report-table { width: 100%; border-collapse: collapse; background: var(--color-surface); box-shadow: var(--shadow); } .report-table th, .report-table td { border: 1px solid var(--color-border); padding: 8px; font-size: 13px; text-align: left; } .report-table th { background: var(--color-header-bg); cursor: pointer; } .report-table th:has(input[type="checkbox"]), .report-table td:has(input[type="checkbox"]) { text-align: center; } .report-table .row-num-cell { text-align: center; } .report-table tbody tr:hover { background: var(--color-row-hover-bg); cursor: pointer; } .column-search-row th { background: var(--color-surface); cursor: default; padding: 4px; } .select-checkbox-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; font-weight: 400; color: var(--color-text-muted); white-space: nowrap; } .select-checkbox-label:hover { color: var(--color-text); } .select-checkbox-label input[type="checkbox"] { cursor: pointer; margin: 0; } /* Split-button: main click = the default/primary action; the small arrow opens a dropdown with the secondary (narrower-scope) alternative. */ .split-btn-group { display: inline-flex; position: relative; vertical-align: middle; } .split-btn-main { border-top-right-radius: 0; border-bottom-right-radius: 0; } .split-btn-arrow { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none !important; padding: 6px 8px; } .split-btn-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 25; display: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; box-shadow: var(--shadow); min-width: 170px; padding: 4px; } .split-btn-menu.open { display: block; } .split-btn-menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--color-text); } .split-btn-menu button:hover { background: var(--color-hover-bg); } .column-search-input { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 12px; } .column-totals-row th { background: var(--color-totals-bg); cursor: default; padding: 6px 8px; font-weight: 600; font-size: 12px; } /* mobileview mode — pastel card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .report-card { border-radius: 10px; padding: 14px; box-shadow: var(--shadow); } .report-card-field { font-size: 13px; margin-bottom: 4px; word-break: break-word; } .report-card-field-label { font-weight: 600; color: rgba(0,0,0,0.55); margin-right: 4px; } .pastel-0 { background: #FFE3E8; } /* pastel pink */ .pastel-1 { background: #E1F0FF; } /* pastel blue */ .pastel-2 { background: #E3F7E9; } /* pastel green */ .pastel-3 { background: #FFF6DE; } /* pastel yellow */ .pastel-4 { background: #F1E6FA; } /* pastel purple */ .pastel-5 { background: #FFEBDB; } /* pastel peach */ /* SQL Console */ .sqlconsole-content { max-width: 1100px; margin: 0 auto; padding: 16px; } .warning-banner { background: #fff4e0; border: 1px solid #f0c36d; color: #7a5300; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; } .sql-textarea { width: 100%; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius); resize: vertical; } .sqlconsole-actions { margin: 12px 0; } .progress-summary { margin: 16px 0; } .progress-bar-track { height: 10px; background: var(--color-border); border-radius: 5px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--color-primary); width: 0%; transition: width 0.2s ease; } .progress-counter, .total-affected { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; } .statement-table .stmt-cell { max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; } .stmt-row-error { background: #fff0f2; } .stmt-row-success { background: #f0fbf4; } .sqlconsole-decision-actions { display: flex; gap: 10px; margin-top: 16px; } /* Modal */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-content { background: var(--color-surface); padding: 24px; border-radius: var(--radius); width: 360px; box-shadow: var(--shadow); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }