/* Azure Storage Dashboard - MCP Apps UI Styles */
:root {
--bg: #1e1e1e;
--surface: #252526;
--surface-alt: #2d2d2d;
--border: #3c3c3c;
--border-hover: #007acc;
--text: #cccccc;
--text-bright: #ffffff;
--muted: #858585;
--accent: #0078d4;
--accent-hover: #106ebe;
--accent-subtle: rgba(0, 120, 212, 0.15);
--success: #4ec9b0;
--warning: #dcdcaa;
--error: #f44747;
--danger: #d13438;
--danger-hover: #a4262c;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: "Cascadia Code", "Fira Code", Consolas, monospace;
--radius: 6px;
--radius-sm: 3px;
}
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--surface: #f5f5f5;
--surface-alt: #ebebeb;
--border: #e0e0e0;
--border-hover: #0078d4;
--text: #1e1e1e;
--text-bright: #000000;
--muted: #666666;
--accent-subtle: rgba(0, 120, 212, 0.1);
--danger: #d13438;
--danger-hover: #a4262c;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font);
font-size: 13px;
line-height: 1.5;
background: var(--bg);
color: var(--text);
padding: 16px;
overflow-x: hidden;
}
.hidden {
display: none !important;
}
/* --- Loading spinner --- */
#loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 48px 0;
color: var(--muted);
}
.spinner {
width: 28px;
height: 28px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* --- Error view --- */
#error-view {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
max-width: 600px;
width: 90%;
}
.error-message {
padding: 12px 16px;
background: rgba(244, 71, 71, 0.1);
border: 1px solid var(--error);
border-radius: var(--radius);
color: var(--error);
font-size: 12px;
}
/* --- Breadcrumb --- */
#breadcrumb {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 0;
margin-bottom: 12px;
font-size: 12px;
}
.breadcrumb-item {
color: var(--muted);
font-weight: 500;
}
.breadcrumb-item.active {
color: var(--text-bright);
font-weight: 600;
}
.breadcrumb-item.clickable {
color: var(--accent);
cursor: pointer;
}
.breadcrumb-item.clickable:hover {
text-decoration: underline;
}
.breadcrumb-sep {
color: var(--muted);
margin: 0 2px;
}
/* --- Dashboard header --- */
#dashboard-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.azure-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: var(--text-bright);
}
.header-sub {
font-size: 11px;
color: var(--muted);
font-family: var(--mono);
}
/* --- Summary bar --- */
#summary-bar {
display: flex;
gap: 16px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 14px;
flex-wrap: wrap;
}
.summary-stat {
display: flex;
align-items: baseline;
gap: 5px;
}
.summary-value {
font-size: 18px;
font-weight: 700;
color: var(--accent);
}
.summary-label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* --- Account cards grid --- */
#accounts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
}
.account-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 14px 16px;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.account-card:hover {
border-color: var(--border-hover);
box-shadow: 0 2px 8px rgba(0, 120, 212, 0.15);
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 8px;
}
.card-name {
font-size: 14px;
font-weight: 600;
color: var(--text-bright);
font-family: var(--mono);
}
.card-rg {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.card-arrow {
color: var(--muted);
font-size: 16px;
flex-shrink: 0;
margin-top: 2px;
}
.card-body {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 10px;
border-radius: 10px;
background: var(--surface-alt);
color: var(--muted);
border: 1px solid var(--border);
white-space: nowrap;
}
.badge-location {
color: var(--text-bright);
border-color: var(--accent);
}
.card-stats {
display: flex;
gap: 12px;
font-size: 11px;
color: var(--muted);
}
.card-stat strong {
color: var(--text);
}
.card-tags {
display: flex;
gap: 4px;
margin-top: 6px;
flex-wrap: wrap;
}
.tag {
padding: 1px 6px;
font-size: 9px;
background: var(--accent-subtle);
color: var(--accent);
border-radius: var(--radius-sm);
}
/* --- Properties grid --- */
.section-title {
font-size: 13px;
font-weight: 600;
color: var(--text-bright);
margin: 0;
}
.properties-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 20px;
}
.prop-item {
display: flex;
flex-direction: column;
padding: 8px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.prop-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
margin-bottom: 2px;
}
.prop-value {
font-size: 12px;
color: var(--text-bright);
font-family: var(--mono);
word-break: break-all;
}
.prop-value.success {
color: var(--success);
}
.prop-value.warning {
color: var(--warning);
}
.prop-value.error {
color: var(--error);
}
/* --- Toolbar --- */
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
margin-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.toolbar-actions {
display: flex;
gap: 6px;
}
/* --- Data table (shared for containers + blobs) --- */
.data-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 16px;
}
.data-table th {
background: var(--surface-alt);
text-align: left;
padding: 8px 12px;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
border-bottom: 1px solid var(--border);
}
.data-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover td {
background: var(--accent-subtle);
}
.data-table .actions-cell {
white-space: nowrap;
display: flex;
gap: 4px;
}
.link-text {
font-family: var(--mono);
font-weight: 500;
color: var(--accent);
cursor: pointer;
}
.link-text:hover {
text-decoration: underline;
}
.blob-name {
font-family: var(--mono);
font-weight: 500;
color: var(--text-bright);
word-break: break-all;
}
/* --- Empty state --- */
.empty-state {
padding: 32px 16px;
text-align: center;
color: var(--muted);
font-size: 13px;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--radius);
}
/* --- Buttons --- */
.btn {
padding: 5px 12px;
font-size: 11px;
font-family: var(--font);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.1s;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: var(--accent);
color: #ffffff;
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
background: var(--surface-alt);
}
.btn-danger {
background: var(--danger);
color: #ffffff;
}
.btn-danger:hover:not(:disabled) {
background: var(--danger-hover);
}
.btn-sm {
padding: 3px 8px;
font-size: 10px;
}
/* --- Modal --- */
.modal-overlay {
/* Wrapper for all modals */
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 100;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 480px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
z-index: 101;
max-height: 90vh;
overflow-y: auto;
}
.modal-content-wide {
max-width: 700px;
}
.modal-content-sm {
max-width: 400px;
}
.modal-title {
font-size: 15px;
font-weight: 600;
color: var(--text-bright);
margin-bottom: 16px;
}
.confirm-danger {
color: var(--danger);
}
.confirm-text {
font-size: 13px;
color: var(--text);
line-height: 1.6;
margin-bottom: 16px;
}
.confirm-text strong {
color: var(--text-bright);
font-family: var(--mono);
}
/* --- Forms --- */
.form-group {
margin-bottom: 14px;
}
.form-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.form-input {
width: 100%;
padding: 6px 10px;
font-size: 12px;
font-family: var(--mono);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
outline: none;
}
.form-input:focus {
border-color: var(--accent);
}
.form-input:read-only {
color: var(--muted);
}
.form-textarea {
resize: vertical;
min-height: 80px;
font-family: var(--mono);
}
.input-error {
border-color: var(--error) !important;
}
select.form-input {
cursor: pointer;
}
.form-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 16px;
}
/* --- Toggle group --- */
.toggle-group {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.toggle-btn {
flex: 1;
padding: 6px 12px;
font-size: 12px;
font-family: var(--font);
background: var(--surface);
border: none;
color: var(--text);
cursor: pointer;
transition: background 0.1s;
}
.toggle-btn:not(:last-child) {
border-right: 1px solid var(--border);
}
.toggle-btn.active {
background: var(--accent);
color: #ffffff;
}
.toggle-btn:hover:not(.active) {
background: var(--surface-alt);
}
/* --- File upload zone --- */
.file-drop-zone {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 24px 16px;
text-align: center;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
position: relative;
}
.file-drop-zone:hover,
.file-drop-zone.drag-over {
border-color: var(--accent);
background: var(--accent-subtle);
}
.file-input-hidden {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
pointer-events: none;
}
.file-drop-text {
color: var(--muted);
font-size: 12px;
}
.file-drop-name {
margin-top: 8px;
font-family: var(--mono);
font-size: 12px;
color: var(--accent);
font-weight: 600;
}
/* --- Blob viewer --- */
.blob-viewer-info {
display: flex;
gap: 16px;
font-size: 11px;
color: var(--muted);
margin-bottom: 12px;
}
.blob-viewer-pre {
padding: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--mono);
font-size: 11px;
color: var(--text);
overflow: auto;
max-height: 400px;
white-space: pre-wrap;
word-break: break-all;
margin-bottom: 8px;
}
/* --- Permissions grid --- */
.permissions-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
.permission-item {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 12px;
}
.permission-item:hover {
border-color: var(--accent);
}
.permission-item input[type="checkbox"] {
accent-color: var(--accent);
}
/* --- SAS Result --- */
.sas-result {
text-align: center;
}
.sas-success-icon {
font-size: 32px;
margin-bottom: 8px;
}
.sas-success-title {
font-size: 14px;
font-weight: 600;
color: var(--success);
margin-bottom: 16px;
}
.sas-field {
margin-bottom: 14px;
text-align: left;
}
.sas-field-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
margin-bottom: 4px;
}
.sas-field-value {
position: relative;
padding: 8px 10px;
padding-right: 70px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--mono);
font-size: 11px;
color: var(--text);
word-break: break-all;
min-height: 36px;
}
.copy-btn {
position: absolute;
top: 4px;
right: 4px;
padding: 3px 8px;
font-size: 10px;
font-family: var(--font);
background: var(--accent);
color: #ffffff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
}
.copy-btn:hover {
background: var(--accent-hover);
}
.copy-btn.copied {
background: var(--success);
}
.sas-info {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 16px;
font-size: 11px;
color: var(--muted);
text-align: left;
}
.sas-info strong {
color: var(--text);
}
.sas-result-actions {
display: flex;
gap: 8px;
justify-content: center;
}
/* --- Status indicator --- */
.status-loading {
display: flex;
align-items: center;
gap: 8px;
padding: 16px;
color: var(--muted);
}
.spinner-sm {
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
