fix(css): fix 10 design system violations in component classes
- .widget-title: font-bold -> font-semibold - .repo-card: add shadow-sm - .fab-menu-item: rounded-xl -> rounded-lg, shadow-md -> shadow-sm - .p-category: hover border surface -> accent - .widget: remove mb-4 (conflicts with space-y containers) - Remove duplicate focus-visible system (outline vs ring) - Remove duplicate time monospace rule - .post-type-dropdown: prefers-color-scheme -> .dark class - .save-later-btn/.share-post-btn: add dark mode variants Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
@@ -332,7 +332,7 @@
|
||||
|
||||
/* Category tags (post metadata pills) */
|
||||
.p-category {
|
||||
@apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors;
|
||||
@apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
|
||||
}
|
||||
|
||||
/* Inline hashtags in post content — styled as subtle links, not pills */
|
||||
@@ -358,7 +358,7 @@
|
||||
|
||||
/* GitHub components */
|
||||
.repo-card {
|
||||
@apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg;
|
||||
@apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg shadow-sm;
|
||||
}
|
||||
|
||||
.repo-meta {
|
||||
@@ -391,11 +391,11 @@
|
||||
|
||||
/* Widget cards */
|
||||
.widget {
|
||||
@apply p-4 mb-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
|
||||
@apply p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
@apply font-bold text-lg mb-4;
|
||||
@apply font-semibold text-lg mb-4;
|
||||
}
|
||||
|
||||
/* Collapsible widget wrapper */
|
||||
@@ -495,17 +495,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
@layer base {
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
@apply outline-2 outline-offset-2 outline-accent-500;
|
||||
}
|
||||
}
|
||||
|
||||
/* Active states — subtle press feedback on buttons */
|
||||
@layer base {
|
||||
button:active:not(:disabled),
|
||||
@@ -548,7 +537,7 @@
|
||||
}
|
||||
|
||||
.fab-menu-item {
|
||||
@apply flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-50 dark:bg-surface-800 shadow-md hover:shadow-lg border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
|
||||
@apply flex items-center gap-3 px-4 py-3 rounded-lg bg-surface-50 dark:bg-surface-800 shadow-sm border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
|
||||
}
|
||||
|
||||
.fab-menu-divider {
|
||||
@@ -568,13 +557,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Dates — monospace for technical texture (system.md: every <time> gets font-mono) */
|
||||
@layer base {
|
||||
time {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply content-visibility to images and post items for performance */
|
||||
@layer base {
|
||||
/* Responsive typography */
|
||||
@@ -907,6 +889,14 @@ body[data-indiekit-auth="true"] .save-later-btn:hover {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dark body[data-indiekit-auth="true"] .save-later-btn {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.dark body[data-indiekit-auth="true"] .save-later-btn:hover {
|
||||
border-color: #4b5563;
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
/* Share Post buttons — hidden until auth confirmed */
|
||||
.share-post-btn {
|
||||
display: none;
|
||||
@@ -931,6 +921,14 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.dark body[data-indiekit-auth="true"] .share-post-btn {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.dark body[data-indiekit-auth="true"] .share-post-btn:hover {
|
||||
border-color: #4b5563;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Post type dropdown */
|
||||
.post-type-dropdown {
|
||||
display: none;
|
||||
@@ -970,17 +968,15 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.post-type-dropdown {
|
||||
/* Dark mode — class-based (matches site's darkMode: "class" config) */
|
||||
.dark .post-type-dropdown {
|
||||
background: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
.post-type-dropdown-item {
|
||||
}
|
||||
.dark .post-type-dropdown-item {
|
||||
color: #d1d5db;
|
||||
}
|
||||
.post-type-dropdown-item:hover {
|
||||
}
|
||||
.dark .post-type-dropdown-item:hover {
|
||||
background: #374151;
|
||||
color: #34d399;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user