You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.5 KiB
80 lines
1.5 KiB
body { |
|
font-family: "Segoe UI", Arial, sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
background-color: #2b2b2b; |
|
color: #e0e0e0; |
|
} |
|
|
|
.container { |
|
max-width: 90%; |
|
margin: 50px auto; |
|
padding: 15px; |
|
background: #333333; |
|
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); |
|
border-radius: 5px; |
|
} |
|
|
|
#responseContainer { |
|
margin-top: 15px; |
|
border: 1px solid #444; |
|
padding: 10px; |
|
min-height: 100px; |
|
background-color: #3a3a3a; |
|
color: #e0e0e0; |
|
} |
|
|
|
.btn-primary { |
|
background-color: #007bff; |
|
color: white; |
|
border: none; |
|
} |
|
|
|
#userInput { |
|
margin-bottom: 10px; |
|
background-color: #424242; /* Darker shade for textarea */ |
|
color: #e0e0e0; /* Light text for readability */ |
|
border: 1px solid #555; /* Adjusted border color */ |
|
padding: 10px; /* Added padding for better text visibility */ |
|
} |
|
#patternSelector { |
|
margin-bottom: 10px; |
|
background-color: #424242; /* Darker shade for textarea */ |
|
color: #e0e0e0; /* Light text for readability */ |
|
border: 1px solid #555; /* Adjusted border color */ |
|
padding: 10px; /* Added padding for better text visibility */ |
|
height: 40px; |
|
} |
|
|
|
@media (min-width: 768px) { |
|
.container { |
|
max-width: 80%; |
|
} |
|
} |
|
|
|
.light-theme { |
|
background-color: #fff; |
|
color: #333; |
|
} |
|
|
|
.light-theme .container { |
|
background: #f0f0f0; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.light-theme #responseContainer, |
|
.light-theme #userInput, |
|
.light-theme #patternSelector { |
|
background-color: #fff; |
|
color: #333; |
|
border: 1px solid #ddd; |
|
} |
|
|
|
.light-theme .btn-primary { |
|
background-color: #0066cc; |
|
color: white; |
|
} |
|
|
|
.hidden { |
|
display: none; |
|
}
|
|
|