diff --git a/frontend/src/App.css b/frontend/src/App.css index 1444aa9..bc3f59c 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1911,3 +1911,131 @@ textarea { min-height: 48px; } } + +/* Add set button */ +.add-set-btn { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 44px; + margin-top: 0.5rem; + padding: 0.5rem 1rem; + background: transparent; + border: 1px dashed var(--border); + border-radius: 8px; + color: var(--text-secondary); + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: border-color 0.15s, color 0.15s; +} + +.add-set-btn:hover { + border-color: var(--accent); + color: var(--accent); +} + +/* Delete set button */ +.delete-set-btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + min-height: 44px; + background: transparent; + border: none; + color: var(--text-secondary); + cursor: pointer; + opacity: 0.6; + transition: opacity 0.15s, color 0.15s; + flex-shrink: 0; +} + +.delete-set-btn:hover:not(:disabled) { + color: #e53e3e; + opacity: 1; +} + +.delete-set-btn:disabled, +.delete-set-btn.disabled { + opacity: 0.2; + cursor: not-allowed; +} + +/* Set type modal */ +.set-type-modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: flex-end; + justify-content: center; + z-index: 200; + padding-bottom: env(safe-area-inset-bottom, 0); +} + +.set-type-modal { + background: var(--bg-card); + border-radius: 16px 16px 0 0; + padding: 1.5rem 1rem 2rem; + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.set-type-modal h3 { + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + margin: 0 0 0.25rem; + text-align: center; +} + +.set-type-option { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.2rem; + width: 100%; + min-height: 56px; + padding: 0.75rem 1rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 10px; + cursor: pointer; + text-align: left; + transition: border-color 0.15s; +} + +.set-type-option strong { + font-size: 1rem; + color: var(--text-primary); +} + +.set-type-option span { + font-size: 0.8rem; + color: var(--text-secondary); +} + +.set-type-option:hover { + border-color: var(--accent); +} + +.set-type-option.dropset strong { + color: var(--accent); +} + +.set-type-cancel { + width: 100%; + min-height: 44px; + padding: 0.75rem; + background: transparent; + border: none; + color: var(--text-secondary); + font-size: 0.9rem; + cursor: pointer; + margin-top: 0.25rem; +}