bboysoul/dodo
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: snap floating add button to edge
ci / gitleaks (push) Successful in 7s
Details
ci / docker (push) Successful in 3m37s
Details

Browse Source
This commit is contained in:
bboysoul
2026-09-11 17:07:27 +08:00
parent 78d178be77
commit e5cede1b98
5 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/style.css
+1 -1
View File
@@ -35,7 +35,7 @@ main{container-type:inline-size;min-width:0;padding:27px 34px 50px;overflow:auto
@media(max-width:930px){.task-row,.habit-row,.countdown-row{min-height:62px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:none}.task-list,.habit-list,.countdown-timeline{display:grid;gap:8px}.task-row{padding:4px 7px}.task-row:hover,.task-row.selected{background:#fffaf5}.habit-row{padding:4px 7px}.countdown-row,.countdown-row:first-of-type{border:1px solid var(--line)}.countdown-row{grid-template-columns:minmax(0,1fr) 72px;padding:8px 9px;gap:8px}.task-main strong,.habit-name,.countdown-main>b{font-size:14px;font-weight:650}.meta,.countdown-main>small,.countdown-state small{font-size:11px;color:var(--muted)}.habit-progress{font-size:16px}.task-check{width:44px;flex-basis:44px}.countdown-icon{width:36px;height:36px;border-radius:10px}.countdown-state strong{font-size:24px}.countdown-group{gap:8px}.countdown-group>h3{padding-left:3px}.habit-detail-mask{padding:0}.habit-detail-sheet{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}}
@media(max-width:800px){.settings-grid{grid-template-columns:1fr}.tool-card.wide{grid-column:auto}.habit-main{padding:10px 2px}.numeric-action input{width:62px}}
@media(max-width:390px){.task-compose-sheet{width:100%;max-width:100%;overflow-x:hidden}.task-compose-sheet .app-sheet__header>button{min-width:44px;min-height:44px}.task-compose-sheet input,.task-compose-sheet select,.task-compose-sheet button{min-height:44px}.task-compose-date-clear,.task-compose-time-remove{min-width:44px;min-height:44px}.task-compose-sheet .app-sheet__footer>button{min-height:44px}.habit-detail-sheet,.habit-compose-sheet{width:100%;max-width:100%}.habit-detail-sheet .app-sheet__header>button,.habit-compose-sheet .app-sheet__header>button{min-width:44px;min-height:44px}.habit-detail-sheet .app-sheet__footer>button,.habit-detail-sheet .app-sheet__danger>button,.habit-compose-sheet .app-sheet__footer>button{min-height:44px}}
.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;border:0;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(241,90,41,.28);transition:transform .16s ease,box-shadow .16s ease;touch-action:none;user-select:none}.unified-fab svg{width:25px;height:25px}.unified-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(241,90,41,.32)}.unified-fab:active{transform:scale(.96)}.unified-fab.dragging{transform:scale(1.06);box-shadow:0 12px 28px rgba(241,90,41,.36)}.app-sheet-mask.app-sheet-mask{background:var(--sheet-scrim);overscroll-behavior:contain}.app-sheet{min-height:0;overflow:hidden;background:var(--paper)}.app-sheet__header{min-height:64px;flex:0 0 64px;position:sticky;z-index:3;top:0;background:var(--paper);border-bottom:1px solid var(--line);padding:0 18px}.app-sheet__header>div{min-width:0}.app-sheet__header h2,.app-sheet__header h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-sheet__header>button{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;background:transparent;border-radius:10px}.app-sheet__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:14px;padding:16px 18px}.app-sheet__footer{position:sticky;bottom:0;z-index:3;margin:0;background:var(--paper);border-top:1px solid var(--line);padding:12px 18px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end;gap:8px}.app-sheet__danger{border-top:1px solid #f1d4cd;background:#fff8f6;padding:12px 18px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end}.app-sheet--actions .app-sheet__body{gap:6px;padding:8px 16px calc(16px + env(safe-area-inset-bottom))}.app-sheet--actions .app-sheet__body>button{min-height:50px;width:100%;display:flex;align-items:center;gap:12px;border:0;background:#fff;padding:13px;border-radius:12px;text-align:left}
.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;border:0;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(241,90,41,.28);transition:left .2s cubic-bezier(.2,.8,.3,1),top .2s cubic-bezier(.2,.8,.3,1),transform .16s ease,box-shadow .16s ease;touch-action:none;user-select:none}.unified-fab svg{width:25px;height:25px}.unified-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(241,90,41,.32)}.unified-fab:active{transform:scale(.96)}.unified-fab.dragging{transform:scale(1.06);box-shadow:0 12px 28px rgba(241,90,41,.36);transition:transform .16s ease,box-shadow .16s ease}.unified-fab.snapping{box-shadow:0 10px 24px rgba(241,90,41,.32)}.app-sheet-mask.app-sheet-mask{background:var(--sheet-scrim);overscroll-behavior:contain}.app-sheet{min-height:0;overflow:hidden;background:var(--paper)}.app-sheet__header{min-height:64px;flex:0 0 64px;position:sticky;z-index:3;top:0;background:var(--paper);border-bottom:1px solid var(--line);padding:0 18px}.app-sheet__header>div{min-width:0}.app-sheet__header h2,.app-sheet__header h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-sheet__header>button{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;background:transparent;border-radius:10px}.app-sheet__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:14px;padding:16px 18px}.app-sheet__footer{position:sticky;bottom:0;z-index:3;margin:0;background:var(--paper);border-top:1px solid var(--line);padding:12px 18px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end;gap:8px}.app-sheet__danger{border-top:1px solid #f1d4cd;background:#fff8f6;padding:12px 18px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end}.app-sheet--actions .app-sheet__body{gap:6px;padding:8px 16px calc(16px + env(safe-area-inset-bottom))}.app-sheet--actions .app-sheet__body>button{min-height:50px;width:100%;display:flex;align-items:center;gap:12px;border:0;background:#fff;padding:13px;border-radius:12px;text-align:left}
@media(max-width:930px){.app-sheet{width:100%;max-height:min(88dvh,760px);display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:var(--sheet-radius) var(--sheet-radius) 0 0!important;padding:0!important}.app-sheet--detail,.app-sheet--create{max-width:none!important}.app-sheet-mask{padding:0!important;place-items:end center!important;align-items:flex-end!important}.app-sheet__header{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%}.app-sheet__body{width:100%;flex:1 1 auto}.app-sheet__body label{display:grid;gap:6px}.app-sheet__footer{width:100%;flex:0 0 auto}.app-sheet__footer .primary-small{min-width:124px}.app-sheet__danger{width:100%;flex:0 0 auto}.app-sheet__danger .danger-text{width:100%;min-height:48px;justify-content:center}}
.calendar-picker-layer{position:fixed;z-index:90;inset:0;pointer-events:none}.calendar-picker{position:fixed;width:328px;background:#fffdf8;border:1px solid #ded6ca;border-radius:18px;box-shadow:0 18px 46px rgba(56,40,24,.2);padding:14px;display:grid;gap:10px;pointer-events:auto;color:var(--text)}.calendar-picker__header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:4px}.calendar-picker__header h3{margin:0;text-align:center;font-size:16px}.calendar-picker__header button,.calendar-picker__grid button{border:0;background:transparent;display:grid;place-items:center}.calendar-picker__header button{width:40px;height:40px;border-radius:10px}.calendar-picker__header svg{width:18px}.calendar-picker__close{display:none!important}.calendar-picker__weekdays,.calendar-picker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-picker__weekdays span{text-align:center;color:var(--muted);font-size:11px;padding:3px 0}.calendar-picker__grid button{height:34px;border-radius:10px;color:#4f483f;font-size:13px}.calendar-picker__grid button:hover,.calendar-picker__grid button:focus-visible{background:#f6ede2;outline:2px solid transparent}.calendar-picker__grid button.outside{color:#b9b0a5}.calendar-picker__grid button.today{box-shadow:inset 0 0 0 1px var(--accent);color:#b7421e}.calendar-picker__grid button.selected{background:var(--accent);color:#fff}.calendar-picker__grid button.selected.today{box-shadow:inset 0 0 0 1px #fff}.calendar-picker__footer{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:4px;border-top:1px solid #e8e0d5;padding-top:10px}.calendar-picker__footer button{min-height:36px;border:0;background:transparent;border-radius:9px;padding:0 9px;color:#6d6459;font-weight:650}.calendar-picker__footer button:hover{background:#f6ede2}.calendar-picker__footer .calendar-picker__done{background:var(--accent);color:#fff}.calendar-picker__footer .calendar-picker__done:hover{background:#df4e22}@media(max-width:600px){.calendar-picker-layer{pointer-events:auto;background:rgba(45,38,31,.3);display:flex;align-items:flex-end}.calendar-picker{position:relative!important;left:auto!important;top:auto!important;width:100%;height:min(520px,72dvh);border-width:1px 0 0;border-radius:24px 24px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));grid-template-rows:auto auto 1fr auto}.calendar-picker__header{grid-template-columns:44px 1fr 44px 44px}.calendar-picker__close{display:grid!important}.calendar-picker__grid{align-content:stretch}.calendar-picker__grid button{height:auto;min-height:42px}.calendar-picker__footer button{min-height:44px}}