IP 입력 필드 스타일 개선: 정렬 및 버튼 크기 수정

- `.ip-input-row` 정렬 기준 추가 및 버튼 폭 고정
- `.btn-add-ip` 및 제거 버튼 스타일/반응형 조정
This commit is contained in:
Rinjae
2026-06-30 10:54:00 +09:00
parent 0c3b63a5b1
commit 97b9d2161a
3 changed files with 18 additions and 12 deletions
+16 -10
View File
@@ -11441,6 +11441,7 @@ button.djb-comment-submit:disabled {
.ip-input-row {
display: flex;
align-items: center;
gap: 21px;
}
.ip-input-row .ip-input {
@@ -11468,7 +11469,7 @@ button.djb-comment-submit:disabled {
}
.btn-add-ip {
width: auto;
width: 100px;
height: 40px;
padding: 0 16px;
background-color: #3ba4ed;
@@ -11480,20 +11481,23 @@ button.djb-comment-submit:disabled {
cursor: pointer;
transition: background-color 0.2s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.btn-add-ip:hover {
background-color: #2b94dd;
}
@media (max-width: 1024px) {
.btn-add-ip {
width: auto;
width: 100%;
font-size: 14px;
height: 38px;
}
}
@media (max-width: 768px) {
.btn-add-ip {
width: auto;
width: 89px;
height: 36px;
font-size: 13px;
border-radius: 8px;
@@ -11514,6 +11518,7 @@ button.djb-comment-submit:disabled {
}
.register-form-container .ip-list .ip-item {
display: flex;
align-items: center;
gap: 21px;
padding: 0;
border-bottom: none;
@@ -11555,26 +11560,27 @@ button.djb-comment-submit:disabled {
}
}
.register-form-container .ip-list .ip-item .btn-remove-ip {
width: 158px !important;
height: 60px !important;
width: 100px !important;
height: 40px !important;
background-color: #e5e7eb !important;
color: #5f666c !important;
border: none !important;
border-radius: 12px !important;
font-size: 20px !important;
font-weight: 700;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
flex-shrink: 0;
display: flex !important;
align-items: center;
justify-content: center;
align-self: center;
}
@media (max-width: 1024px) {
.register-form-container .ip-list .ip-item .btn-remove-ip {
width: 100% !important;
font-size: 16px !important;
height: 50px !important;
font-size: 14px !important;
height: 38px !important;
}
}
@media (max-width: 768px) {
File diff suppressed because one or more lines are too long
@@ -150,7 +150,7 @@
<!-- Services 데이터를 반복하여 API 카드 표시 (최대 4개) -->
<div class="api-card" th:each="service, iterStat : ${services}"
th:if="${iterStat.index < 4}"
th:onclick="${service.id != null} ? |location.href='@{/apis(groupId=${service.id})}'| : |location.href='@{/apis}'|">
th:onclick="${service.id != null} ? |location.href='@{/apis(groupIds=${service.id})}'| : |location.href='@{/apis}'|">
<h3 class="card-title" th:text="${service.groupName}">API 서비스</h3>
<p class="card-description">
<span th:if="${service.groupDesc != null and !#strings.isEmpty(service.groupDesc)}"