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

30
src/components/CalendarDay.vue
View File

@ -90,13 +90,25 @@ const props = defineProps({
}
.cell.holiday {
background-color: var(--holiday-bg, rgba(255, 215, 0, 0.1));
border-color: var(--holiday-border, rgba(255, 215, 0, 0.3));
/* Remove solid background & border color overrides; use gradient overlay instead */
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 {
color: var(--holiday-text, #8b4513);
font-weight: bold;
/* Slight emphasis without forcing a specific hue */
color: var(--holiday);
text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.4);
}
.holiday-info {
@ -112,14 +124,10 @@ const props = defineProps({
.holiday-name {
display: block;
background: var(--holiday-label-bg, rgba(255, 215, 0, 0.8));
color: var(--holiday-label-text, #5d4037);
padding: 0.1em 0.2em;
border-radius: 0.2em;
font-weight: 600;
color: var(--holiday-label);
padding: 0.15em 0.35em 0.15em 0.25em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>