feedback-loop-mcp

/* Base body styles */ body { font-family: 'Inter', sans-serif; background-color: transparent; min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; color: #f5f5f5; overflow: hidden; } html { background-color: transparent !important; height: 100%; /* Ensure html takes full height */ } /* Glass effect (retained from original) */ .glass-effect { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* Window dots (retained from original) */ .window-dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; } .dot-red { background-color: #FF5F57; } .dot-yellow { background-color: #FEBC2E; } .dot-green { background-color: #28C840; } /* Custom scrollbar for textarea (retained from original) */ textarea::-webkit-scrollbar { width: 8px; } textarea::-webkit-scrollbar-track { background: transparent; } textarea::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; } textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.3); } /* Main Feedback UI Container */ .feedback-container { /* Removed background, border, and shadow for a simpler look */ border-radius: 1.5rem; /* Kept for consistency if a background is ever re-added */ padding: 1rem; /* Increased padding slightly */ display: flex; flex-direction: column; width: 100%; max-width: 28rem; color: #f5f5f5; -webkit-app-region: drag; /* Ensure the container itself is draggable, but specific elements within can override this */ max-height: calc(100vh - 3rem); /* Maximum height with some padding */ box-sizing: border-box; /* Include padding in height calculation */ overflow-y: auto; /* Allow scrolling if content exceeds max height */ } /* Header Section */ .feedback-header { flex-direction: column; /* Stack project info and title */ align-items: flex-start; /* Align items to the left */ margin-bottom: 0.75rem; /* Reduced margin */ -webkit-app-region: no-drag; /* Ensure header itself is not draggable */ display: flex; align-items: center; margin-bottom: 1rem; /* mb-4 */ } .project-info { font-size: 0.75rem; /* Smaller font */ color: #c0c0c0; /* Lighter grey */ -webkit-app-region: no-drag; /* Make it non-draggable */ } .feedback-title { -webkit-app-region: no-drag; font-size: 1.125rem; /* text-lg */ font-weight: 600; /* semibold */ color: #ffffff; margin: 0; margin-bottom: 0.5rem; -webkit-app-region: no-drag; } .window-controls { display: flex; margin-right: 0.75rem; /* mr-3 */ -webkit-app-region: no-drag; /* Make controls non-draggable */ } .feedback-title { font-size: 1.125rem; /* text-lg */ font-weight: 600; /* font-semibold */ /* color: #f5f5f5; already inherited */ } /* Sub-description Box */ .description-box { -webkit-app-region: no-drag; background-color: rgba(23, 23, 23, 0.5); /* bg-neutral-900/50 */ border: 1px solid rgba(64, 64, 64, 0.3); /* border border-neutral-700/30 */ border-radius: 0.75rem; /* rounded-xl */ padding: 0.75rem; /* p-3 */ margin-bottom: 1rem; /* mb-4 */ } .description-text { font-size: 0.875rem; /* text-sm */ color: #e5e5e5; /* text-neutral-200 */ min-height: 1.25em; /* Ensure it has some height even when empty */ } /* Feedback Textarea */ .feedback-textarea { -webkit-app-region: no-drag; flex-grow: 1; background-color: rgba(64, 64, 64, 0.4); /* bg-neutral-700/40 */ border: 1px solid rgba(82, 82, 82, 0.5); /* border border-neutral-600/50 */ border-radius: 0.75rem; /* rounded-xl */ padding: 0.75rem; /* p-3 */ font-size: 0.875rem; /* text-sm */ color: #f5f5f5; /* text-neutral-100 */ resize: none; /* resize-none */ width: 100%; /* w-full */ margin-bottom: 1rem; /* mb-4 */ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* transition-colors */ box-sizing: border-box; /* To include padding and border in the element's total width and height */ -webkit-app-region: no-drag; /* Make textarea non-draggable */ min-height: 100px; /* Added min-height */ } .feedback-textarea::placeholder { color: #a3a3a3; /* placeholder-neutral-400 */ } .feedback-textarea:focus { outline: none; /* focus:outline-none */ border-color: rgba(14, 165, 233, 0.7); /* focus:border-sky-500/70 */ box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.7); /* focus:ring-1 focus:ring-sky-500/70 */ } background-color: rgba(255, 255, 255, 0.2); } /* Footer Section */ .feedback-footer { -webkit-app-region: no-drag; display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; /* mt-4 */ } .submission-hint { display: flex; align-items: center; color: #a3a3a3; /* text-neutral-400 */ font-size: 0.75rem; /* text-xs */ } .command-key { border: 1px solid #404040; /* border border-neutral-600 */ border-radius: 0.25rem; /* rounded */ padding: 0.125rem 0.375rem; /* px-1.5 py-0.5 */ margin-right: 0.375rem; /* mr-1.5 */ color: #d4d4d4; /* text-neutral-300 */ } /* Send Button */ .send-button { -webkit-app-region: no-drag; background-color: #ffffff; /* bg-white */ color: #404040; /* text-neutral-700 */ border-radius: 9999px; /* rounded-full */ width: 3rem; /* w-12 */ height: 3rem; /* h-12 */ display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */ flex-shrink: 0; /* shrink-0 */ transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out; /* transition-all */ border: none; /* remove default button border */ } .send-button:hover { background-color: #e5e5e5; /* hover:bg-neutral-200 */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */ transform: scale(1.05); /* hover:scale-105 */ } .send-button-icon { font-size: 1.25rem; /* text-xl */ } .project-info { font-size: 0.75rem; /* Smaller font */ color: #c0c0c0; /* Lighter grey */ margin-bottom: 0.25rem; /* Space below it before the title */ -webkit-app-region: no-drag; /* Make it non-draggable */ } background-color: rgba(255, 255, 255, 0.2); } /* Responsive Styles */ @media (min-width: 640px) { /* sm breakpoint */ .feedback-container { padding: 1.5rem; /* sm:p-6 */ } .feedback-title { font-size: 1.25rem; /* sm:text-xl */ } .description-box { padding: 1rem; /* sm:p-4 */ } .description-text { font-size: 1rem; /* sm:text-base */ } .feedback-textarea { padding: 1rem; /* sm:p-4 */ font-size: 1rem; /* sm:text-base */ } .submission-hint { font-size: 0.875rem; /* sm:text-sm */ } .send-button { width: 3.5rem; /* sm:w-14 */ height: 3.5rem; /* sm:h-14 */ } .send-button-icon { font-size: 1.5rem; /* sm:text-2xl */ } } @media (min-width: 768px) { /* md breakpoint */ .feedback-container { max-width: 32rem; /* md:max-w-lg */ } }/* Quick Feedback Options Container */ .quick-feedback-buttons { display: flex; flex-direction: column; /* Stack options vertically */ gap: 0.5rem; /* Spacing between options */ margin-top: 0.75rem; /* Space above the container */ margin-bottom: 0.75rem; /* Space below the container */ -webkit-app-region: no-drag; /* Container is not draggable */ /* Removed max-height and overflow to allow container to expand */ } /* Individual Quick Feedback Box */ .quick-feedback-box { padding: 0.75rem 1rem; /* Increased padding for better readability */ font-size: 0.875rem; /* text-sm */ color: #e0e0e0; /* Lighter text */ background-color: rgba(255, 255, 255, 0.1); /* Subtle background */ border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.375rem; /* rounded-md */ cursor: pointer; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-app-region: no-drag; /* CRITICAL for clickability */ display: block; /* Full width */ text-align: left; /* Left-align text */ width: 100%; /* Full width of container */ box-sizing: border-box; /* Include padding in width */ line-height: 1.4; /* Improved line height for readability */ margin-bottom: 0.5rem; /* Add space between boxes */ word-wrap: break-word; /* Ensure long words wrap */ hyphens: auto; /* Add hyphens for very long words */ } .quick-feedback-box:hover { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); } .quick-feedback-box:active { background-color: rgba(255, 255, 255, 0.2); } /* Feedback Footer: Ensure hint is left and button is right */ .feedback-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; /* Consistent with original styling */ padding-top: 1rem; /* Consistent with original styling */ border-top: 1px solid rgba(255, 255, 255, 0.1); /* Consistent with original styling */ -webkit-app-region: no-drag; /* CRITICAL for clickability */ }