Theming Draft 2
This commit is contained in:
daniel-c-harvey
@@ -42,23 +42,23 @@
|
||||
|
||||
/* Charleston (Light Mode) - Gold hover tint */
|
||||
:global(.deepdrft-theme-light) .nav-menu-item:hover {
|
||||
background-color: rgba(201, 169, 98, 0.1);
|
||||
color: #1C1C1C;
|
||||
background-color: color-mix(in srgb, var(--charleston-gold) 10%, transparent);
|
||||
color: var(--charleston-iron);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-light) .nav-menu-item:hover .nav-item-content {
|
||||
color: #B8848C;
|
||||
color: var(--charleston-rose);
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Coral glow hover */
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item:hover {
|
||||
background-color: rgba(224, 122, 95, 0.12);
|
||||
color: #E07A5F;
|
||||
box-shadow: 0 0 10px rgba(224, 122, 95, 0.15);
|
||||
background-color: color-mix(in srgb, var(--lowcountry-coral) 12%, transparent);
|
||||
color: var(--lowcountry-coral);
|
||||
box-shadow: 0 0 10px color-mix(in srgb, var(--lowcountry-coral) 15%, transparent);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item:hover .nav-item-content {
|
||||
color: #E07A5F;
|
||||
color: var(--lowcountry-coral);
|
||||
}
|
||||
|
||||
/* === ACTIVE STATES === */
|
||||
@@ -82,37 +82,37 @@
|
||||
|
||||
/* Charleston (Light Mode) - Iron left border */
|
||||
:global(.deepdrft-theme-light) .nav-menu-item.active {
|
||||
background-color: rgba(28, 28, 28, 0.08);
|
||||
color: #1C1C1C;
|
||||
border-left: 4px solid #1C1C1C;
|
||||
background-color: color-mix(in srgb, var(--charleston-iron) 8%, transparent);
|
||||
color: var(--charleston-iron);
|
||||
border-left: 4px solid var(--charleston-iron);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-light) .nav-menu-item.active .nav-item-content {
|
||||
color: #1C1C1C;
|
||||
color: var(--charleston-iron);
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Gold active indicator */
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item.active {
|
||||
background-color: rgba(233, 196, 106, 0.12);
|
||||
color: #E9C46A;
|
||||
border-left: 4px solid #E9C46A;
|
||||
box-shadow: 0 0 12px rgba(233, 196, 106, 0.2);
|
||||
background-color: color-mix(in srgb, var(--lowcountry-gold) 12%, transparent);
|
||||
color: var(--lowcountry-gold);
|
||||
border-left: 4px solid var(--lowcountry-gold);
|
||||
box-shadow: 0 0 12px color-mix(in srgb, var(--lowcountry-gold) 20%, transparent);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item.active .nav-item-content {
|
||||
color: #E9C46A;
|
||||
color: var(--lowcountry-gold);
|
||||
}
|
||||
|
||||
/* === FOCUS STATES === */
|
||||
|
||||
/* Charleston (Light Mode) - Iron focus outline */
|
||||
:global(.deepdrft-theme-light) .nav-menu-item:focus {
|
||||
outline: 2px solid #1C1C1C;
|
||||
outline: 2px solid var(--charleston-iron);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Coral focus outline */
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item:focus {
|
||||
outline: 2px solid #E07A5F;
|
||||
outline: 2px solid var(--lowcountry-coral);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -26,7 +26,7 @@
|
||||
border-radius: 1rem;
|
||||
border: 2px solid var(--deepdrft-theme-primary);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
color: #ffffff;
|
||||
color: inherit;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
@@ -34,21 +34,21 @@
|
||||
|
||||
/* Charleston (Light Mode) - Iron frame effect */
|
||||
:global(.deepdrft-theme-light) .player-backdrop {
|
||||
background: rgba(253, 251, 247, 0.92);
|
||||
border: 2px solid #1C1C1C;
|
||||
box-shadow: 0 4px 20px rgba(28, 28, 28, 0.2),
|
||||
inset 0 0 0 1px rgba(28, 28, 28, 0.05);
|
||||
color: #1C1C1C;
|
||||
background: color-mix(in srgb, var(--charleston-cream) 92%, transparent);
|
||||
border: 2px solid var(--charleston-iron);
|
||||
box-shadow: 0 4px 20px color-mix(in srgb, var(--charleston-iron) 20%, transparent),
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--charleston-iron) 5%, transparent);
|
||||
color: var(--charleston-iron);
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Warm sunset glow effect */
|
||||
:global(.deepdrft-theme-dark) .player-backdrop {
|
||||
background: rgba(20, 20, 32, 0.88);
|
||||
border: 1px solid rgba(224, 122, 95, 0.5);
|
||||
box-shadow: 0 0 20px rgba(224, 122, 95, 0.25),
|
||||
0 0 40px rgba(123, 109, 141, 0.15),
|
||||
background: color-mix(in srgb, var(--lowcountry-night) 88%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--lowcountry-coral) 50%, transparent);
|
||||
box-shadow: 0 0 20px color-mix(in srgb, var(--lowcountry-coral) 25%, transparent),
|
||||
0 0 40px color-mix(in srgb, var(--lowcountry-twilight) 15%, transparent),
|
||||
0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
color: #F5F0E6;
|
||||
color: var(--lowcountry-moonlight);
|
||||
}
|
||||
|
||||
/* Control buttons positioning */
|
||||
@@ -82,17 +82,17 @@
|
||||
|
||||
/* Charleston (Light Mode) - Iron dock */
|
||||
:global(.deepdrft-theme-light) .minimized-dock {
|
||||
background: linear-gradient(135deg, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
|
||||
border: 2px solid #1C1C1C;
|
||||
box-shadow: 0 4px 15px rgba(28, 28, 28, 0.4);
|
||||
background: linear-gradient(135deg, var(--charleston-iron) 0%, var(--charleston-rose) 50%, var(--charleston-gold) 100%);
|
||||
border: 2px solid var(--charleston-iron);
|
||||
box-shadow: 0 4px 15px color-mix(in srgb, var(--charleston-iron) 40%, transparent);
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Warm sunset dock */
|
||||
:global(.deepdrft-theme-dark) .minimized-dock {
|
||||
background: linear-gradient(135deg, #E07A5F 0%, #7B6D8D 50%, #E9C46A 100%);
|
||||
border: 2px solid rgba(224, 122, 95, 0.6);
|
||||
box-shadow: 0 0 20px rgba(224, 122, 95, 0.4),
|
||||
0 0 40px rgba(123, 109, 141, 0.2);
|
||||
background: linear-gradient(135deg, var(--lowcountry-coral) 0%, var(--lowcountry-twilight) 50%, var(--lowcountry-gold) 100%);
|
||||
border: 2px solid color-mix(in srgb, var(--lowcountry-coral) 60%, transparent);
|
||||
box-shadow: 0 0 20px color-mix(in srgb, var(--lowcountry-coral) 40%, transparent),
|
||||
0 0 40px color-mix(in srgb, var(--lowcountry-twilight) 20%, transparent);
|
||||
}
|
||||
|
||||
.minimized-dock:hover {
|
||||
@@ -100,12 +100,12 @@
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-light) .minimized-dock:hover {
|
||||
box-shadow: 0 6px 20px rgba(28, 28, 28, 0.5);
|
||||
box-shadow: 0 6px 20px color-mix(in srgb, var(--charleston-iron) 50%, transparent);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-dark) .minimized-dock:hover {
|
||||
box-shadow: 0 0 30px rgba(224, 122, 95, 0.5),
|
||||
0 0 50px rgba(123, 109, 141, 0.3);
|
||||
box-shadow: 0 0 30px color-mix(in srgb, var(--lowcountry-coral) 50%, transparent),
|
||||
0 0 50px color-mix(in srgb, var(--lowcountry-twilight) 30%, transparent);
|
||||
}
|
||||
|
||||
/* Minimized button styles */
|
||||
|
||||
@@ -33,13 +33,13 @@
|
||||
|
||||
/* Charleston (Light Mode) - Iron to gold colored bars */
|
||||
:global(.deepdrft-theme-light) .spectrum-bar {
|
||||
background: linear-gradient(to top, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
|
||||
background: linear-gradient(to top, var(--charleston-iron) 0%, var(--charleston-rose) 50%, var(--charleston-gold) 100%);
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Coral to gold bars with warm glow */
|
||||
:global(.deepdrft-theme-dark) .spectrum-bar {
|
||||
background: linear-gradient(to top, #E07A5F 0%, #E9C46A 100%);
|
||||
box-shadow: 0 0 4px rgba(233, 196, 106, 0.4);
|
||||
background: linear-gradient(to top, var(--lowcountry-coral) 0%, var(--lowcountry-gold) 100%);
|
||||
box-shadow: 0 0 4px color-mix(in srgb, var(--lowcountry-gold) 40%, transparent);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
|
||||
@@ -51,35 +51,35 @@
|
||||
{
|
||||
Default = new DefaultTypography()
|
||||
{
|
||||
FontFamily = new[] {"Source Serif 4", "serif"}
|
||||
FontFamily = new[] {"DM Sans", "sans-serif"}
|
||||
},
|
||||
H1 = new H1Typography()
|
||||
{
|
||||
FontFamily = new[] {"Playfair Display", "serif"}
|
||||
FontFamily = new[] {"Bodoni Moda", "serif"}
|
||||
},
|
||||
H2 = new H2Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
FontFamily = new[] {"EB Garamond", "serif"}
|
||||
},
|
||||
H3 = new H3Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
FontFamily = new[] {"EB Garamond", "serif"}
|
||||
},
|
||||
H4 = new H4Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
FontFamily = new[] {"EB Garamond", "serif"}
|
||||
},
|
||||
H5 = new H5Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
FontFamily = new[] {"EB Garamond", "serif"}
|
||||
},
|
||||
H6 = new H6Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
FontFamily = new[] {"EB Garamond", "serif"}
|
||||
},
|
||||
Button = new ButtonTypography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
FontFamily = new[] {"DM Sans", "sans-serif"}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -144,7 +144,7 @@
|
||||
// Inspired by warm sunsets over marshes, fireflies, Spanish moss, lamplight
|
||||
private readonly PaletteDark _darkPalette = new()
|
||||
{
|
||||
Primary = "#E07A5F", // Sunset coral - warm, not neon
|
||||
Primary = "#D4654A", // Deep sunset coral - richer, distinct
|
||||
Secondary = "#7B6D8D", // Twilight purple - muted
|
||||
Tertiary = "#E9C46A", // Firefly gold - lamplight
|
||||
Info = "#2196F3", // MudBlazor default blue (semantic)
|
||||
@@ -167,13 +167,13 @@
|
||||
TextPrimary = "#F5F0E6", // Warm white primary text
|
||||
TextSecondary = "#B8B0C4", // Lavender gray secondary text
|
||||
TextDisabled = "#757575", // Disabled text
|
||||
GrayLight = "rgba(224,122,95,0.15)", // Coral tint light
|
||||
GrayLighter = "rgba(224,122,95,0.08)", // Coral tint lighter
|
||||
GrayDefault = "rgba(224,122,95,0.22)", // Coral tint default
|
||||
GrayDark = "rgba(224,122,95,0.35)", // Coral tint dark
|
||||
Divider = "rgba(224,122,95,0.18)", // Coral divider
|
||||
LinesDefault = "rgba(224,122,95,0.18)", // Coral lines
|
||||
TableLines = "rgba(224,122,95,0.18)", // Coral table lines
|
||||
GrayLight = "rgba(212,101,74,0.15)", // Coral tint light
|
||||
GrayLighter = "rgba(212,101,74,0.08)", // Coral tint lighter
|
||||
GrayDefault = "rgba(212,101,74,0.22)", // Coral tint default
|
||||
GrayDark = "rgba(212,101,74,0.35)", // Coral tint dark
|
||||
Divider = "rgba(212,101,74,0.18)", // Coral divider
|
||||
LinesDefault = "rgba(212,101,74,0.18)", // Coral lines
|
||||
TableLines = "rgba(212,101,74,0.18)", // Coral table lines
|
||||
OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay
|
||||
OverlayDark = "rgba(255,255,255,0.08)", // Light overlay
|
||||
};
|
||||
|
||||
@@ -74,9 +74,9 @@
|
||||
<MudChip Color="Color.Primary" Class="deepdrft-chip-spacing">House</MudChip>
|
||||
<MudChip Color="Color.Secondary" Class="deepdrft-chip-spacing">Techno</MudChip>
|
||||
<MudChip Color="Color.Tertiary" Class="deepdrft-chip-spacing">Trance</MudChip>
|
||||
<MudChip Color="Color.Info" Class="deepdrft-chip-spacing">IDM</MudChip>
|
||||
<MudChip Color="Color.Warning" Class="deepdrft-chip-spacing">Progressive</MudChip>
|
||||
<MudChip Color="Color.Success" Class="deepdrft-chip-spacing">Ambient</MudChip>
|
||||
<MudChip Class="deepdrft-chip-spacing deepdrft-chip-quaternary">IDM</MudChip>
|
||||
<MudChip Class="deepdrft-chip-spacing deepdrft-chip-senary">Progressive</MudChip>
|
||||
<MudChip Class="deepdrft-chip-spacing deepdrft-chip-quinary">Ambient</MudChip>
|
||||
</MudChipSet>
|
||||
<MudText Typo="Typo.body1" Class="deepdrft-text-readable">
|
||||
From deep, driving basslines to ethereal atmospheric textures, our music explores the
|
||||
@@ -141,11 +141,10 @@
|
||||
|
||||
<MudItem xs="12" sm="6" md="3">
|
||||
<MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-lavender-tint">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Archive"
|
||||
Size="Size.Large"
|
||||
Color="Color.Info"
|
||||
Class="mb-3 deepdrft-icon-large" />
|
||||
<MudText Typo="Typo.h6" Color="Color.Info" Class="mb-2 deepdrft-text-bold">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Archive"
|
||||
Size="Size.Large"
|
||||
Class="mb-3 deepdrft-icon-large deepdrft-text-quaternary" />
|
||||
<MudText Typo="Typo.h6" Class="mb-2 deepdrft-text-bold deepdrft-text-quaternary">
|
||||
Growing Archive
|
||||
</MudText>
|
||||
<MudText Typo="Typo.body2">
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
<base href="/" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
|
||||
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
|
||||
<link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
|
||||
|
||||
@@ -33,28 +33,30 @@
|
||||
|
||||
/* Charleston-specific accent colors */
|
||||
--charleston-iron: #1C1C1C;
|
||||
--charleston-iron-soft: #4A4A4A;
|
||||
--charleston-cream: #FDFBF7;
|
||||
--charleston-rose: #B8848C;
|
||||
--charleston-gold: #C9A962;
|
||||
--charleston-sage: #7D9B8C;
|
||||
|
||||
/* Font Hierarchy - DRY font definitions */
|
||||
--deepdrft-font-largest-headers: "Playfair Display", serif; /* h1, hero text, main titles */
|
||||
--deepdrft-font-headers: "Cormorant Garamond", serif; /* h2-h6, visual components, buttons */
|
||||
--deepdrft-font-body: "Source Serif 4", serif; /* body text, paragraphs, smaller elements */
|
||||
/* Upscale steakhouse aesthetic - refined, modern luxury */
|
||||
--deepdrft-font-largest-headers: "Bodoni Moda", serif; /* h1, hero text - high-fashion editorial */
|
||||
--deepdrft-font-headers: "EB Garamond", serif; /* h2-h6 - elegant serif headers */
|
||||
--deepdrft-font-body: "DM Sans", sans-serif; /* body, buttons, UI - clean modern */
|
||||
}
|
||||
|
||||
/* Lowcountry Summer Nights (Dark Mode) */
|
||||
/* Use our custom theme class for reliable CSS targeting */
|
||||
.deepdrft-theme-dark {
|
||||
--deepdrft-primary: #E07A5F; /* Sunset coral - warm, not neon */
|
||||
--deepdrft-primary: #D4654A; /* Deep sunset coral - richer, distinct */
|
||||
--deepdrft-secondary: #7B6D8D; /* Twilight purple - muted */
|
||||
--deepdrft-tertiary: #E9C46A; /* Firefly gold - lamplight */
|
||||
--deepdrft-accent: #5E8B9C; /* Marsh blue */
|
||||
|
||||
/* Extended Palette - Dark Theme (Lowcountry) */
|
||||
--deepdrft-quaternary: #8AA39B; /* Spanish moss */
|
||||
--deepdrft-quinary: #5E8B9C; /* Marsh dusk */
|
||||
--deepdrft-quinary: #9EB8C4; /* Silver marsh - cool, distinct from primary */
|
||||
--deepdrft-senary: #D4845A; /* Ember orange */
|
||||
--deepdrft-septenary: #6A5A7C; /* Night violet */
|
||||
|
||||
@@ -74,72 +76,123 @@
|
||||
--deepdrft-theme-septenary: var(--deepdrft-septenary);
|
||||
|
||||
/* Lowcountry-specific accent colors */
|
||||
--lowcountry-coral: #E07A5F;
|
||||
--lowcountry-coral: #D4654A;
|
||||
--lowcountry-twilight: #7B6D8D;
|
||||
--lowcountry-gold: #E9C46A;
|
||||
--lowcountry-marsh: #5E8B9C;
|
||||
--lowcountry-moss: #8AA39B;
|
||||
--lowcountry-ember: #D4845A;
|
||||
--lowcountry-moonlight: #F5F0E6;
|
||||
--lowcountry-lavender: #B8B0C4;
|
||||
--lowcountry-night: #0D0D12;
|
||||
--lowcountry-violet: #6A5A7C;
|
||||
}
|
||||
|
||||
/* Primary Gradient Backgrounds - Charleston (Light Mode Default) */
|
||||
/* Light mode: subtle cream background with dark text on top */
|
||||
/* Using .mud-paper for specificity to avoid !important */
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-gradient-primary,
|
||||
.deepdrft-theme-light .deepdrft-gradient-primary {
|
||||
background: linear-gradient(135deg, #F5F2EC 0%, #E8E4DC 50%, #DDD5C8 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
var(--charleston-cream) 0%,
|
||||
color-mix(in srgb, var(--charleston-cream) 90%, var(--charleston-iron) 10%) 50%,
|
||||
color-mix(in srgb, var(--charleston-cream) 80%, var(--charleston-iron) 20%) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-gradient-hero,
|
||||
.deepdrft-theme-light .deepdrft-gradient-hero {
|
||||
background: linear-gradient(135deg, #F5F2EC 0%, #E8E4DC 50%, #DDD5C8 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
var(--charleston-cream) 0%,
|
||||
color-mix(in srgb, var(--charleston-cream) 90%, var(--charleston-iron) 10%) 50%,
|
||||
color-mix(in srgb, var(--charleston-cream) 80%, var(--charleston-iron) 20%) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-gradient-soft-primary,
|
||||
.deepdrft-theme-light .deepdrft-gradient-soft-primary {
|
||||
background: linear-gradient(45deg, rgba(28,28,28,0.04) 0%, rgba(184,132,140,0.06) 100%) !important;
|
||||
background: linear-gradient(45deg,
|
||||
color-mix(in srgb, var(--charleston-iron) 4%, transparent) 0%,
|
||||
color-mix(in srgb, var(--charleston-rose) 6%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-gradient-soft-secondary,
|
||||
.deepdrft-theme-light .deepdrft-gradient-soft-secondary {
|
||||
background: linear-gradient(45deg, rgba(201,169,98,0.06) 0%, rgba(28,28,28,0.04) 100%) !important;
|
||||
background: linear-gradient(45deg,
|
||||
color-mix(in srgb, var(--charleston-gold) 6%, transparent) 0%,
|
||||
color-mix(in srgb, var(--charleston-iron) 4%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-gradient-soft-accent,
|
||||
.deepdrft-theme-light .deepdrft-gradient-soft-accent {
|
||||
background: linear-gradient(135deg, rgba(28,28,28,0.03) 0%, rgba(201,169,98,0.05) 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--charleston-iron) 3%, transparent) 0%,
|
||||
color-mix(in srgb, var(--charleston-gold) 5%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-gradient-soft-tertiary,
|
||||
.deepdrft-theme-light .deepdrft-gradient-soft-tertiary {
|
||||
background: linear-gradient(135deg, rgba(184,132,140,0.05) 0%, rgba(28,28,28,0.03) 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--charleston-rose) 5%, transparent) 0%,
|
||||
color-mix(in srgb, var(--charleston-iron) 3%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-gradient-features,
|
||||
.deepdrft-theme-light .deepdrft-gradient-features {
|
||||
background: linear-gradient(to right, rgba(28,28,28,0.02) 0%, rgba(184,132,140,0.03) 100%) !important;
|
||||
background: linear-gradient(to right,
|
||||
color-mix(in srgb, var(--charleston-iron) 2%, transparent) 0%,
|
||||
color-mix(in srgb, var(--charleston-rose) 3%, transparent) 100%);
|
||||
}
|
||||
|
||||
/* Lowcountry Gradient Overrides (Dark Mode) */
|
||||
/* Dark mode: warm sunset gradient with light text on top */
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-gradient-primary,
|
||||
.deepdrft-theme-dark .deepdrft-gradient-primary {
|
||||
background: linear-gradient(135deg, #0D0D12 0%, #7B6D8D 50%, #E07A5F 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
var(--lowcountry-night) 0%,
|
||||
var(--lowcountry-twilight) 50%,
|
||||
var(--lowcountry-coral) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-gradient-hero,
|
||||
.deepdrft-theme-dark .deepdrft-gradient-hero {
|
||||
background: linear-gradient(135deg, #0D0D12 0%, #7B6D8D 50%, #E07A5F 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
var(--lowcountry-night) 0%,
|
||||
var(--lowcountry-twilight) 50%,
|
||||
var(--lowcountry-coral) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-gradient-soft-primary,
|
||||
.deepdrft-theme-dark .deepdrft-gradient-soft-primary {
|
||||
background: linear-gradient(45deg, rgba(224,122,95,0.12) 0%, rgba(123,109,141,0.12) 100%) !important;
|
||||
background: linear-gradient(45deg,
|
||||
color-mix(in srgb, var(--lowcountry-coral) 12%, transparent) 0%,
|
||||
color-mix(in srgb, var(--lowcountry-twilight) 12%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-gradient-soft-secondary,
|
||||
.deepdrft-theme-dark .deepdrft-gradient-soft-secondary {
|
||||
background: linear-gradient(45deg, rgba(233,196,106,0.1) 0%, rgba(224,122,95,0.1) 100%) !important;
|
||||
background: linear-gradient(45deg,
|
||||
color-mix(in srgb, var(--lowcountry-gold) 10%, transparent) 0%,
|
||||
color-mix(in srgb, var(--lowcountry-coral) 10%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-gradient-soft-accent,
|
||||
.deepdrft-theme-dark .deepdrft-gradient-soft-accent {
|
||||
background: linear-gradient(135deg, rgba(224,122,95,0.08) 0%, rgba(106,90,124,0.08) 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--lowcountry-coral) 8%, transparent) 0%,
|
||||
color-mix(in srgb, var(--lowcountry-violet) 8%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-gradient-soft-tertiary,
|
||||
.deepdrft-theme-dark .deepdrft-gradient-soft-tertiary {
|
||||
background: linear-gradient(135deg, rgba(123,109,141,0.1) 0%, rgba(224,122,95,0.1) 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--lowcountry-twilight) 10%, transparent) 0%,
|
||||
color-mix(in srgb, var(--lowcountry-coral) 10%, transparent) 100%);
|
||||
}
|
||||
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-gradient-features,
|
||||
.deepdrft-theme-dark .deepdrft-gradient-features {
|
||||
background: linear-gradient(to right, rgba(224,122,95,0.05) 0%, rgba(123,109,141,0.05) 100%) !important;
|
||||
background: linear-gradient(to right,
|
||||
color-mix(in srgb, var(--lowcountry-coral) 5%, transparent) 0%,
|
||||
color-mix(in srgb, var(--lowcountry-twilight) 5%, transparent) 100%);
|
||||
}
|
||||
|
||||
/* Font Hierarchy Styles - DRY Typography System */
|
||||
@@ -157,45 +210,45 @@ h1, .deepdrft-text-hero, .deepdrft-heading-primary {
|
||||
|
||||
/* Hero Section Theme-Aware Text Colors */
|
||||
/* Light mode (cream background): dark text */
|
||||
.deepdrft-theme-light .deepdrft-hero-title {
|
||||
color: #1C1C1C !important; /* Iron black */
|
||||
.deepdrft-theme-light .deepdrft-hero-container .deepdrft-hero-title {
|
||||
color: var(--charleston-iron);
|
||||
}
|
||||
.deepdrft-theme-light .deepdrft-hero-subtitle {
|
||||
color: #B8848C !important; /* Dusty rose */
|
||||
.deepdrft-theme-light .deepdrft-hero-container .deepdrft-hero-subtitle {
|
||||
color: var(--charleston-rose);
|
||||
}
|
||||
.deepdrft-theme-light .deepdrft-hero-description {
|
||||
color: #4A4A4A !important; /* Softer iron */
|
||||
.deepdrft-theme-light .deepdrft-hero-container .deepdrft-hero-description {
|
||||
color: var(--charleston-iron-soft);
|
||||
}
|
||||
|
||||
/* Dark mode (sunset gradient background): light text */
|
||||
.deepdrft-theme-dark .deepdrft-hero-title {
|
||||
color: #F5F0E6 !important; /* Warm moonlight white */
|
||||
.deepdrft-theme-dark .deepdrft-hero-container .deepdrft-hero-title {
|
||||
color: var(--lowcountry-moonlight);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-hero-subtitle {
|
||||
color: #E9C46A !important; /* Firefly gold */
|
||||
.deepdrft-theme-dark .deepdrft-hero-container .deepdrft-hero-subtitle {
|
||||
color: var(--lowcountry-gold);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-hero-description {
|
||||
color: #B8B0C4 !important; /* Lavender gray */
|
||||
.deepdrft-theme-dark .deepdrft-hero-container .deepdrft-hero-description {
|
||||
color: var(--lowcountry-lavender);
|
||||
}
|
||||
|
||||
/* Hero Button Overrides for Light Mode */
|
||||
.deepdrft-theme-light .deepdrft-hero-button-filled {
|
||||
background-color: #1C1C1C !important;
|
||||
color: #FDFBF7 !important;
|
||||
.deepdrft-theme-light .deepdrft-hero-button-filled.mud-button-filled {
|
||||
background-color: var(--charleston-iron);
|
||||
color: var(--charleston-cream);
|
||||
}
|
||||
.deepdrft-theme-light .deepdrft-hero-button-outlined {
|
||||
border-color: #1C1C1C !important;
|
||||
color: #1C1C1C !important;
|
||||
.deepdrft-theme-light .deepdrft-hero-button-outlined.mud-button-outlined {
|
||||
border-color: var(--charleston-iron);
|
||||
color: var(--charleston-iron);
|
||||
}
|
||||
|
||||
/* Hero Button Overrides for Dark Mode */
|
||||
.deepdrft-theme-dark .deepdrft-hero-button-filled {
|
||||
background-color: #E07A5F !important;
|
||||
color: #0D0D12 !important;
|
||||
.deepdrft-theme-dark .deepdrft-hero-button-filled.mud-button-filled {
|
||||
background-color: var(--lowcountry-coral);
|
||||
color: var(--lowcountry-night);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-hero-button-outlined {
|
||||
border-color: #F5F0E6 !important;
|
||||
color: #F5F0E6 !important;
|
||||
.deepdrft-theme-dark .deepdrft-hero-button-outlined.mud-button-outlined {
|
||||
border-color: var(--lowcountry-moonlight);
|
||||
color: var(--lowcountry-moonlight);
|
||||
}
|
||||
|
||||
/* Headers and Visual Components - Michroma */
|
||||
@@ -246,12 +299,33 @@ body, p, span, div,
|
||||
font-family: var(--deepdrft-font-headers) !important;
|
||||
}
|
||||
|
||||
.mud-typography-body1, .mud-typography-body2,
|
||||
.mud-typography-body1, .mud-typography-body2,
|
||||
.mud-typography-caption, .mud-typography-overline,
|
||||
.mud-input-text, .mud-select-text, .mud-form-label {
|
||||
font-family: var(--deepdrft-font-body) !important;
|
||||
}
|
||||
|
||||
/* === AppBar Text Color Fix === */
|
||||
/* Light mode: Cream text on iron black appbar */
|
||||
.deepdrft-theme-light .mud-appbar,
|
||||
.deepdrft-theme-light .mud-appbar * {
|
||||
color: var(--charleston-cream);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .mud-appbar .mud-icon-button {
|
||||
color: var(--charleston-cream);
|
||||
}
|
||||
|
||||
/* Dark mode: Moonlight text (already inherited but explicit for safety) */
|
||||
.deepdrft-theme-dark .mud-appbar,
|
||||
.deepdrft-theme-dark .mud-appbar * {
|
||||
color: var(--lowcountry-moonlight);
|
||||
}
|
||||
|
||||
.deepdrft-theme-dark .mud-appbar .mud-icon-button {
|
||||
color: var(--lowcountry-moonlight);
|
||||
}
|
||||
|
||||
/* Border Accents - Theme Aware */
|
||||
.deepdrft-border-left-primary {
|
||||
border-left: 4px solid var(--deepdrft-theme-primary);
|
||||
@@ -296,54 +370,69 @@ body, p, span, div,
|
||||
/* Card Aesthetics - Theme Aware */
|
||||
/* Charleston (Light): iron, rose, gold, sage tints */
|
||||
/* Lowcountry (Dark): coral, twilight, gold, moss tints */
|
||||
.deepdrft-theme-light .deepdrft-card-purple-tint {
|
||||
background: rgba(138,122,150,0.1) !important; /* Soft plum tint */
|
||||
/* Using .mud-card/.mud-paper for specificity to avoid !important */
|
||||
.deepdrft-theme-light .mud-card.deepdrft-card-purple-tint,
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-card-purple-tint {
|
||||
background: color-mix(in srgb, var(--deepdrft-septenary) 10%, transparent);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-card-purple-tint {
|
||||
background: rgba(123,109,141,0.12) !important; /* Twilight purple */
|
||||
.deepdrft-theme-dark .mud-card.deepdrft-card-purple-tint,
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-card-purple-tint {
|
||||
background: color-mix(in srgb, var(--lowcountry-twilight) 12%, transparent);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .deepdrft-card-pink-tint {
|
||||
background: rgba(184,132,140,0.1) !important; /* Rose tint */
|
||||
.deepdrft-theme-light .mud-card.deepdrft-card-pink-tint,
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-card-pink-tint {
|
||||
background: color-mix(in srgb, var(--charleston-rose) 10%, transparent);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-card-pink-tint {
|
||||
background: rgba(224,122,95,0.12) !important; /* Sunset coral */
|
||||
.deepdrft-theme-dark .mud-card.deepdrft-card-pink-tint,
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-card-pink-tint {
|
||||
background: color-mix(in srgb, var(--lowcountry-coral) 12%, transparent);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .deepdrft-card-indigo-tint {
|
||||
background: rgba(28,28,28,0.08) !important; /* Iron tint */
|
||||
.deepdrft-theme-light .mud-card.deepdrft-card-indigo-tint,
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-card-indigo-tint {
|
||||
background: color-mix(in srgb, var(--charleston-iron) 8%, transparent);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-card-indigo-tint {
|
||||
background: rgba(106,90,124,0.12) !important; /* Night violet */
|
||||
.deepdrft-theme-dark .mud-card.deepdrft-card-indigo-tint,
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-card-indigo-tint {
|
||||
background: color-mix(in srgb, var(--lowcountry-violet) 12%, transparent);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .deepdrft-card-lavender-tint {
|
||||
background: rgba(125,155,140,0.1) !important; /* Sage tint */
|
||||
.deepdrft-theme-light .mud-card.deepdrft-card-lavender-tint,
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-card-lavender-tint {
|
||||
background: color-mix(in srgb, var(--charleston-sage) 10%, transparent);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-card-lavender-tint {
|
||||
background: rgba(138,163,155,0.1) !important; /* Moss tint */
|
||||
.deepdrft-theme-dark .mud-card.deepdrft-card-lavender-tint,
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-card-lavender-tint {
|
||||
background: color-mix(in srgb, var(--lowcountry-moss) 10%, transparent);
|
||||
}
|
||||
|
||||
/* Additional theme-specific card tints */
|
||||
.deepdrft-theme-light .deepdrft-card-primary-tint {
|
||||
background: rgba(28,28,28,0.06) !important;
|
||||
.deepdrft-theme-light .mud-card.deepdrft-card-primary-tint,
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-card-primary-tint {
|
||||
background: color-mix(in srgb, var(--charleston-iron) 6%, transparent);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-card-primary-tint {
|
||||
background: rgba(224,122,95,0.1) !important;
|
||||
.deepdrft-theme-dark .mud-card.deepdrft-card-primary-tint,
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-card-primary-tint {
|
||||
background: color-mix(in srgb, var(--lowcountry-coral) 10%, transparent);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .deepdrft-card-secondary-tint {
|
||||
background: rgba(184,132,140,0.08) !important;
|
||||
.deepdrft-theme-light .mud-card.deepdrft-card-secondary-tint,
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-card-secondary-tint {
|
||||
background: color-mix(in srgb, var(--charleston-rose) 8%, transparent);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-card-secondary-tint {
|
||||
background: rgba(123,109,141,0.1) !important;
|
||||
.deepdrft-theme-dark .mud-card.deepdrft-card-secondary-tint,
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-card-secondary-tint {
|
||||
background: color-mix(in srgb, var(--lowcountry-twilight) 10%, transparent);
|
||||
}
|
||||
|
||||
.deepdrft-theme-light .deepdrft-card-tertiary-tint {
|
||||
background: rgba(201,169,98,0.08) !important;
|
||||
.deepdrft-theme-light .mud-card.deepdrft-card-tertiary-tint,
|
||||
.deepdrft-theme-light .mud-paper.deepdrft-card-tertiary-tint {
|
||||
background: color-mix(in srgb, var(--charleston-gold) 8%, transparent);
|
||||
}
|
||||
.deepdrft-theme-dark .deepdrft-card-tertiary-tint {
|
||||
background: rgba(233,196,106,0.1) !important;
|
||||
.deepdrft-theme-dark .mud-card.deepdrft-card-tertiary-tint,
|
||||
.deepdrft-theme-dark .mud-paper.deepdrft-card-tertiary-tint {
|
||||
background: color-mix(in srgb, var(--lowcountry-gold) 10%, transparent);
|
||||
}
|
||||
|
||||
/* Track Card Specific */
|
||||
@@ -537,7 +626,7 @@ body, p, span, div,
|
||||
|
||||
/* Garden Card (subtle green tint) */
|
||||
.charleston-garden-tint {
|
||||
background: rgba(74, 124, 89, 0.08);
|
||||
background: color-mix(in srgb, var(--charleston-sage) 8%, transparent);
|
||||
}
|
||||
|
||||
/* Iron Gate Pattern Overlay */
|
||||
@@ -557,8 +646,8 @@ body, p, span, div,
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 20px,
|
||||
rgba(28,28,28,0.03) 20px,
|
||||
rgba(28,28,28,0.03) 22px
|
||||
color-mix(in srgb, var(--charleston-iron) 3%, transparent) 20px,
|
||||
color-mix(in srgb, var(--charleston-iron) 3%, transparent) 22px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -567,37 +656,37 @@ body, p, span, div,
|
||||
|
||||
/* Warm Sunset Glow Effects */
|
||||
.lowcountry-glow-coral {
|
||||
box-shadow: 0 0 15px rgba(224, 122, 95, 0.4),
|
||||
0 0 30px rgba(224, 122, 95, 0.2);
|
||||
box-shadow: 0 0 15px color-mix(in srgb, var(--lowcountry-coral) 40%, transparent),
|
||||
0 0 30px color-mix(in srgb, var(--lowcountry-coral) 20%, transparent);
|
||||
}
|
||||
|
||||
.lowcountry-glow-gold {
|
||||
box-shadow: 0 0 15px rgba(233, 196, 106, 0.4),
|
||||
0 0 30px rgba(233, 196, 106, 0.2);
|
||||
box-shadow: 0 0 15px color-mix(in srgb, var(--lowcountry-gold) 40%, transparent),
|
||||
0 0 30px color-mix(in srgb, var(--lowcountry-gold) 20%, transparent);
|
||||
}
|
||||
|
||||
.lowcountry-glow-twilight {
|
||||
box-shadow: 0 0 15px rgba(123, 109, 141, 0.4),
|
||||
0 0 30px rgba(123, 109, 141, 0.2);
|
||||
box-shadow: 0 0 15px color-mix(in srgb, var(--lowcountry-twilight) 40%, transparent),
|
||||
0 0 30px color-mix(in srgb, var(--lowcountry-twilight) 20%, transparent);
|
||||
}
|
||||
|
||||
.lowcountry-glow-moss {
|
||||
box-shadow: 0 0 15px rgba(138, 163, 155, 0.4),
|
||||
0 0 30px rgba(138, 163, 155, 0.2);
|
||||
box-shadow: 0 0 15px color-mix(in srgb, var(--lowcountry-moss) 40%, transparent),
|
||||
0 0 30px color-mix(in srgb, var(--lowcountry-moss) 20%, transparent);
|
||||
}
|
||||
|
||||
/* Firefly Glow (for accent elements) */
|
||||
.lowcountry-firefly-glow {
|
||||
box-shadow: 0 0 10px rgba(233, 196, 106, 0.5),
|
||||
0 0 20px rgba(233, 196, 106, 0.3),
|
||||
0 0 40px rgba(233, 196, 106, 0.1);
|
||||
box-shadow: 0 0 10px color-mix(in srgb, var(--lowcountry-gold) 50%, transparent),
|
||||
0 0 20px color-mix(in srgb, var(--lowcountry-gold) 30%, transparent),
|
||||
0 0 40px color-mix(in srgb, var(--lowcountry-gold) 10%, transparent);
|
||||
}
|
||||
|
||||
/* Candlelight effect */
|
||||
.lowcountry-candlelight {
|
||||
background: radial-gradient(
|
||||
ellipse at center top,
|
||||
rgba(233, 196, 106, 0.1) 0%,
|
||||
color-mix(in srgb, var(--lowcountry-gold) 10%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
}
|
||||
@@ -606,33 +695,33 @@ body, p, span, div,
|
||||
.lowcountry-gradient-sunset {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#E07A5F 0%,
|
||||
#7B6D8D 50%,
|
||||
#6A5A7C 100%
|
||||
var(--lowcountry-coral) 0%,
|
||||
var(--lowcountry-twilight) 50%,
|
||||
var(--lowcountry-violet) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.lowcountry-gradient-marsh {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(13, 13, 18, 1) 0%,
|
||||
rgba(138, 163, 155, 0.15) 100%
|
||||
var(--lowcountry-night) 0%,
|
||||
color-mix(in srgb, var(--lowcountry-moss) 15%, transparent) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.lowcountry-gradient-twilight {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#E07A5F 0%,
|
||||
#7B6D8D 40%,
|
||||
#0D0D12 100%
|
||||
var(--lowcountry-coral) 0%,
|
||||
var(--lowcountry-twilight) 40%,
|
||||
var(--lowcountry-night) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Marsh Water Reflection */
|
||||
.lowcountry-water-reflection {
|
||||
border-bottom: 2px solid var(--lowcountry-marsh, #5E8B9C);
|
||||
box-shadow: 0 4px 15px rgba(94, 139, 156, 0.2);
|
||||
border-bottom: 2px solid var(--lowcountry-marsh);
|
||||
box-shadow: 0 4px 15px color-mix(in srgb, var(--lowcountry-marsh) 20%, transparent);
|
||||
}
|
||||
|
||||
/* Spanish Moss Texture Overlay */
|
||||
@@ -651,8 +740,8 @@ body, p, span, div,
|
||||
180deg,
|
||||
transparent,
|
||||
transparent 8px,
|
||||
rgba(123, 109, 141, 0.03) 8px,
|
||||
rgba(123, 109, 141, 0.03) 10px
|
||||
color-mix(in srgb, var(--lowcountry-twilight) 3%, transparent) 8px,
|
||||
color-mix(in srgb, var(--lowcountry-twilight) 3%, transparent) 10px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -662,20 +751,20 @@ body, p, span, div,
|
||||
border: 1px solid transparent;
|
||||
border-image: linear-gradient(
|
||||
135deg,
|
||||
#E07A5F,
|
||||
#7B6D8D,
|
||||
#E9C46A
|
||||
var(--lowcountry-coral),
|
||||
var(--lowcountry-twilight),
|
||||
var(--lowcountry-gold)
|
||||
) 1;
|
||||
}
|
||||
|
||||
.lowcountry-border-coral {
|
||||
border: 1px solid #E07A5F;
|
||||
box-shadow: 0 0 8px rgba(224, 122, 95, 0.3);
|
||||
border: 1px solid var(--lowcountry-coral);
|
||||
box-shadow: 0 0 8px color-mix(in srgb, var(--lowcountry-coral) 30%, transparent);
|
||||
}
|
||||
|
||||
.lowcountry-border-gold {
|
||||
border: 1px solid #E9C46A;
|
||||
box-shadow: 0 0 8px rgba(233, 196, 106, 0.3);
|
||||
border: 1px solid var(--lowcountry-gold);
|
||||
box-shadow: 0 0 8px color-mix(in srgb, var(--lowcountry-gold) 30%, transparent);
|
||||
}
|
||||
|
||||
/* === EXTENDED PALETTE UTILITY CLASSES === */
|
||||
@@ -717,4 +806,28 @@ body, p, span, div,
|
||||
}
|
||||
.deepdrft-card-septenary-tint {
|
||||
background: color-mix(in srgb, var(--deepdrft-theme-septenary) 10%, transparent);
|
||||
}
|
||||
|
||||
/* === CHIP STYLES FOR EXTENDED PALETTE === */
|
||||
/* These style MudChip components using extended palette colors */
|
||||
/* Using higher specificity to override MudBlazor defaults without !important */
|
||||
|
||||
.mud-chip.deepdrft-chip-quaternary {
|
||||
background-color: var(--deepdrft-theme-quaternary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mud-chip.deepdrft-chip-quinary {
|
||||
background-color: var(--deepdrft-theme-quinary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mud-chip.deepdrft-chip-senary {
|
||||
background-color: var(--deepdrft-theme-senary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mud-chip.deepdrft-chip-septenary {
|
||||
background-color: var(--deepdrft-theme-septenary);
|
||||
color: white;
|
||||
}
|
||||
Reference in New Issue
Block a user