refactor: update styles in SASS files for improved responsiveness and consistency
This commit is contained in:
Rinjae
@@ -1627,7 +1627,7 @@ hr {
|
||||
}
|
||||
.footer-right .footer-contact {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
margin: 0;
|
||||
@@ -1635,7 +1635,7 @@ hr {
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.footer-right .footer-contact {
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2629,15 +2629,15 @@ hr {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 60px;
|
||||
padding: 10px 24px;
|
||||
gap: 6px;
|
||||
height: 40px;
|
||||
padding: 8px 16px;
|
||||
background-color: #3ba4ed;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
@@ -2646,8 +2646,8 @@ hr {
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.btn-upload {
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10787,11 +10787,11 @@ select.form-control {
|
||||
.register-progress {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-progress {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -10799,11 +10799,11 @@ select.form-control {
|
||||
.progress-steps {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 50px;
|
||||
gap: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.progress-steps {
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -10850,8 +10850,8 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
.progress-step-item .step-icon {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #e6e6e6;
|
||||
display: flex;
|
||||
@@ -10861,18 +10861,18 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.progress-step-item .step-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.progress-step-item .step-icon .step-icon-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.progress-step-item .step-icon .step-icon-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
.progress-step-item.active .step-icon {
|
||||
@@ -10902,11 +10902,11 @@ select.form-control {
|
||||
}
|
||||
|
||||
.register-form-container {
|
||||
padding: 50px 45px;
|
||||
padding: 30px 30px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.register-form-container {
|
||||
padding: 30px 20px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
.register-form-container.with-sidebar {
|
||||
@@ -10975,21 +10975,21 @@ select.form-control {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 12px;
|
||||
padding: 50px 40px;
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
gap: 16px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.icon-upload-box {
|
||||
padding: 30px 20px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-preview-area {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.icon-preview-area img {
|
||||
@@ -11033,19 +11033,19 @@ select.form-control {
|
||||
text-align: center;
|
||||
}
|
||||
.icon-upload-info .upload-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #515961;
|
||||
margin: 0 0 11px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.icon-upload-info .upload-hint {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
margin: 0;
|
||||
}
|
||||
.icon-upload-info .upload-hint strong {
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ip-input-row {
|
||||
@@ -11077,14 +11077,15 @@ select.form-control {
|
||||
}
|
||||
|
||||
.btn-add-ip {
|
||||
width: 158px;
|
||||
height: 60px;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: #3ba4ed;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
@@ -11094,18 +11095,18 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.btn-add-ip {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
font-size: 14px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-add-ip {
|
||||
width: 89px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12765,37 +12766,38 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
.app-info-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 32px;
|
||||
gap: 20px;
|
||||
padding: 0;
|
||||
padding-top: 27px;
|
||||
margin-bottom: 64px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-card {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
gap: 24px;
|
||||
padding: 16px 0;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-icon {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 16px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #F8FAFC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 87px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.app-info-icon .app-icon-image {
|
||||
@@ -12814,14 +12816,14 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 24px;
|
||||
padding: 3px 12px;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
}
|
||||
@@ -12843,46 +12845,46 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.app-info-name {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-name {
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-description {
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
color: #515151;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-description {
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.apikey-info-section {
|
||||
background: #F6F9FB;
|
||||
border-radius: 12px;
|
||||
padding: 48px 40px;
|
||||
margin-bottom: 40px;
|
||||
padding: 24px 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.apikey-info-section {
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -12892,6 +12894,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12910,20 +12913,20 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
.info-label {
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.info-label {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: #1A1A2E;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -12937,19 +12940,20 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
padding: 0 24px;
|
||||
background: #DDDDDD;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
color: #515151;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: #F8FAFC;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #1A1A2E;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.info-value-box {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 0 16px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.info-value-box.with-copy {
|
||||
@@ -12958,7 +12962,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
|
||||
.info-row-with-action .info-value {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -12967,14 +12971,14 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
height: 60px;
|
||||
width: 158px;
|
||||
padding: 0 24px;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
background: #A4D6EA;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@@ -12985,9 +12989,9 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-copy-action {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 0 16px;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user