nessar
26ab037084
- Introduced a new `BrandMark` component for branding purposes. - Created a `DashboardPage` component with a responsive layout, including sections for user profile, apartment management, and API demo. - Added styles for the dashboard page to enhance user experience. - Implemented a settings page with theme preferences and session management features. - Developed a sign-in page with branding and user-friendly design. - Established a workspace navigation component for easy access to different sections of the application. - Implemented an `ApartmentService` for managing apartment data with corresponding unit tests. - Created a `ConfigService` for loading application configuration. - Added a `ThemeService` to manage user theme preferences dynamically.
149 lines
2.6 KiB
SCSS
149 lines
2.6 KiB
SCSS
@use '@angular/material' as mat;
|
|
|
|
@include mat.core();
|
|
|
|
html {
|
|
@include mat.theme(
|
|
(
|
|
color: (
|
|
primary: mat.$cyan-palette,
|
|
tertiary: mat.$azure-palette,
|
|
theme-type: color-scheme,
|
|
),
|
|
typography: (
|
|
Inter,
|
|
ui-sans-serif,
|
|
system-ui,
|
|
sans-serif,
|
|
),
|
|
density: 0,
|
|
)
|
|
);
|
|
|
|
color-scheme: light;
|
|
--canvas: #f4f6f2;
|
|
--surface: #ffffff;
|
|
--surface-raised: #ffffff;
|
|
--surface-soft: #e9efeb;
|
|
--surface-accent: #dcefeb;
|
|
--text: #17211e;
|
|
--text-muted: #687670;
|
|
--text-subtle: #8c9994;
|
|
--accent: #0f766e;
|
|
--accent-strong: #0a5f59;
|
|
--accent-contrast: #ffffff;
|
|
--border: #dce5df;
|
|
--border-strong: #c7d3cd;
|
|
--danger: #b42318;
|
|
--danger-soft: #fee9e7;
|
|
--shadow: 0 24px 60px rgba(28, 49, 42, 0.09);
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
color-scheme: dark;
|
|
--canvas: #101513;
|
|
--surface: #171d1b;
|
|
--surface-raised: #1b2320;
|
|
--surface-soft: #202a26;
|
|
--surface-accent: #173a36;
|
|
--text: #f0f5f2;
|
|
--text-muted: #a7b5af;
|
|
--text-subtle: #7f8e88;
|
|
--accent: #63c7bc;
|
|
--accent-strong: #86d7cf;
|
|
--accent-contrast: #08201d;
|
|
--border: #2c3733;
|
|
--border-strong: #3a4944;
|
|
--danger: #ffb4ab;
|
|
--danger-soft: #4a2421;
|
|
--shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
min-width: 320px;
|
|
min-height: 100%;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
background: var(--canvas);
|
|
color: var(--text);
|
|
font-family:
|
|
Inter,
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
text-rendering: optimizeLegibility;
|
|
transition:
|
|
background-color 180ms ease,
|
|
color 180ms ease;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.brand-mark {
|
|
display: grid;
|
|
width: 42px;
|
|
height: 42px;
|
|
flex: 0 0 42px;
|
|
place-items: center;
|
|
border-radius: 14px;
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
}
|
|
|
|
.primary-action.mat-mdc-unelevated-button {
|
|
--mdc-filled-button-container-color: var(--accent);
|
|
--mdc-filled-button-label-text-color: var(--accent-contrast);
|
|
min-height: 44px;
|
|
border-radius: 13px;
|
|
padding-inline: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.eyebrow,
|
|
.context-label,
|
|
.story-kicker,
|
|
.property-label {
|
|
margin-bottom: 8px;
|
|
color: var(--accent);
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.11em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|