LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Holiday styling more conservative.

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-23 18:09:58 -06:00
parent b5d6510e09
commit 0a80d364f1
2 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/colors.css
View File

@ -23,9 +23,9 @@
/* Holiday colors */ /* Holiday colors */
--holiday-bg: rgba(255, 215, 0, 0.1); --holiday-bg: rgba(255, 215, 0, 0.1);
--holiday-border: rgba(255, 215, 0, 0.3); --holiday-border: rgba(255, 215, 0, 0.3);
--holiday-text: #8b4513; --holiday: #8b4513;
--holiday-label-bg: rgba(255, 215, 0, 0.8); --holiday-label-bg: rgba(255, 215, 0, 0.8);
--holiday-label-text: #5d4037; --holiday-label: #5d4037;
/* Input / recurrence tokens */ /* Input / recurrence tokens */
--input-border: var(--muted-alt); --input-border: var(--muted-alt);
@ -139,11 +139,8 @@
--border-color: #333; --border-color: #333;
/* Holiday colors (dark mode) */ /* Holiday colors (dark mode) */
--holiday-bg: rgba(255, 193, 7, 0.15); --holiday: #ffc107;
--holiday-border: rgba(255, 193, 7, 0.4); --holiday-label: #fff8e1;
--holiday-text: #ffc107;
--holiday-label-bg: rgba(255, 193, 7, 0.2);
--holiday-label-text: #fff8e1;
} }
.dec { .dec {

30
src/components/CalendarDay.vue
View File

@ -90,13 +90,25 @@ const props = defineProps({
} }
.cell.holiday { .cell.holiday {
background-color: var(--holiday-bg, rgba(255, 215, 0, 0.1)); /* Remove solid background & border color overrides; use gradient overlay instead */
border-color: var(--holiday-border, rgba(255, 215, 0, 0.3)); position: relative;
}
.cell.holiday::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
var(--holiday-grad-start, rgba(255, 255, 255, 0.1)) 0%,
var(--holiday-grad-end, rgba(255, 255, 255, 0)) 70%
);
pointer-events: none;
mix-blend-mode: normal; /* can switch to 'overlay' or 'screen' if thematic */
} }
.cell.holiday h1 { .cell.holiday h1 {
color: var(--holiday-text, #8b4513); /* Slight emphasis without forcing a specific hue */
font-weight: bold; color: var(--holiday);
text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.4);
} }
.holiday-info { .holiday-info {
@ -112,14 +124,10 @@ const props = defineProps({
.holiday-name { .holiday-name {
display: block; display: block;
background: var(--holiday-label-bg, rgba(255, 215, 0, 0.8)); color: var(--holiday-label);
color: var(--holiday-label-text, #5d4037); padding: 0.15em 0.35em 0.15em 0.25em;
padding: 0.1em 0.2em;
border-radius: 0.2em;
font-weight: 600;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
</style> </style>