앱 관리
This commit is contained in:
현성필
@@ -0,0 +1,476 @@
|
||||
@charset "utf-8";
|
||||
|
||||
// ====================================
|
||||
// API Key Detail Pages Styles
|
||||
// For appRequestDetail.html and credentialDetail.html
|
||||
// ====================================
|
||||
|
||||
// Container Styles
|
||||
.apikey-detail-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: $spacing-4xl;
|
||||
padding-top: 0;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $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 {
|
||||
display: inline-block;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
border-radius: $border-radius-full;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&.badge-pending {
|
||||
background-color: #FFF3CD;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
&.badge-approved {
|
||||
background-color: #D4EDDA;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
&.badge-rejected {
|
||||
background-color: #F8D7DA;
|
||||
color: #721C24;
|
||||
}
|
||||
}
|
||||
|
||||
// Detail Section
|
||||
.detail-section {
|
||||
background: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-4xl;
|
||||
margin-bottom: $spacing-lg;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin-bottom: $spacing-lg;
|
||||
padding-bottom: $spacing-md;
|
||||
border-bottom: 2px solid $border-gray;
|
||||
}
|
||||
|
||||
// Detail Grid
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: $spacing-lg;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
|
||||
&.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
.app-icon-display {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.app-icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 2px solid $border-gray;
|
||||
}
|
||||
|
||||
.app-icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $gray-bg;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 2px dashed $text-light;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
// IP List
|
||||
.ip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.ip-tag {
|
||||
display: inline-block;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
background-color: $light-bg;
|
||||
color: $secondary-blue;
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-family: $font-family-mono;
|
||||
}
|
||||
|
||||
// Credential Code
|
||||
.credential-code {
|
||||
display: inline-block;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
background-color: $gray-bg;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-sm;
|
||||
font-family: $font-family-mono;
|
||||
font-size: $font-size-sm;
|
||||
color: $secondary-blue;
|
||||
}
|
||||
|
||||
// Secret Box
|
||||
.secret-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
background-color: $primary-blue;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-blue;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
align-self: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Status Indicator
|
||||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
border-radius: $border-radius-xl;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&.status-active {
|
||||
background-color: #D4EDDA;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
&.status-inactive {
|
||||
background-color: #F8D7DA;
|
||||
color: #721C24;
|
||||
}
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: $border-radius-circle;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
// API Detail List
|
||||
.api-detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.api-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-md $spacing-lg;
|
||||
background: $white;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-md;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-blue;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-md;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.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-list-item .api-name {
|
||||
flex: 1;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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
|
||||
.empty-state {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 48px $spacing-lg;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-base;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
// Action Buttons
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $spacing-4xl;
|
||||
padding-top: $spacing-4xl;
|
||||
border-top: 1px solid $border-gray;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-action,
|
||||
.btn-secondary {
|
||||
padding: $spacing-md $spacing-4xl;
|
||||
border-radius: $border-radius-md;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
&.btn-primary {
|
||||
background-color: $primary-blue;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-info {
|
||||
background-color: $accent-cyan;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($accent-cyan, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
background-color: $accent-orange;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($accent-orange, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-cancel {
|
||||
background-color: $gray-bg;
|
||||
color: $text-dark;
|
||||
border: 1px solid $border-gray;
|
||||
|
||||
&:hover {
|
||||
background-color: $border-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: $spacing-md $spacing-4xl;
|
||||
border-radius: $border-radius-md;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background-color: #FEE2E2;
|
||||
color: #991B1B;
|
||||
border: 1px solid #FCA5A5;
|
||||
|
||||
&:hover {
|
||||
background-color: #FCA5A5;
|
||||
color: #7F1D1D;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user