openvibers/openvibe.live Commits

Status words follow the theme's readable status colours (#516)

OP OpenVibers committed 12 days ago · 87dbd438a5 · 6 files, +30 −30

Warnings, errors and good news written in fixed dark-theme colours (#fbbf24, #ef4444, #4ade80…) are now the theme's
--warning-text, --danger-text and --success-text with the old colour as the fallback (tools/design-lint/status-colors.js):
on Daylight the home stats' +261 and -50% were faint green and red on white, and amber on white is about 1.6:1. Only the
color property; left as they were: icons over video call tiles, the OBS chat overlay and the cosmetics' item colours.

Changes

ddiff --git a/public/css/features/broadcast.css b/public/css/features/broadcast.css
iindex 18800db7..0167234b 100644
---- a/public/css/features/broadcast.css
++++ b/public/css/features/broadcast.css
@@@ -2379,9 +2379,9 @@
      border-radius: 5px; background: color-mix(in srgb, var(--text-primary, #fff) 5%, transparent);
  }
  .bc-mic-meter-status { font-size: .76rem; color: var(--text-muted, #9aa3b2); margin-top: 4px; display: block; }
--.bc-mic-meter-status.is-good { color: #22c55e; }
--.bc-mic-meter-status.is-warn { color: #f59e0b; }
--.bc-mic-meter-status.is-bad  { color: #ef4444; }
++.bc-mic-meter-status.is-good { color: var(--success-text, #22c55e); }
++.bc-mic-meter-status.is-warn { color: var(--warning-text, #f59e0b); }
++.bc-mic-meter-status.is-bad  { color: var(--danger-text, #ef4444); }
  .bc-cap-list { display: flex; flex-direction: column; gap: 6px; }
  .bc-cap-row {
      display: flex; align-items: center; gap: 11px;
@@@ -2396,11 +2396,11 @@
      font-style: normal; font-size: .7rem; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0;
  }
--.bc-cap-row.is-on em { color: #22c55e; }
++.bc-cap-row.is-on em { color: var(--success-text, #22c55e); }
  .bc-cap-row.is-off em { color: var(--text-muted, #9aa3b2); }
  .bc-cap-warn {
      margin: -1px 0 3px; padding: 6px 11px; font-size: .76rem; line-height: 1.4;
--    color: #f59e0b; display: flex; gap: 7px; align-items: flex-start;
++    color: var(--warning-text, #f59e0b); display: flex; gap: 7px; align-items: flex-start;
  }
  .bc-ws-toggle-group { margin-top: 10px; }
  .bc-ws-toggle-group-title {
ddiff --git a/public/css/features/chatpage.css b/public/css/features/chatpage.css
iindex ae429a19..df49da73 100644
---- a/public/css/features/chatpage.css
++++ b/public/css/features/chatpage.css
@@@ -145,7 +145,7 @@
      gap: 6px;
  }
  .vc-participant-row.speaking .vc-participant-name {
--    color: #4ade80;
++    color: var(--success-text, #4ade80);
  }
  .vc-participant-name {
      font-size: 0.75rem;
@@@ -256,7 +256,7 @@
      padding: 8px 14px;
      background: rgba(251, 191, 36, 0.12);
      border-top: 1px solid rgba(251, 191, 36, 0.3);
--    color: #fbbf24;
++    color: var(--warning-text, #fbbf24);
      font-size: 0.82rem;
  }
  
ddiff --git a/public/css/features/content.css b/public/css/features/content.css
iindex d91f41b8..40f18dd7 100644
---- a/public/css/features/content.css
++++ b/public/css/features/content.css
@@@ -382,8 +382,8 @@ a.cf-chan:hover .cf-name { color: var(--text-primary); text-decoration: underlin
      background: rgba(8, 12, 22, 0.7);
      border: 2px solid currentColor;
  }
--.cf-grade--s { color: #fbbf24; }
--.cf-grade--a { color: #4ade80; }
++.cf-grade--s { color: var(--warning-text, #fbbf24); }
++.cf-grade--a { color: var(--success-text, #4ade80); }
  .cf-grade--b { color: #60a5fa; }
  .cf-grade--c { color: #94a3b8; }
  
ddiff --git a/public/css/features/featured.css b/public/css/features/featured.css
iindex 40bf8bb1..f17e9f1d 100644
---- a/public/css/features/featured.css
++++ b/public/css/features/featured.css
@@@ -36,7 +36,7 @@
  
  .hf-panel { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; min-width: 0; }
  .hf-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
--.hf-kicker b { color: #ef4444; display: inline-flex; align-items: center; gap: 6px; }
++.hf-kicker b { color: var(--danger-text, #ef4444); display: inline-flex; align-items: center; gap: 6px; }
  .hf-hide { background: none; border: 0; padding: 4px 6px; color: var(--text-muted); cursor: pointer; border-radius: 8px; font-size: 0.8rem; line-height: 1; }
  .hf-hide:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
  .hf-title { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex 283817a1..2962e98a 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -184,7 +184,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
  .streamer-group-stream:hover { background: var(--bg-hover); }
  .streamer-group-stream-thumb-img { width: 100%; height: 100%; object-fit: cover; }
  .streamer-group-stream-thumb-placeholder { color: var(--text-muted); font-size: 1rem; }
--.sg-live { color: #ef4444; font-weight: 700; }
++.sg-live { color: var(--danger-text, #ef4444); font-weight: 700; }
  .sg-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-right: 2px; vertical-align: middle; animation: sg-pulse 1.6s var(--ov-ease-in-out, ease-in-out) infinite; }
  @keyframes sg-pulse { 50% { opacity: .35; } }
  .streamer-group-stream.is-live .streamer-group-stream-thumb { box-shadow: 0 0 0 2px #ef4444; border-radius: 8px; }
@@@ -632,8 +632,8 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
      font-size: 0.6rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap;
      align-self: center;
  }
--.hero-stat-delta.is-up { color: #4ade80; background: color-mix(in srgb, #4ade80 13%, transparent); border: 1px solid color-mix(in srgb, #4ade80 24%, transparent); }
--.hero-stat-delta.is-down { color: #f87171; background: color-mix(in srgb, #f87171 13%, transparent); border: 1px solid color-mix(in srgb, #f87171 24%, transparent); }
++.hero-stat-delta.is-up { color: var(--success-text, #4ade80); background: color-mix(in srgb, #4ade80 13%, transparent); border: 1px solid color-mix(in srgb, #4ade80 24%, transparent); }
++.hero-stat-delta.is-down { color: var(--danger-text, #f87171); background: color-mix(in srgb, #f87171 13%, transparent); border: 1px solid color-mix(in srgb, #f87171 24%, transparent); }
  .hero-stat-delta.is-flat { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 10%, transparent); border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); }
  .hero-stat-delta em { font-style: normal; opacity: 0.6; margin-left: 2px; font-size: 0.92em; }
  .hero-stat-trend {
@@@ -642,10 +642,10 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
      border-left: 1px solid currentColor; font-weight: 750;
  }
  .hero-stat-trend i { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
--.hero-stat-trend.is-up { color: #4ade80; } .hero-stat-trend.is-up i { border-bottom: 5px solid currentColor; }
--.hero-stat-trend.is-down { color: #f87171; } .hero-stat-trend.is-down i { border-top: 5px solid currentColor; }
++.hero-stat-trend.is-up { color: var(--success-text, #4ade80); } .hero-stat-trend.is-up i { border-bottom: 5px solid currentColor; }
++.hero-stat-trend.is-down { color: var(--danger-text, #f87171); } .hero-stat-trend.is-down i { border-top: 5px solid currentColor; }
  .hero-stat-trend.is-flat { color: var(--text-muted); } .hero-stat-trend.is-flat i { width: 6px; height: 2px; border: 0; background: currentColor; border-radius: 1px; }
--.hero-stat-trend.is-new { color: #fbbf24; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9em; }
++.hero-stat-trend.is-new { color: var(--warning-text, #fbbf24); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9em; }
  .hero-stat-label { text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
  @media (max-width: 480px) {
      .hero-stat-delta { font-size: 0.54rem; padding: 1px 6px; }
@@@ -754,7 +754,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
      font-size: 0.95rem; line-height: 1.6;
  }
  .cta-money-grid .home-cta-feature > i:first-child {
--    color: #4ade80; background: color-mix(in srgb, #4ade80 12%, transparent); border-color: color-mix(in srgb, #4ade80 26%, transparent);
++    color: var(--success-text, #4ade80); background: color-mix(in srgb, #4ade80 12%, transparent); border-color: color-mix(in srgb, #4ade80 26%, transparent);
  }
  .cta-money-grid { margin-bottom: 4px !important; }
  
ddiff --git a/public/css/style.css b/public/css/style.css
iindex 74fda2a8..5325decc 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -3556,7 +3556,7 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  }
  .aiv-meter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .aiv-status { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
--.aiv-status.ok { background: rgba(52,211,153,0.18); color: #34d399; }
++.aiv-status.ok { background: rgba(52,211,153,0.18); color: var(--success-text, #34d399); }
  .aiv-status.off { background: rgba(148,148,148,0.18); color: #b0b0b0; }
  .aiv-meter-bar { margin-top: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary, #fff) 8%, transparent); overflow: hidden; }
  .aiv-meter-fill { height: 100%; background: linear-gradient(90deg, #4ecdc4, #60a5fa); transition: width var(--ov-dur-3, 0.3s); }
@@@ -5462,7 +5462,7 @@ body.theme-light .btn-outline:hover {
      font-size: 0.65rem;
  }
  .call-muted-icon {
--    color: #ef4444;
++    color: var(--danger-text, #ef4444);
      font-size: 0.65rem;
  }
  .call-you-badge {
@@@ -5628,7 +5628,7 @@ body.theme-light .btn-outline:hover {
      color: var(--text-secondary, #888);
  }
  .call-peer-menu-mod i { color: var(--accent, #8b5cf6); }
--.call-peer-menu-danger { color: #ef4444 !important; }
++.call-peer-menu-danger { color: var(--danger-text, #ef4444) !important; }
  .call-peer-menu-danger:hover { background: rgba(239,68,68,0.1) !important; }
  
  /* Volume slider in context menu */
@@@ -5798,7 +5798,7 @@ body.theme-light .btn-outline:hover {
  .call-connected-badge {
      font-size: 0.75rem;
      font-weight: 600;
--    color: #22c55e;
++    color: var(--success-text, #22c55e);
      display: flex;
      align-items: center;
      gap: 4px;
@@@ -6838,8 +6838,8 @@ textarea.paste-textarea {
  /* Only while the connection is in flux does the dot move; a settled call has nothing to pulse about. */
  .vc-connected-badge.is-connecting i, .vc-connected-badge.is-reconnecting i { animation: vc-pulse 1.2s infinite; }
  .vc-connected-badge.is-connecting { color: var(--text-muted); }
--.vc-connected-badge.is-reconnecting { color: #f59e0b; }
--.vc-connected-badge.is-connected i { color: #22c55e; }
++.vc-connected-badge.is-reconnecting { color: var(--warning-text, #f59e0b); }
++.vc-connected-badge.is-connected i { color: var(--success-text, #22c55e); }
  @keyframes vc-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
@@@ -6891,7 +6891,7 @@ textarea.paste-textarea {
      border-radius: 6px;
      border: 1px solid #fbbf24;
      background: transparent;
--    color: #fbbf24;
++    color: var(--warning-text, #fbbf24);
      font-size: 0.8rem;
      cursor: pointer;
      transition: background var(--ov-dur-1, 0.12s), color var(--ov-dur-1, 0.12s);
@@@ -6943,7 +6943,7 @@ textarea.paste-textarea {
      font-size: 0.82rem;
  }
  .vc-ptt-status.ptt-active {
--    color: #22c55e;
++    color: var(--success-text, #22c55e);
      font-weight: 600;
  }
  .vc-ptt-status.ptt-active strong {
@@@ -7561,7 +7561,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  }
  .vc-mini-dot {
      font-size: 0.5rem;
--    color: #22c55e;
++    color: var(--success-text, #22c55e);
      margin-right: 4px;
  }
  .vc-mini-status { font-weight: 600; white-space: nowrap; }
@@@ -7577,7 +7577,7 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
      font-size: 0.8rem;
  }
  .vc-mini-btn:hover { background: var(--bg-primary, #0f0f1a); }
--.vc-mini-btn.vc-mini-leave { color: #ef4444; }
++.vc-mini-btn.vc-mini-leave { color: var(--danger-text, #ef4444); }
  .vc-mini-btn.vc-mini-leave:hover { background: rgba(239,68,68,0.15); }
  
  /* ═══════════════════════════════════════════════════════════
@@@ -9441,8 +9441,8 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  /* ── AI Chat Viewers v3 panel ─────────────────────────────── */
  .aiv-topline { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
  .aiv-status { font-size:0.75rem; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--bg-tertiary); color:var(--text-secondary); }
--.aiv-status.ok { background:color-mix(in srgb, #22c55e 18%, transparent); color:#4ade80; }
--.aiv-status.warn { background:color-mix(in srgb, #f59e0b 18%, transparent); color:#fbbf24; }
++.aiv-status.ok { background:color-mix(in srgb, #22c55e 18%, transparent); color:var(--success-text, #4ade80); }
++.aiv-status.warn { background:color-mix(in srgb, #f59e0b 18%, transparent); color:var(--warning-text, #fbbf24); }
  .aiv-status.off { background:var(--bg-tertiary); color:var(--text-muted); }
  .aiv-senses { display:flex; gap:14px; flex-wrap:wrap; font-size:0.78rem; color:var(--text-secondary); padding:8px 10px; border:1px dashed var(--border); border-radius:8px; margin-bottom:10px; }
  .aiv-senses i { color:var(--accent); margin-right:4px; }
@@@ -9462,7 +9462,7 @@ label.staff-inline-toggle.aiv-field { flex-direction:row; align-items:center; }
  .aiv-log-row { display:grid; grid-template-columns:20px 1fr auto; gap:8px; align-items:start; font-size:0.8rem; padding:5px 6px; border-radius:6px; }
  .aiv-log-row:nth-child(odd) { background:color-mix(in srgb, var(--bg-tertiary) 60%, transparent); }
  .aiv-log-row i { color:var(--text-muted); margin-top:3px; }
--.aiv-log-line i { color:var(--accent); } .aiv-log-mention i { color:#f59e0b; } .aiv-log-error i { color:#ef4444; } .aiv-log-tick i { color:#60a5fa; }
++.aiv-log-line i { color:var(--accent); } .aiv-log-mention i { color:var(--warning-text, #f59e0b); } .aiv-log-error i { color:var(--danger-text, #ef4444); } .aiv-log-tick i { color:#60a5fa; }
  .aiv-log-reason { font-size:0.74rem; }
  .aiv-log-meta { display:flex; flex-direction:column; align-items:flex-end; font-size:0.72rem; white-space:nowrap; }
  .aiv-preview-line { padding:6px 8px; border-left:3px solid var(--accent); margin:6px 0; font-size:0.85rem; background:var(--bg-tertiary); border-radius:0 6px 6px 0; }