Catalyst / admin/Bid-Sentinel 14.8 GB / 57.8 GB 40.0 GB free
Help Sign in

admin / Bid-Sentinel

public

Bid Scrape and Tracking Application with AI Capability

Code Issues Pull requests Pipelines Packages Security Insights Wiki Settings
Bid-Sentinel / bid-sentinel-v2 / frontend / src / index.css 4925 B · main 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: #f1f5f9;
  color: #0f172a;
}

/* ============================ Dark mode =============================
   The app is built with Tailwind utility classes. Rather than annotate
   hundreds of elements with dark: variants, we flip the small set of
   neutral/accent utilities actually used (see grep) when <html> has the
   .dark class. Tailwind emits distinct classes for e.g. bg-white vs
   bg-white/10, so these overrides are precise and never touch the
   translucent header buttons or the white toggle knobs (after:bg-white). */
html.dark {
  color-scheme: dark;
}
/* Suppress transitions while switching theme so every colour flips at once
   (also avoids a Chromium quirk that leaves border-color mid-transition). */
html.theme-no-transition *,
html.theme-no-transition *::before,
html.theme-no-transition *::after {
  transition: none !important;
}
html.dark body {
  background-color: #0b1220;
  color: #cbd5e1;
}

/* Surfaces */
html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-slate-50 { background-color: #223049; }
html.dark .bg-slate-50\/60 { background-color: rgba(34, 48, 73, 0.6); }
html.dark .bg-slate-50\/40 { background-color: rgba(34, 48, 73, 0.4); }
html.dark .bg-slate-100 { background-color: #29384f; }
html.dark .bg-slate-200 { background-color: #33425c; }
html.dark .bg-slate-300 { background-color: #475569; }

/* Text */
html.dark .text-slate-800 { color: #f1f5f9; }
html.dark .text-slate-700 { color: #e2e8f0; }
html.dark .text-slate-600 { color: #cbd5e1; }
html.dark .text-slate-500 { color: #a3b2c7; }
html.dark .text-slate-400 { color: #7c8aa0; }
html.dark .text-slate-300 { color: #64748b; }

/* Borders */
html.dark .border-slate-100 { border-color: #263349; }
html.dark .border-slate-200 { border-color: #2f3d55; }
html.dark .border-slate-300 { border-color: #3c4a63; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #263349; }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2f3d55; }

/* Hover states */
html.dark .hover\:bg-slate-50:hover { background-color: #29384f; }
html.dark .hover\:bg-slate-50\/60:hover { background-color: rgba(41, 56, 79, 0.6); }
html.dark .hover\:text-slate-600:hover { color: #cbd5e1; }
html.dark .hover\:text-slate-700:hover { color: #e2e8f0; }
html.dark .hover\:border-slate-300:hover { border-color: #3c4a63; }

/* Brand accents (navy is unreadable on dark → lighten) */
html.dark .text-brand { color: #7aa5ee; }
html.dark .text-brand-light { color: #93b8f2; }
html.dark .border-brand { border-color: #2f6fd6; }
html.dark .bg-brand\/5 { background-color: rgba(59, 130, 246, 0.1); }
html.dark .bg-brand\/10 { background-color: rgba(59, 130, 246, 0.16); }

/* Green */
html.dark .bg-green-50 { background-color: #10331f; }
html.dark .bg-green-100 { background-color: #14432a; }
html.dark .text-green-800 { color: #bbf7d0; }
html.dark .text-green-700 { color: #86efac; }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-green-600\/60 { color: rgba(74, 222, 128, 0.6); }
html.dark .border-green-300 { border-color: #16643c; }

/* Red */
html.dark .bg-red-50 { background-color: #3a1d1d; }
html.dark .bg-red-50\/40 { background-color: rgba(58, 29, 29, 0.4); }
html.dark .bg-red-100 { background-color: #4c1f1f; }
html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-red-500 { color: #f87171; }
html.dark .border-red-300 { border-color: #7f3535; }

/* Amber */
html.dark .bg-amber-50 { background-color: #3a2e10; }
html.dark .bg-amber-100 { background-color: #4a3a12; }
html.dark .text-amber-800 { color: #fde68a; }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-600\/70 { color: rgba(251, 191, 36, 0.7); }
html.dark .border-amber-300 { border-color: #6b520f; }

/* Blue */
html.dark .bg-blue-50 { background-color: #172a4d; }
html.dark .bg-blue-100 { background-color: #1e3a63; }
html.dark .text-blue-800 { color: #bfdbfe; }
html.dark .text-blue-700 { color: #93c5fd; }
html.dark .text-blue-600 { color: #60a5fa; }
html.dark .border-blue-300 { border-color: #1e4a7a; }

/* Form controls: give inputs a dark field + dim placeholder */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1b2637;
  color: #e2e8f0;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b;
}
html.dark input[type="checkbox"] {
  accent-color: #3b82f6;
}

/* Slow blinking status indicator (used for the AI Assistant on/off dot). */
@keyframes blink-slow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}
.animate-blink-slow {
  animation: blink-slow 2s ease-in-out infinite;
}