Spaces:
Sleeping
Sleeping
File size: 4,124 Bytes
a097cec 35ecd7c a097cec 2ed5fbc 35ecd7c ebb5d3d a097cec d246e85 9a204c2 e970b78 9a49976 e970b78 35ecd7c e970b78 ebb5d3d 8fa192f d246e85 a097cec 5490c48 35ecd7c d246e85 139e95d 9a49976 674f5ce a097cec a5e612c b849d71 d246e85 a097cec 9a49976 a097cec aca224f 139e95d ebb5d3d a097cec 9a49976 a097cec 4d52e05 a097cec 4d52e05 aca224f b849d71 c810b28 a097cec 2b7fd95 c810b28 b849d71 9a49976 a097cec 4d52e05 b849d71 4d52e05 9a204c2 a097cec c810b28 a097cec 9a204c2 a097cec c810b28 9a49976 a097cec 9a49976 a097cec 9a49976 a097cec 2b7fd95 a097cec 9a49976 b849d71 a097cec 139e95d a097cec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
/* 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 */
}
|