/** * Soft light theme — muted warm gray, low contrast (easy on the eyes). * Active when (see cp-theme.js). */ [data-theme="light"] { color-scheme: light; --cp-bg: #cfd6e0; --cp-bg-elevated: #d6dce5; --cp-bg-card: #dce2eb; --cp-bg-card-hover: #d2d9e3; --cp-border: rgba(45, 55, 72, 0.09); --cp-border-strong: rgba(109, 92, 180, 0.22); --cp-text: #3f4d61; --cp-text-muted: #66768a; --cp-text-dim: #8491a3; --cp-accent: #6f5dc8; --cp-accent-soft: rgba(111, 93, 200, 0.14); --cp-accent-glow: rgba(111, 93, 200, 0.18); --cp-success: #0d7a5c; --cp-success-bg: rgba(13, 122, 92, 0.1); --cp-success-border: rgba(13, 122, 92, 0.22); --cp-priority-gray: #7a8799; --cp-surface-input: #d8dfe8; --cp-surface-raised: #e0e6ee; --cp-shadow-soft: rgba(45, 55, 72, 0.07); --cp-section-body-bg: rgba(45, 55, 72, 0.05); --cp-section-body-border: rgba(45, 55, 72, 0.08); --cp-section-overdue-bg: rgba(185, 90, 90, 0.08); --cp-section-overdue-border: rgba(185, 90, 90, 0.14); --cp-section-today-bg: rgba(190, 120, 70, 0.08); --cp-section-today-border: rgba(190, 120, 70, 0.14); --cp-count-danger-bg: rgba(185, 90, 90, 0.18); --cp-count-danger-fg: #7a3a3a; --cp-count-warning-bg: rgba(190, 120, 70, 0.2); --cp-count-warning-fg: #6b4e2e; --cp-count-muted-bg: rgba(45, 55, 72, 0.09); --cp-count-muted-fg: #5a687a; --cp-chip-bg: rgba(45, 55, 72, 0.07); --cp-agenda-chip-gray-bg: rgba(90, 104, 120, 0.16); --cp-agenda-chip-gray-fg: #4a5568; --cp-agenda-chip-red-bg: rgba(200, 90, 90, 0.28); --cp-agenda-chip-red-fg: #6f2f2f; --cp-agenda-chip-yellow-bg: rgba(200, 165, 60, 0.32); --cp-agenda-chip-yellow-fg: #5a4618; --cp-filter-group-bg: rgba(45, 55, 72, 0.06); --cp-filter-btn-active-bg: var(--cp-accent); --cp-filter-btn-active-fg: #fff; --cp-segmented-bg: rgba(45, 55, 72, 0.06); --cp-alert-ok-bg: rgba(13, 122, 92, 0.2); --cp-alert-ok-fg: #0a5c44; --cp-alert-ok-border: rgba(13, 122, 92, 0.38); --cp-alert-warn-bg: rgba(180, 130, 40, 0.22); --cp-alert-warn-fg: #6b4e12; --cp-alert-warn-border: rgba(180, 130, 40, 0.35); --cp-alert-err-bg: rgba(185, 70, 70, 0.2); --cp-alert-err-fg: #7a2e2e; --cp-alert-err-border: rgba(185, 70, 70, 0.35); --cp-alert-monitor-bg: rgba(45, 55, 72, 0.07); --cp-pill-btn-bg: rgba(45, 55, 72, 0.08); --cp-pill-btn-fg: var(--cp-text); } [data-theme="light"] .cp-login-page { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(111, 93, 200, 0.06), transparent), var(--cp-bg); } [data-theme="light"] .cp-login-card { background: var(--cp-bg-card); box-shadow: 0 12px 36px var(--cp-shadow-soft); } [data-theme="light"] .cp-login-theme-btn { background: var(--cp-surface-input); } /* ——— Surfaces & hovers ——— */ [data-theme="light"] .cp-nav-item:hover { background: rgba(45, 55, 72, 0.05); color: var(--cp-text); } [data-theme="light"] .cp-nav-item.is-active { color: var(--cp-text); background: var(--cp-accent-soft); box-shadow: inset 3px 0 0 var(--cp-accent); } [data-theme="light"] .cp-collapse-btn:hover, [data-theme="light"] .cp-theme-toggle:hover { background: rgba(45, 55, 72, 0.05); color: var(--cp-text); } [data-theme="light"] .cp-icon-btn, [data-theme="light"] .cp-btn-ghost { background: var(--cp-surface-input); } [data-theme="light"] .cp-icon-btn:hover, [data-theme="light"] .cp-btn-ghost:hover { background: var(--cp-surface-raised); border-color: var(--cp-border-strong); color: var(--cp-text); } [data-theme="light"] .cp-tasks-chip, [data-theme="light"] .cp-apps-chip, [data-theme="light"] .cp-logs-chip { background: var(--cp-chip-bg); border-color: var(--cp-border); color: var(--cp-text-muted); } [data-theme="light"] .cp-tasks-chip strong, [data-theme="light"] .cp-logs-chip strong { color: var(--cp-text); } /* Segmented controls (All / Open / …, GET / POST) — no dark-mode slabs */ [data-theme="light"] .cp-tasks-filter-group, [data-theme="light"] .cp-method-toggle { background: var(--cp-filter-group-bg); border-color: var(--cp-border); } [data-theme="light"] .cp-filter-btn { background: transparent; color: var(--cp-text-muted); } [data-theme="light"] .cp-filter-btn:hover:not(.is-active) { background: rgba(45, 55, 72, 0.07); color: var(--cp-text); } [data-theme="light"] .cp-filter-btn.is-active { background: var(--cp-filter-btn-active-bg); color: var(--cp-filter-btn-active-fg); box-shadow: 0 1px 3px rgba(111, 93, 200, 0.25); } [data-theme="light"] .cp-method-btn { color: var(--cp-text-muted); } [data-theme="light"] .cp-method-btn:hover:not(.is-active) { background: rgba(45, 55, 72, 0.07); color: var(--cp-text); } [data-theme="light"] .cp-method-btn.is-active { background: var(--cp-accent); color: #fff; box-shadow: 0 1px 3px rgba(111, 93, 200, 0.25); } [data-theme="light"] .cp-input, [data-theme="light"] .cp-content .form-control, [data-theme="light"] .cp-content .form-select { background: var(--cp-surface-input); border-color: var(--cp-border); color: var(--cp-text); } [data-theme="light"] .cp-input:focus, [data-theme="light"] .cp-content .form-control:focus, [data-theme="light"] .cp-content .form-select:focus { background: var(--cp-surface-raised); border-color: var(--cp-accent); box-shadow: 0 0 0 3px var(--cp-accent-soft); } [data-theme="light"] .cp-popover { background: var(--cp-bg-card); border-color: var(--cp-border); box-shadow: 0 10px 32px var(--cp-shadow-soft); } [data-theme="light"] .cp-modal-backdrop { background: rgba(45, 55, 72, 0.32); } [data-theme="light"] .cp-modal-dialog { background: var(--cp-bg-card); box-shadow: 0 20px 40px var(--cp-shadow-soft); } [data-theme="light"] .cp-mobile-backdrop { background: rgba(45, 55, 72, 0.28); } [data-theme="light"] .cp-shell.is-mobile-open .cp-sidebar { box-shadow: 10px 0 28px var(--cp-shadow-soft); } [data-theme="light"] .cp-mobile-topbar { background: var(--cp-bg-elevated); } /* ——— Panels & composers ——— */ [data-theme="light"] .cp-composer, [data-theme="light"] .cp-tasks-grouped, [data-theme="light"] .cp-apps-panel, [data-theme="light"] .cp-logs-panel, [data-theme="light"] .cp-logs-composer, [data-theme="light"] .cp-apps-composer, [data-theme="light"] .cp-agenda-toolbar, [data-theme="light"] .cp-tasks-toolbar, [data-theme="light"] .cp-agenda-add-panel { background: var(--cp-bg-card); box-shadow: 0 2px 12px var(--cp-shadow-soft); } [data-theme="light"] .cp-tasks-grouped, [data-theme="light"] .cp-logs-panel, [data-theme="light"] .cp-apps-panel { background: linear-gradient( 180deg, var(--cp-surface-raised) 0%, var(--cp-bg-card) 100% ); } [data-theme="light"] .cp-composer { border-color: var(--cp-border); } [data-theme="light"] .cp-composer textarea, [data-theme="light"] .cp-composer textarea:focus { background: transparent; border: none; box-shadow: none; } [data-theme="light"] .cp-section-header h3 { color: var(--cp-text-muted); } [data-theme="light"] .cp-section-toggle:hover { background: rgba(45, 55, 72, 0.06); color: var(--cp-text); } /* ——— Banners (very subtle tints) ——— */ [data-theme="light"] .cp-status-banner { background: linear-gradient(135deg, rgba(13, 122, 92, 0.09), rgba(13, 122, 92, 0.03)); border-color: var(--cp-success-border); } [data-theme="light"] .cp-status-banner.is-error { background: linear-gradient(135deg, rgba(185, 80, 80, 0.09), rgba(185, 80, 80, 0.03)); border-color: rgba(185, 80, 80, 0.2); } [data-theme="light"] .cp-status-banner.is-warning { background: linear-gradient(135deg, rgba(180, 130, 50, 0.1), rgba(180, 130, 50, 0.03)); border-color: rgba(180, 130, 50, 0.2); } [data-theme="light"] .cp-tasks-banner { background: linear-gradient(135deg, rgba(13, 122, 92, 0.08), rgba(90, 120, 160, 0.04)); border-color: rgba(13, 122, 92, 0.18); } [data-theme="light"] .cp-apps-banner { background: linear-gradient(135deg, rgba(111, 93, 200, 0.07), rgba(90, 120, 160, 0.04)); border-color: rgba(111, 93, 200, 0.15); } /* ——— Task & app cards ——— */ [data-theme="light"] .cp-section-body .cp-task-item { background: var(--cp-bg-card); } [data-theme="light"] .cp-task-item { background: var(--cp-surface-raised); border-color: var(--cp-border); box-shadow: none; } [data-theme="light"] .cp-task-item:hover { background: var(--cp-bg-card-hover); border-color: rgba(45, 55, 72, 0.12); box-shadow: 0 2px 8px var(--cp-shadow-soft); } [data-theme="light"] .cp-task-item[data-priority="red"] { background: linear-gradient( 105deg, rgba(185, 90, 90, 0.12) 0%, rgba(185, 90, 90, 0.04) 42%, var(--cp-bg-card) 100% ); border-color: rgba(185, 90, 90, 0.18); } [data-theme="light"] .cp-section-body .cp-task-item[data-priority="red"] { background: linear-gradient( 105deg, rgba(185, 90, 90, 0.1) 0%, rgba(185, 90, 90, 0.03) 40%, var(--cp-surface-raised) 100% ); } [data-theme="light"] .cp-task-item[data-priority="red"]:hover { background: linear-gradient( 105deg, rgba(185, 90, 90, 0.15) 0%, rgba(185, 90, 90, 0.06) 42%, var(--cp-bg-card-hover) 100% ); } [data-theme="light"] .cp-task-item[data-priority="orange"] { background: linear-gradient( 105deg, rgba(190, 120, 70, 0.1) 0%, rgba(190, 120, 70, 0.03) 42%, var(--cp-bg-card) 100% ); border-color: rgba(190, 120, 70, 0.16); } [data-theme="light"] .cp-task-item[data-priority="yellow"] { background: linear-gradient( 105deg, rgba(175, 150, 60, 0.1) 0%, rgba(175, 150, 60, 0.03) 42%, var(--cp-bg-card) 100% ); border-color: rgba(175, 150, 60, 0.16); } [data-theme="light"] .cp-task-item[data-priority="gray"], [data-theme="light"] .cp-task-item[data-priority="grey"] { background: linear-gradient( 105deg, rgba(100, 116, 139, 0.07) 0%, rgba(100, 116, 139, 0.02) 38%, var(--cp-bg-card) 100% ); } [data-theme="light"] .cp-section-body .cp-task-item[data-priority="orange"], [data-theme="light"] .cp-section-body .cp-task-item[data-priority="yellow"], [data-theme="light"] .cp-section-body .cp-task-item[data-priority="gray"], [data-theme="light"] .cp-section-body .cp-task-item[data-priority="grey"] { background: var(--cp-surface-raised); } [data-theme="light"] .cp-task-item--sub[data-priority="red"] { background: linear-gradient( 105deg, rgba(185, 90, 90, 0.07) 0%, var(--cp-surface-raised) 100% ); } [data-theme="light"] .cp-task-action:hover { background: rgba(45, 55, 72, 0.07); } [data-theme="light"] .cp-app-item { background: var(--cp-surface-raised); border-color: var(--cp-border); box-shadow: none; } [data-theme="light"] .cp-app-monitors-wrap { background: rgba(45, 55, 72, 0.04); border-top-color: var(--cp-border); } [data-theme="light"] .cp-monitor-tile { background: var(--cp-bg-card); } [data-theme="light"] .cp-monitor-tile:hover { background: var(--cp-bg-card-hover); } [data-theme="light"] .cp-btn-send { background: var(--cp-accent); } /* ——— Agenda ——— */ [data-theme="light"] .cp-agenda-cell { background: var(--cp-surface-raised); } [data-theme="light"] .cp-agenda-cell:hover { background: var(--cp-bg-card-hover); } [data-theme="light"] .cp-agenda-cell--muted { background: rgba(45, 55, 72, 0.04); opacity: 0.85; } [data-theme="light"] .cp-agenda-cell--today { background: rgba(111, 93, 200, 0.1); border-color: rgba(111, 93, 200, 0.2); } [data-theme="light"] .cp-agenda-cell.is-selected { background: rgba(111, 93, 200, 0.14); border-color: var(--cp-accent); } [data-theme="light"] .cp-agenda-chip-event { box-shadow: inset 0 0 0 1px rgba(45, 55, 72, 0.06); } [data-theme="light"] .cp-agenda-chip-event.cp-priority-gray, [data-theme="light"] .cp-agenda-chip-event.cp-priority-grey { background: var(--cp-agenda-chip-gray-bg); color: var(--cp-agenda-chip-gray-fg); border-left-color: #7a8799; } [data-theme="light"] .cp-agenda-chip-event.cp-priority-red { background: var(--cp-agenda-chip-red-bg); color: var(--cp-agenda-chip-red-fg); border-left-color: #c45c5c; box-shadow: inset 0 0 0 1px rgba(180, 80, 80, 0.2); } [data-theme="light"] .cp-agenda-chip-event.cp-priority-yellow { background: var(--cp-agenda-chip-yellow-bg); color: var(--cp-agenda-chip-yellow-fg); border-left-color: #b8942e; box-shadow: inset 0 0 0 1px rgba(180, 150, 60, 0.22); } [data-theme="light"] .cp-agenda-more { font-weight: 600; color: var(--cp-text-muted); } [data-theme="light"] .cp-agenda-day-item { background: var(--cp-surface-raised); border-color: var(--cp-border); } /* ——— Status / alerts / logs ——— */ [data-theme="light"] .cp-status-grid .status_row { background: var(--cp-bg-card) !important; } [data-theme="light"] .cp-status-grid .status_row:hover { background: var(--cp-bg-card-hover) !important; } [data-theme="light"] .cp-content .table thead th { background: rgba(45, 55, 72, 0.05); } [data-theme="light"] .cp-content .table-striped tbody tr:nth-of-type(odd) { background: rgba(45, 55, 72, 0.03); } [data-theme="light"] .cp-content .page-link { background: var(--cp-surface-input); border-color: var(--cp-border); color: var(--cp-text); } [data-theme="light"] .cp-log-rule-item, [data-theme="light"] .cp-alerts-empty, [data-theme="light"] .cp-logs-empty { background: var(--cp-surface-raised); } /* ——— Logs page ——— */ [data-theme="light"] .cp-logs-page .cp-logs-banner { border-color: rgba(124, 58, 237, 0.18); } [data-theme="light"] .cp-logs-banner-icon { box-shadow: 0 0 18px rgba(111, 93, 200, 0.22); } [data-theme="light"] .cp-logs-add-bar, [data-theme="light"] .cp-logs-page .cp-logs-composer { background: var(--cp-bg-card); border-color: var(--cp-border); box-shadow: 0 2px 12px var(--cp-shadow-soft); } [data-theme="light"] .cp-logs-add-bar { border-style: dashed; } [data-theme="light"] .cp-logs-page button.cp-logs-add-btn, [data-theme="light"] .cp-logs-page button.cp-apps-add-btn { background: var(--cp-pill-btn-bg); color: var(--cp-text); border-color: var(--cp-border); font-weight: 500; } [data-theme="light"] .cp-logs-page button.cp-logs-add-btn:hover, [data-theme="light"] .cp-logs-page button.cp-apps-add-btn:hover { background: var(--cp-accent-soft); border-color: var(--cp-border-strong); color: var(--cp-accent); } [data-theme="light"] .cp-log-app-icon { background: var(--cp-accent-soft); color: var(--cp-accent); } [data-theme="light"] .cp-log-app-title h3 { color: var(--cp-text); } [data-theme="light"] .cp-log-rule-item .cp-app-item { background: var(--cp-surface-raised); border-color: var(--cp-border); } [data-theme="light"] .cp-log-rule-item .cp-app-item-icon { background: rgba(59, 130, 246, 0.16); color: #2d4a7a; } [data-theme="light"] .cp-log-rule-label { color: var(--cp-text-muted); } [data-theme="light"] .cp-logs-empty-icon { background: var(--cp-accent-soft); color: var(--cp-accent); } /* ——— Alerts page ——— */ [data-theme="light"] .cp-alerts-page .cp-status-banner, [data-theme="light"] .cp-alerts-health { border-color: var(--cp-success-border); } [data-theme="light"] .cp-alerts-page .cp-status-banner.is-error, [data-theme="light"] .cp-alerts-health.is-error { border-color: rgba(185, 70, 70, 0.3); } [data-theme="light"] .cp-alerts-page .cp-status-banner.is-warning, [data-theme="light"] .cp-alerts-health.is-warning { border-color: rgba(180, 130, 40, 0.3); } [data-theme="light"] .cp-alerts-banner-icon { box-shadow: 0 0 18px rgba(111, 93, 200, 0.22); } [data-theme="light"] .cp-alerts-chip--issues { border-color: rgba(185, 70, 70, 0.2); background: rgba(185, 70, 70, 0.08); } [data-theme="light"] .cp-alerts-chip--issues i { color: #a84848; } [data-theme="light"] .cp-alerts-chip--issues strong { color: #7a2e2e; } [data-theme="light"] .cp-alerts-app { background: var(--cp-surface-raised); border-color: var(--cp-border); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } [data-theme="light"] .cp-alerts-app-name { color: var(--cp-text); } [data-theme="light"] .cp-alerts-app--ok .cp-alerts-app-icon { background: var(--cp-alert-ok-bg); color: var(--cp-alert-ok-fg); } [data-theme="light"] .cp-alerts-app--warn .cp-alerts-app-icon { background: var(--cp-alert-warn-bg); color: var(--cp-alert-warn-fg); } [data-theme="light"] .cp-alerts-app--err .cp-alerts-app-icon { background: var(--cp-alert-err-bg); color: var(--cp-alert-err-fg); } [data-theme="light"] .cp-alerts-overall--ok { background: var(--cp-alert-ok-bg); color: var(--cp-alert-ok-fg); border-color: var(--cp-alert-ok-border); font-weight: 700; } [data-theme="light"] .cp-alerts-overall--warn { background: var(--cp-alert-warn-bg); color: var(--cp-alert-warn-fg); border-color: var(--cp-alert-warn-border); font-weight: 700; } [data-theme="light"] .cp-alerts-overall--err { background: var(--cp-alert-err-bg); color: var(--cp-alert-err-fg); border-color: var(--cp-alert-err-border); font-weight: 700; } [data-theme="light"] .cp-alerts-monitor { background: var(--cp-alert-monitor-bg); border-color: var(--cp-border); color: var(--cp-text-muted); } [data-theme="light"] .cp-alerts-monitor:hover { background: var(--cp-accent-soft); border-color: var(--cp-border-strong); color: var(--cp-text); } [data-theme="light"] .cp-alerts-monitor-label { color: var(--cp-text); font-weight: 600; } [data-theme="light"] .cp-alerts-monitor-dot { box-shadow: 0 0 4px rgba(45, 55, 72, 0.15); } [data-theme="light"] .cp-alerts-page .cp-section-count--muted { background: var(--cp-count-muted-bg); color: var(--cp-count-muted-fg); } [data-theme="light"] .cp-status-grid .cp-status-pill--ok { color: #0a5c44; background: var(--cp-alert-ok-bg); padding: 2px 8px; border-radius: 999px; } [data-theme="light"] .cp-status-grid .cp-status-pill--warn { color: #6b4e12; background: var(--cp-alert-warn-bg); padding: 2px 8px; border-radius: 999px; } [data-theme="light"] .cp-status-grid .cp-status-pill--err { color: #7a2e2e; background: var(--cp-alert-err-bg); padding: 2px 8px; border-radius: 999px; } [data-theme="light"] .cp-app-method--get { background: rgba(59, 130, 246, 0.18); color: #2d4a7a; } [data-theme="light"] .cp-app-method--post { background: rgba(190, 120, 70, 0.2); color: #6b4428; } [data-theme="light"] .cp-user-avatar { background: var(--cp-accent-soft); color: var(--cp-accent); } /* ——— Toasts & messages (muted) ——— */ [data-theme="light"] .cp-tasks-toast--success, [data-theme="light"] .cp-settings-toast--success, [data-theme="light"] .cp-modal-status.is-success { color: #0d6b52; } [data-theme="light"] .cp-tasks-toast--error, [data-theme="light"] .cp-settings-toast--error, [data-theme="light"] .cp-modal-status.is-error, [data-theme="light"] .cp-login-error { color: #9f4545; } [data-theme="light"] .cp-composer-status.is-success { color: #0d6b52; } [data-theme="light"] .cp-composer-status.is-error { color: #9f4545; } /* ——— Toggle track (settings) ——— */ [data-theme="light"] .cp-toggle-track { background: rgba(45, 55, 72, 0.14); } [data-theme="light"] .cp-toggle-input:checked + .cp-toggle-track { background: var(--cp-accent); } /* Softer status indicator glows */ [data-theme="light"] .cp-status-grid .light { box-shadow: 0 0 6px rgba(34, 140, 100, 0.35); } [data-theme="light"] .cp-status-icon { background: linear-gradient(135deg, var(--cp-success), #10a37a); color: #fff; box-shadow: 0 0 20px rgba(13, 122, 92, 0.35); } /* Same green pill as dashboard status icon (Agenda + Tasks banners) */ [data-theme="light"] .cp-tasks-banner-icon { background: linear-gradient(135deg, var(--cp-success), #10a37a); color: #fff; box-shadow: 0 0 20px rgba(13, 122, 92, 0.35); } [data-theme="light"] .cp-tasks-banner-icon i { color: #fff; } [data-theme="light"] .cp-status-msg { background: var(--cp-bg-card); } [data-theme="light"] .cp-status-msg-row:hover { background: rgba(45, 55, 72, 0.05); } [data-theme="light"] .cp-status-msg-icon-btn { background: var(--cp-surface-raised); } [data-theme="light"] .cp-status-msg-text { background: var(--cp-surface-input); } [data-theme="light"] .cp-status-detail-toast--success { color: #0d6b52; } [data-theme="light"] .cp-status-detail-toast--error { color: #9f4545; } [data-theme="light"] .cp-brand-icon { box-shadow: 0 0 18px var(--cp-accent-glow); } [data-theme="light"] .cp-customers-action-item--open .cp-customers-action-icon { background: rgba(190, 120, 70, 0.16); color: #9a5f28; } [data-theme="light"] .cp-customers-action-item--past .cp-customers-action-icon { background: var(--cp-success-bg); color: var(--cp-success); } [data-theme="light"] .cp-customers-action-complete:hover { background: var(--cp-success-bg); }