mirror of
https://github.com/dergigi/boris.git
synced 2026-01-05 07:54:25 +01:00
9251b017d4
- Update icon-button.css, profile.css, me.css to use tokens - Migrate reader.css to semantic colors for light theme - Update toast.css with theme-aware colors - All major UI components now support theme switching
31 lines
1.9 KiB
CSS
31 lines
1.9 KiB
CSS
/* Profile UI fragments */
|
|
.author-card-container { display: flex; justify-content: center; padding: 2rem 1rem; }
|
|
.author-card { display: flex; gap: 1rem; padding: 1.5rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; max-width: 600px; width: 100%; transition: all 0.2s ease; }
|
|
.author-card-clickable:hover { border-color: var(--color-primary); background: var(--color-bg-elevated); transform: translateY(-1px); }
|
|
.author-card-clickable:active { transform: translateY(0); }
|
|
.author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
|
|
.author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.author-card-avatar svg { font-size: 2.5rem; }
|
|
.author-card-content { flex: 1; min-width: 0; text-align: left; }
|
|
.author-card-name { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; text-align: left; }
|
|
.author-card-bio { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }
|
|
|
|
@media (max-width: 768px) {
|
|
.author-card-container {
|
|
padding: 1.5rem 1rem;
|
|
margin: 0 1rem; /* Add horizontal margin to prevent bleeding */
|
|
max-width: calc(100vw - 2rem); /* Ensure it doesn't exceed screen width */
|
|
box-sizing: border-box;
|
|
}
|
|
.author-card {
|
|
padding: 1rem;
|
|
max-width: 100%; /* Ensure card doesn't exceed container */
|
|
box-sizing: border-box;
|
|
}
|
|
.author-card-avatar { width: 48px; height: 48px; }
|
|
.author-card-avatar svg { font-size: 2rem; }
|
|
.author-card-name { font-size: 0.95rem; }
|
|
.author-card-bio { font-size: 0.85rem; -webkit-line-clamp: 2; }
|
|
}
|
|
|