diff --git a/assets/_colors.css b/assets/_colors.css index 63afdf5..0eaa107 100644 --- a/assets/_colors.css +++ b/assets/_colors.css @@ -118,7 +118,8 @@ .event-button, .event-popover, -.event-callout { +.event-callout, +.card-color { --fg-color: var(--color-foreground); --bg-color: var(--color-background); @@ -126,6 +127,13 @@ transition-timing-function: var(--default-transition-timing-function); } +.event-callout hr, +.card-color hr { + transition-property: border-color; + transition-duration: var(--default-transition-duration); + transition-timing-function: var(--default-transition-timing-function); +} + .event-button { color: var(--fg-color); background-color: var(--bg-color); @@ -206,6 +214,23 @@ background-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background)); } +.card-color { + border-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background)); + background-color: color-mix(in srgb, var(--bg-color) 10%, var(--color-background)); + + hr { + border-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background)) + } +} +.card-color:is(:hover, :focus-visible) { + border-color: color-mix(in srgb, var(--bg-color) 40%, var(--color-background)); + background-color: color-mix(in srgb, var(--bg-color) 20%, var(--color-background)); + + hr { + border-color: color-mix(in srgb, var(--bg-color) 40%, var(--color-background)) + } +} + .bgc { display: flex; align-items: center; diff --git a/assets/theme.css b/assets/theme.css index a17cc0d..96b177e 100644 --- a/assets/theme.css +++ b/assets/theme.css @@ -39,7 +39,7 @@ --background: hsl(180 0 4.9%); --foreground: hsl(210 40% 98%); - --muted: hsl(244 47% 20%); + --muted: hsl(0, 0%, 12%); --muted-foreground: hsl(215 20.2% 65.1%); --popover: hsl(180 0 4.9%); diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue index 6cb9a1c..c221ca9 100644 --- a/components/calendar/Calendar.vue +++ b/components/calendar/Calendar.vue @@ -1,5 +1,5 @@