voice_ai / style.css
Adinarayana02's picture
Update style.css
4d52e05 verified
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Background Overlay */
.background-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Ensure it is behind all content */
}
/* Header Styles */
.header {
background-image: url('https://wallpaperset.com/w/full/9/a/3/241480.jpg');
background-size: cover; /* Cover the entire header */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
color: #fff; /* White text color */
text-align: center;
padding: 50px 20px; /* Adjust padding as needed */
border-radius: 15px; /* Rounded corners */
backdrop-filter: blur(10px); /* Optional: Add blur effect to enhance readability */
}
.header h1 {
margin: 0;
font-size: 3rem;
color: rgba(255, 255, 255, 0.8); /* White color with 80% opacity */
}
.header h3 {
margin: 10px 0;
background-image: url('#');
background-size: cover; /* Cover the entire element */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
font-size: 1.5rem;
color: #ddd;
}
.header p {
font-size: 1rem;
color: #aaa;
}
/* Gradio Container Styles */
.gradio-container {
background-image: url('#');
background-size: cover; /* Cover the entire element */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
font-size: 1.5rem;
color: #ddd;
backdrop-filter: blur(5px); /* Optional: Add blur effect to enhance readability */
}
/* Input Box Styles */
.gradio-container .input-box {
width: 100%;
border-radius: 10px;
background-color: #444;
color: #fff;
background-image: url('https://s3.eu-north-1.amazonaws.com/cdn-site.mediaplanet.com/app/uploads/sites/114/2021/09/07234951/tech-AI-caiac-576x486.jpg');
background-size: cover; /* Cover the entire element */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
}
/* Input Styles */
.gradio-container .input-box input {
border: none;
border-radius: 5px;
padding: 10px;
background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background */
}
/* Output Box Styles */
.gradio-container .output-box {
width: 100%;
border-radius: 10px;
background-color: #444;
color: #fff;
background-image: url('https://miro.medium.com/max/669/1*wLfVf0JCI1mg2kvqXOkbNw.jpeg');
background-size: cover; /* Cover the entire element */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
}
/* Output Textarea Styles */
.gradio-container .output-box textarea {
border: none;
border-radius: 5px;
padding: 10px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for the textarea */
}
/* Audio Styles */
.audio {
width: 100%;
border-radius: 10px;
background-color: #444;
color: #fff;
background-image: url('https://cdn.dribbble.com/users/285803/screenshots/4777000/loading.gif');
background-size: cover; /* Cover the entire element */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
}
/* Button Styles */
.gradio-container .button {
background-color: #ff004f;
color: #fff;
border-radius: 10px;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.gradio-container .button:hover {
background-color: #444;
background-image: url('https://wallpaperset.com/w/full/9/a/3/241480.jpg');
background-size: cover; /* Cover the entire element */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
}