/**
* App Component Styles
*
* Blueprint background is now applied globally in styles.scss
*/
:host {
display: block;
min-height: 100vh;
width: 100%;
// No background needed - using global blueprint background
}
// Style adjustments for content on blueprint background
::ng-deep {
// Keep normal text colors since boxes are semi-transparent white
body {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
// Make component backgrounds semi-transparent to show blueprint grid
.question-card,
.response-actions {
background: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(64, 164, 223, 0.4) !important;
backdrop-filter: blur(2px);
}
.wont-answer-section {
background: rgba(255, 243, 205, 0.9) !important;
border-color: rgba(255, 234, 167, 0.8) !important;
}
.why-section {
background: rgba(255, 248, 225, 0.9) !important;
border-color: rgba(255, 204, 2, 0.6) !important;
}
.priority-section {
background: rgba(248, 249, 250, 0.85) !important;
border-left-color: rgba(76, 175, 80, 0.8) !important;
}
.comment-input-wrapper {
background: rgba(255, 255, 255, 0.7) !important;
}
// Keep input backgrounds subtle but readable
input, textarea, select {
background: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(64, 164, 223, 0.4) !important;
}
input:focus, textarea:focus, select:focus {
border-color: rgba(64, 164, 223, 0.8) !important;
box-shadow: 0 0 0 2px rgba(64, 164, 223, 0.2) !important;
}
// Keep original button styling but with slight transparency
.btn-primary {
background: rgba(33, 150, 243, 0.95) !important;
border-color: #2196f3 !important;
}
.btn-primary:hover:not(:disabled) {
background: rgba(25, 118, 210, 0.95) !important;
}
.btn-secondary {
background: rgba(108, 117, 125, 0.9) !important;
}
// Priority buttons with subtle transparency
.priority-button {
background: rgba(255, 255, 255, 0.8) !important;
border-color: rgba(64, 164, 223, 0.4) !important;
}
.priority-button:hover {
border-color: rgba(64, 164, 223, 0.8) !important;
background: rgba(33, 150, 243, 0.1) !important;
}
.priority-button.selected {
background: rgba(33, 150, 243, 0.9) !important;
border-color: #2196f3 !important;
color: white !important;
}
// Option items with subtle transparency
.option-item.selected,
.option-item:has(input:checked) {
background: rgba(232, 245, 232, 0.9) !important;
border-color: rgba(76, 175, 80, 0.8) !important;
}
// Grayed out content (won't answer) - more transparent to show grid
.question-card.grayed-out {
opacity: 0.6;
background: rgba(240, 240, 240, 0.7) !important;
}
}
