:root {
--primary: #6366f1;
--primary-hover: #4f46e5;
--danger: #ef4444;
--danger-hover: #dc2626;
--secondary: #64748b;
--bg: #0f172a;
--bg-light: #1e293b;
--bg-lighter: #334155;
--text: #f1f5f9;
--text-dim: #94a3b8;
--border: #475569;
--shadow: rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
header {
text-align: center;
margin-bottom: 2rem;
}
header h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.subtitle {
color: var(--text-dim);
font-size: 0.9rem;
}
.toolbar {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
align-items: center;
}
.search-bar {
flex: 1;
}
.view-controls {
display: flex;
gap: 0.5rem;
}
.btn.active {
background: var(--primary);
color: white;
}
#searchInput {
width: 100%;
padding: 1rem;
background: var(--bg-light);
border: 2px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 1rem;
transition: all 0.3s;
}
#searchInput:focus {
outline: none;
border-color: var(--primary);
}
.memories-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
.memory-card {
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s;
}
.memory-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px var(--shadow);
border-color: var(--primary);
}
.memory-card h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: var(--text);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.memory-card .meta {
font-size: 0.85rem;
color: var(--text-dim);
margin-bottom: 0.5rem;
word-wrap: break-word;
}
.memory-card .snippet {
color: var(--text-dim);
font-size: 0.9rem;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-actions {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
}
.btn-secondary {
background: var(--secondary);
color: white;
}
.btn-secondary:hover {
background: var(--bg-lighter);
}
.btn-danger {
background: var(--danger);
color: white;
}
.btn-danger:hover {
background: var(--danger-hover);
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
.modal-content {
background: var(--bg-light);
margin: 5% auto;
padding: 2rem;
border: 1px solid var(--border);
border-radius: 12px;
width: 90%;
max-width: 700px;
max-height: 80vh;
overflow-y: auto;
}
.close {
color: var(--text-dim);
float: right;
font-size: 2rem;
font-weight: bold;
cursor: pointer;
transition: color 0.2s;
}
.close:hover {
color: var(--text);
}
.content-area {
background: var(--bg);
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
white-space: pre-wrap;
word-wrap: break-word;
}
.edit-title {
width: 100%;
padding: 0.75rem;
background: var(--bg);
border: 2px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 1.1rem;
margin-bottom: 1rem;
}
.edit-content {
width: 100%;
min-height: 300px;
padding: 1rem;
background: var(--bg);
border: 2px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 1rem;
font-family: monospace;
resize: vertical;
}
.edit-title:focus,
.edit-content:focus {
outline: none;
border-color: var(--primary);
}
.modal-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
justify-content: flex-end;
}
.loading {
text-align: center;
padding: 3rem;
color: var(--text-dim);
}
/* List View */
.memories-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.memories-list .memory-card {
display: grid;
grid-template-columns: 2fr 2fr 1.5fr auto;
gap: 1rem;
align-items: center;
padding: 1rem;
cursor: default;
}
.memories-list .memory-card:hover {
transform: none;
}
.memories-list .memory-card h3 {
font-size: 1rem;
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.memories-list .memory-card .meta {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.memories-list .memory-card .meta:first-of-type {
grid-column: 2;
}
.memories-list .memory-card .meta:last-of-type {
grid-column: 3;
}
.memories-list .memory-card .snippet {
display: none;
}
.memories-list .card-actions {
flex-shrink: 0;
grid-column: 4;
}
/* Calendar View */
.calendar-view {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 2rem;
}
#calendarGrid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.5rem;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
}
.calendar-day {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem;
min-height: 80px;
cursor: pointer;
transition: all 0.2s;
}
.calendar-day:hover {
border-color: var(--primary);
}
.calendar-day-header {
font-weight: bold;
margin-bottom: 0.5rem;
color: var(--text-dim);
font-size: 0.85rem;
}
.calendar-memory {
background: var(--bg-lighter);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
margin-top: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-list {
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
max-height: 600px;
overflow-y: auto;
}
.calendar-list h3 {
margin-bottom: 1rem;
}
.calendar-list-item {
padding: 0.75rem;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s;
}
.calendar-list-item:hover {
background: var(--bg);
}
.calendar-list-item h4 {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.calendar-list-item p {
font-size: 0.85rem;
color: var(--text-dim);
}
