diff --git a/package.json b/package.json index 3f44595..236e52b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.106.6", + "version": "1.107.0", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "main": "index.js", "scripts": { diff --git a/src/app/globals.css b/src/app/globals.css index 0032171..6f0e7e1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1360,14 +1360,14 @@ h3 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; - gap: 1.5rem; - width: max-content; + gap: 12px; + width: max-content; min-width: 100%; - padding-bottom: 1rem; + padding: 12px 12px 16px; align-items: flex-start; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; - overflow: visible; /* Let parent container handle scrolling */ + overflow: visible; } /* Scrollbar Styling for Someday Container */ @@ -1413,27 +1413,33 @@ h3 { display: none; } -/* Ruled paper lines for someday tasks */ +/* Someday list cards */ .weekly-someday-list { padding: 0; min-height: 200px; - flex: 0 0 300px; /* Slightly wider lists */ - width: 300px; - transition: transform 0.2s ease, opacity 0.2s ease; + flex: 0 0 240px; + width: 240px; + transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; max-width: 100%; display: flex; flex-direction: column; overflow-y: visible; - scrollbar-width: none; /* Hide scrollbar Firefox */ - -ms-overflow-style: none; /* Hide scrollbar IE/Edge */ + scrollbar-width: none; + -ms-overflow-style: none; + background: var(--weekly-bg, #fff); + border: 1px solid var(--weekly-border, #e5e7eb); + border-radius: 10px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + overflow: hidden; } .weekly-someday-list::-webkit-scrollbar { - display: none; /* Hide scrollbar Chrome/Safari/Webkit */ + display: none; } .weekly-container.dark-mode .weekly-someday-list { background-image: none; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .task-list-slot { @@ -1504,7 +1510,7 @@ h3 { } .weekly-someday-list:last-child { - border-right: none; + /* gap handles spacing, no extra right border needed */ } .weekly-someday-list.is-dragging { @@ -1540,32 +1546,34 @@ h3 { } .weekly-someday-list-title-header { - padding: 0 1rem; + padding: 10px 12px; margin-bottom: 0; - height: 56px; - min-height: 56px; + min-height: 48px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--weekly-border); + background: rgba(0, 0, 0, 0.02); } .weekly-container.dark-mode .weekly-someday-list-title-header { border-bottom-color: var(--weekly-border); + background: rgba(255, 255, 255, 0.03); } .weekly-someday-list-title-input { - font-size: 1.15rem; - font-weight: 800; - letter-spacing: 0.08em; + font-size: 0.85rem; + font-weight: 700; + letter-spacing: 0.06em; color: var(--weekly-text, #222); background: transparent; border: none; flex: 1; min-width: 0; - padding: 4px 0; + padding: 2px 0; outline: none; transition: opacity 0.15s ease; + text-transform: uppercase; } .weekly-someday .weekly-task-item { @@ -1583,17 +1591,17 @@ h3 { .someday-add-task-btn { background: none; border: none; - color: #aaa; + color: #bbb; cursor: pointer; - font-size: 0.85rem; - padding: 4px 0; + font-size: 0.8rem; + padding: 8px 12px; text-align: left; width: 100%; transition: color 0.15s ease; } .someday-add-task-btn:hover { - color: #666; + color: #888; } /* Someday Tabs Bar (horizontal above grid) */ @@ -1602,10 +1610,11 @@ h3 { flex-direction: row; align-items: center; gap: 4px; - padding: 4px 8px; - border-bottom: 1px solid var(--weekly-border); + padding: 8px 12px; + border-bottom: 2px solid var(--weekly-border); overflow-x: auto; scrollbar-width: none; + background: var(--weekly-bg); } .someday-tabs-bar::-webkit-scrollbar { @@ -1617,8 +1626,8 @@ h3 { border: none; cursor: pointer; color: var(--weekly-text-light, #999); - padding: 3px; - border-radius: 4px; + padding: 5px; + border-radius: 6px; display: flex; align-items: center; justify-content: center; @@ -1633,34 +1642,39 @@ h3 { .someday-tabs-bar-divider { width: 1px; - height: 16px; + height: 20px; background: var(--weekly-border, #e5e7eb); flex-shrink: 0; - margin: 0 2px; + margin: 0 4px; } /* Someday Tab Buttons (horizontal) */ .someday-tab-btn-h { - background: none; - border: none; + background: var(--weekly-hover-bg, rgba(0, 0, 0, 0.05)); + border: 1px solid transparent; cursor: pointer; - color: var(--weekly-text-light, #999); - font-size: 0.75rem; - font-weight: 500; - padding: 3px 10px; - border-radius: 3px; + color: var(--weekly-text, #444); + font-size: 0.8rem; + font-weight: 600; + padding: 5px 13px; + border-radius: 20px; white-space: nowrap; - transition: background 0.15s, color 0.15s; + transition: background 0.15s, color 0.15s, box-shadow 0.15s; + display: inline-flex; + align-items: center; + gap: 5px; } .someday-tab-btn-h:hover { - background: var(--weekly-hover-bg, rgba(0, 0, 0, 0.06)); - color: var(--weekly-text, #333); + background: var(--weekly-border, rgba(0, 0, 0, 0.1)); + color: var(--weekly-text, #222); } .someday-tab-btn-h.active { background: var(--weekly-accent, #6366f1); color: #fff; + border-color: transparent; + box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35); } .someday-tab-btn-h.drag-over { @@ -1673,19 +1687,18 @@ h3 { display: inline-flex; align-items: center; justify-content: center; - min-width: 16px; - height: 16px; - padding: 0 4px; - border-radius: 8px; - background: var(--weekly-hover-bg, rgba(0, 0, 0, 0.08)); + min-width: 18px; + height: 18px; + padding: 0 5px; + border-radius: 9px; + background: rgba(0, 0, 0, 0.1); font-size: 0.65rem; - font-weight: 600; + font-weight: 700; line-height: 1; - margin-left: 2px; } .someday-tab-btn-h.active .someday-tab-count { - background: rgba(255, 255, 255, 0.25); + background: rgba(255, 255, 255, 0.3); color: #fff; } @@ -1699,7 +1712,7 @@ h3 { .someday-tab-dissolve-h { position: absolute; right: -4px; - top: -4px; + top: -6px; background: var(--weekly-bg, #fff); border: 1px solid var(--weekly-border, #e5e7eb); border-radius: 50%; diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index 3cd689a..077991a 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -8156,7 +8156,7 @@ export default function WeeklyView() { const listEl = (