|
|
|
.api-container { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 20px; |
|
padding: 15px; |
|
} |
|
|
|
.api-model-select, |
|
.api-input-group { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 8px; |
|
} |
|
|
|
.api-keys-container { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 15px; |
|
} |
|
|
|
.api-key-input { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 8px; |
|
} |
|
|
|
.api-key-input input { |
|
padding: 8px; |
|
border: 1px solid #5f3737; |
|
border-radius: 4px; |
|
} |
|
|
|
label { |
|
color: #5f3737; |
|
font-weight: bold; |
|
} |
|
|
|
select { |
|
padding: 8px; |
|
border: 1px solid #5f3737; |
|
border-radius: 4px; |
|
background-color: white; |
|
} |
|
|
|
.api-submit-btn { |
|
padding: 10px; |
|
background-color: #5f3737; |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
transition: background-color 0.3s; |
|
} |
|
|
|
.api-submit-btn:hover { |
|
background-color: #7a4747; |
|
} |
|
|
|
.api-key-input .toggle-visibility { |
|
position: absolute; |
|
right: 10px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
cursor: pointer; |
|
color: #5f3737; |
|
} |
|
|
|
|
|
.api-container label h3 { |
|
margin: 0; |
|
display: inline-block; |
|
} |
|
|
|
.api-submit-btn h3 { |
|
margin: 0; |
|
} |
|
|
|
|
|
.api-container label { |
|
margin-bottom: 0; |
|
} |
|
|
|
|
|
.api-container label h3 { |
|
vertical-align: middle; |
|
line-height: normal; |
|
} |
|
|
|
|
|
.api-container > label + select, |
|
.api-container > label + input { |
|
margin-top: 5px; |
|
} |