diff --git a/VERSION b/VERSION index 291cd91..9776e72 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -6.3.9 +6.3.10 diff --git a/play-life-web/package.json b/play-life-web/package.json index c6d6ded..4022dff 100644 --- a/play-life-web/package.json +++ b/play-life-web/package.json @@ -1,6 +1,6 @@ { "name": "play-life-web", - "version": "6.3.9", + "version": "6.3.10", "type": "module", "scripts": { "dev": "vite", diff --git a/play-life-web/src/components/TaskDetail.css b/play-life-web/src/components/TaskDetail.css index 56b5431..56eced9 100644 --- a/play-life-web/src/components/TaskDetail.css +++ b/play-life-web/src/components/TaskDetail.css @@ -204,46 +204,56 @@ top: 0; bottom: 0; display: flex; - align-items: center; + align-items: stretch; flex-shrink: 0; } .progression-control-btn { + position: relative; display: flex; align-items: center; justify-content: center; - width: 2rem; - height: 2rem; + width: 2.375rem; border: none; - background: #f3f4f6; + background: transparent; font-size: 1.125rem; font-weight: 500; color: #6b7280; cursor: pointer; - transition: background 0.2s, color 0.2s; + transition: color 0.2s; + z-index: 1; +} + +.progression-control-btn::after { + content: ''; + position: absolute; + width: 2rem; + height: 2rem; + background: #f3f4f6; + transition: background 0.2s; + z-index: -1; } .progression-control-btn:hover { - background: #e5e7eb; color: #374151; } -.progression-control-btn:active { +.progression-control-btn:hover::after { + background: #e5e7eb; +} + +.progression-control-btn:active::after { background: #d1d5db; } -.progression-control-minus { - border-right: 1px solid #eeeff1; +.progression-control-minus::after { border-radius: 9999px 0 0 9999px; - padding-left: 0.375rem; - margin-left: 0.375rem; + right: 0; } -.progression-control-plus { - border-left: 1px solid #eeeff1; +.progression-control-plus::after { border-radius: 0 9999px 9999px 0; - padding-right: 0.375rem; - margin-right: 0.375rem; + left: 0; } .task-detail-divider {