image-resizer-test / style.css
r3hab's picture
Create style.css
fc1a7db verified
/* General Styling */
body {
font-family: "Helvetica Neue", Arial, sans-serif;
background-color: #f4f4f8;
}
.stApp {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Title and Headers */
h1 {
color: #2a2a72;
font-weight: bold;
margin-bottom: 2rem;
}
h2, h3 {
color: #4a4a8a;
}
/* Input Elements */
.stNumberInput, .stTextInput, .stFileUploader, .stSelectbox, .stSlider {
background-color: #f8f8fa;
border: 1px solid #d3d3e3;
padding: 0.5rem;
border-radius: 5px;
}
/* Buttons */
.stButton>button {
background-color: #4CAF50; /* Green */
color: white;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.stButton>button:hover {
background-color: #367c39; /* Darker green */
}
/* Download Buttons (to make them look different) */
.stDownloadButton>button {
background-color: #008CBA; /* Blue */
color: white;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.stDownloadButton>button:hover {
background-color: #005f80; /* Darker blue */
}
/* Expander */
.st-expanderHeader {
background-color: #e8e8f0;
padding: 0.5rem;
border-radius: 5px;
margin-bottom: 1rem;
}
.st-expanderContent {
border: 1px solid #d3d3e3;
border-radius: 5px;
padding: 1rem;
}
/* Status Area */
.st-bb {
border: 2px solid #d3d3e3;
border-radius: 5px;
padding: 1rem;
background-color: #f8f8fa;
}