ngx-voicely-cx/src/lib/feedback-form/feedback-form.component.css

A feedback collection widget for Angular applications

h1{
    color: red;
    font-size: 20px;
    text-align: center;
}

.feedback-form-card {
  max-width: 800px;
  margin: 20px auto;
}

mat-card-header {
  margin-bottom: 24px;
}

mat-card-title {
  font-size: 24px;
  margin-bottom: 24px !important;
}

mat-card-content {
  padding-top: 8px;
}

.full-width {
  width: 100%;
}

.rating-container, .features-container, .thoughts-container {
  margin-bottom: 32px;
  display: block;
}

.rating-container label.rating-label, .features-container label, .thoughts-container label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}

.button-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.tags-container {
  margin-top: 5px;
  margin-bottom: 20px;
}

/* Star Rating Styles from uiverse.io by aguerquin */
.rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.rating-label-text {
  min-width: 150px;
}

.rating-description {
  margin-left: 10px;
  color: #666;
}

/* Exact CSS from uiverse.io by aguerquin */
.rating > label {
  margin-right: 4px;
}

.rating:not(:checked) > input {
  display: none;
}

.rating:not(:checked) > label {
  float: right;
  cursor: pointer;
  font-size: 24px;
}

.rating:not(:checked) > label > svg {
  fill: #666;
  transition: fill 0.3s ease;
}

.rating > input:checked ~ label > svg {
  fill: #ffa723;
}

.rating:not(:checked) > label:hover ~ label > svg,
.rating:not(:checked) > label:hover > svg {
  fill: #ff9e0b;
}

/* Ease of Use */
[id^="easeOfUse1"]:hover ~ label > svg,
[id^="easeOfUse1"]:hover > svg {
  fill: #a23c3c !important;
}

[id^="easeOfUse2"]:hover ~ label > svg,
[id^="easeOfUse2"]:hover > svg {
  fill: #99542d !important;
}

[id^="easeOfUse3"]:hover ~ label > svg,
[id^="easeOfUse3"]:hover > svg {
  fill: #9f7e18 !important;
}

[id^="easeOfUse4"]:hover ~ label > svg,
[id^="easeOfUse4"]:hover > svg {
  fill: #22885e !important;
}

[id^="easeOfUse5"]:hover ~ label > svg,
[id^="easeOfUse5"]:hover > svg {
  fill: #0a86da !important;
}

[id^="easeOfUse1"]:checked ~ label > svg {
  fill: #ef4444 !important;
}

[id^="easeOfUse2"]:checked ~ label > svg {
  fill: #e06c2b !important;
}

[id^="easeOfUse3"]:checked ~ label > svg {
  fill: #eab308 !important;
}

[id^="easeOfUse4"]:checked ~ label > svg {
  fill: #19c37d !important;
}

[id^="easeOfUse5"]:checked ~ label > svg {
  fill: #0a86da !important;
}

/* Performance */
[id^="performance1"]:hover ~ label > svg,
[id^="performance1"]:hover > svg {
  fill: #a23c3c !important;
}

[id^="performance2"]:hover ~ label > svg,
[id^="performance2"]:hover > svg {
  fill: #99542d !important;
}

[id^="performance3"]:hover ~ label > svg,
[id^="performance3"]:hover > svg {
  fill: #9f7e18 !important;
}

[id^="performance4"]:hover ~ label > svg,
[id^="performance4"]:hover > svg {
  fill: #22885e !important;
}

[id^="performance5"]:hover ~ label > svg,
[id^="performance5"]:hover > svg {
  fill: #0a86da !important;
}

[id^="performance1"]:checked ~ label > svg {
  fill: #ef4444 !important;
}

[id^="performance2"]:checked ~ label > svg {
  fill: #e06c2b !important;
}

[id^="performance3"]:checked ~ label > svg {
  fill: #eab308 !important;
}

[id^="performance4"]:checked ~ label > svg {
  fill: #19c37d !important;
}

[id^="performance5"]:checked ~ label > svg {
  fill: #0a86da !important;
}

/* Design */
[id^="design1"]:hover ~ label > svg,
[id^="design1"]:hover > svg {
  fill: #a23c3c !important;
}

[id^="design2"]:hover ~ label > svg,
[id^="design2"]:hover > svg {
  fill: #99542d !important;
}

[id^="design3"]:hover ~ label > svg,
[id^="design3"]:hover > svg {
  fill: #9f7e18 !important;
}

[id^="design4"]:hover ~ label > svg,
[id^="design4"]:hover > svg {
  fill: #22885e !important;
}

[id^="design5"]:hover ~ label > svg,
[id^="design5"]:hover > svg {
  fill: #0a86da !important;
}

[id^="design1"]:checked ~ label > svg {
  fill: #ef4444 !important;
}

[id^="design2"]:checked ~ label > svg {
  fill: #e06c2b !important;
}

[id^="design3"]:checked ~ label > svg {
  fill: #eab308 !important;
}

[id^="design4"]:checked ~ label > svg {
  fill: #19c37d !important;
}

[id^="design5"]:checked ~ label > svg {
  fill: #0a86da !important;
}

/* Fix for form visibility */
form {
  display: block;
  visibility: visible !important;
  opacity: 1 !important;
}

/* All sections should be visible by default */
.features-container, 
.thoughts-container, 
.button-container {
  display: block;
  visibility: visible !important;
  opacity: 1 !important;
}