mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-18 00:02:48 +00:00
feat(inspector): improve session UI, skills dropdown, and visual polish
- Add delete button on ended sessions (visible on hover) - Darken ended sessions with opacity and "ended" pill badge - Sort ended sessions to bottom of list - Add token usage pill in chat header - Disable input when session ended - Add Official Skills dropdown with SDK and Rivet presets - Format session IDs shorter with full ID on hover - Add arrow icon to "Configure persistence" link - Add agent logo SVGs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nicholas Kissel
parent
ed30b5f068
commit
700f7dbae0
20 changed files with 1861 additions and 317 deletions
|
|
@ -12,23 +12,23 @@
|
|||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
/* Match landing page colors */
|
||||
/* Match landing page colors - high contrast */
|
||||
--bg: #000000;
|
||||
--surface: rgba(255, 255, 255, 0.02);
|
||||
--surface-2: rgba(255, 255, 255, 0.01);
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-2: rgba(255, 255, 255, 0.1);
|
||||
--input-bg: rgba(255, 255, 255, 0.02);
|
||||
--input-border: rgba(255, 255, 255, 0.1);
|
||||
--surface: rgba(255, 255, 255, 0.04);
|
||||
--surface-2: rgba(255, 255, 255, 0.02);
|
||||
--border: rgba(255, 255, 255, 0.15);
|
||||
--border-2: rgba(255, 255, 255, 0.12);
|
||||
--input-bg: rgba(255, 255, 255, 0.05);
|
||||
--input-border: rgba(255, 255, 255, 0.18);
|
||||
--text: #ffffff;
|
||||
--text-secondary: #a1a1aa; /* zinc-400 */
|
||||
--muted: #71717a; /* zinc-500 */
|
||||
--muted-2: #52525b; /* zinc-600 */
|
||||
--text-secondary: #d4d4d8; /* zinc-300 */
|
||||
--muted: #a1a1aa; /* zinc-400 */
|
||||
--muted-2: #71717a; /* zinc-500 */
|
||||
--accent: #ff4f00;
|
||||
--accent-hover: #ff6a00;
|
||||
--success: #4ade80; /* green-400 */
|
||||
--warning: #fbbf24; /* amber-400 */
|
||||
--danger: #f87171; /* red-400 */
|
||||
--danger: #dc2626; /* red-600 */
|
||||
--purple: #a78bfa; /* violet-400 */
|
||||
--cyan: #22d3ee; /* cyan-400 */
|
||||
--radius: 8px;
|
||||
|
|
@ -128,6 +128,34 @@
|
|||
color: var(--muted);
|
||||
}
|
||||
|
||||
.header-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.header-link:hover {
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.header-link svg {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.header-link:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.status-indicator.disconnected {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -322,12 +350,13 @@
|
|||
|
||||
.button.ghost {
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
color: var(--text-secondary);
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.button.ghost:hover:not(:disabled) {
|
||||
background: rgba(255, 79, 0, 0.1);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.button.danger {
|
||||
|
|
@ -341,7 +370,7 @@
|
|||
}
|
||||
|
||||
.button.small {
|
||||
padding: 6px 12px;
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -422,6 +451,25 @@
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
.persist-callout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding: 12px 16px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.persist-callout svg {
|
||||
flex-shrink: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Main Layout (Connected) */
|
||||
.main-layout {
|
||||
display: grid;
|
||||
|
|
@ -458,6 +506,23 @@
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar-header-actions .button.secondary.small {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-header-actions .button.secondary.small.active {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-icon-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -478,11 +543,9 @@
|
|||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--muted);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sidebar-add-btn {
|
||||
|
|
@ -952,12 +1015,18 @@
|
|||
|
||||
.agent-option-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agent-option-logo {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.agent-option-name {
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
|
|
@ -989,6 +1058,12 @@
|
|||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.agent-divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.agent-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -1019,15 +1094,13 @@
|
|||
}
|
||||
|
||||
.session-item {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
padding: 12px;
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -1045,6 +1118,15 @@
|
|||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.session-item-content {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.session-item-id {
|
||||
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
|
||||
font-size: 11px;
|
||||
|
|
@ -1068,12 +1150,30 @@
|
|||
color: var(--accent);
|
||||
}
|
||||
|
||||
.session-item-events {
|
||||
.session-item.ended {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.session-item.ended .session-item-agent {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.session-item-events {
|
||||
color: #a1a1aa;
|
||||
background: #3f3f46;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.session-item-ended {
|
||||
color: var(--danger);
|
||||
color: #fecaca;
|
||||
background: #3f1212;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 9px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.sidebar-empty {
|
||||
|
|
@ -1087,6 +1187,26 @@
|
|||
color: var(--danger);
|
||||
}
|
||||
|
||||
.session-persistence-note {
|
||||
margin: 8px;
|
||||
padding: 10px 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.session-persistence-note a {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.session-persistence-note a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Chat Panel */
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
|
|
@ -1107,6 +1227,23 @@
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.error-banner svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1114,17 +1251,44 @@
|
|||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--muted);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.header-meta-pill {
|
||||
max-width: 320px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-2);
|
||||
background: var(--surface-2);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.session-id-display {
|
||||
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.session-id-display:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.no-session-subtext {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.session-agent-display {
|
||||
|
|
@ -1148,6 +1312,14 @@
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
.button.ghost.session-ended-status {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: #dc2626 !important;
|
||||
opacity: 1 !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
|
@ -1155,6 +1327,9 @@
|
|||
}
|
||||
|
||||
.messages-container:has(.empty-state) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1169,34 +1344,44 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
padding: 48px 24px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--muted-2);
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.empty-state-icon.accent {
|
||||
color: var(--accent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.empty-state-text {
|
||||
font-size: 13px;
|
||||
max-width: 280px;
|
||||
line-height: 1.5;
|
||||
max-width: 260px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state .button {
|
||||
margin-top: 16px;
|
||||
margin-top: 24px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
@ -1273,6 +1458,12 @@
|
|||
color: var(--text);
|
||||
}
|
||||
|
||||
.ai-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
|
|
@ -1408,6 +1599,19 @@
|
|||
color: var(--muted);
|
||||
}
|
||||
|
||||
.simple-status-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.simple-status-message.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -1429,6 +1633,253 @@
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Tool Group - Connected Chain */
|
||||
.tool-group-single {
|
||||
margin: 8px 0;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.tool-group-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.tool-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
.tool-group-header:hover {
|
||||
background: var(--surface);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tool-group-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tool-group-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-group-avatar .ai-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tool-group-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tool-group-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.tool-group-chevron {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tool-group-container.failed .tool-group-header {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.tool-group-container.failed .tool-group-icon {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.tool-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.tool-item {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tool-item-connector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-item-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
border: 2px solid var(--bg);
|
||||
margin-top: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tool-item.failed .tool-item-dot {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.tool-item-line {
|
||||
width: 2px;
|
||||
flex: 1;
|
||||
background: var(--border);
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.tool-item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tool-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
.tool-item-header:hover:not(:disabled) {
|
||||
background: var(--surface);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tool-item-header:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tool-item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tool-item-label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tool-item-chevron {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.tool-item-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 4px;
|
||||
color: var(--muted);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition), color var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tool-item-header:hover .tool-item-link {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tool-item-link:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tool-item-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.tool-item.failed .tool-item-header {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.tool-item.failed .tool-item-icon {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.tool-item-body {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
.tool-section {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tool-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tool-section-title {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tool-code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-secondary);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 10px;
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tool-code.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1490,6 +1941,28 @@
|
|||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.thinking-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.thinking-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thinking-avatar-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.thinking-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -1548,6 +2021,7 @@
|
|||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
|
|
@ -1598,8 +2072,10 @@
|
|||
}
|
||||
|
||||
.send-button:disabled {
|
||||
background: var(--border-2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--muted-2);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.send-button svg {
|
||||
|
|
@ -1637,6 +2113,14 @@
|
|||
color: var(--muted);
|
||||
}
|
||||
|
||||
.token-pill {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Setup Row */
|
||||
.setup-row {
|
||||
display: flex;
|
||||
|
|
@ -1884,8 +2368,8 @@
|
|||
height: 16px;
|
||||
padding: 0 5px;
|
||||
margin-left: 6px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
background: #3f3f46;
|
||||
color: #a1a1aa;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
|
|
@ -1972,10 +2456,16 @@
|
|||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-actions .button {
|
||||
width: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -2030,6 +2520,12 @@
|
|||
border-color: rgba(255, 79, 0, 0.3);
|
||||
}
|
||||
|
||||
.event-item.highlighted {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 0;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.event-summary {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
|
|
@ -2412,6 +2908,70 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toast notifications - top banner style */
|
||||
.toast-stack {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 8px 20px;
|
||||
background: #374151;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
animation: toast-slide-in 0.3s ease;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes toast-slide-in {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue