hong
1316 lines
24 KiB
SCSS
1316 lines
24 KiB
SCSS
@use '../abstracts/variables' as *;
|
||
@use '../abstracts/color-functions' as *;
|
||
@use '../abstracts/mixins' as *;
|
||
@use '../components/apikey-common' as *;
|
||
|
||
@charset "utf-8";
|
||
|
||
// ====================================
|
||
// API Key Detail Pages Styles
|
||
// For appRequestDetail.html and credentialDetail.html
|
||
// Uses common styles from components/_apikey-common.scss
|
||
// ====================================
|
||
|
||
// Container Styles - extends common
|
||
.apikey-detail-container {
|
||
@extend .common-container;
|
||
padding: $spacing-2xl 0;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
padding: $spacing-lg $spacing-md;
|
||
}
|
||
}
|
||
|
||
.register-header {
|
||
text-align: center;
|
||
margin-bottom: $spacing-5xl;
|
||
|
||
h1 {
|
||
font-size: $font-size-4xl;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-dark;
|
||
margin-bottom: $spacing-sm;
|
||
}
|
||
|
||
.header-description {
|
||
font-size: $font-size-base;
|
||
color: $text-gray;
|
||
}
|
||
}
|
||
|
||
// Status Section
|
||
.status-section {
|
||
text-align: center;
|
||
margin-bottom: $spacing-4xl;
|
||
}
|
||
|
||
// Status Badge - extends common with light style
|
||
.status-badge {
|
||
@extend .apikey-status-badge;
|
||
|
||
&.badge-pending {
|
||
background-color: #FFF3CD;
|
||
color: #856404;
|
||
}
|
||
|
||
&.badge-approved {
|
||
background-color: #D4EDDA;
|
||
color: #155724;
|
||
}
|
||
|
||
&.badge-rejected {
|
||
background-color: #F8D7DA;
|
||
color: #721C24;
|
||
}
|
||
}
|
||
|
||
// Detail Section - extends common
|
||
.detail-section {
|
||
@extend .apikey-detail-section;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: $font-size-xl;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-dark;
|
||
margin-bottom: $spacing-lg;
|
||
}
|
||
|
||
// Detail Grid - extends common
|
||
.detail-grid {
|
||
@extend .apikey-detail-grid;
|
||
}
|
||
|
||
.detail-item {
|
||
@extend .apikey-detail-item;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-semibold;
|
||
color: $text-gray;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: $font-size-base;
|
||
color: $text-dark;
|
||
word-break: break-word;
|
||
}
|
||
|
||
// App Icon - extends common
|
||
.app-icon-display {
|
||
@extend .apikey-icon-display;
|
||
}
|
||
|
||
.app-icon-image {
|
||
@extend .apikey-icon-image;
|
||
}
|
||
|
||
.app-icon-placeholder {
|
||
@extend .apikey-icon-placeholder;
|
||
}
|
||
|
||
// IP List - extends common
|
||
.ip-list {
|
||
@extend .apikey-ip-list;
|
||
}
|
||
|
||
.ip-tag {
|
||
@extend .apikey-ip-tag;
|
||
}
|
||
|
||
// Credential Code - extends common
|
||
.credential-code {
|
||
@extend .apikey-credential-code;
|
||
}
|
||
|
||
// Secret Box - extends common
|
||
.secret-box {
|
||
@extend .apikey-secret-box;
|
||
}
|
||
|
||
// Copy Button - extends common
|
||
.btn-copy {
|
||
@extend .apikey-btn-copy;
|
||
}
|
||
|
||
// Status Indicator - extends common
|
||
.status-indicator {
|
||
@extend .apikey-status-indicator;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: $border-radius-circle;
|
||
background-color: currentColor;
|
||
}
|
||
|
||
// API Detail List - extends common
|
||
.api-detail-list {
|
||
@extend .apikey-api-list;
|
||
}
|
||
|
||
.api-list-item {
|
||
@extend .apikey-api-item;
|
||
|
||
.api-name {
|
||
flex: 1;
|
||
font-size: $font-size-base;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-dark;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.api-method {
|
||
display: inline-block;
|
||
padding: $spacing-xs $spacing-md;
|
||
border-radius: $border-radius-sm;
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-bold;
|
||
font-family: $font-family-mono;
|
||
min-width: 80px;
|
||
text-align: center;
|
||
|
||
&.method-get {
|
||
background-color: #D1FAE5;
|
||
color: #065F46;
|
||
}
|
||
|
||
&.method-post {
|
||
background-color: #DBEAFE;
|
||
color: #1E40AF;
|
||
}
|
||
|
||
&.method-put {
|
||
background-color: #FEF3C7;
|
||
color: #92400E;
|
||
}
|
||
|
||
&.method-delete {
|
||
background-color: #FEE2E2;
|
||
color: #991B1B;
|
||
}
|
||
|
||
&.method-other {
|
||
background-color: $border-gray;
|
||
color: $text-dark;
|
||
}
|
||
}
|
||
|
||
.api-status {
|
||
padding: $spacing-xs $spacing-md;
|
||
border-radius: $border-radius-lg;
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-semibold;
|
||
|
||
&.status-pending {
|
||
background-color: #FFF3CD;
|
||
color: #856404;
|
||
}
|
||
|
||
&.status-active {
|
||
background-color: #D4EDDA;
|
||
color: #155724;
|
||
}
|
||
}
|
||
|
||
// History Table
|
||
.history-table-wrapper {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.history-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
|
||
th {
|
||
background-color: $gray-bg;
|
||
padding: $spacing-md $spacing-md;
|
||
text-align: left;
|
||
font-weight: $font-weight-semibold;
|
||
color: $text-gray;
|
||
border-bottom: 2px solid $border-gray;
|
||
}
|
||
|
||
td {
|
||
padding: $spacing-md;
|
||
border-bottom: 1px solid $border-gray;
|
||
}
|
||
}
|
||
|
||
.history-status {
|
||
display: inline-block;
|
||
padding: $spacing-xs $spacing-md;
|
||
background-color: $light-bg;
|
||
color: $secondary-blue;
|
||
border-radius: $border-radius-lg;
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-semibold;
|
||
}
|
||
|
||
// Empty State - extends common
|
||
.empty-state {
|
||
@extend .apikey-empty-state;
|
||
grid-column: 1 / -1;
|
||
padding: 48px $spacing-lg;
|
||
}
|
||
|
||
// Action Buttons - extends common
|
||
.detail-actions {
|
||
@extend .apikey-form-actions;
|
||
}
|
||
|
||
// Note: Button styles now in components/_buttons.scss
|
||
// Keeping page-specific overrides only
|
||
.btn-action,
|
||
.btn-secondary,
|
||
.btn-cancel {
|
||
@media (max-width: $breakpoint-sm) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
// ====================================
|
||
// App Info Card (Figma Design)
|
||
// For credentialDetail.html and appRequestDetail.html
|
||
// ====================================
|
||
|
||
.app-info-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
padding: 0;
|
||
padding-top: 20px;
|
||
margin-bottom: 30px;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: $spacing-md 0;
|
||
gap: $spacing-md;
|
||
}
|
||
}
|
||
|
||
.app-info-icon {
|
||
flex-shrink: 0;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: $border-radius-lg;
|
||
overflow: hidden;
|
||
background: $gray-bg;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 40px;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.app-icon-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.app-icon-placeholder {
|
||
color: $text-light;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.app-info-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: $spacing-sm;
|
||
}
|
||
|
||
.app-status-badge {
|
||
display: inline-block;
|
||
padding: 3px 12px;
|
||
border-radius: $border-radius-full;
|
||
font-size: 12px;
|
||
font-weight: $font-weight-semibold;
|
||
width: fit-content;
|
||
|
||
&.status-approved {
|
||
background-color: #0049b4;
|
||
color: $white;
|
||
}
|
||
|
||
&.status-pending {
|
||
background-color: #FFF3CD;
|
||
color: #856404;
|
||
}
|
||
|
||
&.status-inactive {
|
||
background-color: $border-gray;
|
||
color: $text-gray;
|
||
}
|
||
|
||
&.status-rejected {
|
||
background-color: #F8D7DA;
|
||
color: #721C24;
|
||
}
|
||
}
|
||
|
||
.app-info-name {
|
||
font-size: 18px;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-dark;
|
||
margin: 0;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.app-info-description {
|
||
font-size: 14px;
|
||
color: #515151;
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// ====================================
|
||
// API Key Info Section
|
||
// For credential details display
|
||
// Figma Design: node 985-1365
|
||
// ====================================
|
||
|
||
.apikey-info-section {
|
||
background: #F6F9FB;
|
||
border-radius: $border-radius-lg;
|
||
padding: 24px 30px;
|
||
margin-bottom: 30px;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 16px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: $spacing-sm;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
.info-row-vertical {
|
||
align-items: flex-start;
|
||
|
||
.info-value {
|
||
width: 100%;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-label {
|
||
flex-shrink: 0;
|
||
width: 140px;
|
||
font-size: 15px;
|
||
font-weight: $font-weight-semibold;
|
||
color: #212529;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.info-value {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: $text-dark;
|
||
word-break: break-word;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
// Info Value Box Styles (Figma)
|
||
.info-value-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
background: $gray-bg;
|
||
border: 1px solid $border-gray;
|
||
border-radius: $border-radius-md;
|
||
font-size: 14px;
|
||
color: $text-dark;
|
||
text-align: center;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
height: 36px;
|
||
font-size: 14px;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
&.with-copy {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
// Client ID Row with Copy Button
|
||
.info-row-with-action {
|
||
.info-value {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.btn-copy-action {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: $spacing-xs;
|
||
height: 40px;
|
||
width: auto;
|
||
padding: 0 16px;
|
||
background: #A4D6EA;
|
||
border: none;
|
||
border-radius: $border-radius-md;
|
||
font-size: 14px;
|
||
font-weight: $font-weight-semibold;
|
||
color: $white;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background 0.2s ease;
|
||
|
||
&:hover {
|
||
background: darken(#A4D6EA, 10%);
|
||
}
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
height: 36px;
|
||
font-size: 13px;
|
||
padding: 0 12px;
|
||
}
|
||
}
|
||
|
||
// Client Secret View Button
|
||
.btn-view-secret {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: $spacing-sm;
|
||
width: 100%;
|
||
height: 60px;
|
||
background: #3BA4ED;
|
||
border: none;
|
||
border-radius: $border-radius-lg;
|
||
font-size: 20px;
|
||
font-weight: $font-weight-bold;
|
||
color: $white;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
|
||
&:hover {
|
||
background: darken(#3BA4ED, 10%);
|
||
}
|
||
|
||
svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
max-width: 100%;
|
||
height: 50px;
|
||
font-size: $font-size-base;
|
||
}
|
||
}
|
||
|
||
// API List Box (White background)
|
||
.api-list-box {
|
||
width: 100%;
|
||
background: $white;
|
||
border: 1px solid #DADADA;
|
||
border-radius: $border-radius-lg;
|
||
padding: $spacing-lg;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
max-width: 100%;
|
||
padding: $spacing-md;
|
||
}
|
||
}
|
||
|
||
// API List Item (Figma style)
|
||
.api-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: $spacing-md 0;
|
||
border-bottom: 1px solid #DADADA;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.api-item-name {
|
||
font-size: 18px;
|
||
color: #000;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
font-size: $font-size-base;
|
||
}
|
||
}
|
||
|
||
.api-item-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 100px;
|
||
height: 30px;
|
||
padding: 0 $spacing-lg;
|
||
background: #ECEFF4;
|
||
border-radius: $border-radius-full;
|
||
font-size: $font-size-base;
|
||
color: #515151;
|
||
|
||
@media (max-width: $breakpoint-sm) {
|
||
min-width: 80px;
|
||
font-size: $font-size-sm;
|
||
padding: 0 $spacing-md;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ====================================
|
||
// .form-actions-center moved to components/_forms.scss
|
||
|
||
// ====================================
|
||
// Mobile Responsive Styles
|
||
// Figma Design: node 1290-4563
|
||
// 모바일 화면 (360px 기준)
|
||
// ====================================
|
||
|
||
@include respond-to('sm') {
|
||
|
||
// Container mobile padding
|
||
.apikey-detail-container {
|
||
padding: 0 !important;
|
||
max-width: 100%;
|
||
}
|
||
|
||
// Register Title Bar - 모바일에서 하단 border 추가
|
||
.register-title-bar {
|
||
padding: 20px;
|
||
margin-bottom: 0;
|
||
border-bottom: 1px solid #dadada;
|
||
|
||
.register-title {
|
||
font-size: 16px;
|
||
font-weight: $font-weight-bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.register-subtitle {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
// App Info Card - 모바일 최적화
|
||
.app-info-card {
|
||
flex-direction: row !important;
|
||
align-items: flex-start !important;
|
||
text-align: left !important;
|
||
padding: 20px;
|
||
gap: 16px;
|
||
margin-bottom: 0;
|
||
background: $white;
|
||
|
||
.app-info-icon {
|
||
width: 56px !important;
|
||
height: 56px !important;
|
||
min-width: 56px;
|
||
margin-left: 0;
|
||
border-radius: 8px;
|
||
|
||
.app-icon-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.app-icon-placeholder {
|
||
svg {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.app-info-content {
|
||
gap: 4px;
|
||
}
|
||
|
||
.app-status-badge {
|
||
padding: 4px 12px;
|
||
font-size: 12px;
|
||
border-radius: 20px;
|
||
|
||
&.status-approved {
|
||
background-color: #0049b4;
|
||
color: $white;
|
||
}
|
||
}
|
||
|
||
.app-info-name {
|
||
font-size: 16px !important;
|
||
font-weight: $font-weight-bold;
|
||
}
|
||
|
||
.app-info-description {
|
||
font-size: 12px !important;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
// API Key Info Section - 모바일 스타일
|
||
.apikey-info-section {
|
||
background: #f6f9fb;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin: 0px;
|
||
}
|
||
|
||
// Info Row - 모바일 레이아웃
|
||
.info-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px !important;
|
||
font-weight: $font-weight-bold;
|
||
color: #212529;
|
||
width: 100%;
|
||
}
|
||
|
||
.info-value {
|
||
width: 100%;
|
||
}
|
||
|
||
// Info Value Box - 모바일 사이즈
|
||
.info-value-box {
|
||
height: 40px !important;
|
||
font-size: 14px !important;
|
||
background: #f2f2f2;
|
||
border: 1px solid #dadada;
|
||
border-radius: 8px;
|
||
padding: 0 12px;
|
||
|
||
&.with-copy {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
// Client ID Row with Copy Button - 모바일
|
||
.info-row-with-action {
|
||
.info-value {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
// Copy Button - 모바일 사이즈 (Figma: 89px width)
|
||
.btn-copy-action {
|
||
width: 89px !important;
|
||
min-width: 89px;
|
||
height: 40px !important;
|
||
font-size: 14px !important;
|
||
font-weight: $font-weight-bold;
|
||
padding: 0 12px;
|
||
background: #a4d6ea;
|
||
border-radius: 8px;
|
||
|
||
&:hover {
|
||
background: darken(#a4d6ea, 10%);
|
||
}
|
||
}
|
||
|
||
// Client Secret View Button - 모바일 (full width)
|
||
.btn-view-secret {
|
||
width: 100% !important;
|
||
height: 40px !important;
|
||
font-size: 14px !important;
|
||
font-weight: $font-weight-bold;
|
||
background: #3ba4ed;
|
||
border-radius: 8px;
|
||
gap: 8px;
|
||
|
||
svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
&:hover {
|
||
background: darken(#3ba4ed, 10%);
|
||
}
|
||
}
|
||
|
||
// Revealed Secret Box - 모바일 스타일
|
||
#revealedSecretBox {
|
||
width: 100%;
|
||
|
||
.info-row-with-action {
|
||
.info-value {
|
||
flex-direction: row;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// API List Box - 모바일
|
||
.api-list-box {
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
// API List Item - 모바일 스타일
|
||
.api-list-item {
|
||
padding: 12px 0;
|
||
|
||
.api-item-name {
|
||
font-size: 14px !important;
|
||
color: #000;
|
||
}
|
||
|
||
.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 - 모바일에서 API 목록
|
||
.info-row-vertical {
|
||
.info-value {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
// Form Actions Center - 모바일 하단 버튼 (Figma: 144px × 40px)
|
||
.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;
|
||
|
||
.btn-submit,
|
||
.btn {
|
||
width: 144px !important;
|
||
height: 40px !important;
|
||
min-height: 40px;
|
||
padding: 8px 10px !important;
|
||
font-size: 14px !important;
|
||
font-weight: $font-weight-bold;
|
||
border-radius: 8px !important;
|
||
flex-shrink: 0;
|
||
|
||
&.btn-secondary {
|
||
background-color: #e5e7eb !important;
|
||
color: #5f666c !important;
|
||
border: none !important;
|
||
}
|
||
|
||
&.btn-primary {
|
||
background-color: #0049b4 !important;
|
||
color: $white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
&.btn-danger {
|
||
// 삭제 버튼은 3개 버튼일 때 숨김 처리하거나 별도 레이아웃 필요
|
||
// 모바일에서는 2개 버튼만 표시되는 경우 (이전, 수정)
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// =============================================================================
|
||
// NEW FIGMA DETAIL WRAP STYLES (.detail-wrap)
|
||
// =============================================================================
|
||
.detail-wrap {
|
||
width: 100%;
|
||
font-family: 'Spoqa Han Sans Neo', 'Noto Sans KR', sans-serif;
|
||
|
||
// Title
|
||
.dt-title {
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
color: #000000;
|
||
margin: 0 0 28px 0;
|
||
text-align: left;
|
||
font-family: 'Spoqa Han Sans Neo', 'Noto Sans KR', sans-serif;
|
||
|
||
@media (max-width: 768px) {
|
||
font-size: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
// App Card Header (Figma 240:642)
|
||
.dt-app-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
background: #ffffff;
|
||
border: 1px solid #dfdfdf;
|
||
border-radius: 20px;
|
||
box-shadow: 0px 4px 13.45px rgba(192, 192, 192, 0.25);
|
||
padding: 20px 24px;
|
||
margin-bottom: 24px;
|
||
box-sizing: border-box;
|
||
|
||
@media (max-width: 768px) {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
}
|
||
}
|
||
|
||
.dt-app-icon-box {
|
||
width: 68px;
|
||
height: 67px;
|
||
background: #f9f9f9;
|
||
border: 1px solid #dee3e7;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
|
||
img,
|
||
svg {
|
||
width: 46px;
|
||
height: 46px;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.dt-app-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.dt-app-header-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.dt-app-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #000;
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.dt-status-badge {
|
||
height: 20px;
|
||
border-radius: 5px;
|
||
padding: 0 8px;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
white-space: nowrap;
|
||
|
||
&.status-approved,
|
||
&.status-completed {
|
||
background: #1b4ab7;
|
||
color: #ffffff;
|
||
}
|
||
|
||
&.status-pending {
|
||
background: #fdf4d4;
|
||
color: #ef9546;
|
||
}
|
||
|
||
&.status-rejected {
|
||
background: #fef2f2;
|
||
color: #ef4444;
|
||
border: 1px solid #fee2e2;
|
||
}
|
||
}
|
||
|
||
.dt-app-desc {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
// Main details card wrapper
|
||
.dt-info-container {
|
||
background: #ffffff;
|
||
border: 1px solid #dfdfdf;
|
||
border-radius: 30px;
|
||
box-shadow: 0px 4px 26.9px 2px rgba(192, 192, 192, 0.25);
|
||
padding: 40px;
|
||
margin-bottom: 35px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 28px;
|
||
box-sizing: border-box;
|
||
|
||
@media (max-width: 768px) {
|
||
padding: 24px 20px;
|
||
border-radius: 20px;
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
// Row of details
|
||
.dt-row {
|
||
display: flex;
|
||
gap: 28px;
|
||
width: 100%;
|
||
|
||
@media (max-width: 768px) {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
.dt-col {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.dt-label {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #000000;
|
||
margin: 0;
|
||
}
|
||
|
||
.dt-input-group {
|
||
display: flex;
|
||
gap: 7px;
|
||
width: 100%;
|
||
}
|
||
|
||
.dt-input-box {
|
||
flex: 1;
|
||
height: 47px;
|
||
background: #ededed;
|
||
border: 1px solid #dfdfdf;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
font-size: 16px;
|
||
font-weight: 300;
|
||
color: #0d0e11;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
&.text-secret {
|
||
letter-spacing: 2px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
padding: 0 14px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
// Action Buttons inside input-group (Copy, view, etc.)
|
||
.dt-btn-copy {
|
||
height: 47px;
|
||
background: #d5efff;
|
||
border: none;
|
||
border-radius: 10px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 0 20px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #2a69de;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
flex-shrink: 0;
|
||
|
||
&:hover {
|
||
background: darken(#d5efff, 5%);
|
||
}
|
||
|
||
svg {
|
||
color: #2a69de;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
padding: 0 12px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.dt-btn-lookup {
|
||
width: 100%;
|
||
height: 47px;
|
||
background: #2a69de;
|
||
border: none;
|
||
border-radius: 10px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
|
||
&:hover {
|
||
background: #1b4ab7;
|
||
}
|
||
|
||
svg {
|
||
color: #ffffff;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
// API List scroll box
|
||
.dt-api-list-box {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border: 1px solid #dfdfdf;
|
||
border-radius: 10px;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
max-height: 240px;
|
||
overflow-y: auto;
|
||
|
||
// Custom scrollbar
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
}
|
||
|
||
.dt-api-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid #efefef;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.dt-api-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #0d0e11;
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-right: 20px;
|
||
flex: 1;
|
||
|
||
@media (max-width: 768px) {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.dt-api-status-badge {
|
||
height: 18px;
|
||
background: #ecf0fa;
|
||
border: 1px solid #4685ef;
|
||
border-radius: 17px;
|
||
padding: 0 10px;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: #2a69de;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
white-space: nowrap;
|
||
|
||
&.status-pending {
|
||
background: #eceff4;
|
||
border: 1px solid #dee3e7;
|
||
color: #515151;
|
||
}
|
||
}
|
||
|
||
.dt-empty-message {
|
||
padding: 30px;
|
||
text-align: center;
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
margin: 0;
|
||
}
|
||
|
||
// Footer Buttons layout
|
||
.dt-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 10px;
|
||
|
||
@media (max-width: 768px) {
|
||
flex-direction: column;
|
||
width: 100%;
|
||
|
||
.dt-btn-gray,
|
||
.dt-btn-red,
|
||
.dt-btn-blue {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dt-btn-gray {
|
||
width: 156px;
|
||
height: 45px;
|
||
background: #bdc7cf;
|
||
border: none;
|
||
border-radius: 10px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: background 0.2s ease;
|
||
|
||
&:hover {
|
||
background: darken(#bdc7cf, 8%);
|
||
}
|
||
}
|
||
|
||
.dt-btn-red {
|
||
width: 156px;
|
||
height: 45px;
|
||
background: #ff615c;
|
||
border: none;
|
||
border-radius: 10px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
|
||
&:hover {
|
||
background: darken(#ff615c, 8%);
|
||
}
|
||
}
|
||
|
||
.dt-btn-blue {
|
||
width: 156px;
|
||
height: 45px;
|
||
background: #2a69de;
|
||
border: none;
|
||
border-radius: 10px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: background 0.2s ease;
|
||
|
||
&:hover {
|
||
background: #1b4ab7;
|
||
}
|
||
}
|
||
} |