현성필
620 lines
11 KiB
SCSS
620 lines
11 KiB
SCSS
@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 .apikey-container;
|
|
padding: $spacing-2xl $spacing-lg;
|
|
|
|
@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;
|
|
padding-bottom: $spacing-md;
|
|
}
|
|
|
|
// 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: $spacing-xl;
|
|
padding: 0;
|
|
padding-top: 27px;
|
|
margin-bottom: $spacing-4xl;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: $spacing-lg 0;
|
|
gap: $spacing-lg;
|
|
}
|
|
}
|
|
|
|
.app-info-icon {
|
|
flex-shrink: 0;
|
|
width: 160px;
|
|
height: 160px;
|
|
border-radius: $border-radius-xl;
|
|
overflow: hidden;
|
|
background: $gray-bg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 87px;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.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-md;
|
|
}
|
|
|
|
.app-status-badge {
|
|
display: inline-block;
|
|
padding: $spacing-xs $spacing-lg;
|
|
border-radius: $border-radius-full;
|
|
font-size: $font-size-sm;
|
|
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: 24px;
|
|
font-weight: $font-weight-bold;
|
|
color: $text-dark;
|
|
margin: 0;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.app-info-description {
|
|
font-size: 18px;
|
|
color: #515151;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
|
|
// ====================================
|
|
// API Key Info Section
|
|
// For credential details display
|
|
// Figma Design: node 985-1365
|
|
// ====================================
|
|
|
|
.apikey-info-section {
|
|
background: #F6F9FB;
|
|
border-radius: $border-radius-lg;
|
|
padding: $spacing-3xl $spacing-2xl;
|
|
margin-bottom: $spacing-2xl;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
padding: $spacing-lg;
|
|
}
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-xl;
|
|
margin-bottom: $spacing-xl;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: $spacing-sm;
|
|
}
|
|
}
|
|
|
|
.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: 20px;
|
|
font-weight: $font-weight-bold;
|
|
color: #212529;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
width: 100%;
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
font-size: $font-size-base;
|
|
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: 60px;
|
|
padding: 0 $spacing-lg;
|
|
background: #DDDDDD;
|
|
border-radius: $border-radius-lg;
|
|
font-size: 20px;
|
|
color: #515151;
|
|
text-align: center;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
height: 50px;
|
|
font-size: $font-size-base;
|
|
padding: 0 $spacing-md;
|
|
}
|
|
|
|
&.with-copy {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
// Client ID Row with Copy Button
|
|
.info-row-with-action {
|
|
.info-value {
|
|
display: flex;
|
|
gap: $spacing-md;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.btn-copy-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: $spacing-xs;
|
|
height: 60px;
|
|
width: 158px;
|
|
padding: 0 $spacing-lg;
|
|
background: #A4D6EA;
|
|
border: none;
|
|
border-radius: $border-radius-lg;
|
|
font-size: 20px;
|
|
font-weight: $font-weight-bold;
|
|
color: $white;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.2s ease;
|
|
|
|
&:hover {
|
|
background: darken(#A4D6EA, 10%);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
height: 50px;
|
|
font-size: $font-size-base;
|
|
padding: 0 $spacing-md;
|
|
}
|
|
}
|
|
|
|
// 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-figma {
|
|
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
|
|
// ====================================
|
|
|
|
.form-actions-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: $spacing-md;
|
|
margin-top: $spacing-2xl;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
flex-direction: column;
|
|
|
|
.btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|