agmission/Development/client/src/app/settings/api-keys/api-key-manager/api-key-manager.component.css
Devin Major 9303274349
Some checks are pending
Server Tests / Mocha – Unit & Utility Tests (push) Waiting to run
all Data Export API changes from April 28 2026
2026-04-28 15:44:46 -04:00

174 lines
2.7 KiB
CSS

/* New Key Banner */
.new-key-banner {
background: #e8f5e9;
border: 1px solid #A5D6A7;
border-radius: 0.25rem;
padding: 1rem;
margin-bottom: 1rem;
}
.new-key-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-size: 0.95rem;
}
.new-key-header i {
font-size: 1.2rem;
color: #2E7D32;
}
.new-key-value-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.new-key-value {
flex: 1 1 auto;
background: #fff;
border: 1px solid #A5D6A7;
border-radius: 0.2rem;
padding: 0.35rem 0.6rem;
font-family: 'Courier New', monospace;
font-size: 0.82rem;
word-break: break-all;
color: #2E7D32;
}
/* Table */
.revoked-row {
opacity: 0.55;
}
.badge {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 600;
}
.badge-active {
background: #4CAF50;
border: 1px solid #2E7D32;
color: #fff;
}
.badge-revoked {
background: #f44336;
border: 1px solid #d32f2f;
color: #fff;
}
.empty-message {
text-align: center;
padding: 2rem 1rem;
color: #777;
}
/* Row expansion */
.row-expansion > td {
background: #f9f9f9;
border-top: none;
padding: 0.75rem 1rem 1rem 1rem;
}
.expansion-grid {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
width: 100%;
}
.expansion-item {
display: flex;
flex-direction: column;
flex: 1;
min-width: 8.75rem;
}
.expansion-label {
font-size: 0.75rem;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
}
.expansion-value {
font-size: 0.9rem;
color: #333;
}
.expansion-actions {
justify-content: flex-end;
align-self: center;
}
@media (max-width: 767px) {
.expansion-grid {
flex-direction: column;
gap: 0;
}
.expansion-item {
flex-direction: row;
align-items: baseline;
flex: unset;
min-width: unset;
padding: 0.5em 0;
border-bottom: 1px solid #f0f0f0;
}
.expansion-item:last-child {
border-bottom: none;
}
.expansion-label {
display: inline-block;
min-width: 40%;
margin-bottom: 0;
margin-right: 1em;
vertical-align: top;
}
.expansion-value {
display: inline-block;
vertical-align: top;
}
}
/* Create dialog */
.create-form {
padding: 1rem;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
}
.form-field {
flex: 1;
min-width: 12.5rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.form-field label {
font-family: "Roboto", "Helvetica Neue", sans-serif;
font-size: 0.75rem;
font-weight: 500;
color: #757575;
text-transform: uppercase;
letter-spacing: 0.03em;
}