add changes
This commit is contained in:
AD2025
309
frontend/src/styles.scss
Normal file
309
frontend/src/styles.scss
Normal file
@@ -0,0 +1,309 @@
|
||||
|
||||
// Include theming for Angular Material with `mat.theme()`.
|
||||
// This Sass mixin will define CSS variables that are used for styling Angular Material
|
||||
// components according to the Material 3 design spec.
|
||||
// Learn more about theming and how to use it for your application's
|
||||
// custom components at https://material.angular.dev/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
html {
|
||||
@include mat.theme((
|
||||
color: (
|
||||
primary: mat.$azure-palette,
|
||||
tertiary: mat.$blue-palette,
|
||||
),
|
||||
typography: Roboto,
|
||||
density: 0,
|
||||
));
|
||||
}
|
||||
|
||||
body {
|
||||
// Default the application to a light color theme. This can be changed to
|
||||
// `dark` to enable the dark color theme, or to `light dark` to defer to the
|
||||
// user's system settings.
|
||||
color-scheme: light;
|
||||
|
||||
// Set a default background, font and text colors for the application using
|
||||
// Angular Material's system-level CSS variables. Learn more about these
|
||||
// variables at https://material.angular.dev/guide/system-variables
|
||||
background-color: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
font: var(--mat-sys-body-medium);
|
||||
|
||||
// Reset the user agent margin.
|
||||
margin: 0;
|
||||
}
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
||||
/* ========================================
|
||||
CSS Custom Properties (Theme Variables)
|
||||
======================================== */
|
||||
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--color-primary: #0078d4;
|
||||
--color-primary-dark: #005a9e;
|
||||
--color-primary-light: #50a0e6;
|
||||
--color-primary-lighter: #e6f2fa;
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary: #2c3e50;
|
||||
--color-secondary-dark: #1a252f;
|
||||
--color-secondary-light: #415769;
|
||||
|
||||
/* Accent Colors */
|
||||
--color-accent: #00c853;
|
||||
--color-accent-dark: #009624;
|
||||
--color-accent-light: #5efc82;
|
||||
|
||||
/* Semantic Colors */
|
||||
--color-success: #4caf50;
|
||||
--color-success-light: #81c784;
|
||||
--color-success-dark: #388e3c;
|
||||
|
||||
--color-error: #f44336;
|
||||
--color-error-light: #e57373;
|
||||
--color-error-dark: #d32f2f;
|
||||
|
||||
--color-warning: #ff9800;
|
||||
--color-warning-light: #ffb74d;
|
||||
--color-warning-dark: #f57c00;
|
||||
|
||||
--color-info: #2196f3;
|
||||
--color-info-light: #64b5f6;
|
||||
--color-info-dark: #1976d2;
|
||||
|
||||
/* Neutral Colors - Light Theme */
|
||||
--color-background: #ffffff;
|
||||
--color-surface: #f5f5f5;
|
||||
--color-surface-elevated: #ffffff;
|
||||
--color-text-primary: #212121;
|
||||
--color-text-secondary: #757575;
|
||||
--color-text-disabled: #bdbdbd;
|
||||
--color-border: #e0e0e0;
|
||||
--color-divider: #eeeeee;
|
||||
--color-shadow: rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Spacing Scale */
|
||||
--spacing-xs: 0.25rem; /* 4px */
|
||||
--spacing-sm: 0.5rem; /* 8px */
|
||||
--spacing-md: 1rem; /* 16px */
|
||||
--spacing-lg: 1.5rem; /* 24px */
|
||||
--spacing-xl: 2rem; /* 32px */
|
||||
--spacing-2xl: 3rem; /* 48px */
|
||||
--spacing-3xl: 4rem; /* 64px */
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Typography */
|
||||
--font-family-base: 'Roboto', 'Helvetica Neue', sans-serif;
|
||||
--font-family-heading: 'Roboto', 'Helvetica Neue', sans-serif;
|
||||
--font-family-mono: 'Courier New', monospace;
|
||||
|
||||
--font-size-xs: 0.75rem; /* 12px */
|
||||
--font-size-sm: 0.875rem; /* 14px */
|
||||
--font-size-base: 1rem; /* 16px */
|
||||
--font-size-lg: 1.125rem; /* 18px */
|
||||
--font-size-xl: 1.25rem; /* 20px */
|
||||
--font-size-2xl: 1.5rem; /* 24px */
|
||||
--font-size-3xl: 1.875rem; /* 30px */
|
||||
--font-size-4xl: 2.25rem; /* 36px */
|
||||
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.75;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Z-index Scale */
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-modal: 1050;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1070;
|
||||
--z-toast: 10000;
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease-in-out;
|
||||
--transition-base: 250ms ease-in-out;
|
||||
--transition-slow: 350ms ease-in-out;
|
||||
|
||||
/* Layout */
|
||||
--header-height: 64px;
|
||||
--sidebar-width: 260px;
|
||||
--sidebar-collapsed-width: 64px;
|
||||
--footer-height: 60px;
|
||||
--container-max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Dark Theme Variables */
|
||||
body.dark-theme {
|
||||
--color-background: #121212;
|
||||
--color-surface: #1e1e1e;
|
||||
--color-surface-elevated: #2d2d2d;
|
||||
--color-text-primary: #ffffff;
|
||||
--color-text-secondary: #b0b0b0;
|
||||
--color-text-disabled: #6f6f6f;
|
||||
--color-border: #3f3f3f;
|
||||
--color-divider: #2d2d2d;
|
||||
--color-shadow: rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Adjust primary colors for dark mode */
|
||||
--color-primary: #50a0e6;
|
||||
--color-primary-light: #7bb8ed;
|
||||
--color-primary-lighter: #1a3a52;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Responsive Breakpoints
|
||||
======================================== */
|
||||
|
||||
/* Mobile: 320px - 767px (default, no media query needed) */
|
||||
/* Tablet: 768px - 1023px */
|
||||
/* Desktop: 1024px+ */
|
||||
|
||||
/* Utility classes for responsive visibility */
|
||||
.mobile-only {
|
||||
@media (min-width: 768px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tablet-up {
|
||||
@media (max-width: 767px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
@media (max-width: 1023px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Global Utility Classes
|
||||
======================================== */
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--container-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 0 var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Flexbox Utilities */
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.items-center { align-items: center; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.gap-xs { gap: var(--spacing-xs); }
|
||||
.gap-sm { gap: var(--spacing-sm); }
|
||||
.gap-md { gap: var(--spacing-md); }
|
||||
.gap-lg { gap: var(--spacing-lg); }
|
||||
.gap-xl { gap: var(--spacing-xl); }
|
||||
|
||||
/* Spacing Utilities */
|
||||
.m-0 { margin: 0; }
|
||||
.mt-sm { margin-top: var(--spacing-sm); }
|
||||
.mt-md { margin-top: var(--spacing-md); }
|
||||
.mt-lg { margin-top: var(--spacing-lg); }
|
||||
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||
.mb-md { margin-bottom: var(--spacing-md); }
|
||||
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||
.p-sm { padding: var(--spacing-sm); }
|
||||
.p-md { padding: var(--spacing-md); }
|
||||
.p-lg { padding: var(--spacing-lg); }
|
||||
|
||||
/* Text Utilities */
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.text-secondary { color: var(--color-text-secondary); }
|
||||
.text-success { color: var(--color-success); }
|
||||
.text-error { color: var(--color-error); }
|
||||
.text-warning { color: var(--color-warning); }
|
||||
.font-bold { font-weight: var(--font-weight-bold); }
|
||||
.font-medium { font-weight: var(--font-weight-medium); }
|
||||
|
||||
/* Border Utilities */
|
||||
.rounded-sm { border-radius: var(--radius-sm); }
|
||||
.rounded-md { border-radius: var(--radius-md); }
|
||||
.rounded-lg { border-radius: var(--radius-lg); }
|
||||
.rounded-full { border-radius: var(--radius-full); }
|
||||
|
||||
/* Shadow Utilities */
|
||||
.shadow-sm { box-shadow: var(--shadow-sm); }
|
||||
.shadow-md { box-shadow: var(--shadow-md); }
|
||||
.shadow-lg { box-shadow: var(--shadow-lg); }
|
||||
|
||||
/* ========================================
|
||||
Global Component Resets
|
||||
======================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus styles for accessibility */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user