forked from retoor/devplacepy
retoor
34e33995c4
Add `_alt_from_url` helper in Python rendering and `altFromUrl` in JS ContentRenderer to generate descriptive alt attributes from image filenames, replacing empty alt strings. Update image embed templates and Avatar component to use derived alt text. Migrate inline `style.width` assignments to CSS custom properties (`--poll-pct`, `--hud-xp`, `--quest-pct`, `--bar-pct`, `--quota-pct`) across PollManager, GameFarm, and profile/quest CSS for better maintainability. Introduce new admin, docs, projects, services, and base CSS utility classes. Add "Code Farm" docs page entry.
122 lines
2.0 KiB
CSS
122 lines
2.0 KiB
CSS
/* retoor <retoor@molodetz.nl> */
|
|
|
|
.notifications-page {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.notifications-header {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.notifications-header h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.notifications-actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.notifications-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.notification-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.25rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notification-card.unread {
|
|
border-color: var(--accent);
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
.notification-card:hover {
|
|
border-color: var(--border-light);
|
|
}
|
|
|
|
.notification-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.notification-text {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.notification-text strong {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-time {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.notification-dismiss {
|
|
padding: 0.25rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.notification-dismiss:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.notification-group-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
padding: 0 0.25rem 0.5rem;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.notification-card {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.notification-text {
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.notification-dismiss {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.notif-icon-fixed {
|
|
flex-shrink: 0;
|
|
}
|
|
|