Algis DumbrisandClaude Opus 4.6
9a00d7c5ee
On viewports < 768px (md breakpoint): - Sidebar slides in as a drawer with dark overlay backdrop - Hamburger button in the header toggles the sidebar - Nav link clicks auto-close the drawer - Sidebar items get 44px min-height for touch-friendly tapping - Search input uses fluid width instead of fixed 320px Desktop (>= 768px) behavior is unchanged: sidebar always visible, main content offset by 260px, no hamburger button. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
148 lines
3.4 KiB
CSS
148 lines
3.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--bg-primary: #1a1d21;
|
|
--bg-secondary: #222529;
|
|
--bg-tertiary: #2c2f33;
|
|
--bg-input: #383b40;
|
|
--text-primary: #e8e8e8;
|
|
--text-secondary: #9b9da0;
|
|
--text-link: #1d9bd1;
|
|
--accent-green: #2eb67d;
|
|
--accent-yellow: #ecb22e;
|
|
--accent-red: #e01e5a;
|
|
--accent-blue: #36c5f0;
|
|
--accent-purple: #7c3aed;
|
|
--border: #383b40;
|
|
--border-active: #545760;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
font-family: 'DM Sans', sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Instrument Sans', sans-serif;
|
|
}
|
|
|
|
code, pre, .font-mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* Custom scrollbar for dark theme */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-primary);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-active);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-secondary);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn-primary {
|
|
@apply text-white px-4 py-2 rounded font-medium text-sm transition-all;
|
|
background-color: var(--accent-green);
|
|
}
|
|
.btn-primary:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
.btn-primary:disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
.btn-secondary {
|
|
@apply px-4 py-2 rounded font-medium text-sm transition-all;
|
|
background-color: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: var(--border-active);
|
|
}
|
|
.btn-danger {
|
|
@apply text-white px-4 py-2 rounded font-medium text-sm transition-all;
|
|
background-color: var(--accent-red);
|
|
}
|
|
.btn-danger:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
.btn-danger:disabled {
|
|
@apply opacity-50;
|
|
}
|
|
.input {
|
|
@apply w-full px-3 py-2 rounded text-sm outline-none transition-colors;
|
|
border: 1px solid var(--border);
|
|
background-color: var(--bg-input);
|
|
color: var(--text-primary);
|
|
}
|
|
.input::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
.input:focus {
|
|
border-color: var(--border-active);
|
|
box-shadow: 0 0 0 1px var(--border-active);
|
|
}
|
|
.card {
|
|
@apply rounded-lg;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.badge {
|
|
@apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
|
|
}
|
|
.badge-pending {
|
|
@apply badge;
|
|
background-color: rgba(236, 178, 46, 0.2);
|
|
color: var(--accent-yellow);
|
|
}
|
|
.badge-processing {
|
|
@apply badge;
|
|
background-color: rgba(54, 197, 240, 0.2);
|
|
color: var(--accent-blue);
|
|
}
|
|
.badge-done {
|
|
@apply badge;
|
|
background-color: rgba(46, 182, 125, 0.2);
|
|
color: var(--accent-green);
|
|
}
|
|
.badge-failed {
|
|
@apply badge;
|
|
background-color: rgba(224, 30, 90, 0.2);
|
|
color: var(--accent-red);
|
|
}
|
|
.skeleton {
|
|
@apply animate-pulse rounded;
|
|
background-color: var(--bg-tertiary);
|
|
}
|
|
.sidebar-item {
|
|
@apply flex items-center gap-2 px-3 py-2 md:py-1.5 min-h-[44px] md:min-h-0 rounded text-sm transition-colors cursor-pointer;
|
|
color: var(--text-secondary);
|
|
}
|
|
.sidebar-item:hover {
|
|
background-color: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
.sidebar-item-active {
|
|
color: var(--text-primary);
|
|
background-color: rgba(54, 197, 240, 0.1);
|
|
border-left: 2px solid var(--accent-blue);
|
|
}
|
|
.section-header {
|
|
@apply flex items-center justify-between px-3 py-1.5 text-xs font-semibold uppercase tracking-wider;
|
|
color: var(--text-secondary);
|
|
}
|
|
}
|