.ps-container { | |
background: #f8f3ef; | |
color: #333; | |
min-height: 100vh; | |
padding: 20px 0; | |
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
} | |
.ps-card { | |
background-color: #e9ded2; | |
border-radius: 16px; | |
max-width: 800px; | |
margin: 0 auto; | |
margin-top: 40px; | |
padding: 40px 48px; | |
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); | |
} | |
.ps-form > div { | |
margin-bottom: 20px; | |
} | |
.ps-label { | |
display: block; | |
font-weight: bold; | |
margin-bottom: 8px; | |
color: #5F4437; | |
} | |
.ps-input-text, | |
.ps-textarea, | |
.ps-select { | |
width: 100%; | |
padding: 10px 12px; | |
border-radius: 6px; | |
border: 1px solid #e0c4a1; | |
background-color: #fff5f5; | |
color: #5F4437; | |
font-size: 1rem; | |
transition: border-color 0.3s; | |
} | |
.ps-input-text:focus, | |
.ps-textarea:focus, | |
.ps-select:focus { | |
outline: none; | |
border-color: #c49c6b; | |
} | |
.ps-textarea { | |
resize: vertical; | |
min-height: 80px; | |
} | |
.ps-seed-file-label, | |
.ps-cover-upload-button { | |
display: inline-block; | |
padding: 8px 16px; | |
border: 1px solid #e0c4a1; | |
background-color: #fff5f5; | |
border-radius: 6px; | |
cursor: pointer; | |
font-size: 14px; | |
font-weight: 500; | |
color: #5F4437; | |
transition: all 0.2s ease; | |
} | |
.ps-seed-file-label:hover, | |
.ps-cover-upload-button:hover { | |
background-color: #f1e0d0; | |
} | |
.ps-seed-file-input, | |
.ps-cover-upload-input { | |
display: none; | |
} | |
.ps-message { | |
background-color: #fff3cd; | |
color: #856404; | |
padding: 12px; | |
border-radius: 8px; | |
margin-bottom: 20px; | |
border: 1px solid #ffeeba; | |
} | |
.ps-upload-button { | |
text-align: center; | |
} | |
.ps-upload-button button { | |
background-color: #5F4437; | |
color: #fff; | |
padding: 12px 32px; | |
border: none; | |
border-radius: 8px; | |
font-size: 16px; | |
cursor: pointer; | |
transition: background-color 0.2s ease; | |
} | |
.ps-upload-button button:hover { | |
background-color: #472f23; | |
} | |
.ps-upload-button button:disabled { | |
background-color: #9c8c84; | |
cursor: not-allowed; | |
} | |
.ps-img-preview { | |
border-radius: 8px; | |
border: 1px solid #ccc; | |
max-width: 100%; | |
max-height: 200px; | |
object-fit: contain; | |
} |