08f8150064
Extracts inline styles from Razor pages into modular CSS files Adds new CSS files for components and specific page styles Improves code organization and maintainability by separating styling concerns Updates layout to include new CSS files and optional style sections
120 lines
2.1 KiB
CSS
120 lines
2.1 KiB
CSS
/* Azure Pages Styles */
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb {
|
|
font-size: 12px;
|
|
color: var(--muted-color);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumb .separator {
|
|
margin: 0 6px;
|
|
color: var(--muted-color);
|
|
}
|
|
|
|
/* Folder Grid */
|
|
.folder-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.folder-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
background: var(--menu-bg);
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.folder-item:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.folder-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.folder-name {
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Container & File Icons */
|
|
.container-icon, .file-icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Blob Name */
|
|
.blob-name {
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Header Meta */
|
|
.header-meta {
|
|
float: right;
|
|
font-weight: normal;
|
|
font-size: 11px;
|
|
color: var(--muted-color);
|
|
}
|
|
|
|
/* Tier Badges */
|
|
.badge-tier {
|
|
font-size: 9px;
|
|
padding: 2px 6px;
|
|
background: var(--border-color);
|
|
color: var(--muted-color);
|
|
}
|
|
|
|
.badge-tier.hot {
|
|
background: rgba(240, 165, 0, 0.2);
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.badge-tier.cool {
|
|
background: rgba(0, 123, 255, 0.2);
|
|
color: #007bff;
|
|
}
|
|
|
|
.badge-tier.archive {
|
|
background: rgba(108, 117, 125, 0.2);
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Actions */
|
|
.actions {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.actions .btn {
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1000px) {
|
|
.azure-page .dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|