mirror of
https://github.com/f/awesome-chatgpt-prompts.git
synced 2025-06-22 15:35:04 +00:00
81 lines
2.3 KiB
CSS
81 lines
2.3 KiB
CSS
/* Custom CSS variables for dynamic theming */
|
|
:root {
|
|
/* These will be dynamically set by JavaScript based on light/dark colors */
|
|
--primary: 59 130 246; /* Default blue-500 */
|
|
--background: 255 255 255;
|
|
--foreground: 15 23 42;
|
|
--muted: 248 250 252;
|
|
--muted-foreground: 100 116 139;
|
|
--border: 226 232 240;
|
|
--accent: 16 185 129;
|
|
}
|
|
|
|
/* Dynamic color classes */
|
|
.bg-dynamic-background { background-color: rgb(var(--background)); }
|
|
.bg-dynamic-muted { background-color: rgb(var(--muted)); }
|
|
.bg-dynamic-primary { background-color: rgb(var(--primary)); }
|
|
.bg-dynamic-accent { background-color: rgb(var(--accent)); }
|
|
.text-dynamic-foreground { color: rgb(var(--foreground)); }
|
|
.text-dynamic-muted-foreground { color: rgb(var(--muted-foreground)); }
|
|
.text-dynamic-primary { color: rgb(var(--primary)); }
|
|
.text-dynamic-accent { color: rgb(var(--accent)); }
|
|
.border-dynamic-border { border-color: rgb(var(--border)); }
|
|
.border-dynamic-primary { border-color: rgb(var(--primary)); }
|
|
|
|
/* Dynamic color opacity variants for pills */
|
|
.bg-dynamic-primary\/10 { background-color: rgb(var(--primary) / 0.1); }
|
|
.bg-dynamic-primary\/20 { background-color: rgb(var(--primary) / 0.2); }
|
|
.border-dynamic-primary\/20 { border-color: rgb(var(--primary) / 0.2); }
|
|
.border-dynamic-primary\/30 { border-color: rgb(var(--primary) / 0.3); }
|
|
|
|
/* Custom animations */
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(-8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
/* Mention highlighting */
|
|
.mention {
|
|
background-color: rgb(var(--primary) / 0.1);
|
|
color: rgb(var(--primary));
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgb(var(--border));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(var(--muted-foreground));
|
|
}
|
|
|
|
/* Focus styles */
|
|
.focus-ring:focus {
|
|
outline: 2px solid rgb(var(--primary));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Viewer mode specific styles */
|
|
.viewer-mode .prompt-input {
|
|
cursor: default;
|
|
}
|
|
|
|
.viewer-mode .prompt-input:focus {
|
|
outline: none;
|
|
} |