Spaces:
Sleeping
Sleeping
/* 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 */ | |
} | |