// Custom Theming for Angular Material
// For more information: https://material.angular.dev/guide/theming
@use '@angular/material' as mat;
html {
@include mat.theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: 0,
));
}/* You can add global styles to this file, and also import other style files */
:root {
// CSS Custom Properties for theming consistency
--primary-color: #007bff;
--primary-color-dark: #0056b3;
--text-primary: #333;
--text-secondary: #666;
--border-color: #e0e0e0;
--card-bg: #fff;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--warning-color-dark: #856404;
--status-connected: #28a745;
--status-disconnected: #dc3545;
--btn-bg: #f5f5f5;
--bg-disabled: #f5f5f5;
}
html, body { height: 100%; }
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
// Blueprint paper background on all pages
background-color: #0d1929;
// Create the millimeter grid pattern
background-image:
// Fine grid lines (1mm equivalent) - very subtle
linear-gradient(rgba(64, 164, 223, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(64, 164, 223, 0.15) 1px, transparent 1px),
// Medium grid lines (5mm equivalent) - slightly more visible
linear-gradient(rgba(64, 164, 223, 0.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(64, 164, 223, 0.25) 1px, transparent 1px),
// Major grid lines (10mm equivalent) - most visible
linear-gradient(rgba(64, 164, 223, 0.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(64, 164, 223, 0.4) 1px, transparent 1px);
// Grid sizes - scaled for screen display
background-size:
4px 4px, // Fine grid (1mm)
4px 4px, // Fine grid (1mm)
20px 20px, // Medium grid (5mm)
20px 20px, // Medium grid (5mm)
40px 40px, // Major grid (10mm)
40px 40px; // Major grid (10mm)
// Ensure grid is fixed to viewport
background-attachment: fixed;
}
// Add subtle paper texture overlay
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
// Very subtle noise texture to simulate paper
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.02) 1px, transparent 0);
background-size: 20px 20px;
// Add slight vignette effect
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.1);
}
// Ensure blueprint grid is visible on all pages and components
* {
// Make sure no element has a solid background that would hide the grid
box-sizing: border-box;
}
// Override any remaining solid backgrounds that might hide the blueprint
.mat-app-background,
.mat-drawer-container,
.mat-sidenav-container {
background: transparent !important;
}
