diff --git a/index.html b/index.html index 26d058a..efbfaa9 100644 --- a/index.html +++ b/index.html @@ -696,9 +696,10 @@ -
- - +
+ Eigene Zeit… + +
diff --git a/src/abs.js b/src/abs.js index 82ce5ce..1a41da5 100644 --- a/src/abs.js +++ b/src/abs.js @@ -317,6 +317,7 @@ export function absSleepIn(minutes) { clearTimeout(_sleepTimer); clearInterval(_sleepTick); _sleepTimer = null; _sleepTick = null; _sleepEndTime = null; document.getElementById('abs-sleep-picker')?.classList.remove('open'); + document.getElementById('abs-sleep-custom-row')?.classList.remove('active'); if (!minutes) { S.absPlayer.sleepRemaining = null; _renderSleepBtn(); return; } _sleepEndTime = Date.now() + minutes * 60_000; _updateSleepTick(); diff --git a/styles.css b/styles.css index 5454631..d513e21 100644 --- a/styles.css +++ b/styles.css @@ -937,9 +937,15 @@ nav{flex:1;overflow-y:auto;padding:4px 10px} .abs-picker button{display:block;width:100%;padding:9px 16px;background:none;border:none;color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;text-align:left;transition:background .15s;white-space:nowrap} .abs-picker button:hover{background:var(--surface2)} .abs-picker button.active{color:var(--accent);font-weight:700} -.abs-sleep-custom{display:flex;align-items:center;gap:4px;padding:6px 8px;border-top:1px solid var(--border2)} -.abs-sleep-custom input{flex:1;min-width:0;padding:5px 8px;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--font);font-size:13px;outline:none} -.abs-sleep-custom button{padding:5px 10px;background:var(--accent);border:none;border-radius:6px;color:#fff;font-family:var(--font);font-size:13px;cursor:pointer;white-space:nowrap} +.abs-sleep-custom-row{display:flex;align-items:center;gap:6px;width:100%;padding:9px 16px;background:none;border:none;border-top:1px solid var(--border2);color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;text-align:left;box-sizing:border-box;transition:background .15s} +.abs-sleep-custom-row:hover{background:var(--surface2)} +.abs-sleep-custom-row.active{background:var(--surface2);cursor:default;padding:8px 10px} +.abs-sleep-custom-label{flex:1;pointer-events:none} +.abs-sleep-custom-row.active .abs-sleep-custom-label{display:none} +.abs-sleep-custom-row input{display:none;flex:1;min-width:0;padding:5px 8px;background:var(--surface);border:1.5px solid var(--accent);border-radius:6px;color:var(--text);font-family:var(--font);font-size:13px;outline:none} +.abs-sleep-custom-row.active input{display:block} +.abs-sleep-custom-row button{display:none;padding:5px 12px;background:var(--accent);border:none;border-radius:6px;color:#fff;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0} +.abs-sleep-custom-row.active button{display:block} .abs-chapter-list{flex-shrink:0;overflow-y:auto;max-height:0;transition:max-height .3s ease;border-top:1px solid transparent} .abs-chapter-list.open{max-height:220px;border-color:var(--border)} .abs-ch-item{display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer;transition:background .15s}