Update HeaderSimple and HeroTitle components: modify styles for header background and borders, streamline imports, and enhance color scheme for improved visual consistency.

This commit is contained in:
Craig
2025-04-15 15:52:26 +01:00
parent 1e47e4d892
commit 9fa0d047eb
3 changed files with 7 additions and 8 deletions

View File

@@ -1,7 +1,7 @@
.header {
height: 56px;
background-color: var(--mantine-color-body);
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
background-color: var(--mantine-other-headerBgColor);
border-bottom: 1px solid var(--mantine-other-headerBorderColor);
}
.inner {
@@ -17,16 +17,16 @@
padding: 8px 12px;
border-radius: var(--mantine-radius-sm);
text-decoration: none;
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
color: light-dark(var(--mantine-color-brand-gray-7), var(--mantine-color-brand-gray-0));
font-size: var(--mantine-font-size-sm);
font-weight: 500;
@mixin hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
background-color: light-dark(var(--mantine-color-brand-gray-1), var(--mantine-color-brand-gray-8));
}
[data-mantine-color-scheme] &[data-active] {
background-color: var(--mantine-color-blue-filled);
background-color: var(--mantine-other-navigationActiveColor);
color: var(--mantine-color-white);
}
}