imaginar/public/styles/form.css
2024-10-19 20:24:54 +09:00

97 lines
1.6 KiB
CSS

/* 共通スタイル */
form {
margin: 20px 0;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: inline-block;
}
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
textarea {
resize: vertical;
height: 100px;
}
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
background-color: #fff;
color: #333;
cursor: pointer;
transition: border-color 0.3s ease;
}
select:focus {
border-color: #7289da;
outline: none;
}
option {
background-color: #fff;
color: #333;
}
.submit-btn {
background-color: #7289da;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #5b6eae;
}
/* 利用規約ボックス */
.terms-box {
border: 1px solid #000;
padding: 10px;
max-height: 200px;
overflow-y: scroll;
margin-bottom: 15px;
}
/* ボックスを整列 */
.account-setup-container, .bot-creation-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* チェックボックスのスタイル */
.checkbox-label {
display: flex;
align-items: center;
}
/* 必須項目の赤いアスタリスク */
.required {
color: red;
}
/* 必須項目の注釈 */
.required-note {
color: red;
font-size: 0.9rem;
margin-top: 10px;
}