Add new SVG icons for "learned" and "next steps" features (#109)
- Introduced icon-thin-learned.svg with detailed path definitions and color styling. - Added icon-thin-next-steps.svg featuring a unique design and color scheme.
This commit is contained in:
Alex Newman
+297
-51
@@ -19,7 +19,7 @@
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--color-bg-primary: #ffffff;
|
||||
--color-bg-secondary: #f6f8fa;
|
||||
--color-bg-secondary: #efebe4;
|
||||
--color-bg-tertiary: #f0f0f0;
|
||||
--color-bg-header: #f6f8fa;
|
||||
--color-bg-card: #ffffff;
|
||||
@@ -30,6 +30,7 @@
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #fffbf0;
|
||||
--color-bg-prompt: #f6f3fb;
|
||||
--color-bg-observation: #f0f6fb;
|
||||
--color-bg-stat: #f6f8fa;
|
||||
--color-bg-scrollbar-track: #ffffff;
|
||||
--color-bg-scrollbar-thumb: #d1d5da;
|
||||
@@ -43,17 +44,20 @@
|
||||
--color-border-summary-hover: #c29d29;
|
||||
--color-border-prompt: #8250df;
|
||||
--color-border-prompt-hover: #6e40c9;
|
||||
--color-border-observation: #0969da;
|
||||
--color-border-observation-hover: #0550ae;
|
||||
|
||||
--color-text-primary: #24292f;
|
||||
--color-text-secondary: #57606a;
|
||||
--color-text-tertiary: #6e7781;
|
||||
--color-text-muted: #8b949e;
|
||||
--color-text-header: #24292f;
|
||||
--color-text-title: #24292f;
|
||||
--color-text-subtitle: #57606a;
|
||||
--color-text-primary: #2b2520;
|
||||
--color-text-secondary: #5a5248;
|
||||
--color-text-tertiary: #726b5f;
|
||||
--color-text-muted: #8f8a7e;
|
||||
--color-text-header: #2b2520;
|
||||
--color-text-title: #2b2520;
|
||||
--color-text-subtitle: #5a5248;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #8a6116;
|
||||
--color-text-logo: #24292f;
|
||||
--color-text-observation: #2b2520;
|
||||
--color-text-logo: #2b2520;
|
||||
|
||||
--color-accent-primary: #0969da;
|
||||
--color-accent-focus: #0969da;
|
||||
@@ -61,6 +65,7 @@
|
||||
--color-accent-error: #d1242f;
|
||||
--color-accent-summary: #9a6700;
|
||||
--color-accent-prompt: #8250df;
|
||||
--color-accent-observation: #0550ae;
|
||||
|
||||
--color-type-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-type-badge-text: #0969da;
|
||||
@@ -68,6 +73,8 @@
|
||||
--color-summary-badge-text: #9a6700;
|
||||
--color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
|
||||
--color-prompt-badge-text: #8250df;
|
||||
--color-observation-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-observation-badge-text: #0550ae;
|
||||
|
||||
--color-skeleton-base: #d0d7de;
|
||||
--color-skeleton-highlight: #e8ecef;
|
||||
@@ -77,59 +84,66 @@
|
||||
|
||||
/* Theme Variables - Dark Mode */
|
||||
[data-theme="dark"] {
|
||||
--color-bg-primary: #1e1e1e;
|
||||
--color-bg-secondary: #2d2d2d;
|
||||
--color-bg-tertiary: #252526;
|
||||
--color-bg-header: #252526;
|
||||
--color-bg-card: #2d2d2d;
|
||||
--color-bg-card-hover: #333333;
|
||||
--color-bg-input: #2d2d2d;
|
||||
--color-bg-primary: #1a1916;
|
||||
--color-bg-secondary: #252320;
|
||||
--color-bg-tertiary: #1f1d1a;
|
||||
--color-bg-header: #1f1d1a;
|
||||
--color-bg-card: #252320;
|
||||
--color-bg-card-hover: #2d2a26;
|
||||
--color-bg-input: #252320;
|
||||
--color-bg-button: #0969da;
|
||||
--color-bg-button-hover: #1177e6;
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #3d2f00;
|
||||
--color-bg-prompt: #2d1b4e;
|
||||
--color-bg-stat: #2d2d2d;
|
||||
--color-bg-scrollbar-track: #1e1e1e;
|
||||
--color-bg-scrollbar-thumb: #424242;
|
||||
--color-bg-scrollbar-thumb-hover: #4e4e4e;
|
||||
--color-bg-summary: #2a2724;
|
||||
--color-bg-prompt: #262033;
|
||||
--color-bg-observation: #1a2332;
|
||||
--color-bg-stat: #252320;
|
||||
--color-bg-scrollbar-track: #1a1916;
|
||||
--color-bg-scrollbar-thumb: #3a3834;
|
||||
--color-bg-scrollbar-thumb-hover: #4a4540;
|
||||
|
||||
--color-border-primary: #404040;
|
||||
--color-border-secondary: #404040;
|
||||
--color-border-hover: #505050;
|
||||
--color-border-primary: #3a3834;
|
||||
--color-border-secondary: #3a3834;
|
||||
--color-border-hover: #4a4540;
|
||||
--color-border-focus: #58a6ff;
|
||||
--color-border-summary: #9e6a03;
|
||||
--color-border-summary-hover: #ae7a13;
|
||||
--color-border-prompt: #6e40c9;
|
||||
--color-border-prompt-hover: #8e6cdb;
|
||||
--color-border-summary: #7a6a50;
|
||||
--color-border-summary-hover: #8b7960;
|
||||
--color-border-prompt: #6e5b9e;
|
||||
--color-border-prompt-hover: #7e6bae;
|
||||
--color-border-observation: #527aa0;
|
||||
--color-border-observation-hover: #6a8eb8;
|
||||
|
||||
--color-text-primary: #cccccc;
|
||||
--color-text-secondary: #a0a0a0;
|
||||
--color-text-tertiary: #6e7681;
|
||||
--color-text-muted: #8b949e;
|
||||
--color-text-header: #e0e0e0;
|
||||
--color-text-title: #e0e0e0;
|
||||
--color-text-subtitle: #a0a0a0;
|
||||
--color-text-primary: #dcd6cc;
|
||||
--color-text-secondary: #b8b0a4;
|
||||
--color-text-tertiary: #938a7e;
|
||||
--color-text-muted: #7a7266;
|
||||
--color-text-header: #e8e2d8;
|
||||
--color-text-title: #e8e2d8;
|
||||
--color-text-subtitle: #b8b0a4;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #f2cc60;
|
||||
--color-text-logo: #dadada;
|
||||
--color-text-summary: #d4b888;
|
||||
--color-text-observation: #a8b8c8;
|
||||
--color-text-logo: #e0dad0;
|
||||
|
||||
--color-accent-primary: #58a6ff;
|
||||
--color-accent-focus: #58a6ff;
|
||||
--color-accent-success: #16c60c;
|
||||
--color-accent-error: #e74856;
|
||||
--color-accent-summary: #f2cc60;
|
||||
--color-accent-prompt: #8e6cdb;
|
||||
--color-accent-summary: #d4b888;
|
||||
--color-accent-prompt: #8e7cbc;
|
||||
--color-accent-observation: #79b8ff;
|
||||
|
||||
--color-type-badge-bg: rgba(88, 166, 255, 0.125);
|
||||
--color-type-badge-text: #58a6ff;
|
||||
--color-summary-badge-bg: rgba(242, 204, 96, 0.125);
|
||||
--color-summary-badge-text: #f2cc60;
|
||||
--color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
|
||||
--color-prompt-badge-text: #8e6cdb;
|
||||
--color-summary-badge-bg: rgba(212, 184, 136, 0.15);
|
||||
--color-summary-badge-text: #d4b888;
|
||||
--color-prompt-badge-bg: rgba(142, 124, 188, 0.15);
|
||||
--color-prompt-badge-text: #9e8ccc;
|
||||
--color-observation-badge-bg: rgba(121, 184, 255, 0.15);
|
||||
--color-observation-badge-text: #79b8ff;
|
||||
|
||||
--color-skeleton-base: #404040;
|
||||
--color-skeleton-highlight: #505050;
|
||||
--color-skeleton-base: #3a3834;
|
||||
--color-skeleton-highlight: #4a4540;
|
||||
|
||||
--shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
|
||||
}
|
||||
@@ -149,6 +163,7 @@
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #fffbf0;
|
||||
--color-bg-prompt: #f6f3fb;
|
||||
--color-bg-observation: #f0f6fb;
|
||||
--color-bg-stat: #f6f8fa;
|
||||
--color-bg-scrollbar-track: #ffffff;
|
||||
--color-bg-scrollbar-thumb: #d1d5da;
|
||||
@@ -162,6 +177,8 @@
|
||||
--color-border-summary-hover: #c29d29;
|
||||
--color-border-prompt: #8250df;
|
||||
--color-border-prompt-hover: #6e40c9;
|
||||
--color-border-observation: #0969da;
|
||||
--color-border-observation-hover: #0550ae;
|
||||
|
||||
--color-text-primary: #24292f;
|
||||
--color-text-secondary: #57606a;
|
||||
@@ -172,6 +189,7 @@
|
||||
--color-text-subtitle: #57606a;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #8a6116;
|
||||
--color-text-observation: #24292f;
|
||||
--color-text-logo: #24292f;
|
||||
|
||||
--color-accent-primary: #0969da;
|
||||
@@ -180,6 +198,7 @@
|
||||
--color-accent-error: #d1242f;
|
||||
--color-accent-summary: #9a6700;
|
||||
--color-accent-prompt: #8250df;
|
||||
--color-accent-observation: #0550ae;
|
||||
|
||||
--color-type-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-type-badge-text: #0969da;
|
||||
@@ -187,6 +206,8 @@
|
||||
--color-summary-badge-text: #9a6700;
|
||||
--color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
|
||||
--color-prompt-badge-text: #8250df;
|
||||
--color-observation-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-observation-badge-text: #0550ae;
|
||||
|
||||
--color-skeleton-base: #d0d7de;
|
||||
--color-skeleton-highlight: #e8ecef;
|
||||
@@ -209,6 +230,7 @@
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #3d2f00;
|
||||
--color-bg-prompt: #2d1b4e;
|
||||
--color-bg-observation: #1a2332;
|
||||
--color-bg-stat: #2d2d2d;
|
||||
--color-bg-scrollbar-track: #1e1e1e;
|
||||
--color-bg-scrollbar-thumb: #424242;
|
||||
@@ -222,6 +244,8 @@
|
||||
--color-border-summary-hover: #ae7a13;
|
||||
--color-border-prompt: #6e40c9;
|
||||
--color-border-prompt-hover: #8e6cdb;
|
||||
--color-border-observation: #527aa0;
|
||||
--color-border-observation-hover: #6a8eb8;
|
||||
|
||||
--color-text-primary: #cccccc;
|
||||
--color-text-secondary: #a0a0a0;
|
||||
@@ -232,6 +256,7 @@
|
||||
--color-text-subtitle: #a0a0a0;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #f2cc60;
|
||||
--color-text-observation: #a8b8c8;
|
||||
--color-text-logo: #dadada;
|
||||
|
||||
--color-accent-primary: #58a6ff;
|
||||
@@ -240,6 +265,7 @@
|
||||
--color-accent-error: #e74856;
|
||||
--color-accent-summary: #f2cc60;
|
||||
--color-accent-prompt: #8e6cdb;
|
||||
--color-accent-observation: #79b8ff;
|
||||
|
||||
--color-type-badge-bg: rgba(88, 166, 255, 0.125);
|
||||
--color-type-badge-text: #58a6ff;
|
||||
@@ -247,6 +273,8 @@
|
||||
--color-summary-badge-text: #f2cc60;
|
||||
--color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
|
||||
--color-prompt-badge-text: #8e6cdb;
|
||||
--color-observation-badge-bg: rgba(121, 184, 255, 0.15);
|
||||
--color-observation-badge-text: #79b8ff;
|
||||
|
||||
--color-skeleton-base: #404040;
|
||||
--color-skeleton-highlight: #505050;
|
||||
@@ -521,6 +549,24 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 10%;
|
||||
}
|
||||
|
||||
.card-subheading-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.card-subheading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
@@ -623,17 +669,31 @@
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
.card-section {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-subtitle);
|
||||
line-height: 1.7;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-subtitle:last-child {
|
||||
.card-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-section pre {
|
||||
white-space: pre-wrap;
|
||||
font-size: 13px;
|
||||
/* word-wrap: break-word; */
|
||||
}
|
||||
|
||||
/*
|
||||
.card-section h4 {
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 16px;
|
||||
color: var(--color-text-title);
|
||||
font-weight: 500;
|
||||
} */
|
||||
|
||||
.card-meta {
|
||||
font-size: 11px;
|
||||
@@ -668,8 +728,7 @@
|
||||
|
||||
|
||||
/* Stack single column on narrow screens (removed - no longer using card-files) */
|
||||
@media (max-width: 600px) {
|
||||
}
|
||||
@media (max-width: 600px) {}
|
||||
|
||||
|
||||
/* Project badge styling */
|
||||
@@ -695,6 +754,176 @@
|
||||
color: var(--color-text-summary);
|
||||
}
|
||||
|
||||
/* Enhanced Summary Card Styles - Editorial/Archival Aesthetic */
|
||||
.summary-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.summary-card-header {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--color-border-summary);
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
|
||||
.summary-badge-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-badge {
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.summary-project-badge {
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 400;
|
||||
padding: 3px 8px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--color-border-primary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .summary-project-badge {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text-summary);
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.summary-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
animation: summaryFadeIn 0.4s ease-out backwards;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes summaryFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.summary-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.summary-section-icon {
|
||||
position: relative;
|
||||
width: auto;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.summary-section-icon--investigated {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.summary-section-icon--learned {
|
||||
height: 18px;
|
||||
left: -1px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.summary-section-icon--completed {
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.summary-section-icon--next_steps {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.summary-section-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-accent-summary);
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
.summary-section-content {
|
||||
margin-left: 26px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.summary-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border-primary);
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.summary-meta-id {
|
||||
font-weight: 500;
|
||||
color: var(--color-accent-summary);
|
||||
}
|
||||
|
||||
.summary-meta-divider {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.summary-meta-date {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for summary cards */
|
||||
@media (max-width: 600px) {
|
||||
.summary-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.summary-section-content {
|
||||
margin-left: 0;
|
||||
padding-left: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.summary-section-header {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid var(--color-border-primary);
|
||||
@@ -797,6 +1026,21 @@
|
||||
color: var(--color-prompt-badge-text);
|
||||
}
|
||||
|
||||
.observation-card {
|
||||
border-color: var(--color-border-observation);
|
||||
background: var(--color-bg-observation);
|
||||
color: var(--color-text-observation);
|
||||
}
|
||||
|
||||
.observation-card:hover {
|
||||
border-color: var(--color-border-observation-hover);
|
||||
}
|
||||
|
||||
.observation-card .card-type {
|
||||
background: var(--color-observation-badge-bg);
|
||||
color: var(--color-observation-badge-text);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 12px;
|
||||
@@ -867,6 +1111,7 @@
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
@@ -909,6 +1154,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
Reference in New Issue
Block a user