serversdown/project-lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: live stacks in hand viewer + retheme UI to RTO black/orange palette

Browse Source 
Hand viewer:
- stacks now decrement as players commit chips (street-aware "to"-amount
  accounting), showing e.g. 300 -> 285 after a 15 open, "all in" at 0; pot is
  computed from total committed (accurate, no double-counting raises)

Theme (match the rec-theory-optimal look — warm black & orange, not Halloween):
- deep near-black bg (#070707 / #0e0e0e panels), warm orange accent (#ff7a00),
  amber-gold secondary (#ffb347), muted green (#8fd694); warm dark borders
- killed the neon-orange glows and the purple accents; chat app + all standalone
  pages (logs/self/journal/hand/recap/hands) on one palette

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
serversdown
2026-06-18 00:53:18 +00:00
parent 7b65f81d7e
commit 4882225751
7 changed files with 1069 additions and 1045 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lyra/web/static/hand.html
+41 -17
View File
@@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" />
<meta name="theme-color" content="#070707" />
<title>Lyra — Hand</title>
<style>
:root {
--bg:#0b0d12; --bg-elev:#141821; --border:#232936; --text:#e6e9ef;
--fade:#8b93a7; --accent:#7aa2ff; --felt:#16322a; --feltline:#0f5132;
--chip:#ffcf6b; --hero:#7aa2ff;
--bg:#070707; --bg-elev:#0e0e0e; --border:#2a1d12; --text:#e8e8e8;
--fade:#8a8a8a; --accent:#ff7a00; --felt:#16322a; --feltline:#0f5132;
--chip:#ffb347; --hero:#ff7a00;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
@@ -42,8 +42,8 @@
.seat{position:absolute;transform:translate(-50%,-50%);width:96px;text-align:center;
background:rgba(13,16,22,.85);border:1px solid var(--border);border-radius:10px;padding:5px 4px;}
.seat.hero{border-color:var(--hero);box-shadow:0 0 10px rgba(122,162,255,.4);}
.seat.acting{border-color:var(--chip);box-shadow:0 0 12px rgba(255,207,107,.6);}
.seat.hero{border-color:var(--hero);box-shadow:0 0 10px rgba(255,122,0,.4);}
.seat.acting{border-color:var(--chip);box-shadow:0 0 12px rgba(255,179,71,.6);}
.seat .pos{font-size:.66rem;color:var(--accent);font-weight:700;letter-spacing:.4px;}
.seat .nm{font-size:.66rem;color:var(--fade);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.seat .cards{display:flex;gap:3px;justify-content:center;margin:3px 0;}
@@ -52,7 +52,7 @@
.seat.folded{opacity:.4;}
.controls{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0 6px;}
.controls button{background:#1b2333;border:1px solid var(--border);color:var(--text);
.controls button{background:#241400;border:1px solid var(--border);color:var(--text);
border-radius:8px;padding:8px 14px;font-size:.95rem;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.controls button:disabled{opacity:.4;}
.step-label{color:var(--fade);font-size:.8rem;min-width:80px;text-align:center;}
@@ -60,13 +60,13 @@
.log{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;}
.log .ln{padding:5px 8px;border-radius:6px;font-size:.9rem;display:flex;gap:8px;}
.log .ln.cur{background:#1b2333;}
.log .ln.cur{background:#241400;}
.log .ln.brd{color:var(--fade);font-style:italic;}
.log .st{color:var(--fade);font-size:.72rem;width:54px;flex:none;text-transform:uppercase;}
.summary{margin-top:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:12px;}
.summary .lbl{color:var(--fade);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;}
.err{color:#ff6b6b;text-align:center;padding:40px;}
.net-pos{color:#5ad1a0;} .net-neg{color:#ff6b6b;}
.net-pos{color:#8fd694;} .net-neg{color:#ff6b6b;}
</style>
</head>
<body>
@@ -140,7 +140,9 @@
// place seats around the oval
const seatsEl = document.getElementById('seats');
const starts = {};
ordered.forEach((p,i)=>{
starts[p.pos] = (p.stack!=null ? Number(p.stack) : null);
const ang = (90 + i*(360/n)) * Math.PI/180; // bottom = 90deg
const x = 50 + 46*Math.cos(ang), y = 50 + 44*Math.sin(ang);
const el = document.createElement('div');
@@ -151,7 +153,7 @@
el.innerHTML = `<div class="pos">${esc(p.pos||'')}</div>`
+ (p.name?`<div class="nm">${esc(p.name)}</div>`:'')
+ `<div class="cards">${hcards?cards(hcards,true):'<span class="card sm back">x</span><span class="card sm back">x</span>'}</div>`
+ (p.stack!=null?`<div class="stack">${esc(p.stack)}</div>`:'')
+ `<div class="stack" data-stack>${p.stack!=null?esc(p.stack):''}</div>`
+ `<div class="act" data-act></div>`;
seatsEl.appendChild(el);
});
@@ -167,25 +169,47 @@
return `<div class="ln" data-i="${idx}"><span class="st">${esc(a.street||'')}</span>${esc(a.pos||'')} ${esc(a.action||'')}${amt}</div>`;
}).join('');
const cap = s => s ? s[0].toUpperCase()+s.slice(1) : s;
const fmt = n => Number.isInteger(n) ? n : Math.round(n*100)/100;
function draw(){
let pot = 0, board = [], street = 'Preflop';
let board = [], street = 'Preflop';
const lastAct = {}, folded = {};
// street-aware chip accounting: amounts are "to" totals for the street
const contrib = {}; // committed in prior (flushed) streets
let streetCommit = {}, streetBet = 0, curStreet = 'preflop';
const flushStreet = () => { for(const p in streetCommit){ contrib[p]=(contrib[p]||0)+streetCommit[p]; } streetCommit={}; streetBet=0; };
for(let i=0;i<step;i++){
const a = acts[i];
if(a.board){ board = a.board; street = a.street; continue; }
if(a.street) street = a.street;
if(a.amount!=null && ['call','bet','raise','allin','post'].includes(a.action)) pot += Number(a.amount)||0;
if(a.pos){ lastAct[a.pos] = (a.action||'') + (a.amount!=null?' '+a.amount:''); }
if(a.action==='fold' && a.pos) folded[a.pos]=true;
if(a.board){ flushStreet(); curStreet=a.street; board=a.board; street=cap(a.street); continue; }
if(a.street && a.street!==curStreet){ flushStreet(); curStreet=a.street; }
if(a.street) street = cap(a.street);
const pos=a.pos, amt=(a.amount!=null?Number(a.amount):null);
if(pos){
switch(a.action){
case 'post': case 'bet': streetCommit[pos]=amt||0; streetBet=Math.max(streetBet, amt||0); break;
case 'raise': case 'allin': streetCommit[pos]=(amt!=null?amt:streetBet); streetBet=Math.max(streetBet, streetCommit[pos]); break;
case 'call': streetCommit[pos]=(amt!=null?amt:streetBet); break;
case 'fold': folded[pos]=true; break;
}
lastAct[pos]=(a.action||'')+(amt!=null?' '+amt:'');
}
}
// committed total per player (flushed streets + current street), pot = sum
const committed={}, allPos=new Set([...Object.keys(contrib),...Object.keys(streetCommit)]);
let pot=0;
allPos.forEach(p=>{ committed[p]=(contrib[p]||0)+(streetCommit[p]||0); pot+=committed[p]; });
boardEl.innerHTML = cards(board);
potEl.textContent = pot ? ('Pot ~'+pot) : '';
potEl.textContent = pot ? ('Pot '+fmt(pot)) : '';
streetEl.textContent = street;
document.querySelectorAll('.seat').forEach(s=>{
const pos=s.dataset.pos;
s.querySelector('[data-act]').textContent = lastAct[pos]||'';
s.classList.toggle('folded', !!folded[pos]);
s.classList.remove('acting');
const stEl=s.querySelector('[data-stack]'), start=starts[pos], c=committed[pos]||0;
if(start!=null){ const rem=start-c; stEl.textContent = rem<=0 ? 'all in' : fmt(rem); }
else { stEl.textContent = c ? '−'+fmt(c) : ''; }
});
const cur = acts[step-1];
if(cur && cur.pos){
lyra/web/static/hands.html
+4 -4
View File
@@ -3,10 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" />
<meta name="theme-color" content="#070707" />
<title>Lyra — Hands</title>
<style>
:root{--bg:#0b0d12;--bg-elev:#141821;--bg-line:#11141b;--border:#232936;--text:#e6e9ef;--fade:#8b93a7;--accent:#7aa2ff;}
:root{--bg:#070707;--bg-elev:#0e0e0e;--bg-line:#141414;--border:#2a1d12;--text:#e8e8e8;--fade:#8a8a8a;--accent:#ff7a00;}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;}
@@ -19,7 +19,7 @@
main{max-width:640px;margin:0 auto;padding:12px 12px 40px;}
a.hand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);
background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
a.hand:active{background:#1b2333;}
a.hand:active{background:#241400;}
.cards{display:flex;gap:4px;flex:none;}
.card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
width:24px;height:33px;background:#f4f4f0;color:#111;border-radius:4px;font-weight:700;font-size:.72rem;line-height:1;}
@@ -29,7 +29,7 @@
.ln1{font-size:.92rem;}
.ln2{font-size:.74rem;color:var(--fade);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.res{flex:none;font-variant-numeric:tabular-nums;font-weight:600;}
.pos-res{color:#5ad1a0;} .neg-res{color:#ff6b6b;}
.pos-res{color:#8fd694;} .neg-res{color:#ff6b6b;}
.tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);}
.empty{color:var(--fade);text-align:center;padding:46px 16px;}
</style>
lyra/web/static/journal.html
+5 -5
View File
@@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" />
<meta name="theme-color" content="#070707" />
<title>Lyra — Journal</title>
<style>
:root {
--bg: #0b0d12; --bg-elev: #141821; --bg-line: #11141b; --border: #232936;
--text: #e6e9ef; --fade: #8b93a7; --accent: #7aa2ff;
--reflection: #5ad1a0; --metacognition: #c08bff; --journal: #ffcf6b;
--bg: #070707; --bg-elev: #0e0e0e; --bg-line: #141414; --border: #2a1d12;
--text: #e8e8e8; --fade: #8a8a8a; --accent: #ff7a00;
--reflection: #8fd694; --metacognition: #ffb347; --journal: #ff7a00;
}
* { box-sizing: border-box; }
html, body {
@@ -31,7 +31,7 @@
border: 1px solid var(--border); background: var(--bg-line); color: var(--fade);
cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.chip.active { color: var(--text); border-color: var(--accent); background: #1b2333; }
.chip.active { color: var(--text); border-color: var(--accent); background: #241400; }
main { max-width: 720px; margin: 0 auto; padding: 14px 14px 48px; }
.day { color: var(--fade); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px;
lyra/web/static/logs.html
+15 -15
View File
@@ -3,22 +3,22 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" />
<meta name="theme-color" content="#070707" />
<title>Lyra — Live Log</title>
<style>
:root {
--bg: #0b0d12;
--bg-elev: #141821;
--bg-line: #11141b;
--border: #232936;
--text: #e6e9ef;
--fade: #8b93a7;
--accent: #7aa2ff;
--info: #5ad1a0;
--debug: #8b93a7;
--bg: #070707;
--bg-elev: #0e0e0e;
--bg-line: #141414;
--border: #2a1d12;
--text: #e8e8e8;
--fade: #8a8a8a;
--accent: #ff7a00;
--info: #8fd694;
--debug: #8a8a8a;
--error: #ff6b6b;
--system: #c08bff;
--warn: #ffcf6b;
--system: #ffb347;
--warn: #ffb347;
}
* { box-sizing: border-box; }
html, body {
@@ -56,7 +56,7 @@
border: 1px solid var(--border); background: var(--bg-line); color: var(--fade);
cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.chip.active { color: var(--text); border-color: var(--accent); background: #1b2333; }
.chip.active { color: var(--text); border-color: var(--accent); background: #241400; }
#search {
flex: 1 1 140px; min-width: 120px;
background: var(--bg-line); border: 1px solid var(--border); color: var(--text);
@@ -85,9 +85,9 @@
padding: 1px 7px; border-radius: 5px; font-weight: 700; flex: none;
}
.lvl-info { color: var(--info); background: #0f2a20; }
.lvl-debug { color: var(--debug); background: #1a1f29; }
.lvl-debug { color: var(--debug); background: #161616; }
.lvl-error { color: var(--error); background: #2e1414; }
.lvl-system { color: var(--system); background: #221536; }
.lvl-system { color: var(--system); background: #2c2410; }
.lvl-warn { color: var(--warn); background: #2c2410; }
.msg { font-size: .92rem; font-weight: 500; }
.fields {
lyra/web/static/recap.html
+3 -3
View File
@@ -3,10 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" />
<meta name="theme-color" content="#070707" />
<title>Lyra — Recap</title>
<style>
:root{--bg:#0b0d12;--bg-elev:#141821;--bg-line:#11141b;--border:#232936;--text:#e6e9ef;--fade:#8b93a7;--accent:#7aa2ff;}
:root{--bg:#070707;--bg-elev:#0e0e0e;--bg-line:#141414;--border:#2a1d12;--text:#e8e8e8;--fade:#8a8a8a;--accent:#ff7a00;}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;}
@@ -15,7 +15,7 @@
.topbar{display:flex;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap;}
.topbar h1{font-size:1.02rem;margin:0;font-weight:600;}
.topbar a.back{color:var(--accent);text-decoration:none;font-size:.92rem;}
.dl{margin-left:auto;background:#1b2333;border:1px solid var(--border);color:var(--accent);
.dl{margin-left:auto;background:#241400;border:1px solid var(--border);color:var(--accent);
border-radius:8px;padding:7px 12px;font-size:.85rem;text-decoration:none;}
main{max-width:740px;margin:0 auto;padding:18px 16px 48px;line-height:1.6;}
h1,h2,h3,h4{line-height:1.3;color:var(--text);}
lyra/web/static/self.html
+5 -5
View File
@@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" />
<meta name="theme-color" content="#070707" />
<title>Lyra — Mind</title>
<style>
:root {
--bg: #0b0d12; --bg-elev: #141821; --bg-line: #11141b; --border: #232936;
--text: #e6e9ef; --fade: #8b93a7; --accent: #7aa2ff;
--good: #5ad1a0; --mid: #ffcf6b; --low: #ff6b6b; --violet: #c08bff;
--bg: #070707; --bg-elev: #0e0e0e; --bg-line: #141414; --border: #2a1d12;
--text: #e8e8e8; --fade: #8a8a8a; --accent: #ff7a00;
--good: #8fd694; --mid: #ffb347; --low: #ff6b6b; --violet: #ffb347;
}
* { box-sizing: border-box; }
html, body {
@@ -26,7 +26,7 @@
.topbar a.back { color: var(--accent); text-decoration: none; font-size: .95rem; }
.updated { margin-left: auto; color: var(--fade); font-size: .78rem; }
#reflectBtn {
background: #1b2333; border: 1px solid var(--border); color: var(--accent);
background: #241400; border: 1px solid var(--border); color: var(--accent);
border-radius: 8px; padding: 6px 11px; font-size: .82rem; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
lyra/web/static/style.css
+63 -63
View File
@@ -1,9 +1,9 @@
:root {
--bg-dark: #0a0a0a;
--bg-panel: rgba(255, 115, 0, 0.1);
--accent: #ff6600;
--accent-glow: 0 0 12px #ff6600cc;
--text-main: #e6e6e6;
--bg-dark: #070707;
--bg-panel: rgba(255, 122, 0, 0.1);
--accent: #ff7a00;
--accent-glow: 0 0 6px rgba(255,122,0,0.28);
--text-main: #e8e8e8;
--text-fade: #999;
--font-console: "IBM Plex Mono", monospace;
}
@@ -11,20 +11,20 @@
/* Light mode variables */
body {
--bg-dark: #f5f5f5;
--bg-panel: rgba(255, 115, 0, 0.05);
--accent: #ff6600;
--accent-glow: 0 0 12px #ff6600cc;
--bg-panel: rgba(255, 122, 0, 0.05);
--accent: #ff7a00;
--accent-glow: 0 0 6px rgba(255,122,0,0.28);
--text-main: #1a1a1a;
--text-fade: #666;
}
/* Dark mode variables */
body.dark {
--bg-dark: #0a0a0a;
--bg-panel: rgba(255, 115, 0, 0.1);
--accent: #ff6600;
--accent-glow: 0 0 12px #ff6600cc;
--text-main: #e6e6e6;
--bg-dark: #070707;
--bg-panel: rgba(255, 122, 0, 0.1);
--accent: #ff7a00;
--accent-glow: 0 0 6px rgba(255,122,0,0.28);
--text-main: #e8e8e8;
--text-fade: #999;
}
@@ -59,7 +59,7 @@ body {
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--accent);
background-color: rgba(255, 102, 0, 0.05);
background-color: rgba(255, 122, 0, 0.05);
}
#status {
justify-content: flex-start;
@@ -82,13 +82,13 @@ button:hover, select:hover {
}
#thinkingStreamBtn {
background: rgba(138, 43, 226, 0.2);
border-color: #8a2be2;
background: rgba(255, 179, 71, 0.2);
border-color: #ffb347;
}
#thinkingStreamBtn:hover {
box-shadow: 0 0 8px #8a2be2;
background: rgba(138, 43, 226, 0.3);
box-shadow: 0 0 8px #ffb347;
background: rgba(255, 179, 71, 0.3);
}
/* Chat area */
@@ -109,17 +109,17 @@ button:hover, select:hover {
border-radius: 8px;
line-height: 1.4;
word-wrap: break-word;
box-shadow: 0 0 8px rgba(255,102,0,0.2);
box-shadow: 0 0 8px rgba(255,122,0,0.2);
}
.msg.user {
align-self: flex-end;
background: rgba(255,102,0,0.15);
background: rgba(255,122,0,0.15);
border: 1px solid var(--accent);
}
.msg.assistant {
align-self: flex-start;
background: rgba(255,102,0,0.08);
border: 1px solid rgba(255,102,0,0.5);
background: rgba(255,122,0,0.08);
border: 1px solid rgba(255,122,0,0.5);
}
.msg.system {
align-self: center;
@@ -131,7 +131,7 @@ button:hover, select:hover {
#input {
display: flex;
border-top: 1px solid var(--accent);
background: rgba(255, 102, 0, 0.05);
background: rgba(255, 122, 0, 0.05);
padding: 10px;
}
#userInput {
@@ -164,13 +164,13 @@ button:hover, select:hover {
}
@keyframes pulseGreen {
0% { box-shadow: 0 0 5px #00ff66; opacity: 0.9; }
50% { box-shadow: 0 0 20px #00ff99; opacity: 1; }
100% { box-shadow: 0 0 5px #00ff66; opacity: 0.9; }
0% { box-shadow: 0 0 5px #8fd694; opacity: 0.9; }
50% { box-shadow: 0 0 10px #8fd694; opacity: 1; }
100% { box-shadow: 0 0 5px #8fd694; opacity: 0.9; }
}
.dot.ok {
background: #00ff66;
background: #8fd694;
animation: pulseGreen 2s infinite ease-in-out;
}
@@ -200,7 +200,7 @@ select option {
select:focus,
select:hover {
outline: none;
border-color: #ff7a33;
border-color: #ff8a00;
background-color: var(--bg-panel);
}
@@ -235,10 +235,10 @@ select:hover {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(180deg, rgba(255,102,0,0.1) 0%, rgba(10,10,10,0.95) 100%);
background: linear-gradient(180deg, rgba(255,122,0,0.1) 0%, rgba(10,10,10,0.95) 100%);
border: 2px solid var(--accent);
border-radius: 12px;
box-shadow: var(--accent-glow), 0 0 40px rgba(255,102,0,0.3);
box-shadow: var(--accent-glow);
min-width: 400px;
max-width: 600px;
max-height: 80vh;
@@ -252,7 +252,7 @@ select:hover {
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--accent);
background: rgba(255,102,0,0.1);
background: rgba(255,122,0,0.1);
}
.modal-header h3 {
@@ -277,7 +277,7 @@ select:hover {
}
.close-btn:hover {
background: rgba(255,102,0,0.2);
background: rgba(255,122,0,0.2);
box-shadow: 0 0 8px var(--accent);
}
@@ -307,17 +307,17 @@ select:hover {
display: flex;
flex-direction: column;
padding: 12px;
border: 1px solid rgba(255,102,0,0.3);
border: 1px solid rgba(255,122,0,0.3);
border-radius: 6px;
background: rgba(255,102,0,0.05);
background: rgba(255,122,0,0.05);
cursor: pointer;
transition: all 0.2s;
}
.radio-label:hover {
border-color: var(--accent);
background: rgba(255,102,0,0.1);
box-shadow: 0 0 8px rgba(255,102,0,0.3);
background: rgba(255,122,0,0.1);
box-shadow: 0 0 8px rgba(255,122,0,0.3);
}
.radio-label input[type="radio"] {
@@ -341,7 +341,7 @@ select:hover {
margin-left: 24px;
padding: 6px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,102,0,0.5);
border: 1px solid rgba(255,122,0,0.5);
border-radius: 4px;
color: var(--text-main);
font-family: var(--font-console);
@@ -350,7 +350,7 @@ select:hover {
.radio-label input[type="text"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 8px rgba(255,102,0,0.3);
box-shadow: 0 0 8px rgba(255,122,0,0.3);
}
.modal-footer {
@@ -359,7 +359,7 @@ select:hover {
gap: 10px;
padding: 16px 20px;
border-top: 1px solid var(--accent);
background: rgba(255,102,0,0.05);
background: rgba(255,122,0,0.05);
}
.primary-btn {
@@ -369,7 +369,7 @@ select:hover {
}
.primary-btn:hover {
background: #ff7a33;
background: #ff8a00;
box-shadow: var(--accent-glow);
}
@@ -387,15 +387,15 @@ select:hover {
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid rgba(255,102,0,0.3);
border: 1px solid rgba(255,122,0,0.3);
border-radius: 6px;
background: rgba(255,102,0,0.05);
background: rgba(255,122,0,0.05);
transition: all 0.2s;
}
.session-item:hover {
border-color: var(--accent);
background: rgba(255,102,0,0.1);
background: rgba(255,122,0,0.1);
}
.session-info {
@@ -417,7 +417,7 @@ select:hover {
.session-delete-btn {
background: transparent;
border: 1px solid rgba(255,102,0,0.5);
border: 1px solid rgba(255,122,0,0.5);
color: var(--accent);
padding: 6px 10px;
border-radius: 4px;
@@ -436,7 +436,7 @@ select:hover {
/* Thinking Stream Panel */
.thinking-panel {
border-top: 1px solid var(--accent);
background: rgba(255, 102, 0, 0.02);
background: rgba(255, 122, 0, 0.02);
display: flex;
flex-direction: column;
transition: max-height 0.3s ease;
@@ -452,16 +452,16 @@ select:hover {
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background: rgba(255, 102, 0, 0.08);
background: rgba(255, 122, 0, 0.08);
cursor: pointer;
user-select: none;
border-bottom: 1px solid rgba(255, 102, 0, 0.2);
border-bottom: 1px solid rgba(255, 122, 0, 0.2);
font-size: 0.9rem;
font-weight: 500;
}
.thinking-header:hover {
background: rgba(255, 102, 0, 0.12);
background: rgba(255, 122, 0, 0.12);
}
.thinking-controls {
@@ -479,8 +479,8 @@ select:hover {
}
.thinking-status-dot.connected {
background: #00ff66;
box-shadow: 0 0 8px #00ff66;
background: #8fd694;
box-shadow: 0 0 8px #8fd694;
}
.thinking-status-dot.disconnected {
@@ -490,7 +490,7 @@ select:hover {
.thinking-clear-btn,
.thinking-toggle-btn {
background: transparent;
border: 1px solid rgba(255, 102, 0, 0.5);
border: 1px solid rgba(255, 122, 0, 0.5);
color: var(--text-main);
padding: 4px 8px;
border-radius: 4px;
@@ -500,8 +500,8 @@ select:hover {
.thinking-clear-btn:hover,
.thinking-toggle-btn:hover {
background: rgba(255, 102, 0, 0.2);
box-shadow: 0 0 6px rgba(255, 102, 0, 0.3);
background: rgba(255, 122, 0, 0.2);
box-shadow: 0 0 6px rgba(255, 122, 0, 0.3);
}
.thinking-toggle-btn {
@@ -560,14 +560,14 @@ select:hover {
}
.thinking-event-connected {
background: rgba(0, 255, 102, 0.1);
border-color: #00ff66;
color: #00ff66;
background: rgba(0, 255, 122, 0.1);
border-color: #8fd694;
color: #8fd694;
}
.thinking-event-thinking {
background: rgba(138, 43, 226, 0.1);
border-color: #8a2be2;
background: rgba(255, 179, 71, 0.1);
border-color: #ffb347;
color: #c79cff;
}
@@ -689,7 +689,7 @@ select:hover {
flex-direction: column;
gap: 8px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 102, 0, 0.3);
border-bottom: 1px solid rgba(255, 122, 0, 0.3);
}
.mobile-menu-section:last-child {
@@ -935,12 +935,12 @@ select:hover {
.log-info { border-left-color: #00bfff; }
.log-info .log-level { color: #7dd3fc; }
.log-debug { border-left-color: #8a2be2; }
.log-debug { border-left-color: #ffb347; }
.log-debug .log-level { color: #c79cff; }
.log-error { border-left-color: #ff3333; background: rgba(255,51,51,0.08); }
.log-error .log-level, .log-error .log-msg { color: #fca5a5; }
.log-system { border-left-color: #00ff66; }
.log-system .log-level { color: #00ff66; }
.log-system { border-left-color: #8fd694; }
.log-system .log-level { color: #8fd694; }
.log-detail { width: 100%; margin-top: 4px; }
.log-detail summary {
@@ -990,7 +990,7 @@ select:hover {
background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px;
}
.msg.assistant pre {
background: rgba(0,0,0,0.32); border: 1px solid rgba(255,102,0,0.3);
background: rgba(0,0,0,0.32); border: 1px solid rgba(255,122,0,0.3);
border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow-x: auto;
}
.msg.assistant pre code { background: none; padding: 0; font-size: 0.85em; }