Polished timer and UI

This commit is contained in:
2025-12-17 21:03:47 +01:00
parent 218992cf60
commit de23d34d49
3 changed files with 263 additions and 45 deletions

View File

@@ -53,6 +53,98 @@
background-color: var(--background-modifier-error-hover);
}
.taskweaver-active-timer {
background: linear-gradient(135deg, var(--background-secondary) 0%, var(--background-primary-alt) 100%);
border: 2px solid var(--interactive-accent);
border-radius: var(--radius-l);
padding: var(--size-4-4);
margin-bottom: var(--size-4-4);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.taskweaver-active-timer-header {
text-align: center;
margin-bottom: var(--size-4-2);
}
.taskweaver-active-timer-label {
font-size: var(--font-ui-smaller);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
font-weight: var(--font-semibold);
}
.taskweaver-active-timer-title {
text-align: center;
font-size: var(--font-ui-large);
font-weight: var(--font-semibold);
color: var(--text-normal);
margin-bottom: var(--size-4-3);
}
.taskweaver-active-timer-display {
text-align: center;
font-size: 48px;
font-family: var(--font-monospace);
font-weight: var(--font-bold);
color: var(--interactive-accent);
margin: var(--size-4-4) 0;
letter-spacing: 2px;
}
.taskweaver-active-timer-controls {
display: flex;
gap: var(--size-4-2);
justify-content: center;
margin-top: var(--size-4-3);
}
.taskweaver-timer-control-btn {
padding: var(--size-4-2) var(--size-4-4);
border: none;
border-radius: var(--radius-m);
cursor: pointer;
font-size: var(--font-ui-medium);
font-weight: var(--font-semibold);
transition: all 0.2s;
flex: 1;
max-width: 120px;
}
.taskweaver-timer-control-btn.pause {
background-color: var(--color-orange);
color: white;
}
.taskweaver-timer-control-btn.pause:hover {
background-color: var(--color-orange);
opacity: 0.8;
transform: translateY(-2px);
}
.taskweaver-timer-control-btn.stop {
background-color: var(--background-modifier-error);
color: white;
}
.taskweaver-timer-control-btn.stop:hover {
background-color: var(--background-modifier-error);
opacity: 0.8;
transform: translateY(-2px);
}
.taskweaver-timer-control-btn.complete {
background-color: var(--color-green);
color: white;
}
.taskweaver-timer-control-btn.complete:hover {
background-color: var(--color-green);
opacity: 0.8;
transform: translateY(-2px);
}
.taskweaver-category {
margin-bottom: var(--size-4-3);
background-color: var(--background-secondary);
@@ -123,32 +215,47 @@
gap: var(--size-4-1);
}
.taskweaver-timer {
.taskweaver-task-running {
opacity: 0.6;
background-color: var(--background-primary-alt) !important;
}
.taskweaver-timer-small {
font-family: var(--font-monospace);
color: var(--text-muted);
font-size: var(--font-ui-smaller);
min-width: 70px;
min-width: 60px;
text-align: right;
}
.taskweaver-timer-btn,
.taskweaver-start-btn {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
border: none;
border-radius: var(--radius-s);
padding: var(--size-2-1) var(--size-4-2);
cursor: pointer;
font-size: var(--font-ui-small);
transition: all 0.2s;
font-weight: var(--font-semibold);
}
.taskweaver-start-btn:hover {
background-color: var(--interactive-accent-hover);
transform: translateY(-1px);
}
.taskweaver-delete-btn {
background: transparent;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
padding: var(--size-2-1) var(--size-2-3);
cursor: pointer;
font-size: var(--font-ui-small);
color: var(--text-normal);
font-size: var(--font-ui-smaller);
color: var(--text-muted);
transition: all 0.2s;
}
.taskweaver-timer-btn:hover {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
border-color: var(--interactive-accent);
}
.taskweaver-delete-btn:hover {
background-color: var(--background-modifier-error);
color: var(--text-on-accent);