mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: AnyDay tabs — white background on all tabs, rounded-top browser-tab style

Browse Source 
Inactive: white bg, subtle border, rounded top corners (6px 6px 0 0)
Active: same white bg + 3px accent-colored bottom border
Tab bar: align-items flex-end + 1px border-bottom so tabs sit flush

v1.107.2
This commit is contained in:
mARTin-B78 2026-05-11 10:26:10 +02:00
parent 50aa310a2d
commit 85912beb4b
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.107.1", "version": "1.107.2",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

26
src/app/globals.css
View File

@ -1610,11 +1610,12 @@ h3 {
.someday-tabs-bar { .someday-tabs-bar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-end;
gap: 2px; gap: 4px;
padding: 0px 12px; padding: 6px 12px 0;
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
border-bottom: 1px solid var(--weekly-border);
} }
.someday-tabs-bar::-webkit-scrollbar { .someday-tabs-bar::-webkit-scrollbar {
@ -1649,19 +1650,19 @@ h3 {
} }
/* Someday Tab Buttons (horizontal) — underline style */ /* Someday Tab Buttons (horizontal) — pill + underline style */
.someday-tab-btn-h { .someday-tab-btn-h {
background: transparent; background: var(--weekly-bg, #fff);
border: none; border: 1px solid var(--weekly-border, #e5e7eb);
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
cursor: pointer; cursor: pointer;
color: var(--weekly-text-light, #888); color: var(--weekly-text-light, #888);
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
padding: 8px 10px 7px; padding: 5px 12px 4px;
border-radius: 0; border-radius: 6px 6px 0 0;
white-space: nowrap; white-space: nowrap;
transition: color 0.15s, border-color 0.15s; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
@ -1669,15 +1670,16 @@ h3 {
.someday-tab-btn-h:hover { .someday-tab-btn-h:hover {
color: var(--weekly-text, #333); color: var(--weekly-text, #333);
background: transparent; border-color: var(--weekly-border, #e5e7eb);
} }
.someday-tab-btn-h.active { .someday-tab-btn-h.active {
color: var(--weekly-text, #222); color: var(--weekly-text, #222);
font-weight: 700; font-weight: 700;
border-color: var(--weekly-border, #e5e7eb);
border-bottom-color: var(--weekly-accent, #6366f1); border-bottom-color: var(--weekly-accent, #6366f1);
background: transparent; background: var(--weekly-bg, #fff);
box-shadow: none; box-shadow: 0 -1px 0 0 var(--weekly-bg, #fff);
} }
.someday-tab-btn-h.drag-over { .someday-tab-btn-h.drag-over {