모바일 - 인증키 조회 디자인 수정
This commit is contained in:
현성필
@@ -3163,7 +3163,12 @@ hr {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar, .user-management-container .table-controls, .app-list-title-section, .register-title-bar {
|
||||
padding: 12px 24px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
}
|
||||
}
|
||||
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
@@ -3175,7 +3180,10 @@ hr {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 4px;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.common-title-bar--simple {
|
||||
@@ -3194,6 +3202,19 @@ hr {
|
||||
.common-title-bar--simple .required-badge {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar--simple {
|
||||
padding: 20px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
}
|
||||
.common-title-bar--simple h3 {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@@ -3201,7 +3222,10 @@ hr {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #515151;
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10415,6 +10439,19 @@ select.form-control {
|
||||
padding: 14px 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-title-bar {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 0 20px 6px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #212529;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.register-title-bar .register-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
@@ -10426,6 +10463,12 @@ select.form-control {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-title-bar .register-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.register-title-bar .register-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@@ -10436,6 +10479,11 @@ select.form-control {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-title-bar .register-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-progress {
|
||||
display: flex;
|
||||
@@ -10517,6 +10565,8 @@ select.form-control {
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container.with-sidebar {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10660,6 +10710,20 @@ select.form-control {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.ip-input-row {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
.ip-input-row .ip-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-ip {
|
||||
width: 158px;
|
||||
@@ -10684,6 +10748,15 @@ select.form-control {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-add-ip {
|
||||
width: 89px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.register-form-container .ip-list {
|
||||
margin-top: 20px;
|
||||
@@ -10711,6 +10784,12 @@ select.form-control {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container .ip-list .ip-item {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.register-form-container .ip-list .ip-item .ip-display {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
@@ -10723,6 +10802,15 @@ select.form-control {
|
||||
font-size: 20px;
|
||||
color: #1A1A2E;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container .ip-list .ip-item .ip-display {
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
.register-form-container .ip-list .ip-item .btn-remove-ip {
|
||||
width: 158px !important;
|
||||
height: 60px !important;
|
||||
@@ -10746,6 +10834,15 @@ select.form-control {
|
||||
height: 50px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container .ip-list .ip-item .btn-remove-ip {
|
||||
width: 89px !important;
|
||||
height: 40px !important;
|
||||
font-size: 12px !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apikey-register-container {
|
||||
padding: 40px 24px;
|
||||
@@ -10966,7 +11063,7 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.apikey-register-content {
|
||||
padding: 24px 16px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10977,12 +11074,12 @@ select.form-control {
|
||||
right: 24px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-color: #0049b4;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
|
||||
z-index: 501;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -11152,7 +11249,7 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-selection-card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
@@ -11640,6 +11737,39 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.apikey-register-container > .form-actions, .apikey-register-container > .form-actions-center {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit, .apikey-register-container > .form-actions-center .btn-submit {
|
||||
width: 144px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
border-radius: 8px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-secondary, .apikey-register-container > .form-actions-center .btn-submit.btn-secondary {
|
||||
background-color: #e5e7eb !important;
|
||||
color: #5f666c !important;
|
||||
border: none !important;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-primary, .apikey-register-container > .form-actions-center .btn-submit.btn-primary {
|
||||
background-color: #0049b4 !important;
|
||||
color: #FFFFFF !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.register-result {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
@@ -12503,6 +12633,211 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.apikey-detail-container {
|
||||
padding: 0 !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
.register-title-bar {
|
||||
padding: 20px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #dadada;
|
||||
}
|
||||
.register-title-bar .register-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.register-title-bar .register-subtitle {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.app-info-card {
|
||||
flex-direction: row !important;
|
||||
align-items: flex-start !important;
|
||||
text-align: left !important;
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
margin-bottom: 0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.app-info-card .app-info-icon {
|
||||
width: 56px !important;
|
||||
height: 56px !important;
|
||||
min-width: 56px;
|
||||
margin-left: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.app-info-card .app-info-icon .app-icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.app-info-card .app-info-icon .app-icon-placeholder svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.app-info-card .app-info-content {
|
||||
gap: 4px;
|
||||
}
|
||||
.app-info-card .app-status-badge {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.app-info-card .app-status-badge.status-approved {
|
||||
background-color: #0049b4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.app-info-card .app-info-name {
|
||||
font-size: 16px !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
.app-info-card .app-info-description {
|
||||
font-size: 12px !important;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.apikey-info-section {
|
||||
background: #f6f9fb;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 0px;
|
||||
}
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.info-label {
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
width: 100%;
|
||||
}
|
||||
.info-value {
|
||||
width: 100%;
|
||||
}
|
||||
.info-value-box {
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
background: #f2f2f2;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.info-value-box.with-copy {
|
||||
flex: 1;
|
||||
}
|
||||
.info-row-with-action .info-value {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-copy-action {
|
||||
width: 89px !important;
|
||||
min-width: 89px;
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
padding: 0 12px;
|
||||
background: #a4d6ea;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.btn-copy-action:hover {
|
||||
background: rgb(122.5625, 195.3303571429, 224.4375);
|
||||
}
|
||||
.btn-view-secret {
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
background: #3ba4ed;
|
||||
border-radius: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn-view-secret svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.btn-view-secret:hover {
|
||||
background: rgb(20.6074766355, 140.8177570093, 224.3925233645);
|
||||
}
|
||||
#revealedSecretBox {
|
||||
width: 100%;
|
||||
}
|
||||
#revealedSecretBox .info-row-with-action .info-value {
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
.api-list-box {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.api-list-item {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.api-list-item .api-item-name {
|
||||
font-size: 14px !important;
|
||||
color: #000;
|
||||
}
|
||||
.api-list-item .api-item-status {
|
||||
min-width: auto;
|
||||
height: 24px !important;
|
||||
padding: 0 12px;
|
||||
font-size: 12px !important;
|
||||
background: #eceff4;
|
||||
border-radius: 20px;
|
||||
color: #515151;
|
||||
}
|
||||
.info-row-vertical .info-value {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.form-actions-center {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.form-actions-center .btn-submit,
|
||||
.form-actions-center .btn {
|
||||
width: 144px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
border-radius: 8px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.form-actions-center .btn-submit.btn-secondary,
|
||||
.form-actions-center .btn.btn-secondary {
|
||||
background-color: #e5e7eb !important;
|
||||
color: #5f666c !important;
|
||||
border: none !important;
|
||||
}
|
||||
.form-actions-center .btn-submit.btn-primary,
|
||||
.form-actions-center .btn.btn-primary {
|
||||
background-color: #0049b4 !important;
|
||||
color: #FFFFFF !important;
|
||||
border: none !important;
|
||||
}
|
||||
.form-actions-center .btn-submit.btn-danger,
|
||||
.form-actions-center .btn.btn-danger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-management-container {
|
||||
padding: 24px 16px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user