82 lines
1.7 KiB
CSS
82 lines
1.7 KiB
CSS
body {
|
|
background-color: #1e1e1e;
|
|
color: #fff;
|
|
}
|
|
|
|
h1 {
|
|
color: #f7c04a;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-label {
|
|
color: #f7c04a;
|
|
}
|
|
|
|
.keyword-suggestions {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#generatedImage {
|
|
border: 2px solid #f7c04a;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#promptDisplay {
|
|
background-color: #292929;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
border: 1px solid #f7c04a;
|
|
}
|
|
|
|
#positivePromptDisplay {
|
|
color: #00ff00;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#negativePromptDisplay {
|
|
color: #ff3333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#prevImage, #nextImage {
|
|
border-color: #f7c04a; /* Gold border */
|
|
background-color: transparent; /* Transparent background */
|
|
color: #f7c04a; /* Gold text color */
|
|
font-weight: bold;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
#prevImage:hover, #nextImage:hover {
|
|
background-color: #f7c04a; /* Gold background on hover */
|
|
color: #1e1e1e; /* Dark text on hover to contrast */
|
|
}
|
|
|
|
#llmResponse {
|
|
margin-top: 0; /* Remove any extra margin at the top */
|
|
padding-top: 0; /* Remove extra padding at the top */
|
|
line-height: 1.5; /* Adjust line height for better readability */
|
|
text-align: left; /* Ensure the text aligns to the left */
|
|
}
|
|
|
|
#llmResponse:focus {
|
|
outline: none; /* Remove the blue outline when focused */
|
|
box-shadow: 0 0 5px 2px #f7c04a; /* Optional: Add a gold glow when focused */
|
|
}
|
|
|
|
/* Center the title on smaller screens */
|
|
@media (max-width: 768px) {
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
#imageResult {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
/* New styles for responsive layout and sticky image preview */
|
|
.sticky-top {
|
|
position: sticky;
|
|
top: 20px;
|
|
} |