Skip to content

Commit

Permalink
Merge pull request #3076 from rahulbamnuya/rahul
Browse files Browse the repository at this point in the history 
I have improve a Rate us form with good UI and color combination of issue number #3039
  • Loading branch information
@sailaja-adapa
sailaja-adapa authored Oct 8, 2024
2 parents 0cd289e + 0935e70 commit d09a0b2
Showing 1 changed file with 75 additions and 42 deletions.
117 changes: 75 additions & 42 deletions assets/css/rate.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,46 +13,57 @@ body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M0 0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffdcd4' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffd6ce' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #444; /* Text color */
color: #444;
/* Text color */
user-select: none;
}

/* Rate Us Form Styling */
/* Rate Us Form Styling */
#rate-us {
max-width: 600px;
margin: 50px auto;
background: rgba(255, 255, 255, 0.8);
background: #ff6666;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transition for hover effect */
text-align: center; /* Center the content */
}

#rate-us:hover {
background-color: #FFB2A8; /* Light pink background color on hover */
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); /* Enhanced box-shadow on hover */
transform: scale(1.02); /* Slight scale effect on hover */
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
text-align: center;
}

/* Heading Styling */
#rate-us .heading {
text-align: center;
color: #ff6666; /* Updated heading color */
color: #f1eeee;
/* Updated heading color */
margin-bottom: 20px;
}

#rate-us .heading h3 {
font-size: 24px;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
font-weight: 800;
margin-bottom: 4px;
}

#rate-us:hover {

/* Light pink background color on hover */
box-shadow: 10px 10 10 30px rgba(255, 255, 255, 0.2);
/* Enhanced box-shadow on hover */
transform: scale(1.06);
/* Slight scale effect on hover */
/* Keep text color unchanged or change it to contrast with the new background */
color: #ffffff;
/* Use a dark color that contrasts with the light pink background */
border-radius: #0d0c0c;
}

/* Heading Styling */
#rate-us .heading p {
font-size: 18px;
font-size: 21px;
}


/* Emoji Ratings Styling */
#rate-us .stars {
display: flex;
Expand All @@ -66,26 +77,32 @@ body {
}

#rate-us .stars label {
font-size: 36px; /* Emoji size */
font-size: 36px;
/* Emoji size */
margin: 0 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
transition: transform 0.6s ease-in-out, color 0.3s ease-in-out;
}

#rate-us .stars label:hover {
transform: scale(1.2); /* Hover effect */
color: #ff6666; /* Change color on hover */
transform: scale(1.2);
/* Hover effect */
color: #ff6666;
/* Change color on hover */
}

#rate-us .stars input[type="radio"]:checked + label {
animation: shine 0.5s infinite alternate; /* Shining effect */
transform: scale(1.5); /* Make selected emoji bigger */
#rate-us .stars input[type="radio"]:checked+label {
animation: shine 0.5s infinite alternate;
/* Shining effect */
transform: scale(1.5);
/* Make selected emoji bigger */
}

@keyframes shine {
0% {
text-shadow: 0 0 10px #ff6666, 0 0 20px #ff6666, 0 0 30px #ff6666, 0 0 40px #ff6666;
}

100% {
text-shadow: 0 0 20px #ff6666, 0 0 30px #ff6666, 0 0 40px #ff6666, 0 0 50px #ff6666;
}
Expand All @@ -94,24 +111,25 @@ body {
/* Textarea Styling */
#rate-us .feedback-container {
text-align: center;

}

#rate-us .feedback-container textarea {
width: 100%;
height: 100px;
border: 2px solid #ccc;
border: 2px solid #fafafa;
border-radius: 5px;
padding: 10px;
font-size: 16px;
color: #444;
color: #ffffff;
}

#rate-us .feedback-container textarea::placeholder {
color: #aaa;
color: #fdfcfc;
}

#rate-us .feedback-container textarea:focus {
outline: none;

border-color: #ff6666;
}

Expand All @@ -122,50 +140,65 @@ body {
}

#rate-us .button button {
background-color: #ff6666; /* Darker background color */
color: #fff;
background-color: #ebe7e7;
/* Darker background color */
color: #b94c4c;
padding: 10px 20px;
font-size: 18px;
font-size: 23px;
font-weight: 500px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transition for hover effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Box-shadow effect */
display: inline-block; /* Center the button */
width: 100;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
/* Transition for hover effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Box-shadow effect */
display: inline-block;
/* Center the button */
width: 100%;
}

#rate-us .button button:hover {
background-color: #e65c5c;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Enhanced box-shadow on hover */

box-shadow: 0 6px 10px rgba(252, 252, 252, 0.2);
/* Enhanced box-shadow on hover */
}

/* Toast Message Styling */
/* Toast Message Styles */
#toastMessage {
position: fixed;
top: 20px; /* Adjust as needed */
top: 20px;
/* Adjust as needed */
left: 50%;
transform: translateX(-50%);
background-color: #333; /* Background color for the toast */
color: #fff; /* Text color */
background-color: #333;
/* Background color for the toast */
color: #fff;
/* Text color */
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1000; /* Ensure it's above other content */
display: none; /* Hidden by default */
z-index: 1000;
/* Ensure it's above other content */
display: none;
/* Hidden by default */
text-align: center;
}

.toast-success {
background-color: #4CAF50; /* Green for success */
background-color: #4CAF50;
/* Green for success */
}

.toast-failure {
background-color: #f44336; /* Red for failure */
background-color: #f44336;
/* Red for failure */
}


/* Pink Cursor with Glow Effect */
body {
cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23ff66b2" d="M0 0h24v24H0z" fill="none"/%3E%3Cpath fill="%23ff66b2" d="M13.88 12.47L3.41 2H2v20h2V6.41l10.59 10.59L17 17.99l2-2-2-2-3.12-3.52zm4.83 5.59l-2.83-2.83-2.83 2.83 2.83 2.83 2.83-2.83z"/%3E%3C/svg%3E'), auto;
}
}

0 comments on commit d09a0b2

Please sign in to comment.