File size: 2,771 Bytes
eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 eaa9f22 e17d945 |
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 |
/* General Styling */
body {
background: url('https://i.postimg.cc/zBX9cDZy/bmw-german-luxury-cars-brands-black-shiny-fast-car-in-a-misty-fog-01-11-2024-1730444676-hd-wallpaper.jpg
') no-repeat center center fixed; /* Set background image */
background-size: cover; /* Ensure the image covers the entire page */
font-family: 'Arial', sans-serif; /* Font for the entire app */
color: #333; /* Text color */
margin: 0;
padding: 0;
}
/* Title Section */
.stApp .stTitle {
background-color: rgba(76, 175, 80, 0.7); /* Semi-transparent background for the title */
color: white; /* White text color */
padding: 20px;
text-align: center;
font-size: 2.5rem;
border-bottom: 2px solid #ddd;
}
/* Sidebar Styling */
.stSidebar {
background-color: #ffffff; /* White background for the sidebar */
padding: 10px;
border-right: 1px solid #ddd; /* Border for separation */
}
.stSidebar .stSlider {
background-color: #fafafa;
}
/* File Upload Section */
.stFileUploader {
margin: 20px;
text-align: center;
padding: 20px;
background-color: rgba(244, 244, 244, 0.8); /* Slightly transparent background */
border: 2px dashed #ddd; /* Dashed border for the file upload section */
}
.stFileUploader input[type="file"] {
margin-top: 10px;
}
/* Image and Video Display */
.stImage, .stVideo {
display: block;
margin: 20px auto;
max-width: 100%;
border: 2px solid #ddd; /* Border around the displayed images/videos */
border-radius: 10px;
}
.stImage img, .stVideo video {
max-width: 100%;
height: auto;
}
/* Buttons */
.stButton, .stDownloadButton {
background-color: #4CAF50; /* Green background for buttons */
color: white;
padding: 10px 20px;
font-size: 1rem;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.stButton:hover, .stDownloadButton:hover {
background-color: #45a049; /* Darker green on hover */
}
/* Success and Info Messages */
.stInfo {
background-color: #2196F3; /* Blue background for info messages */
color: white;
padding: 10px;
border-radius: 5px;
margin-top: 20px;
}
.stWarning {
background-color: #ff9800; /* Orange background for warnings */
color: white;
padding: 10px;
border-radius: 5px;
margin-top: 20px;
}
/* Styling the download button with an icon */
.stDownloadButton {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
padding: 10px 20px;
}
.stDownloadButton svg {
margin-right: 10px;
}
/* Styling for the Footer */
footer {
text-align: center;
padding: 10px;
background-color: #4CAF50;
color: white;
font-size: 1rem;
}
|