mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 23:41:08 +02:00
refactor(theme): migrate shared packages to --color-* token naming
Several shared-ui / shared-auth-ui / subscriptions / credits components used shadcn-style bare CSS variables (--muted, --primary, --foreground, etc.), but the Mana theme system standardized on --color-*. The mismatch meant bg-[hsl(var(--muted))] classes resolved to an invalid color and rendered transparent — most visible on the Allgemein settings tab where language and week-start buttons had no background. Mechanical prefix across ~30 files. Two semantic renames: - --destructive → --color-error (Mana uses "error" as the token name) - --popover → --color-card (no popover token; card is the closest) With shared packages on the correct naming, drop the shadcn-compat alias shim from app.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
7c89eb625e
commit
6da317d071
27 changed files with 245 additions and 260 deletions
|
|
@ -13,26 +13,6 @@
|
|||
@layer base {
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
/* shadcn-compat aliases — some shared-ui components (GlobalSettingsSection,
|
||||
a few auth-ui pieces) use bare `--muted`, `--primary`, etc. instead of
|
||||
the `--color-*` tokens this app standardized on. Bridge them here so
|
||||
`bg-[hsl(var(--muted))]` and friends resolve to a real color. */
|
||||
--primary: var(--color-primary);
|
||||
--primary-foreground: var(--color-primary-foreground);
|
||||
--secondary: var(--color-secondary);
|
||||
--secondary-foreground: var(--color-secondary-foreground);
|
||||
--background: var(--color-background);
|
||||
--foreground: var(--color-foreground);
|
||||
--muted: var(--color-muted);
|
||||
--muted-foreground: var(--color-muted-foreground);
|
||||
--border: var(--color-border);
|
||||
--card: var(--color-card);
|
||||
--card-foreground: var(--color-card-foreground);
|
||||
--accent: var(--color-accent);
|
||||
--accent-foreground: var(--color-accent-foreground);
|
||||
--input: var(--color-input);
|
||||
--ring: var(--color-ring);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
transition: all 0.15s ease;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
:global(.dark) .credit-balance__button {
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.credit-balance__total {
|
||||
|
|
@ -247,13 +247,13 @@
|
|||
.credit-balance__value--large {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.credit-balance__free {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.credit-balance__warning {
|
||||
|
|
|
|||
|
|
@ -177,14 +177,14 @@
|
|||
margin: 0 0 1rem 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.pricing-table__empty {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
|
@ -276,12 +276,12 @@
|
|||
.pricing-table__item-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.pricing-table__item-description {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.pricing-table__item-cost {
|
||||
|
|
@ -305,7 +305,7 @@
|
|||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
:global(.dark) .pricing-table__footer {
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@
|
|||
margin: 0 0 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
}
|
||||
|
||||
.credit-toast__remaining {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.credit-toast__dismiss {
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.15s ease;
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
|
||||
.credit-toast__dismiss:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
:global(.dark) .credit-toast__dismiss:hover {
|
||||
|
|
|
|||
|
|
@ -113,22 +113,22 @@
|
|||
{#if tierDenied}
|
||||
<div
|
||||
class="flex items-center justify-center min-h-screen p-6"
|
||||
style:background-color="hsl(var(--background, 0 0% 100%))"
|
||||
style:background-color="hsl(var(--color-background, 0 0% 100%))"
|
||||
>
|
||||
<div
|
||||
class="max-w-96 w-full text-center py-10 px-8 rounded-2xl border shadow-sm"
|
||||
style:border-color="hsl(var(--border, 0 0% 90%))"
|
||||
style:background-color="hsl(var(--card, 0 0% 100%))"
|
||||
style:border-color="hsl(var(--color-border, 0 0% 90%))"
|
||||
style:background-color="hsl(var(--color-card, 0 0% 100%))"
|
||||
>
|
||||
{#if appName}
|
||||
<h1 class="text-xl font-bold mb-4" style:color="hsl(var(--foreground, 0 0% 9%))">
|
||||
<h1 class="text-xl font-bold mb-4" style:color="hsl(var(--color-foreground, 0 0% 9%))">
|
||||
{appName}
|
||||
</h1>
|
||||
{/if}
|
||||
<div class="text-5xl mb-4">🔒</div>
|
||||
<p
|
||||
class="text-[0.9375rem] leading-relaxed mb-6"
|
||||
style:color="hsl(var(--muted-foreground, 0 0% 45%))"
|
||||
style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
|
||||
>
|
||||
{locale === 'en'
|
||||
? `This app is currently in closed `
|
||||
|
|
@ -137,18 +137,18 @@
|
|||
</p>
|
||||
<div
|
||||
class="flex flex-col gap-2 p-4 rounded-xl mb-6"
|
||||
style:background-color="hsl(var(--muted, 0 0% 96%))"
|
||||
style:background-color="hsl(var(--color-muted, 0 0% 96%))"
|
||||
>
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span style:color="hsl(var(--muted-foreground, 0 0% 45%))"
|
||||
<span style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
|
||||
>{locale === 'en' ? 'Your access:' : 'Dein Zugang:'}</span
|
||||
>
|
||||
<span class="font-semibold" style:color="hsl(var(--foreground, 0 0% 9%))"
|
||||
<span class="font-semibold" style:color="hsl(var(--color-foreground, 0 0% 9%))"
|
||||
>{userTierLabel}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span style:color="hsl(var(--muted-foreground, 0 0% 45%))"
|
||||
<span style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
|
||||
>{locale === 'en' ? 'Required:' : 'Benötigt:'}</span
|
||||
>
|
||||
<span class="font-semibold text-violet-500">{requiredTierLabel}</span>
|
||||
|
|
@ -156,8 +156,8 @@
|
|||
</div>
|
||||
<button
|
||||
class="w-full py-2.5 px-4 rounded-lg border-none text-sm font-medium cursor-pointer transition-opacity hover:opacity-90"
|
||||
style:background-color="hsl(var(--primary, 239 84% 67%))"
|
||||
style:color="hsl(var(--primary-foreground, 0 0% 100%))"
|
||||
style:background-color="hsl(var(--color-primary, 239 84% 67%))"
|
||||
style:color="hsl(var(--color-primary-foreground, 0 0% 100%))"
|
||||
onclick={goHome}
|
||||
>
|
||||
{locale === 'en' ? 'Back to overview' : 'Zur Übersicht'}
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@
|
|||
.heatmap-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -218,12 +218,12 @@
|
|||
|
||||
.month-label {
|
||||
font-size: 10px;
|
||||
fill: hsl(var(--muted-foreground));
|
||||
fill: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.day-label {
|
||||
font-size: 10px;
|
||||
fill: hsl(var(--muted-foreground));
|
||||
fill: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.cell {
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
|
||||
.legend-label {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.legend-cells {
|
||||
|
|
@ -268,27 +268,27 @@
|
|||
|
||||
/* Intensity classes using theme primary color */
|
||||
.intensity-0 {
|
||||
fill: hsl(var(--muted) / 0.3);
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
fill: hsl(var(--color-muted) / 0.3);
|
||||
background: hsl(var(--color-muted) / 0.3);
|
||||
}
|
||||
|
||||
.intensity-1 {
|
||||
fill: hsl(var(--primary) / 0.3);
|
||||
background: hsl(var(--primary) / 0.3);
|
||||
fill: hsl(var(--color-primary) / 0.3);
|
||||
background: hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
|
||||
.intensity-2 {
|
||||
fill: hsl(var(--primary) / 0.5);
|
||||
background: hsl(var(--primary) / 0.5);
|
||||
fill: hsl(var(--color-primary) / 0.5);
|
||||
background: hsl(var(--color-primary) / 0.5);
|
||||
}
|
||||
|
||||
.intensity-3 {
|
||||
fill: hsl(var(--primary) / 0.7);
|
||||
background: hsl(var(--primary) / 0.7);
|
||||
fill: hsl(var(--color-primary) / 0.7);
|
||||
background: hsl(var(--color-primary) / 0.7);
|
||||
}
|
||||
|
||||
.intensity-4 {
|
||||
fill: hsl(var(--primary));
|
||||
background: hsl(var(--primary));
|
||||
fill: hsl(var(--color-primary));
|
||||
background: hsl(var(--color-primary));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
.donut-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -206,13 +206,13 @@
|
|||
.center-count {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
fill: hsl(var(--foreground));
|
||||
fill: hsl(var(--color-foreground));
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.center-label {
|
||||
font-size: 12px;
|
||||
fill: hsl(var(--muted-foreground));
|
||||
fill: hsl(var(--color-muted-foreground));
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
|
||||
.legend-item:hover,
|
||||
.legend-item.active {
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
background: hsl(var(--color-muted) / 0.3);
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
|
|
@ -248,13 +248,13 @@
|
|||
|
||||
.legend-label {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.legend-count {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -85,13 +85,13 @@
|
|||
.progress-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
|
||||
.name-text {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
|
||||
.progress-stats {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
background: hsl(var(--color-muted) / 0.3);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
.percentage {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
width: 36px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -143,8 +143,8 @@
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-card));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -162,8 +162,8 @@
|
|||
}
|
||||
|
||||
.chart-card {
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-card));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
|
@ -265,8 +265,8 @@
|
|||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
padding: 1rem;
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-card));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -123,12 +123,12 @@
|
|||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@
|
|||
.chart-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
}
|
||||
|
||||
.grid-line {
|
||||
stroke: hsl(var(--muted) / 0.3);
|
||||
stroke: hsl(var(--color-muted) / 0.3);
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 4 4;
|
||||
}
|
||||
|
|
@ -194,25 +194,25 @@
|
|||
}
|
||||
|
||||
.gradient-start {
|
||||
stop-color: hsl(var(--primary));
|
||||
stop-color: hsl(var(--color-primary));
|
||||
stop-opacity: 0.3;
|
||||
}
|
||||
|
||||
.gradient-end {
|
||||
stop-color: hsl(var(--primary));
|
||||
stop-color: hsl(var(--color-primary));
|
||||
stop-opacity: 0.05;
|
||||
}
|
||||
|
||||
.line-path {
|
||||
fill: none;
|
||||
stroke: hsl(var(--primary));
|
||||
stroke: hsl(var(--color-primary));
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.data-point {
|
||||
fill: hsl(var(--primary));
|
||||
fill: hsl(var(--color-primary));
|
||||
stroke: white;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
|
|
@ -229,13 +229,13 @@
|
|||
|
||||
.y-label {
|
||||
font-size: 10px;
|
||||
fill: hsl(var(--muted-foreground));
|
||||
fill: hsl(var(--color-muted-foreground));
|
||||
text-anchor: end;
|
||||
}
|
||||
|
||||
.x-label {
|
||||
font-size: 10px;
|
||||
fill: hsl(var(--muted-foreground));
|
||||
fill: hsl(var(--color-muted-foreground));
|
||||
text-anchor: middle;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@
|
|||
<style>
|
||||
.app-loading-skeleton {
|
||||
min-height: 100vh;
|
||||
background: hsl(var(--background));
|
||||
background: hsl(var(--color-background));
|
||||
}
|
||||
|
||||
.app-loading-skeleton.sidebar-layout {
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
|
|
@ -273,7 +273,7 @@
|
|||
.centered-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: hsl(var(--card));
|
||||
background: hsl(var(--color-card));
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
|
@ -305,14 +305,14 @@
|
|||
|
||||
.sidebar-skeleton {
|
||||
width: 16rem;
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--card));
|
||||
border-right: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-card));
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -389,8 +389,8 @@
|
|||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem 1rem;
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-card));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -425,8 +425,8 @@
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-card));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -319,10 +319,10 @@
|
|||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--card) / 0.8);
|
||||
background: hsl(var(--color-card) / 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid hsl(var(--border) / 0.5);
|
||||
border: 1px solid hsl(var(--color-border) / 0.5);
|
||||
border-radius: 9999px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -339,17 +339,17 @@
|
|||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 2rem 0.5rem 2.5rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--color-background));
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
|
|
@ -358,12 +358,12 @@
|
|||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
|
||||
border-color: hsl(var(--color-primary));
|
||||
box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.1);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
|
|
@ -374,7 +374,7 @@
|
|||
padding: 0.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
display: flex;
|
||||
|
|
@ -383,17 +383,17 @@
|
|||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
background: hsl(var(--color-muted));
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
background: hsl(var(--background));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-background));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.5rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -402,14 +402,14 @@
|
|||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: hsl(var(--muted));
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
background: hsl(var(--primary) / 0.1);
|
||||
border-color: hsl(var(--primary));
|
||||
color: hsl(var(--primary));
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.filter-badge {
|
||||
|
|
@ -418,7 +418,7 @@
|
|||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: hsl(var(--primary));
|
||||
background: hsl(var(--color-primary));
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -426,7 +426,7 @@
|
|||
display: flex;
|
||||
gap: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
border-left: 1px solid hsl(var(--border));
|
||||
border-left: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
|
||||
.stats {
|
||||
|
|
@ -435,7 +435,7 @@
|
|||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
|
|
@ -446,10 +446,10 @@
|
|||
.filter-panel {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--card) / 0.8);
|
||||
background: hsl(var(--color-card) / 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid hsl(var(--border) / 0.5);
|
||||
border: 1px solid hsl(var(--color-border) / 0.5);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -470,22 +470,22 @@
|
|||
.filter-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--color-background));
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: hsl(var(--primary));
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.clear-filters-btn {
|
||||
|
|
@ -493,17 +493,17 @@
|
|||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: hsl(var(--destructive) / 0.1);
|
||||
border: 1px solid hsl(var(--destructive) / 0.2);
|
||||
background: hsl(var(--color-error) / 0.1);
|
||||
border: 1px solid hsl(var(--color-error) / 0.2);
|
||||
border-radius: 0.5rem;
|
||||
color: hsl(var(--destructive));
|
||||
color: hsl(var(--color-error));
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.clear-filters-btn:hover {
|
||||
background: hsl(var(--destructive) / 0.15);
|
||||
background: hsl(var(--color-error) / 0.15);
|
||||
}
|
||||
|
||||
/* Strength slider */
|
||||
|
|
@ -515,7 +515,7 @@
|
|||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: hsl(var(--muted));
|
||||
background: hsl(var(--color-muted));
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -525,7 +525,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: hsl(var(--primary));
|
||||
background: hsl(var(--color-primary));
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
|
@ -539,7 +539,7 @@
|
|||
height: 16px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: hsl(var(--primary));
|
||||
background: hsl(var(--color-primary));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -547,17 +547,17 @@
|
|||
.keyboard-help {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--card) / 0.8);
|
||||
background: hsl(var(--color-card) / 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid hsl(var(--border) / 0.5);
|
||||
border: 1px solid hsl(var(--color-border) / 0.5);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.keyboard-help-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
|
@ -581,18 +581,18 @@
|
|||
justify-content: center;
|
||||
min-width: 1.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: hsl(var(--muted));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-muted));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.375rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.shortcut-desc {
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
|
|
|||
|
|
@ -375,7 +375,12 @@
|
|||
|
||||
<!-- Favorite indicator -->
|
||||
{#if node.isFavorite}
|
||||
<circle cx={badgeOffset} cy={-badgeOffset} r="10" fill="hsl(var(--background))" />
|
||||
<circle
|
||||
cx={badgeOffset}
|
||||
cy={-badgeOffset}
|
||||
r="10"
|
||||
fill="hsl(var(--color-background))"
|
||||
/>
|
||||
<text
|
||||
x={badgeOffset}
|
||||
y={-badgeOffset}
|
||||
|
|
@ -389,7 +394,7 @@
|
|||
|
||||
<!-- Connection count badge -->
|
||||
{#if node.connectionCount > 0}
|
||||
<circle cx={-badgeOffset} cy={-badgeOffset} r="12" fill="hsl(var(--primary))" />
|
||||
<circle cx={-badgeOffset} cy={-badgeOffset} r="12" fill="hsl(var(--color-primary))" />
|
||||
<text
|
||||
x={-badgeOffset}
|
||||
y={-badgeOffset}
|
||||
|
|
@ -479,7 +484,7 @@
|
|||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: hsl(var(--background));
|
||||
background: hsl(var(--color-background));
|
||||
}
|
||||
|
||||
.network-graph-svg {
|
||||
|
|
@ -493,7 +498,7 @@
|
|||
|
||||
/* Links */
|
||||
.link {
|
||||
stroke: hsl(var(--muted-foreground) / 0.3);
|
||||
stroke: hsl(var(--color-muted-foreground) / 0.3);
|
||||
transition:
|
||||
stroke 0.2s,
|
||||
stroke-width 0.2s,
|
||||
|
|
@ -501,7 +506,7 @@
|
|||
}
|
||||
|
||||
.link.highlighted {
|
||||
stroke: hsl(var(--primary));
|
||||
stroke: hsl(var(--color-primary));
|
||||
stroke-width: 3 !important;
|
||||
}
|
||||
|
||||
|
|
@ -510,7 +515,7 @@
|
|||
}
|
||||
|
||||
.link.hovered {
|
||||
stroke: hsl(var(--primary));
|
||||
stroke: hsl(var(--color-primary));
|
||||
stroke-width: 3 !important;
|
||||
}
|
||||
|
||||
|
|
@ -529,12 +534,12 @@
|
|||
}
|
||||
|
||||
.node.selected .node-circle {
|
||||
stroke: hsl(var(--primary));
|
||||
stroke: hsl(var(--color-primary));
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.node.connected .node-circle {
|
||||
stroke: hsl(var(--primary) / 0.5);
|
||||
stroke: hsl(var(--color-primary) / 0.5);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
|
|
@ -556,13 +561,13 @@
|
|||
}
|
||||
|
||||
.node-label {
|
||||
fill: hsl(var(--foreground));
|
||||
fill: hsl(var(--color-foreground));
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.node-subtitle {
|
||||
fill: hsl(var(--muted-foreground));
|
||||
fill: hsl(var(--color-muted-foreground));
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -585,12 +590,12 @@
|
|||
.empty-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
max-width: 300px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -600,10 +605,10 @@
|
|||
position: absolute;
|
||||
transform: translate(-50%, -100%) translateY(-12px);
|
||||
padding: 0.75rem 1rem;
|
||||
background: hsl(var(--popover));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--color-card));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
|
||||
box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.1);
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
min-width: 200px;
|
||||
|
|
@ -618,11 +623,11 @@
|
|||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.tooltip-strength {
|
||||
|
|
@ -634,25 +639,25 @@
|
|||
}
|
||||
|
||||
.strength-label {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.strength-value {
|
||||
font-weight: 600;
|
||||
color: hsl(var(--primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.strength-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: hsl(var(--muted));
|
||||
background: hsl(var(--color-muted));
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.strength-fill {
|
||||
height: 100%;
|
||||
background: hsl(var(--primary));
|
||||
background: hsl(var(--color-primary));
|
||||
border-radius: 2px;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
|
@ -667,11 +672,11 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.625rem;
|
||||
background: hsl(var(--primary) / 0.1);
|
||||
border: 1px solid hsl(var(--primary) / 0.2);
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
border: 1px solid hsl(var(--color-primary) / 0.2);
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -360,19 +360,19 @@
|
|||
.profile-page__avatar-initials {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--primary, 221 83% 53%));
|
||||
color: hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
.profile-page__title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.profile-page__subtitle {
|
||||
font-size: 1rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -383,7 +383,7 @@
|
|||
.profile-page__section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -434,7 +434,7 @@
|
|||
.profile-page__info-icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: hsl(var(--primary, 221 83% 53%));
|
||||
color: hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
.profile-page__info-content {
|
||||
|
|
@ -447,13 +447,13 @@
|
|||
.profile-page__info-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.profile-page__info-value {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
|
@ -479,7 +479,7 @@
|
|||
transition: all 0.2s ease;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -501,7 +501,7 @@
|
|||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
color: hsl(var(--primary, 221 83% 53%));
|
||||
color: hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
.profile-page__action-btn--secondary {
|
||||
|
|
@ -513,7 +513,7 @@
|
|||
}
|
||||
|
||||
.profile-page__action-btn--secondary svg {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.profile-page__action-btn--danger {
|
||||
|
|
@ -533,7 +533,7 @@
|
|||
.profile-page__warning {
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
|
||||
<SettingsCard>
|
||||
<div class="p-5">
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))] mb-6">{description}</p>
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))] mb-6">{description}</p>
|
||||
|
||||
<div class="space-y-6">
|
||||
{#if showNavVisibility && appId && navItems.length > 0}
|
||||
|
|
@ -132,19 +132,19 @@
|
|||
<!-- Theme Settings -->
|
||||
<div
|
||||
class="space-y-4 {showNavVisibility && appId
|
||||
? 'pt-4 border-t border-[hsl(var(--border))]'
|
||||
? 'pt-4 border-t border-[hsl(var(--color-border))]'
|
||||
: ''}"
|
||||
>
|
||||
<h3
|
||||
class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
|
||||
class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
|
||||
>
|
||||
Erscheinungsbild
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<p class="font-medium text-[hsl(var(--foreground))]">Farbmodus</p>
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
<p class="font-medium text-[hsl(var(--color-foreground))]">Farbmodus</p>
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
Hell, Dunkel oder automatisch
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -153,8 +153,8 @@
|
|||
<button
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
|
||||
.globalSettings.theme.mode === mode
|
||||
? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
|
||||
: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
|
||||
? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
|
||||
: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
|
||||
onclick={() => handleThemeModeChange(mode as ThemeMode)}
|
||||
>
|
||||
{mode === 'light' ? 'Hell' : mode === 'dark' ? 'Dunkel' : 'System'}
|
||||
|
|
@ -164,11 +164,11 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between py-2 border-t border-[hsl(var(--border))]"
|
||||
class="flex items-center justify-between py-2 border-t border-[hsl(var(--color-border))]"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-[hsl(var(--foreground))]">Farbschema</p>
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
<p class="font-medium text-[hsl(var(--color-foreground))]">Farbschema</p>
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
Akzentfarbe der Benutzeroberfläche
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
<button
|
||||
class="w-7 h-7 rounded-full transition-all {scheme.color} {userSettings
|
||||
.globalSettings.theme.colorScheme === scheme.id
|
||||
? 'ring-2 ring-offset-2 ring-[hsl(var(--primary))]'
|
||||
? 'ring-2 ring-offset-2 ring-[hsl(var(--color-primary))]'
|
||||
: 'hover:scale-110'}"
|
||||
onclick={() => handleColorSchemeChange(scheme.id)}
|
||||
title={scheme.label}
|
||||
|
|
@ -192,19 +192,19 @@
|
|||
<!-- Language Settings -->
|
||||
<div
|
||||
class="space-y-4 {showTheme || (showNavVisibility && appId)
|
||||
? 'pt-4 border-t border-[hsl(var(--border))]'
|
||||
? 'pt-4 border-t border-[hsl(var(--color-border))]'
|
||||
: ''}"
|
||||
>
|
||||
<h3
|
||||
class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
|
||||
class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
|
||||
>
|
||||
Sprache
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<p class="font-medium text-[hsl(var(--foreground))]">Anzeigesprache</p>
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
<p class="font-medium text-[hsl(var(--color-foreground))]">Anzeigesprache</p>
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
Sprache der Benutzeroberfläche
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -213,8 +213,8 @@
|
|||
<button
|
||||
class="px-2.5 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
|
||||
.globalSettings.locale === lang.id
|
||||
? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
|
||||
: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
|
||||
? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
|
||||
: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
|
||||
onclick={() => handleLocaleChange(lang.id)}
|
||||
>
|
||||
{lang.label}
|
||||
|
|
@ -229,11 +229,11 @@
|
|||
<!-- General Settings -->
|
||||
<div
|
||||
class="space-y-4 {showLanguage || showTheme || (showNavVisibility && appId)
|
||||
? 'pt-4 border-t border-[hsl(var(--border))]'
|
||||
? 'pt-4 border-t border-[hsl(var(--color-border))]'
|
||||
: ''}"
|
||||
>
|
||||
<h3
|
||||
class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
|
||||
class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
|
||||
>
|
||||
Allgemein
|
||||
</h3>
|
||||
|
|
@ -242,13 +242,13 @@
|
|||
<!-- Start Page Selector -->
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<p class="font-medium text-[hsl(var(--foreground))]">Startseite</p>
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
<p class="font-medium text-[hsl(var(--color-foreground))]">Startseite</p>
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
Welche Seite beim Öffnen der App angezeigt wird
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-lg bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] border-none cursor-pointer appearance-none pr-8 bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem]"
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-lg bg-[hsl(var(--color-muted))] text-[hsl(var(--color-foreground))] border-none cursor-pointer appearance-none pr-8 bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem]"
|
||||
value={currentStartPage}
|
||||
onchange={handleStartPageChange}
|
||||
>
|
||||
|
|
@ -264,12 +264,12 @@
|
|||
<!-- Week Start Day -->
|
||||
<div
|
||||
class="flex items-center justify-between py-2 {appId && availableRoutes.length > 1
|
||||
? 'border-t border-[hsl(var(--border))]'
|
||||
? 'border-t border-[hsl(var(--color-border))]'
|
||||
: ''}"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-[hsl(var(--foreground))]">Wochenstart</p>
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
<p class="font-medium text-[hsl(var(--color-foreground))]">Wochenstart</p>
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
Erster Tag der Woche in Kalendern
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -277,8 +277,8 @@
|
|||
<button
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
|
||||
.general?.weekStartsOn === 'monday'
|
||||
? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
|
||||
: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
|
||||
? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
|
||||
: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
|
||||
onclick={() => handleWeekStartChange('monday')}
|
||||
>
|
||||
Montag
|
||||
|
|
@ -286,8 +286,8 @@
|
|||
<button
|
||||
class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
|
||||
.general?.weekStartsOn === 'sunday'
|
||||
? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
|
||||
: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
|
||||
? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
|
||||
: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
|
||||
onclick={() => handleWeekStartChange('sunday')}
|
||||
>
|
||||
Sonntag
|
||||
|
|
@ -297,18 +297,18 @@
|
|||
|
||||
<!-- Sounds Toggle -->
|
||||
<div
|
||||
class="flex items-center justify-between py-2 border-t border-[hsl(var(--border))]"
|
||||
class="flex items-center justify-between py-2 border-t border-[hsl(var(--color-border))]"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-[hsl(var(--foreground))]">Sounds</p>
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))]">
|
||||
<p class="font-medium text-[hsl(var(--color-foreground))]">Sounds</p>
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
Sound-Effekte in allen Apps
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {(userSettings
|
||||
.general?.soundsEnabled ?? true)
|
||||
? 'bg-[hsl(var(--primary))]'
|
||||
? 'bg-[hsl(var(--color-primary))]'
|
||||
: 'bg-gray-200 dark:bg-gray-700'}"
|
||||
onclick={() => handleSoundsChange(!(userSettings.general?.soundsEnabled ?? true))}
|
||||
aria-label="Toggle sound effects"
|
||||
|
|
@ -326,9 +326,9 @@
|
|||
</div>
|
||||
|
||||
{#if userSettings.syncing}
|
||||
<div class="mt-4 flex items-center gap-2 text-sm text-[hsl(var(--muted-foreground))]">
|
||||
<div class="mt-4 flex items-center gap-2 text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
<div
|
||||
class="h-4 w-4 animate-spin rounded-full border-2 border-[hsl(var(--primary))] border-t-transparent"
|
||||
class="h-4 w-4 animate-spin rounded-full border-2 border-[hsl(var(--color-primary))] border-t-transparent"
|
||||
></div>
|
||||
<span>Synchronisiere...</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -148,11 +148,11 @@
|
|||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3
|
||||
class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
|
||||
class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
|
||||
>
|
||||
Navigation anpassen
|
||||
</h3>
|
||||
<p class="text-sm text-[hsl(var(--muted-foreground))] mt-1">
|
||||
<p class="text-sm text-[hsl(var(--color-muted-foreground))] mt-1">
|
||||
Versteckte Seiten bleiben über die URL erreichbar
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -162,12 +162,12 @@
|
|||
{@const hidden = hiddenItems.includes(item.href)}
|
||||
{@const IconComponent = item.icon ? phosphorIcons[item.icon] : null}
|
||||
<label
|
||||
class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-[hsl(var(--muted))]/50 cursor-pointer transition-colors border border-transparent hover:border-[hsl(var(--border))]"
|
||||
class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-[hsl(var(--color-muted))]/50 cursor-pointer transition-colors border border-transparent hover:border-[hsl(var(--color-border))]"
|
||||
>
|
||||
<span
|
||||
class="flex items-center gap-3 text-sm {hidden
|
||||
? 'text-[hsl(var(--muted-foreground))]'
|
||||
: 'text-[hsl(var(--foreground))]'}"
|
||||
? 'text-[hsl(var(--color-muted-foreground))]'
|
||||
: 'text-[hsl(var(--color-foreground))]'}"
|
||||
>
|
||||
{#if IconComponent}
|
||||
<span class="flex-shrink-0 {hidden ? 'opacity-50' : ''}">
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
<button
|
||||
type="button"
|
||||
class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors {!hidden
|
||||
? 'bg-[hsl(var(--primary))]'
|
||||
? 'bg-[hsl(var(--color-primary))]'
|
||||
: 'bg-gray-200 dark:bg-gray-700'}"
|
||||
onclick={() => handleToggle(item.href)}
|
||||
aria-label={hidden ? 'Einblenden' : 'Ausblenden'}
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
.toc-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1rem 0;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
text-align: left;
|
||||
padding: 0.625rem 0.875rem;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
|
|
@ -217,13 +217,13 @@
|
|||
}
|
||||
|
||||
.toc-item:hover {
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
color: hsl(var(--color-foreground));
|
||||
background: hsl(var(--color-muted) / 0.5);
|
||||
}
|
||||
|
||||
.toc-item.active {
|
||||
color: hsl(var(--primary));
|
||||
background: hsl(var(--primary) / 0.12);
|
||||
color: hsl(var(--color-primary));
|
||||
background: hsl(var(--color-primary) / 0.12);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
color: hsl(var(--primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.section-icon :global(svg) {
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
onclick={handleToggle}
|
||||
class="relative w-12 h-7 rounded-full border flex-shrink-0 transition-all duration-200
|
||||
{isOn
|
||||
? 'bg-primary border-primary shadow-[0_0_0_2px_hsl(var(--primary)/0.2)] dark:shadow-[0_0_0_2px_hsl(var(--primary)/0.3)]'
|
||||
? 'bg-primary border-primary shadow-[0_0_0_2px_hsl(var(--color-primary)/0.2)] dark:shadow-[0_0_0_2px_hsl(var(--color-primary)/0.3)]'
|
||||
: 'bg-black/[0.08] border-black/10 dark:bg-white/[0.12] dark:border-white/[0.15]'}
|
||||
{!disabled
|
||||
? 'cursor-pointer hover:border-black/20 dark:hover:border-white/25'
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.billing-toggle__button--yearly {
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
|
||||
.billing-toggle__button--active {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: hsl(var(--primary, 221 83% 53%));
|
||||
color: hsl(var(--color-primary, 221 83% 53%));
|
||||
font-weight: 600;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -111,6 +111,6 @@
|
|||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: hsl(var(--primary, 221 83% 53%));
|
||||
background: hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
margin: 0 0 1rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.cost-card__list {
|
||||
|
|
@ -99,19 +99,19 @@
|
|||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin-right: 0.5rem;
|
||||
color: hsl(var(--primary, 221 83% 53%));
|
||||
color: hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
.cost-card__action {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.cost-card__cost {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
}
|
||||
|
||||
.package-card--popular {
|
||||
border: 2px solid hsl(var(--primary, 221 83% 53%));
|
||||
border: 2px solid hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
.package-card__badge {
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: hsl(var(--primary, 221 83% 53%));
|
||||
background: hsl(var(--color-primary, 221 83% 53%));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
text-align: center;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.package-card__grid {
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
margin: 0 0 0.125rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -199,21 +199,21 @@
|
|||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.package-card__label {
|
||||
margin: 0;
|
||||
font-size: 0.625rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.package-card__sublabel {
|
||||
margin: 0.125rem 0 0 0;
|
||||
font-size: 0.5rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
.subscription-button--primary {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
:global(.dark) .subscription-button--primary {
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
.subscription-button--secondary {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
:global(.dark) .subscription-button--secondary {
|
||||
|
|
@ -116,8 +116,8 @@
|
|||
}
|
||||
|
||||
.subscription-button--accent {
|
||||
background: hsl(var(--primary, 221 83% 53%));
|
||||
border: 1px solid hsl(var(--primary, 221 83% 53%));
|
||||
background: hsl(var(--color-primary, 221 83% 53%));
|
||||
border: 1px solid hsl(var(--color-primary, 221 83% 53%));
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -163,11 +163,11 @@
|
|||
}
|
||||
|
||||
.subscription-card--current {
|
||||
border: 2px solid hsl(var(--primary, 221 83% 53%));
|
||||
border: 2px solid hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
.subscription-card--popular {
|
||||
border: 2px solid hsl(var(--primary, 221 83% 53%));
|
||||
border: 2px solid hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
.subscription-card__badge {
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: hsl(var(--primary, 221 83% 53%));
|
||||
background: hsl(var(--color-primary, 221 83% 53%));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
text-align: center;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.subscription-card__grid {
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -241,21 +241,21 @@
|
|||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subscription-card__label {
|
||||
margin: 0;
|
||||
font-size: 0.625rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subscription-card__sublabel {
|
||||
margin: 0.125rem 0 0 0;
|
||||
font-size: 0.5rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.usage-card__value-wrapper {
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.usage-card__progress-track {
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.usage-card__plan {
|
||||
|
|
@ -189,6 +189,6 @@
|
|||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@
|
|||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
color: hsl(var(--primary, 221 83% 53%));
|
||||
color: hsl(var(--color-primary, 221 83% 53%));
|
||||
}
|
||||
|
||||
:global(.dark) .subscription-page__icon {
|
||||
|
|
@ -206,13 +206,13 @@
|
|||
.subscription-page__title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.subscription-page__subtitle {
|
||||
font-size: 1rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
.subscription-page__section-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue