/**
* Dark Theme for claude-recall Web Viewer
*/
:root[data-theme="dark"] {
/* Base colors */
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--bg-hover: #30363d;
/* Text colors */
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--text-link: #58a6ff;
/* Border colors */
--border-default: #30363d;
--border-muted: #21262d;
/* Accent colors */
--accent-blue: #58a6ff;
--accent-green: #3fb950;
--accent-yellow: #d29922;
--accent-red: #f85149;
--accent-purple: #a371f7;
--accent-cyan: #79c0ff;
/* Observation type colors */
--type-discovery: #58a6ff;
--type-decision: #a371f7;
--type-implementation: #3fb950;
--type-issue: #f85149;
--type-learning: #d29922;
--type-reference: #79c0ff;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
}
/* Body */
body[data-theme="dark"] {
background-color: var(--bg-primary);
color: var(--text-primary);
}
/* Cards */
.card {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
border-radius: 8px;
}
.card:hover {
border-color: var(--border-muted);
box-shadow: var(--shadow-sm);
}
/* Observation cards */
.observation-card {
border-left: 3px solid var(--border-default);
}
.observation-card[data-type="discovery"] {
border-left-color: var(--type-discovery);
}
.observation-card[data-type="decision"] {
border-left-color: var(--type-decision);
}
.observation-card[data-type="implementation"] {
border-left-color: var(--type-implementation);
}
.observation-card[data-type="issue"] {
border-left-color: var(--type-issue);
}
.observation-card[data-type="learning"] {
border-left-color: var(--type-learning);
}
.observation-card[data-type="reference"] {
border-left-color: var(--type-reference);
}
/* Buttons */
.btn {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-default);
border-radius: 6px;
padding: 8px 16px;
cursor: pointer;
transition: all var(--transition-fast);
}
.btn:hover {
background: var(--bg-hover);
}
.btn-primary {
background: #238636;
border-color: #238636;
}
.btn-primary:hover {
background: #2ea043;
}
/* Inputs */
input, textarea, select {
background: var(--bg-primary);
border: 1px solid var(--border-default);
color: var(--text-primary);
border-radius: 6px;
padding: 8px 12px;
}
input:focus, textarea:focus, select:focus {
border-color: var(--accent-blue);
outline: none;
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}
/* Code blocks */
pre, code {
background: var(--bg-tertiary);
border: 1px solid var(--border-default);
border-radius: 6px;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--border-default);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--bg-hover);
}
/* Selection */
::selection {
background: rgba(88, 166, 255, 0.3);
}
/* Links */
a {
color: var(--text-link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Tags */
.tag {
background: var(--bg-tertiary);
color: var(--text-secondary);
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
/* Badges */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.badge-blue { background: rgba(88, 166, 255, 0.2); color: var(--accent-blue); }
.badge-green { background: rgba(63, 185, 80, 0.2); color: var(--accent-green); }
.badge-yellow { background: rgba(210, 153, 34, 0.2); color: var(--accent-yellow); }
.badge-red { background: rgba(248, 81, 73, 0.2); color: var(--accent-red); }
.badge-purple { background: rgba(163, 113, 247, 0.2); color: var(--accent-purple); }
